update docs
[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  * @static
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 [required] 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.DataReader} reader [required]  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>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
670      * <pre>
671                 {
672                     data : data,  // array of key=>value data like JsonReader
673                     total : data.length,
674                     success : true
675                     
676                 }
677         </pre>
678             }.</li>
679      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
680      * passed the following arguments:<ul>
681      * <li>r : Roo.data.Record[]</li>
682      * <li>options: Options object from the load call</li>
683      * <li>success: Boolean success indicator</li></ul></li>
684      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
685      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
686      * </ul>
687      */
688     load : function(options){
689         options = options || {};
690         if(this.fireEvent("beforeload", this, options) !== false){
691             this.storeOptions(options);
692             var p = Roo.apply(options.params || {}, this.baseParams);
693             // if meta was not loaded from remote source.. try requesting it.
694             if (!this.reader.metaFromRemote) {
695                 p._requestMeta = 1;
696             }
697             if(this.sortInfo && this.remoteSort){
698                 var pn = this.paramNames;
699                 p[pn["sort"]] = this.sortInfo.field;
700                 p[pn["dir"]] = this.sortInfo.direction;
701             }
702             if (this.multiSort) {
703                 var pn = this.paramNames;
704                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
705             }
706             
707             this.proxy.load(p, this.reader, this.loadRecords, this, options);
708         }
709     },
710
711     /**
712      * Reloads the Record cache from the configured Proxy using the configured Reader and
713      * the options from the last load operation performed.
714      * @param {Object} options (optional) An object containing properties which may override the options
715      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
716      * the most recently used options are reused).
717      */
718     reload : function(options){
719         this.load(Roo.applyIf(options||{}, this.lastOptions));
720     },
721
722     // private
723     // Called as a callback by the Reader during a load operation.
724     loadRecords : function(o, options, success){
725          
726         if(!o){
727             if(success !== false){
728                 this.fireEvent("load", this, [], options, o);
729             }
730             if(options.callback){
731                 options.callback.call(options.scope || this, [], options, false);
732             }
733             return;
734         }
735         // if data returned failure - throw an exception.
736         if (o.success === false) {
737             // show a message if no listener is registered.
738             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
739                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
740             }
741             // loadmask wil be hooked into this..
742             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
743             return;
744         }
745         var r = o.records, t = o.totalRecords || r.length;
746         
747         this.fireEvent("beforeloadadd", this, r, options, o);
748         
749         if(!options || options.add !== true){
750             if(this.pruneModifiedRecords){
751                 this.modified = [];
752             }
753             for(var i = 0, len = r.length; i < len; i++){
754                 r[i].join(this);
755             }
756             if(this.snapshot){
757                 this.data = this.snapshot;
758                 delete this.snapshot;
759             }
760             this.data.clear();
761             this.data.addAll(r);
762             this.totalLength = t;
763             this.applySort();
764             this.fireEvent("datachanged", this);
765         }else{
766             this.totalLength = Math.max(t, this.data.length+r.length);
767             this.add(r);
768         }
769         
770         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
771                 
772             var e = new Roo.data.Record({});
773
774             e.set(this.parent.displayField, this.parent.emptyTitle);
775             e.set(this.parent.valueField, '');
776
777             this.insert(0, e);
778         }
779             
780         this.fireEvent("load", this, r, options, o);
781         if(options.callback){
782             options.callback.call(options.scope || this, r, options, true);
783         }
784     },
785
786
787     /**
788      * Loads data from a passed data block. A Reader which understands the format of the data
789      * must have been configured in the constructor.
790      * @param {Object} data The data block from which to read the Records.  The format of the data expected
791      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
792      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
793      */
794     loadData : function(o, append){
795         var r = this.reader.readRecords(o);
796         this.loadRecords(r, {add: append}, true);
797     },
798     
799      /**
800      * using 'cn' the nested child reader read the child array into it's child stores.
801      * @param {Object} rec The record with a 'children array
802      */
803     loadDataFromChildren : function(rec)
804     {
805         this.loadData(this.reader.toLoadData(rec));
806     },
807     
808
809     /**
810      * Gets the number of cached records.
811      * <p>
812      * <em>If using paging, this may not be the total size of the dataset. If the data object
813      * used by the Reader contains the dataset size, then the getTotalCount() function returns
814      * the data set size</em>
815      */
816     getCount : function(){
817         return this.data.length || 0;
818     },
819
820     /**
821      * Gets the total number of records in the dataset as returned by the server.
822      * <p>
823      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
824      * the dataset size</em>
825      */
826     getTotalCount : function(){
827         return this.totalLength || 0;
828     },
829
830     /**
831      * Returns the sort state of the Store as an object with two properties:
832      * <pre><code>
833  field {String} The name of the field by which the Records are sorted
834  direction {String} The sort order, "ASC" or "DESC"
835      * </code></pre>
836      */
837     getSortState : function(){
838         return this.sortInfo;
839     },
840
841     // private
842     applySort : function(){
843         if(this.sortInfo && !this.remoteSort){
844             var s = this.sortInfo, f = s.field;
845             var st = this.fields.get(f).sortType;
846             var fn = function(r1, r2){
847                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
848                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
849             };
850             this.data.sort(s.direction, fn);
851             if(this.snapshot && this.snapshot != this.data){
852                 this.snapshot.sort(s.direction, fn);
853             }
854         }
855     },
856
857     /**
858      * Sets the default sort column and order to be used by the next load operation.
859      * @param {String} fieldName The name of the field to sort by.
860      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
861      */
862     setDefaultSort : function(field, dir){
863         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
864     },
865
866     /**
867      * Sort the Records.
868      * If remote sorting is used, the sort is performed on the server, and the cache is
869      * reloaded. If local sorting is used, the cache is sorted internally.
870      * @param {String} fieldName The name of the field to sort by.
871      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
872      */
873     sort : function(fieldName, dir){
874         var f = this.fields.get(fieldName);
875         if(!dir){
876             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
877             
878             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
879                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
880             }else{
881                 dir = f.sortDir;
882             }
883         }
884         this.sortToggle[f.name] = dir;
885         this.sortInfo = {field: f.name, direction: dir};
886         if(!this.remoteSort){
887             this.applySort();
888             this.fireEvent("datachanged", this);
889         }else{
890             this.load(this.lastOptions);
891         }
892     },
893
894     /**
895      * Calls the specified function for each of the Records in the cache.
896      * @param {Function} fn The function to call. The Record is passed as the first parameter.
897      * Returning <em>false</em> aborts and exits the iteration.
898      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
899      */
900     each : function(fn, scope){
901         this.data.each(fn, scope);
902     },
903
904     /**
905      * Gets all records modified since the last commit.  Modified records are persisted across load operations
906      * (e.g., during paging).
907      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
908      */
909     getModifiedRecords : function(){
910         return this.modified;
911     },
912
913     // private
914     createFilterFn : function(property, value, anyMatch){
915         if(!value.exec){ // not a regex
916             value = String(value);
917             if(value.length == 0){
918                 return false;
919             }
920             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
921         }
922         return function(r){
923             return value.test(r.data[property]);
924         };
925     },
926
927     /**
928      * Sums the value of <i>property</i> for each record between start and end and returns the result.
929      * @param {String} property A field on your records
930      * @param {Number} start The record index to start at (defaults to 0)
931      * @param {Number} end The last record index to include (defaults to length - 1)
932      * @return {Number} The sum
933      */
934     sum : function(property, start, end){
935         var rs = this.data.items, v = 0;
936         start = start || 0;
937         end = (end || end === 0) ? end : rs.length-1;
938
939         for(var i = start; i <= end; i++){
940             v += (rs[i].data[property] || 0);
941         }
942         return v;
943     },
944
945     /**
946      * Filter the records by a specified property.
947      * @param {String} field A field on your records
948      * @param {String/RegExp} value Either a string that the field
949      * should start with or a RegExp to test against the field
950      * @param {Boolean} anyMatch True to match any part not just the beginning
951      */
952     filter : function(property, value, anyMatch){
953         var fn = this.createFilterFn(property, value, anyMatch);
954         return fn ? this.filterBy(fn) : this.clearFilter();
955     },
956
957     /**
958      * Filter by a function. The specified function will be called with each
959      * record in this data source. If the function returns true the record is included,
960      * otherwise it is filtered.
961      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
962      * @param {Object} scope (optional) The scope of the function (defaults to this)
963      */
964     filterBy : function(fn, scope){
965         this.snapshot = this.snapshot || this.data;
966         this.data = this.queryBy(fn, scope||this);
967         this.fireEvent("datachanged", this);
968     },
969
970     /**
971      * Query the records by a specified property.
972      * @param {String} field A field on your records
973      * @param {String/RegExp} value Either a string that the field
974      * should start with or a RegExp to test against the field
975      * @param {Boolean} anyMatch True to match any part not just the beginning
976      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
977      */
978     query : function(property, value, anyMatch){
979         var fn = this.createFilterFn(property, value, anyMatch);
980         return fn ? this.queryBy(fn) : this.data.clone();
981     },
982
983     /**
984      * Query by a function. The specified function will be called with each
985      * record in this data source. If the function returns true the record is included
986      * in the results.
987      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
988      * @param {Object} scope (optional) The scope of the function (defaults to this)
989       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
990      **/
991     queryBy : function(fn, scope){
992         var data = this.snapshot || this.data;
993         return data.filterBy(fn, scope||this);
994     },
995
996     /**
997      * Collects unique values for a particular dataIndex from this store.
998      * @param {String} dataIndex The property to collect
999      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
1000      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
1001      * @return {Array} An array of the unique values
1002      **/
1003     collect : function(dataIndex, allowNull, bypassFilter){
1004         var d = (bypassFilter === true && this.snapshot) ?
1005                 this.snapshot.items : this.data.items;
1006         var v, sv, r = [], l = {};
1007         for(var i = 0, len = d.length; i < len; i++){
1008             v = d[i].data[dataIndex];
1009             sv = String(v);
1010             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
1011                 l[sv] = true;
1012                 r[r.length] = v;
1013             }
1014         }
1015         return r;
1016     },
1017
1018     /**
1019      * Revert to a view of the Record cache with no filtering applied.
1020      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
1021      */
1022     clearFilter : function(suppressEvent){
1023         if(this.snapshot && this.snapshot != this.data){
1024             this.data = this.snapshot;
1025             delete this.snapshot;
1026             if(suppressEvent !== true){
1027                 this.fireEvent("datachanged", this);
1028             }
1029         }
1030     },
1031
1032     // private
1033     afterEdit : function(record){
1034         if(this.modified.indexOf(record) == -1){
1035             this.modified.push(record);
1036         }
1037         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
1038     },
1039     
1040     // private
1041     afterReject : function(record){
1042         this.modified.remove(record);
1043         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
1044     },
1045
1046     // private
1047     afterCommit : function(record){
1048         this.modified.remove(record);
1049         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
1050     },
1051
1052     /**
1053      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
1054      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
1055      */
1056     commitChanges : function(){
1057         var m = this.modified.slice(0);
1058         this.modified = [];
1059         for(var i = 0, len = m.length; i < len; i++){
1060             m[i].commit();
1061         }
1062     },
1063
1064     /**
1065      * Cancel outstanding changes on all changed records.
1066      */
1067     rejectChanges : function(){
1068         var m = this.modified.slice(0);
1069         this.modified = [];
1070         for(var i = 0, len = m.length; i < len; i++){
1071             m[i].reject();
1072         }
1073     },
1074
1075     onMetaChange : function(meta, rtype, o){
1076         this.recordType = rtype;
1077         this.fields = rtype.prototype.fields;
1078         delete this.snapshot;
1079         this.sortInfo = meta.sortInfo || this.sortInfo;
1080         this.modified = [];
1081         this.fireEvent('metachange', this, this.reader.meta);
1082     },
1083     
1084     moveIndex : function(data, type)
1085     {
1086         var index = this.indexOf(data);
1087         
1088         var newIndex = index + type;
1089         
1090         this.remove(data);
1091         
1092         this.insert(newIndex, data);
1093         
1094     }
1095 });/*
1096  * Based on:
1097  * Ext JS Library 1.1.1
1098  * Copyright(c) 2006-2007, Ext JS, LLC.
1099  *
1100  * Originally Released Under LGPL - original licence link has changed is not relivant.
1101  *
1102  * Fork - LGPL
1103  * <script type="text/javascript">
1104  */
1105
1106 /**
1107  * @class Roo.data.SimpleStore
1108  * @extends Roo.data.Store
1109  * Small helper class to make creating Stores from Array data easier.
1110  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
1111  * @cfg {Array} fields An array of field definition objects, or field name strings.
1112  * @cfg {Object} an existing reader (eg. copied from another store)
1113  * @cfg {Array} data The multi-dimensional array of data
1114  * @cfg {Roo.data.DataProxy} proxy [not-required]  
1115  * @cfg {Roo.data.Reader} reader  [not-required] 
1116  * @constructor
1117  * @param {Object} config
1118  */
1119 Roo.data.SimpleStore = function(config)
1120 {
1121     Roo.data.SimpleStore.superclass.constructor.call(this, {
1122         isLocal : true,
1123         reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
1124                 id: config.id
1125             },
1126             Roo.data.Record.create(config.fields)
1127         ),
1128         proxy : new Roo.data.MemoryProxy(config.data)
1129     });
1130     this.load();
1131 };
1132 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
1133  * Based on:
1134  * Ext JS Library 1.1.1
1135  * Copyright(c) 2006-2007, Ext JS, LLC.
1136  *
1137  * Originally Released Under LGPL - original licence link has changed is not relivant.
1138  *
1139  * Fork - LGPL
1140  * <script type="text/javascript">
1141  */
1142
1143 /**
1144 /**
1145  * @extends Roo.data.Store
1146  * @class Roo.data.JsonStore
1147  * Small helper class to make creating Stores for JSON data easier. <br/>
1148 <pre><code>
1149 var store = new Roo.data.JsonStore({
1150     url: 'get-images.php',
1151     root: 'images',
1152     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
1153 });
1154 </code></pre>
1155  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
1156  * JsonReader and HttpProxy (unless inline data is provided).</b>
1157  * @cfg {Array} fields An array of field definition objects, or field name strings.
1158  * @constructor
1159  * @param {Object} config
1160  */
1161 Roo.data.JsonStore = function(c){
1162     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
1163         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
1164         reader: new Roo.data.JsonReader(c, c.fields)
1165     }));
1166 };
1167 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
1168  * Based on:
1169  * Ext JS Library 1.1.1
1170  * Copyright(c) 2006-2007, Ext JS, LLC.
1171  *
1172  * Originally Released Under LGPL - original licence link has changed is not relivant.
1173  *
1174  * Fork - LGPL
1175  * <script type="text/javascript">
1176  */
1177
1178  
1179 Roo.data.Field = function(config){
1180     if(typeof config == "string"){
1181         config = {name: config};
1182     }
1183     Roo.apply(this, config);
1184     
1185     if(!this.type){
1186         this.type = "auto";
1187     }
1188     
1189     var st = Roo.data.SortTypes;
1190     // named sortTypes are supported, here we look them up
1191     if(typeof this.sortType == "string"){
1192         this.sortType = st[this.sortType];
1193     }
1194     
1195     // set default sortType for strings and dates
1196     if(!this.sortType){
1197         switch(this.type){
1198             case "string":
1199                 this.sortType = st.asUCString;
1200                 break;
1201             case "date":
1202                 this.sortType = st.asDate;
1203                 break;
1204             default:
1205                 this.sortType = st.none;
1206         }
1207     }
1208
1209     // define once
1210     var stripRe = /[\$,%]/g;
1211
1212     // prebuilt conversion function for this field, instead of
1213     // switching every time we're reading a value
1214     if(!this.convert){
1215         var cv, dateFormat = this.dateFormat;
1216         switch(this.type){
1217             case "":
1218             case "auto":
1219             case undefined:
1220                 cv = function(v){ return v; };
1221                 break;
1222             case "string":
1223                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
1224                 break;
1225             case "int":
1226                 cv = function(v){
1227                     return v !== undefined && v !== null && v !== '' ?
1228                            parseInt(String(v).replace(stripRe, ""), 10) : '';
1229                     };
1230                 break;
1231             case "float":
1232                 cv = function(v){
1233                     return v !== undefined && v !== null && v !== '' ?
1234                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
1235                     };
1236                 break;
1237             case "bool":
1238             case "boolean":
1239                 cv = function(v){ return v === true || v === "true" || v == 1; };
1240                 break;
1241             case "date":
1242                 cv = function(v){
1243                     if(!v){
1244                         return '';
1245                     }
1246                     if(v instanceof Date){
1247                         return v;
1248                     }
1249                     if(dateFormat){
1250                         if(dateFormat == "timestamp"){
1251                             return new Date(v*1000);
1252                         }
1253                         return Date.parseDate(v, dateFormat);
1254                     }
1255                     var parsed = Date.parse(v);
1256                     return parsed ? new Date(parsed) : null;
1257                 };
1258              break;
1259             
1260         }
1261         this.convert = cv;
1262     }
1263 };
1264
1265 Roo.data.Field.prototype = {
1266     dateFormat: null,
1267     defaultValue: "",
1268     mapping: null,
1269     sortType : null,
1270     sortDir : "ASC"
1271 };/*
1272  * Based on:
1273  * Ext JS Library 1.1.1
1274  * Copyright(c) 2006-2007, Ext JS, LLC.
1275  *
1276  * Originally Released Under LGPL - original licence link has changed is not relivant.
1277  *
1278  * Fork - LGPL
1279  * <script type="text/javascript">
1280  */
1281  
1282 // Base class for reading structured data from a data source.  This class is intended to be
1283 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
1284
1285 /**
1286  * @class Roo.data.DataReader
1287  * @abstract
1288  * Base class for reading structured data from a data source.  This class is intended to be
1289  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
1290  */
1291
1292 Roo.data.DataReader = function(meta, recordType){
1293     
1294     this.meta = meta;
1295     
1296     this.recordType = recordType instanceof Array ? 
1297         Roo.data.Record.create(recordType) : recordType;
1298 };
1299
1300 Roo.data.DataReader.prototype = {
1301     
1302     
1303     readerType : 'Data',
1304      /**
1305      * Create an empty record
1306      * @param {Object} data (optional) - overlay some values
1307      * @return {Roo.data.Record} record created.
1308      */
1309     newRow :  function(d) {
1310         var da =  {};
1311         this.recordType.prototype.fields.each(function(c) {
1312             switch( c.type) {
1313                 case 'int' : da[c.name] = 0; break;
1314                 case 'date' : da[c.name] = new Date(); break;
1315                 case 'float' : da[c.name] = 0.0; break;
1316                 case 'boolean' : da[c.name] = false; break;
1317                 default : da[c.name] = ""; break;
1318             }
1319             
1320         });
1321         return new this.recordType(Roo.apply(da, d));
1322     }
1323     
1324     
1325 };/*
1326  * Based on:
1327  * Ext JS Library 1.1.1
1328  * Copyright(c) 2006-2007, Ext JS, LLC.
1329  *
1330  * Originally Released Under LGPL - original licence link has changed is not relivant.
1331  *
1332  * Fork - LGPL
1333  * <script type="text/javascript">
1334  */
1335
1336 /**
1337  * @class Roo.data.DataProxy
1338  * @extends Roo.util.Observable
1339  * @abstract
1340  * This class is an abstract base class for implementations which provide retrieval of
1341  * unformatted data objects.<br>
1342  * <p>
1343  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
1344  * (of the appropriate type which knows how to parse the data object) to provide a block of
1345  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
1346  * <p>
1347  * Custom implementations must implement the load method as described in
1348  * {@link Roo.data.HttpProxy#load}.
1349  */
1350 Roo.data.DataProxy = function(){
1351     this.addEvents({
1352         /**
1353          * @event beforeload
1354          * Fires before a network request is made to retrieve a data object.
1355          * @param {Object} This DataProxy object.
1356          * @param {Object} params The params parameter to the load function.
1357          */
1358         beforeload : true,
1359         /**
1360          * @event load
1361          * Fires before the load method's callback is called.
1362          * @param {Object} This DataProxy object.
1363          * @param {Object} o The data object.
1364          * @param {Object} arg The callback argument object passed to the load function.
1365          */
1366         load : true,
1367         /**
1368          * @event loadexception
1369          * Fires if an Exception occurs during data retrieval.
1370          * @param {Object} This DataProxy object.
1371          * @param {Object} o The data object.
1372          * @param {Object} arg The callback argument object passed to the load function.
1373          * @param {Object} e The Exception.
1374          */
1375         loadexception : true
1376     });
1377     Roo.data.DataProxy.superclass.constructor.call(this);
1378 };
1379
1380 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
1381
1382     /**
1383      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
1384      */
1385 /*
1386  * Based on:
1387  * Ext JS Library 1.1.1
1388  * Copyright(c) 2006-2007, Ext JS, LLC.
1389  *
1390  * Originally Released Under LGPL - original licence link has changed is not relivant.
1391  *
1392  * Fork - LGPL
1393  * <script type="text/javascript">
1394  */
1395 /**
1396  * @class Roo.data.MemoryProxy
1397  * @extends Roo.data.DataProxy
1398  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
1399  * to the Reader when its load method is called.
1400  * @constructor
1401  * @param {Object} config  A config object containing the objects needed for the Store to access data,
1402  */
1403 Roo.data.MemoryProxy = function(config){
1404     var data = config;
1405     if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
1406         data = config.data;
1407     }
1408     Roo.data.MemoryProxy.superclass.constructor.call(this);
1409     this.data = data;
1410 };
1411
1412 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
1413     
1414     /**
1415      *  @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
1416      */
1417     /**
1418      * Load data from the requested source (in this case an in-memory
1419      * data object passed to the constructor), read the data object into
1420      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
1421      * process that block using the passed callback.
1422      * @param {Object} params This parameter is not used by the MemoryProxy class.
1423      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1424      * object into a block of Roo.data.Records.
1425      * @param {Function} callback The function into which to pass the block of Roo.data.records.
1426      * The function must be passed <ul>
1427      * <li>The Record block object</li>
1428      * <li>The "arg" argument from the load function</li>
1429      * <li>A boolean success indicator</li>
1430      * </ul>
1431      * @param {Object} scope The scope in which to call the callback
1432      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1433      */
1434     load : function(params, reader, callback, scope, arg){
1435         params = params || {};
1436         var result;
1437         try {
1438             result = reader.readRecords(params.data ? params.data :this.data);
1439         }catch(e){
1440             this.fireEvent("loadexception", this, arg, null, e);
1441             callback.call(scope, null, arg, false);
1442             return;
1443         }
1444         callback.call(scope, result, arg, true);
1445     },
1446     
1447     // private
1448     update : function(params, records){
1449         
1450     }
1451 });/*
1452  * Based on:
1453  * Ext JS Library 1.1.1
1454  * Copyright(c) 2006-2007, Ext JS, LLC.
1455  *
1456  * Originally Released Under LGPL - original licence link has changed is not relivant.
1457  *
1458  * Fork - LGPL
1459  * <script type="text/javascript">
1460  */
1461 /**
1462  * @class Roo.data.HttpProxy
1463  * @extends Roo.data.DataProxy
1464  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
1465  * configured to reference a certain URL.<br><br>
1466  * <p>
1467  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
1468  * from which the running page was served.<br><br>
1469  * <p>
1470  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
1471  * <p>
1472  * Be aware that to enable the browser to parse an XML document, the server must set
1473  * the Content-Type header in the HTTP response to "text/xml".
1474  * @constructor
1475  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
1476  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
1477  * will be used to make the request.
1478  */
1479 Roo.data.HttpProxy = function(conn){
1480     Roo.data.HttpProxy.superclass.constructor.call(this);
1481     // is conn a conn config or a real conn?
1482     this.conn = conn;
1483     this.useAjax = !conn || !conn.events;
1484   
1485 };
1486
1487 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
1488     // thse are take from connection...
1489     
1490     /**
1491      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
1492      */
1493     /**
1494      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
1495      * extra parameters to each request made by this object. (defaults to undefined)
1496      */
1497     /**
1498      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
1499      *  to each request made by this object. (defaults to undefined)
1500      */
1501     /**
1502      * @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)
1503      */
1504     /**
1505      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
1506      */
1507      /**
1508      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
1509      * @type Boolean
1510      */
1511   
1512
1513     /**
1514      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
1515      * @type Boolean
1516      */
1517     /**
1518      * Return the {@link Roo.data.Connection} object being used by this Proxy.
1519      * @return {Connection} The Connection object. This object may be used to subscribe to events on
1520      * a finer-grained basis than the DataProxy events.
1521      */
1522     getConnection : function(){
1523         return this.useAjax ? Roo.Ajax : this.conn;
1524     },
1525
1526     /**
1527      * Load data from the configured {@link Roo.data.Connection}, read the data object into
1528      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
1529      * process that block using the passed callback.
1530      * @param {Object} params An object containing properties which are to be used as HTTP parameters
1531      * for the request to the remote server.
1532      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1533      * object into a block of Roo.data.Records.
1534      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
1535      * The function must be passed <ul>
1536      * <li>The Record block object</li>
1537      * <li>The "arg" argument from the load function</li>
1538      * <li>A boolean success indicator</li>
1539      * </ul>
1540      * @param {Object} scope The scope in which to call the callback
1541      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1542      */
1543     load : function(params, reader, callback, scope, arg){
1544         if(this.fireEvent("beforeload", this, params) !== false){
1545             var  o = {
1546                 params : params || {},
1547                 request: {
1548                     callback : callback,
1549                     scope : scope,
1550                     arg : arg
1551                 },
1552                 reader: reader,
1553                 callback : this.loadResponse,
1554                 scope: this
1555             };
1556             if(this.useAjax){
1557                 Roo.applyIf(o, this.conn);
1558                 if(this.activeRequest){
1559                     Roo.Ajax.abort(this.activeRequest);
1560                 }
1561                 this.activeRequest = Roo.Ajax.request(o);
1562             }else{
1563                 this.conn.request(o);
1564             }
1565         }else{
1566             callback.call(scope||this, null, arg, false);
1567         }
1568     },
1569
1570     // private
1571     loadResponse : function(o, success, response){
1572         delete this.activeRequest;
1573         if(!success){
1574             this.fireEvent("loadexception", this, o, response);
1575             o.request.callback.call(o.request.scope, null, o.request.arg, false);
1576             return;
1577         }
1578         var result;
1579         try {
1580             result = o.reader.read(response);
1581         }catch(e){
1582             o.success = false;
1583             o.raw = { errorMsg : response.responseText };
1584             this.fireEvent("loadexception", this, o, response, e);
1585             o.request.callback.call(o.request.scope, o, o.request.arg, false);
1586             return;
1587         }
1588         
1589         this.fireEvent("load", this, o, o.request.arg);
1590         o.request.callback.call(o.request.scope, result, o.request.arg, true);
1591     },
1592
1593     // private
1594     update : function(dataSet){
1595
1596     },
1597
1598     // private
1599     updateResponse : function(dataSet){
1600
1601     }
1602 });/*
1603  * Based on:
1604  * Ext JS Library 1.1.1
1605  * Copyright(c) 2006-2007, Ext JS, LLC.
1606  *
1607  * Originally Released Under LGPL - original licence link has changed is not relivant.
1608  *
1609  * Fork - LGPL
1610  * <script type="text/javascript">
1611  */
1612
1613 /**
1614  * @class Roo.data.ScriptTagProxy
1615  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
1616  * other than the originating domain of the running page.<br><br>
1617  * <p>
1618  * <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
1619  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
1620  * <p>
1621  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
1622  * source code that is used as the source inside a &lt;script> tag.<br><br>
1623  * <p>
1624  * In order for the browser to process the returned data, the server must wrap the data object
1625  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
1626  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
1627  * depending on whether the callback name was passed:
1628  * <p>
1629  * <pre><code>
1630 boolean scriptTag = false;
1631 String cb = request.getParameter("callback");
1632 if (cb != null) {
1633     scriptTag = true;
1634     response.setContentType("text/javascript");
1635 } else {
1636     response.setContentType("application/x-json");
1637 }
1638 Writer out = response.getWriter();
1639 if (scriptTag) {
1640     out.write(cb + "(");
1641 }
1642 out.print(dataBlock.toJsonString());
1643 if (scriptTag) {
1644     out.write(");");
1645 }
1646 </pre></code>
1647  *
1648  * @constructor
1649  * @param {Object} config A configuration object.
1650  */
1651 Roo.data.ScriptTagProxy = function(config){
1652     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
1653     Roo.apply(this, config);
1654     this.head = document.getElementsByTagName("head")[0];
1655 };
1656
1657 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
1658
1659 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
1660     /**
1661      * @cfg {String} url The URL from which to request the data object.
1662      */
1663     /**
1664      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
1665      */
1666     timeout : 30000,
1667     /**
1668      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
1669      * the server the name of the callback function set up by the load call to process the returned data object.
1670      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
1671      * javascript output which calls this named function passing the data object as its only parameter.
1672      */
1673     callbackParam : "callback",
1674     /**
1675      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
1676      * name to the request.
1677      */
1678     nocache : true,
1679
1680     /**
1681      * Load data from the configured URL, read the data object into
1682      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
1683      * process that block using the passed callback.
1684      * @param {Object} params An object containing properties which are to be used as HTTP parameters
1685      * for the request to the remote server.
1686      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1687      * object into a block of Roo.data.Records.
1688      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
1689      * The function must be passed <ul>
1690      * <li>The Record block object</li>
1691      * <li>The "arg" argument from the load function</li>
1692      * <li>A boolean success indicator</li>
1693      * </ul>
1694      * @param {Object} scope The scope in which to call the callback
1695      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1696      */
1697     load : function(params, reader, callback, scope, arg){
1698         if(this.fireEvent("beforeload", this, params) !== false){
1699
1700             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
1701
1702             var url = this.url;
1703             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
1704             if(this.nocache){
1705                 url += "&_dc=" + (new Date().getTime());
1706             }
1707             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
1708             var trans = {
1709                 id : transId,
1710                 cb : "stcCallback"+transId,
1711                 scriptId : "stcScript"+transId,
1712                 params : params,
1713                 arg : arg,
1714                 url : url,
1715                 callback : callback,
1716                 scope : scope,
1717                 reader : reader
1718             };
1719             var conn = this;
1720
1721             window[trans.cb] = function(o){
1722                 conn.handleResponse(o, trans);
1723             };
1724
1725             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
1726
1727             if(this.autoAbort !== false){
1728                 this.abort();
1729             }
1730
1731             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
1732
1733             var script = document.createElement("script");
1734             script.setAttribute("src", url);
1735             script.setAttribute("type", "text/javascript");
1736             script.setAttribute("id", trans.scriptId);
1737             this.head.appendChild(script);
1738
1739             this.trans = trans;
1740         }else{
1741             callback.call(scope||this, null, arg, false);
1742         }
1743     },
1744
1745     // private
1746     isLoading : function(){
1747         return this.trans ? true : false;
1748     },
1749
1750     /**
1751      * Abort the current server request.
1752      */
1753     abort : function(){
1754         if(this.isLoading()){
1755             this.destroyTrans(this.trans);
1756         }
1757     },
1758
1759     // private
1760     destroyTrans : function(trans, isLoaded){
1761         this.head.removeChild(document.getElementById(trans.scriptId));
1762         clearTimeout(trans.timeoutId);
1763         if(isLoaded){
1764             window[trans.cb] = undefined;
1765             try{
1766                 delete window[trans.cb];
1767             }catch(e){}
1768         }else{
1769             // if hasn't been loaded, wait for load to remove it to prevent script error
1770             window[trans.cb] = function(){
1771                 window[trans.cb] = undefined;
1772                 try{
1773                     delete window[trans.cb];
1774                 }catch(e){}
1775             };
1776         }
1777     },
1778
1779     // private
1780     handleResponse : function(o, trans){
1781         this.trans = false;
1782         this.destroyTrans(trans, true);
1783         var result;
1784         try {
1785             result = trans.reader.readRecords(o);
1786         }catch(e){
1787             this.fireEvent("loadexception", this, o, trans.arg, e);
1788             trans.callback.call(trans.scope||window, null, trans.arg, false);
1789             return;
1790         }
1791         this.fireEvent("load", this, o, trans.arg);
1792         trans.callback.call(trans.scope||window, result, trans.arg, true);
1793     },
1794
1795     // private
1796     handleFailure : function(trans){
1797         this.trans = false;
1798         this.destroyTrans(trans, false);
1799         this.fireEvent("loadexception", this, null, trans.arg);
1800         trans.callback.call(trans.scope||window, null, trans.arg, false);
1801     }
1802 });/*
1803  * Based on:
1804  * Ext JS Library 1.1.1
1805  * Copyright(c) 2006-2007, Ext JS, LLC.
1806  *
1807  * Originally Released Under LGPL - original licence link has changed is not relivant.
1808  *
1809  * Fork - LGPL
1810  * <script type="text/javascript">
1811  */
1812
1813 /**
1814  * @class Roo.data.JsonReader
1815  * @extends Roo.data.DataReader
1816  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
1817  * based on mappings in a provided Roo.data.Record constructor.
1818  * 
1819  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
1820  * in the reply previously. 
1821  * 
1822  * <p>
1823  * Example code:
1824  * <pre><code>
1825 var RecordDef = Roo.data.Record.create([
1826     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
1827     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
1828 ]);
1829 var myReader = new Roo.data.JsonReader({
1830     totalProperty: "results",    // The property which contains the total dataset size (optional)
1831     root: "rows",                // The property which contains an Array of row objects
1832     id: "id"                     // The property within each row object that provides an ID for the record (optional)
1833 }, RecordDef);
1834 </code></pre>
1835  * <p>
1836  * This would consume a JSON file like this:
1837  * <pre><code>
1838 { 'results': 2, 'rows': [
1839     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
1840     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
1841 }
1842 </code></pre>
1843  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
1844  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
1845  * paged from the remote server.
1846  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
1847  * @cfg {String} root name of the property which contains the Array of row objects.
1848  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
1849  * @cfg {Array} fields Array of field definition objects
1850  * @constructor
1851  * Create a new JsonReader
1852  * @param {Object} meta Metadata configuration options
1853  * @param {Object} recordType Either an Array of field definition objects,
1854  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
1855  */
1856 Roo.data.JsonReader = function(meta, recordType){
1857     
1858     meta = meta || {};
1859     // set some defaults:
1860     Roo.applyIf(meta, {
1861         totalProperty: 'total',
1862         successProperty : 'success',
1863         root : 'data',
1864         id : 'id'
1865     });
1866     
1867     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
1868 };
1869 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
1870     
1871     readerType : 'Json',
1872     
1873     /**
1874      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
1875      * Used by Store query builder to append _requestMeta to params.
1876      * 
1877      */
1878     metaFromRemote : false,
1879     /**
1880      * This method is only used by a DataProxy which has retrieved data from a remote server.
1881      * @param {Object} response The XHR object which contains the JSON data in its responseText.
1882      * @return {Object} data A data block which is used by an Roo.data.Store object as
1883      * a cache of Roo.data.Records.
1884      */
1885     read : function(response){
1886         var json = response.responseText;
1887        
1888         var o = /* eval:var:o */ eval("("+json+")");
1889         if(!o) {
1890             throw {message: "JsonReader.read: Json object not found"};
1891         }
1892         
1893         if(o.metaData){
1894             
1895             delete this.ef;
1896             this.metaFromRemote = true;
1897             this.meta = o.metaData;
1898             this.recordType = Roo.data.Record.create(o.metaData.fields);
1899             this.onMetaChange(this.meta, this.recordType, o);
1900         }
1901         return this.readRecords(o);
1902     },
1903
1904     // private function a store will implement
1905     onMetaChange : function(meta, recordType, o){
1906
1907     },
1908
1909     /**
1910          * @ignore
1911          */
1912     simpleAccess: function(obj, subsc) {
1913         return obj[subsc];
1914     },
1915
1916         /**
1917          * @ignore
1918          */
1919     getJsonAccessor: function(){
1920         var re = /[\[\.]/;
1921         return function(expr) {
1922             try {
1923                 return(re.test(expr))
1924                     ? new Function("obj", "return obj." + expr)
1925                     : function(obj){
1926                         return obj[expr];
1927                     };
1928             } catch(e){}
1929             return Roo.emptyFn;
1930         };
1931     }(),
1932
1933     /**
1934      * Create a data block containing Roo.data.Records from an XML document.
1935      * @param {Object} o An object which contains an Array of row objects in the property specified
1936      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
1937      * which contains the total size of the dataset.
1938      * @return {Object} data A data block which is used by an Roo.data.Store object as
1939      * a cache of Roo.data.Records.
1940      */
1941     readRecords : function(o){
1942         /**
1943          * After any data loads, the raw JSON data is available for further custom processing.
1944          * @type Object
1945          */
1946         this.o = o;
1947         var s = this.meta, Record = this.recordType,
1948             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
1949
1950 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
1951         if (!this.ef) {
1952             if(s.totalProperty) {
1953                     this.getTotal = this.getJsonAccessor(s.totalProperty);
1954                 }
1955                 if(s.successProperty) {
1956                     this.getSuccess = this.getJsonAccessor(s.successProperty);
1957                 }
1958                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
1959                 if (s.id) {
1960                         var g = this.getJsonAccessor(s.id);
1961                         this.getId = function(rec) {
1962                                 var r = g(rec);  
1963                                 return (r === undefined || r === "") ? null : r;
1964                         };
1965                 } else {
1966                         this.getId = function(){return null;};
1967                 }
1968             this.ef = [];
1969             for(var jj = 0; jj < fl; jj++){
1970                 f = fi[jj];
1971                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
1972                 this.ef[jj] = this.getJsonAccessor(map);
1973             }
1974         }
1975
1976         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
1977         if(s.totalProperty){
1978             var vt = parseInt(this.getTotal(o), 10);
1979             if(!isNaN(vt)){
1980                 totalRecords = vt;
1981             }
1982         }
1983         if(s.successProperty){
1984             var vs = this.getSuccess(o);
1985             if(vs === false || vs === 'false'){
1986                 success = false;
1987             }
1988         }
1989         var records = [];
1990         for(var i = 0; i < c; i++){
1991             var n = root[i];
1992             var values = {};
1993             var id = this.getId(n);
1994             for(var j = 0; j < fl; j++){
1995                 f = fi[j];
1996                                 var v = this.ef[j](n);
1997                                 if (!f.convert) {
1998                                         Roo.log('missing convert for ' + f.name);
1999                                         Roo.log(f);
2000                                         continue;
2001                                 }
2002                                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
2003             }
2004                         if (!Record) {
2005                                 return {
2006                                         raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
2007                                         success : false,
2008                                         records : [],
2009                                         totalRecords : 0
2010                                 };
2011                         }
2012             var record = new Record(values, id);
2013             record.json = n;
2014             records[i] = record;
2015         }
2016         return {
2017             raw : o,
2018             success : success,
2019             records : records,
2020             totalRecords : totalRecords
2021         };
2022     },
2023     // used when loading children.. @see loadDataFromChildren
2024     toLoadData: function(rec)
2025     {
2026         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
2027         var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
2028         return { data : data, total : data.length };
2029         
2030     }
2031 });/*
2032  * Based on:
2033  * Ext JS Library 1.1.1
2034  * Copyright(c) 2006-2007, Ext JS, LLC.
2035  *
2036  * Originally Released Under LGPL - original licence link has changed is not relivant.
2037  *
2038  * Fork - LGPL
2039  * <script type="text/javascript">
2040  */
2041
2042 /**
2043  * @class Roo.data.XmlReader
2044  * @extends Roo.data.DataReader
2045  * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
2046  * based on mappings in a provided Roo.data.Record constructor.<br><br>
2047  * <p>
2048  * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
2049  * header in the HTTP response must be set to "text/xml".</em>
2050  * <p>
2051  * Example code:
2052  * <pre><code>
2053 var RecordDef = Roo.data.Record.create([
2054    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
2055    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
2056 ]);
2057 var myReader = new Roo.data.XmlReader({
2058    totalRecords: "results", // The element which contains the total dataset size (optional)
2059    record: "row",           // The repeated element which contains row information
2060    id: "id"                 // The element within the row that provides an ID for the record (optional)
2061 }, RecordDef);
2062 </code></pre>
2063  * <p>
2064  * This would consume an XML file like this:
2065  * <pre><code>
2066 &lt;?xml?>
2067 &lt;dataset>
2068  &lt;results>2&lt;/results>
2069  &lt;row>
2070    &lt;id>1&lt;/id>
2071    &lt;name>Bill&lt;/name>
2072    &lt;occupation>Gardener&lt;/occupation>
2073  &lt;/row>
2074  &lt;row>
2075    &lt;id>2&lt;/id>
2076    &lt;name>Ben&lt;/name>
2077    &lt;occupation>Horticulturalist&lt;/occupation>
2078  &lt;/row>
2079 &lt;/dataset>
2080 </code></pre>
2081  * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
2082  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
2083  * paged from the remote server.
2084  * @cfg {String} record The DomQuery path to the repeated element which contains record information.
2085  * @cfg {String} success The DomQuery path to the success attribute used by forms.
2086  * @cfg {String} id The DomQuery path relative from the record element to the element that contains
2087  * a record identifier value.
2088  * @constructor
2089  * Create a new XmlReader
2090  * @param {Object} meta Metadata configuration options
2091  * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
2092  * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
2093  * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
2094  */
2095 Roo.data.XmlReader = function(meta, recordType){
2096     meta = meta || {};
2097     Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
2098 };
2099 Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
2100     
2101     readerType : 'Xml',
2102     
2103     /**
2104      * This method is only used by a DataProxy which has retrieved data from a remote server.
2105          * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
2106          * to contain a method called 'responseXML' that returns an XML document object.
2107      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
2108      * a cache of Roo.data.Records.
2109      */
2110     read : function(response){
2111         var doc = response.responseXML;
2112         if(!doc) {
2113             throw {message: "XmlReader.read: XML Document not available"};
2114         }
2115         return this.readRecords(doc);
2116     },
2117
2118     /**
2119      * Create a data block containing Roo.data.Records from an XML document.
2120          * @param {Object} doc A parsed XML document.
2121      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
2122      * a cache of Roo.data.Records.
2123      */
2124     readRecords : function(doc){
2125         /**
2126          * After any data loads/reads, the raw XML Document is available for further custom processing.
2127          * @type XMLDocument
2128          */
2129         this.xmlData = doc;
2130         var root = doc.documentElement || doc;
2131         var q = Roo.DomQuery;
2132         var recordType = this.recordType, fields = recordType.prototype.fields;
2133         var sid = this.meta.id;
2134         var totalRecords = 0, success = true;
2135         if(this.meta.totalRecords){
2136             totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
2137         }
2138         
2139         if(this.meta.success){
2140             var sv = q.selectValue(this.meta.success, root, true);
2141             success = sv !== false && sv !== 'false';
2142         }
2143         var records = [];
2144         var ns = q.select(this.meta.record, root);
2145         for(var i = 0, len = ns.length; i < len; i++) {
2146                 var n = ns[i];
2147                 var values = {};
2148                 var id = sid ? q.selectValue(sid, n) : undefined;
2149                 for(var j = 0, jlen = fields.length; j < jlen; j++){
2150                     var f = fields.items[j];
2151                 var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
2152                     v = f.convert(v);
2153                     values[f.name] = v;
2154                 }
2155                 var record = new recordType(values, id);
2156                 record.node = n;
2157                 records[records.length] = record;
2158             }
2159
2160             return {
2161                 success : success,
2162                 records : records,
2163                 totalRecords : totalRecords || records.length
2164             };
2165     }
2166 });/*
2167  * Based on:
2168  * Ext JS Library 1.1.1
2169  * Copyright(c) 2006-2007, Ext JS, LLC.
2170  *
2171  * Originally Released Under LGPL - original licence link has changed is not relivant.
2172  *
2173  * Fork - LGPL
2174  * <script type="text/javascript">
2175  */
2176
2177 /**
2178  * @class Roo.data.ArrayReader
2179  * @extends Roo.data.DataReader
2180  * Data reader class to create an Array of Roo.data.Record objects from an Array.
2181  * Each element of that Array represents a row of data fields. The
2182  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
2183  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
2184  * <p>
2185  * Example code:.
2186  * <pre><code>
2187 var RecordDef = Roo.data.Record.create([
2188     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
2189     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
2190 ]);
2191 var myReader = new Roo.data.ArrayReader({
2192     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
2193 }, RecordDef);
2194 </code></pre>
2195  * <p>
2196  * This would consume an Array like this:
2197  * <pre><code>
2198 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
2199   </code></pre>
2200  
2201  * @constructor
2202  * Create a new JsonReader
2203  * @param {Object} meta Metadata configuration options.
2204  * @param {Object|Array} recordType Either an Array of field definition objects
2205  * 
2206  * @cfg {Array} fields Array of field definition objects
2207  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
2208  * as specified to {@link Roo.data.Record#create},
2209  * or an {@link Roo.data.Record} object
2210  *
2211  * 
2212  * created using {@link Roo.data.Record#create}.
2213  */
2214 Roo.data.ArrayReader = function(meta, recordType)
2215 {    
2216     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
2217 };
2218
2219 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
2220     
2221       /**
2222      * Create a data block containing Roo.data.Records from an XML document.
2223      * @param {Object} o An Array of row objects which represents the dataset.
2224      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
2225      * a cache of Roo.data.Records.
2226      */
2227     readRecords : function(o)
2228     {
2229         var sid = this.meta ? this.meta.id : null;
2230         var recordType = this.recordType, fields = recordType.prototype.fields;
2231         var records = [];
2232         var root = o;
2233         for(var i = 0; i < root.length; i++){
2234             var n = root[i];
2235             var values = {};
2236             var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
2237             for(var j = 0, jlen = fields.length; j < jlen; j++){
2238                 var f = fields.items[j];
2239                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
2240                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
2241                 v = f.convert(v);
2242                 values[f.name] = v;
2243             }
2244             var record = new recordType(values, id);
2245             record.json = n;
2246             records[records.length] = record;
2247         }
2248         return {
2249             records : records,
2250             totalRecords : records.length
2251         };
2252     },
2253     // used when loading children.. @see loadDataFromChildren
2254     toLoadData: function(rec)
2255     {
2256         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
2257         return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
2258         
2259     }
2260     
2261     
2262 });/*
2263  * Based on:
2264  * Ext JS Library 1.1.1
2265  * Copyright(c) 2006-2007, Ext JS, LLC.
2266  *
2267  * Originally Released Under LGPL - original licence link has changed is not relivant.
2268  *
2269  * Fork - LGPL
2270  * <script type="text/javascript">
2271  */
2272
2273
2274 /**
2275  * @class Roo.data.Tree
2276  * @extends Roo.util.Observable
2277  * Represents a tree data structure and bubbles all the events for its nodes. The nodes
2278  * in the tree have most standard DOM functionality.
2279  * @constructor
2280  * @param {Node} root (optional) The root node
2281  */
2282 Roo.data.Tree = function(root){
2283    this.nodeHash = {};
2284    /**
2285     * The root node for this tree
2286     * @type Node
2287     */
2288    this.root = null;
2289    if(root){
2290        this.setRootNode(root);
2291    }
2292    this.addEvents({
2293        /**
2294         * @event append
2295         * Fires when a new child node is appended to a node in this tree.
2296         * @param {Tree} tree The owner tree
2297         * @param {Node} parent The parent node
2298         * @param {Node} node The newly appended node
2299         * @param {Number} index The index of the newly appended node
2300         */
2301        "append" : true,
2302        /**
2303         * @event remove
2304         * Fires when a child node is removed from a node in this tree.
2305         * @param {Tree} tree The owner tree
2306         * @param {Node} parent The parent node
2307         * @param {Node} node The child node removed
2308         */
2309        "remove" : true,
2310        /**
2311         * @event move
2312         * Fires when a node is moved to a new location in the tree
2313         * @param {Tree} tree The owner tree
2314         * @param {Node} node The node moved
2315         * @param {Node} oldParent The old parent of this node
2316         * @param {Node} newParent The new parent of this node
2317         * @param {Number} index The index it was moved to
2318         */
2319        "move" : true,
2320        /**
2321         * @event insert
2322         * Fires when a new child node is inserted in a node in this tree.
2323         * @param {Tree} tree The owner tree
2324         * @param {Node} parent The parent node
2325         * @param {Node} node The child node inserted
2326         * @param {Node} refNode The child node the node was inserted before
2327         */
2328        "insert" : true,
2329        /**
2330         * @event beforeappend
2331         * Fires before a new child is appended to a node in this tree, return false to cancel the append.
2332         * @param {Tree} tree The owner tree
2333         * @param {Node} parent The parent node
2334         * @param {Node} node The child node to be appended
2335         */
2336        "beforeappend" : true,
2337        /**
2338         * @event beforeremove
2339         * Fires before a child is removed from a node in this tree, return false to cancel the remove.
2340         * @param {Tree} tree The owner tree
2341         * @param {Node} parent The parent node
2342         * @param {Node} node The child node to be removed
2343         */
2344        "beforeremove" : true,
2345        /**
2346         * @event beforemove
2347         * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
2348         * @param {Tree} tree The owner tree
2349         * @param {Node} node The node being moved
2350         * @param {Node} oldParent The parent of the node
2351         * @param {Node} newParent The new parent the node is moving to
2352         * @param {Number} index The index it is being moved to
2353         */
2354        "beforemove" : true,
2355        /**
2356         * @event beforeinsert
2357         * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
2358         * @param {Tree} tree The owner tree
2359         * @param {Node} parent The parent node
2360         * @param {Node} node The child node to be inserted
2361         * @param {Node} refNode The child node the node is being inserted before
2362         */
2363        "beforeinsert" : true
2364    });
2365
2366     Roo.data.Tree.superclass.constructor.call(this);
2367 };
2368
2369 Roo.extend(Roo.data.Tree, Roo.util.Observable, {
2370     pathSeparator: "/",
2371
2372     proxyNodeEvent : function(){
2373         return this.fireEvent.apply(this, arguments);
2374     },
2375
2376     /**
2377      * Returns the root node for this tree.
2378      * @return {Node}
2379      */
2380     getRootNode : function(){
2381         return this.root;
2382     },
2383
2384     /**
2385      * Sets the root node for this tree.
2386      * @param {Node} node
2387      * @return {Node}
2388      */
2389     setRootNode : function(node){
2390         this.root = node;
2391         node.ownerTree = this;
2392         node.isRoot = true;
2393         this.registerNode(node);
2394         return node;
2395     },
2396
2397     /**
2398      * Gets a node in this tree by its id.
2399      * @param {String} id
2400      * @return {Node}
2401      */
2402     getNodeById : function(id){
2403         return this.nodeHash[id];
2404     },
2405
2406     registerNode : function(node){
2407         this.nodeHash[node.id] = node;
2408     },
2409
2410     unregisterNode : function(node){
2411         delete this.nodeHash[node.id];
2412     },
2413
2414     toString : function(){
2415         return "[Tree"+(this.id?" "+this.id:"")+"]";
2416     }
2417 });
2418
2419 /**
2420  * @class Roo.data.Node
2421  * @extends Roo.util.Observable
2422  * @cfg {Boolean} leaf true if this node is a leaf and does not have children
2423  * @cfg {String} id The id for this node. If one is not specified, one is generated.
2424  * @constructor
2425  * @param {Object} attributes The attributes/config for the node
2426  */
2427 Roo.data.Node = function(attributes){
2428     /**
2429      * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
2430      * @type {Object}
2431      */
2432     this.attributes = attributes || {};
2433     this.leaf = this.attributes.leaf;
2434     /**
2435      * The node id. @type String
2436      */
2437     this.id = this.attributes.id;
2438     if(!this.id){
2439         this.id = Roo.id(null, "ynode-");
2440         this.attributes.id = this.id;
2441     }
2442      
2443     
2444     /**
2445      * All child nodes of this node. @type Array
2446      */
2447     this.childNodes = [];
2448     if(!this.childNodes.indexOf){ // indexOf is a must
2449         this.childNodes.indexOf = function(o){
2450             for(var i = 0, len = this.length; i < len; i++){
2451                 if(this[i] == o) {
2452                     return i;
2453                 }
2454             }
2455             return -1;
2456         };
2457     }
2458     /**
2459      * The parent node for this node. @type Node
2460      */
2461     this.parentNode = null;
2462     /**
2463      * The first direct child node of this node, or null if this node has no child nodes. @type Node
2464      */
2465     this.firstChild = null;
2466     /**
2467      * The last direct child node of this node, or null if this node has no child nodes. @type Node
2468      */
2469     this.lastChild = null;
2470     /**
2471      * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
2472      */
2473     this.previousSibling = null;
2474     /**
2475      * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
2476      */
2477     this.nextSibling = null;
2478
2479     this.addEvents({
2480        /**
2481         * @event append
2482         * Fires when a new child node is appended
2483         * @param {Tree} tree The owner tree
2484         * @param {Node} this This node
2485         * @param {Node} node The newly appended node
2486         * @param {Number} index The index of the newly appended node
2487         */
2488        "append" : true,
2489        /**
2490         * @event remove
2491         * Fires when a child node is removed
2492         * @param {Tree} tree The owner tree
2493         * @param {Node} this This node
2494         * @param {Node} node The removed node
2495         */
2496        "remove" : true,
2497        /**
2498         * @event move
2499         * Fires when this node is moved to a new location in the tree
2500         * @param {Tree} tree The owner tree
2501         * @param {Node} this This node
2502         * @param {Node} oldParent The old parent of this node
2503         * @param {Node} newParent The new parent of this node
2504         * @param {Number} index The index it was moved to
2505         */
2506        "move" : true,
2507        /**
2508         * @event insert
2509         * Fires when a new child node is inserted.
2510         * @param {Tree} tree The owner tree
2511         * @param {Node} this This node
2512         * @param {Node} node The child node inserted
2513         * @param {Node} refNode The child node the node was inserted before
2514         */
2515        "insert" : true,
2516        /**
2517         * @event beforeappend
2518         * Fires before a new child is appended, return false to cancel the append.
2519         * @param {Tree} tree The owner tree
2520         * @param {Node} this This node
2521         * @param {Node} node The child node to be appended
2522         */
2523        "beforeappend" : true,
2524        /**
2525         * @event beforeremove
2526         * Fires before a child is removed, return false to cancel the remove.
2527         * @param {Tree} tree The owner tree
2528         * @param {Node} this This node
2529         * @param {Node} node The child node to be removed
2530         */
2531        "beforeremove" : true,
2532        /**
2533         * @event beforemove
2534         * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
2535         * @param {Tree} tree The owner tree
2536         * @param {Node} this This node
2537         * @param {Node} oldParent The parent of this node
2538         * @param {Node} newParent The new parent this node is moving to
2539         * @param {Number} index The index it is being moved to
2540         */
2541        "beforemove" : true,
2542        /**
2543         * @event beforeinsert
2544         * Fires before a new child is inserted, return false to cancel the insert.
2545         * @param {Tree} tree The owner tree
2546         * @param {Node} this This node
2547         * @param {Node} node The child node to be inserted
2548         * @param {Node} refNode The child node the node is being inserted before
2549         */
2550        "beforeinsert" : true
2551    });
2552     this.listeners = this.attributes.listeners;
2553     Roo.data.Node.superclass.constructor.call(this);
2554 };
2555
2556 Roo.extend(Roo.data.Node, Roo.util.Observable, {
2557     fireEvent : function(evtName){
2558         // first do standard event for this node
2559         if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
2560             return false;
2561         }
2562         // then bubble it up to the tree if the event wasn't cancelled
2563         var ot = this.getOwnerTree();
2564         if(ot){
2565             if(ot.proxyNodeEvent.apply(ot, arguments) === false){
2566                 return false;
2567             }
2568         }
2569         return true;
2570     },
2571
2572     /**
2573      * Returns true if this node is a leaf
2574      * @return {Boolean}
2575      */
2576     isLeaf : function(){
2577         return this.leaf === true;
2578     },
2579
2580     // private
2581     setFirstChild : function(node){
2582         this.firstChild = node;
2583     },
2584
2585     //private
2586     setLastChild : function(node){
2587         this.lastChild = node;
2588     },
2589
2590
2591     /**
2592      * Returns true if this node is the last child of its parent
2593      * @return {Boolean}
2594      */
2595     isLast : function(){
2596        return (!this.parentNode ? true : this.parentNode.lastChild == this);
2597     },
2598
2599     /**
2600      * Returns true if this node is the first child of its parent
2601      * @return {Boolean}
2602      */
2603     isFirst : function(){
2604        return (!this.parentNode ? true : this.parentNode.firstChild == this);
2605     },
2606
2607     hasChildNodes : function(){
2608         return !this.isLeaf() && this.childNodes.length > 0;
2609     },
2610
2611     /**
2612      * Insert node(s) as the last child node of this node.
2613      * @param {Node/Array} node The node or Array of nodes to append
2614      * @return {Node} The appended node if single append, or null if an array was passed
2615      */
2616     appendChild : function(node){
2617         var multi = false;
2618         if(node instanceof Array){
2619             multi = node;
2620         }else if(arguments.length > 1){
2621             multi = arguments;
2622         }
2623         
2624         // if passed an array or multiple args do them one by one
2625         if(multi){
2626             for(var i = 0, len = multi.length; i < len; i++) {
2627                 this.appendChild(multi[i]);
2628             }
2629         }else{
2630             if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
2631                 return false;
2632             }
2633             var index = this.childNodes.length;
2634             var oldParent = node.parentNode;
2635             // it's a move, make sure we move it cleanly
2636             if(oldParent){
2637                 if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
2638                     return false;
2639                 }
2640                 oldParent.removeChild(node);
2641             }
2642             
2643             index = this.childNodes.length;
2644             if(index == 0){
2645                 this.setFirstChild(node);
2646             }
2647             this.childNodes.push(node);
2648             node.parentNode = this;
2649             var ps = this.childNodes[index-1];
2650             if(ps){
2651                 node.previousSibling = ps;
2652                 ps.nextSibling = node;
2653             }else{
2654                 node.previousSibling = null;
2655             }
2656             node.nextSibling = null;
2657             this.setLastChild(node);
2658             node.setOwnerTree(this.getOwnerTree());
2659             this.fireEvent("append", this.ownerTree, this, node, index);
2660             if(this.ownerTree) {
2661                 this.ownerTree.fireEvent("appendnode", this, node, index);
2662             }
2663             if(oldParent){
2664                 node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
2665             }
2666             return node;
2667         }
2668     },
2669
2670     /**
2671      * Removes a child node from this node.
2672      * @param {Node} node The node to remove
2673      * @return {Node} The removed node
2674      */
2675     removeChild : function(node){
2676         var index = this.childNodes.indexOf(node);
2677         if(index == -1){
2678             return false;
2679         }
2680         if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
2681             return false;
2682         }
2683
2684         // remove it from childNodes collection
2685         this.childNodes.splice(index, 1);
2686
2687         // update siblings
2688         if(node.previousSibling){
2689             node.previousSibling.nextSibling = node.nextSibling;
2690         }
2691         if(node.nextSibling){
2692             node.nextSibling.previousSibling = node.previousSibling;
2693         }
2694
2695         // update child refs
2696         if(this.firstChild == node){
2697             this.setFirstChild(node.nextSibling);
2698         }
2699         if(this.lastChild == node){
2700             this.setLastChild(node.previousSibling);
2701         }
2702
2703         node.setOwnerTree(null);
2704         // clear any references from the node
2705         node.parentNode = null;
2706         node.previousSibling = null;
2707         node.nextSibling = null;
2708         this.fireEvent("remove", this.ownerTree, this, node);
2709         return node;
2710     },
2711
2712     /**
2713      * Inserts the first node before the second node in this nodes childNodes collection.
2714      * @param {Node} node The node to insert
2715      * @param {Node} refNode The node to insert before (if null the node is appended)
2716      * @return {Node} The inserted node
2717      */
2718     insertBefore : function(node, refNode){
2719         if(!refNode){ // like standard Dom, refNode can be null for append
2720             return this.appendChild(node);
2721         }
2722         // nothing to do
2723         if(node == refNode){
2724             return false;
2725         }
2726
2727         if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
2728             return false;
2729         }
2730         var index = this.childNodes.indexOf(refNode);
2731         var oldParent = node.parentNode;
2732         var refIndex = index;
2733
2734         // when moving internally, indexes will change after remove
2735         if(oldParent == this && this.childNodes.indexOf(node) < index){
2736             refIndex--;
2737         }
2738
2739         // it's a move, make sure we move it cleanly
2740         if(oldParent){
2741             if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
2742                 return false;
2743             }
2744             oldParent.removeChild(node);
2745         }
2746         if(refIndex == 0){
2747             this.setFirstChild(node);
2748         }
2749         this.childNodes.splice(refIndex, 0, node);
2750         node.parentNode = this;
2751         var ps = this.childNodes[refIndex-1];
2752         if(ps){
2753             node.previousSibling = ps;
2754             ps.nextSibling = node;
2755         }else{
2756             node.previousSibling = null;
2757         }
2758         node.nextSibling = refNode;
2759         refNode.previousSibling = node;
2760         node.setOwnerTree(this.getOwnerTree());
2761         this.fireEvent("insert", this.ownerTree, this, node, refNode);
2762         if(oldParent){
2763             node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
2764         }
2765         return node;
2766     },
2767
2768     /**
2769      * Returns the child node at the specified index.
2770      * @param {Number} index
2771      * @return {Node}
2772      */
2773     item : function(index){
2774         return this.childNodes[index];
2775     },
2776
2777     /**
2778      * Replaces one child node in this node with another.
2779      * @param {Node} newChild The replacement node
2780      * @param {Node} oldChild The node to replace
2781      * @return {Node} The replaced node
2782      */
2783     replaceChild : function(newChild, oldChild){
2784         this.insertBefore(newChild, oldChild);
2785         this.removeChild(oldChild);
2786         return oldChild;
2787     },
2788
2789     /**
2790      * Returns the index of a child node
2791      * @param {Node} node
2792      * @return {Number} The index of the node or -1 if it was not found
2793      */
2794     indexOf : function(child){
2795         return this.childNodes.indexOf(child);
2796     },
2797
2798     /**
2799      * Returns the tree this node is in.
2800      * @return {Tree}
2801      */
2802     getOwnerTree : function(){
2803         // if it doesn't have one, look for one
2804         if(!this.ownerTree){
2805             var p = this;
2806             while(p){
2807                 if(p.ownerTree){
2808                     this.ownerTree = p.ownerTree;
2809                     break;
2810                 }
2811                 p = p.parentNode;
2812             }
2813         }
2814         return this.ownerTree;
2815     },
2816
2817     /**
2818      * Returns depth of this node (the root node has a depth of 0)
2819      * @return {Number}
2820      */
2821     getDepth : function(){
2822         var depth = 0;
2823         var p = this;
2824         while(p.parentNode){
2825             ++depth;
2826             p = p.parentNode;
2827         }
2828         return depth;
2829     },
2830
2831     // private
2832     setOwnerTree : function(tree){
2833         // if it's move, we need to update everyone
2834         if(tree != this.ownerTree){
2835             if(this.ownerTree){
2836                 this.ownerTree.unregisterNode(this);
2837             }
2838             this.ownerTree = tree;
2839             var cs = this.childNodes;
2840             for(var i = 0, len = cs.length; i < len; i++) {
2841                 cs[i].setOwnerTree(tree);
2842             }
2843             if(tree){
2844                 tree.registerNode(this);
2845             }
2846         }
2847     },
2848
2849     /**
2850      * Returns the path for this node. The path can be used to expand or select this node programmatically.
2851      * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
2852      * @return {String} The path
2853      */
2854     getPath : function(attr){
2855         attr = attr || "id";
2856         var p = this.parentNode;
2857         var b = [this.attributes[attr]];
2858         while(p){
2859             b.unshift(p.attributes[attr]);
2860             p = p.parentNode;
2861         }
2862         var sep = this.getOwnerTree().pathSeparator;
2863         return sep + b.join(sep);
2864     },
2865
2866     /**
2867      * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
2868      * function call will be the scope provided or the current node. The arguments to the function
2869      * will be the args provided or the current node. If the function returns false at any point,
2870      * the bubble is stopped.
2871      * @param {Function} fn The function to call
2872      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2873      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2874      */
2875     bubble : function(fn, scope, args){
2876         var p = this;
2877         while(p){
2878             if(fn.call(scope || p, args || p) === false){
2879                 break;
2880             }
2881             p = p.parentNode;
2882         }
2883     },
2884
2885     /**
2886      * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
2887      * function call will be the scope provided or the current node. The arguments to the function
2888      * will be the args provided or the current node. If the function returns false at any point,
2889      * the cascade is stopped on that branch.
2890      * @param {Function} fn The function to call
2891      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2892      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2893      */
2894     cascade : function(fn, scope, args){
2895         if(fn.call(scope || this, args || this) !== false){
2896             var cs = this.childNodes;
2897             for(var i = 0, len = cs.length; i < len; i++) {
2898                 cs[i].cascade(fn, scope, args);
2899             }
2900         }
2901     },
2902
2903     /**
2904      * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
2905      * function call will be the scope provided or the current node. The arguments to the function
2906      * will be the args provided or the current node. If the function returns false at any point,
2907      * the iteration stops.
2908      * @param {Function} fn The function to call
2909      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2910      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2911      */
2912     eachChild : function(fn, scope, args){
2913         var cs = this.childNodes;
2914         for(var i = 0, len = cs.length; i < len; i++) {
2915                 if(fn.call(scope || this, args || cs[i]) === false){
2916                     break;
2917                 }
2918         }
2919     },
2920
2921     /**
2922      * Finds the first child that has the attribute with the specified value.
2923      * @param {String} attribute The attribute name
2924      * @param {Mixed} value The value to search for
2925      * @return {Node} The found child or null if none was found
2926      */
2927     findChild : function(attribute, value){
2928         var cs = this.childNodes;
2929         for(var i = 0, len = cs.length; i < len; i++) {
2930                 if(cs[i].attributes[attribute] == value){
2931                     return cs[i];
2932                 }
2933         }
2934         return null;
2935     },
2936
2937     /**
2938      * Finds the first child by a custom function. The child matches if the function passed
2939      * returns true.
2940      * @param {Function} fn
2941      * @param {Object} scope (optional)
2942      * @return {Node} The found child or null if none was found
2943      */
2944     findChildBy : function(fn, scope){
2945         var cs = this.childNodes;
2946         for(var i = 0, len = cs.length; i < len; i++) {
2947                 if(fn.call(scope||cs[i], cs[i]) === true){
2948                     return cs[i];
2949                 }
2950         }
2951         return null;
2952     },
2953
2954     /**
2955      * Sorts this nodes children using the supplied sort function
2956      * @param {Function} fn
2957      * @param {Object} scope (optional)
2958      */
2959     sort : function(fn, scope){
2960         var cs = this.childNodes;
2961         var len = cs.length;
2962         if(len > 0){
2963             var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
2964             cs.sort(sortFn);
2965             for(var i = 0; i < len; i++){
2966                 var n = cs[i];
2967                 n.previousSibling = cs[i-1];
2968                 n.nextSibling = cs[i+1];
2969                 if(i == 0){
2970                     this.setFirstChild(n);
2971                 }
2972                 if(i == len-1){
2973                     this.setLastChild(n);
2974                 }
2975             }
2976         }
2977     },
2978
2979     /**
2980      * Returns true if this node is an ancestor (at any point) of the passed node.
2981      * @param {Node} node
2982      * @return {Boolean}
2983      */
2984     contains : function(node){
2985         return node.isAncestor(this);
2986     },
2987
2988     /**
2989      * Returns true if the passed node is an ancestor (at any point) of this node.
2990      * @param {Node} node
2991      * @return {Boolean}
2992      */
2993     isAncestor : function(node){
2994         var p = this.parentNode;
2995         while(p){
2996             if(p == node){
2997                 return true;
2998             }
2999             p = p.parentNode;
3000         }
3001         return false;
3002     },
3003
3004     toString : function(){
3005         return "[Node"+(this.id?" "+this.id:"")+"]";
3006     }
3007 });/*
3008  * Based on:
3009  * Ext JS Library 1.1.1
3010  * Copyright(c) 2006-2007, Ext JS, LLC.
3011  *
3012  * Originally Released Under LGPL - original licence link has changed is not relivant.
3013  *
3014  * Fork - LGPL
3015  * <script type="text/javascript">
3016  */
3017
3018
3019 /**
3020  * @class Roo.Shadow
3021  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
3022  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
3023  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
3024  * @constructor
3025  * Create a new Shadow
3026  * @param {Object} config The config object
3027  */
3028 Roo.Shadow = function(config){
3029     Roo.apply(this, config);
3030     if(typeof this.mode != "string"){
3031         this.mode = this.defaultMode;
3032     }
3033     var o = this.offset, a = {h: 0};
3034     var rad = Math.floor(this.offset/2);
3035     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
3036         case "drop":
3037             a.w = 0;
3038             a.l = a.t = o;
3039             a.t -= 1;
3040             if(Roo.isIE){
3041                 a.l -= this.offset + rad;
3042                 a.t -= this.offset + rad;
3043                 a.w -= rad;
3044                 a.h -= rad;
3045                 a.t += 1;
3046             }
3047         break;
3048         case "sides":
3049             a.w = (o*2);
3050             a.l = -o;
3051             a.t = o-1;
3052             if(Roo.isIE){
3053                 a.l -= (this.offset - rad);
3054                 a.t -= this.offset + rad;
3055                 a.l += 1;
3056                 a.w -= (this.offset - rad)*2;
3057                 a.w -= rad + 1;
3058                 a.h -= 1;
3059             }
3060         break;
3061         case "frame":
3062             a.w = a.h = (o*2);
3063             a.l = a.t = -o;
3064             a.t += 1;
3065             a.h -= 2;
3066             if(Roo.isIE){
3067                 a.l -= (this.offset - rad);
3068                 a.t -= (this.offset - rad);
3069                 a.l += 1;
3070                 a.w -= (this.offset + rad + 1);
3071                 a.h -= (this.offset + rad);
3072                 a.h += 1;
3073             }
3074         break;
3075     };
3076
3077     this.adjusts = a;
3078 };
3079
3080 Roo.Shadow.prototype = {
3081     /**
3082      * @cfg {String} mode
3083      * The shadow display mode.  Supports the following options:<br />
3084      * sides: Shadow displays on both sides and bottom only<br />
3085      * frame: Shadow displays equally on all four sides<br />
3086      * drop: Traditional bottom-right drop shadow (default)
3087      */
3088     mode: false,
3089     /**
3090      * @cfg {String} offset
3091      * The number of pixels to offset the shadow from the element (defaults to 4)
3092      */
3093     offset: 4,
3094
3095     // private
3096     defaultMode: "drop",
3097
3098     /**
3099      * Displays the shadow under the target element
3100      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
3101      */
3102     show : function(target){
3103         target = Roo.get(target);
3104         if(!this.el){
3105             this.el = Roo.Shadow.Pool.pull();
3106             if(this.el.dom.nextSibling != target.dom){
3107                 this.el.insertBefore(target);
3108             }
3109         }
3110         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
3111         if(Roo.isIE){
3112             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
3113         }
3114         this.realign(
3115             target.getLeft(true),
3116             target.getTop(true),
3117             target.getWidth(),
3118             target.getHeight()
3119         );
3120         this.el.dom.style.display = "block";
3121     },
3122
3123     /**
3124      * Returns true if the shadow is visible, else false
3125      */
3126     isVisible : function(){
3127         return this.el ? true : false;  
3128     },
3129
3130     /**
3131      * Direct alignment when values are already available. Show must be called at least once before
3132      * calling this method to ensure it is initialized.
3133      * @param {Number} left The target element left position
3134      * @param {Number} top The target element top position
3135      * @param {Number} width The target element width
3136      * @param {Number} height The target element height
3137      */
3138     realign : function(l, t, w, h){
3139         if(!this.el){
3140             return;
3141         }
3142         var a = this.adjusts, d = this.el.dom, s = d.style;
3143         var iea = 0;
3144         s.left = (l+a.l)+"px";
3145         s.top = (t+a.t)+"px";
3146         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
3147  
3148         if(s.width != sws || s.height != shs){
3149             s.width = sws;
3150             s.height = shs;
3151             if(!Roo.isIE){
3152                 var cn = d.childNodes;
3153                 var sww = Math.max(0, (sw-12))+"px";
3154                 cn[0].childNodes[1].style.width = sww;
3155                 cn[1].childNodes[1].style.width = sww;
3156                 cn[2].childNodes[1].style.width = sww;
3157                 cn[1].style.height = Math.max(0, (sh-12))+"px";
3158             }
3159         }
3160     },
3161
3162     /**
3163      * Hides this shadow
3164      */
3165     hide : function(){
3166         if(this.el){
3167             this.el.dom.style.display = "none";
3168             Roo.Shadow.Pool.push(this.el);
3169             delete this.el;
3170         }
3171     },
3172
3173     /**
3174      * Adjust the z-index of this shadow
3175      * @param {Number} zindex The new z-index
3176      */
3177     setZIndex : function(z){
3178         this.zIndex = z;
3179         if(this.el){
3180             this.el.setStyle("z-index", z);
3181         }
3182     }
3183 };
3184
3185 // Private utility class that manages the internal Shadow cache
3186 Roo.Shadow.Pool = function(){
3187     var p = [];
3188     var markup = Roo.isIE ?
3189                  '<div class="x-ie-shadow"></div>' :
3190                  '<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>';
3191     return {
3192         pull : function(){
3193             var sh = p.shift();
3194             if(!sh){
3195                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
3196                 sh.autoBoxAdjust = false;
3197             }
3198             return sh;
3199         },
3200
3201         push : function(sh){
3202             p.push(sh);
3203         }
3204     };
3205 }();/*
3206  * Based on:
3207  * Ext JS Library 1.1.1
3208  * Copyright(c) 2006-2007, Ext JS, LLC.
3209  *
3210  * Originally Released Under LGPL - original licence link has changed is not relivant.
3211  *
3212  * Fork - LGPL
3213  * <script type="text/javascript">
3214  */
3215
3216
3217 /**
3218  * @class Roo.SplitBar
3219  * @extends Roo.util.Observable
3220  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
3221  * <br><br>
3222  * Usage:
3223  * <pre><code>
3224 var split = new Roo.SplitBar("elementToDrag", "elementToSize",
3225                    Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
3226 split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
3227 split.minSize = 100;
3228 split.maxSize = 600;
3229 split.animate = true;
3230 split.on('moved', splitterMoved);
3231 </code></pre>
3232  * @constructor
3233  * Create a new SplitBar
3234  * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
3235  * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
3236  * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
3237  * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
3238                         Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
3239                         position of the SplitBar).
3240  */
3241 Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
3242     
3243     /** @private */
3244     this.el = Roo.get(dragElement, true);
3245     this.el.dom.unselectable = "on";
3246     /** @private */
3247     this.resizingEl = Roo.get(resizingElement, true);
3248
3249     /**
3250      * @private
3251      * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
3252      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
3253      * @type Number
3254      */
3255     this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
3256     
3257     /**
3258      * The minimum size of the resizing element. (Defaults to 0)
3259      * @type Number
3260      */
3261     this.minSize = 0;
3262     
3263     /**
3264      * The maximum size of the resizing element. (Defaults to 2000)
3265      * @type Number
3266      */
3267     this.maxSize = 2000;
3268     
3269     /**
3270      * Whether to animate the transition to the new size
3271      * @type Boolean
3272      */
3273     this.animate = false;
3274     
3275     /**
3276      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
3277      * @type Boolean
3278      */
3279     this.useShim = false;
3280     
3281     /** @private */
3282     this.shim = null;
3283     
3284     if(!existingProxy){
3285         /** @private */
3286         this.proxy = Roo.SplitBar.createProxy(this.orientation);
3287     }else{
3288         this.proxy = Roo.get(existingProxy).dom;
3289     }
3290     /** @private */
3291     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
3292     
3293     /** @private */
3294     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
3295     
3296     /** @private */
3297     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
3298     
3299     /** @private */
3300     this.dragSpecs = {};
3301     
3302     /**
3303      * @private The adapter to use to positon and resize elements
3304      */
3305     this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
3306     this.adapter.init(this);
3307     
3308     if(this.orientation == Roo.SplitBar.HORIZONTAL){
3309         /** @private */
3310         this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
3311         this.el.addClass("x-splitbar-h");
3312     }else{
3313         /** @private */
3314         this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
3315         this.el.addClass("x-splitbar-v");
3316     }
3317     
3318     this.addEvents({
3319         /**
3320          * @event resize
3321          * Fires when the splitter is moved (alias for {@link #event-moved})
3322          * @param {Roo.SplitBar} this
3323          * @param {Number} newSize the new width or height
3324          */
3325         "resize" : true,
3326         /**
3327          * @event moved
3328          * Fires when the splitter is moved
3329          * @param {Roo.SplitBar} this
3330          * @param {Number} newSize the new width or height
3331          */
3332         "moved" : true,
3333         /**
3334          * @event beforeresize
3335          * Fires before the splitter is dragged
3336          * @param {Roo.SplitBar} this
3337          */
3338         "beforeresize" : true,
3339
3340         "beforeapply" : true
3341     });
3342
3343     Roo.util.Observable.call(this);
3344 };
3345
3346 Roo.extend(Roo.SplitBar, Roo.util.Observable, {
3347     onStartProxyDrag : function(x, y){
3348         this.fireEvent("beforeresize", this);
3349         if(!this.overlay){
3350             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
3351             o.unselectable();
3352             o.enableDisplayMode("block");
3353             // all splitbars share the same overlay
3354             Roo.SplitBar.prototype.overlay = o;
3355         }
3356         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
3357         this.overlay.show();
3358         Roo.get(this.proxy).setDisplayed("block");
3359         var size = this.adapter.getElementSize(this);
3360         this.activeMinSize = this.getMinimumSize();;
3361         this.activeMaxSize = this.getMaximumSize();;
3362         var c1 = size - this.activeMinSize;
3363         var c2 = Math.max(this.activeMaxSize - size, 0);
3364         if(this.orientation == Roo.SplitBar.HORIZONTAL){
3365             this.dd.resetConstraints();
3366             this.dd.setXConstraint(
3367                 this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
3368                 this.placement == Roo.SplitBar.LEFT ? c2 : c1
3369             );
3370             this.dd.setYConstraint(0, 0);
3371         }else{
3372             this.dd.resetConstraints();
3373             this.dd.setXConstraint(0, 0);
3374             this.dd.setYConstraint(
3375                 this.placement == Roo.SplitBar.TOP ? c1 : c2, 
3376                 this.placement == Roo.SplitBar.TOP ? c2 : c1
3377             );
3378          }
3379         this.dragSpecs.startSize = size;
3380         this.dragSpecs.startPoint = [x, y];
3381         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
3382     },
3383     
3384     /** 
3385      * @private Called after the drag operation by the DDProxy
3386      */
3387     onEndProxyDrag : function(e){
3388         Roo.get(this.proxy).setDisplayed(false);
3389         var endPoint = Roo.lib.Event.getXY(e);
3390         if(this.overlay){
3391             this.overlay.hide();
3392         }
3393         var newSize;
3394         if(this.orientation == Roo.SplitBar.HORIZONTAL){
3395             newSize = this.dragSpecs.startSize + 
3396                 (this.placement == Roo.SplitBar.LEFT ?
3397                     endPoint[0] - this.dragSpecs.startPoint[0] :
3398                     this.dragSpecs.startPoint[0] - endPoint[0]
3399                 );
3400         }else{
3401             newSize = this.dragSpecs.startSize + 
3402                 (this.placement == Roo.SplitBar.TOP ?
3403                     endPoint[1] - this.dragSpecs.startPoint[1] :
3404                     this.dragSpecs.startPoint[1] - endPoint[1]
3405                 );
3406         }
3407         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
3408         if(newSize != this.dragSpecs.startSize){
3409             if(this.fireEvent('beforeapply', this, newSize) !== false){
3410                 this.adapter.setElementSize(this, newSize);
3411                 this.fireEvent("moved", this, newSize);
3412                 this.fireEvent("resize", this, newSize);
3413             }
3414         }
3415     },
3416     
3417     /**
3418      * Get the adapter this SplitBar uses
3419      * @return The adapter object
3420      */
3421     getAdapter : function(){
3422         return this.adapter;
3423     },
3424     
3425     /**
3426      * Set the adapter this SplitBar uses
3427      * @param {Object} adapter A SplitBar adapter object
3428      */
3429     setAdapter : function(adapter){
3430         this.adapter = adapter;
3431         this.adapter.init(this);
3432     },
3433     
3434     /**
3435      * Gets the minimum size for the resizing element
3436      * @return {Number} The minimum size
3437      */
3438     getMinimumSize : function(){
3439         return this.minSize;
3440     },
3441     
3442     /**
3443      * Sets the minimum size for the resizing element
3444      * @param {Number} minSize The minimum size
3445      */
3446     setMinimumSize : function(minSize){
3447         this.minSize = minSize;
3448     },
3449     
3450     /**
3451      * Gets the maximum size for the resizing element
3452      * @return {Number} The maximum size
3453      */
3454     getMaximumSize : function(){
3455         return this.maxSize;
3456     },
3457     
3458     /**
3459      * Sets the maximum size for the resizing element
3460      * @param {Number} maxSize The maximum size
3461      */
3462     setMaximumSize : function(maxSize){
3463         this.maxSize = maxSize;
3464     },
3465     
3466     /**
3467      * Sets the initialize size for the resizing element
3468      * @param {Number} size The initial size
3469      */
3470     setCurrentSize : function(size){
3471         var oldAnimate = this.animate;
3472         this.animate = false;
3473         this.adapter.setElementSize(this, size);
3474         this.animate = oldAnimate;
3475     },
3476     
3477     /**
3478      * Destroy this splitbar. 
3479      * @param {Boolean} removeEl True to remove the element
3480      */
3481     destroy : function(removeEl){
3482         if(this.shim){
3483             this.shim.remove();
3484         }
3485         this.dd.unreg();
3486         this.proxy.parentNode.removeChild(this.proxy);
3487         if(removeEl){
3488             this.el.remove();
3489         }
3490     }
3491 });
3492
3493 /**
3494  * @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.
3495  */
3496 Roo.SplitBar.createProxy = function(dir){
3497     var proxy = new Roo.Element(document.createElement("div"));
3498     proxy.unselectable();
3499     var cls = 'x-splitbar-proxy';
3500     proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
3501     document.body.appendChild(proxy.dom);
3502     return proxy.dom;
3503 };
3504
3505 /** 
3506  * @class Roo.SplitBar.BasicLayoutAdapter
3507  * Default Adapter. It assumes the splitter and resizing element are not positioned
3508  * elements and only gets/sets the width of the element. Generally used for table based layouts.
3509  */
3510 Roo.SplitBar.BasicLayoutAdapter = function(){
3511 };
3512
3513 Roo.SplitBar.BasicLayoutAdapter.prototype = {
3514     // do nothing for now
3515     init : function(s){
3516     
3517     },
3518     /**
3519      * Called before drag operations to get the current size of the resizing element. 
3520      * @param {Roo.SplitBar} s The SplitBar using this adapter
3521      */
3522      getElementSize : function(s){
3523         if(s.orientation == Roo.SplitBar.HORIZONTAL){
3524             return s.resizingEl.getWidth();
3525         }else{
3526             return s.resizingEl.getHeight();
3527         }
3528     },
3529     
3530     /**
3531      * Called after drag operations to set the size of the resizing element.
3532      * @param {Roo.SplitBar} s The SplitBar using this adapter
3533      * @param {Number} newSize The new size to set
3534      * @param {Function} onComplete A function to be invoked when resizing is complete
3535      */
3536     setElementSize : function(s, newSize, onComplete){
3537         if(s.orientation == Roo.SplitBar.HORIZONTAL){
3538             if(!s.animate){
3539                 s.resizingEl.setWidth(newSize);
3540                 if(onComplete){
3541                     onComplete(s, newSize);
3542                 }
3543             }else{
3544                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
3545             }
3546         }else{
3547             
3548             if(!s.animate){
3549                 s.resizingEl.setHeight(newSize);
3550                 if(onComplete){
3551                     onComplete(s, newSize);
3552                 }
3553             }else{
3554                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
3555             }
3556         }
3557     }
3558 };
3559
3560 /** 
3561  *@class Roo.SplitBar.AbsoluteLayoutAdapter
3562  * @extends Roo.SplitBar.BasicLayoutAdapter
3563  * Adapter that  moves the splitter element to align with the resized sizing element. 
3564  * Used with an absolute positioned SplitBar.
3565  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
3566  * document.body, make sure you assign an id to the body element.
3567  */
3568 Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
3569     this.basic = new Roo.SplitBar.BasicLayoutAdapter();
3570     this.container = Roo.get(container);
3571 };
3572
3573 Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
3574     init : function(s){
3575         this.basic.init(s);
3576     },
3577     
3578     getElementSize : function(s){
3579         return this.basic.getElementSize(s);
3580     },
3581     
3582     setElementSize : function(s, newSize, onComplete){
3583         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
3584     },
3585     
3586     moveSplitter : function(s){
3587         var yes = Roo.SplitBar;
3588         switch(s.placement){
3589             case yes.LEFT:
3590                 s.el.setX(s.resizingEl.getRight());
3591                 break;
3592             case yes.RIGHT:
3593                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
3594                 break;
3595             case yes.TOP:
3596                 s.el.setY(s.resizingEl.getBottom());
3597                 break;
3598             case yes.BOTTOM:
3599                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
3600                 break;
3601         }
3602     }
3603 };
3604
3605 /**
3606  * Orientation constant - Create a vertical SplitBar
3607  * @static
3608  * @type Number
3609  */
3610 Roo.SplitBar.VERTICAL = 1;
3611
3612 /**
3613  * Orientation constant - Create a horizontal SplitBar
3614  * @static
3615  * @type Number
3616  */
3617 Roo.SplitBar.HORIZONTAL = 2;
3618
3619 /**
3620  * Placement constant - The resizing element is to the left of the splitter element
3621  * @static
3622  * @type Number
3623  */
3624 Roo.SplitBar.LEFT = 1;
3625
3626 /**
3627  * Placement constant - The resizing element is to the right of the splitter element
3628  * @static
3629  * @type Number
3630  */
3631 Roo.SplitBar.RIGHT = 2;
3632
3633 /**
3634  * Placement constant - The resizing element is positioned above the splitter element
3635  * @static
3636  * @type Number
3637  */
3638 Roo.SplitBar.TOP = 3;
3639
3640 /**
3641  * Placement constant - The resizing element is positioned under splitter element
3642  * @static
3643  * @type Number
3644  */
3645 Roo.SplitBar.BOTTOM = 4;
3646 /*
3647  * Based on:
3648  * Ext JS Library 1.1.1
3649  * Copyright(c) 2006-2007, Ext JS, LLC.
3650  *
3651  * Originally Released Under LGPL - original licence link has changed is not relivant.
3652  *
3653  * Fork - LGPL
3654  * <script type="text/javascript">
3655  */
3656
3657 /**
3658  * @class Roo.View
3659  * @extends Roo.util.Observable
3660  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
3661  * This class also supports single and multi selection modes. <br>
3662  * Create a data model bound view:
3663  <pre><code>
3664  var store = new Roo.data.Store(...);
3665
3666  var view = new Roo.View({
3667     el : "my-element",
3668     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
3669  
3670     singleSelect: true,
3671     selectedClass: "ydataview-selected",
3672     store: store
3673  });
3674
3675  // listen for node click?
3676  view.on("click", function(vw, index, node, e){
3677  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
3678  });
3679
3680  // load XML data
3681  dataModel.load("foobar.xml");
3682  </code></pre>
3683  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
3684  * <br><br>
3685  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
3686  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
3687  * 
3688  * Note: old style constructor is still suported (container, template, config)
3689  * 
3690  * @constructor
3691  * Create a new View
3692  * @param {Object} config The config object
3693  * 
3694  */
3695 Roo.View = function(config, depreciated_tpl, depreciated_config){
3696     
3697     this.parent = false;
3698     
3699     if (typeof(depreciated_tpl) == 'undefined') {
3700         // new way.. - universal constructor.
3701         Roo.apply(this, config);
3702         this.el  = Roo.get(this.el);
3703     } else {
3704         // old format..
3705         this.el  = Roo.get(config);
3706         this.tpl = depreciated_tpl;
3707         Roo.apply(this, depreciated_config);
3708     }
3709     this.wrapEl  = this.el.wrap().wrap();
3710     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
3711     
3712     
3713     if(typeof(this.tpl) == "string"){
3714         this.tpl = new Roo.Template(this.tpl);
3715     } else {
3716         // support xtype ctors..
3717         this.tpl = new Roo.factory(this.tpl, Roo);
3718     }
3719     
3720     
3721     this.tpl.compile();
3722     
3723     /** @private */
3724     this.addEvents({
3725         /**
3726          * @event beforeclick
3727          * Fires before a click is processed. Returns false to cancel the default action.
3728          * @param {Roo.View} this
3729          * @param {Number} index The index of the target node
3730          * @param {HTMLElement} node The target node
3731          * @param {Roo.EventObject} e The raw event object
3732          */
3733             "beforeclick" : true,
3734         /**
3735          * @event click
3736          * Fires when a template node is clicked.
3737          * @param {Roo.View} this
3738          * @param {Number} index The index of the target node
3739          * @param {HTMLElement} node The target node
3740          * @param {Roo.EventObject} e The raw event object
3741          */
3742             "click" : true,
3743         /**
3744          * @event dblclick
3745          * Fires when a template node is double clicked.
3746          * @param {Roo.View} this
3747          * @param {Number} index The index of the target node
3748          * @param {HTMLElement} node The target node
3749          * @param {Roo.EventObject} e The raw event object
3750          */
3751             "dblclick" : true,
3752         /**
3753          * @event contextmenu
3754          * Fires when a template node is right clicked.
3755          * @param {Roo.View} this
3756          * @param {Number} index The index of the target node
3757          * @param {HTMLElement} node The target node
3758          * @param {Roo.EventObject} e The raw event object
3759          */
3760             "contextmenu" : true,
3761         /**
3762          * @event selectionchange
3763          * Fires when the selected nodes change.
3764          * @param {Roo.View} this
3765          * @param {Array} selections Array of the selected nodes
3766          */
3767             "selectionchange" : true,
3768     
3769         /**
3770          * @event beforeselect
3771          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
3772          * @param {Roo.View} this
3773          * @param {HTMLElement} node The node to be selected
3774          * @param {Array} selections Array of currently selected nodes
3775          */
3776             "beforeselect" : true,
3777         /**
3778          * @event preparedata
3779          * Fires on every row to render, to allow you to change the data.
3780          * @param {Roo.View} this
3781          * @param {Object} data to be rendered (change this)
3782          */
3783           "preparedata" : true
3784           
3785           
3786         });
3787
3788
3789
3790     this.el.on({
3791         "click": this.onClick,
3792         "dblclick": this.onDblClick,
3793         "contextmenu": this.onContextMenu,
3794         scope:this
3795     });
3796
3797     this.selections = [];
3798     this.nodes = [];
3799     this.cmp = new Roo.CompositeElementLite([]);
3800     if(this.store){
3801         this.store = Roo.factory(this.store, Roo.data);
3802         this.setStore(this.store, true);
3803     }
3804     
3805     if ( this.footer && this.footer.xtype) {
3806            
3807          var fctr = this.wrapEl.appendChild(document.createElement("div"));
3808         
3809         this.footer.dataSource = this.store;
3810         this.footer.container = fctr;
3811         this.footer = Roo.factory(this.footer, Roo);
3812         fctr.insertFirst(this.el);
3813         
3814         // this is a bit insane - as the paging toolbar seems to detach the el..
3815 //        dom.parentNode.parentNode.parentNode
3816          // they get detached?
3817     }
3818     
3819     
3820     Roo.View.superclass.constructor.call(this);
3821     
3822     
3823 };
3824
3825 Roo.extend(Roo.View, Roo.util.Observable, {
3826     
3827      /**
3828      * @cfg {Roo.data.Store} store Data store to load data from.
3829      */
3830     store : false,
3831     
3832     /**
3833      * @cfg {String|Roo.Element} el The container element.
3834      */
3835     el : '',
3836     
3837     /**
3838      * @cfg {String|Roo.Template} tpl The template used by this View 
3839      */
3840     tpl : false,
3841     /**
3842      * @cfg {String} dataName the named area of the template to use as the data area
3843      *                          Works with domtemplates roo-name="name"
3844      */
3845     dataName: false,
3846     /**
3847      * @cfg {String} selectedClass The css class to add to selected nodes
3848      */
3849     selectedClass : "x-view-selected",
3850      /**
3851      * @cfg {String} emptyText The empty text to show when nothing is loaded.
3852      */
3853     emptyText : "",
3854     
3855     /**
3856      * @cfg {String} text to display on mask (default Loading)
3857      */
3858     mask : false,
3859     /**
3860      * @cfg {Boolean} multiSelect Allow multiple selection
3861      */
3862     multiSelect : false,
3863     /**
3864      * @cfg {Boolean} singleSelect Allow single selection
3865      */
3866     singleSelect:  false,
3867     
3868     /**
3869      * @cfg {Boolean} toggleSelect - selecting 
3870      */
3871     toggleSelect : false,
3872     
3873     /**
3874      * @cfg {Boolean} tickable - selecting 
3875      */
3876     tickable : false,
3877     
3878     /**
3879      * Returns the element this view is bound to.
3880      * @return {Roo.Element}
3881      */
3882     getEl : function(){
3883         return this.wrapEl;
3884     },
3885     
3886     
3887
3888     /**
3889      * Refreshes the view. - called by datachanged on the store. - do not call directly.
3890      */
3891     refresh : function(){
3892         //Roo.log('refresh');
3893         var t = this.tpl;
3894         
3895         // if we are using something like 'domtemplate', then
3896         // the what gets used is:
3897         // t.applySubtemplate(NAME, data, wrapping data..)
3898         // the outer template then get' applied with
3899         //     the store 'extra data'
3900         // and the body get's added to the
3901         //      roo-name="data" node?
3902         //      <span class='roo-tpl-{name}'></span> ?????
3903         
3904         
3905         
3906         this.clearSelections();
3907         this.el.update("");
3908         var html = [];
3909         var records = this.store.getRange();
3910         if(records.length < 1) {
3911             
3912             // is this valid??  = should it render a template??
3913             
3914             this.el.update(this.emptyText);
3915             return;
3916         }
3917         var el = this.el;
3918         if (this.dataName) {
3919             this.el.update(t.apply(this.store.meta)); //????
3920             el = this.el.child('.roo-tpl-' + this.dataName);
3921         }
3922         
3923         for(var i = 0, len = records.length; i < len; i++){
3924             var data = this.prepareData(records[i].data, i, records[i]);
3925             this.fireEvent("preparedata", this, data, i, records[i]);
3926             
3927             var d = Roo.apply({}, data);
3928             
3929             if(this.tickable){
3930                 Roo.apply(d, {'roo-id' : Roo.id()});
3931                 
3932                 var _this = this;
3933             
3934                 Roo.each(this.parent.item, function(item){
3935                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
3936                         return;
3937                     }
3938                     Roo.apply(d, {'roo-data-checked' : 'checked'});
3939                 });
3940             }
3941             
3942             html[html.length] = Roo.util.Format.trim(
3943                 this.dataName ?
3944                     t.applySubtemplate(this.dataName, d, this.store.meta) :
3945                     t.apply(d)
3946             );
3947         }
3948         
3949         
3950         
3951         el.update(html.join(""));
3952         this.nodes = el.dom.childNodes;
3953         this.updateIndexes(0);
3954     },
3955     
3956
3957     /**
3958      * Function to override to reformat the data that is sent to
3959      * the template for each node.
3960      * DEPRICATED - use the preparedata event handler.
3961      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
3962      * a JSON object for an UpdateManager bound view).
3963      */
3964     prepareData : function(data, index, record)
3965     {
3966         this.fireEvent("preparedata", this, data, index, record);
3967         return data;
3968     },
3969
3970     onUpdate : function(ds, record){
3971         // Roo.log('on update');   
3972         this.clearSelections();
3973         var index = this.store.indexOf(record);
3974         var n = this.nodes[index];
3975         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
3976         n.parentNode.removeChild(n);
3977         this.updateIndexes(index, index);
3978     },
3979
3980     
3981     
3982 // --------- FIXME     
3983     onAdd : function(ds, records, index)
3984     {
3985         //Roo.log(['on Add', ds, records, index] );        
3986         this.clearSelections();
3987         if(this.nodes.length == 0){
3988             this.refresh();
3989             return;
3990         }
3991         var n = this.nodes[index];
3992         for(var i = 0, len = records.length; i < len; i++){
3993             var d = this.prepareData(records[i].data, i, records[i]);
3994             if(n){
3995                 this.tpl.insertBefore(n, d);
3996             }else{
3997                 
3998                 this.tpl.append(this.el, d);
3999             }
4000         }
4001         this.updateIndexes(index);
4002     },
4003
4004     onRemove : function(ds, record, index){
4005        // Roo.log('onRemove');
4006         this.clearSelections();
4007         var el = this.dataName  ?
4008             this.el.child('.roo-tpl-' + this.dataName) :
4009             this.el; 
4010         
4011         el.dom.removeChild(this.nodes[index]);
4012         this.updateIndexes(index);
4013     },
4014
4015     /**
4016      * Refresh an individual node.
4017      * @param {Number} index
4018      */
4019     refreshNode : function(index){
4020         this.onUpdate(this.store, this.store.getAt(index));
4021     },
4022
4023     updateIndexes : function(startIndex, endIndex){
4024         var ns = this.nodes;
4025         startIndex = startIndex || 0;
4026         endIndex = endIndex || ns.length - 1;
4027         for(var i = startIndex; i <= endIndex; i++){
4028             ns[i].nodeIndex = i;
4029         }
4030     },
4031
4032     /**
4033      * Changes the data store this view uses and refresh the view.
4034      * @param {Store} store
4035      */
4036     setStore : function(store, initial){
4037         if(!initial && this.store){
4038             this.store.un("datachanged", this.refresh);
4039             this.store.un("add", this.onAdd);
4040             this.store.un("remove", this.onRemove);
4041             this.store.un("update", this.onUpdate);
4042             this.store.un("clear", this.refresh);
4043             this.store.un("beforeload", this.onBeforeLoad);
4044             this.store.un("load", this.onLoad);
4045             this.store.un("loadexception", this.onLoad);
4046         }
4047         if(store){
4048           
4049             store.on("datachanged", this.refresh, this);
4050             store.on("add", this.onAdd, this);
4051             store.on("remove", this.onRemove, this);
4052             store.on("update", this.onUpdate, this);
4053             store.on("clear", this.refresh, this);
4054             store.on("beforeload", this.onBeforeLoad, this);
4055             store.on("load", this.onLoad, this);
4056             store.on("loadexception", this.onLoad, this);
4057         }
4058         
4059         if(store){
4060             this.refresh();
4061         }
4062     },
4063     /**
4064      * onbeforeLoad - masks the loading area.
4065      *
4066      */
4067     onBeforeLoad : function(store,opts)
4068     {
4069          //Roo.log('onBeforeLoad');   
4070         if (!opts.add) {
4071             this.el.update("");
4072         }
4073         this.el.mask(this.mask ? this.mask : "Loading" ); 
4074     },
4075     onLoad : function ()
4076     {
4077         this.el.unmask();
4078     },
4079     
4080
4081     /**
4082      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
4083      * @param {HTMLElement} node
4084      * @return {HTMLElement} The template node
4085      */
4086     findItemFromChild : function(node){
4087         var el = this.dataName  ?
4088             this.el.child('.roo-tpl-' + this.dataName,true) :
4089             this.el.dom; 
4090         
4091         if(!node || node.parentNode == el){
4092                     return node;
4093             }
4094             var p = node.parentNode;
4095             while(p && p != el){
4096             if(p.parentNode == el){
4097                 return p;
4098             }
4099             p = p.parentNode;
4100         }
4101             return null;
4102     },
4103
4104     /** @ignore */
4105     onClick : function(e){
4106         var item = this.findItemFromChild(e.getTarget());
4107         if(item){
4108             var index = this.indexOf(item);
4109             if(this.onItemClick(item, index, e) !== false){
4110                 this.fireEvent("click", this, index, item, e);
4111             }
4112         }else{
4113             this.clearSelections();
4114         }
4115     },
4116
4117     /** @ignore */
4118     onContextMenu : function(e){
4119         var item = this.findItemFromChild(e.getTarget());
4120         if(item){
4121             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
4122         }
4123     },
4124
4125     /** @ignore */
4126     onDblClick : function(e){
4127         var item = this.findItemFromChild(e.getTarget());
4128         if(item){
4129             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
4130         }
4131     },
4132
4133     onItemClick : function(item, index, e)
4134     {
4135         if(this.fireEvent("beforeclick", this, index, item, e) === false){
4136             return false;
4137         }
4138         if (this.toggleSelect) {
4139             var m = this.isSelected(item) ? 'unselect' : 'select';
4140             //Roo.log(m);
4141             var _t = this;
4142             _t[m](item, true, false);
4143             return true;
4144         }
4145         if(this.multiSelect || this.singleSelect){
4146             if(this.multiSelect && e.shiftKey && this.lastSelection){
4147                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
4148             }else{
4149                 this.select(item, this.multiSelect && e.ctrlKey);
4150                 this.lastSelection = item;
4151             }
4152             
4153             if(!this.tickable){
4154                 e.preventDefault();
4155             }
4156             
4157         }
4158         return true;
4159     },
4160
4161     /**
4162      * Get the number of selected nodes.
4163      * @return {Number}
4164      */
4165     getSelectionCount : function(){
4166         return this.selections.length;
4167     },
4168
4169     /**
4170      * Get the currently selected nodes.
4171      * @return {Array} An array of HTMLElements
4172      */
4173     getSelectedNodes : function(){
4174         return this.selections;
4175     },
4176
4177     /**
4178      * Get the indexes of the selected nodes.
4179      * @return {Array}
4180      */
4181     getSelectedIndexes : function(){
4182         var indexes = [], s = this.selections;
4183         for(var i = 0, len = s.length; i < len; i++){
4184             indexes.push(s[i].nodeIndex);
4185         }
4186         return indexes;
4187     },
4188
4189     /**
4190      * Clear all selections
4191      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
4192      */
4193     clearSelections : function(suppressEvent){
4194         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
4195             this.cmp.elements = this.selections;
4196             this.cmp.removeClass(this.selectedClass);
4197             this.selections = [];
4198             if(!suppressEvent){
4199                 this.fireEvent("selectionchange", this, this.selections);
4200             }
4201         }
4202     },
4203
4204     /**
4205      * Returns true if the passed node is selected
4206      * @param {HTMLElement/Number} node The node or node index
4207      * @return {Boolean}
4208      */
4209     isSelected : function(node){
4210         var s = this.selections;
4211         if(s.length < 1){
4212             return false;
4213         }
4214         node = this.getNode(node);
4215         return s.indexOf(node) !== -1;
4216     },
4217
4218     /**
4219      * Selects nodes.
4220      * @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
4221      * @param {Boolean} keepExisting (optional) true to keep existing selections
4222      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
4223      */
4224     select : function(nodeInfo, keepExisting, suppressEvent){
4225         if(nodeInfo instanceof Array){
4226             if(!keepExisting){
4227                 this.clearSelections(true);
4228             }
4229             for(var i = 0, len = nodeInfo.length; i < len; i++){
4230                 this.select(nodeInfo[i], true, true);
4231             }
4232             return;
4233         } 
4234         var node = this.getNode(nodeInfo);
4235         if(!node || this.isSelected(node)){
4236             return; // already selected.
4237         }
4238         if(!keepExisting){
4239             this.clearSelections(true);
4240         }
4241         
4242         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
4243             Roo.fly(node).addClass(this.selectedClass);
4244             this.selections.push(node);
4245             if(!suppressEvent){
4246                 this.fireEvent("selectionchange", this, this.selections);
4247             }
4248         }
4249         
4250         
4251     },
4252       /**
4253      * Unselects nodes.
4254      * @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
4255      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
4256      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
4257      */
4258     unselect : function(nodeInfo, keepExisting, suppressEvent)
4259     {
4260         if(nodeInfo instanceof Array){
4261             Roo.each(this.selections, function(s) {
4262                 this.unselect(s, nodeInfo);
4263             }, this);
4264             return;
4265         }
4266         var node = this.getNode(nodeInfo);
4267         if(!node || !this.isSelected(node)){
4268             //Roo.log("not selected");
4269             return; // not selected.
4270         }
4271         // fireevent???
4272         var ns = [];
4273         Roo.each(this.selections, function(s) {
4274             if (s == node ) {
4275                 Roo.fly(node).removeClass(this.selectedClass);
4276
4277                 return;
4278             }
4279             ns.push(s);
4280         },this);
4281         
4282         this.selections= ns;
4283         this.fireEvent("selectionchange", this, this.selections);
4284     },
4285
4286     /**
4287      * Gets a template node.
4288      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
4289      * @return {HTMLElement} The node or null if it wasn't found
4290      */
4291     getNode : function(nodeInfo){
4292         if(typeof nodeInfo == "string"){
4293             return document.getElementById(nodeInfo);
4294         }else if(typeof nodeInfo == "number"){
4295             return this.nodes[nodeInfo];
4296         }
4297         return nodeInfo;
4298     },
4299
4300     /**
4301      * Gets a range template nodes.
4302      * @param {Number} startIndex
4303      * @param {Number} endIndex
4304      * @return {Array} An array of nodes
4305      */
4306     getNodes : function(start, end){
4307         var ns = this.nodes;
4308         start = start || 0;
4309         end = typeof end == "undefined" ? ns.length - 1 : end;
4310         var nodes = [];
4311         if(start <= end){
4312             for(var i = start; i <= end; i++){
4313                 nodes.push(ns[i]);
4314             }
4315         } else{
4316             for(var i = start; i >= end; i--){
4317                 nodes.push(ns[i]);
4318             }
4319         }
4320         return nodes;
4321     },
4322
4323     /**
4324      * Finds the index of the passed node
4325      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
4326      * @return {Number} The index of the node or -1
4327      */
4328     indexOf : function(node){
4329         node = this.getNode(node);
4330         if(typeof node.nodeIndex == "number"){
4331             return node.nodeIndex;
4332         }
4333         var ns = this.nodes;
4334         for(var i = 0, len = ns.length; i < len; i++){
4335             if(ns[i] == node){
4336                 return i;
4337             }
4338         }
4339         return -1;
4340     }
4341 });
4342 /*
4343  * Based on:
4344  * Ext JS Library 1.1.1
4345  * Copyright(c) 2006-2007, Ext JS, LLC.
4346  *
4347  * Originally Released Under LGPL - original licence link has changed is not relivant.
4348  *
4349  * Fork - LGPL
4350  * <script type="text/javascript">
4351  */
4352
4353 /**
4354  * @class Roo.JsonView
4355  * @extends Roo.View
4356  * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
4357 <pre><code>
4358 var view = new Roo.JsonView({
4359     container: "my-element",
4360     tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
4361     multiSelect: true, 
4362     jsonRoot: "data" 
4363 });
4364
4365 // listen for node click?
4366 view.on("click", function(vw, index, node, e){
4367     alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
4368 });
4369
4370 // direct load of JSON data
4371 view.load("foobar.php");
4372
4373 // Example from my blog list
4374 var tpl = new Roo.Template(
4375     '&lt;div class="entry"&gt;' +
4376     '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
4377     "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
4378     "&lt;/div&gt;&lt;hr /&gt;"
4379 );
4380
4381 var moreView = new Roo.JsonView({
4382     container :  "entry-list", 
4383     template : tpl,
4384     jsonRoot: "posts"
4385 });
4386 moreView.on("beforerender", this.sortEntries, this);
4387 moreView.load({
4388     url: "/blog/get-posts.php",
4389     params: "allposts=true",
4390     text: "Loading Blog Entries..."
4391 });
4392 </code></pre>
4393
4394 * Note: old code is supported with arguments : (container, template, config)
4395
4396
4397  * @constructor
4398  * Create a new JsonView
4399  * 
4400  * @param {Object} config The config object
4401  * 
4402  */
4403 Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
4404     
4405     
4406     Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
4407
4408     var um = this.el.getUpdateManager();
4409     um.setRenderer(this);
4410     um.on("update", this.onLoad, this);
4411     um.on("failure", this.onLoadException, this);
4412
4413     /**
4414      * @event beforerender
4415      * Fires before rendering of the downloaded JSON data.
4416      * @param {Roo.JsonView} this
4417      * @param {Object} data The JSON data loaded
4418      */
4419     /**
4420      * @event load
4421      * Fires when data is loaded.
4422      * @param {Roo.JsonView} this
4423      * @param {Object} data The JSON data loaded
4424      * @param {Object} response The raw Connect response object
4425      */
4426     /**
4427      * @event loadexception
4428      * Fires when loading fails.
4429      * @param {Roo.JsonView} this
4430      * @param {Object} response The raw Connect response object
4431      */
4432     this.addEvents({
4433         'beforerender' : true,
4434         'load' : true,
4435         'loadexception' : true
4436     });
4437 };
4438 Roo.extend(Roo.JsonView, Roo.View, {
4439     /**
4440      * @type {String} The root property in the loaded JSON object that contains the data
4441      */
4442     jsonRoot : "",
4443
4444     /**
4445      * Refreshes the view.
4446      */
4447     refresh : function(){
4448         this.clearSelections();
4449         this.el.update("");
4450         var html = [];
4451         var o = this.jsonData;
4452         if(o && o.length > 0){
4453             for(var i = 0, len = o.length; i < len; i++){
4454                 var data = this.prepareData(o[i], i, o);
4455                 html[html.length] = this.tpl.apply(data);
4456             }
4457         }else{
4458             html.push(this.emptyText);
4459         }
4460         this.el.update(html.join(""));
4461         this.nodes = this.el.dom.childNodes;
4462         this.updateIndexes(0);
4463     },
4464
4465     /**
4466      * 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.
4467      * @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:
4468      <pre><code>
4469      view.load({
4470          url: "your-url.php",
4471          params: {param1: "foo", param2: "bar"}, // or a URL encoded string
4472          callback: yourFunction,
4473          scope: yourObject, //(optional scope)
4474          discardUrl: false,
4475          nocache: false,
4476          text: "Loading...",
4477          timeout: 30,
4478          scripts: false
4479      });
4480      </code></pre>
4481      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
4482      * 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.
4483      * @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}
4484      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
4485      * @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.
4486      */
4487     load : function(){
4488         var um = this.el.getUpdateManager();
4489         um.update.apply(um, arguments);
4490     },
4491
4492     // note - render is a standard framework call...
4493     // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
4494     render : function(el, response){
4495         
4496         this.clearSelections();
4497         this.el.update("");
4498         var o;
4499         try{
4500             if (response != '') {
4501                 o = Roo.util.JSON.decode(response.responseText);
4502                 if(this.jsonRoot){
4503                     
4504                     o = o[this.jsonRoot];
4505                 }
4506             }
4507         } catch(e){
4508         }
4509         /**
4510          * The current JSON data or null
4511          */
4512         this.jsonData = o;
4513         this.beforeRender();
4514         this.refresh();
4515     },
4516
4517 /**
4518  * Get the number of records in the current JSON dataset
4519  * @return {Number}
4520  */
4521     getCount : function(){
4522         return this.jsonData ? this.jsonData.length : 0;
4523     },
4524
4525 /**
4526  * Returns the JSON object for the specified node(s)
4527  * @param {HTMLElement/Array} node The node or an array of nodes
4528  * @return {Object/Array} If you pass in an array, you get an array back, otherwise
4529  * you get the JSON object for the node
4530  */
4531     getNodeData : function(node){
4532         if(node instanceof Array){
4533             var data = [];
4534             for(var i = 0, len = node.length; i < len; i++){
4535                 data.push(this.getNodeData(node[i]));
4536             }
4537             return data;
4538         }
4539         return this.jsonData[this.indexOf(node)] || null;
4540     },
4541
4542     beforeRender : function(){
4543         this.snapshot = this.jsonData;
4544         if(this.sortInfo){
4545             this.sort.apply(this, this.sortInfo);
4546         }
4547         this.fireEvent("beforerender", this, this.jsonData);
4548     },
4549
4550     onLoad : function(el, o){
4551         this.fireEvent("load", this, this.jsonData, o);
4552     },
4553
4554     onLoadException : function(el, o){
4555         this.fireEvent("loadexception", this, o);
4556     },
4557
4558 /**
4559  * Filter the data by a specific property.
4560  * @param {String} property A property on your JSON objects
4561  * @param {String/RegExp} value Either string that the property values
4562  * should start with, or a RegExp to test against the property
4563  */
4564     filter : function(property, value){
4565         if(this.jsonData){
4566             var data = [];
4567             var ss = this.snapshot;
4568             if(typeof value == "string"){
4569                 var vlen = value.length;
4570                 if(vlen == 0){
4571                     this.clearFilter();
4572                     return;
4573                 }
4574                 value = value.toLowerCase();
4575                 for(var i = 0, len = ss.length; i < len; i++){
4576                     var o = ss[i];
4577                     if(o[property].substr(0, vlen).toLowerCase() == value){
4578                         data.push(o);
4579                     }
4580                 }
4581             } else if(value.exec){ // regex?
4582                 for(var i = 0, len = ss.length; i < len; i++){
4583                     var o = ss[i];
4584                     if(value.test(o[property])){
4585                         data.push(o);
4586                     }
4587                 }
4588             } else{
4589                 return;
4590             }
4591             this.jsonData = data;
4592             this.refresh();
4593         }
4594     },
4595
4596 /**
4597  * Filter by a function. The passed function will be called with each
4598  * object in the current dataset. If the function returns true the value is kept,
4599  * otherwise it is filtered.
4600  * @param {Function} fn
4601  * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
4602  */
4603     filterBy : function(fn, scope){
4604         if(this.jsonData){
4605             var data = [];
4606             var ss = this.snapshot;
4607             for(var i = 0, len = ss.length; i < len; i++){
4608                 var o = ss[i];
4609                 if(fn.call(scope || this, o)){
4610                     data.push(o);
4611                 }
4612             }
4613             this.jsonData = data;
4614             this.refresh();
4615         }
4616     },
4617
4618 /**
4619  * Clears the current filter.
4620  */
4621     clearFilter : function(){
4622         if(this.snapshot && this.jsonData != this.snapshot){
4623             this.jsonData = this.snapshot;
4624             this.refresh();
4625         }
4626     },
4627
4628
4629 /**
4630  * Sorts the data for this view and refreshes it.
4631  * @param {String} property A property on your JSON objects to sort on
4632  * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
4633  * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
4634  */
4635     sort : function(property, dir, sortType){
4636         this.sortInfo = Array.prototype.slice.call(arguments, 0);
4637         if(this.jsonData){
4638             var p = property;
4639             var dsc = dir && dir.toLowerCase() == "desc";
4640             var f = function(o1, o2){
4641                 var v1 = sortType ? sortType(o1[p]) : o1[p];
4642                 var v2 = sortType ? sortType(o2[p]) : o2[p];
4643                 ;
4644                 if(v1 < v2){
4645                     return dsc ? +1 : -1;
4646                 } else if(v1 > v2){
4647                     return dsc ? -1 : +1;
4648                 } else{
4649                     return 0;
4650                 }
4651             };
4652             this.jsonData.sort(f);
4653             this.refresh();
4654             if(this.jsonData != this.snapshot){
4655                 this.snapshot.sort(f);
4656             }
4657         }
4658     }
4659 });/*
4660  * Based on:
4661  * Ext JS Library 1.1.1
4662  * Copyright(c) 2006-2007, Ext JS, LLC.
4663  *
4664  * Originally Released Under LGPL - original licence link has changed is not relivant.
4665  *
4666  * Fork - LGPL
4667  * <script type="text/javascript">
4668  */
4669  
4670
4671 /**
4672  * @class Roo.ColorPalette
4673  * @extends Roo.Component
4674  * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
4675  * Here's an example of typical usage:
4676  * <pre><code>
4677 var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
4678 cp.render('my-div');
4679
4680 cp.on('select', function(palette, selColor){
4681     // do something with selColor
4682 });
4683 </code></pre>
4684  * @constructor
4685  * Create a new ColorPalette
4686  * @param {Object} config The config object
4687  */
4688 Roo.ColorPalette = function(config){
4689     Roo.ColorPalette.superclass.constructor.call(this, config);
4690     this.addEvents({
4691         /**
4692              * @event select
4693              * Fires when a color is selected
4694              * @param {ColorPalette} this
4695              * @param {String} color The 6-digit color hex code (without the # symbol)
4696              */
4697         select: true
4698     });
4699
4700     if(this.handler){
4701         this.on("select", this.handler, this.scope, true);
4702     }
4703 };
4704 Roo.extend(Roo.ColorPalette, Roo.Component, {
4705     /**
4706      * @cfg {String} itemCls
4707      * The CSS class to apply to the containing element (defaults to "x-color-palette")
4708      */
4709     itemCls : "x-color-palette",
4710     /**
4711      * @cfg {String} value
4712      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
4713      * the hex codes are case-sensitive.
4714      */
4715     value : null,
4716     clickEvent:'click',
4717     // private
4718     ctype: "Roo.ColorPalette",
4719
4720     /**
4721      * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
4722      */
4723     allowReselect : false,
4724
4725     /**
4726      * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
4727      * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
4728      * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
4729      * of colors with the width setting until the box is symmetrical.</p>
4730      * <p>You can override individual colors if needed:</p>
4731      * <pre><code>
4732 var cp = new Roo.ColorPalette();
4733 cp.colors[0] = "FF0000";  // change the first box to red
4734 </code></pre>
4735
4736 Or you can provide a custom array of your own for complete control:
4737 <pre><code>
4738 var cp = new Roo.ColorPalette();
4739 cp.colors = ["000000", "993300", "333300"];
4740 </code></pre>
4741      * @type Array
4742      */
4743     colors : [
4744         "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
4745         "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
4746         "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
4747         "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
4748         "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
4749     ],
4750
4751     // private
4752     onRender : function(container, position){
4753         var t = new Roo.MasterTemplate(
4754             '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
4755         );
4756         var c = this.colors;
4757         for(var i = 0, len = c.length; i < len; i++){
4758             t.add([c[i]]);
4759         }
4760         var el = document.createElement("div");
4761         el.className = this.itemCls;
4762         t.overwrite(el);
4763         container.dom.insertBefore(el, position);
4764         this.el = Roo.get(el);
4765         this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
4766         if(this.clickEvent != 'click'){
4767             this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
4768         }
4769     },
4770
4771     // private
4772     afterRender : function(){
4773         Roo.ColorPalette.superclass.afterRender.call(this);
4774         if(this.value){
4775             var s = this.value;
4776             this.value = null;
4777             this.select(s);
4778         }
4779     },
4780
4781     // private
4782     handleClick : function(e, t){
4783         e.preventDefault();
4784         if(!this.disabled){
4785             var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
4786             this.select(c.toUpperCase());
4787         }
4788     },
4789
4790     /**
4791      * Selects the specified color in the palette (fires the select event)
4792      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
4793      */
4794     select : function(color){
4795         color = color.replace("#", "");
4796         if(color != this.value || this.allowReselect){
4797             var el = this.el;
4798             if(this.value){
4799                 el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
4800             }
4801             el.child("a.color-"+color).addClass("x-color-palette-sel");
4802             this.value = color;
4803             this.fireEvent("select", this, color);
4804         }
4805     }
4806 });/*
4807  * Based on:
4808  * Ext JS Library 1.1.1
4809  * Copyright(c) 2006-2007, Ext JS, LLC.
4810  *
4811  * Originally Released Under LGPL - original licence link has changed is not relivant.
4812  *
4813  * Fork - LGPL
4814  * <script type="text/javascript">
4815  */
4816  
4817 /**
4818  * @class Roo.DatePicker
4819  * @extends Roo.Component
4820  * Simple date picker class.
4821  * @constructor
4822  * Create a new DatePicker
4823  * @param {Object} config The config object
4824  */
4825 Roo.DatePicker = function(config){
4826     Roo.DatePicker.superclass.constructor.call(this, config);
4827
4828     this.value = config && config.value ?
4829                  config.value.clearTime() : new Date().clearTime();
4830
4831     this.addEvents({
4832         /**
4833              * @event select
4834              * Fires when a date is selected
4835              * @param {DatePicker} this
4836              * @param {Date} date The selected date
4837              */
4838         'select': true,
4839         /**
4840              * @event monthchange
4841              * Fires when the displayed month changes 
4842              * @param {DatePicker} this
4843              * @param {Date} date The selected month
4844              */
4845         'monthchange': true
4846     });
4847
4848     if(this.handler){
4849         this.on("select", this.handler,  this.scope || this);
4850     }
4851     // build the disabledDatesRE
4852     if(!this.disabledDatesRE && this.disabledDates){
4853         var dd = this.disabledDates;
4854         var re = "(?:";
4855         for(var i = 0; i < dd.length; i++){
4856             re += dd[i];
4857             if(i != dd.length-1) {
4858                 re += "|";
4859             }
4860         }
4861         this.disabledDatesRE = new RegExp(re + ")");
4862     }
4863 };
4864
4865 Roo.extend(Roo.DatePicker, Roo.Component, {
4866     /**
4867      * @cfg {String} todayText
4868      * The text to display on the button that selects the current date (defaults to "Today")
4869      */
4870     todayText : "Today",
4871     /**
4872      * @cfg {String} okText
4873      * The text to display on the ok button
4874      */
4875     okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
4876     /**
4877      * @cfg {String} cancelText
4878      * The text to display on the cancel button
4879      */
4880     cancelText : "Cancel",
4881     /**
4882      * @cfg {String} todayTip
4883      * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
4884      */
4885     todayTip : "{0} (Spacebar)",
4886     /**
4887      * @cfg {Date} minDate
4888      * Minimum allowable date (JavaScript date object, defaults to null)
4889      */
4890     minDate : null,
4891     /**
4892      * @cfg {Date} maxDate
4893      * Maximum allowable date (JavaScript date object, defaults to null)
4894      */
4895     maxDate : null,
4896     /**
4897      * @cfg {String} minText
4898      * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
4899      */
4900     minText : "This date is before the minimum date",
4901     /**
4902      * @cfg {String} maxText
4903      * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
4904      */
4905     maxText : "This date is after the maximum date",
4906     /**
4907      * @cfg {String} format
4908      * The default date format string which can be overriden for localization support.  The format must be
4909      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
4910      */
4911     format : "m/d/y",
4912     /**
4913      * @cfg {Array} disabledDays
4914      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
4915      */
4916     disabledDays : null,
4917     /**
4918      * @cfg {String} disabledDaysText
4919      * The tooltip to display when the date falls on a disabled day (defaults to "")
4920      */
4921     disabledDaysText : "",
4922     /**
4923      * @cfg {RegExp} disabledDatesRE
4924      * JavaScript regular expression used to disable a pattern of dates (defaults to null)
4925      */
4926     disabledDatesRE : null,
4927     /**
4928      * @cfg {String} disabledDatesText
4929      * The tooltip text to display when the date falls on a disabled date (defaults to "")
4930      */
4931     disabledDatesText : "",
4932     /**
4933      * @cfg {Boolean} constrainToViewport
4934      * True to constrain the date picker to the viewport (defaults to true)
4935      */
4936     constrainToViewport : true,
4937     /**
4938      * @cfg {Array} monthNames
4939      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
4940      */
4941     monthNames : Date.monthNames,
4942     /**
4943      * @cfg {Array} dayNames
4944      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
4945      */
4946     dayNames : Date.dayNames,
4947     /**
4948      * @cfg {String} nextText
4949      * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
4950      */
4951     nextText: 'Next Month (Control+Right)',
4952     /**
4953      * @cfg {String} prevText
4954      * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
4955      */
4956     prevText: 'Previous Month (Control+Left)',
4957     /**
4958      * @cfg {String} monthYearText
4959      * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
4960      */
4961     monthYearText: 'Choose a month (Control+Up/Down to move years)',
4962     /**
4963      * @cfg {Number} startDay
4964      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
4965      */
4966     startDay : 0,
4967     /**
4968      * @cfg {Bool} showClear
4969      * Show a clear button (usefull for date form elements that can be blank.)
4970      */
4971     
4972     showClear: false,
4973     
4974     /**
4975      * Sets the value of the date field
4976      * @param {Date} value The date to set
4977      */
4978     setValue : function(value){
4979         var old = this.value;
4980         
4981         if (typeof(value) == 'string') {
4982          
4983             value = Date.parseDate(value, this.format);
4984         }
4985         if (!value) {
4986             value = new Date();
4987         }
4988         
4989         this.value = value.clearTime(true);
4990         if(this.el){
4991             this.update(this.value);
4992         }
4993     },
4994
4995     /**
4996      * Gets the current selected value of the date field
4997      * @return {Date} The selected date
4998      */
4999     getValue : function(){
5000         return this.value;
5001     },
5002
5003     // private
5004     focus : function(){
5005         if(this.el){
5006             this.update(this.activeDate);
5007         }
5008     },
5009
5010     // privateval
5011     onRender : function(container, position){
5012         
5013         var m = [
5014              '<table cellspacing="0">',
5015                 '<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>',
5016                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
5017         var dn = this.dayNames;
5018         for(var i = 0; i < 7; i++){
5019             var d = this.startDay+i;
5020             if(d > 6){
5021                 d = d-7;
5022             }
5023             m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
5024         }
5025         m[m.length] = "</tr></thead><tbody><tr>";
5026         for(var i = 0; i < 42; i++) {
5027             if(i % 7 == 0 && i != 0){
5028                 m[m.length] = "</tr><tr>";
5029             }
5030             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
5031         }
5032         m[m.length] = '</tr></tbody></table></td></tr><tr>'+
5033             '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
5034
5035         var el = document.createElement("div");
5036         el.className = "x-date-picker";
5037         el.innerHTML = m.join("");
5038
5039         container.dom.insertBefore(el, position);
5040
5041         this.el = Roo.get(el);
5042         this.eventEl = Roo.get(el.firstChild);
5043
5044         new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
5045             handler: this.showPrevMonth,
5046             scope: this,
5047             preventDefault:true,
5048             stopDefault:true
5049         });
5050
5051         new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
5052             handler: this.showNextMonth,
5053             scope: this,
5054             preventDefault:true,
5055             stopDefault:true
5056         });
5057
5058         this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
5059
5060         this.monthPicker = this.el.down('div.x-date-mp');
5061         this.monthPicker.enableDisplayMode('block');
5062         
5063         var kn = new Roo.KeyNav(this.eventEl, {
5064             "left" : function(e){
5065                 e.ctrlKey ?
5066                     this.showPrevMonth() :
5067                     this.update(this.activeDate.add("d", -1));
5068             },
5069
5070             "right" : function(e){
5071                 e.ctrlKey ?
5072                     this.showNextMonth() :
5073                     this.update(this.activeDate.add("d", 1));
5074             },
5075
5076             "up" : function(e){
5077                 e.ctrlKey ?
5078                     this.showNextYear() :
5079                     this.update(this.activeDate.add("d", -7));
5080             },
5081
5082             "down" : function(e){
5083                 e.ctrlKey ?
5084                     this.showPrevYear() :
5085                     this.update(this.activeDate.add("d", 7));
5086             },
5087
5088             "pageUp" : function(e){
5089                 this.showNextMonth();
5090             },
5091
5092             "pageDown" : function(e){
5093                 this.showPrevMonth();
5094             },
5095
5096             "enter" : function(e){
5097                 e.stopPropagation();
5098                 return true;
5099             },
5100
5101             scope : this
5102         });
5103
5104         this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
5105
5106         this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
5107
5108         this.el.unselectable();
5109         
5110         this.cells = this.el.select("table.x-date-inner tbody td");
5111         this.textNodes = this.el.query("table.x-date-inner tbody span");
5112
5113         this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
5114             text: "&#160;",
5115             tooltip: this.monthYearText
5116         });
5117
5118         this.mbtn.on('click', this.showMonthPicker, this);
5119         this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
5120
5121
5122         var today = (new Date()).dateFormat(this.format);
5123         
5124         var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
5125         if (this.showClear) {
5126             baseTb.add( new Roo.Toolbar.Fill());
5127         }
5128         baseTb.add({
5129             text: String.format(this.todayText, today),
5130             tooltip: String.format(this.todayTip, today),
5131             handler: this.selectToday,
5132             scope: this
5133         });
5134         
5135         //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
5136             
5137         //});
5138         if (this.showClear) {
5139             
5140             baseTb.add( new Roo.Toolbar.Fill());
5141             baseTb.add({
5142                 text: '&#160;',
5143                 cls: 'x-btn-icon x-btn-clear',
5144                 handler: function() {
5145                     //this.value = '';
5146                     this.fireEvent("select", this, '');
5147                 },
5148                 scope: this
5149             });
5150         }
5151         
5152         
5153         if(Roo.isIE){
5154             this.el.repaint();
5155         }
5156         this.update(this.value);
5157     },
5158
5159     createMonthPicker : function(){
5160         if(!this.monthPicker.dom.firstChild){
5161             var buf = ['<table border="0" cellspacing="0">'];
5162             for(var i = 0; i < 6; i++){
5163                 buf.push(
5164                     '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
5165                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
5166                     i == 0 ?
5167                     '<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>' :
5168                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
5169                 );
5170             }
5171             buf.push(
5172                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
5173                     this.okText,
5174                     '</button><button type="button" class="x-date-mp-cancel">',
5175                     this.cancelText,
5176                     '</button></td></tr>',
5177                 '</table>'
5178             );
5179             this.monthPicker.update(buf.join(''));
5180             this.monthPicker.on('click', this.onMonthClick, this);
5181             this.monthPicker.on('dblclick', this.onMonthDblClick, this);
5182
5183             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
5184             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
5185
5186             this.mpMonths.each(function(m, a, i){
5187                 i += 1;
5188                 if((i%2) == 0){
5189                     m.dom.xmonth = 5 + Math.round(i * .5);
5190                 }else{
5191                     m.dom.xmonth = Math.round((i-1) * .5);
5192                 }
5193             });
5194         }
5195     },
5196
5197     showMonthPicker : function(){
5198         this.createMonthPicker();
5199         var size = this.el.getSize();
5200         this.monthPicker.setSize(size);
5201         this.monthPicker.child('table').setSize(size);
5202
5203         this.mpSelMonth = (this.activeDate || this.value).getMonth();
5204         this.updateMPMonth(this.mpSelMonth);
5205         this.mpSelYear = (this.activeDate || this.value).getFullYear();
5206         this.updateMPYear(this.mpSelYear);
5207
5208         this.monthPicker.slideIn('t', {duration:.2});
5209     },
5210
5211     updateMPYear : function(y){
5212         this.mpyear = y;
5213         var ys = this.mpYears.elements;
5214         for(var i = 1; i <= 10; i++){
5215             var td = ys[i-1], y2;
5216             if((i%2) == 0){
5217                 y2 = y + Math.round(i * .5);
5218                 td.firstChild.innerHTML = y2;
5219                 td.xyear = y2;
5220             }else{
5221                 y2 = y - (5-Math.round(i * .5));
5222                 td.firstChild.innerHTML = y2;
5223                 td.xyear = y2;
5224             }
5225             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
5226         }
5227     },
5228
5229     updateMPMonth : function(sm){
5230         this.mpMonths.each(function(m, a, i){
5231             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
5232         });
5233     },
5234
5235     selectMPMonth: function(m){
5236         
5237     },
5238
5239     onMonthClick : function(e, t){
5240         e.stopEvent();
5241         var el = new Roo.Element(t), pn;
5242         if(el.is('button.x-date-mp-cancel')){
5243             this.hideMonthPicker();
5244         }
5245         else if(el.is('button.x-date-mp-ok')){
5246             this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
5247             this.hideMonthPicker();
5248         }
5249         else if(pn = el.up('td.x-date-mp-month', 2)){
5250             this.mpMonths.removeClass('x-date-mp-sel');
5251             pn.addClass('x-date-mp-sel');
5252             this.mpSelMonth = pn.dom.xmonth;
5253         }
5254         else if(pn = el.up('td.x-date-mp-year', 2)){
5255             this.mpYears.removeClass('x-date-mp-sel');
5256             pn.addClass('x-date-mp-sel');
5257             this.mpSelYear = pn.dom.xyear;
5258         }
5259         else if(el.is('a.x-date-mp-prev')){
5260             this.updateMPYear(this.mpyear-10);
5261         }
5262         else if(el.is('a.x-date-mp-next')){
5263             this.updateMPYear(this.mpyear+10);
5264         }
5265     },
5266
5267     onMonthDblClick : function(e, t){
5268         e.stopEvent();
5269         var el = new Roo.Element(t), pn;
5270         if(pn = el.up('td.x-date-mp-month', 2)){
5271             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
5272             this.hideMonthPicker();
5273         }
5274         else if(pn = el.up('td.x-date-mp-year', 2)){
5275             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
5276             this.hideMonthPicker();
5277         }
5278     },
5279
5280     hideMonthPicker : function(disableAnim){
5281         if(this.monthPicker){
5282             if(disableAnim === true){
5283                 this.monthPicker.hide();
5284             }else{
5285                 this.monthPicker.slideOut('t', {duration:.2});
5286             }
5287         }
5288     },
5289
5290     // private
5291     showPrevMonth : function(e){
5292         this.update(this.activeDate.add("mo", -1));
5293     },
5294
5295     // private
5296     showNextMonth : function(e){
5297         this.update(this.activeDate.add("mo", 1));
5298     },
5299
5300     // private
5301     showPrevYear : function(){
5302         this.update(this.activeDate.add("y", -1));
5303     },
5304
5305     // private
5306     showNextYear : function(){
5307         this.update(this.activeDate.add("y", 1));
5308     },
5309
5310     // private
5311     handleMouseWheel : function(e){
5312         var delta = e.getWheelDelta();
5313         if(delta > 0){
5314             this.showPrevMonth();
5315             e.stopEvent();
5316         } else if(delta < 0){
5317             this.showNextMonth();
5318             e.stopEvent();
5319         }
5320     },
5321
5322     // private
5323     handleDateClick : function(e, t){
5324         e.stopEvent();
5325         if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
5326             this.setValue(new Date(t.dateValue));
5327             this.fireEvent("select", this, this.value);
5328         }
5329     },
5330
5331     // private
5332     selectToday : function(){
5333         this.setValue(new Date().clearTime());
5334         this.fireEvent("select", this, this.value);
5335     },
5336
5337     // private
5338     update : function(date)
5339     {
5340         var vd = this.activeDate;
5341         this.activeDate = date;
5342         if(vd && this.el){
5343             var t = date.getTime();
5344             if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
5345                 this.cells.removeClass("x-date-selected");
5346                 this.cells.each(function(c){
5347                    if(c.dom.firstChild.dateValue == t){
5348                        c.addClass("x-date-selected");
5349                        setTimeout(function(){
5350                             try{c.dom.firstChild.focus();}catch(e){}
5351                        }, 50);
5352                        return false;
5353                    }
5354                 });
5355                 return;
5356             }
5357         }
5358         
5359         var days = date.getDaysInMonth();
5360         var firstOfMonth = date.getFirstDateOfMonth();
5361         var startingPos = firstOfMonth.getDay()-this.startDay;
5362
5363         if(startingPos <= this.startDay){
5364             startingPos += 7;
5365         }
5366
5367         var pm = date.add("mo", -1);
5368         var prevStart = pm.getDaysInMonth()-startingPos;
5369
5370         var cells = this.cells.elements;
5371         var textEls = this.textNodes;
5372         days += startingPos;
5373
5374         // convert everything to numbers so it's fast
5375         var day = 86400000;
5376         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
5377         var today = new Date().clearTime().getTime();
5378         var sel = date.clearTime().getTime();
5379         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
5380         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
5381         var ddMatch = this.disabledDatesRE;
5382         var ddText = this.disabledDatesText;
5383         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
5384         var ddaysText = this.disabledDaysText;
5385         var format = this.format;
5386
5387         var setCellClass = function(cal, cell){
5388             cell.title = "";
5389             var t = d.getTime();
5390             cell.firstChild.dateValue = t;
5391             if(t == today){
5392                 cell.className += " x-date-today";
5393                 cell.title = cal.todayText;
5394             }
5395             if(t == sel){
5396                 cell.className += " x-date-selected";
5397                 setTimeout(function(){
5398                     try{cell.firstChild.focus();}catch(e){}
5399                 }, 50);
5400             }
5401             // disabling
5402             if(t < min) {
5403                 cell.className = " x-date-disabled";
5404                 cell.title = cal.minText;
5405                 return;
5406             }
5407             if(t > max) {
5408                 cell.className = " x-date-disabled";
5409                 cell.title = cal.maxText;
5410                 return;
5411             }
5412             if(ddays){
5413                 if(ddays.indexOf(d.getDay()) != -1){
5414                     cell.title = ddaysText;
5415                     cell.className = " x-date-disabled";
5416                 }
5417             }
5418             if(ddMatch && format){
5419                 var fvalue = d.dateFormat(format);
5420                 if(ddMatch.test(fvalue)){
5421                     cell.title = ddText.replace("%0", fvalue);
5422                     cell.className = " x-date-disabled";
5423                 }
5424             }
5425         };
5426
5427         var i = 0;
5428         for(; i < startingPos; i++) {
5429             textEls[i].innerHTML = (++prevStart);
5430             d.setDate(d.getDate()+1);
5431             cells[i].className = "x-date-prevday";
5432             setCellClass(this, cells[i]);
5433         }
5434         for(; i < days; i++){
5435             intDay = i - startingPos + 1;
5436             textEls[i].innerHTML = (intDay);
5437             d.setDate(d.getDate()+1);
5438             cells[i].className = "x-date-active";
5439             setCellClass(this, cells[i]);
5440         }
5441         var extraDays = 0;
5442         for(; i < 42; i++) {
5443              textEls[i].innerHTML = (++extraDays);
5444              d.setDate(d.getDate()+1);
5445              cells[i].className = "x-date-nextday";
5446              setCellClass(this, cells[i]);
5447         }
5448
5449         this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
5450         this.fireEvent('monthchange', this, date);
5451         
5452         if(!this.internalRender){
5453             var main = this.el.dom.firstChild;
5454             var w = main.offsetWidth;
5455             this.el.setWidth(w + this.el.getBorderWidth("lr"));
5456             Roo.fly(main).setWidth(w);
5457             this.internalRender = true;
5458             // opera does not respect the auto grow header center column
5459             // then, after it gets a width opera refuses to recalculate
5460             // without a second pass
5461             if(Roo.isOpera && !this.secondPass){
5462                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
5463                 this.secondPass = true;
5464                 this.update.defer(10, this, [date]);
5465             }
5466         }
5467         
5468         
5469     }
5470 });        /*
5471  * Based on:
5472  * Ext JS Library 1.1.1
5473  * Copyright(c) 2006-2007, Ext JS, LLC.
5474  *
5475  * Originally Released Under LGPL - original licence link has changed is not relivant.
5476  *
5477  * Fork - LGPL
5478  * <script type="text/javascript">
5479  */
5480 /**
5481  * @class Roo.TabPanel
5482  * @extends Roo.util.Observable
5483  * A lightweight tab container.
5484  * <br><br>
5485  * Usage:
5486  * <pre><code>
5487 // basic tabs 1, built from existing content
5488 var tabs = new Roo.TabPanel("tabs1");
5489 tabs.addTab("script", "View Script");
5490 tabs.addTab("markup", "View Markup");
5491 tabs.activate("script");
5492
5493 // more advanced tabs, built from javascript
5494 var jtabs = new Roo.TabPanel("jtabs");
5495 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
5496
5497 // set up the UpdateManager
5498 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
5499 var updater = tab2.getUpdateManager();
5500 updater.setDefaultUrl("ajax1.htm");
5501 tab2.on('activate', updater.refresh, updater, true);
5502
5503 // Use setUrl for Ajax loading
5504 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
5505 tab3.setUrl("ajax2.htm", null, true);
5506
5507 // Disabled tab
5508 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
5509 tab4.disable();
5510
5511 jtabs.activate("jtabs-1");
5512  * </code></pre>
5513  * @constructor
5514  * Create a new TabPanel.
5515  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
5516  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
5517  */
5518 Roo.TabPanel = function(container, config){
5519     /**
5520     * The container element for this TabPanel.
5521     * @type Roo.Element
5522     */
5523     this.el = Roo.get(container, true);
5524     if(config){
5525         if(typeof config == "boolean"){
5526             this.tabPosition = config ? "bottom" : "top";
5527         }else{
5528             Roo.apply(this, config);
5529         }
5530     }
5531     if(this.tabPosition == "bottom"){
5532         this.bodyEl = Roo.get(this.createBody(this.el.dom));
5533         this.el.addClass("x-tabs-bottom");
5534     }
5535     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
5536     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
5537     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
5538     if(Roo.isIE){
5539         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
5540     }
5541     if(this.tabPosition != "bottom"){
5542         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
5543          * @type Roo.Element
5544          */
5545         this.bodyEl = Roo.get(this.createBody(this.el.dom));
5546         this.el.addClass("x-tabs-top");
5547     }
5548     this.items = [];
5549
5550     this.bodyEl.setStyle("position", "relative");
5551
5552     this.active = null;
5553     this.activateDelegate = this.activate.createDelegate(this);
5554
5555     this.addEvents({
5556         /**
5557          * @event tabchange
5558          * Fires when the active tab changes
5559          * @param {Roo.TabPanel} this
5560          * @param {Roo.TabPanelItem} activePanel The new active tab
5561          */
5562         "tabchange": true,
5563         /**
5564          * @event beforetabchange
5565          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
5566          * @param {Roo.TabPanel} this
5567          * @param {Object} e Set cancel to true on this object to cancel the tab change
5568          * @param {Roo.TabPanelItem} tab The tab being changed to
5569          */
5570         "beforetabchange" : true
5571     });
5572
5573     Roo.EventManager.onWindowResize(this.onResize, this);
5574     this.cpad = this.el.getPadding("lr");
5575     this.hiddenCount = 0;
5576
5577
5578     // toolbar on the tabbar support...
5579     if (this.toolbar) {
5580         var tcfg = this.toolbar;
5581         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
5582         this.toolbar = new Roo.Toolbar(tcfg);
5583         if (Roo.isSafari) {
5584             var tbl = tcfg.container.child('table', true);
5585             tbl.setAttribute('width', '100%');
5586         }
5587         
5588     }
5589    
5590
5591
5592     Roo.TabPanel.superclass.constructor.call(this);
5593 };
5594
5595 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
5596     /*
5597      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
5598      */
5599     tabPosition : "top",
5600     /*
5601      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
5602      */
5603     currentTabWidth : 0,
5604     /*
5605      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
5606      */
5607     minTabWidth : 40,
5608     /*
5609      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
5610      */
5611     maxTabWidth : 250,
5612     /*
5613      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
5614      */
5615     preferredTabWidth : 175,
5616     /*
5617      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
5618      */
5619     resizeTabs : false,
5620     /*
5621      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
5622      */
5623     monitorResize : true,
5624     /*
5625      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
5626      */
5627     toolbar : false,
5628
5629     /**
5630      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
5631      * @param {String} id The id of the div to use <b>or create</b>
5632      * @param {String} text The text for the tab
5633      * @param {String} content (optional) Content to put in the TabPanelItem body
5634      * @param {Boolean} closable (optional) True to create a close icon on the tab
5635      * @return {Roo.TabPanelItem} The created TabPanelItem
5636      */
5637     addTab : function(id, text, content, closable){
5638         var item = new Roo.TabPanelItem(this, id, text, closable);
5639         this.addTabItem(item);
5640         if(content){
5641             item.setContent(content);
5642         }
5643         return item;
5644     },
5645
5646     /**
5647      * Returns the {@link Roo.TabPanelItem} with the specified id/index
5648      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
5649      * @return {Roo.TabPanelItem}
5650      */
5651     getTab : function(id){
5652         return this.items[id];
5653     },
5654
5655     /**
5656      * Hides the {@link Roo.TabPanelItem} with the specified id/index
5657      * @param {String/Number} id The id or index of the TabPanelItem to hide.
5658      */
5659     hideTab : function(id){
5660         var t = this.items[id];
5661         if(!t.isHidden()){
5662            t.setHidden(true);
5663            this.hiddenCount++;
5664            this.autoSizeTabs();
5665         }
5666     },
5667
5668     /**
5669      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
5670      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
5671      */
5672     unhideTab : function(id){
5673         var t = this.items[id];
5674         if(t.isHidden()){
5675            t.setHidden(false);
5676            this.hiddenCount--;
5677            this.autoSizeTabs();
5678         }
5679     },
5680
5681     /**
5682      * Adds an existing {@link Roo.TabPanelItem}.
5683      * @param {Roo.TabPanelItem} item The TabPanelItem to add
5684      */
5685     addTabItem : function(item){
5686         this.items[item.id] = item;
5687         this.items.push(item);
5688         if(this.resizeTabs){
5689            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
5690            this.autoSizeTabs();
5691         }else{
5692             item.autoSize();
5693         }
5694     },
5695
5696     /**
5697      * Removes a {@link Roo.TabPanelItem}.
5698      * @param {String/Number} id The id or index of the TabPanelItem to remove.
5699      */
5700     removeTab : function(id){
5701         var items = this.items;
5702         var tab = items[id];
5703         if(!tab) { return; }
5704         var index = items.indexOf(tab);
5705         if(this.active == tab && items.length > 1){
5706             var newTab = this.getNextAvailable(index);
5707             if(newTab) {
5708                 newTab.activate();
5709             }
5710         }
5711         this.stripEl.dom.removeChild(tab.pnode.dom);
5712         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
5713             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
5714         }
5715         items.splice(index, 1);
5716         delete this.items[tab.id];
5717         tab.fireEvent("close", tab);
5718         tab.purgeListeners();
5719         this.autoSizeTabs();
5720     },
5721
5722     getNextAvailable : function(start){
5723         var items = this.items;
5724         var index = start;
5725         // look for a next tab that will slide over to
5726         // replace the one being removed
5727         while(index < items.length){
5728             var item = items[++index];
5729             if(item && !item.isHidden()){
5730                 return item;
5731             }
5732         }
5733         // if one isn't found select the previous tab (on the left)
5734         index = start;
5735         while(index >= 0){
5736             var item = items[--index];
5737             if(item && !item.isHidden()){
5738                 return item;
5739             }
5740         }
5741         return null;
5742     },
5743
5744     /**
5745      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
5746      * @param {String/Number} id The id or index of the TabPanelItem to disable.
5747      */
5748     disableTab : function(id){
5749         var tab = this.items[id];
5750         if(tab && this.active != tab){
5751             tab.disable();
5752         }
5753     },
5754
5755     /**
5756      * Enables a {@link Roo.TabPanelItem} that is disabled.
5757      * @param {String/Number} id The id or index of the TabPanelItem to enable.
5758      */
5759     enableTab : function(id){
5760         var tab = this.items[id];
5761         tab.enable();
5762     },
5763
5764     /**
5765      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
5766      * @param {String/Number} id The id or index of the TabPanelItem to activate.
5767      * @return {Roo.TabPanelItem} The TabPanelItem.
5768      */
5769     activate : function(id){
5770         var tab = this.items[id];
5771         if(!tab){
5772             return null;
5773         }
5774         if(tab == this.active || tab.disabled){
5775             return tab;
5776         }
5777         var e = {};
5778         this.fireEvent("beforetabchange", this, e, tab);
5779         if(e.cancel !== true && !tab.disabled){
5780             if(this.active){
5781                 this.active.hide();
5782             }
5783             this.active = this.items[id];
5784             this.active.show();
5785             this.fireEvent("tabchange", this, this.active);
5786         }
5787         return tab;
5788     },
5789
5790     /**
5791      * Gets the active {@link Roo.TabPanelItem}.
5792      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
5793      */
5794     getActiveTab : function(){
5795         return this.active;
5796     },
5797
5798     /**
5799      * Updates the tab body element to fit the height of the container element
5800      * for overflow scrolling
5801      * @param {Number} targetHeight (optional) Override the starting height from the elements height
5802      */
5803     syncHeight : function(targetHeight){
5804         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
5805         var bm = this.bodyEl.getMargins();
5806         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
5807         this.bodyEl.setHeight(newHeight);
5808         return newHeight;
5809     },
5810
5811     onResize : function(){
5812         if(this.monitorResize){
5813             this.autoSizeTabs();
5814         }
5815     },
5816
5817     /**
5818      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
5819      */
5820     beginUpdate : function(){
5821         this.updating = true;
5822     },
5823
5824     /**
5825      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
5826      */
5827     endUpdate : function(){
5828         this.updating = false;
5829         this.autoSizeTabs();
5830     },
5831
5832     /**
5833      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
5834      */
5835     autoSizeTabs : function(){
5836         var count = this.items.length;
5837         var vcount = count - this.hiddenCount;
5838         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
5839             return;
5840         }
5841         var w = Math.max(this.el.getWidth() - this.cpad, 10);
5842         var availWidth = Math.floor(w / vcount);
5843         var b = this.stripBody;
5844         if(b.getWidth() > w){
5845             var tabs = this.items;
5846             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
5847             if(availWidth < this.minTabWidth){
5848                 /*if(!this.sleft){    // incomplete scrolling code
5849                     this.createScrollButtons();
5850                 }
5851                 this.showScroll();
5852                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
5853             }
5854         }else{
5855             if(this.currentTabWidth < this.preferredTabWidth){
5856                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
5857             }
5858         }
5859     },
5860
5861     /**
5862      * Returns the number of tabs in this TabPanel.
5863      * @return {Number}
5864      */
5865      getCount : function(){
5866          return this.items.length;
5867      },
5868
5869     /**
5870      * Resizes all the tabs to the passed width
5871      * @param {Number} The new width
5872      */
5873     setTabWidth : function(width){
5874         this.currentTabWidth = width;
5875         for(var i = 0, len = this.items.length; i < len; i++) {
5876                 if(!this.items[i].isHidden()) {
5877                 this.items[i].setWidth(width);
5878             }
5879         }
5880     },
5881
5882     /**
5883      * Destroys this TabPanel
5884      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
5885      */
5886     destroy : function(removeEl){
5887         Roo.EventManager.removeResizeListener(this.onResize, this);
5888         for(var i = 0, len = this.items.length; i < len; i++){
5889             this.items[i].purgeListeners();
5890         }
5891         if(removeEl === true){
5892             this.el.update("");
5893             this.el.remove();
5894         }
5895     }
5896 });
5897
5898 /**
5899  * @class Roo.TabPanelItem
5900  * @extends Roo.util.Observable
5901  * Represents an individual item (tab plus body) in a TabPanel.
5902  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
5903  * @param {String} id The id of this TabPanelItem
5904  * @param {String} text The text for the tab of this TabPanelItem
5905  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
5906  */
5907 Roo.TabPanelItem = function(tabPanel, id, text, closable){
5908     /**
5909      * The {@link Roo.TabPanel} this TabPanelItem belongs to
5910      * @type Roo.TabPanel
5911      */
5912     this.tabPanel = tabPanel;
5913     /**
5914      * The id for this TabPanelItem
5915      * @type String
5916      */
5917     this.id = id;
5918     /** @private */
5919     this.disabled = false;
5920     /** @private */
5921     this.text = text;
5922     /** @private */
5923     this.loaded = false;
5924     this.closable = closable;
5925
5926     /**
5927      * The body element for this TabPanelItem.
5928      * @type Roo.Element
5929      */
5930     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
5931     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
5932     this.bodyEl.setStyle("display", "block");
5933     this.bodyEl.setStyle("zoom", "1");
5934     this.hideAction();
5935
5936     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
5937     /** @private */
5938     this.el = Roo.get(els.el, true);
5939     this.inner = Roo.get(els.inner, true);
5940     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
5941     this.pnode = Roo.get(els.el.parentNode, true);
5942     this.el.on("mousedown", this.onTabMouseDown, this);
5943     this.el.on("click", this.onTabClick, this);
5944     /** @private */
5945     if(closable){
5946         var c = Roo.get(els.close, true);
5947         c.dom.title = this.closeText;
5948         c.addClassOnOver("close-over");
5949         c.on("click", this.closeClick, this);
5950      }
5951
5952     this.addEvents({
5953          /**
5954          * @event activate
5955          * Fires when this tab becomes the active tab.
5956          * @param {Roo.TabPanel} tabPanel The parent TabPanel
5957          * @param {Roo.TabPanelItem} this
5958          */
5959         "activate": true,
5960         /**
5961          * @event beforeclose
5962          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
5963          * @param {Roo.TabPanelItem} this
5964          * @param {Object} e Set cancel to true on this object to cancel the close.
5965          */
5966         "beforeclose": true,
5967         /**
5968          * @event close
5969          * Fires when this tab is closed.
5970          * @param {Roo.TabPanelItem} this
5971          */
5972          "close": true,
5973         /**
5974          * @event deactivate
5975          * Fires when this tab is no longer the active tab.
5976          * @param {Roo.TabPanel} tabPanel The parent TabPanel
5977          * @param {Roo.TabPanelItem} this
5978          */
5979          "deactivate" : true
5980     });
5981     this.hidden = false;
5982
5983     Roo.TabPanelItem.superclass.constructor.call(this);
5984 };
5985
5986 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
5987     purgeListeners : function(){
5988        Roo.util.Observable.prototype.purgeListeners.call(this);
5989        this.el.removeAllListeners();
5990     },
5991     /**
5992      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
5993      */
5994     show : function(){
5995         this.pnode.addClass("on");
5996         this.showAction();
5997         if(Roo.isOpera){
5998             this.tabPanel.stripWrap.repaint();
5999         }
6000         this.fireEvent("activate", this.tabPanel, this);
6001     },
6002
6003     /**
6004      * Returns true if this tab is the active tab.
6005      * @return {Boolean}
6006      */
6007     isActive : function(){
6008         return this.tabPanel.getActiveTab() == this;
6009     },
6010
6011     /**
6012      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
6013      */
6014     hide : function(){
6015         this.pnode.removeClass("on");
6016         this.hideAction();
6017         this.fireEvent("deactivate", this.tabPanel, this);
6018     },
6019
6020     hideAction : function(){
6021         this.bodyEl.hide();
6022         this.bodyEl.setStyle("position", "absolute");
6023         this.bodyEl.setLeft("-20000px");
6024         this.bodyEl.setTop("-20000px");
6025     },
6026
6027     showAction : function(){
6028         this.bodyEl.setStyle("position", "relative");
6029         this.bodyEl.setTop("");
6030         this.bodyEl.setLeft("");
6031         this.bodyEl.show();
6032     },
6033
6034     /**
6035      * Set the tooltip for the tab.
6036      * @param {String} tooltip The tab's tooltip
6037      */
6038     setTooltip : function(text){
6039         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
6040             this.textEl.dom.qtip = text;
6041             this.textEl.dom.removeAttribute('title');
6042         }else{
6043             this.textEl.dom.title = text;
6044         }
6045     },
6046
6047     onTabClick : function(e){
6048         e.preventDefault();
6049         this.tabPanel.activate(this.id);
6050     },
6051
6052     onTabMouseDown : function(e){
6053         e.preventDefault();
6054         this.tabPanel.activate(this.id);
6055     },
6056
6057     getWidth : function(){
6058         return this.inner.getWidth();
6059     },
6060
6061     setWidth : function(width){
6062         var iwidth = width - this.pnode.getPadding("lr");
6063         this.inner.setWidth(iwidth);
6064         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
6065         this.pnode.setWidth(width);
6066     },
6067
6068     /**
6069      * Show or hide the tab
6070      * @param {Boolean} hidden True to hide or false to show.
6071      */
6072     setHidden : function(hidden){
6073         this.hidden = hidden;
6074         this.pnode.setStyle("display", hidden ? "none" : "");
6075     },
6076
6077     /**
6078      * Returns true if this tab is "hidden"
6079      * @return {Boolean}
6080      */
6081     isHidden : function(){
6082         return this.hidden;
6083     },
6084
6085     /**
6086      * Returns the text for this tab
6087      * @return {String}
6088      */
6089     getText : function(){
6090         return this.text;
6091     },
6092
6093     autoSize : function(){
6094         //this.el.beginMeasure();
6095         this.textEl.setWidth(1);
6096         /*
6097          *  #2804 [new] Tabs in Roojs
6098          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
6099          */
6100         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
6101         //this.el.endMeasure();
6102     },
6103
6104     /**
6105      * Sets the text for the tab (Note: this also sets the tooltip text)
6106      * @param {String} text The tab's text and tooltip
6107      */
6108     setText : function(text){
6109         this.text = text;
6110         this.textEl.update(text);
6111         this.setTooltip(text);
6112         if(!this.tabPanel.resizeTabs){
6113             this.autoSize();
6114         }
6115     },
6116     /**
6117      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
6118      */
6119     activate : function(){
6120         this.tabPanel.activate(this.id);
6121     },
6122
6123     /**
6124      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
6125      */
6126     disable : function(){
6127         if(this.tabPanel.active != this){
6128             this.disabled = true;
6129             this.pnode.addClass("disabled");
6130         }
6131     },
6132
6133     /**
6134      * Enables this TabPanelItem if it was previously disabled.
6135      */
6136     enable : function(){
6137         this.disabled = false;
6138         this.pnode.removeClass("disabled");
6139     },
6140
6141     /**
6142      * Sets the content for this TabPanelItem.
6143      * @param {String} content The content
6144      * @param {Boolean} loadScripts true to look for and load scripts
6145      */
6146     setContent : function(content, loadScripts){
6147         this.bodyEl.update(content, loadScripts);
6148     },
6149
6150     /**
6151      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
6152      * @return {Roo.UpdateManager} The UpdateManager
6153      */
6154     getUpdateManager : function(){
6155         return this.bodyEl.getUpdateManager();
6156     },
6157
6158     /**
6159      * Set a URL to be used to load the content for this TabPanelItem.
6160      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
6161      * @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)
6162      * @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)
6163      * @return {Roo.UpdateManager} The UpdateManager
6164      */
6165     setUrl : function(url, params, loadOnce){
6166         if(this.refreshDelegate){
6167             this.un('activate', this.refreshDelegate);
6168         }
6169         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
6170         this.on("activate", this.refreshDelegate);
6171         return this.bodyEl.getUpdateManager();
6172     },
6173
6174     /** @private */
6175     _handleRefresh : function(url, params, loadOnce){
6176         if(!loadOnce || !this.loaded){
6177             var updater = this.bodyEl.getUpdateManager();
6178             updater.update(url, params, this._setLoaded.createDelegate(this));
6179         }
6180     },
6181
6182     /**
6183      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
6184      *   Will fail silently if the setUrl method has not been called.
6185      *   This does not activate the panel, just updates its content.
6186      */
6187     refresh : function(){
6188         if(this.refreshDelegate){
6189            this.loaded = false;
6190            this.refreshDelegate();
6191         }
6192     },
6193
6194     /** @private */
6195     _setLoaded : function(){
6196         this.loaded = true;
6197     },
6198
6199     /** @private */
6200     closeClick : function(e){
6201         var o = {};
6202         e.stopEvent();
6203         this.fireEvent("beforeclose", this, o);
6204         if(o.cancel !== true){
6205             this.tabPanel.removeTab(this.id);
6206         }
6207     },
6208     /**
6209      * The text displayed in the tooltip for the close icon.
6210      * @type String
6211      */
6212     closeText : "Close this tab"
6213 });
6214
6215 /** @private */
6216 Roo.TabPanel.prototype.createStrip = function(container){
6217     var strip = document.createElement("div");
6218     strip.className = "x-tabs-wrap";
6219     container.appendChild(strip);
6220     return strip;
6221 };
6222 /** @private */
6223 Roo.TabPanel.prototype.createStripList = function(strip){
6224     // div wrapper for retard IE
6225     // returns the "tr" element.
6226     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
6227         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
6228         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
6229     return strip.firstChild.firstChild.firstChild.firstChild;
6230 };
6231 /** @private */
6232 Roo.TabPanel.prototype.createBody = function(container){
6233     var body = document.createElement("div");
6234     Roo.id(body, "tab-body");
6235     Roo.fly(body).addClass("x-tabs-body");
6236     container.appendChild(body);
6237     return body;
6238 };
6239 /** @private */
6240 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
6241     var body = Roo.getDom(id);
6242     if(!body){
6243         body = document.createElement("div");
6244         body.id = id;
6245     }
6246     Roo.fly(body).addClass("x-tabs-item-body");
6247     bodyEl.insertBefore(body, bodyEl.firstChild);
6248     return body;
6249 };
6250 /** @private */
6251 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
6252     var td = document.createElement("td");
6253     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
6254     //stripEl.appendChild(td);
6255     if(closable){
6256         td.className = "x-tabs-closable";
6257         if(!this.closeTpl){
6258             this.closeTpl = new Roo.Template(
6259                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
6260                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
6261                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
6262             );
6263         }
6264         var el = this.closeTpl.overwrite(td, {"text": text});
6265         var close = el.getElementsByTagName("div")[0];
6266         var inner = el.getElementsByTagName("em")[0];
6267         return {"el": el, "close": close, "inner": inner};
6268     } else {
6269         if(!this.tabTpl){
6270             this.tabTpl = new Roo.Template(
6271                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
6272                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
6273             );
6274         }
6275         var el = this.tabTpl.overwrite(td, {"text": text});
6276         var inner = el.getElementsByTagName("em")[0];
6277         return {"el": el, "inner": inner};
6278     }
6279 };/*
6280  * Based on:
6281  * Ext JS Library 1.1.1
6282  * Copyright(c) 2006-2007, Ext JS, LLC.
6283  *
6284  * Originally Released Under LGPL - original licence link has changed is not relivant.
6285  *
6286  * Fork - LGPL
6287  * <script type="text/javascript">
6288  */
6289
6290 /**
6291  * @class Roo.Button
6292  * @extends Roo.util.Observable
6293  * Simple Button class
6294  * @cfg {String} text The button text
6295  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
6296  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
6297  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
6298  * @cfg {Object} scope The scope of the handler
6299  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
6300  * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
6301  * @cfg {Boolean} hidden True to start hidden (defaults to false)
6302  * @cfg {Boolean} disabled True to start disabled (defaults to false)
6303  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
6304  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
6305    applies if enableToggle = true)
6306  * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
6307  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
6308   an {@link Roo.util.ClickRepeater} config object (defaults to false).
6309  * @constructor
6310  * Create a new button
6311  * @param {Object} config The config object
6312  */
6313 Roo.Button = function(renderTo, config)
6314 {
6315     if (!config) {
6316         config = renderTo;
6317         renderTo = config.renderTo || false;
6318     }
6319     
6320     Roo.apply(this, config);
6321     this.addEvents({
6322         /**
6323              * @event click
6324              * Fires when this button is clicked
6325              * @param {Button} this
6326              * @param {EventObject} e The click event
6327              */
6328             "click" : true,
6329         /**
6330              * @event toggle
6331              * Fires when the "pressed" state of this button changes (only if enableToggle = true)
6332              * @param {Button} this
6333              * @param {Boolean} pressed
6334              */
6335             "toggle" : true,
6336         /**
6337              * @event mouseover
6338              * Fires when the mouse hovers over the button
6339              * @param {Button} this
6340              * @param {Event} e The event object
6341              */
6342         'mouseover' : true,
6343         /**
6344              * @event mouseout
6345              * Fires when the mouse exits the button
6346              * @param {Button} this
6347              * @param {Event} e The event object
6348              */
6349         'mouseout': true,
6350          /**
6351              * @event render
6352              * Fires when the button is rendered
6353              * @param {Button} this
6354              */
6355         'render': true
6356     });
6357     if(this.menu){
6358         this.menu = Roo.menu.MenuMgr.get(this.menu);
6359     }
6360     // register listeners first!!  - so render can be captured..
6361     Roo.util.Observable.call(this);
6362     if(renderTo){
6363         this.render(renderTo);
6364     }
6365     
6366   
6367 };
6368
6369 Roo.extend(Roo.Button, Roo.util.Observable, {
6370     /**
6371      * 
6372      */
6373     
6374     /**
6375      * Read-only. True if this button is hidden
6376      * @type Boolean
6377      */
6378     hidden : false,
6379     /**
6380      * Read-only. True if this button is disabled
6381      * @type Boolean
6382      */
6383     disabled : false,
6384     /**
6385      * Read-only. True if this button is pressed (only if enableToggle = true)
6386      * @type Boolean
6387      */
6388     pressed : false,
6389
6390     /**
6391      * @cfg {Number} tabIndex 
6392      * The DOM tabIndex for this button (defaults to undefined)
6393      */
6394     tabIndex : undefined,
6395
6396     /**
6397      * @cfg {Boolean} enableToggle
6398      * True to enable pressed/not pressed toggling (defaults to false)
6399      */
6400     enableToggle: false,
6401     /**
6402      * @cfg {Roo.menu.Menu} menu
6403      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
6404      */
6405     menu : undefined,
6406     /**
6407      * @cfg {String} menuAlign
6408      * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
6409      */
6410     menuAlign : "tl-bl?",
6411
6412     /**
6413      * @cfg {String} iconCls
6414      * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
6415      */
6416     iconCls : undefined,
6417     /**
6418      * @cfg {String} type
6419      * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
6420      */
6421     type : 'button',
6422
6423     // private
6424     menuClassTarget: 'tr',
6425
6426     /**
6427      * @cfg {String} clickEvent
6428      * The type of event to map to the button's event handler (defaults to 'click')
6429      */
6430     clickEvent : 'click',
6431
6432     /**
6433      * @cfg {Boolean} handleMouseEvents
6434      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
6435      */
6436     handleMouseEvents : true,
6437
6438     /**
6439      * @cfg {String} tooltipType
6440      * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
6441      */
6442     tooltipType : 'qtip',
6443
6444     /**
6445      * @cfg {String} cls
6446      * A CSS class to apply to the button's main element.
6447      */
6448     
6449     /**
6450      * @cfg {Roo.Template} template (Optional)
6451      * An {@link Roo.Template} with which to create the Button's main element. This Template must
6452      * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
6453      * require code modifications if required elements (e.g. a button) aren't present.
6454      */
6455
6456     // private
6457     render : function(renderTo){
6458         var btn;
6459         if(this.hideParent){
6460             this.parentEl = Roo.get(renderTo);
6461         }
6462         if(!this.dhconfig){
6463             if(!this.template){
6464                 if(!Roo.Button.buttonTemplate){
6465                     // hideous table template
6466                     Roo.Button.buttonTemplate = new Roo.Template(
6467                         '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
6468                         '<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>',
6469                         "</tr></tbody></table>");
6470                 }
6471                 this.template = Roo.Button.buttonTemplate;
6472             }
6473             btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
6474             var btnEl = btn.child("button:first");
6475             btnEl.on('focus', this.onFocus, this);
6476             btnEl.on('blur', this.onBlur, this);
6477             if(this.cls){
6478                 btn.addClass(this.cls);
6479             }
6480             if(this.icon){
6481                 btnEl.setStyle('background-image', 'url(' +this.icon +')');
6482             }
6483             if(this.iconCls){
6484                 btnEl.addClass(this.iconCls);
6485                 if(!this.cls){
6486                     btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
6487                 }
6488             }
6489             if(this.tabIndex !== undefined){
6490                 btnEl.dom.tabIndex = this.tabIndex;
6491             }
6492             if(this.tooltip){
6493                 if(typeof this.tooltip == 'object'){
6494                     Roo.QuickTips.tips(Roo.apply({
6495                           target: btnEl.id
6496                     }, this.tooltip));
6497                 } else {
6498                     btnEl.dom[this.tooltipType] = this.tooltip;
6499                 }
6500             }
6501         }else{
6502             btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
6503         }
6504         this.el = btn;
6505         if(this.id){
6506             this.el.dom.id = this.el.id = this.id;
6507         }
6508         if(this.menu){
6509             this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
6510             this.menu.on("show", this.onMenuShow, this);
6511             this.menu.on("hide", this.onMenuHide, this);
6512         }
6513         btn.addClass("x-btn");
6514         if(Roo.isIE && !Roo.isIE7){
6515             this.autoWidth.defer(1, this);
6516         }else{
6517             this.autoWidth();
6518         }
6519         if(this.handleMouseEvents){
6520             btn.on("mouseover", this.onMouseOver, this);
6521             btn.on("mouseout", this.onMouseOut, this);
6522             btn.on("mousedown", this.onMouseDown, this);
6523         }
6524         btn.on(this.clickEvent, this.onClick, this);
6525         //btn.on("mouseup", this.onMouseUp, this);
6526         if(this.hidden){
6527             this.hide();
6528         }
6529         if(this.disabled){
6530             this.disable();
6531         }
6532         Roo.ButtonToggleMgr.register(this);
6533         if(this.pressed){
6534             this.el.addClass("x-btn-pressed");
6535         }
6536         if(this.repeat){
6537             var repeater = new Roo.util.ClickRepeater(btn,
6538                 typeof this.repeat == "object" ? this.repeat : {}
6539             );
6540             repeater.on("click", this.onClick,  this);
6541         }
6542         
6543         this.fireEvent('render', this);
6544         
6545     },
6546     /**
6547      * Returns the button's underlying element
6548      * @return {Roo.Element} The element
6549      */
6550     getEl : function(){
6551         return this.el;  
6552     },
6553     
6554     /**
6555      * Destroys this Button and removes any listeners.
6556      */
6557     destroy : function(){
6558         Roo.ButtonToggleMgr.unregister(this);
6559         this.el.removeAllListeners();
6560         this.purgeListeners();
6561         this.el.remove();
6562     },
6563
6564     // private
6565     autoWidth : function(){
6566         if(this.el){
6567             this.el.setWidth("auto");
6568             if(Roo.isIE7 && Roo.isStrict){
6569                 var ib = this.el.child('button');
6570                 if(ib && ib.getWidth() > 20){
6571                     ib.clip();
6572                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
6573                 }
6574             }
6575             if(this.minWidth){
6576                 if(this.hidden){
6577                     this.el.beginMeasure();
6578                 }
6579                 if(this.el.getWidth() < this.minWidth){
6580                     this.el.setWidth(this.minWidth);
6581                 }
6582                 if(this.hidden){
6583                     this.el.endMeasure();
6584                 }
6585             }
6586         }
6587     },
6588
6589     /**
6590      * Assigns this button's click handler
6591      * @param {Function} handler The function to call when the button is clicked
6592      * @param {Object} scope (optional) Scope for the function passed in
6593      */
6594     setHandler : function(handler, scope){
6595         this.handler = handler;
6596         this.scope = scope;  
6597     },
6598     
6599     /**
6600      * Sets this button's text
6601      * @param {String} text The button text
6602      */
6603     setText : function(text){
6604         this.text = text;
6605         if(this.el){
6606             this.el.child("td.x-btn-center button.x-btn-text").update(text);
6607         }
6608         this.autoWidth();
6609     },
6610     
6611     /**
6612      * Gets the text for this button
6613      * @return {String} The button text
6614      */
6615     getText : function(){
6616         return this.text;  
6617     },
6618     
6619     /**
6620      * Show this button
6621      */
6622     show: function(){
6623         this.hidden = false;
6624         if(this.el){
6625             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
6626         }
6627     },
6628     
6629     /**
6630      * Hide this button
6631      */
6632     hide: function(){
6633         this.hidden = true;
6634         if(this.el){
6635             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
6636         }
6637     },
6638     
6639     /**
6640      * Convenience function for boolean show/hide
6641      * @param {Boolean} visible True to show, false to hide
6642      */
6643     setVisible: function(visible){
6644         if(visible) {
6645             this.show();
6646         }else{
6647             this.hide();
6648         }
6649     },
6650     /**
6651          * Similar to toggle, but does not trigger event.
6652          * @param {Boolean} state [required] Force a particular state
6653          */
6654         setPressed : function(state)
6655         {
6656             if(state != this.pressed){
6657             if(state){
6658                 this.el.addClass("x-btn-pressed");
6659                 this.pressed = true;
6660             }else{
6661                 this.el.removeClass("x-btn-pressed");
6662                 this.pressed = false;
6663             }
6664         }
6665         },
6666         
6667     /**
6668      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
6669      * @param {Boolean} state (optional) Force a particular state
6670      */
6671     toggle : function(state){
6672         state = state === undefined ? !this.pressed : state;
6673         if(state != this.pressed){
6674             if(state){
6675                 this.el.addClass("x-btn-pressed");
6676                 this.pressed = true;
6677                 this.fireEvent("toggle", this, true);
6678             }else{
6679                 this.el.removeClass("x-btn-pressed");
6680                 this.pressed = false;
6681                 this.fireEvent("toggle", this, false);
6682             }
6683             if(this.toggleHandler){
6684                 this.toggleHandler.call(this.scope || this, this, state);
6685             }
6686         }
6687     },
6688     
6689         
6690         
6691     /**
6692      * Focus the button
6693      */
6694     focus : function(){
6695         this.el.child('button:first').focus();
6696     },
6697     
6698     /**
6699      * Disable this button
6700      */
6701     disable : function(){
6702         if(this.el){
6703             this.el.addClass("x-btn-disabled");
6704         }
6705         this.disabled = true;
6706     },
6707     
6708     /**
6709      * Enable this button
6710      */
6711     enable : function(){
6712         if(this.el){
6713             this.el.removeClass("x-btn-disabled");
6714         }
6715         this.disabled = false;
6716     },
6717
6718     /**
6719      * Convenience function for boolean enable/disable
6720      * @param {Boolean} enabled True to enable, false to disable
6721      */
6722     setDisabled : function(v){
6723         this[v !== true ? "enable" : "disable"]();
6724     },
6725
6726     // private
6727     onClick : function(e)
6728     {
6729         if(e){
6730             e.preventDefault();
6731         }
6732         if(e.button != 0){
6733             return;
6734         }
6735         if(!this.disabled){
6736             if(this.enableToggle){
6737                 this.toggle();
6738             }
6739             if(this.menu && !this.menu.isVisible()){
6740                 this.menu.show(this.el, this.menuAlign);
6741             }
6742             this.fireEvent("click", this, e);
6743             if(this.handler){
6744                 this.el.removeClass("x-btn-over");
6745                 this.handler.call(this.scope || this, this, e);
6746             }
6747         }
6748     },
6749     // private
6750     onMouseOver : function(e){
6751         if(!this.disabled){
6752             this.el.addClass("x-btn-over");
6753             this.fireEvent('mouseover', this, e);
6754         }
6755     },
6756     // private
6757     onMouseOut : function(e){
6758         if(!e.within(this.el,  true)){
6759             this.el.removeClass("x-btn-over");
6760             this.fireEvent('mouseout', this, e);
6761         }
6762     },
6763     // private
6764     onFocus : function(e){
6765         if(!this.disabled){
6766             this.el.addClass("x-btn-focus");
6767         }
6768     },
6769     // private
6770     onBlur : function(e){
6771         this.el.removeClass("x-btn-focus");
6772     },
6773     // private
6774     onMouseDown : function(e){
6775         if(!this.disabled && e.button == 0){
6776             this.el.addClass("x-btn-click");
6777             Roo.get(document).on('mouseup', this.onMouseUp, this);
6778         }
6779     },
6780     // private
6781     onMouseUp : function(e){
6782         if(e.button == 0){
6783             this.el.removeClass("x-btn-click");
6784             Roo.get(document).un('mouseup', this.onMouseUp, this);
6785         }
6786     },
6787     // private
6788     onMenuShow : function(e){
6789         this.el.addClass("x-btn-menu-active");
6790     },
6791     // private
6792     onMenuHide : function(e){
6793         this.el.removeClass("x-btn-menu-active");
6794     }   
6795 });
6796
6797 // Private utility class used by Button
6798 Roo.ButtonToggleMgr = function(){
6799    var groups = {};
6800    
6801    function toggleGroup(btn, state){
6802        if(state){
6803            var g = groups[btn.toggleGroup];
6804            for(var i = 0, l = g.length; i < l; i++){
6805                if(g[i] != btn){
6806                    g[i].toggle(false);
6807                }
6808            }
6809        }
6810    }
6811    
6812    return {
6813        register : function(btn){
6814            if(!btn.toggleGroup){
6815                return;
6816            }
6817            var g = groups[btn.toggleGroup];
6818            if(!g){
6819                g = groups[btn.toggleGroup] = [];
6820            }
6821            g.push(btn);
6822            btn.on("toggle", toggleGroup);
6823        },
6824        
6825        unregister : function(btn){
6826            if(!btn.toggleGroup){
6827                return;
6828            }
6829            var g = groups[btn.toggleGroup];
6830            if(g){
6831                g.remove(btn);
6832                btn.un("toggle", toggleGroup);
6833            }
6834        }
6835    };
6836 }();/*
6837  * Based on:
6838  * Ext JS Library 1.1.1
6839  * Copyright(c) 2006-2007, Ext JS, LLC.
6840  *
6841  * Originally Released Under LGPL - original licence link has changed is not relivant.
6842  *
6843  * Fork - LGPL
6844  * <script type="text/javascript">
6845  */
6846  
6847 /**
6848  * @class Roo.SplitButton
6849  * @extends Roo.Button
6850  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
6851  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
6852  * options to the primary button action, but any custom handler can provide the arrowclick implementation.
6853  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
6854  * @cfg {String} arrowTooltip The title attribute of the arrow
6855  * @constructor
6856  * Create a new menu button
6857  * @param {String/HTMLElement/Element} renderTo The element to append the button to
6858  * @param {Object} config The config object
6859  */
6860 Roo.SplitButton = function(renderTo, config){
6861     Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
6862     /**
6863      * @event arrowclick
6864      * Fires when this button's arrow is clicked
6865      * @param {SplitButton} this
6866      * @param {EventObject} e The click event
6867      */
6868     this.addEvents({"arrowclick":true});
6869 };
6870
6871 Roo.extend(Roo.SplitButton, Roo.Button, {
6872     render : function(renderTo){
6873         // this is one sweet looking template!
6874         var tpl = new Roo.Template(
6875             '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
6876             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
6877             '<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>',
6878             "</tbody></table></td><td>",
6879             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
6880             '<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>',
6881             "</tbody></table></td></tr></table>"
6882         );
6883         var btn = tpl.append(renderTo, [this.text, this.type], true);
6884         var btnEl = btn.child("button");
6885         if(this.cls){
6886             btn.addClass(this.cls);
6887         }
6888         if(this.icon){
6889             btnEl.setStyle('background-image', 'url(' +this.icon +')');
6890         }
6891         if(this.iconCls){
6892             btnEl.addClass(this.iconCls);
6893             if(!this.cls){
6894                 btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
6895             }
6896         }
6897         this.el = btn;
6898         if(this.handleMouseEvents){
6899             btn.on("mouseover", this.onMouseOver, this);
6900             btn.on("mouseout", this.onMouseOut, this);
6901             btn.on("mousedown", this.onMouseDown, this);
6902             btn.on("mouseup", this.onMouseUp, this);
6903         }
6904         btn.on(this.clickEvent, this.onClick, this);
6905         if(this.tooltip){
6906             if(typeof this.tooltip == 'object'){
6907                 Roo.QuickTips.tips(Roo.apply({
6908                       target: btnEl.id
6909                 }, this.tooltip));
6910             } else {
6911                 btnEl.dom[this.tooltipType] = this.tooltip;
6912             }
6913         }
6914         if(this.arrowTooltip){
6915             btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
6916         }
6917         if(this.hidden){
6918             this.hide();
6919         }
6920         if(this.disabled){
6921             this.disable();
6922         }
6923         if(this.pressed){
6924             this.el.addClass("x-btn-pressed");
6925         }
6926         if(Roo.isIE && !Roo.isIE7){
6927             this.autoWidth.defer(1, this);
6928         }else{
6929             this.autoWidth();
6930         }
6931         if(this.menu){
6932             this.menu.on("show", this.onMenuShow, this);
6933             this.menu.on("hide", this.onMenuHide, this);
6934         }
6935         this.fireEvent('render', this);
6936     },
6937
6938     // private
6939     autoWidth : function(){
6940         if(this.el){
6941             var tbl = this.el.child("table:first");
6942             var tbl2 = this.el.child("table:last");
6943             this.el.setWidth("auto");
6944             tbl.setWidth("auto");
6945             if(Roo.isIE7 && Roo.isStrict){
6946                 var ib = this.el.child('button:first');
6947                 if(ib && ib.getWidth() > 20){
6948                     ib.clip();
6949                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
6950                 }
6951             }
6952             if(this.minWidth){
6953                 if(this.hidden){
6954                     this.el.beginMeasure();
6955                 }
6956                 if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
6957                     tbl.setWidth(this.minWidth-tbl2.getWidth());
6958                 }
6959                 if(this.hidden){
6960                     this.el.endMeasure();
6961                 }
6962             }
6963             this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
6964         } 
6965     },
6966     /**
6967      * Sets this button's click handler
6968      * @param {Function} handler The function to call when the button is clicked
6969      * @param {Object} scope (optional) Scope for the function passed above
6970      */
6971     setHandler : function(handler, scope){
6972         this.handler = handler;
6973         this.scope = scope;  
6974     },
6975     
6976     /**
6977      * Sets this button's arrow click handler
6978      * @param {Function} handler The function to call when the arrow is clicked
6979      * @param {Object} scope (optional) Scope for the function passed above
6980      */
6981     setArrowHandler : function(handler, scope){
6982         this.arrowHandler = handler;
6983         this.scope = scope;  
6984     },
6985     
6986     /**
6987      * Focus the button
6988      */
6989     focus : function(){
6990         if(this.el){
6991             this.el.child("button:first").focus();
6992         }
6993     },
6994
6995     // private
6996     onClick : function(e){
6997         e.preventDefault();
6998         if(!this.disabled){
6999             if(e.getTarget(".x-btn-menu-arrow-wrap")){
7000                 if(this.menu && !this.menu.isVisible()){
7001                     this.menu.show(this.el, this.menuAlign);
7002                 }
7003                 this.fireEvent("arrowclick", this, e);
7004                 if(this.arrowHandler){
7005                     this.arrowHandler.call(this.scope || this, this, e);
7006                 }
7007             }else{
7008                 this.fireEvent("click", this, e);
7009                 if(this.handler){
7010                     this.handler.call(this.scope || this, this, e);
7011                 }
7012             }
7013         }
7014     },
7015     // private
7016     onMouseDown : function(e){
7017         if(!this.disabled){
7018             Roo.fly(e.getTarget("table")).addClass("x-btn-click");
7019         }
7020     },
7021     // private
7022     onMouseUp : function(e){
7023         Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
7024     }   
7025 });
7026
7027
7028 // backwards compat
7029 Roo.MenuButton = Roo.SplitButton;/*
7030  * Based on:
7031  * Ext JS Library 1.1.1
7032  * Copyright(c) 2006-2007, Ext JS, LLC.
7033  *
7034  * Originally Released Under LGPL - original licence link has changed is not relivant.
7035  *
7036  * Fork - LGPL
7037  * <script type="text/javascript">
7038  */
7039
7040 /**
7041  * @class Roo.Toolbar
7042  * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field 
7043  * Basic Toolbar class.
7044  * @constructor
7045  * Creates a new Toolbar
7046  * @param {Object} container The config object
7047  */ 
7048 Roo.Toolbar = function(container, buttons, config)
7049 {
7050     /// old consturctor format still supported..
7051     if(container instanceof Array){ // omit the container for later rendering
7052         buttons = container;
7053         config = buttons;
7054         container = null;
7055     }
7056     if (typeof(container) == 'object' && container.xtype) {
7057         config = container;
7058         container = config.container;
7059         buttons = config.buttons || []; // not really - use items!!
7060     }
7061     var xitems = [];
7062     if (config && config.items) {
7063         xitems = config.items;
7064         delete config.items;
7065     }
7066     Roo.apply(this, config);
7067     this.buttons = buttons;
7068     
7069     if(container){
7070         this.render(container);
7071     }
7072     this.xitems = xitems;
7073     Roo.each(xitems, function(b) {
7074         this.add(b);
7075     }, this);
7076     
7077 };
7078
7079 Roo.Toolbar.prototype = {
7080     /**
7081      * @cfg {Array} items
7082      * array of button configs or elements to add (will be converted to a MixedCollection)
7083      */
7084     items: false,
7085     /**
7086      * @cfg {String/HTMLElement/Element} container
7087      * The id or element that will contain the toolbar
7088      */
7089     // private
7090     render : function(ct){
7091         this.el = Roo.get(ct);
7092         if(this.cls){
7093             this.el.addClass(this.cls);
7094         }
7095         // using a table allows for vertical alignment
7096         // 100% width is needed by Safari...
7097         this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
7098         this.tr = this.el.child("tr", true);
7099         var autoId = 0;
7100         this.items = new Roo.util.MixedCollection(false, function(o){
7101             return o.id || ("item" + (++autoId));
7102         });
7103         if(this.buttons){
7104             this.add.apply(this, this.buttons);
7105             delete this.buttons;
7106         }
7107     },
7108
7109     /**
7110      * Adds element(s) to the toolbar -- this function takes a variable number of 
7111      * arguments of mixed type and adds them to the toolbar.
7112      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
7113      * <ul>
7114      * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
7115      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
7116      * <li>Field: Any form field (equivalent to {@link #addField})</li>
7117      * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
7118      * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
7119      * Note that there are a few special strings that are treated differently as explained nRoo.</li>
7120      * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
7121      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
7122      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
7123      * </ul>
7124      * @param {Mixed} arg2
7125      * @param {Mixed} etc.
7126      */
7127     add : function(){
7128         var a = arguments, l = a.length;
7129         for(var i = 0; i < l; i++){
7130             this._add(a[i]);
7131         }
7132     },
7133     // private..
7134     _add : function(el) {
7135         
7136         if (el.xtype) {
7137             el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
7138         }
7139         
7140         if (el.applyTo){ // some kind of form field
7141             return this.addField(el);
7142         } 
7143         if (el.render){ // some kind of Toolbar.Item
7144             return this.addItem(el);
7145         }
7146         if (typeof el == "string"){ // string
7147             if(el == "separator" || el == "-"){
7148                 return this.addSeparator();
7149             }
7150             if (el == " "){
7151                 return this.addSpacer();
7152             }
7153             if(el == "->"){
7154                 return this.addFill();
7155             }
7156             return this.addText(el);
7157             
7158         }
7159         if(el.tagName){ // element
7160             return this.addElement(el);
7161         }
7162         if(typeof el == "object"){ // must be button config?
7163             return this.addButton(el);
7164         }
7165         // and now what?!?!
7166         return false;
7167         
7168     },
7169     
7170     /**
7171      * Add an Xtype element
7172      * @param {Object} xtype Xtype Object
7173      * @return {Object} created Object
7174      */
7175     addxtype : function(e){
7176         return this.add(e);  
7177     },
7178     
7179     /**
7180      * Returns the Element for this toolbar.
7181      * @return {Roo.Element}
7182      */
7183     getEl : function(){
7184         return this.el;  
7185     },
7186     
7187     /**
7188      * Adds a separator
7189      * @return {Roo.Toolbar.Item} The separator item
7190      */
7191     addSeparator : function(){
7192         return this.addItem(new Roo.Toolbar.Separator());
7193     },
7194
7195     /**
7196      * Adds a spacer element
7197      * @return {Roo.Toolbar.Spacer} The spacer item
7198      */
7199     addSpacer : function(){
7200         return this.addItem(new Roo.Toolbar.Spacer());
7201     },
7202
7203     /**
7204      * Adds a fill element that forces subsequent additions to the right side of the toolbar
7205      * @return {Roo.Toolbar.Fill} The fill item
7206      */
7207     addFill : function(){
7208         return this.addItem(new Roo.Toolbar.Fill());
7209     },
7210
7211     /**
7212      * Adds any standard HTML element to the toolbar
7213      * @param {String/HTMLElement/Element} el The element or id of the element to add
7214      * @return {Roo.Toolbar.Item} The element's item
7215      */
7216     addElement : function(el){
7217         return this.addItem(new Roo.Toolbar.Item(el));
7218     },
7219     /**
7220      * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
7221      * @type Roo.util.MixedCollection  
7222      */
7223     items : false,
7224      
7225     /**
7226      * Adds any Toolbar.Item or subclass
7227      * @param {Roo.Toolbar.Item} item
7228      * @return {Roo.Toolbar.Item} The item
7229      */
7230     addItem : function(item){
7231         var td = this.nextBlock();
7232         item.render(td);
7233         this.items.add(item);
7234         return item;
7235     },
7236     
7237     /**
7238      * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
7239      * @param {Object/Array} config A button config or array of configs
7240      * @return {Roo.Toolbar.Button/Array}
7241      */
7242     addButton : function(config){
7243         if(config instanceof Array){
7244             var buttons = [];
7245             for(var i = 0, len = config.length; i < len; i++) {
7246                 buttons.push(this.addButton(config[i]));
7247             }
7248             return buttons;
7249         }
7250         var b = config;
7251         if(!(config instanceof Roo.Toolbar.Button)){
7252             b = config.split ?
7253                 new Roo.Toolbar.SplitButton(config) :
7254                 new Roo.Toolbar.Button(config);
7255         }
7256         var td = this.nextBlock();
7257         b.render(td);
7258         this.items.add(b);
7259         return b;
7260     },
7261     
7262     /**
7263      * Adds text to the toolbar
7264      * @param {String} text The text to add
7265      * @return {Roo.Toolbar.Item} The element's item
7266      */
7267     addText : function(text){
7268         return this.addItem(new Roo.Toolbar.TextItem(text));
7269     },
7270     
7271     /**
7272      * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
7273      * @param {Number} index The index where the item is to be inserted
7274      * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
7275      * @return {Roo.Toolbar.Button/Item}
7276      */
7277     insertButton : function(index, item){
7278         if(item instanceof Array){
7279             var buttons = [];
7280             for(var i = 0, len = item.length; i < len; i++) {
7281                buttons.push(this.insertButton(index + i, item[i]));
7282             }
7283             return buttons;
7284         }
7285         if (!(item instanceof Roo.Toolbar.Button)){
7286            item = new Roo.Toolbar.Button(item);
7287         }
7288         var td = document.createElement("td");
7289         this.tr.insertBefore(td, this.tr.childNodes[index]);
7290         item.render(td);
7291         this.items.insert(index, item);
7292         return item;
7293     },
7294     
7295     /**
7296      * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
7297      * @param {Object} config
7298      * @return {Roo.Toolbar.Item} The element's item
7299      */
7300     addDom : function(config, returnEl){
7301         var td = this.nextBlock();
7302         Roo.DomHelper.overwrite(td, config);
7303         var ti = new Roo.Toolbar.Item(td.firstChild);
7304         ti.render(td);
7305         this.items.add(ti);
7306         return ti;
7307     },
7308
7309     /**
7310      * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
7311      * @type Roo.util.MixedCollection  
7312      */
7313     fields : false,
7314     
7315     /**
7316      * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
7317      * Note: the field should not have been rendered yet. For a field that has already been
7318      * rendered, use {@link #addElement}.
7319      * @param {Roo.form.Field} field
7320      * @return {Roo.ToolbarItem}
7321      */
7322      
7323       
7324     addField : function(field) {
7325         if (!this.fields) {
7326             var autoId = 0;
7327             this.fields = new Roo.util.MixedCollection(false, function(o){
7328                 return o.id || ("item" + (++autoId));
7329             });
7330
7331         }
7332         
7333         var td = this.nextBlock();
7334         field.render(td);
7335         var ti = new Roo.Toolbar.Item(td.firstChild);
7336         ti.render(td);
7337         this.items.add(ti);
7338         this.fields.add(field);
7339         return ti;
7340     },
7341     /**
7342      * Hide the toolbar
7343      * @method hide
7344      */
7345      
7346       
7347     hide : function()
7348     {
7349         this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
7350         this.el.child('div').hide();
7351     },
7352     /**
7353      * Show the toolbar
7354      * @method show
7355      */
7356     show : function()
7357     {
7358         this.el.child('div').show();
7359     },
7360       
7361     // private
7362     nextBlock : function(){
7363         var td = document.createElement("td");
7364         this.tr.appendChild(td);
7365         return td;
7366     },
7367
7368     // private
7369     destroy : function(){
7370         if(this.items){ // rendered?
7371             Roo.destroy.apply(Roo, this.items.items);
7372         }
7373         if(this.fields){ // rendered?
7374             Roo.destroy.apply(Roo, this.fields.items);
7375         }
7376         Roo.Element.uncache(this.el, this.tr);
7377     }
7378 };
7379
7380 /**
7381  * @class Roo.Toolbar.Item
7382  * The base class that other classes should extend in order to get some basic common toolbar item functionality.
7383  * @constructor
7384  * Creates a new Item
7385  * @param {HTMLElement} el 
7386  */
7387 Roo.Toolbar.Item = function(el){
7388     var cfg = {};
7389     if (typeof (el.xtype) != 'undefined') {
7390         cfg = el;
7391         el = cfg.el;
7392     }
7393     
7394     this.el = Roo.getDom(el);
7395     this.id = Roo.id(this.el);
7396     this.hidden = false;
7397     
7398     this.addEvents({
7399          /**
7400              * @event render
7401              * Fires when the button is rendered
7402              * @param {Button} this
7403              */
7404         'render': true
7405     });
7406     Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
7407 };
7408 Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
7409 //Roo.Toolbar.Item.prototype = {
7410     
7411     /**
7412      * Get this item's HTML Element
7413      * @return {HTMLElement}
7414      */
7415     getEl : function(){
7416        return this.el;  
7417     },
7418
7419     // private
7420     render : function(td){
7421         
7422          this.td = td;
7423         td.appendChild(this.el);
7424         
7425         this.fireEvent('render', this);
7426     },
7427     
7428     /**
7429      * Removes and destroys this item.
7430      */
7431     destroy : function(){
7432         this.td.parentNode.removeChild(this.td);
7433     },
7434     
7435     /**
7436      * Shows this item.
7437      */
7438     show: function(){
7439         this.hidden = false;
7440         this.td.style.display = "";
7441     },
7442     
7443     /**
7444      * Hides this item.
7445      */
7446     hide: function(){
7447         this.hidden = true;
7448         this.td.style.display = "none";
7449     },
7450     
7451     /**
7452      * Convenience function for boolean show/hide.
7453      * @param {Boolean} visible true to show/false to hide
7454      */
7455     setVisible: function(visible){
7456         if(visible) {
7457             this.show();
7458         }else{
7459             this.hide();
7460         }
7461     },
7462     
7463     /**
7464      * Try to focus this item.
7465      */
7466     focus : function(){
7467         Roo.fly(this.el).focus();
7468     },
7469     
7470     /**
7471      * Disables this item.
7472      */
7473     disable : function(){
7474         Roo.fly(this.td).addClass("x-item-disabled");
7475         this.disabled = true;
7476         this.el.disabled = true;
7477     },
7478     
7479     /**
7480      * Enables this item.
7481      */
7482     enable : function(){
7483         Roo.fly(this.td).removeClass("x-item-disabled");
7484         this.disabled = false;
7485         this.el.disabled = false;
7486     }
7487 });
7488
7489
7490 /**
7491  * @class Roo.Toolbar.Separator
7492  * @extends Roo.Toolbar.Item
7493  * A simple toolbar separator class
7494  * @constructor
7495  * Creates a new Separator
7496  */
7497 Roo.Toolbar.Separator = function(cfg){
7498     
7499     var s = document.createElement("span");
7500     s.className = "ytb-sep";
7501     if (cfg) {
7502         cfg.el = s;
7503     }
7504     
7505     Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
7506 };
7507 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
7508     enable:Roo.emptyFn,
7509     disable:Roo.emptyFn,
7510     focus:Roo.emptyFn
7511 });
7512
7513 /**
7514  * @class Roo.Toolbar.Spacer
7515  * @extends Roo.Toolbar.Item
7516  * A simple element that adds extra horizontal space to a toolbar.
7517  * @constructor
7518  * Creates a new Spacer
7519  */
7520 Roo.Toolbar.Spacer = function(cfg){
7521     var s = document.createElement("div");
7522     s.className = "ytb-spacer";
7523     if (cfg) {
7524         cfg.el = s;
7525     }
7526     Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
7527 };
7528 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
7529     enable:Roo.emptyFn,
7530     disable:Roo.emptyFn,
7531     focus:Roo.emptyFn
7532 });
7533
7534 /**
7535  * @class Roo.Toolbar.Fill
7536  * @extends Roo.Toolbar.Spacer
7537  * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
7538  * @constructor
7539  * Creates a new Spacer
7540  */
7541 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
7542     // private
7543     render : function(td){
7544         td.style.width = '100%';
7545         Roo.Toolbar.Fill.superclass.render.call(this, td);
7546     }
7547 });
7548
7549 /**
7550  * @class Roo.Toolbar.TextItem
7551  * @extends Roo.Toolbar.Item
7552  * A simple class that renders text directly into a toolbar.
7553  * @constructor
7554  * Creates a new TextItem
7555  * @cfg {string} text 
7556  */
7557 Roo.Toolbar.TextItem = function(cfg){
7558     var  text = cfg || "";
7559     if (typeof(cfg) == 'object') {
7560         text = cfg.text || "";
7561     }  else {
7562         cfg = null;
7563     }
7564     var s = document.createElement("span");
7565     s.className = "ytb-text";
7566     s.innerHTML = text;
7567     if (cfg) {
7568         cfg.el  = s;
7569     }
7570     
7571     Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg ||  s);
7572 };
7573 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
7574     
7575      
7576     enable:Roo.emptyFn,
7577     disable:Roo.emptyFn,
7578     focus:Roo.emptyFn,
7579      /**
7580      * Shows this button
7581      */
7582     show: function(){
7583         this.hidden = false;
7584         this.el.style.display = "";
7585     },
7586     
7587     /**
7588      * Hides this button
7589      */
7590     hide: function(){
7591         this.hidden = true;
7592         this.el.style.display = "none";
7593     }
7594     
7595 });
7596
7597 /**
7598  * @class Roo.Toolbar.Button
7599  * @extends Roo.Button
7600  * A button that renders into a toolbar.
7601  * @constructor
7602  * Creates a new Button
7603  * @param {Object} config A standard {@link Roo.Button} config object
7604  */
7605 Roo.Toolbar.Button = function(config){
7606     Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
7607 };
7608 Roo.extend(Roo.Toolbar.Button, Roo.Button,
7609 {
7610     
7611     
7612     render : function(td){
7613         this.td = td;
7614         Roo.Toolbar.Button.superclass.render.call(this, td);
7615     },
7616     
7617     /**
7618      * Removes and destroys this button
7619      */
7620     destroy : function(){
7621         Roo.Toolbar.Button.superclass.destroy.call(this);
7622         this.td.parentNode.removeChild(this.td);
7623     },
7624     
7625     /**
7626      * Shows this button
7627      */
7628     show: function(){
7629         this.hidden = false;
7630         this.td.style.display = "";
7631     },
7632     
7633     /**
7634      * Hides this button
7635      */
7636     hide: function(){
7637         this.hidden = true;
7638         this.td.style.display = "none";
7639     },
7640
7641     /**
7642      * Disables this item
7643      */
7644     disable : function(){
7645         Roo.fly(this.td).addClass("x-item-disabled");
7646         this.disabled = true;
7647     },
7648
7649     /**
7650      * Enables this item
7651      */
7652     enable : function(){
7653         Roo.fly(this.td).removeClass("x-item-disabled");
7654         this.disabled = false;
7655     }
7656 });
7657 // backwards compat
7658 Roo.ToolbarButton = Roo.Toolbar.Button;
7659
7660 /**
7661  * @class Roo.Toolbar.SplitButton
7662  * @extends Roo.SplitButton
7663  * A menu button that renders into a toolbar.
7664  * @constructor
7665  * Creates a new SplitButton
7666  * @param {Object} config A standard {@link Roo.SplitButton} config object
7667  */
7668 Roo.Toolbar.SplitButton = function(config){
7669     Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
7670 };
7671 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
7672     render : function(td){
7673         this.td = td;
7674         Roo.Toolbar.SplitButton.superclass.render.call(this, td);
7675     },
7676     
7677     /**
7678      * Removes and destroys this button
7679      */
7680     destroy : function(){
7681         Roo.Toolbar.SplitButton.superclass.destroy.call(this);
7682         this.td.parentNode.removeChild(this.td);
7683     },
7684     
7685     /**
7686      * Shows this button
7687      */
7688     show: function(){
7689         this.hidden = false;
7690         this.td.style.display = "";
7691     },
7692     
7693     /**
7694      * Hides this button
7695      */
7696     hide: function(){
7697         this.hidden = true;
7698         this.td.style.display = "none";
7699     }
7700 });
7701
7702 // backwards compat
7703 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
7704  * Based on:
7705  * Ext JS Library 1.1.1
7706  * Copyright(c) 2006-2007, Ext JS, LLC.
7707  *
7708  * Originally Released Under LGPL - original licence link has changed is not relivant.
7709  *
7710  * Fork - LGPL
7711  * <script type="text/javascript">
7712  */
7713  
7714 /**
7715  * @class Roo.PagingToolbar
7716  * @extends Roo.Toolbar
7717  * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
7718  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
7719  * @constructor
7720  * Create a new PagingToolbar
7721  * @param {Object} config The config object
7722  */
7723 Roo.PagingToolbar = function(el, ds, config)
7724 {
7725     // old args format still supported... - xtype is prefered..
7726     if (typeof(el) == 'object' && el.xtype) {
7727         // created from xtype...
7728         config = el;
7729         ds = el.dataSource;
7730         el = config.container;
7731     }
7732     var items = [];
7733     if (config.items) {
7734         items = config.items;
7735         config.items = [];
7736     }
7737     
7738     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
7739     this.ds = ds;
7740     this.cursor = 0;
7741     this.renderButtons(this.el);
7742     this.bind(ds);
7743     
7744     // supprot items array.
7745    
7746     Roo.each(items, function(e) {
7747         this.add(Roo.factory(e));
7748     },this);
7749     
7750 };
7751
7752 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
7753    
7754     /**
7755      * @cfg {String/HTMLElement/Element} container
7756      * container The id or element that will contain the toolbar
7757      */
7758     /**
7759      * @cfg {Boolean} displayInfo
7760      * True to display the displayMsg (defaults to false)
7761      */
7762     
7763     
7764     /**
7765      * @cfg {Number} pageSize
7766      * The number of records to display per page (defaults to 20)
7767      */
7768     pageSize: 20,
7769     /**
7770      * @cfg {String} displayMsg
7771      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
7772      */
7773     displayMsg : 'Displaying {0} - {1} of {2}',
7774     /**
7775      * @cfg {String} emptyMsg
7776      * The message to display when no records are found (defaults to "No data to display")
7777      */
7778     emptyMsg : 'No data to display',
7779     /**
7780      * Customizable piece of the default paging text (defaults to "Page")
7781      * @type String
7782      */
7783     beforePageText : "Page",
7784     /**
7785      * Customizable piece of the default paging text (defaults to "of %0")
7786      * @type String
7787      */
7788     afterPageText : "of {0}",
7789     /**
7790      * Customizable piece of the default paging text (defaults to "First Page")
7791      * @type String
7792      */
7793     firstText : "First Page",
7794     /**
7795      * Customizable piece of the default paging text (defaults to "Previous Page")
7796      * @type String
7797      */
7798     prevText : "Previous Page",
7799     /**
7800      * Customizable piece of the default paging text (defaults to "Next Page")
7801      * @type String
7802      */
7803     nextText : "Next Page",
7804     /**
7805      * Customizable piece of the default paging text (defaults to "Last Page")
7806      * @type String
7807      */
7808     lastText : "Last Page",
7809     /**
7810      * Customizable piece of the default paging text (defaults to "Refresh")
7811      * @type String
7812      */
7813     refreshText : "Refresh",
7814
7815     // private
7816     renderButtons : function(el){
7817         Roo.PagingToolbar.superclass.render.call(this, el);
7818         this.first = this.addButton({
7819             tooltip: this.firstText,
7820             cls: "x-btn-icon x-grid-page-first",
7821             disabled: true,
7822             handler: this.onClick.createDelegate(this, ["first"])
7823         });
7824         this.prev = this.addButton({
7825             tooltip: this.prevText,
7826             cls: "x-btn-icon x-grid-page-prev",
7827             disabled: true,
7828             handler: this.onClick.createDelegate(this, ["prev"])
7829         });
7830         //this.addSeparator();
7831         this.add(this.beforePageText);
7832         this.field = Roo.get(this.addDom({
7833            tag: "input",
7834            type: "text",
7835            size: "3",
7836            value: "1",
7837            cls: "x-grid-page-number"
7838         }).el);
7839         this.field.on("keydown", this.onPagingKeydown, this);
7840         this.field.on("focus", function(){this.dom.select();});
7841         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
7842         this.field.setHeight(18);
7843         //this.addSeparator();
7844         this.next = this.addButton({
7845             tooltip: this.nextText,
7846             cls: "x-btn-icon x-grid-page-next",
7847             disabled: true,
7848             handler: this.onClick.createDelegate(this, ["next"])
7849         });
7850         this.last = this.addButton({
7851             tooltip: this.lastText,
7852             cls: "x-btn-icon x-grid-page-last",
7853             disabled: true,
7854             handler: this.onClick.createDelegate(this, ["last"])
7855         });
7856         //this.addSeparator();
7857         this.loading = this.addButton({
7858             tooltip: this.refreshText,
7859             cls: "x-btn-icon x-grid-loading",
7860             handler: this.onClick.createDelegate(this, ["refresh"])
7861         });
7862
7863         if(this.displayInfo){
7864             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
7865         }
7866     },
7867
7868     // private
7869     updateInfo : function(){
7870         if(this.displayEl){
7871             var count = this.ds.getCount();
7872             var msg = count == 0 ?
7873                 this.emptyMsg :
7874                 String.format(
7875                     this.displayMsg,
7876                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
7877                 );
7878             this.displayEl.update(msg);
7879         }
7880     },
7881
7882     // private
7883     onLoad : function(ds, r, o){
7884        this.cursor = o.params ? o.params.start : 0;
7885        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
7886
7887        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
7888        this.field.dom.value = ap;
7889        this.first.setDisabled(ap == 1);
7890        this.prev.setDisabled(ap == 1);
7891        this.next.setDisabled(ap == ps);
7892        this.last.setDisabled(ap == ps);
7893        this.loading.enable();
7894        this.updateInfo();
7895     },
7896
7897     // private
7898     getPageData : function(){
7899         var total = this.ds.getTotalCount();
7900         return {
7901             total : total,
7902             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
7903             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
7904         };
7905     },
7906
7907     // private
7908     onLoadError : function(){
7909         this.loading.enable();
7910     },
7911
7912     // private
7913     onPagingKeydown : function(e){
7914         var k = e.getKey();
7915         var d = this.getPageData();
7916         if(k == e.RETURN){
7917             var v = this.field.dom.value, pageNum;
7918             if(!v || isNaN(pageNum = parseInt(v, 10))){
7919                 this.field.dom.value = d.activePage;
7920                 return;
7921             }
7922             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
7923             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
7924             e.stopEvent();
7925         }
7926         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))
7927         {
7928           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
7929           this.field.dom.value = pageNum;
7930           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
7931           e.stopEvent();
7932         }
7933         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
7934         {
7935           var v = this.field.dom.value, pageNum; 
7936           var increment = (e.shiftKey) ? 10 : 1;
7937           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
7938             increment *= -1;
7939           }
7940           if(!v || isNaN(pageNum = parseInt(v, 10))) {
7941             this.field.dom.value = d.activePage;
7942             return;
7943           }
7944           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
7945           {
7946             this.field.dom.value = parseInt(v, 10) + increment;
7947             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
7948             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
7949           }
7950           e.stopEvent();
7951         }
7952     },
7953
7954     // private
7955     beforeLoad : function(){
7956         if(this.loading){
7957             this.loading.disable();
7958         }
7959     },
7960     /**
7961      * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
7962      * @param {String} which (first|prev|next|last|refresh)  which button to press.
7963      *
7964      */
7965     // private
7966     onClick : function(which){
7967         var ds = this.ds;
7968         switch(which){
7969             case "first":
7970                 ds.load({params:{start: 0, limit: this.pageSize}});
7971             break;
7972             case "prev":
7973                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
7974             break;
7975             case "next":
7976                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
7977             break;
7978             case "last":
7979                 var total = ds.getTotalCount();
7980                 var extra = total % this.pageSize;
7981                 var lastStart = extra ? (total - extra) : total-this.pageSize;
7982                 ds.load({params:{start: lastStart, limit: this.pageSize}});
7983             break;
7984             case "refresh":
7985                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
7986             break;
7987         }
7988     },
7989
7990     /**
7991      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
7992      * @param {Roo.data.Store} store The data store to unbind
7993      */
7994     unbind : function(ds){
7995         ds.un("beforeload", this.beforeLoad, this);
7996         ds.un("load", this.onLoad, this);
7997         ds.un("loadexception", this.onLoadError, this);
7998         ds.un("remove", this.updateInfo, this);
7999         ds.un("add", this.updateInfo, this);
8000         this.ds = undefined;
8001     },
8002
8003     /**
8004      * Binds the paging toolbar to the specified {@link Roo.data.Store}
8005      * @param {Roo.data.Store} store The data store to bind
8006      */
8007     bind : function(ds){
8008         ds.on("beforeload", this.beforeLoad, this);
8009         ds.on("load", this.onLoad, this);
8010         ds.on("loadexception", this.onLoadError, this);
8011         ds.on("remove", this.updateInfo, this);
8012         ds.on("add", this.updateInfo, this);
8013         this.ds = ds;
8014     }
8015 });/*
8016  * Based on:
8017  * Ext JS Library 1.1.1
8018  * Copyright(c) 2006-2007, Ext JS, LLC.
8019  *
8020  * Originally Released Under LGPL - original licence link has changed is not relivant.
8021  *
8022  * Fork - LGPL
8023  * <script type="text/javascript">
8024  */
8025
8026 /**
8027  * @class Roo.Resizable
8028  * @extends Roo.util.Observable
8029  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
8030  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
8031  * 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
8032  * the element will be wrapped for you automatically.</p>
8033  * <p>Here is the list of valid resize handles:</p>
8034  * <pre>
8035 Value   Description
8036 ------  -------------------
8037  'n'     north
8038  's'     south
8039  'e'     east
8040  'w'     west
8041  'nw'    northwest
8042  'sw'    southwest
8043  'se'    southeast
8044  'ne'    northeast
8045  'hd'    horizontal drag
8046  'all'   all
8047 </pre>
8048  * <p>Here's an example showing the creation of a typical Resizable:</p>
8049  * <pre><code>
8050 var resizer = new Roo.Resizable("element-id", {
8051     handles: 'all',
8052     minWidth: 200,
8053     minHeight: 100,
8054     maxWidth: 500,
8055     maxHeight: 400,
8056     pinned: true
8057 });
8058 resizer.on("resize", myHandler);
8059 </code></pre>
8060  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
8061  * resizer.east.setDisplayed(false);</p>
8062  * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
8063  * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
8064  * resize operation's new size (defaults to [0, 0])
8065  * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
8066  * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
8067  * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
8068  * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
8069  * @cfg {Boolean} enabled False to disable resizing (defaults to true)
8070  * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
8071  * @cfg {Number} width The width of the element in pixels (defaults to null)
8072  * @cfg {Number} height The height of the element in pixels (defaults to null)
8073  * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
8074  * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
8075  * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
8076  * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
8077  * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
8078  * in favor of the handles config option (defaults to false)
8079  * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
8080  * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
8081  * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
8082  * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
8083  * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
8084  * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
8085  * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
8086  * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
8087  * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
8088  * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
8089  * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
8090  * @constructor
8091  * Create a new resizable component
8092  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
8093  * @param {Object} config configuration options
8094   */
8095 Roo.Resizable = function(el, config)
8096 {
8097     this.el = Roo.get(el);
8098
8099     if(config && config.wrap){
8100         config.resizeChild = this.el;
8101         this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
8102         this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
8103         this.el.setStyle("overflow", "hidden");
8104         this.el.setPositioning(config.resizeChild.getPositioning());
8105         config.resizeChild.clearPositioning();
8106         if(!config.width || !config.height){
8107             var csize = config.resizeChild.getSize();
8108             this.el.setSize(csize.width, csize.height);
8109         }
8110         if(config.pinned && !config.adjustments){
8111             config.adjustments = "auto";
8112         }
8113     }
8114
8115     this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
8116     this.proxy.unselectable();
8117     this.proxy.enableDisplayMode('block');
8118
8119     Roo.apply(this, config);
8120
8121     if(this.pinned){
8122         this.disableTrackOver = true;
8123         this.el.addClass("x-resizable-pinned");
8124     }
8125     // if the element isn't positioned, make it relative
8126     var position = this.el.getStyle("position");
8127     if(position != "absolute" && position != "fixed"){
8128         this.el.setStyle("position", "relative");
8129     }
8130     if(!this.handles){ // no handles passed, must be legacy style
8131         this.handles = 's,e,se';
8132         if(this.multiDirectional){
8133             this.handles += ',n,w';
8134         }
8135     }
8136     if(this.handles == "all"){
8137         this.handles = "n s e w ne nw se sw";
8138     }
8139     var hs = this.handles.split(/\s*?[,;]\s*?| /);
8140     var ps = Roo.Resizable.positions;
8141     for(var i = 0, len = hs.length; i < len; i++){
8142         if(hs[i] && ps[hs[i]]){
8143             var pos = ps[hs[i]];
8144             this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
8145         }
8146     }
8147     // legacy
8148     this.corner = this.southeast;
8149     
8150     // updateBox = the box can move..
8151     if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
8152         this.updateBox = true;
8153     }
8154
8155     this.activeHandle = null;
8156
8157     if(this.resizeChild){
8158         if(typeof this.resizeChild == "boolean"){
8159             this.resizeChild = Roo.get(this.el.dom.firstChild, true);
8160         }else{
8161             this.resizeChild = Roo.get(this.resizeChild, true);
8162         }
8163     }
8164     
8165     if(this.adjustments == "auto"){
8166         var rc = this.resizeChild;
8167         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
8168         if(rc && (hw || hn)){
8169             rc.position("relative");
8170             rc.setLeft(hw ? hw.el.getWidth() : 0);
8171             rc.setTop(hn ? hn.el.getHeight() : 0);
8172         }
8173         this.adjustments = [
8174             (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
8175             (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
8176         ];
8177     }
8178
8179     if(this.draggable){
8180         this.dd = this.dynamic ?
8181             this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
8182         this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
8183     }
8184
8185     // public events
8186     this.addEvents({
8187         /**
8188          * @event beforeresize
8189          * Fired before resize is allowed. Set enabled to false to cancel resize.
8190          * @param {Roo.Resizable} this
8191          * @param {Roo.EventObject} e The mousedown event
8192          */
8193         "beforeresize" : true,
8194         /**
8195          * @event resizing
8196          * Fired a resizing.
8197          * @param {Roo.Resizable} this
8198          * @param {Number} x The new x position
8199          * @param {Number} y The new y position
8200          * @param {Number} w The new w width
8201          * @param {Number} h The new h hight
8202          * @param {Roo.EventObject} e The mouseup event
8203          */
8204         "resizing" : true,
8205         /**
8206          * @event resize
8207          * Fired after a resize.
8208          * @param {Roo.Resizable} this
8209          * @param {Number} width The new width
8210          * @param {Number} height The new height
8211          * @param {Roo.EventObject} e The mouseup event
8212          */
8213         "resize" : true
8214     });
8215
8216     if(this.width !== null && this.height !== null){
8217         this.resizeTo(this.width, this.height);
8218     }else{
8219         this.updateChildSize();
8220     }
8221     if(Roo.isIE){
8222         this.el.dom.style.zoom = 1;
8223     }
8224     Roo.Resizable.superclass.constructor.call(this);
8225 };
8226
8227 Roo.extend(Roo.Resizable, Roo.util.Observable, {
8228         resizeChild : false,
8229         adjustments : [0, 0],
8230         minWidth : 5,
8231         minHeight : 5,
8232         maxWidth : 10000,
8233         maxHeight : 10000,
8234         enabled : true,
8235         animate : false,
8236         duration : .35,
8237         dynamic : false,
8238         handles : false,
8239         multiDirectional : false,
8240         disableTrackOver : false,
8241         easing : 'easeOutStrong',
8242         widthIncrement : 0,
8243         heightIncrement : 0,
8244         pinned : false,
8245         width : null,
8246         height : null,
8247         preserveRatio : false,
8248         transparent: false,
8249         minX: 0,
8250         minY: 0,
8251         draggable: false,
8252
8253         /**
8254          * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
8255          */
8256         constrainTo: undefined,
8257         /**
8258          * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
8259          */
8260         resizeRegion: undefined,
8261
8262
8263     /**
8264      * Perform a manual resize
8265      * @param {Number} width
8266      * @param {Number} height
8267      */
8268     resizeTo : function(width, height){
8269         this.el.setSize(width, height);
8270         this.updateChildSize();
8271         this.fireEvent("resize", this, width, height, null);
8272     },
8273
8274     // private
8275     startSizing : function(e, handle){
8276         this.fireEvent("beforeresize", this, e);
8277         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
8278
8279             if(!this.overlay){
8280                 this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
8281                 this.overlay.unselectable();
8282                 this.overlay.enableDisplayMode("block");
8283                 this.overlay.on("mousemove", this.onMouseMove, this);
8284                 this.overlay.on("mouseup", this.onMouseUp, this);
8285             }
8286             this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
8287
8288             this.resizing = true;
8289             this.startBox = this.el.getBox();
8290             this.startPoint = e.getXY();
8291             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
8292                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];
8293
8294             this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
8295             this.overlay.show();
8296
8297             if(this.constrainTo) {
8298                 var ct = Roo.get(this.constrainTo);
8299                 this.resizeRegion = ct.getRegion().adjust(
8300                     ct.getFrameWidth('t'),
8301                     ct.getFrameWidth('l'),
8302                     -ct.getFrameWidth('b'),
8303                     -ct.getFrameWidth('r')
8304                 );
8305             }
8306
8307             this.proxy.setStyle('visibility', 'hidden'); // workaround display none
8308             this.proxy.show();
8309             this.proxy.setBox(this.startBox);
8310             if(!this.dynamic){
8311                 this.proxy.setStyle('visibility', 'visible');
8312             }
8313         }
8314     },
8315
8316     // private
8317     onMouseDown : function(handle, e){
8318         if(this.enabled){
8319             e.stopEvent();
8320             this.activeHandle = handle;
8321             this.startSizing(e, handle);
8322         }
8323     },
8324
8325     // private
8326     onMouseUp : function(e){
8327         var size = this.resizeElement();
8328         this.resizing = false;
8329         this.handleOut();
8330         this.overlay.hide();
8331         this.proxy.hide();
8332         this.fireEvent("resize", this, size.width, size.height, e);
8333     },
8334
8335     // private
8336     updateChildSize : function(){
8337         
8338         if(this.resizeChild){
8339             var el = this.el;
8340             var child = this.resizeChild;
8341             var adj = this.adjustments;
8342             if(el.dom.offsetWidth){
8343                 var b = el.getSize(true);
8344                 child.setSize(b.width+adj[0], b.height+adj[1]);
8345             }
8346             // Second call here for IE
8347             // The first call enables instant resizing and
8348             // the second call corrects scroll bars if they
8349             // exist
8350             if(Roo.isIE){
8351                 setTimeout(function(){
8352                     if(el.dom.offsetWidth){
8353                         var b = el.getSize(true);
8354                         child.setSize(b.width+adj[0], b.height+adj[1]);
8355                     }
8356                 }, 10);
8357             }
8358         }
8359     },
8360
8361     // private
8362     snap : function(value, inc, min){
8363         if(!inc || !value) {
8364             return value;
8365         }
8366         var newValue = value;
8367         var m = value % inc;
8368         if(m > 0){
8369             if(m > (inc/2)){
8370                 newValue = value + (inc-m);
8371             }else{
8372                 newValue = value - m;
8373             }
8374         }
8375         return Math.max(min, newValue);
8376     },
8377
8378     // private
8379     resizeElement : function(){
8380         var box = this.proxy.getBox();
8381         if(this.updateBox){
8382             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
8383         }else{
8384             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
8385         }
8386         this.updateChildSize();
8387         if(!this.dynamic){
8388             this.proxy.hide();
8389         }
8390         return box;
8391     },
8392
8393     // private
8394     constrain : function(v, diff, m, mx){
8395         if(v - diff < m){
8396             diff = v - m;
8397         }else if(v - diff > mx){
8398             diff = mx - v;
8399         }
8400         return diff;
8401     },
8402
8403     // private
8404     onMouseMove : function(e){
8405         
8406         if(this.enabled){
8407             try{// try catch so if something goes wrong the user doesn't get hung
8408
8409             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
8410                 return;
8411             }
8412
8413             //var curXY = this.startPoint;
8414             var curSize = this.curSize || this.startBox;
8415             var x = this.startBox.x, y = this.startBox.y;
8416             var ox = x, oy = y;
8417             var w = curSize.width, h = curSize.height;
8418             var ow = w, oh = h;
8419             var mw = this.minWidth, mh = this.minHeight;
8420             var mxw = this.maxWidth, mxh = this.maxHeight;
8421             var wi = this.widthIncrement;
8422             var hi = this.heightIncrement;
8423
8424             var eventXY = e.getXY();
8425             var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
8426             var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
8427
8428             var pos = this.activeHandle.position;
8429
8430             switch(pos){
8431                 case "east":
8432                     w += diffX;
8433                     w = Math.min(Math.max(mw, w), mxw);
8434                     break;
8435              
8436                 case "south":
8437                     h += diffY;
8438                     h = Math.min(Math.max(mh, h), mxh);
8439                     break;
8440                 case "southeast":
8441                     w += diffX;
8442                     h += diffY;
8443                     w = Math.min(Math.max(mw, w), mxw);
8444                     h = Math.min(Math.max(mh, h), mxh);
8445                     break;
8446                 case "north":
8447                     diffY = this.constrain(h, diffY, mh, mxh);
8448                     y += diffY;
8449                     h -= diffY;
8450                     break;
8451                 case "hdrag":
8452                     
8453                     if (wi) {
8454                         var adiffX = Math.abs(diffX);
8455                         var sub = (adiffX % wi); // how much 
8456                         if (sub > (wi/2)) { // far enough to snap
8457                             diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
8458                         } else {
8459                             // remove difference.. 
8460                             diffX = (diffX > 0) ? diffX-sub : diffX+sub;
8461                         }
8462                     }
8463                     x += diffX;
8464                     x = Math.max(this.minX, x);
8465                     break;
8466                 case "west":
8467                     diffX = this.constrain(w, diffX, mw, mxw);
8468                     x += diffX;
8469                     w -= diffX;
8470                     break;
8471                 case "northeast":
8472                     w += diffX;
8473                     w = Math.min(Math.max(mw, w), mxw);
8474                     diffY = this.constrain(h, diffY, mh, mxh);
8475                     y += diffY;
8476                     h -= diffY;
8477                     break;
8478                 case "northwest":
8479                     diffX = this.constrain(w, diffX, mw, mxw);
8480                     diffY = this.constrain(h, diffY, mh, mxh);
8481                     y += diffY;
8482                     h -= diffY;
8483                     x += diffX;
8484                     w -= diffX;
8485                     break;
8486                case "southwest":
8487                     diffX = this.constrain(w, diffX, mw, mxw);
8488                     h += diffY;
8489                     h = Math.min(Math.max(mh, h), mxh);
8490                     x += diffX;
8491                     w -= diffX;
8492                     break;
8493             }
8494
8495             var sw = this.snap(w, wi, mw);
8496             var sh = this.snap(h, hi, mh);
8497             if(sw != w || sh != h){
8498                 switch(pos){
8499                     case "northeast":
8500                         y -= sh - h;
8501                     break;
8502                     case "north":
8503                         y -= sh - h;
8504                         break;
8505                     case "southwest":
8506                         x -= sw - w;
8507                     break;
8508                     case "west":
8509                         x -= sw - w;
8510                         break;
8511                     case "northwest":
8512                         x -= sw - w;
8513                         y -= sh - h;
8514                     break;
8515                 }
8516                 w = sw;
8517                 h = sh;
8518             }
8519
8520             if(this.preserveRatio){
8521                 switch(pos){
8522                     case "southeast":
8523                     case "east":
8524                         h = oh * (w/ow);
8525                         h = Math.min(Math.max(mh, h), mxh);
8526                         w = ow * (h/oh);
8527                        break;
8528                     case "south":
8529                         w = ow * (h/oh);
8530                         w = Math.min(Math.max(mw, w), mxw);
8531                         h = oh * (w/ow);
8532                         break;
8533                     case "northeast":
8534                         w = ow * (h/oh);
8535                         w = Math.min(Math.max(mw, w), mxw);
8536                         h = oh * (w/ow);
8537                     break;
8538                     case "north":
8539                         var tw = w;
8540                         w = ow * (h/oh);
8541                         w = Math.min(Math.max(mw, w), mxw);
8542                         h = oh * (w/ow);
8543                         x += (tw - w) / 2;
8544                         break;
8545                     case "southwest":
8546                         h = oh * (w/ow);
8547                         h = Math.min(Math.max(mh, h), mxh);
8548                         var tw = w;
8549                         w = ow * (h/oh);
8550                         x += tw - w;
8551                         break;
8552                     case "west":
8553                         var th = h;
8554                         h = oh * (w/ow);
8555                         h = Math.min(Math.max(mh, h), mxh);
8556                         y += (th - h) / 2;
8557                         var tw = w;
8558                         w = ow * (h/oh);
8559                         x += tw - w;
8560                        break;
8561                     case "northwest":
8562                         var tw = w;
8563                         var th = h;
8564                         h = oh * (w/ow);
8565                         h = Math.min(Math.max(mh, h), mxh);
8566                         w = ow * (h/oh);
8567                         y += th - h;
8568                         x += tw - w;
8569                        break;
8570
8571                 }
8572             }
8573             if (pos == 'hdrag') {
8574                 w = ow;
8575             }
8576             this.proxy.setBounds(x, y, w, h);
8577             if(this.dynamic){
8578                 this.resizeElement();
8579             }
8580             }catch(e){}
8581         }
8582         this.fireEvent("resizing", this, x, y, w, h, e);
8583     },
8584
8585     // private
8586     handleOver : function(){
8587         if(this.enabled){
8588             this.el.addClass("x-resizable-over");
8589         }
8590     },
8591
8592     // private
8593     handleOut : function(){
8594         if(!this.resizing){
8595             this.el.removeClass("x-resizable-over");
8596         }
8597     },
8598
8599     /**
8600      * Returns the element this component is bound to.
8601      * @return {Roo.Element}
8602      */
8603     getEl : function(){
8604         return this.el;
8605     },
8606
8607     /**
8608      * Returns the resizeChild element (or null).
8609      * @return {Roo.Element}
8610      */
8611     getResizeChild : function(){
8612         return this.resizeChild;
8613     },
8614     groupHandler : function()
8615     {
8616         
8617     },
8618     /**
8619      * Destroys this resizable. If the element was wrapped and
8620      * removeEl is not true then the element remains.
8621      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
8622      */
8623     destroy : function(removeEl){
8624         this.proxy.remove();
8625         if(this.overlay){
8626             this.overlay.removeAllListeners();
8627             this.overlay.remove();
8628         }
8629         var ps = Roo.Resizable.positions;
8630         for(var k in ps){
8631             if(typeof ps[k] != "function" && this[ps[k]]){
8632                 var h = this[ps[k]];
8633                 h.el.removeAllListeners();
8634                 h.el.remove();
8635             }
8636         }
8637         if(removeEl){
8638             this.el.update("");
8639             this.el.remove();
8640         }
8641     }
8642 });
8643
8644 // private
8645 // hash to map config positions to true positions
8646 Roo.Resizable.positions = {
8647     n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
8648     hd: "hdrag"
8649 };
8650
8651 // private
8652 Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
8653     if(!this.tpl){
8654         // only initialize the template if resizable is used
8655         var tpl = Roo.DomHelper.createTemplate(
8656             {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
8657         );
8658         tpl.compile();
8659         Roo.Resizable.Handle.prototype.tpl = tpl;
8660     }
8661     this.position = pos;
8662     this.rz = rz;
8663     // show north drag fro topdra
8664     var handlepos = pos == 'hdrag' ? 'north' : pos;
8665     
8666     this.el = this.tpl.append(rz.el.dom, [handlepos], true);
8667     if (pos == 'hdrag') {
8668         this.el.setStyle('cursor', 'pointer');
8669     }
8670     this.el.unselectable();
8671     if(transparent){
8672         this.el.setOpacity(0);
8673     }
8674     this.el.on("mousedown", this.onMouseDown, this);
8675     if(!disableTrackOver){
8676         this.el.on("mouseover", this.onMouseOver, this);
8677         this.el.on("mouseout", this.onMouseOut, this);
8678     }
8679 };
8680
8681 // private
8682 Roo.Resizable.Handle.prototype = {
8683     afterResize : function(rz){
8684         Roo.log('after?');
8685         // do nothing
8686     },
8687     // private
8688     onMouseDown : function(e){
8689         this.rz.onMouseDown(this, e);
8690     },
8691     // private
8692     onMouseOver : function(e){
8693         this.rz.handleOver(this, e);
8694     },
8695     // private
8696     onMouseOut : function(e){
8697         this.rz.handleOut(this, e);
8698     }
8699 };/*
8700  * Based on:
8701  * Ext JS Library 1.1.1
8702  * Copyright(c) 2006-2007, Ext JS, LLC.
8703  *
8704  * Originally Released Under LGPL - original licence link has changed is not relivant.
8705  *
8706  * Fork - LGPL
8707  * <script type="text/javascript">
8708  */
8709
8710 /**
8711  * @class Roo.Editor
8712  * @extends Roo.Component
8713  * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
8714  * @constructor
8715  * Create a new Editor
8716  * @param {Roo.form.Field} field The Field object (or descendant)
8717  * @param {Object} config The config object
8718  */
8719 Roo.Editor = function(field, config){
8720     Roo.Editor.superclass.constructor.call(this, config);
8721     this.field = field;
8722     this.addEvents({
8723         /**
8724              * @event beforestartedit
8725              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
8726              * false from the handler of this event.
8727              * @param {Editor} this
8728              * @param {Roo.Element} boundEl The underlying element bound to this editor
8729              * @param {Mixed} value The field value being set
8730              */
8731         "beforestartedit" : true,
8732         /**
8733              * @event startedit
8734              * Fires when this editor is displayed
8735              * @param {Roo.Element} boundEl The underlying element bound to this editor
8736              * @param {Mixed} value The starting field value
8737              */
8738         "startedit" : true,
8739         /**
8740              * @event beforecomplete
8741              * Fires after a change has been made to the field, but before the change is reflected in the underlying
8742              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
8743              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
8744              * event will not fire since no edit actually occurred.
8745              * @param {Editor} this
8746              * @param {Mixed} value The current field value
8747              * @param {Mixed} startValue The original field value
8748              */
8749         "beforecomplete" : true,
8750         /**
8751              * @event complete
8752              * Fires after editing is complete and any changed value has been written to the underlying field.
8753              * @param {Editor} this
8754              * @param {Mixed} value The current field value
8755              * @param {Mixed} startValue The original field value
8756              */
8757         "complete" : true,
8758         /**
8759          * @event specialkey
8760          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
8761          * {@link Roo.EventObject#getKey} to determine which key was pressed.
8762          * @param {Roo.form.Field} this
8763          * @param {Roo.EventObject} e The event object
8764          */
8765         "specialkey" : true
8766     });
8767 };
8768
8769 Roo.extend(Roo.Editor, Roo.Component, {
8770     /**
8771      * @cfg {Boolean/String} autosize
8772      * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
8773      * or "height" to adopt the height only (defaults to false)
8774      */
8775     /**
8776      * @cfg {Boolean} revertInvalid
8777      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
8778      * validation fails (defaults to true)
8779      */
8780     /**
8781      * @cfg {Boolean} ignoreNoChange
8782      * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
8783      * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
8784      * will never be ignored.
8785      */
8786     /**
8787      * @cfg {Boolean} hideEl
8788      * False to keep the bound element visible while the editor is displayed (defaults to true)
8789      */
8790     /**
8791      * @cfg {Mixed} value
8792      * The data value of the underlying field (defaults to "")
8793      */
8794     value : "",
8795     /**
8796      * @cfg {String} alignment
8797      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
8798      */
8799     alignment: "c-c?",
8800     /**
8801      * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
8802      * for bottom-right shadow (defaults to "frame")
8803      */
8804     shadow : "frame",
8805     /**
8806      * @cfg {Boolean} constrain True to constrain the editor to the viewport
8807      */
8808     constrain : false,
8809     /**
8810      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
8811      */
8812     completeOnEnter : false,
8813     /**
8814      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
8815      */
8816     cancelOnEsc : false,
8817     /**
8818      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
8819      */
8820     updateEl : false,
8821
8822     // private
8823     onRender : function(ct, position){
8824         this.el = new Roo.Layer({
8825             shadow: this.shadow,
8826             cls: "x-editor",
8827             parentEl : ct,
8828             shim : this.shim,
8829             shadowOffset:4,
8830             id: this.id,
8831             constrain: this.constrain
8832         });
8833         this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
8834         if(this.field.msgTarget != 'title'){
8835             this.field.msgTarget = 'qtip';
8836         }
8837         this.field.render(this.el);
8838         if(Roo.isGecko){
8839             this.field.el.dom.setAttribute('autocomplete', 'off');
8840         }
8841         this.field.on("specialkey", this.onSpecialKey, this);
8842         if(this.swallowKeys){
8843             this.field.el.swallowEvent(['keydown','keypress']);
8844         }
8845         this.field.show();
8846         this.field.on("blur", this.onBlur, this);
8847         if(this.field.grow){
8848             this.field.on("autosize", this.el.sync,  this.el, {delay:1});
8849         }
8850     },
8851
8852     onSpecialKey : function(field, e)
8853     {
8854         //Roo.log('editor onSpecialKey');
8855         if(this.completeOnEnter && e.getKey() == e.ENTER){
8856             e.stopEvent();
8857             this.completeEdit();
8858             return;
8859         }
8860         // do not fire special key otherwise it might hide close the editor...
8861         if(e.getKey() == e.ENTER){    
8862             return;
8863         }
8864         if(this.cancelOnEsc && e.getKey() == e.ESC){
8865             this.cancelEdit();
8866             return;
8867         } 
8868         this.fireEvent('specialkey', field, e);
8869     
8870     },
8871
8872     /**
8873      * Starts the editing process and shows the editor.
8874      * @param {String/HTMLElement/Element} el The element to edit
8875      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
8876       * to the innerHTML of el.
8877      */
8878     startEdit : function(el, value){
8879         if(this.editing){
8880             this.completeEdit();
8881         }
8882         this.boundEl = Roo.get(el);
8883         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
8884         if(!this.rendered){
8885             this.render(this.parentEl || document.body);
8886         }
8887         if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
8888             return;
8889         }
8890         this.startValue = v;
8891         this.field.setValue(v);
8892         if(this.autoSize){
8893             var sz = this.boundEl.getSize();
8894             switch(this.autoSize){
8895                 case "width":
8896                 this.setSize(sz.width,  "");
8897                 break;
8898                 case "height":
8899                 this.setSize("",  sz.height);
8900                 break;
8901                 default:
8902                 this.setSize(sz.width,  sz.height);
8903             }
8904         }
8905         this.el.alignTo(this.boundEl, this.alignment);
8906         this.editing = true;
8907         if(Roo.QuickTips){
8908             Roo.QuickTips.disable();
8909         }
8910         this.show();
8911     },
8912
8913     /**
8914      * Sets the height and width of this editor.
8915      * @param {Number} width The new width
8916      * @param {Number} height The new height
8917      */
8918     setSize : function(w, h){
8919         this.field.setSize(w, h);
8920         if(this.el){
8921             this.el.sync();
8922         }
8923     },
8924
8925     /**
8926      * Realigns the editor to the bound field based on the current alignment config value.
8927      */
8928     realign : function(){
8929         this.el.alignTo(this.boundEl, this.alignment);
8930     },
8931
8932     /**
8933      * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
8934      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
8935      */
8936     completeEdit : function(remainVisible){
8937         if(!this.editing){
8938             return;
8939         }
8940         var v = this.getValue();
8941         if(this.revertInvalid !== false && !this.field.isValid()){
8942             v = this.startValue;
8943             this.cancelEdit(true);
8944         }
8945         if(String(v) === String(this.startValue) && this.ignoreNoChange){
8946             this.editing = false;
8947             this.hide();
8948             return;
8949         }
8950         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
8951             this.editing = false;
8952             if(this.updateEl && this.boundEl){
8953                 this.boundEl.update(v);
8954             }
8955             if(remainVisible !== true){
8956                 this.hide();
8957             }
8958             this.fireEvent("complete", this, v, this.startValue);
8959         }
8960     },
8961
8962     // private
8963     onShow : function(){
8964         this.el.show();
8965         if(this.hideEl !== false){
8966             this.boundEl.hide();
8967         }
8968         this.field.show();
8969         if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
8970             this.fixIEFocus = true;
8971             this.deferredFocus.defer(50, this);
8972         }else{
8973             this.field.focus();
8974         }
8975         this.fireEvent("startedit", this.boundEl, this.startValue);
8976     },
8977
8978     deferredFocus : function(){
8979         if(this.editing){
8980             this.field.focus();
8981         }
8982     },
8983
8984     /**
8985      * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
8986      * reverted to the original starting value.
8987      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
8988      * cancel (defaults to false)
8989      */
8990     cancelEdit : function(remainVisible){
8991         if(this.editing){
8992             this.setValue(this.startValue);
8993             if(remainVisible !== true){
8994                 this.hide();
8995             }
8996         }
8997     },
8998
8999     // private
9000     onBlur : function(){
9001         if(this.allowBlur !== true && this.editing){
9002             this.completeEdit();
9003         }
9004     },
9005
9006     // private
9007     onHide : function(){
9008         if(this.editing){
9009             this.completeEdit();
9010             return;
9011         }
9012         this.field.blur();
9013         if(this.field.collapse){
9014             this.field.collapse();
9015         }
9016         this.el.hide();
9017         if(this.hideEl !== false){
9018             this.boundEl.show();
9019         }
9020         if(Roo.QuickTips){
9021             Roo.QuickTips.enable();
9022         }
9023     },
9024
9025     /**
9026      * Sets the data value of the editor
9027      * @param {Mixed} value Any valid value supported by the underlying field
9028      */
9029     setValue : function(v){
9030         this.field.setValue(v);
9031     },
9032
9033     /**
9034      * Gets the data value of the editor
9035      * @return {Mixed} The data value
9036      */
9037     getValue : function(){
9038         return this.field.getValue();
9039     }
9040 });/*
9041  * Based on:
9042  * Ext JS Library 1.1.1
9043  * Copyright(c) 2006-2007, Ext JS, LLC.
9044  *
9045  * Originally Released Under LGPL - original licence link has changed is not relivant.
9046  *
9047  * Fork - LGPL
9048  * <script type="text/javascript">
9049  */
9050  
9051 /**
9052  * @class Roo.BasicDialog
9053  * @extends Roo.util.Observable
9054  * @parent none builder
9055  * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
9056  * <pre><code>
9057 var dlg = new Roo.BasicDialog("my-dlg", {
9058     height: 200,
9059     width: 300,
9060     minHeight: 100,
9061     minWidth: 150,
9062     modal: true,
9063     proxyDrag: true,
9064     shadow: true
9065 });
9066 dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
9067 dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
9068 dlg.addButton('Cancel', dlg.hide, dlg);
9069 dlg.show();
9070 </code></pre>
9071   <b>A Dialog should always be a direct child of the body element.</b>
9072  * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
9073  * @cfg {String} title Default text to display in the title bar (defaults to null)
9074  * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
9075  * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
9076  * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
9077  * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
9078  * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
9079  * (defaults to null with no animation)
9080  * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
9081  * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
9082  * property for valid values (defaults to 'all')
9083  * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
9084  * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
9085  * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
9086  * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
9087  * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
9088  * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
9089  * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
9090  * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
9091  * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
9092  * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
9093  * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
9094  * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
9095  * draggable = true (defaults to false)
9096  * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
9097  * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
9098  * shadow (defaults to false)
9099  * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
9100  * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
9101  * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
9102  * @cfg {Array} buttons Array of buttons
9103  * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
9104  * @constructor
9105  * Create a new BasicDialog.
9106  * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
9107  * @param {Object} config Configuration options
9108  */
9109 Roo.BasicDialog = function(el, config){
9110     this.el = Roo.get(el);
9111     var dh = Roo.DomHelper;
9112     if(!this.el && config && config.autoCreate){
9113         if(typeof config.autoCreate == "object"){
9114             if(!config.autoCreate.id){
9115                 config.autoCreate.id = el;
9116             }
9117             this.el = dh.append(document.body,
9118                         config.autoCreate, true);
9119         }else{
9120             this.el = dh.append(document.body,
9121                         {tag: "div", id: el, style:'visibility:hidden;'}, true);
9122         }
9123     }
9124     el = this.el;
9125     el.setDisplayed(true);
9126     el.hide = this.hideAction;
9127     this.id = el.id;
9128     el.addClass("x-dlg");
9129
9130     Roo.apply(this, config);
9131
9132     this.proxy = el.createProxy("x-dlg-proxy");
9133     this.proxy.hide = this.hideAction;
9134     this.proxy.setOpacity(.5);
9135     this.proxy.hide();
9136
9137     if(config.width){
9138         el.setWidth(config.width);
9139     }
9140     if(config.height){
9141         el.setHeight(config.height);
9142     }
9143     this.size = el.getSize();
9144     if(typeof config.x != "undefined" && typeof config.y != "undefined"){
9145         this.xy = [config.x,config.y];
9146     }else{
9147         this.xy = el.getCenterXY(true);
9148     }
9149     /** The header element @type Roo.Element */
9150     this.header = el.child("> .x-dlg-hd");
9151     /** The body element @type Roo.Element */
9152     this.body = el.child("> .x-dlg-bd");
9153     /** The footer element @type Roo.Element */
9154     this.footer = el.child("> .x-dlg-ft");
9155
9156     if(!this.header){
9157         this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
9158     }
9159     if(!this.body){
9160         this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
9161     }
9162
9163     this.header.unselectable();
9164     if(this.title){
9165         this.header.update(this.title);
9166     }
9167     // this element allows the dialog to be focused for keyboard event
9168     this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
9169     this.focusEl.swallowEvent("click", true);
9170
9171     this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
9172
9173     // wrap the body and footer for special rendering
9174     this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
9175     if(this.footer){
9176         this.bwrap.dom.appendChild(this.footer.dom);
9177     }
9178
9179     this.bg = this.el.createChild({
9180         tag: "div", cls:"x-dlg-bg",
9181         html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
9182     });
9183     this.centerBg = this.bg.child("div.x-dlg-bg-center");
9184
9185
9186     if(this.autoScroll !== false && !this.autoTabs){
9187         this.body.setStyle("overflow", "auto");
9188     }
9189
9190     this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
9191
9192     if(this.closable !== false){
9193         this.el.addClass("x-dlg-closable");
9194         this.close = this.toolbox.createChild({cls:"x-dlg-close"});
9195         this.close.on("click", this.closeClick, this);
9196         this.close.addClassOnOver("x-dlg-close-over");
9197     }
9198     if(this.collapsible !== false){
9199         this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
9200         this.collapseBtn.on("click", this.collapseClick, this);
9201         this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
9202         this.header.on("dblclick", this.collapseClick, this);
9203     }
9204     if(this.resizable !== false){
9205         this.el.addClass("x-dlg-resizable");
9206         this.resizer = new Roo.Resizable(el, {
9207             minWidth: this.minWidth || 80,
9208             minHeight:this.minHeight || 80,
9209             handles: this.resizeHandles || "all",
9210             pinned: true
9211         });
9212         this.resizer.on("beforeresize", this.beforeResize, this);
9213         this.resizer.on("resize", this.onResize, this);
9214     }
9215     if(this.draggable !== false){
9216         el.addClass("x-dlg-draggable");
9217         if (!this.proxyDrag) {
9218             var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
9219         }
9220         else {
9221             var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
9222         }
9223         dd.setHandleElId(this.header.id);
9224         dd.endDrag = this.endMove.createDelegate(this);
9225         dd.startDrag = this.startMove.createDelegate(this);
9226         dd.onDrag = this.onDrag.createDelegate(this);
9227         dd.scroll = false;
9228         this.dd = dd;
9229     }
9230     if(this.modal){
9231         this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
9232         this.mask.enableDisplayMode("block");
9233         this.mask.hide();
9234         this.el.addClass("x-dlg-modal");
9235     }
9236     if(this.shadow){
9237         this.shadow = new Roo.Shadow({
9238             mode : typeof this.shadow == "string" ? this.shadow : "sides",
9239             offset : this.shadowOffset
9240         });
9241     }else{
9242         this.shadowOffset = 0;
9243     }
9244     if(Roo.useShims && this.shim !== false){
9245         this.shim = this.el.createShim();
9246         this.shim.hide = this.hideAction;
9247         this.shim.hide();
9248     }else{
9249         this.shim = false;
9250     }
9251     if(this.autoTabs){
9252         this.initTabs();
9253     }
9254     if (this.buttons) { 
9255         var bts= this.buttons;
9256         this.buttons = [];
9257         Roo.each(bts, function(b) {
9258             this.addButton(b);
9259         }, this);
9260     }
9261     
9262     
9263     this.addEvents({
9264         /**
9265          * @event keydown
9266          * Fires when a key is pressed
9267          * @param {Roo.BasicDialog} this
9268          * @param {Roo.EventObject} e
9269          */
9270         "keydown" : true,
9271         /**
9272          * @event move
9273          * Fires when this dialog is moved by the user.
9274          * @param {Roo.BasicDialog} this
9275          * @param {Number} x The new page X
9276          * @param {Number} y The new page Y
9277          */
9278         "move" : true,
9279         /**
9280          * @event resize
9281          * Fires when this dialog is resized by the user.
9282          * @param {Roo.BasicDialog} this
9283          * @param {Number} width The new width
9284          * @param {Number} height The new height
9285          */
9286         "resize" : true,
9287         /**
9288          * @event beforehide
9289          * Fires before this dialog is hidden.
9290          * @param {Roo.BasicDialog} this
9291          */
9292         "beforehide" : true,
9293         /**
9294          * @event hide
9295          * Fires when this dialog is hidden.
9296          * @param {Roo.BasicDialog} this
9297          */
9298         "hide" : true,
9299         /**
9300          * @event beforeshow
9301          * Fires before this dialog is shown.
9302          * @param {Roo.BasicDialog} this
9303          */
9304         "beforeshow" : true,
9305         /**
9306          * @event show
9307          * Fires when this dialog is shown.
9308          * @param {Roo.BasicDialog} this
9309          */
9310         "show" : true
9311     });
9312     el.on("keydown", this.onKeyDown, this);
9313     el.on("mousedown", this.toFront, this);
9314     Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
9315     this.el.hide();
9316     Roo.DialogManager.register(this);
9317     Roo.BasicDialog.superclass.constructor.call(this);
9318 };
9319
9320 Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
9321     shadowOffset: Roo.isIE ? 6 : 5,
9322     minHeight: 80,
9323     minWidth: 200,
9324     minButtonWidth: 75,
9325     defaultButton: null,
9326     buttonAlign: "right",
9327     tabTag: 'div',
9328     firstShow: true,
9329
9330     /**
9331      * Sets the dialog title text
9332      * @param {String} text The title text to display
9333      * @return {Roo.BasicDialog} this
9334      */
9335     setTitle : function(text){
9336         this.header.update(text);
9337         return this;
9338     },
9339
9340     // private
9341     closeClick : function(){
9342         this.hide();
9343     },
9344
9345     // private
9346     collapseClick : function(){
9347         this[this.collapsed ? "expand" : "collapse"]();
9348     },
9349
9350     /**
9351      * Collapses the dialog to its minimized state (only the title bar is visible).
9352      * Equivalent to the user clicking the collapse dialog button.
9353      */
9354     collapse : function(){
9355         if(!this.collapsed){
9356             this.collapsed = true;
9357             this.el.addClass("x-dlg-collapsed");
9358             this.restoreHeight = this.el.getHeight();
9359             this.resizeTo(this.el.getWidth(), this.header.getHeight());
9360         }
9361     },
9362
9363     /**
9364      * Expands a collapsed dialog back to its normal state.  Equivalent to the user
9365      * clicking the expand dialog button.
9366      */
9367     expand : function(){
9368         if(this.collapsed){
9369             this.collapsed = false;
9370             this.el.removeClass("x-dlg-collapsed");
9371             this.resizeTo(this.el.getWidth(), this.restoreHeight);
9372         }
9373     },
9374
9375     /**
9376      * Reinitializes the tabs component, clearing out old tabs and finding new ones.
9377      * @return {Roo.TabPanel} The tabs component
9378      */
9379     initTabs : function(){
9380         var tabs = this.getTabs();
9381         while(tabs.getTab(0)){
9382             tabs.removeTab(0);
9383         }
9384         this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
9385             var dom = el.dom;
9386             tabs.addTab(Roo.id(dom), dom.title);
9387             dom.title = "";
9388         });
9389         tabs.activate(0);
9390         return tabs;
9391     },
9392
9393     // private
9394     beforeResize : function(){
9395         this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
9396     },
9397
9398     // private
9399     onResize : function(){
9400         this.refreshSize();
9401         this.syncBodyHeight();
9402         this.adjustAssets();
9403         this.focus();
9404         this.fireEvent("resize", this, this.size.width, this.size.height);
9405     },
9406
9407     // private
9408     onKeyDown : function(e){
9409         if(this.isVisible()){
9410             this.fireEvent("keydown", this, e);
9411         }
9412     },
9413
9414     /**
9415      * Resizes the dialog.
9416      * @param {Number} width
9417      * @param {Number} height
9418      * @return {Roo.BasicDialog} this
9419      */
9420     resizeTo : function(width, height){
9421         this.el.setSize(width, height);
9422         this.size = {width: width, height: height};
9423         this.syncBodyHeight();
9424         if(this.fixedcenter){
9425             this.center();
9426         }
9427         if(this.isVisible()){
9428             this.constrainXY();
9429             this.adjustAssets();
9430         }
9431         this.fireEvent("resize", this, width, height);
9432         return this;
9433     },
9434
9435
9436     /**
9437      * Resizes the dialog to fit the specified content size.
9438      * @param {Number} width
9439      * @param {Number} height
9440      * @return {Roo.BasicDialog} this
9441      */
9442     setContentSize : function(w, h){
9443         h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
9444         w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
9445         //if(!this.el.isBorderBox()){
9446             h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
9447             w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
9448         //}
9449         if(this.tabs){
9450             h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
9451             w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
9452         }
9453         this.resizeTo(w, h);
9454         return this;
9455     },
9456
9457     /**
9458      * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
9459      * executed in response to a particular key being pressed while the dialog is active.
9460      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
9461      *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
9462      * @param {Function} fn The function to call
9463      * @param {Object} scope (optional) The scope of the function
9464      * @return {Roo.BasicDialog} this
9465      */
9466     addKeyListener : function(key, fn, scope){
9467         var keyCode, shift, ctrl, alt;
9468         if(typeof key == "object" && !(key instanceof Array)){
9469             keyCode = key["key"];
9470             shift = key["shift"];
9471             ctrl = key["ctrl"];
9472             alt = key["alt"];
9473         }else{
9474             keyCode = key;
9475         }
9476         var handler = function(dlg, e){
9477             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
9478                 var k = e.getKey();
9479                 if(keyCode instanceof Array){
9480                     for(var i = 0, len = keyCode.length; i < len; i++){
9481                         if(keyCode[i] == k){
9482                           fn.call(scope || window, dlg, k, e);
9483                           return;
9484                         }
9485                     }
9486                 }else{
9487                     if(k == keyCode){
9488                         fn.call(scope || window, dlg, k, e);
9489                     }
9490                 }
9491             }
9492         };
9493         this.on("keydown", handler);
9494         return this;
9495     },
9496
9497     /**
9498      * Returns the TabPanel component (creates it if it doesn't exist).
9499      * Note: If you wish to simply check for the existence of tabs without creating them,
9500      * check for a null 'tabs' property.
9501      * @return {Roo.TabPanel} The tabs component
9502      */
9503     getTabs : function(){
9504         if(!this.tabs){
9505             this.el.addClass("x-dlg-auto-tabs");
9506             this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
9507             this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
9508         }
9509         return this.tabs;
9510     },
9511
9512     /**
9513      * Adds a button to the footer section of the dialog.
9514      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
9515      * object or a valid Roo.DomHelper element config
9516      * @param {Function} handler The function called when the button is clicked
9517      * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
9518      * @return {Roo.Button} The new button
9519      */
9520     addButton : function(config, handler, scope){
9521         var dh = Roo.DomHelper;
9522         if(!this.footer){
9523             this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
9524         }
9525         if(!this.btnContainer){
9526             var tb = this.footer.createChild({
9527
9528                 cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
9529                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
9530             }, null, true);
9531             this.btnContainer = tb.firstChild.firstChild.firstChild;
9532         }
9533         var bconfig = {
9534             handler: handler,
9535             scope: scope,
9536             minWidth: this.minButtonWidth,
9537             hideParent:true
9538         };
9539         if(typeof config == "string"){
9540             bconfig.text = config;
9541         }else{
9542             if(config.tag){
9543                 bconfig.dhconfig = config;
9544             }else{
9545                 Roo.apply(bconfig, config);
9546             }
9547         }
9548         var fc = false;
9549         if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
9550             bconfig.position = Math.max(0, bconfig.position);
9551             fc = this.btnContainer.childNodes[bconfig.position];
9552         }
9553          
9554         var btn = new Roo.Button(
9555             fc ? 
9556                 this.btnContainer.insertBefore(document.createElement("td"),fc)
9557                 : this.btnContainer.appendChild(document.createElement("td")),
9558             //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
9559             bconfig
9560         );
9561         this.syncBodyHeight();
9562         if(!this.buttons){
9563             /**
9564              * Array of all the buttons that have been added to this dialog via addButton
9565              * @type Array
9566              */
9567             this.buttons = [];
9568         }
9569         this.buttons.push(btn);
9570         return btn;
9571     },
9572
9573     /**
9574      * Sets the default button to be focused when the dialog is displayed.
9575      * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
9576      * @return {Roo.BasicDialog} this
9577      */
9578     setDefaultButton : function(btn){
9579         this.defaultButton = btn;
9580         return this;
9581     },
9582
9583     // private
9584     getHeaderFooterHeight : function(safe){
9585         var height = 0;
9586         if(this.header){
9587            height += this.header.getHeight();
9588         }
9589         if(this.footer){
9590            var fm = this.footer.getMargins();
9591             height += (this.footer.getHeight()+fm.top+fm.bottom);
9592         }
9593         height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
9594         height += this.centerBg.getPadding("tb");
9595         return height;
9596     },
9597
9598     // private
9599     syncBodyHeight : function()
9600     {
9601         var bd = this.body, // the text
9602             cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
9603             bw = this.bwrap;
9604         var height = this.size.height - this.getHeaderFooterHeight(false);
9605         bd.setHeight(height-bd.getMargins("tb"));
9606         var hh = this.header.getHeight();
9607         var h = this.size.height-hh;
9608         cb.setHeight(h);
9609         
9610         bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
9611         bw.setHeight(h-cb.getPadding("tb"));
9612         
9613         bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
9614         bd.setWidth(bw.getWidth(true));
9615         if(this.tabs){
9616             this.tabs.syncHeight();
9617             if(Roo.isIE){
9618                 this.tabs.el.repaint();
9619             }
9620         }
9621     },
9622
9623     /**
9624      * Restores the previous state of the dialog if Roo.state is configured.
9625      * @return {Roo.BasicDialog} this
9626      */
9627     restoreState : function(){
9628         var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
9629         if(box && box.width){
9630             this.xy = [box.x, box.y];
9631             this.resizeTo(box.width, box.height);
9632         }
9633         return this;
9634     },
9635
9636     // private
9637     beforeShow : function(){
9638         this.expand();
9639         if(this.fixedcenter){
9640             this.xy = this.el.getCenterXY(true);
9641         }
9642         if(this.modal){
9643             Roo.get(document.body).addClass("x-body-masked");
9644             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
9645             this.mask.show();
9646         }
9647         this.constrainXY();
9648     },
9649
9650     // private
9651     animShow : function(){
9652         var b = Roo.get(this.animateTarget).getBox();
9653         this.proxy.setSize(b.width, b.height);
9654         this.proxy.setLocation(b.x, b.y);
9655         this.proxy.show();
9656         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
9657                     true, .35, this.showEl.createDelegate(this));
9658     },
9659
9660     /**
9661      * Shows the dialog.
9662      * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
9663      * @return {Roo.BasicDialog} this
9664      */
9665     show : function(animateTarget){
9666         if (this.fireEvent("beforeshow", this) === false){
9667             return;
9668         }
9669         if(this.syncHeightBeforeShow){
9670             this.syncBodyHeight();
9671         }else if(this.firstShow){
9672             this.firstShow = false;
9673             this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
9674         }
9675         this.animateTarget = animateTarget || this.animateTarget;
9676         if(!this.el.isVisible()){
9677             this.beforeShow();
9678             if(this.animateTarget && Roo.get(this.animateTarget)){
9679                 this.animShow();
9680             }else{
9681                 this.showEl();
9682             }
9683         }
9684         return this;
9685     },
9686
9687     // private
9688     showEl : function(){
9689         this.proxy.hide();
9690         this.el.setXY(this.xy);
9691         this.el.show();
9692         this.adjustAssets(true);
9693         this.toFront();
9694         this.focus();
9695         // IE peekaboo bug - fix found by Dave Fenwick
9696         if(Roo.isIE){
9697             this.el.repaint();
9698         }
9699         this.fireEvent("show", this);
9700     },
9701
9702     /**
9703      * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
9704      * dialog itself will receive focus.
9705      */
9706     focus : function(){
9707         if(this.defaultButton){
9708             this.defaultButton.focus();
9709         }else{
9710             this.focusEl.focus();
9711         }
9712     },
9713
9714     // private
9715     constrainXY : function(){
9716         if(this.constraintoviewport !== false){
9717             if(!this.viewSize){
9718                 if(this.container){
9719                     var s = this.container.getSize();
9720                     this.viewSize = [s.width, s.height];
9721                 }else{
9722                     this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
9723                 }
9724             }
9725             var s = Roo.get(this.container||document).getScroll();
9726
9727             var x = this.xy[0], y = this.xy[1];
9728             var w = this.size.width, h = this.size.height;
9729             var vw = this.viewSize[0], vh = this.viewSize[1];
9730             // only move it if it needs it
9731             var moved = false;
9732             // first validate right/bottom
9733             if(x + w > vw+s.left){
9734                 x = vw - w;
9735                 moved = true;
9736             }
9737             if(y + h > vh+s.top){
9738                 y = vh - h;
9739                 moved = true;
9740             }
9741             // then make sure top/left isn't negative
9742             if(x < s.left){
9743                 x = s.left;
9744                 moved = true;
9745             }
9746             if(y < s.top){
9747                 y = s.top;
9748                 moved = true;
9749             }
9750             if(moved){
9751                 // cache xy
9752                 this.xy = [x, y];
9753                 if(this.isVisible()){
9754                     this.el.setLocation(x, y);
9755                     this.adjustAssets();
9756                 }
9757             }
9758         }
9759     },
9760
9761     // private
9762     onDrag : function(){
9763         if(!this.proxyDrag){
9764             this.xy = this.el.getXY();
9765             this.adjustAssets();
9766         }
9767     },
9768
9769     // private
9770     adjustAssets : function(doShow){
9771         var x = this.xy[0], y = this.xy[1];
9772         var w = this.size.width, h = this.size.height;
9773         if(doShow === true){
9774             if(this.shadow){
9775                 this.shadow.show(this.el);
9776             }
9777             if(this.shim){
9778                 this.shim.show();
9779             }
9780         }
9781         if(this.shadow && this.shadow.isVisible()){
9782             this.shadow.show(this.el);
9783         }
9784         if(this.shim && this.shim.isVisible()){
9785             this.shim.setBounds(x, y, w, h);
9786         }
9787     },
9788
9789     // private
9790     adjustViewport : function(w, h){
9791         if(!w || !h){
9792             w = Roo.lib.Dom.getViewWidth();
9793             h = Roo.lib.Dom.getViewHeight();
9794         }
9795         // cache the size
9796         this.viewSize = [w, h];
9797         if(this.modal && this.mask.isVisible()){
9798             this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
9799             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
9800         }
9801         if(this.isVisible()){
9802             this.constrainXY();
9803         }
9804     },
9805
9806     /**
9807      * Destroys this dialog and all its supporting elements (including any tabs, shim,
9808      * shadow, proxy, mask, etc.)  Also removes all event listeners.
9809      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
9810      */
9811     destroy : function(removeEl){
9812         if(this.isVisible()){
9813             this.animateTarget = null;
9814             this.hide();
9815         }
9816         Roo.EventManager.removeResizeListener(this.adjustViewport, this);
9817         if(this.tabs){
9818             this.tabs.destroy(removeEl);
9819         }
9820         Roo.destroy(
9821              this.shim,
9822              this.proxy,
9823              this.resizer,
9824              this.close,
9825              this.mask
9826         );
9827         if(this.dd){
9828             this.dd.unreg();
9829         }
9830         if(this.buttons){
9831            for(var i = 0, len = this.buttons.length; i < len; i++){
9832                this.buttons[i].destroy();
9833            }
9834         }
9835         this.el.removeAllListeners();
9836         if(removeEl === true){
9837             this.el.update("");
9838             this.el.remove();
9839         }
9840         Roo.DialogManager.unregister(this);
9841     },
9842
9843     // private
9844     startMove : function(){
9845         if(this.proxyDrag){
9846             this.proxy.show();
9847         }
9848         if(this.constraintoviewport !== false){
9849             this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
9850         }
9851     },
9852
9853     // private
9854     endMove : function(){
9855         if(!this.proxyDrag){
9856             Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
9857         }else{
9858             Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
9859             this.proxy.hide();
9860         }
9861         this.refreshSize();
9862         this.adjustAssets();
9863         this.focus();
9864         this.fireEvent("move", this, this.xy[0], this.xy[1]);
9865     },
9866
9867     /**
9868      * Brings this dialog to the front of any other visible dialogs
9869      * @return {Roo.BasicDialog} this
9870      */
9871     toFront : function(){
9872         Roo.DialogManager.bringToFront(this);
9873         return this;
9874     },
9875
9876     /**
9877      * Sends this dialog to the back (under) of any other visible dialogs
9878      * @return {Roo.BasicDialog} this
9879      */
9880     toBack : function(){
9881         Roo.DialogManager.sendToBack(this);
9882         return this;
9883     },
9884
9885     /**
9886      * Centers this dialog in the viewport
9887      * @return {Roo.BasicDialog} this
9888      */
9889     center : function(){
9890         var xy = this.el.getCenterXY(true);
9891         this.moveTo(xy[0], xy[1]);
9892         return this;
9893     },
9894
9895     /**
9896      * Moves the dialog's top-left corner to the specified point
9897      * @param {Number} x
9898      * @param {Number} y
9899      * @return {Roo.BasicDialog} this
9900      */
9901     moveTo : function(x, y){
9902         this.xy = [x,y];
9903         if(this.isVisible()){
9904             this.el.setXY(this.xy);
9905             this.adjustAssets();
9906         }
9907         return this;
9908     },
9909
9910     /**
9911      * Aligns the dialog to the specified element
9912      * @param {String/HTMLElement/Roo.Element} element The element to align to.
9913      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
9914      * @param {Array} offsets (optional) Offset the positioning by [x, y]
9915      * @return {Roo.BasicDialog} this
9916      */
9917     alignTo : function(element, position, offsets){
9918         this.xy = this.el.getAlignToXY(element, position, offsets);
9919         if(this.isVisible()){
9920             this.el.setXY(this.xy);
9921             this.adjustAssets();
9922         }
9923         return this;
9924     },
9925
9926     /**
9927      * Anchors an element to another element and realigns it when the window is resized.
9928      * @param {String/HTMLElement/Roo.Element} element The element to align to.
9929      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
9930      * @param {Array} offsets (optional) Offset the positioning by [x, y]
9931      * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
9932      * is a number, it is used as the buffer delay (defaults to 50ms).
9933      * @return {Roo.BasicDialog} this
9934      */
9935     anchorTo : function(el, alignment, offsets, monitorScroll){
9936         var action = function(){
9937             this.alignTo(el, alignment, offsets);
9938         };
9939         Roo.EventManager.onWindowResize(action, this);
9940         var tm = typeof monitorScroll;
9941         if(tm != 'undefined'){
9942             Roo.EventManager.on(window, 'scroll', action, this,
9943                 {buffer: tm == 'number' ? monitorScroll : 50});
9944         }
9945         action.call(this);
9946         return this;
9947     },
9948
9949     /**
9950      * Returns true if the dialog is visible
9951      * @return {Boolean}
9952      */
9953     isVisible : function(){
9954         return this.el.isVisible();
9955     },
9956
9957     // private
9958     animHide : function(callback){
9959         var b = Roo.get(this.animateTarget).getBox();
9960         this.proxy.show();
9961         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
9962         this.el.hide();
9963         this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
9964                     this.hideEl.createDelegate(this, [callback]));
9965     },
9966
9967     /**
9968      * Hides the dialog.
9969      * @param {Function} callback (optional) Function to call when the dialog is hidden
9970      * @return {Roo.BasicDialog} this
9971      */
9972     hide : function(callback){
9973         if (this.fireEvent("beforehide", this) === false){
9974             return;
9975         }
9976         if(this.shadow){
9977             this.shadow.hide();
9978         }
9979         if(this.shim) {
9980           this.shim.hide();
9981         }
9982         // sometimes animateTarget seems to get set.. causing problems...
9983         // this just double checks..
9984         if(this.animateTarget && Roo.get(this.animateTarget)) {
9985            this.animHide(callback);
9986         }else{
9987             this.el.hide();
9988             this.hideEl(callback);
9989         }
9990         return this;
9991     },
9992
9993     // private
9994     hideEl : function(callback){
9995         this.proxy.hide();
9996         if(this.modal){
9997             this.mask.hide();
9998             Roo.get(document.body).removeClass("x-body-masked");
9999         }
10000         this.fireEvent("hide", this);
10001         if(typeof callback == "function"){
10002             callback();
10003         }
10004     },
10005
10006     // private
10007     hideAction : function(){
10008         this.setLeft("-10000px");
10009         this.setTop("-10000px");
10010         this.setStyle("visibility", "hidden");
10011     },
10012
10013     // private
10014     refreshSize : function(){
10015         this.size = this.el.getSize();
10016         this.xy = this.el.getXY();
10017         Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
10018     },
10019
10020     // private
10021     // z-index is managed by the DialogManager and may be overwritten at any time
10022     setZIndex : function(index){
10023         if(this.modal){
10024             this.mask.setStyle("z-index", index);
10025         }
10026         if(this.shim){
10027             this.shim.setStyle("z-index", ++index);
10028         }
10029         if(this.shadow){
10030             this.shadow.setZIndex(++index);
10031         }
10032         this.el.setStyle("z-index", ++index);
10033         if(this.proxy){
10034             this.proxy.setStyle("z-index", ++index);
10035         }
10036         if(this.resizer){
10037             this.resizer.proxy.setStyle("z-index", ++index);
10038         }
10039
10040         this.lastZIndex = index;
10041     },
10042
10043     /**
10044      * Returns the element for this dialog
10045      * @return {Roo.Element} The underlying dialog Element
10046      */
10047     getEl : function(){
10048         return this.el;
10049     }
10050 });
10051
10052 /**
10053  * @class Roo.DialogManager
10054  * Provides global access to BasicDialogs that have been created and
10055  * support for z-indexing (layering) multiple open dialogs.
10056  */
10057 Roo.DialogManager = function(){
10058     var list = {};
10059     var accessList = [];
10060     var front = null;
10061
10062     // private
10063     var sortDialogs = function(d1, d2){
10064         return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
10065     };
10066
10067     // private
10068     var orderDialogs = function(){
10069         accessList.sort(sortDialogs);
10070         var seed = Roo.DialogManager.zseed;
10071         for(var i = 0, len = accessList.length; i < len; i++){
10072             var dlg = accessList[i];
10073             if(dlg){
10074                 dlg.setZIndex(seed + (i*10));
10075             }
10076         }
10077     };
10078
10079     return {
10080         /**
10081          * The starting z-index for BasicDialogs (defaults to 9000)
10082          * @type Number The z-index value
10083          */
10084         zseed : 9000,
10085
10086         // private
10087         register : function(dlg){
10088             list[dlg.id] = dlg;
10089             accessList.push(dlg);
10090         },
10091
10092         // private
10093         unregister : function(dlg){
10094             delete list[dlg.id];
10095             var i=0;
10096             var len=0;
10097             if(!accessList.indexOf){
10098                 for(  i = 0, len = accessList.length; i < len; i++){
10099                     if(accessList[i] == dlg){
10100                         accessList.splice(i, 1);
10101                         return;
10102                     }
10103                 }
10104             }else{
10105                  i = accessList.indexOf(dlg);
10106                 if(i != -1){
10107                     accessList.splice(i, 1);
10108                 }
10109             }
10110         },
10111
10112         /**
10113          * Gets a registered dialog by id
10114          * @param {String/Object} id The id of the dialog or a dialog
10115          * @return {Roo.BasicDialog} this
10116          */
10117         get : function(id){
10118             return typeof id == "object" ? id : list[id];
10119         },
10120
10121         /**
10122          * Brings the specified dialog to the front
10123          * @param {String/Object} dlg The id of the dialog or a dialog
10124          * @return {Roo.BasicDialog} this
10125          */
10126         bringToFront : function(dlg){
10127             dlg = this.get(dlg);
10128             if(dlg != front){
10129                 front = dlg;
10130                 dlg._lastAccess = new Date().getTime();
10131                 orderDialogs();
10132             }
10133             return dlg;
10134         },
10135
10136         /**
10137          * Sends the specified dialog to the back
10138          * @param {String/Object} dlg The id of the dialog or a dialog
10139          * @return {Roo.BasicDialog} this
10140          */
10141         sendToBack : function(dlg){
10142             dlg = this.get(dlg);
10143             dlg._lastAccess = -(new Date().getTime());
10144             orderDialogs();
10145             return dlg;
10146         },
10147
10148         /**
10149          * Hides all dialogs
10150          */
10151         hideAll : function(){
10152             for(var id in list){
10153                 if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
10154                     list[id].hide();
10155                 }
10156             }
10157         }
10158     };
10159 }();
10160
10161 /**
10162  * @class Roo.LayoutDialog
10163  * @extends Roo.BasicDialog
10164  * @children Roo.ContentPanel
10165  * @parent builder none
10166  * Dialog which provides adjustments for working with a layout in a Dialog.
10167  * Add your necessary layout config options to the dialog's config.<br>
10168  * Example usage (including a nested layout):
10169  * <pre><code>
10170 if(!dialog){
10171     dialog = new Roo.LayoutDialog("download-dlg", {
10172         modal: true,
10173         width:600,
10174         height:450,
10175         shadow:true,
10176         minWidth:500,
10177         minHeight:350,
10178         autoTabs:true,
10179         proxyDrag:true,
10180         // layout config merges with the dialog config
10181         center:{
10182             tabPosition: "top",
10183             alwaysShowTabs: true
10184         }
10185     });
10186     dialog.addKeyListener(27, dialog.hide, dialog);
10187     dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
10188     dialog.addButton("Build It!", this.getDownload, this);
10189
10190     // we can even add nested layouts
10191     var innerLayout = new Roo.BorderLayout("dl-inner", {
10192         east: {
10193             initialSize: 200,
10194             autoScroll:true,
10195             split:true
10196         },
10197         center: {
10198             autoScroll:true
10199         }
10200     });
10201     innerLayout.beginUpdate();
10202     innerLayout.add("east", new Roo.ContentPanel("dl-details"));
10203     innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
10204     innerLayout.endUpdate(true);
10205
10206     var layout = dialog.getLayout();
10207     layout.beginUpdate();
10208     layout.add("center", new Roo.ContentPanel("standard-panel",
10209                         {title: "Download the Source", fitToFrame:true}));
10210     layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
10211                {title: "Build your own roo.js"}));
10212     layout.getRegion("center").showPanel(sp);
10213     layout.endUpdate();
10214 }
10215 </code></pre>
10216     * @constructor
10217     * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
10218     * @param {Object} config configuration options
10219   */
10220 Roo.LayoutDialog = function(el, cfg){
10221     
10222     var config=  cfg;
10223     if (typeof(cfg) == 'undefined') {
10224         config = Roo.apply({}, el);
10225         // not sure why we use documentElement here.. - it should always be body.
10226         // IE7 borks horribly if we use documentElement.
10227         // webkit also does not like documentElement - it creates a body element...
10228         el = Roo.get( document.body || document.documentElement ).createChild();
10229         //config.autoCreate = true;
10230     }
10231     
10232     
10233     config.autoTabs = false;
10234     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
10235     this.body.setStyle({overflow:"hidden", position:"relative"});
10236     this.layout = new Roo.BorderLayout(this.body.dom, config);
10237     this.layout.monitorWindowResize = false;
10238     this.el.addClass("x-dlg-auto-layout");
10239     // fix case when center region overwrites center function
10240     this.center = Roo.BasicDialog.prototype.center;
10241     this.on("show", this.layout.layout, this.layout, true);
10242     if (config.items) {
10243         var xitems = config.items;
10244         delete config.items;
10245         Roo.each(xitems, this.addxtype, this);
10246     }
10247     
10248     
10249 };
10250 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
10251     
10252     
10253     /**
10254      * @cfg {Roo.LayoutRegion} east  
10255      */
10256     /**
10257      * @cfg {Roo.LayoutRegion} west
10258      */
10259     /**
10260      * @cfg {Roo.LayoutRegion} south
10261      */
10262     /**
10263      * @cfg {Roo.LayoutRegion} north
10264      */
10265     /**
10266      * @cfg {Roo.LayoutRegion} center
10267      */
10268     /**
10269      * @cfg {Roo.Button} buttons[]  Bottom buttons..
10270      */
10271     
10272     
10273     /**
10274      * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
10275      * @deprecated
10276      */
10277     endUpdate : function(){
10278         this.layout.endUpdate();
10279     },
10280
10281     /**
10282      * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
10283      *  @deprecated
10284      */
10285     beginUpdate : function(){
10286         this.layout.beginUpdate();
10287     },
10288
10289     /**
10290      * Get the BorderLayout for this dialog
10291      * @return {Roo.BorderLayout}
10292      */
10293     getLayout : function(){
10294         return this.layout;
10295     },
10296
10297     showEl : function(){
10298         Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
10299         if(Roo.isIE7){
10300             this.layout.layout();
10301         }
10302     },
10303
10304     // private
10305     // Use the syncHeightBeforeShow config option to control this automatically
10306     syncBodyHeight : function(){
10307         Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
10308         if(this.layout){this.layout.layout();}
10309     },
10310     
10311       /**
10312      * Add an xtype element (actually adds to the layout.)
10313      * @return {Object} xdata xtype object data.
10314      */
10315     
10316     addxtype : function(c) {
10317         return this.layout.addxtype(c);
10318     }
10319 });/*
10320  * Based on:
10321  * Ext JS Library 1.1.1
10322  * Copyright(c) 2006-2007, Ext JS, LLC.
10323  *
10324  * Originally Released Under LGPL - original licence link has changed is not relivant.
10325  *
10326  * Fork - LGPL
10327  * <script type="text/javascript">
10328  */
10329  
10330 /**
10331  * @class Roo.MessageBox
10332  * @static
10333  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
10334  * Example usage:
10335  *<pre><code>
10336 // Basic alert:
10337 Roo.Msg.alert('Status', 'Changes saved successfully.');
10338
10339 // Prompt for user data:
10340 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
10341     if (btn == 'ok'){
10342         // process text value...
10343     }
10344 });
10345
10346 // Show a dialog using config options:
10347 Roo.Msg.show({
10348    title:'Save Changes?',
10349    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
10350    buttons: Roo.Msg.YESNOCANCEL,
10351    fn: processResult,
10352    animEl: 'elId'
10353 });
10354 </code></pre>
10355  * @static
10356  */
10357 Roo.MessageBox = function(){
10358     var dlg, opt, mask, waitTimer;
10359     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
10360     var buttons, activeTextEl, bwidth;
10361
10362     // private
10363     var handleButton = function(button){
10364         dlg.hide();
10365         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
10366     };
10367
10368     // private
10369     var handleHide = function(){
10370         if(opt && opt.cls){
10371             dlg.el.removeClass(opt.cls);
10372         }
10373         if(waitTimer){
10374             Roo.TaskMgr.stop(waitTimer);
10375             waitTimer = null;
10376         }
10377     };
10378
10379     // private
10380     var updateButtons = function(b){
10381         var width = 0;
10382         if(!b){
10383             buttons["ok"].hide();
10384             buttons["cancel"].hide();
10385             buttons["yes"].hide();
10386             buttons["no"].hide();
10387             dlg.footer.dom.style.display = 'none';
10388             return width;
10389         }
10390         dlg.footer.dom.style.display = '';
10391         for(var k in buttons){
10392             if(typeof buttons[k] != "function"){
10393                 if(b[k]){
10394                     buttons[k].show();
10395                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
10396                     width += buttons[k].el.getWidth()+15;
10397                 }else{
10398                     buttons[k].hide();
10399                 }
10400             }
10401         }
10402         return width;
10403     };
10404
10405     // private
10406     var handleEsc = function(d, k, e){
10407         if(opt && opt.closable !== false){
10408             dlg.hide();
10409         }
10410         if(e){
10411             e.stopEvent();
10412         }
10413     };
10414
10415     return {
10416         /**
10417          * Returns a reference to the underlying {@link Roo.BasicDialog} element
10418          * @return {Roo.BasicDialog} The BasicDialog element
10419          */
10420         getDialog : function(){
10421            if(!dlg){
10422                 dlg = new Roo.BasicDialog("x-msg-box", {
10423                     autoCreate : true,
10424                     shadow: true,
10425                     draggable: true,
10426                     resizable:false,
10427                     constraintoviewport:false,
10428                     fixedcenter:true,
10429                     collapsible : false,
10430                     shim:true,
10431                     modal: true,
10432                     width:400, height:100,
10433                     buttonAlign:"center",
10434                     closeClick : function(){
10435                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
10436                             handleButton("no");
10437                         }else{
10438                             handleButton("cancel");
10439                         }
10440                     }
10441                 });
10442               
10443                 dlg.on("hide", handleHide);
10444                 mask = dlg.mask;
10445                 dlg.addKeyListener(27, handleEsc);
10446                 buttons = {};
10447                 var bt = this.buttonText;
10448                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
10449                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
10450                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
10451                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
10452                 bodyEl = dlg.body.createChild({
10453
10454                     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>'
10455                 });
10456                 msgEl = bodyEl.dom.firstChild;
10457                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
10458                 textboxEl.enableDisplayMode();
10459                 textboxEl.addKeyListener([10,13], function(){
10460                     if(dlg.isVisible() && opt && opt.buttons){
10461                         if(opt.buttons.ok){
10462                             handleButton("ok");
10463                         }else if(opt.buttons.yes){
10464                             handleButton("yes");
10465                         }
10466                     }
10467                 });
10468                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
10469                 textareaEl.enableDisplayMode();
10470                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
10471                 progressEl.enableDisplayMode();
10472                 var pf = progressEl.dom.firstChild;
10473                 if (pf) {
10474                     pp = Roo.get(pf.firstChild);
10475                     pp.setHeight(pf.offsetHeight);
10476                 }
10477                 
10478             }
10479             return dlg;
10480         },
10481
10482         /**
10483          * Updates the message box body text
10484          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
10485          * the XHTML-compliant non-breaking space character '&amp;#160;')
10486          * @return {Roo.MessageBox} This message box
10487          */
10488         updateText : function(text){
10489             if(!dlg.isVisible() && !opt.width){
10490                 dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
10491             }
10492             msgEl.innerHTML = text || '&#160;';
10493       
10494             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
10495             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
10496             var w = Math.max(
10497                     Math.min(opt.width || cw , this.maxWidth), 
10498                     Math.max(opt.minWidth || this.minWidth, bwidth)
10499             );
10500             if(opt.prompt){
10501                 activeTextEl.setWidth(w);
10502             }
10503             if(dlg.isVisible()){
10504                 dlg.fixedcenter = false;
10505             }
10506             // to big, make it scroll. = But as usual stupid IE does not support
10507             // !important..
10508             
10509             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
10510                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
10511                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
10512             } else {
10513                 bodyEl.dom.style.height = '';
10514                 bodyEl.dom.style.overflowY = '';
10515             }
10516             if (cw > w) {
10517                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
10518             } else {
10519                 bodyEl.dom.style.overflowX = '';
10520             }
10521             
10522             dlg.setContentSize(w, bodyEl.getHeight());
10523             if(dlg.isVisible()){
10524                 dlg.fixedcenter = true;
10525             }
10526             return this;
10527         },
10528
10529         /**
10530          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
10531          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
10532          * @param {Number} value Any number between 0 and 1 (e.g., .5)
10533          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
10534          * @return {Roo.MessageBox} This message box
10535          */
10536         updateProgress : function(value, text){
10537             if(text){
10538                 this.updateText(text);
10539             }
10540             if (pp) { // weird bug on my firefox - for some reason this is not defined
10541                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
10542             }
10543             return this;
10544         },        
10545
10546         /**
10547          * Returns true if the message box is currently displayed
10548          * @return {Boolean} True if the message box is visible, else false
10549          */
10550         isVisible : function(){
10551             return dlg && dlg.isVisible();  
10552         },
10553
10554         /**
10555          * Hides the message box if it is displayed
10556          */
10557         hide : function(){
10558             if(this.isVisible()){
10559                 dlg.hide();
10560             }  
10561         },
10562
10563         /**
10564          * Displays a new message box, or reinitializes an existing message box, based on the config options
10565          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
10566          * The following config object properties are supported:
10567          * <pre>
10568 Property    Type             Description
10569 ----------  ---------------  ------------------------------------------------------------------------------------
10570 animEl            String/Element   An id or Element from which the message box should animate as it opens and
10571                                    closes (defaults to undefined)
10572 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
10573                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
10574 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
10575                                    progress and wait dialogs will ignore this property and always hide the
10576                                    close button as they can only be closed programmatically.
10577 cls               String           A custom CSS class to apply to the message box element
10578 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
10579                                    displayed (defaults to 75)
10580 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
10581                                    function will be btn (the name of the button that was clicked, if applicable,
10582                                    e.g. "ok"), and text (the value of the active text field, if applicable).
10583                                    Progress and wait dialogs will ignore this option since they do not respond to
10584                                    user actions and can only be closed programmatically, so any required function
10585                                    should be called by the same code after it closes the dialog.
10586 icon              String           A CSS class that provides a background image to be used as an icon for
10587                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
10588 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
10589 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
10590 modal             Boolean          False to allow user interaction with the page while the message box is
10591                                    displayed (defaults to true)
10592 msg               String           A string that will replace the existing message box body text (defaults
10593                                    to the XHTML-compliant non-breaking space character '&#160;')
10594 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
10595 progress          Boolean          True to display a progress bar (defaults to false)
10596 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
10597 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
10598 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
10599 title             String           The title text
10600 value             String           The string value to set into the active textbox element if displayed
10601 wait              Boolean          True to display a progress bar (defaults to false)
10602 width             Number           The width of the dialog in pixels
10603 </pre>
10604          *
10605          * Example usage:
10606          * <pre><code>
10607 Roo.Msg.show({
10608    title: 'Address',
10609    msg: 'Please enter your address:',
10610    width: 300,
10611    buttons: Roo.MessageBox.OKCANCEL,
10612    multiline: true,
10613    fn: saveAddress,
10614    animEl: 'addAddressBtn'
10615 });
10616 </code></pre>
10617          * @param {Object} config Configuration options
10618          * @return {Roo.MessageBox} This message box
10619          */
10620         show : function(options)
10621         {
10622             
10623             // this causes nightmares if you show one dialog after another
10624             // especially on callbacks..
10625              
10626             if(this.isVisible()){
10627                 
10628                 this.hide();
10629                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
10630                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
10631                 Roo.log("New Dialog Message:" +  options.msg )
10632                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
10633                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
10634                 
10635             }
10636             var d = this.getDialog();
10637             opt = options;
10638             d.setTitle(opt.title || "&#160;");
10639             d.close.setDisplayed(opt.closable !== false);
10640             activeTextEl = textboxEl;
10641             opt.prompt = opt.prompt || (opt.multiline ? true : false);
10642             if(opt.prompt){
10643                 if(opt.multiline){
10644                     textboxEl.hide();
10645                     textareaEl.show();
10646                     textareaEl.setHeight(typeof opt.multiline == "number" ?
10647                         opt.multiline : this.defaultTextHeight);
10648                     activeTextEl = textareaEl;
10649                 }else{
10650                     textboxEl.show();
10651                     textareaEl.hide();
10652                 }
10653             }else{
10654                 textboxEl.hide();
10655                 textareaEl.hide();
10656             }
10657             progressEl.setDisplayed(opt.progress === true);
10658             this.updateProgress(0);
10659             activeTextEl.dom.value = opt.value || "";
10660             if(opt.prompt){
10661                 dlg.setDefaultButton(activeTextEl);
10662             }else{
10663                 var bs = opt.buttons;
10664                 var db = null;
10665                 if(bs && bs.ok){
10666                     db = buttons["ok"];
10667                 }else if(bs && bs.yes){
10668                     db = buttons["yes"];
10669                 }
10670                 dlg.setDefaultButton(db);
10671             }
10672             bwidth = updateButtons(opt.buttons);
10673             this.updateText(opt.msg);
10674             if(opt.cls){
10675                 d.el.addClass(opt.cls);
10676             }
10677             d.proxyDrag = opt.proxyDrag === true;
10678             d.modal = opt.modal !== false;
10679             d.mask = opt.modal !== false ? mask : false;
10680             if(!d.isVisible()){
10681                 // force it to the end of the z-index stack so it gets a cursor in FF
10682                 document.body.appendChild(dlg.el.dom);
10683                 d.animateTarget = null;
10684                 d.show(options.animEl);
10685             }
10686             dlg.toFront();
10687             return this;
10688         },
10689
10690         /**
10691          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
10692          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
10693          * and closing the message box when the process is complete.
10694          * @param {String} title The title bar text
10695          * @param {String} msg The message box body text
10696          * @return {Roo.MessageBox} This message box
10697          */
10698         progress : function(title, msg){
10699             this.show({
10700                 title : title,
10701                 msg : msg,
10702                 buttons: false,
10703                 progress:true,
10704                 closable:false,
10705                 minWidth: this.minProgressWidth,
10706                 modal : true
10707             });
10708             return this;
10709         },
10710
10711         /**
10712          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
10713          * If a callback function is passed it will be called after the user clicks the button, and the
10714          * id of the button that was clicked will be passed as the only parameter to the callback
10715          * (could also be the top-right close button).
10716          * @param {String} title The title bar text
10717          * @param {String} msg The message box body text
10718          * @param {Function} fn (optional) The callback function invoked after the message box is closed
10719          * @param {Object} scope (optional) The scope of the callback function
10720          * @return {Roo.MessageBox} This message box
10721          */
10722         alert : function(title, msg, fn, scope){
10723             this.show({
10724                 title : title,
10725                 msg : msg,
10726                 buttons: this.OK,
10727                 fn: fn,
10728                 scope : scope,
10729                 modal : true
10730             });
10731             return this;
10732         },
10733
10734         /**
10735          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
10736          * interaction while waiting for a long-running process to complete that does not have defined intervals.
10737          * You are responsible for closing the message box when the process is complete.
10738          * @param {String} msg The message box body text
10739          * @param {String} title (optional) The title bar text
10740          * @return {Roo.MessageBox} This message box
10741          */
10742         wait : function(msg, title){
10743             this.show({
10744                 title : title,
10745                 msg : msg,
10746                 buttons: false,
10747                 closable:false,
10748                 progress:true,
10749                 modal:true,
10750                 width:300,
10751                 wait:true
10752             });
10753             waitTimer = Roo.TaskMgr.start({
10754                 run: function(i){
10755                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
10756                 },
10757                 interval: 1000
10758             });
10759             return this;
10760         },
10761
10762         /**
10763          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
10764          * If a callback function is passed it will be called after the user clicks either button, and the id of the
10765          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
10766          * @param {String} title The title bar text
10767          * @param {String} msg The message box body text
10768          * @param {Function} fn (optional) The callback function invoked after the message box is closed
10769          * @param {Object} scope (optional) The scope of the callback function
10770          * @return {Roo.MessageBox} This message box
10771          */
10772         confirm : function(title, msg, fn, scope){
10773             this.show({
10774                 title : title,
10775                 msg : msg,
10776                 buttons: this.YESNO,
10777                 fn: fn,
10778                 scope : scope,
10779                 modal : true
10780             });
10781             return this;
10782         },
10783
10784         /**
10785          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
10786          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
10787          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
10788          * (could also be the top-right close button) and the text that was entered will be passed as the two
10789          * parameters to the callback.
10790          * @param {String} title The title bar text
10791          * @param {String} msg The message box body text
10792          * @param {Function} fn (optional) The callback function invoked after the message box is closed
10793          * @param {Object} scope (optional) The scope of the callback function
10794          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
10795          * property, or the height in pixels to create the textbox (defaults to false / single-line)
10796          * @return {Roo.MessageBox} This message box
10797          */
10798         prompt : function(title, msg, fn, scope, multiline){
10799             this.show({
10800                 title : title,
10801                 msg : msg,
10802                 buttons: this.OKCANCEL,
10803                 fn: fn,
10804                 minWidth:250,
10805                 scope : scope,
10806                 prompt:true,
10807                 multiline: multiline,
10808                 modal : true
10809             });
10810             return this;
10811         },
10812
10813         /**
10814          * Button config that displays a single OK button
10815          * @type Object
10816          */
10817         OK : {ok:true},
10818         /**
10819          * Button config that displays Yes and No buttons
10820          * @type Object
10821          */
10822         YESNO : {yes:true, no:true},
10823         /**
10824          * Button config that displays OK and Cancel buttons
10825          * @type Object
10826          */
10827         OKCANCEL : {ok:true, cancel:true},
10828         /**
10829          * Button config that displays Yes, No and Cancel buttons
10830          * @type Object
10831          */
10832         YESNOCANCEL : {yes:true, no:true, cancel:true},
10833
10834         /**
10835          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
10836          * @type Number
10837          */
10838         defaultTextHeight : 75,
10839         /**
10840          * The maximum width in pixels of the message box (defaults to 600)
10841          * @type Number
10842          */
10843         maxWidth : 600,
10844         /**
10845          * The minimum width in pixels of the message box (defaults to 100)
10846          * @type Number
10847          */
10848         minWidth : 100,
10849         /**
10850          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
10851          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
10852          * @type Number
10853          */
10854         minProgressWidth : 250,
10855         /**
10856          * An object containing the default button text strings that can be overriden for localized language support.
10857          * Supported properties are: ok, cancel, yes and no.
10858          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
10859          * @type Object
10860          */
10861         buttonText : {
10862             ok : "OK",
10863             cancel : "Cancel",
10864             yes : "Yes",
10865             no : "No"
10866         }
10867     };
10868 }();
10869
10870 /**
10871  * Shorthand for {@link Roo.MessageBox}
10872  */
10873 Roo.Msg = Roo.MessageBox;/*
10874  * Based on:
10875  * Ext JS Library 1.1.1
10876  * Copyright(c) 2006-2007, Ext JS, LLC.
10877  *
10878  * Originally Released Under LGPL - original licence link has changed is not relivant.
10879  *
10880  * Fork - LGPL
10881  * <script type="text/javascript">
10882  */
10883 /**
10884  * @class Roo.QuickTips
10885  * Provides attractive and customizable tooltips for any element.
10886  * @static
10887  */
10888 Roo.QuickTips = function(){
10889     var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
10890     var ce, bd, xy, dd;
10891     var visible = false, disabled = true, inited = false;
10892     var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
10893     
10894     var onOver = function(e){
10895         if(disabled){
10896             return;
10897         }
10898         var t = e.getTarget();
10899         if(!t || t.nodeType !== 1 || t == document || t == document.body){
10900             return;
10901         }
10902         if(ce && t == ce.el){
10903             clearTimeout(hideProc);
10904             return;
10905         }
10906         if(t && tagEls[t.id]){
10907             tagEls[t.id].el = t;
10908             showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
10909             return;
10910         }
10911         var ttp, et = Roo.fly(t);
10912         var ns = cfg.namespace;
10913         if(tm.interceptTitles && t.title){
10914             ttp = t.title;
10915             t.qtip = ttp;
10916             t.removeAttribute("title");
10917             e.preventDefault();
10918         }else{
10919             ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
10920         }
10921         if(ttp){
10922             showProc = show.defer(tm.showDelay, tm, [{
10923                 el: t, 
10924                 text: ttp.replace(/\\n/g,'<br/>'),
10925                 width: et.getAttributeNS(ns, cfg.width),
10926                 autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
10927                 title: et.getAttributeNS(ns, cfg.title),
10928                     cls: et.getAttributeNS(ns, cfg.cls)
10929             }]);
10930         }
10931     };
10932     
10933     var onOut = function(e){
10934         clearTimeout(showProc);
10935         var t = e.getTarget();
10936         if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
10937             hideProc = setTimeout(hide, tm.hideDelay);
10938         }
10939     };
10940     
10941     var onMove = function(e){
10942         if(disabled){
10943             return;
10944         }
10945         xy = e.getXY();
10946         xy[1] += 18;
10947         if(tm.trackMouse && ce){
10948             el.setXY(xy);
10949         }
10950     };
10951     
10952     var onDown = function(e){
10953         clearTimeout(showProc);
10954         clearTimeout(hideProc);
10955         if(!e.within(el)){
10956             if(tm.hideOnClick){
10957                 hide();
10958                 tm.disable();
10959                 tm.enable.defer(100, tm);
10960             }
10961         }
10962     };
10963     
10964     var getPad = function(){
10965         return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
10966     };
10967
10968     var show = function(o){
10969         if(disabled){
10970             return;
10971         }
10972         clearTimeout(dismissProc);
10973         ce = o;
10974         if(removeCls){ // in case manually hidden
10975             el.removeClass(removeCls);
10976             removeCls = null;
10977         }
10978         if(ce.cls){
10979             el.addClass(ce.cls);
10980             removeCls = ce.cls;
10981         }
10982         if(ce.title){
10983             tipTitle.update(ce.title);
10984             tipTitle.show();
10985         }else{
10986             tipTitle.update('');
10987             tipTitle.hide();
10988         }
10989         el.dom.style.width  = tm.maxWidth+'px';
10990         //tipBody.dom.style.width = '';
10991         tipBodyText.update(o.text);
10992         var p = getPad(), w = ce.width;
10993         if(!w){
10994             var td = tipBodyText.dom;
10995             var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
10996             if(aw > tm.maxWidth){
10997                 w = tm.maxWidth;
10998             }else if(aw < tm.minWidth){
10999                 w = tm.minWidth;
11000             }else{
11001                 w = aw;
11002             }
11003         }
11004         //tipBody.setWidth(w);
11005         el.setWidth(parseInt(w, 10) + p);
11006         if(ce.autoHide === false){
11007             close.setDisplayed(true);
11008             if(dd){
11009                 dd.unlock();
11010             }
11011         }else{
11012             close.setDisplayed(false);
11013             if(dd){
11014                 dd.lock();
11015             }
11016         }
11017         if(xy){
11018             el.avoidY = xy[1]-18;
11019             el.setXY(xy);
11020         }
11021         if(tm.animate){
11022             el.setOpacity(.1);
11023             el.setStyle("visibility", "visible");
11024             el.fadeIn({callback: afterShow});
11025         }else{
11026             afterShow();
11027         }
11028     };
11029     
11030     var afterShow = function(){
11031         if(ce){
11032             el.show();
11033             esc.enable();
11034             if(tm.autoDismiss && ce.autoHide !== false){
11035                 dismissProc = setTimeout(hide, tm.autoDismissDelay);
11036             }
11037         }
11038     };
11039     
11040     var hide = function(noanim){
11041         clearTimeout(dismissProc);
11042         clearTimeout(hideProc);
11043         ce = null;
11044         if(el.isVisible()){
11045             esc.disable();
11046             if(noanim !== true && tm.animate){
11047                 el.fadeOut({callback: afterHide});
11048             }else{
11049                 afterHide();
11050             } 
11051         }
11052     };
11053     
11054     var afterHide = function(){
11055         el.hide();
11056         if(removeCls){
11057             el.removeClass(removeCls);
11058             removeCls = null;
11059         }
11060     };
11061     
11062     return {
11063         /**
11064         * @cfg {Number} minWidth
11065         * The minimum width of the quick tip (defaults to 40)
11066         */
11067        minWidth : 40,
11068         /**
11069         * @cfg {Number} maxWidth
11070         * The maximum width of the quick tip (defaults to 300)
11071         */
11072        maxWidth : 300,
11073         /**
11074         * @cfg {Boolean} interceptTitles
11075         * True to automatically use the element's DOM title value if available (defaults to false)
11076         */
11077        interceptTitles : false,
11078         /**
11079         * @cfg {Boolean} trackMouse
11080         * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
11081         */
11082        trackMouse : false,
11083         /**
11084         * @cfg {Boolean} hideOnClick
11085         * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
11086         */
11087        hideOnClick : true,
11088         /**
11089         * @cfg {Number} showDelay
11090         * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
11091         */
11092        showDelay : 500,
11093         /**
11094         * @cfg {Number} hideDelay
11095         * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
11096         */
11097        hideDelay : 200,
11098         /**
11099         * @cfg {Boolean} autoHide
11100         * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
11101         * Used in conjunction with hideDelay.
11102         */
11103        autoHide : true,
11104         /**
11105         * @cfg {Boolean}
11106         * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
11107         * (defaults to true).  Used in conjunction with autoDismissDelay.
11108         */
11109        autoDismiss : true,
11110         /**
11111         * @cfg {Number}
11112         * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
11113         */
11114        autoDismissDelay : 5000,
11115        /**
11116         * @cfg {Boolean} animate
11117         * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
11118         */
11119        animate : false,
11120
11121        /**
11122         * @cfg {String} title
11123         * Title text to display (defaults to '').  This can be any valid HTML markup.
11124         */
11125         title: '',
11126        /**
11127         * @cfg {String} text
11128         * Body text to display (defaults to '').  This can be any valid HTML markup.
11129         */
11130         text : '',
11131        /**
11132         * @cfg {String} cls
11133         * A CSS class to apply to the base quick tip element (defaults to '').
11134         */
11135         cls : '',
11136        /**
11137         * @cfg {Number} width
11138         * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
11139         * minWidth or maxWidth.
11140         */
11141         width : null,
11142
11143     /**
11144      * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
11145      * or display QuickTips in a page.
11146      */
11147        init : function(){
11148           tm = Roo.QuickTips;
11149           cfg = tm.tagConfig;
11150           if(!inited){
11151               if(!Roo.isReady){ // allow calling of init() before onReady
11152                   Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
11153                   return;
11154               }
11155               el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
11156               el.fxDefaults = {stopFx: true};
11157               // maximum custom styling
11158               //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>');
11159               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>');              
11160               tipTitle = el.child('h3');
11161               tipTitle.enableDisplayMode("block");
11162               tipBody = el.child('div.x-tip-bd');
11163               tipBodyText = el.child('div.x-tip-bd-inner');
11164               //bdLeft = el.child('div.x-tip-bd-left');
11165               //bdRight = el.child('div.x-tip-bd-right');
11166               close = el.child('div.x-tip-close');
11167               close.enableDisplayMode("block");
11168               close.on("click", hide);
11169               var d = Roo.get(document);
11170               d.on("mousedown", onDown);
11171               d.on("mouseover", onOver);
11172               d.on("mouseout", onOut);
11173               d.on("mousemove", onMove);
11174               esc = d.addKeyListener(27, hide);
11175               esc.disable();
11176               if(Roo.dd.DD){
11177                   dd = el.initDD("default", null, {
11178                       onDrag : function(){
11179                           el.sync();  
11180                       }
11181                   });
11182                   dd.setHandleElId(tipTitle.id);
11183                   dd.lock();
11184               }
11185               inited = true;
11186           }
11187           this.enable(); 
11188        },
11189
11190     /**
11191      * Configures a new quick tip instance and assigns it to a target element.  The following config options
11192      * are supported:
11193      * <pre>
11194 Property    Type                   Description
11195 ----------  ---------------------  ------------------------------------------------------------------------
11196 target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
11197      * </ul>
11198      * @param {Object} config The config object
11199      */
11200        register : function(config){
11201            var cs = config instanceof Array ? config : arguments;
11202            for(var i = 0, len = cs.length; i < len; i++) {
11203                var c = cs[i];
11204                var target = c.target;
11205                if(target){
11206                    if(target instanceof Array){
11207                        for(var j = 0, jlen = target.length; j < jlen; j++){
11208                            tagEls[target[j]] = c;
11209                        }
11210                    }else{
11211                        tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
11212                    }
11213                }
11214            }
11215        },
11216
11217     /**
11218      * Removes this quick tip from its element and destroys it.
11219      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
11220      */
11221        unregister : function(el){
11222            delete tagEls[Roo.id(el)];
11223        },
11224
11225     /**
11226      * Enable this quick tip.
11227      */
11228        enable : function(){
11229            if(inited && disabled){
11230                locks.pop();
11231                if(locks.length < 1){
11232                    disabled = false;
11233                }
11234            }
11235        },
11236
11237     /**
11238      * Disable this quick tip.
11239      */
11240        disable : function(){
11241           disabled = true;
11242           clearTimeout(showProc);
11243           clearTimeout(hideProc);
11244           clearTimeout(dismissProc);
11245           if(ce){
11246               hide(true);
11247           }
11248           locks.push(1);
11249        },
11250
11251     /**
11252      * Returns true if the quick tip is enabled, else false.
11253      */
11254        isEnabled : function(){
11255             return !disabled;
11256        },
11257
11258         // private
11259        tagConfig : {
11260            namespace : "roo", // was ext?? this may break..
11261            alt_namespace : "ext",
11262            attribute : "qtip",
11263            width : "width",
11264            target : "target",
11265            title : "qtitle",
11266            hide : "hide",
11267            cls : "qclass"
11268        }
11269    };
11270 }();
11271
11272 // backwards compat
11273 Roo.QuickTips.tips = Roo.QuickTips.register;/*
11274  * Based on:
11275  * Ext JS Library 1.1.1
11276  * Copyright(c) 2006-2007, Ext JS, LLC.
11277  *
11278  * Originally Released Under LGPL - original licence link has changed is not relivant.
11279  *
11280  * Fork - LGPL
11281  * <script type="text/javascript">
11282  */
11283  
11284
11285 /**
11286  * @class Roo.tree.TreePanel
11287  * @extends Roo.data.Tree
11288  * @cfg {Roo.tree.TreeNode} root The root node
11289  * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
11290  * @cfg {Boolean} lines false to disable tree lines (defaults to true)
11291  * @cfg {Boolean} enableDD true to enable drag and drop
11292  * @cfg {Boolean} enableDrag true to enable just drag
11293  * @cfg {Boolean} enableDrop true to enable just drop
11294  * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
11295  * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
11296  * @cfg {String} ddGroup The DD group this TreePanel belongs to
11297  * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
11298  * @cfg {Boolean} ddScroll true to enable YUI body scrolling
11299  * @cfg {Boolean} containerScroll true to register this container with ScrollManager
11300  * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
11301  * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
11302  * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
11303  * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
11304  * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
11305  * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
11306  * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
11307  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
11308  * @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>
11309  * @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>
11310  * 
11311  * @constructor
11312  * @param {String/HTMLElement/Element} el The container element
11313  * @param {Object} config
11314  */
11315 Roo.tree.TreePanel = function(el, config){
11316     var root = false;
11317     var loader = false;
11318     if (config.root) {
11319         root = config.root;
11320         delete config.root;
11321     }
11322     if (config.loader) {
11323         loader = config.loader;
11324         delete config.loader;
11325     }
11326     
11327     Roo.apply(this, config);
11328     Roo.tree.TreePanel.superclass.constructor.call(this);
11329     this.el = Roo.get(el);
11330     this.el.addClass('x-tree');
11331     //console.log(root);
11332     if (root) {
11333         this.setRootNode( Roo.factory(root, Roo.tree));
11334     }
11335     if (loader) {
11336         this.loader = Roo.factory(loader, Roo.tree);
11337     }
11338    /**
11339     * Read-only. The id of the container element becomes this TreePanel's id.
11340     */
11341     this.id = this.el.id;
11342     this.addEvents({
11343         /**
11344         * @event beforeload
11345         * Fires before a node is loaded, return false to cancel
11346         * @param {Node} node The node being loaded
11347         */
11348         "beforeload" : true,
11349         /**
11350         * @event load
11351         * Fires when a node is loaded
11352         * @param {Node} node The node that was loaded
11353         */
11354         "load" : true,
11355         /**
11356         * @event textchange
11357         * Fires when the text for a node is changed
11358         * @param {Node} node The node
11359         * @param {String} text The new text
11360         * @param {String} oldText The old text
11361         */
11362         "textchange" : true,
11363         /**
11364         * @event beforeexpand
11365         * Fires before a node is expanded, return false to cancel.
11366         * @param {Node} node The node
11367         * @param {Boolean} deep
11368         * @param {Boolean} anim
11369         */
11370         "beforeexpand" : true,
11371         /**
11372         * @event beforecollapse
11373         * Fires before a node is collapsed, return false to cancel.
11374         * @param {Node} node The node
11375         * @param {Boolean} deep
11376         * @param {Boolean} anim
11377         */
11378         "beforecollapse" : true,
11379         /**
11380         * @event expand
11381         * Fires when a node is expanded
11382         * @param {Node} node The node
11383         */
11384         "expand" : true,
11385         /**
11386         * @event disabledchange
11387         * Fires when the disabled status of a node changes
11388         * @param {Node} node The node
11389         * @param {Boolean} disabled
11390         */
11391         "disabledchange" : true,
11392         /**
11393         * @event collapse
11394         * Fires when a node is collapsed
11395         * @param {Node} node The node
11396         */
11397         "collapse" : true,
11398         /**
11399         * @event beforeclick
11400         * Fires before click processing on a node. Return false to cancel the default action.
11401         * @param {Node} node The node
11402         * @param {Roo.EventObject} e The event object
11403         */
11404         "beforeclick":true,
11405         /**
11406         * @event checkchange
11407         * Fires when a node with a checkbox's checked property changes
11408         * @param {Node} this This node
11409         * @param {Boolean} checked
11410         */
11411         "checkchange":true,
11412         /**
11413         * @event click
11414         * Fires when a node is clicked
11415         * @param {Node} node The node
11416         * @param {Roo.EventObject} e The event object
11417         */
11418         "click":true,
11419         /**
11420         * @event dblclick
11421         * Fires when a node is double clicked
11422         * @param {Node} node The node
11423         * @param {Roo.EventObject} e The event object
11424         */
11425         "dblclick":true,
11426         /**
11427         * @event contextmenu
11428         * Fires when a node is right clicked
11429         * @param {Node} node The node
11430         * @param {Roo.EventObject} e The event object
11431         */
11432         "contextmenu":true,
11433         /**
11434         * @event beforechildrenrendered
11435         * Fires right before the child nodes for a node are rendered
11436         * @param {Node} node The node
11437         */
11438         "beforechildrenrendered":true,
11439         /**
11440         * @event startdrag
11441         * Fires when a node starts being dragged
11442         * @param {Roo.tree.TreePanel} this
11443         * @param {Roo.tree.TreeNode} node
11444         * @param {event} e The raw browser event
11445         */ 
11446        "startdrag" : true,
11447        /**
11448         * @event enddrag
11449         * Fires when a drag operation is complete
11450         * @param {Roo.tree.TreePanel} this
11451         * @param {Roo.tree.TreeNode} node
11452         * @param {event} e The raw browser event
11453         */
11454        "enddrag" : true,
11455        /**
11456         * @event dragdrop
11457         * Fires when a dragged node is dropped on a valid DD target
11458         * @param {Roo.tree.TreePanel} this
11459         * @param {Roo.tree.TreeNode} node
11460         * @param {DD} dd The dd it was dropped on
11461         * @param {event} e The raw browser event
11462         */
11463        "dragdrop" : true,
11464        /**
11465         * @event beforenodedrop
11466         * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
11467         * passed to handlers has the following properties:<br />
11468         * <ul style="padding:5px;padding-left:16px;">
11469         * <li>tree - The TreePanel</li>
11470         * <li>target - The node being targeted for the drop</li>
11471         * <li>data - The drag data from the drag source</li>
11472         * <li>point - The point of the drop - append, above or below</li>
11473         * <li>source - The drag source</li>
11474         * <li>rawEvent - Raw mouse event</li>
11475         * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
11476         * to be inserted by setting them on this object.</li>
11477         * <li>cancel - Set this to true to cancel the drop.</li>
11478         * </ul>
11479         * @param {Object} dropEvent
11480         */
11481        "beforenodedrop" : true,
11482        /**
11483         * @event nodedrop
11484         * Fires after a DD object is dropped on a node in this tree. The dropEvent
11485         * passed to handlers has the following properties:<br />
11486         * <ul style="padding:5px;padding-left:16px;">
11487         * <li>tree - The TreePanel</li>
11488         * <li>target - The node being targeted for the drop</li>
11489         * <li>data - The drag data from the drag source</li>
11490         * <li>point - The point of the drop - append, above or below</li>
11491         * <li>source - The drag source</li>
11492         * <li>rawEvent - Raw mouse event</li>
11493         * <li>dropNode - Dropped node(s).</li>
11494         * </ul>
11495         * @param {Object} dropEvent
11496         */
11497        "nodedrop" : true,
11498         /**
11499         * @event nodedragover
11500         * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
11501         * passed to handlers has the following properties:<br />
11502         * <ul style="padding:5px;padding-left:16px;">
11503         * <li>tree - The TreePanel</li>
11504         * <li>target - The node being targeted for the drop</li>
11505         * <li>data - The drag data from the drag source</li>
11506         * <li>point - The point of the drop - append, above or below</li>
11507         * <li>source - The drag source</li>
11508         * <li>rawEvent - Raw mouse event</li>
11509         * <li>dropNode - Drop node(s) provided by the source.</li>
11510         * <li>cancel - Set this to true to signal drop not allowed.</li>
11511         * </ul>
11512         * @param {Object} dragOverEvent
11513         */
11514        "nodedragover" : true,
11515        /**
11516         * @event appendnode
11517         * Fires when append node to the tree
11518         * @param {Roo.tree.TreePanel} this
11519         * @param {Roo.tree.TreeNode} node
11520         * @param {Number} index The index of the newly appended node
11521         */
11522        "appendnode" : true
11523         
11524     });
11525     if(this.singleExpand){
11526        this.on("beforeexpand", this.restrictExpand, this);
11527     }
11528     if (this.editor) {
11529         this.editor.tree = this;
11530         this.editor = Roo.factory(this.editor, Roo.tree);
11531     }
11532     
11533     if (this.selModel) {
11534         this.selModel = Roo.factory(this.selModel, Roo.tree);
11535     }
11536    
11537 };
11538 Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
11539     rootVisible : true,
11540     animate: Roo.enableFx,
11541     lines : true,
11542     enableDD : false,
11543     hlDrop : Roo.enableFx,
11544   
11545     renderer: false,
11546     
11547     rendererTip: false,
11548     // private
11549     restrictExpand : function(node){
11550         var p = node.parentNode;
11551         if(p){
11552             if(p.expandedChild && p.expandedChild.parentNode == p){
11553                 p.expandedChild.collapse();
11554             }
11555             p.expandedChild = node;
11556         }
11557     },
11558
11559     // private override
11560     setRootNode : function(node){
11561         Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
11562         if(!this.rootVisible){
11563             node.ui = new Roo.tree.RootTreeNodeUI(node);
11564         }
11565         return node;
11566     },
11567
11568     /**
11569      * Returns the container element for this TreePanel
11570      */
11571     getEl : function(){
11572         return this.el;
11573     },
11574
11575     /**
11576      * Returns the default TreeLoader for this TreePanel
11577      */
11578     getLoader : function(){
11579         return this.loader;
11580     },
11581
11582     /**
11583      * Expand all nodes
11584      */
11585     expandAll : function(){
11586         this.root.expand(true);
11587     },
11588
11589     /**
11590      * Collapse all nodes
11591      */
11592     collapseAll : function(){
11593         this.root.collapse(true);
11594     },
11595
11596     /**
11597      * Returns the selection model used by this TreePanel
11598      */
11599     getSelectionModel : function(){
11600         if(!this.selModel){
11601             this.selModel = new Roo.tree.DefaultSelectionModel();
11602         }
11603         return this.selModel;
11604     },
11605
11606     /**
11607      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
11608      * @param {String} attribute (optional) Defaults to null (return the actual nodes)
11609      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
11610      * @return {Array}
11611      */
11612     getChecked : function(a, startNode){
11613         startNode = startNode || this.root;
11614         var r = [];
11615         var f = function(){
11616             if(this.attributes.checked){
11617                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
11618             }
11619         }
11620         startNode.cascade(f);
11621         return r;
11622     },
11623
11624     /**
11625      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
11626      * @param {String} path
11627      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
11628      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
11629      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
11630      */
11631     expandPath : function(path, attr, callback){
11632         attr = attr || "id";
11633         var keys = path.split(this.pathSeparator);
11634         var curNode = this.root;
11635         if(curNode.attributes[attr] != keys[1]){ // invalid root
11636             if(callback){
11637                 callback(false, null);
11638             }
11639             return;
11640         }
11641         var index = 1;
11642         var f = function(){
11643             if(++index == keys.length){
11644                 if(callback){
11645                     callback(true, curNode);
11646                 }
11647                 return;
11648             }
11649             var c = curNode.findChild(attr, keys[index]);
11650             if(!c){
11651                 if(callback){
11652                     callback(false, curNode);
11653                 }
11654                 return;
11655             }
11656             curNode = c;
11657             c.expand(false, false, f);
11658         };
11659         curNode.expand(false, false, f);
11660     },
11661
11662     /**
11663      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
11664      * @param {String} path
11665      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
11666      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
11667      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
11668      */
11669     selectPath : function(path, attr, callback){
11670         attr = attr || "id";
11671         var keys = path.split(this.pathSeparator);
11672         var v = keys.pop();
11673         if(keys.length > 0){
11674             var f = function(success, node){
11675                 if(success && node){
11676                     var n = node.findChild(attr, v);
11677                     if(n){
11678                         n.select();
11679                         if(callback){
11680                             callback(true, n);
11681                         }
11682                     }else if(callback){
11683                         callback(false, n);
11684                     }
11685                 }else{
11686                     if(callback){
11687                         callback(false, n);
11688                     }
11689                 }
11690             };
11691             this.expandPath(keys.join(this.pathSeparator), attr, f);
11692         }else{
11693             this.root.select();
11694             if(callback){
11695                 callback(true, this.root);
11696             }
11697         }
11698     },
11699
11700     getTreeEl : function(){
11701         return this.el;
11702     },
11703
11704     /**
11705      * Trigger rendering of this TreePanel
11706      */
11707     render : function(){
11708         if (this.innerCt) {
11709             return this; // stop it rendering more than once!!
11710         }
11711         
11712         this.innerCt = this.el.createChild({tag:"ul",
11713                cls:"x-tree-root-ct " +
11714                (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
11715
11716         if(this.containerScroll){
11717             Roo.dd.ScrollManager.register(this.el);
11718         }
11719         if((this.enableDD || this.enableDrop) && !this.dropZone){
11720            /**
11721             * The dropZone used by this tree if drop is enabled
11722             * @type Roo.tree.TreeDropZone
11723             */
11724              this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
11725                ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
11726            });
11727         }
11728         if((this.enableDD || this.enableDrag) && !this.dragZone){
11729            /**
11730             * The dragZone used by this tree if drag is enabled
11731             * @type Roo.tree.TreeDragZone
11732             */
11733             this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
11734                ddGroup: this.ddGroup || "TreeDD",
11735                scroll: this.ddScroll
11736            });
11737         }
11738         this.getSelectionModel().init(this);
11739         if (!this.root) {
11740             Roo.log("ROOT not set in tree");
11741             return this;
11742         }
11743         this.root.render();
11744         if(!this.rootVisible){
11745             this.root.renderChildren();
11746         }
11747         return this;
11748     }
11749 });/*
11750  * Based on:
11751  * Ext JS Library 1.1.1
11752  * Copyright(c) 2006-2007, Ext JS, LLC.
11753  *
11754  * Originally Released Under LGPL - original licence link has changed is not relivant.
11755  *
11756  * Fork - LGPL
11757  * <script type="text/javascript">
11758  */
11759  
11760
11761 /**
11762  * @class Roo.tree.DefaultSelectionModel
11763  * @extends Roo.util.Observable
11764  * The default single selection for a TreePanel.
11765  * @param {Object} cfg Configuration
11766  */
11767 Roo.tree.DefaultSelectionModel = function(cfg){
11768    this.selNode = null;
11769    
11770    
11771    
11772    this.addEvents({
11773        /**
11774         * @event selectionchange
11775         * Fires when the selected node changes
11776         * @param {DefaultSelectionModel} this
11777         * @param {TreeNode} node the new selection
11778         */
11779        "selectionchange" : true,
11780
11781        /**
11782         * @event beforeselect
11783         * Fires before the selected node changes, return false to cancel the change
11784         * @param {DefaultSelectionModel} this
11785         * @param {TreeNode} node the new selection
11786         * @param {TreeNode} node the old selection
11787         */
11788        "beforeselect" : true
11789    });
11790    
11791     Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
11792 };
11793
11794 Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
11795     init : function(tree){
11796         this.tree = tree;
11797         tree.getTreeEl().on("keydown", this.onKeyDown, this);
11798         tree.on("click", this.onNodeClick, this);
11799     },
11800     
11801     onNodeClick : function(node, e){
11802         if (e.ctrlKey && this.selNode == node)  {
11803             this.unselect(node);
11804             return;
11805         }
11806         this.select(node);
11807     },
11808     
11809     /**
11810      * Select a node.
11811      * @param {TreeNode} node The node to select
11812      * @return {TreeNode} The selected node
11813      */
11814     select : function(node){
11815         var last = this.selNode;
11816         if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
11817             if(last){
11818                 last.ui.onSelectedChange(false);
11819             }
11820             this.selNode = node;
11821             node.ui.onSelectedChange(true);
11822             this.fireEvent("selectionchange", this, node, last);
11823         }
11824         return node;
11825     },
11826     
11827     /**
11828      * Deselect a node.
11829      * @param {TreeNode} node The node to unselect
11830      */
11831     unselect : function(node){
11832         if(this.selNode == node){
11833             this.clearSelections();
11834         }    
11835     },
11836     
11837     /**
11838      * Clear all selections
11839      */
11840     clearSelections : function(){
11841         var n = this.selNode;
11842         if(n){
11843             n.ui.onSelectedChange(false);
11844             this.selNode = null;
11845             this.fireEvent("selectionchange", this, null);
11846         }
11847         return n;
11848     },
11849     
11850     /**
11851      * Get the selected node
11852      * @return {TreeNode} The selected node
11853      */
11854     getSelectedNode : function(){
11855         return this.selNode;    
11856     },
11857     
11858     /**
11859      * Returns true if the node is selected
11860      * @param {TreeNode} node The node to check
11861      * @return {Boolean}
11862      */
11863     isSelected : function(node){
11864         return this.selNode == node;  
11865     },
11866
11867     /**
11868      * Selects the node above the selected node in the tree, intelligently walking the nodes
11869      * @return TreeNode The new selection
11870      */
11871     selectPrevious : function(){
11872         var s = this.selNode || this.lastSelNode;
11873         if(!s){
11874             return null;
11875         }
11876         var ps = s.previousSibling;
11877         if(ps){
11878             if(!ps.isExpanded() || ps.childNodes.length < 1){
11879                 return this.select(ps);
11880             } else{
11881                 var lc = ps.lastChild;
11882                 while(lc && lc.isExpanded() && lc.childNodes.length > 0){
11883                     lc = lc.lastChild;
11884                 }
11885                 return this.select(lc);
11886             }
11887         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
11888             return this.select(s.parentNode);
11889         }
11890         return null;
11891     },
11892
11893     /**
11894      * Selects the node above the selected node in the tree, intelligently walking the nodes
11895      * @return TreeNode The new selection
11896      */
11897     selectNext : function(){
11898         var s = this.selNode || this.lastSelNode;
11899         if(!s){
11900             return null;
11901         }
11902         if(s.firstChild && s.isExpanded()){
11903              return this.select(s.firstChild);
11904          }else if(s.nextSibling){
11905              return this.select(s.nextSibling);
11906          }else if(s.parentNode){
11907             var newS = null;
11908             s.parentNode.bubble(function(){
11909                 if(this.nextSibling){
11910                     newS = this.getOwnerTree().selModel.select(this.nextSibling);
11911                     return false;
11912                 }
11913             });
11914             return newS;
11915          }
11916         return null;
11917     },
11918
11919     onKeyDown : function(e){
11920         var s = this.selNode || this.lastSelNode;
11921         // undesirable, but required
11922         var sm = this;
11923         if(!s){
11924             return;
11925         }
11926         var k = e.getKey();
11927         switch(k){
11928              case e.DOWN:
11929                  e.stopEvent();
11930                  this.selectNext();
11931              break;
11932              case e.UP:
11933                  e.stopEvent();
11934                  this.selectPrevious();
11935              break;
11936              case e.RIGHT:
11937                  e.preventDefault();
11938                  if(s.hasChildNodes()){
11939                      if(!s.isExpanded()){
11940                          s.expand();
11941                      }else if(s.firstChild){
11942                          this.select(s.firstChild, e);
11943                      }
11944                  }
11945              break;
11946              case e.LEFT:
11947                  e.preventDefault();
11948                  if(s.hasChildNodes() && s.isExpanded()){
11949                      s.collapse();
11950                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
11951                      this.select(s.parentNode, e);
11952                  }
11953              break;
11954         };
11955     }
11956 });
11957
11958 /**
11959  * @class Roo.tree.MultiSelectionModel
11960  * @extends Roo.util.Observable
11961  * Multi selection for a TreePanel.
11962  * @param {Object} cfg Configuration
11963  */
11964 Roo.tree.MultiSelectionModel = function(){
11965    this.selNodes = [];
11966    this.selMap = {};
11967    this.addEvents({
11968        /**
11969         * @event selectionchange
11970         * Fires when the selected nodes change
11971         * @param {MultiSelectionModel} this
11972         * @param {Array} nodes Array of the selected nodes
11973         */
11974        "selectionchange" : true
11975    });
11976    Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
11977    
11978 };
11979
11980 Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
11981     init : function(tree){
11982         this.tree = tree;
11983         tree.getTreeEl().on("keydown", this.onKeyDown, this);
11984         tree.on("click", this.onNodeClick, this);
11985     },
11986     
11987     onNodeClick : function(node, e){
11988         this.select(node, e, e.ctrlKey);
11989     },
11990     
11991     /**
11992      * Select a node.
11993      * @param {TreeNode} node The node to select
11994      * @param {EventObject} e (optional) An event associated with the selection
11995      * @param {Boolean} keepExisting True to retain existing selections
11996      * @return {TreeNode} The selected node
11997      */
11998     select : function(node, e, keepExisting){
11999         if(keepExisting !== true){
12000             this.clearSelections(true);
12001         }
12002         if(this.isSelected(node)){
12003             this.lastSelNode = node;
12004             return node;
12005         }
12006         this.selNodes.push(node);
12007         this.selMap[node.id] = node;
12008         this.lastSelNode = node;
12009         node.ui.onSelectedChange(true);
12010         this.fireEvent("selectionchange", this, this.selNodes);
12011         return node;
12012     },
12013     
12014     /**
12015      * Deselect a node.
12016      * @param {TreeNode} node The node to unselect
12017      */
12018     unselect : function(node){
12019         if(this.selMap[node.id]){
12020             node.ui.onSelectedChange(false);
12021             var sn = this.selNodes;
12022             var index = -1;
12023             if(sn.indexOf){
12024                 index = sn.indexOf(node);
12025             }else{
12026                 for(var i = 0, len = sn.length; i < len; i++){
12027                     if(sn[i] == node){
12028                         index = i;
12029                         break;
12030                     }
12031                 }
12032             }
12033             if(index != -1){
12034                 this.selNodes.splice(index, 1);
12035             }
12036             delete this.selMap[node.id];
12037             this.fireEvent("selectionchange", this, this.selNodes);
12038         }
12039     },
12040     
12041     /**
12042      * Clear all selections
12043      */
12044     clearSelections : function(suppressEvent){
12045         var sn = this.selNodes;
12046         if(sn.length > 0){
12047             for(var i = 0, len = sn.length; i < len; i++){
12048                 sn[i].ui.onSelectedChange(false);
12049             }
12050             this.selNodes = [];
12051             this.selMap = {};
12052             if(suppressEvent !== true){
12053                 this.fireEvent("selectionchange", this, this.selNodes);
12054             }
12055         }
12056     },
12057     
12058     /**
12059      * Returns true if the node is selected
12060      * @param {TreeNode} node The node to check
12061      * @return {Boolean}
12062      */
12063     isSelected : function(node){
12064         return this.selMap[node.id] ? true : false;  
12065     },
12066     
12067     /**
12068      * Returns an array of the selected nodes
12069      * @return {Array}
12070      */
12071     getSelectedNodes : function(){
12072         return this.selNodes;    
12073     },
12074
12075     onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
12076
12077     selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
12078
12079     selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
12080 });/*
12081  * Based on:
12082  * Ext JS Library 1.1.1
12083  * Copyright(c) 2006-2007, Ext JS, LLC.
12084  *
12085  * Originally Released Under LGPL - original licence link has changed is not relivant.
12086  *
12087  * Fork - LGPL
12088  * <script type="text/javascript">
12089  */
12090  
12091 /**
12092  * @class Roo.tree.TreeNode
12093  * @extends Roo.data.Node
12094  * @cfg {String} text The text for this node
12095  * @cfg {Boolean} expanded true to start the node expanded
12096  * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
12097  * @cfg {Boolean} allowDrop false if this node cannot be drop on
12098  * @cfg {Boolean} disabled true to start the node disabled
12099  * @cfg {String} icon The path to an icon for the node. The preferred way to do this
12100  *    is to use the cls or iconCls attributes and add the icon via a CSS background image.
12101  * @cfg {String} cls A css class to be added to the node
12102  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
12103  * @cfg {String} href URL of the link used for the node (defaults to #)
12104  * @cfg {String} hrefTarget target frame for the link
12105  * @cfg {String} qtip An Ext QuickTip for the node
12106  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
12107  * @cfg {Boolean} singleClickExpand True for single click expand on this node
12108  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
12109  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
12110  * (defaults to undefined with no checkbox rendered)
12111  * @constructor
12112  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
12113  */
12114 Roo.tree.TreeNode = function(attributes){
12115     attributes = attributes || {};
12116     if(typeof attributes == "string"){
12117         attributes = {text: attributes};
12118     }
12119     this.childrenRendered = false;
12120     this.rendered = false;
12121     Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
12122     this.expanded = attributes.expanded === true;
12123     this.isTarget = attributes.isTarget !== false;
12124     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
12125     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
12126
12127     /**
12128      * Read-only. The text for this node. To change it use setText().
12129      * @type String
12130      */
12131     this.text = attributes.text;
12132     /**
12133      * True if this node is disabled.
12134      * @type Boolean
12135      */
12136     this.disabled = attributes.disabled === true;
12137
12138     this.addEvents({
12139         /**
12140         * @event textchange
12141         * Fires when the text for this node is changed
12142         * @param {Node} this This node
12143         * @param {String} text The new text
12144         * @param {String} oldText The old text
12145         */
12146         "textchange" : true,
12147         /**
12148         * @event beforeexpand
12149         * Fires before this node is expanded, return false to cancel.
12150         * @param {Node} this This node
12151         * @param {Boolean} deep
12152         * @param {Boolean} anim
12153         */
12154         "beforeexpand" : true,
12155         /**
12156         * @event beforecollapse
12157         * Fires before this node is collapsed, return false to cancel.
12158         * @param {Node} this This node
12159         * @param {Boolean} deep
12160         * @param {Boolean} anim
12161         */
12162         "beforecollapse" : true,
12163         /**
12164         * @event expand
12165         * Fires when this node is expanded
12166         * @param {Node} this This node
12167         */
12168         "expand" : true,
12169         /**
12170         * @event disabledchange
12171         * Fires when the disabled status of this node changes
12172         * @param {Node} this This node
12173         * @param {Boolean} disabled
12174         */
12175         "disabledchange" : true,
12176         /**
12177         * @event collapse
12178         * Fires when this node is collapsed
12179         * @param {Node} this This node
12180         */
12181         "collapse" : true,
12182         /**
12183         * @event beforeclick
12184         * Fires before click processing. Return false to cancel the default action.
12185         * @param {Node} this This node
12186         * @param {Roo.EventObject} e The event object
12187         */
12188         "beforeclick":true,
12189         /**
12190         * @event checkchange
12191         * Fires when a node with a checkbox's checked property changes
12192         * @param {Node} this This node
12193         * @param {Boolean} checked
12194         */
12195         "checkchange":true,
12196         /**
12197         * @event click
12198         * Fires when this node is clicked
12199         * @param {Node} this This node
12200         * @param {Roo.EventObject} e The event object
12201         */
12202         "click":true,
12203         /**
12204         * @event dblclick
12205         * Fires when this node is double clicked
12206         * @param {Node} this This node
12207         * @param {Roo.EventObject} e The event object
12208         */
12209         "dblclick":true,
12210         /**
12211         * @event contextmenu
12212         * Fires when this node is right clicked
12213         * @param {Node} this This node
12214         * @param {Roo.EventObject} e The event object
12215         */
12216         "contextmenu":true,
12217         /**
12218         * @event beforechildrenrendered
12219         * Fires right before the child nodes for this node are rendered
12220         * @param {Node} this This node
12221         */
12222         "beforechildrenrendered":true
12223     });
12224
12225     var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
12226
12227     /**
12228      * Read-only. The UI for this node
12229      * @type TreeNodeUI
12230      */
12231     this.ui = new uiClass(this);
12232     
12233     // finally support items[]
12234     if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
12235         return;
12236     }
12237     
12238     
12239     Roo.each(this.attributes.items, function(c) {
12240         this.appendChild(Roo.factory(c,Roo.Tree));
12241     }, this);
12242     delete this.attributes.items;
12243     
12244     
12245     
12246 };
12247 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
12248     preventHScroll: true,
12249     /**
12250      * Returns true if this node is expanded
12251      * @return {Boolean}
12252      */
12253     isExpanded : function(){
12254         return this.expanded;
12255     },
12256
12257     /**
12258      * Returns the UI object for this node
12259      * @return {TreeNodeUI}
12260      */
12261     getUI : function(){
12262         return this.ui;
12263     },
12264
12265     // private override
12266     setFirstChild : function(node){
12267         var of = this.firstChild;
12268         Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
12269         if(this.childrenRendered && of && node != of){
12270             of.renderIndent(true, true);
12271         }
12272         if(this.rendered){
12273             this.renderIndent(true, true);
12274         }
12275     },
12276
12277     // private override
12278     setLastChild : function(node){
12279         var ol = this.lastChild;
12280         Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
12281         if(this.childrenRendered && ol && node != ol){
12282             ol.renderIndent(true, true);
12283         }
12284         if(this.rendered){
12285             this.renderIndent(true, true);
12286         }
12287     },
12288
12289     // these methods are overridden to provide lazy rendering support
12290     // private override
12291     appendChild : function()
12292     {
12293         var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
12294         if(node && this.childrenRendered){
12295             node.render();
12296         }
12297         this.ui.updateExpandIcon();
12298         return node;
12299     },
12300
12301     // private override
12302     removeChild : function(node){
12303         this.ownerTree.getSelectionModel().unselect(node);
12304         Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
12305         // if it's been rendered remove dom node
12306         if(this.childrenRendered){
12307             node.ui.remove();
12308         }
12309         if(this.childNodes.length < 1){
12310             this.collapse(false, false);
12311         }else{
12312             this.ui.updateExpandIcon();
12313         }
12314         if(!this.firstChild) {
12315             this.childrenRendered = false;
12316         }
12317         return node;
12318     },
12319
12320     // private override
12321     insertBefore : function(node, refNode){
12322         var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
12323         if(newNode && refNode && this.childrenRendered){
12324             node.render();
12325         }
12326         this.ui.updateExpandIcon();
12327         return newNode;
12328     },
12329
12330     /**
12331      * Sets the text for this node
12332      * @param {String} text
12333      */
12334     setText : function(text){
12335         var oldText = this.text;
12336         this.text = text;
12337         this.attributes.text = text;
12338         if(this.rendered){ // event without subscribing
12339             this.ui.onTextChange(this, text, oldText);
12340         }
12341         this.fireEvent("textchange", this, text, oldText);
12342     },
12343
12344     /**
12345      * Triggers selection of this node
12346      */
12347     select : function(){
12348         this.getOwnerTree().getSelectionModel().select(this);
12349     },
12350
12351     /**
12352      * Triggers deselection of this node
12353      */
12354     unselect : function(){
12355         this.getOwnerTree().getSelectionModel().unselect(this);
12356     },
12357
12358     /**
12359      * Returns true if this node is selected
12360      * @return {Boolean}
12361      */
12362     isSelected : function(){
12363         return this.getOwnerTree().getSelectionModel().isSelected(this);
12364     },
12365
12366     /**
12367      * Expand this node.
12368      * @param {Boolean} deep (optional) True to expand all children as well
12369      * @param {Boolean} anim (optional) false to cancel the default animation
12370      * @param {Function} callback (optional) A callback to be called when
12371      * expanding this node completes (does not wait for deep expand to complete).
12372      * Called with 1 parameter, this node.
12373      */
12374     expand : function(deep, anim, callback){
12375         if(!this.expanded){
12376             if(this.fireEvent("beforeexpand", this, deep, anim) === false){
12377                 return;
12378             }
12379             if(!this.childrenRendered){
12380                 this.renderChildren();
12381             }
12382             this.expanded = true;
12383             
12384             if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
12385                 this.ui.animExpand(function(){
12386                     this.fireEvent("expand", this);
12387                     if(typeof callback == "function"){
12388                         callback(this);
12389                     }
12390                     if(deep === true){
12391                         this.expandChildNodes(true);
12392                     }
12393                 }.createDelegate(this));
12394                 return;
12395             }else{
12396                 this.ui.expand();
12397                 this.fireEvent("expand", this);
12398                 if(typeof callback == "function"){
12399                     callback(this);
12400                 }
12401             }
12402         }else{
12403            if(typeof callback == "function"){
12404                callback(this);
12405            }
12406         }
12407         if(deep === true){
12408             this.expandChildNodes(true);
12409         }
12410     },
12411
12412     isHiddenRoot : function(){
12413         return this.isRoot && !this.getOwnerTree().rootVisible;
12414     },
12415
12416     /**
12417      * Collapse this node.
12418      * @param {Boolean} deep (optional) True to collapse all children as well
12419      * @param {Boolean} anim (optional) false to cancel the default animation
12420      */
12421     collapse : function(deep, anim){
12422         if(this.expanded && !this.isHiddenRoot()){
12423             if(this.fireEvent("beforecollapse", this, deep, anim) === false){
12424                 return;
12425             }
12426             this.expanded = false;
12427             if((this.getOwnerTree().animate && anim !== false) || anim){
12428                 this.ui.animCollapse(function(){
12429                     this.fireEvent("collapse", this);
12430                     if(deep === true){
12431                         this.collapseChildNodes(true);
12432                     }
12433                 }.createDelegate(this));
12434                 return;
12435             }else{
12436                 this.ui.collapse();
12437                 this.fireEvent("collapse", this);
12438             }
12439         }
12440         if(deep === true){
12441             var cs = this.childNodes;
12442             for(var i = 0, len = cs.length; i < len; i++) {
12443                 cs[i].collapse(true, false);
12444             }
12445         }
12446     },
12447
12448     // private
12449     delayedExpand : function(delay){
12450         if(!this.expandProcId){
12451             this.expandProcId = this.expand.defer(delay, this);
12452         }
12453     },
12454
12455     // private
12456     cancelExpand : function(){
12457         if(this.expandProcId){
12458             clearTimeout(this.expandProcId);
12459         }
12460         this.expandProcId = false;
12461     },
12462
12463     /**
12464      * Toggles expanded/collapsed state of the node
12465      */
12466     toggle : function(){
12467         if(this.expanded){
12468             this.collapse();
12469         }else{
12470             this.expand();
12471         }
12472     },
12473
12474     /**
12475      * Ensures all parent nodes are expanded
12476      */
12477     ensureVisible : function(callback){
12478         var tree = this.getOwnerTree();
12479         tree.expandPath(this.parentNode.getPath(), false, function(){
12480             tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
12481             Roo.callback(callback);
12482         }.createDelegate(this));
12483     },
12484
12485     /**
12486      * Expand all child nodes
12487      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
12488      */
12489     expandChildNodes : function(deep){
12490         var cs = this.childNodes;
12491         for(var i = 0, len = cs.length; i < len; i++) {
12492                 cs[i].expand(deep);
12493         }
12494     },
12495
12496     /**
12497      * Collapse all child nodes
12498      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
12499      */
12500     collapseChildNodes : function(deep){
12501         var cs = this.childNodes;
12502         for(var i = 0, len = cs.length; i < len; i++) {
12503                 cs[i].collapse(deep);
12504         }
12505     },
12506
12507     /**
12508      * Disables this node
12509      */
12510     disable : function(){
12511         this.disabled = true;
12512         this.unselect();
12513         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
12514             this.ui.onDisableChange(this, true);
12515         }
12516         this.fireEvent("disabledchange", this, true);
12517     },
12518
12519     /**
12520      * Enables this node
12521      */
12522     enable : function(){
12523         this.disabled = false;
12524         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
12525             this.ui.onDisableChange(this, false);
12526         }
12527         this.fireEvent("disabledchange", this, false);
12528     },
12529
12530     // private
12531     renderChildren : function(suppressEvent){
12532         if(suppressEvent !== false){
12533             this.fireEvent("beforechildrenrendered", this);
12534         }
12535         var cs = this.childNodes;
12536         for(var i = 0, len = cs.length; i < len; i++){
12537             cs[i].render(true);
12538         }
12539         this.childrenRendered = true;
12540     },
12541
12542     // private
12543     sort : function(fn, scope){
12544         Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
12545         if(this.childrenRendered){
12546             var cs = this.childNodes;
12547             for(var i = 0, len = cs.length; i < len; i++){
12548                 cs[i].render(true);
12549             }
12550         }
12551     },
12552
12553     // private
12554     render : function(bulkRender){
12555         this.ui.render(bulkRender);
12556         if(!this.rendered){
12557             this.rendered = true;
12558             if(this.expanded){
12559                 this.expanded = false;
12560                 this.expand(false, false);
12561             }
12562         }
12563     },
12564
12565     // private
12566     renderIndent : function(deep, refresh){
12567         if(refresh){
12568             this.ui.childIndent = null;
12569         }
12570         this.ui.renderIndent();
12571         if(deep === true && this.childrenRendered){
12572             var cs = this.childNodes;
12573             for(var i = 0, len = cs.length; i < len; i++){
12574                 cs[i].renderIndent(true, refresh);
12575             }
12576         }
12577     }
12578 });/*
12579  * Based on:
12580  * Ext JS Library 1.1.1
12581  * Copyright(c) 2006-2007, Ext JS, LLC.
12582  *
12583  * Originally Released Under LGPL - original licence link has changed is not relivant.
12584  *
12585  * Fork - LGPL
12586  * <script type="text/javascript">
12587  */
12588  
12589 /**
12590  * @class Roo.tree.AsyncTreeNode
12591  * @extends Roo.tree.TreeNode
12592  * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
12593  * @constructor
12594  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
12595  */
12596  Roo.tree.AsyncTreeNode = function(config){
12597     this.loaded = false;
12598     this.loading = false;
12599     Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
12600     /**
12601     * @event beforeload
12602     * Fires before this node is loaded, return false to cancel
12603     * @param {Node} this This node
12604     */
12605     this.addEvents({'beforeload':true, 'load': true});
12606     /**
12607     * @event load
12608     * Fires when this node is loaded
12609     * @param {Node} this This node
12610     */
12611     /**
12612      * The loader used by this node (defaults to using the tree's defined loader)
12613      * @type TreeLoader
12614      * @property loader
12615      */
12616 };
12617 Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
12618     expand : function(deep, anim, callback){
12619         if(this.loading){ // if an async load is already running, waiting til it's done
12620             var timer;
12621             var f = function(){
12622                 if(!this.loading){ // done loading
12623                     clearInterval(timer);
12624                     this.expand(deep, anim, callback);
12625                 }
12626             }.createDelegate(this);
12627             timer = setInterval(f, 200);
12628             return;
12629         }
12630         if(!this.loaded){
12631             if(this.fireEvent("beforeload", this) === false){
12632                 return;
12633             }
12634             this.loading = true;
12635             this.ui.beforeLoad(this);
12636             var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
12637             if(loader){
12638                 loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
12639                 return;
12640             }
12641         }
12642         Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
12643     },
12644     
12645     /**
12646      * Returns true if this node is currently loading
12647      * @return {Boolean}
12648      */
12649     isLoading : function(){
12650         return this.loading;  
12651     },
12652     
12653     loadComplete : function(deep, anim, callback){
12654         this.loading = false;
12655         this.loaded = true;
12656         this.ui.afterLoad(this);
12657         this.fireEvent("load", this);
12658         this.expand(deep, anim, callback);
12659     },
12660     
12661     /**
12662      * Returns true if this node has been loaded
12663      * @return {Boolean}
12664      */
12665     isLoaded : function(){
12666         return this.loaded;
12667     },
12668     
12669     hasChildNodes : function(){
12670         if(!this.isLeaf() && !this.loaded){
12671             return true;
12672         }else{
12673             return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
12674         }
12675     },
12676
12677     /**
12678      * Trigger a reload for this node
12679      * @param {Function} callback
12680      */
12681     reload : function(callback){
12682         this.collapse(false, false);
12683         while(this.firstChild){
12684             this.removeChild(this.firstChild);
12685         }
12686         this.childrenRendered = false;
12687         this.loaded = false;
12688         if(this.isHiddenRoot()){
12689             this.expanded = false;
12690         }
12691         this.expand(false, false, callback);
12692     }
12693 });/*
12694  * Based on:
12695  * Ext JS Library 1.1.1
12696  * Copyright(c) 2006-2007, Ext JS, LLC.
12697  *
12698  * Originally Released Under LGPL - original licence link has changed is not relivant.
12699  *
12700  * Fork - LGPL
12701  * <script type="text/javascript">
12702  */
12703  
12704 /**
12705  * @class Roo.tree.TreeNodeUI
12706  * @constructor
12707  * @param {Object} node The node to render
12708  * The TreeNode UI implementation is separate from the
12709  * tree implementation. Unless you are customizing the tree UI,
12710  * you should never have to use this directly.
12711  */
12712 Roo.tree.TreeNodeUI = function(node){
12713     this.node = node;
12714     this.rendered = false;
12715     this.animating = false;
12716     this.emptyIcon = Roo.BLANK_IMAGE_URL;
12717 };
12718
12719 Roo.tree.TreeNodeUI.prototype = {
12720     removeChild : function(node){
12721         if(this.rendered){
12722             this.ctNode.removeChild(node.ui.getEl());
12723         }
12724     },
12725
12726     beforeLoad : function(){
12727          this.addClass("x-tree-node-loading");
12728     },
12729
12730     afterLoad : function(){
12731          this.removeClass("x-tree-node-loading");
12732     },
12733
12734     onTextChange : function(node, text, oldText){
12735         if(this.rendered){
12736             this.textNode.innerHTML = text;
12737         }
12738     },
12739
12740     onDisableChange : function(node, state){
12741         this.disabled = state;
12742         if(state){
12743             this.addClass("x-tree-node-disabled");
12744         }else{
12745             this.removeClass("x-tree-node-disabled");
12746         }
12747     },
12748
12749     onSelectedChange : function(state){
12750         if(state){
12751             this.focus();
12752             this.addClass("x-tree-selected");
12753         }else{
12754             //this.blur();
12755             this.removeClass("x-tree-selected");
12756         }
12757     },
12758
12759     onMove : function(tree, node, oldParent, newParent, index, refNode){
12760         this.childIndent = null;
12761         if(this.rendered){
12762             var targetNode = newParent.ui.getContainer();
12763             if(!targetNode){//target not rendered
12764                 this.holder = document.createElement("div");
12765                 this.holder.appendChild(this.wrap);
12766                 return;
12767             }
12768             var insertBefore = refNode ? refNode.ui.getEl() : null;
12769             if(insertBefore){
12770                 targetNode.insertBefore(this.wrap, insertBefore);
12771             }else{
12772                 targetNode.appendChild(this.wrap);
12773             }
12774             this.node.renderIndent(true);
12775         }
12776     },
12777
12778     addClass : function(cls){
12779         if(this.elNode){
12780             Roo.fly(this.elNode).addClass(cls);
12781         }
12782     },
12783
12784     removeClass : function(cls){
12785         if(this.elNode){
12786             Roo.fly(this.elNode).removeClass(cls);
12787         }
12788     },
12789
12790     remove : function(){
12791         if(this.rendered){
12792             this.holder = document.createElement("div");
12793             this.holder.appendChild(this.wrap);
12794         }
12795     },
12796
12797     fireEvent : function(){
12798         return this.node.fireEvent.apply(this.node, arguments);
12799     },
12800
12801     initEvents : function(){
12802         this.node.on("move", this.onMove, this);
12803         var E = Roo.EventManager;
12804         var a = this.anchor;
12805
12806         var el = Roo.fly(a, '_treeui');
12807
12808         if(Roo.isOpera){ // opera render bug ignores the CSS
12809             el.setStyle("text-decoration", "none");
12810         }
12811
12812         el.on("click", this.onClick, this);
12813         el.on("dblclick", this.onDblClick, this);
12814
12815         if(this.checkbox){
12816             Roo.EventManager.on(this.checkbox,
12817                     Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
12818         }
12819
12820         el.on("contextmenu", this.onContextMenu, this);
12821
12822         var icon = Roo.fly(this.iconNode);
12823         icon.on("click", this.onClick, this);
12824         icon.on("dblclick", this.onDblClick, this);
12825         icon.on("contextmenu", this.onContextMenu, this);
12826         E.on(this.ecNode, "click", this.ecClick, this, true);
12827
12828         if(this.node.disabled){
12829             this.addClass("x-tree-node-disabled");
12830         }
12831         if(this.node.hidden){
12832             this.addClass("x-tree-node-disabled");
12833         }
12834         var ot = this.node.getOwnerTree();
12835         var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
12836         if(dd && (!this.node.isRoot || ot.rootVisible)){
12837             Roo.dd.Registry.register(this.elNode, {
12838                 node: this.node,
12839                 handles: this.getDDHandles(),
12840                 isHandle: false
12841             });
12842         }
12843     },
12844
12845     getDDHandles : function(){
12846         return [this.iconNode, this.textNode];
12847     },
12848
12849     hide : function(){
12850         if(this.rendered){
12851             this.wrap.style.display = "none";
12852         }
12853     },
12854
12855     show : function(){
12856         if(this.rendered){
12857             this.wrap.style.display = "";
12858         }
12859     },
12860
12861     onContextMenu : function(e){
12862         if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
12863             e.preventDefault();
12864             this.focus();
12865             this.fireEvent("contextmenu", this.node, e);
12866         }
12867     },
12868
12869     onClick : function(e){
12870         if(this.dropping){
12871             e.stopEvent();
12872             return;
12873         }
12874         if(this.fireEvent("beforeclick", this.node, e) !== false){
12875             if(!this.disabled && this.node.attributes.href){
12876                 this.fireEvent("click", this.node, e);
12877                 return;
12878             }
12879             e.preventDefault();
12880             if(this.disabled){
12881                 return;
12882             }
12883
12884             if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
12885                 this.node.toggle();
12886             }
12887
12888             this.fireEvent("click", this.node, e);
12889         }else{
12890             e.stopEvent();
12891         }
12892     },
12893
12894     onDblClick : function(e){
12895         e.preventDefault();
12896         if(this.disabled){
12897             return;
12898         }
12899         if(this.checkbox){
12900             this.toggleCheck();
12901         }
12902         if(!this.animating && this.node.hasChildNodes()){
12903             this.node.toggle();
12904         }
12905         this.fireEvent("dblclick", this.node, e);
12906     },
12907
12908     onCheckChange : function(){
12909         var checked = this.checkbox.checked;
12910         this.node.attributes.checked = checked;
12911         this.fireEvent('checkchange', this.node, checked);
12912     },
12913
12914     ecClick : function(e){
12915         if(!this.animating && this.node.hasChildNodes()){
12916             this.node.toggle();
12917         }
12918     },
12919
12920     startDrop : function(){
12921         this.dropping = true;
12922     },
12923
12924     // delayed drop so the click event doesn't get fired on a drop
12925     endDrop : function(){
12926        setTimeout(function(){
12927            this.dropping = false;
12928        }.createDelegate(this), 50);
12929     },
12930
12931     expand : function(){
12932         this.updateExpandIcon();
12933         this.ctNode.style.display = "";
12934     },
12935
12936     focus : function(){
12937         if(!this.node.preventHScroll){
12938             try{this.anchor.focus();
12939             }catch(e){}
12940         }else if(!Roo.isIE){
12941             try{
12942                 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
12943                 var l = noscroll.scrollLeft;
12944                 this.anchor.focus();
12945                 noscroll.scrollLeft = l;
12946             }catch(e){}
12947         }
12948     },
12949
12950     toggleCheck : function(value){
12951         var cb = this.checkbox;
12952         if(cb){
12953             cb.checked = (value === undefined ? !cb.checked : value);
12954         }
12955     },
12956
12957     blur : function(){
12958         try{
12959             this.anchor.blur();
12960         }catch(e){}
12961     },
12962
12963     animExpand : function(callback){
12964         var ct = Roo.get(this.ctNode);
12965         ct.stopFx();
12966         if(!this.node.hasChildNodes()){
12967             this.updateExpandIcon();
12968             this.ctNode.style.display = "";
12969             Roo.callback(callback);
12970             return;
12971         }
12972         this.animating = true;
12973         this.updateExpandIcon();
12974
12975         ct.slideIn('t', {
12976            callback : function(){
12977                this.animating = false;
12978                Roo.callback(callback);
12979             },
12980             scope: this,
12981             duration: this.node.ownerTree.duration || .25
12982         });
12983     },
12984
12985     highlight : function(){
12986         var tree = this.node.getOwnerTree();
12987         Roo.fly(this.wrap).highlight(
12988             tree.hlColor || "C3DAF9",
12989             {endColor: tree.hlBaseColor}
12990         );
12991     },
12992
12993     collapse : function(){
12994         this.updateExpandIcon();
12995         this.ctNode.style.display = "none";
12996     },
12997
12998     animCollapse : function(callback){
12999         var ct = Roo.get(this.ctNode);
13000         ct.enableDisplayMode('block');
13001         ct.stopFx();
13002
13003         this.animating = true;
13004         this.updateExpandIcon();
13005
13006         ct.slideOut('t', {
13007             callback : function(){
13008                this.animating = false;
13009                Roo.callback(callback);
13010             },
13011             scope: this,
13012             duration: this.node.ownerTree.duration || .25
13013         });
13014     },
13015
13016     getContainer : function(){
13017         return this.ctNode;
13018     },
13019
13020     getEl : function(){
13021         return this.wrap;
13022     },
13023
13024     appendDDGhost : function(ghostNode){
13025         ghostNode.appendChild(this.elNode.cloneNode(true));
13026     },
13027
13028     getDDRepairXY : function(){
13029         return Roo.lib.Dom.getXY(this.iconNode);
13030     },
13031
13032     onRender : function(){
13033         this.render();
13034     },
13035
13036     render : function(bulkRender){
13037         var n = this.node, a = n.attributes;
13038         var targetNode = n.parentNode ?
13039               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
13040
13041         if(!this.rendered){
13042             this.rendered = true;
13043
13044             this.renderElements(n, a, targetNode, bulkRender);
13045
13046             if(a.qtip){
13047                if(this.textNode.setAttributeNS){
13048                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);
13049                    if(a.qtipTitle){
13050                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
13051                    }
13052                }else{
13053                    this.textNode.setAttribute("ext:qtip", a.qtip);
13054                    if(a.qtipTitle){
13055                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
13056                    }
13057                }
13058             }else if(a.qtipCfg){
13059                 a.qtipCfg.target = Roo.id(this.textNode);
13060                 Roo.QuickTips.register(a.qtipCfg);
13061             }
13062             this.initEvents();
13063             if(!this.node.expanded){
13064                 this.updateExpandIcon();
13065             }
13066         }else{
13067             if(bulkRender === true) {
13068                 targetNode.appendChild(this.wrap);
13069             }
13070         }
13071     },
13072
13073     renderElements : function(n, a, targetNode, bulkRender)
13074     {
13075         // add some indent caching, this helps performance when rendering a large tree
13076         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
13077         var t = n.getOwnerTree();
13078         var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
13079         if (typeof(n.attributes.html) != 'undefined') {
13080             txt = n.attributes.html;
13081         }
13082         var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
13083         var cb = typeof a.checked == 'boolean';
13084         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
13085         var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
13086             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
13087             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
13088             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
13089             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
13090             '<a hidefocus="on" href="',href,'" tabIndex="1" ',
13091              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
13092                 '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
13093             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
13094             "</li>"];
13095
13096         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
13097             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
13098                                 n.nextSibling.ui.getEl(), buf.join(""));
13099         }else{
13100             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
13101         }
13102
13103         this.elNode = this.wrap.childNodes[0];
13104         this.ctNode = this.wrap.childNodes[1];
13105         var cs = this.elNode.childNodes;
13106         this.indentNode = cs[0];
13107         this.ecNode = cs[1];
13108         this.iconNode = cs[2];
13109         var index = 3;
13110         if(cb){
13111             this.checkbox = cs[3];
13112             index++;
13113         }
13114         this.anchor = cs[index];
13115         this.textNode = cs[index].firstChild;
13116     },
13117
13118     getAnchor : function(){
13119         return this.anchor;
13120     },
13121
13122     getTextEl : function(){
13123         return this.textNode;
13124     },
13125
13126     getIconEl : function(){
13127         return this.iconNode;
13128     },
13129
13130     isChecked : function(){
13131         return this.checkbox ? this.checkbox.checked : false;
13132     },
13133
13134     updateExpandIcon : function(){
13135         if(this.rendered){
13136             var n = this.node, c1, c2;
13137             var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
13138             var hasChild = n.hasChildNodes();
13139             if(hasChild){
13140                 if(n.expanded){
13141                     cls += "-minus";
13142                     c1 = "x-tree-node-collapsed";
13143                     c2 = "x-tree-node-expanded";
13144                 }else{
13145                     cls += "-plus";
13146                     c1 = "x-tree-node-expanded";
13147                     c2 = "x-tree-node-collapsed";
13148                 }
13149                 if(this.wasLeaf){
13150                     this.removeClass("x-tree-node-leaf");
13151                     this.wasLeaf = false;
13152                 }
13153                 if(this.c1 != c1 || this.c2 != c2){
13154                     Roo.fly(this.elNode).replaceClass(c1, c2);
13155                     this.c1 = c1; this.c2 = c2;
13156                 }
13157             }else{
13158                 // this changes non-leafs into leafs if they have no children.
13159                 // it's not very rational behaviour..
13160                 
13161                 if(!this.wasLeaf && this.node.leaf){
13162                     Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
13163                     delete this.c1;
13164                     delete this.c2;
13165                     this.wasLeaf = true;
13166                 }
13167             }
13168             var ecc = "x-tree-ec-icon "+cls;
13169             if(this.ecc != ecc){
13170                 this.ecNode.className = ecc;
13171                 this.ecc = ecc;
13172             }
13173         }
13174     },
13175
13176     getChildIndent : function(){
13177         if(!this.childIndent){
13178             var buf = [];
13179             var p = this.node;
13180             while(p){
13181                 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
13182                     if(!p.isLast()) {
13183                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
13184                     } else {
13185                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
13186                     }
13187                 }
13188                 p = p.parentNode;
13189             }
13190             this.childIndent = buf.join("");
13191         }
13192         return this.childIndent;
13193     },
13194
13195     renderIndent : function(){
13196         if(this.rendered){
13197             var indent = "";
13198             var p = this.node.parentNode;
13199             if(p){
13200                 indent = p.ui.getChildIndent();
13201             }
13202             if(this.indentMarkup != indent){ // don't rerender if not required
13203                 this.indentNode.innerHTML = indent;
13204                 this.indentMarkup = indent;
13205             }
13206             this.updateExpandIcon();
13207         }
13208     }
13209 };
13210
13211 Roo.tree.RootTreeNodeUI = function(){
13212     Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
13213 };
13214 Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
13215     render : function(){
13216         if(!this.rendered){
13217             var targetNode = this.node.ownerTree.innerCt.dom;
13218             this.node.expanded = true;
13219             targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
13220             this.wrap = this.ctNode = targetNode.firstChild;
13221         }
13222     },
13223     collapse : function(){
13224     },
13225     expand : function(){
13226     }
13227 });/*
13228  * Based on:
13229  * Ext JS Library 1.1.1
13230  * Copyright(c) 2006-2007, Ext JS, LLC.
13231  *
13232  * Originally Released Under LGPL - original licence link has changed is not relivant.
13233  *
13234  * Fork - LGPL
13235  * <script type="text/javascript">
13236  */
13237 /**
13238  * @class Roo.tree.TreeLoader
13239  * @extends Roo.util.Observable
13240  * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
13241  * nodes from a specified URL. The response must be a javascript Array definition
13242  * who's elements are node definition objects. eg:
13243  * <pre><code>
13244 {  success : true,
13245    data :      [
13246    
13247     { 'id': 1, 'text': 'A folder Node', 'leaf': false },
13248     { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
13249     ]
13250 }
13251
13252
13253 </code></pre>
13254  * <br><br>
13255  * The old style respose with just an array is still supported, but not recommended.
13256  * <br><br>
13257  *
13258  * A server request is sent, and child nodes are loaded only when a node is expanded.
13259  * The loading node's id is passed to the server under the parameter name "node" to
13260  * enable the server to produce the correct child nodes.
13261  * <br><br>
13262  * To pass extra parameters, an event handler may be attached to the "beforeload"
13263  * event, and the parameters specified in the TreeLoader's baseParams property:
13264  * <pre><code>
13265     myTreeLoader.on("beforeload", function(treeLoader, node) {
13266         this.baseParams.category = node.attributes.category;
13267     }, this);
13268     
13269 </code></pre>
13270  *
13271  * This would pass an HTTP parameter called "category" to the server containing
13272  * the value of the Node's "category" attribute.
13273  * @constructor
13274  * Creates a new Treeloader.
13275  * @param {Object} config A config object containing config properties.
13276  */
13277 Roo.tree.TreeLoader = function(config){
13278     this.baseParams = {};
13279     this.requestMethod = "POST";
13280     Roo.apply(this, config);
13281
13282     this.addEvents({
13283     
13284         /**
13285          * @event beforeload
13286          * Fires before a network request is made to retrieve the Json text which specifies a node's children.
13287          * @param {Object} This TreeLoader object.
13288          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13289          * @param {Object} callback The callback function specified in the {@link #load} call.
13290          */
13291         beforeload : true,
13292         /**
13293          * @event load
13294          * Fires when the node has been successfuly loaded.
13295          * @param {Object} This TreeLoader object.
13296          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13297          * @param {Object} response The response object containing the data from the server.
13298          */
13299         load : true,
13300         /**
13301          * @event loadexception
13302          * Fires if the network request failed.
13303          * @param {Object} This TreeLoader object.
13304          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13305          * @param {Object} response The response object containing the data from the server.
13306          */
13307         loadexception : true,
13308         /**
13309          * @event create
13310          * Fires before a node is created, enabling you to return custom Node types 
13311          * @param {Object} This TreeLoader object.
13312          * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
13313          */
13314         create : true
13315     });
13316
13317     Roo.tree.TreeLoader.superclass.constructor.call(this);
13318 };
13319
13320 Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
13321     /**
13322     * @cfg {String} dataUrl The URL from which to request a Json string which
13323     * specifies an array of node definition object representing the child nodes
13324     * to be loaded.
13325     */
13326     /**
13327     * @cfg {String} requestMethod either GET or POST
13328     * defaults to POST (due to BC)
13329     * to be loaded.
13330     */
13331     /**
13332     * @cfg {Object} baseParams (optional) An object containing properties which
13333     * specify HTTP parameters to be passed to each request for child nodes.
13334     */
13335     /**
13336     * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
13337     * created by this loader. If the attributes sent by the server have an attribute in this object,
13338     * they take priority.
13339     */
13340     /**
13341     * @cfg {Object} uiProviders (optional) An object containing properties which
13342     * 
13343     * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
13344     * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
13345     * <i>uiProvider</i> attribute of a returned child node is a string rather
13346     * than a reference to a TreeNodeUI implementation, this that string value
13347     * is used as a property name in the uiProviders object. You can define the provider named
13348     * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
13349     */
13350     uiProviders : {},
13351
13352     /**
13353     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
13354     * child nodes before loading.
13355     */
13356     clearOnLoad : true,
13357
13358     /**
13359     * @cfg {String} root (optional) Default to false. Use this to read data from an object 
13360     * property on loading, rather than expecting an array. (eg. more compatible to a standard
13361     * Grid query { data : [ .....] }
13362     */
13363     
13364     root : false,
13365      /**
13366     * @cfg {String} queryParam (optional) 
13367     * Name of the query as it will be passed on the querystring (defaults to 'node')
13368     * eg. the request will be ?node=[id]
13369     */
13370     
13371     
13372     queryParam: false,
13373     
13374     /**
13375      * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
13376      * This is called automatically when a node is expanded, but may be used to reload
13377      * a node (or append new children if the {@link #clearOnLoad} option is false.)
13378      * @param {Roo.tree.TreeNode} node
13379      * @param {Function} callback
13380      */
13381     load : function(node, callback){
13382         if(this.clearOnLoad){
13383             while(node.firstChild){
13384                 node.removeChild(node.firstChild);
13385             }
13386         }
13387         if(node.attributes.children){ // preloaded json children
13388             var cs = node.attributes.children;
13389             for(var i = 0, len = cs.length; i < len; i++){
13390                 node.appendChild(this.createNode(cs[i]));
13391             }
13392             if(typeof callback == "function"){
13393                 callback();
13394             }
13395         }else if(this.dataUrl){
13396             this.requestData(node, callback);
13397         }
13398     },
13399
13400     getParams: function(node){
13401         var buf = [], bp = this.baseParams;
13402         for(var key in bp){
13403             if(typeof bp[key] != "function"){
13404                 buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
13405             }
13406         }
13407         var n = this.queryParam === false ? 'node' : this.queryParam;
13408         buf.push(n + "=", encodeURIComponent(node.id));
13409         return buf.join("");
13410     },
13411
13412     requestData : function(node, callback){
13413         if(this.fireEvent("beforeload", this, node, callback) !== false){
13414             this.transId = Roo.Ajax.request({
13415                 method:this.requestMethod,
13416                 url: this.dataUrl||this.url,
13417                 success: this.handleResponse,
13418                 failure: this.handleFailure,
13419                 scope: this,
13420                 argument: {callback: callback, node: node},
13421                 params: this.getParams(node)
13422             });
13423         }else{
13424             // if the load is cancelled, make sure we notify
13425             // the node that we are done
13426             if(typeof callback == "function"){
13427                 callback();
13428             }
13429         }
13430     },
13431
13432     isLoading : function(){
13433         return this.transId ? true : false;
13434     },
13435
13436     abort : function(){
13437         if(this.isLoading()){
13438             Roo.Ajax.abort(this.transId);
13439         }
13440     },
13441
13442     // private
13443     createNode : function(attr)
13444     {
13445         // apply baseAttrs, nice idea Corey!
13446         if(this.baseAttrs){
13447             Roo.applyIf(attr, this.baseAttrs);
13448         }
13449         if(this.applyLoader !== false){
13450             attr.loader = this;
13451         }
13452         // uiProvider = depreciated..
13453         
13454         if(typeof(attr.uiProvider) == 'string'){
13455            attr.uiProvider = this.uiProviders[attr.uiProvider] || 
13456                 /**  eval:var:attr */ eval(attr.uiProvider);
13457         }
13458         if(typeof(this.uiProviders['default']) != 'undefined') {
13459             attr.uiProvider = this.uiProviders['default'];
13460         }
13461         
13462         this.fireEvent('create', this, attr);
13463         
13464         attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
13465         return(attr.leaf ?
13466                         new Roo.tree.TreeNode(attr) :
13467                         new Roo.tree.AsyncTreeNode(attr));
13468     },
13469
13470     processResponse : function(response, node, callback)
13471     {
13472         var json = response.responseText;
13473         try {
13474             
13475             var o = Roo.decode(json);
13476             
13477             if (this.root === false && typeof(o.success) != undefined) {
13478                 this.root = 'data'; // the default behaviour for list like data..
13479                 }
13480                 
13481             if (this.root !== false &&  !o.success) {
13482                 // it's a failure condition.
13483                 var a = response.argument;
13484                 this.fireEvent("loadexception", this, a.node, response);
13485                 Roo.log("Load failed - should have a handler really");
13486                 return;
13487             }
13488             
13489             
13490             
13491             if (this.root !== false) {
13492                  o = o[this.root];
13493             }
13494             
13495             for(var i = 0, len = o.length; i < len; i++){
13496                 var n = this.createNode(o[i]);
13497                 if(n){
13498                     node.appendChild(n);
13499                 }
13500             }
13501             if(typeof callback == "function"){
13502                 callback(this, node);
13503             }
13504         }catch(e){
13505             this.handleFailure(response);
13506         }
13507     },
13508
13509     handleResponse : function(response){
13510         this.transId = false;
13511         var a = response.argument;
13512         this.processResponse(response, a.node, a.callback);
13513         this.fireEvent("load", this, a.node, response);
13514     },
13515
13516     handleFailure : function(response)
13517     {
13518         // should handle failure better..
13519         this.transId = false;
13520         var a = response.argument;
13521         this.fireEvent("loadexception", this, a.node, response);
13522         if(typeof a.callback == "function"){
13523             a.callback(this, a.node);
13524         }
13525     }
13526 });/*
13527  * Based on:
13528  * Ext JS Library 1.1.1
13529  * Copyright(c) 2006-2007, Ext JS, LLC.
13530  *
13531  * Originally Released Under LGPL - original licence link has changed is not relivant.
13532  *
13533  * Fork - LGPL
13534  * <script type="text/javascript">
13535  */
13536
13537 /**
13538 * @class Roo.tree.TreeFilter
13539 * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
13540 * @param {TreePanel} tree
13541 * @param {Object} config (optional)
13542  */
13543 Roo.tree.TreeFilter = function(tree, config){
13544     this.tree = tree;
13545     this.filtered = {};
13546     Roo.apply(this, config);
13547 };
13548
13549 Roo.tree.TreeFilter.prototype = {
13550     clearBlank:false,
13551     reverse:false,
13552     autoClear:false,
13553     remove:false,
13554
13555      /**
13556      * Filter the data by a specific attribute.
13557      * @param {String/RegExp} value Either string that the attribute value
13558      * should start with or a RegExp to test against the attribute
13559      * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
13560      * @param {TreeNode} startNode (optional) The node to start the filter at.
13561      */
13562     filter : function(value, attr, startNode){
13563         attr = attr || "text";
13564         var f;
13565         if(typeof value == "string"){
13566             var vlen = value.length;
13567             // auto clear empty filter
13568             if(vlen == 0 && this.clearBlank){
13569                 this.clear();
13570                 return;
13571             }
13572             value = value.toLowerCase();
13573             f = function(n){
13574                 return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
13575             };
13576         }else if(value.exec){ // regex?
13577             f = function(n){
13578                 return value.test(n.attributes[attr]);
13579             };
13580         }else{
13581             throw 'Illegal filter type, must be string or regex';
13582         }
13583         this.filterBy(f, null, startNode);
13584         },
13585
13586     /**
13587      * Filter by a function. The passed function will be called with each
13588      * node in the tree (or from the startNode). If the function returns true, the node is kept
13589      * otherwise it is filtered. If a node is filtered, its children are also filtered.
13590      * @param {Function} fn The filter function
13591      * @param {Object} scope (optional) The scope of the function (defaults to the current node)
13592      */
13593     filterBy : function(fn, scope, startNode){
13594         startNode = startNode || this.tree.root;
13595         if(this.autoClear){
13596             this.clear();
13597         }
13598         var af = this.filtered, rv = this.reverse;
13599         var f = function(n){
13600             if(n == startNode){
13601                 return true;
13602             }
13603             if(af[n.id]){
13604                 return false;
13605             }
13606             var m = fn.call(scope || n, n);
13607             if(!m || rv){
13608                 af[n.id] = n;
13609                 n.ui.hide();
13610                 return false;
13611             }
13612             return true;
13613         };
13614         startNode.cascade(f);
13615         if(this.remove){
13616            for(var id in af){
13617                if(typeof id != "function"){
13618                    var n = af[id];
13619                    if(n && n.parentNode){
13620                        n.parentNode.removeChild(n);
13621                    }
13622                }
13623            }
13624         }
13625     },
13626
13627     /**
13628      * Clears the current filter. Note: with the "remove" option
13629      * set a filter cannot be cleared.
13630      */
13631     clear : function(){
13632         var t = this.tree;
13633         var af = this.filtered;
13634         for(var id in af){
13635             if(typeof id != "function"){
13636                 var n = af[id];
13637                 if(n){
13638                     n.ui.show();
13639                 }
13640             }
13641         }
13642         this.filtered = {};
13643     }
13644 };
13645 /*
13646  * Based on:
13647  * Ext JS Library 1.1.1
13648  * Copyright(c) 2006-2007, Ext JS, LLC.
13649  *
13650  * Originally Released Under LGPL - original licence link has changed is not relivant.
13651  *
13652  * Fork - LGPL
13653  * <script type="text/javascript">
13654  */
13655  
13656
13657 /**
13658  * @class Roo.tree.TreeSorter
13659  * Provides sorting of nodes in a TreePanel
13660  * 
13661  * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
13662  * @cfg {String} property The named attribute on the node to sort by (defaults to text)
13663  * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
13664  * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
13665  * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
13666  * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
13667  * @constructor
13668  * @param {TreePanel} tree
13669  * @param {Object} config
13670  */
13671 Roo.tree.TreeSorter = function(tree, config){
13672     Roo.apply(this, config);
13673     tree.on("beforechildrenrendered", this.doSort, this);
13674     tree.on("append", this.updateSort, this);
13675     tree.on("insert", this.updateSort, this);
13676     
13677     var dsc = this.dir && this.dir.toLowerCase() == "desc";
13678     var p = this.property || "text";
13679     var sortType = this.sortType;
13680     var fs = this.folderSort;
13681     var cs = this.caseSensitive === true;
13682     var leafAttr = this.leafAttr || 'leaf';
13683
13684     this.sortFn = function(n1, n2){
13685         if(fs){
13686             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
13687                 return 1;
13688             }
13689             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
13690                 return -1;
13691             }
13692         }
13693         var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
13694         var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
13695         if(v1 < v2){
13696                         return dsc ? +1 : -1;
13697                 }else if(v1 > v2){
13698                         return dsc ? -1 : +1;
13699         }else{
13700                 return 0;
13701         }
13702     };
13703 };
13704
13705 Roo.tree.TreeSorter.prototype = {
13706     doSort : function(node){
13707         node.sort(this.sortFn);
13708     },
13709     
13710     compareNodes : function(n1, n2){
13711         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
13712     },
13713     
13714     updateSort : function(tree, node){
13715         if(node.childrenRendered){
13716             this.doSort.defer(1, this, [node]);
13717         }
13718     }
13719 };/*
13720  * Based on:
13721  * Ext JS Library 1.1.1
13722  * Copyright(c) 2006-2007, Ext JS, LLC.
13723  *
13724  * Originally Released Under LGPL - original licence link has changed is not relivant.
13725  *
13726  * Fork - LGPL
13727  * <script type="text/javascript">
13728  */
13729
13730 if(Roo.dd.DropZone){
13731     
13732 Roo.tree.TreeDropZone = function(tree, config){
13733     this.allowParentInsert = false;
13734     this.allowContainerDrop = false;
13735     this.appendOnly = false;
13736     Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
13737     this.tree = tree;
13738     this.lastInsertClass = "x-tree-no-status";
13739     this.dragOverData = {};
13740 };
13741
13742 Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
13743     ddGroup : "TreeDD",
13744     scroll:  true,
13745     
13746     expandDelay : 1000,
13747     
13748     expandNode : function(node){
13749         if(node.hasChildNodes() && !node.isExpanded()){
13750             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
13751         }
13752     },
13753     
13754     queueExpand : function(node){
13755         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
13756     },
13757     
13758     cancelExpand : function(){
13759         if(this.expandProcId){
13760             clearTimeout(this.expandProcId);
13761             this.expandProcId = false;
13762         }
13763     },
13764     
13765     isValidDropPoint : function(n, pt, dd, e, data){
13766         if(!n || !data){ return false; }
13767         var targetNode = n.node;
13768         var dropNode = data.node;
13769         // default drop rules
13770         if(!(targetNode && targetNode.isTarget && pt)){
13771             return false;
13772         }
13773         if(pt == "append" && targetNode.allowChildren === false){
13774             return false;
13775         }
13776         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
13777             return false;
13778         }
13779         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
13780             return false;
13781         }
13782         // reuse the object
13783         var overEvent = this.dragOverData;
13784         overEvent.tree = this.tree;
13785         overEvent.target = targetNode;
13786         overEvent.data = data;
13787         overEvent.point = pt;
13788         overEvent.source = dd;
13789         overEvent.rawEvent = e;
13790         overEvent.dropNode = dropNode;
13791         overEvent.cancel = false;  
13792         var result = this.tree.fireEvent("nodedragover", overEvent);
13793         return overEvent.cancel === false && result !== false;
13794     },
13795     
13796     getDropPoint : function(e, n, dd)
13797     {
13798         var tn = n.node;
13799         if(tn.isRoot){
13800             return tn.allowChildren !== false ? "append" : false; // always append for root
13801         }
13802         var dragEl = n.ddel;
13803         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
13804         var y = Roo.lib.Event.getPageY(e);
13805         //var noAppend = tn.allowChildren === false || tn.isLeaf();
13806         
13807         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
13808         var noAppend = tn.allowChildren === false;
13809         if(this.appendOnly || tn.parentNode.allowChildren === false){
13810             return noAppend ? false : "append";
13811         }
13812         var noBelow = false;
13813         if(!this.allowParentInsert){
13814             noBelow = tn.hasChildNodes() && tn.isExpanded();
13815         }
13816         var q = (b - t) / (noAppend ? 2 : 3);
13817         if(y >= t && y < (t + q)){
13818             return "above";
13819         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
13820             return "below";
13821         }else{
13822             return "append";
13823         }
13824     },
13825     
13826     onNodeEnter : function(n, dd, e, data)
13827     {
13828         this.cancelExpand();
13829     },
13830     
13831     onNodeOver : function(n, dd, e, data)
13832     {
13833        
13834         var pt = this.getDropPoint(e, n, dd);
13835         var node = n.node;
13836         
13837         // auto node expand check
13838         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
13839             this.queueExpand(node);
13840         }else if(pt != "append"){
13841             this.cancelExpand();
13842         }
13843         
13844         // set the insert point style on the target node
13845         var returnCls = this.dropNotAllowed;
13846         if(this.isValidDropPoint(n, pt, dd, e, data)){
13847            if(pt){
13848                var el = n.ddel;
13849                var cls;
13850                if(pt == "above"){
13851                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
13852                    cls = "x-tree-drag-insert-above";
13853                }else if(pt == "below"){
13854                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
13855                    cls = "x-tree-drag-insert-below";
13856                }else{
13857                    returnCls = "x-tree-drop-ok-append";
13858                    cls = "x-tree-drag-append";
13859                }
13860                if(this.lastInsertClass != cls){
13861                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
13862                    this.lastInsertClass = cls;
13863                }
13864            }
13865        }
13866        return returnCls;
13867     },
13868     
13869     onNodeOut : function(n, dd, e, data){
13870         
13871         this.cancelExpand();
13872         this.removeDropIndicators(n);
13873     },
13874     
13875     onNodeDrop : function(n, dd, e, data){
13876         var point = this.getDropPoint(e, n, dd);
13877         var targetNode = n.node;
13878         targetNode.ui.startDrop();
13879         if(!this.isValidDropPoint(n, point, dd, e, data)){
13880             targetNode.ui.endDrop();
13881             return false;
13882         }
13883         // first try to find the drop node
13884         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
13885         var dropEvent = {
13886             tree : this.tree,
13887             target: targetNode,
13888             data: data,
13889             point: point,
13890             source: dd,
13891             rawEvent: e,
13892             dropNode: dropNode,
13893             cancel: !dropNode   
13894         };
13895         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
13896         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
13897             targetNode.ui.endDrop();
13898             return false;
13899         }
13900         // allow target changing
13901         targetNode = dropEvent.target;
13902         if(point == "append" && !targetNode.isExpanded()){
13903             targetNode.expand(false, null, function(){
13904                 this.completeDrop(dropEvent);
13905             }.createDelegate(this));
13906         }else{
13907             this.completeDrop(dropEvent);
13908         }
13909         return true;
13910     },
13911     
13912     completeDrop : function(de){
13913         var ns = de.dropNode, p = de.point, t = de.target;
13914         if(!(ns instanceof Array)){
13915             ns = [ns];
13916         }
13917         var n;
13918         for(var i = 0, len = ns.length; i < len; i++){
13919             n = ns[i];
13920             if(p == "above"){
13921                 t.parentNode.insertBefore(n, t);
13922             }else if(p == "below"){
13923                 t.parentNode.insertBefore(n, t.nextSibling);
13924             }else{
13925                 t.appendChild(n);
13926             }
13927         }
13928         n.ui.focus();
13929         if(this.tree.hlDrop){
13930             n.ui.highlight();
13931         }
13932         t.ui.endDrop();
13933         this.tree.fireEvent("nodedrop", de);
13934     },
13935     
13936     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
13937         if(this.tree.hlDrop){
13938             dropNode.ui.focus();
13939             dropNode.ui.highlight();
13940         }
13941         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
13942     },
13943     
13944     getTree : function(){
13945         return this.tree;
13946     },
13947     
13948     removeDropIndicators : function(n){
13949         if(n && n.ddel){
13950             var el = n.ddel;
13951             Roo.fly(el).removeClass([
13952                     "x-tree-drag-insert-above",
13953                     "x-tree-drag-insert-below",
13954                     "x-tree-drag-append"]);
13955             this.lastInsertClass = "_noclass";
13956         }
13957     },
13958     
13959     beforeDragDrop : function(target, e, id){
13960         this.cancelExpand();
13961         return true;
13962     },
13963     
13964     afterRepair : function(data){
13965         if(data && Roo.enableFx){
13966             data.node.ui.highlight();
13967         }
13968         this.hideProxy();
13969     } 
13970     
13971 });
13972
13973 }
13974 /*
13975  * Based on:
13976  * Ext JS Library 1.1.1
13977  * Copyright(c) 2006-2007, Ext JS, LLC.
13978  *
13979  * Originally Released Under LGPL - original licence link has changed is not relivant.
13980  *
13981  * Fork - LGPL
13982  * <script type="text/javascript">
13983  */
13984  
13985
13986 if(Roo.dd.DragZone){
13987 Roo.tree.TreeDragZone = function(tree, config){
13988     Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
13989     this.tree = tree;
13990 };
13991
13992 Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
13993     ddGroup : "TreeDD",
13994    
13995     onBeforeDrag : function(data, e){
13996         var n = data.node;
13997         return n && n.draggable && !n.disabled;
13998     },
13999      
14000     
14001     onInitDrag : function(e){
14002         var data = this.dragData;
14003         this.tree.getSelectionModel().select(data.node);
14004         this.proxy.update("");
14005         data.node.ui.appendDDGhost(this.proxy.ghost.dom);
14006         this.tree.fireEvent("startdrag", this.tree, data.node, e);
14007     },
14008     
14009     getRepairXY : function(e, data){
14010         return data.node.ui.getDDRepairXY();
14011     },
14012     
14013     onEndDrag : function(data, e){
14014         this.tree.fireEvent("enddrag", this.tree, data.node, e);
14015         
14016         
14017     },
14018     
14019     onValidDrop : function(dd, e, id){
14020         this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
14021         this.hideProxy();
14022     },
14023     
14024     beforeInvalidDrop : function(e, id){
14025         // this scrolls the original position back into view
14026         var sm = this.tree.getSelectionModel();
14027         sm.clearSelections();
14028         sm.select(this.dragData.node);
14029     }
14030 });
14031 }/*
14032  * Based on:
14033  * Ext JS Library 1.1.1
14034  * Copyright(c) 2006-2007, Ext JS, LLC.
14035  *
14036  * Originally Released Under LGPL - original licence link has changed is not relivant.
14037  *
14038  * Fork - LGPL
14039  * <script type="text/javascript">
14040  */
14041 /**
14042  * @class Roo.tree.TreeEditor
14043  * @extends Roo.Editor
14044  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
14045  * as the editor field.
14046  * @constructor
14047  * @param {Object} config (used to be the tree panel.)
14048  * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
14049  * 
14050  * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
14051  * @cfg {Roo.form.TextField} field [required] The field configuration
14052  *
14053  * 
14054  */
14055 Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
14056     var tree = config;
14057     var field;
14058     if (oldconfig) { // old style..
14059         field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
14060     } else {
14061         // new style..
14062         tree = config.tree;
14063         config.field = config.field  || {};
14064         config.field.xtype = 'TextField';
14065         field = Roo.factory(config.field, Roo.form);
14066     }
14067     config = config || {};
14068     
14069     
14070     this.addEvents({
14071         /**
14072          * @event beforenodeedit
14073          * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
14074          * false from the handler of this event.
14075          * @param {Editor} this
14076          * @param {Roo.tree.Node} node 
14077          */
14078         "beforenodeedit" : true
14079     });
14080     
14081     //Roo.log(config);
14082     Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
14083
14084     this.tree = tree;
14085
14086     tree.on('beforeclick', this.beforeNodeClick, this);
14087     tree.getTreeEl().on('mousedown', this.hide, this);
14088     this.on('complete', this.updateNode, this);
14089     this.on('beforestartedit', this.fitToTree, this);
14090     this.on('startedit', this.bindScroll, this, {delay:10});
14091     this.on('specialkey', this.onSpecialKey, this);
14092 };
14093
14094 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
14095     /**
14096      * @cfg {String} alignment
14097      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
14098      */
14099     alignment: "l-l",
14100     // inherit
14101     autoSize: false,
14102     /**
14103      * @cfg {Boolean} hideEl
14104      * True to hide the bound element while the editor is displayed (defaults to false)
14105      */
14106     hideEl : false,
14107     /**
14108      * @cfg {String} cls
14109      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
14110      */
14111     cls: "x-small-editor x-tree-editor",
14112     /**
14113      * @cfg {Boolean} shim
14114      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
14115      */
14116     shim:false,
14117     // inherit
14118     shadow:"frame",
14119     /**
14120      * @cfg {Number} maxWidth
14121      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
14122      * the containing tree element's size, it will be automatically limited for you to the container width, taking
14123      * scroll and client offsets into account prior to each edit.
14124      */
14125     maxWidth: 250,
14126
14127     editDelay : 350,
14128
14129     // private
14130     fitToTree : function(ed, el){
14131         var td = this.tree.getTreeEl().dom, nd = el.dom;
14132         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
14133             td.scrollLeft = nd.offsetLeft;
14134         }
14135         var w = Math.min(
14136                 this.maxWidth,
14137                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
14138         this.setSize(w, '');
14139         
14140         return this.fireEvent('beforenodeedit', this, this.editNode);
14141         
14142     },
14143
14144     // private
14145     triggerEdit : function(node){
14146         this.completeEdit();
14147         this.editNode = node;
14148         this.startEdit(node.ui.textNode, node.text);
14149     },
14150
14151     // private
14152     bindScroll : function(){
14153         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
14154     },
14155
14156     // private
14157     beforeNodeClick : function(node, e){
14158         var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
14159         this.lastClick = new Date();
14160         if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
14161             e.stopEvent();
14162             this.triggerEdit(node);
14163             return false;
14164         }
14165         return true;
14166     },
14167
14168     // private
14169     updateNode : function(ed, value){
14170         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
14171         this.editNode.setText(value);
14172     },
14173
14174     // private
14175     onHide : function(){
14176         Roo.tree.TreeEditor.superclass.onHide.call(this);
14177         if(this.editNode){
14178             this.editNode.ui.focus();
14179         }
14180     },
14181
14182     // private
14183     onSpecialKey : function(field, e){
14184         var k = e.getKey();
14185         if(k == e.ESC){
14186             e.stopEvent();
14187             this.cancelEdit();
14188         }else if(k == e.ENTER && !e.hasModifier()){
14189             e.stopEvent();
14190             this.completeEdit();
14191         }
14192     }
14193 });//<Script type="text/javascript">
14194 /*
14195  * Based on:
14196  * Ext JS Library 1.1.1
14197  * Copyright(c) 2006-2007, Ext JS, LLC.
14198  *
14199  * Originally Released Under LGPL - original licence link has changed is not relivant.
14200  *
14201  * Fork - LGPL
14202  * <script type="text/javascript">
14203  */
14204  
14205 /**
14206  * Not documented??? - probably should be...
14207  */
14208
14209 Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
14210     //focus: Roo.emptyFn, // prevent odd scrolling behavior
14211     
14212     renderElements : function(n, a, targetNode, bulkRender){
14213         //consel.log("renderElements?");
14214         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
14215
14216         var t = n.getOwnerTree();
14217         var tid = Pman.Tab.Document_TypesTree.tree.el.id;
14218         
14219         var cols = t.columns;
14220         var bw = t.borderWidth;
14221         var c = cols[0];
14222         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
14223          var cb = typeof a.checked == "boolean";
14224         var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
14225         var colcls = 'x-t-' + tid + '-c0';
14226         var buf = [
14227             '<li class="x-tree-node">',
14228             
14229                 
14230                 '<div class="x-tree-node-el ', a.cls,'">',
14231                     // extran...
14232                     '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
14233                 
14234                 
14235                         '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
14236                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
14237                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
14238                            (a.icon ? ' x-tree-node-inline-icon' : ''),
14239                            (a.iconCls ? ' '+a.iconCls : ''),
14240                            '" unselectable="on" />',
14241                         (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
14242                              (a.checked ? 'checked="checked" />' : ' />')) : ''),
14243                              
14244                         '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
14245                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
14246                             '<span unselectable="on" qtip="' + tx + '">',
14247                              tx,
14248                              '</span></a>' ,
14249                     '</div>',
14250                      '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
14251                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
14252                  ];
14253         for(var i = 1, len = cols.length; i < len; i++){
14254             c = cols[i];
14255             colcls = 'x-t-' + tid + '-c' +i;
14256             tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
14257             buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
14258                         '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
14259                       "</div>");
14260          }
14261          
14262          buf.push(
14263             '</a>',
14264             '<div class="x-clear"></div></div>',
14265             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
14266             "</li>");
14267         
14268         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
14269             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
14270                                 n.nextSibling.ui.getEl(), buf.join(""));
14271         }else{
14272             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
14273         }
14274         var el = this.wrap.firstChild;
14275         this.elRow = el;
14276         this.elNode = el.firstChild;
14277         this.ranchor = el.childNodes[1];
14278         this.ctNode = this.wrap.childNodes[1];
14279         var cs = el.firstChild.childNodes;
14280         this.indentNode = cs[0];
14281         this.ecNode = cs[1];
14282         this.iconNode = cs[2];
14283         var index = 3;
14284         if(cb){
14285             this.checkbox = cs[3];
14286             index++;
14287         }
14288         this.anchor = cs[index];
14289         
14290         this.textNode = cs[index].firstChild;
14291         
14292         //el.on("click", this.onClick, this);
14293         //el.on("dblclick", this.onDblClick, this);
14294         
14295         
14296        // console.log(this);
14297     },
14298     initEvents : function(){
14299         Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
14300         
14301             
14302         var a = this.ranchor;
14303
14304         var el = Roo.get(a);
14305
14306         if(Roo.isOpera){ // opera render bug ignores the CSS
14307             el.setStyle("text-decoration", "none");
14308         }
14309
14310         el.on("click", this.onClick, this);
14311         el.on("dblclick", this.onDblClick, this);
14312         el.on("contextmenu", this.onContextMenu, this);
14313         
14314     },
14315     
14316     /*onSelectedChange : function(state){
14317         if(state){
14318             this.focus();
14319             this.addClass("x-tree-selected");
14320         }else{
14321             //this.blur();
14322             this.removeClass("x-tree-selected");
14323         }
14324     },*/
14325     addClass : function(cls){
14326         if(this.elRow){
14327             Roo.fly(this.elRow).addClass(cls);
14328         }
14329         
14330     },
14331     
14332     
14333     removeClass : function(cls){
14334         if(this.elRow){
14335             Roo.fly(this.elRow).removeClass(cls);
14336         }
14337     }
14338
14339     
14340     
14341 });//<Script type="text/javascript">
14342
14343 /*
14344  * Based on:
14345  * Ext JS Library 1.1.1
14346  * Copyright(c) 2006-2007, Ext JS, LLC.
14347  *
14348  * Originally Released Under LGPL - original licence link has changed is not relivant.
14349  *
14350  * Fork - LGPL
14351  * <script type="text/javascript">
14352  */
14353  
14354
14355 /**
14356  * @class Roo.tree.ColumnTree
14357  * @extends Roo.tree.TreePanel
14358  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
14359  * @cfg {int} borderWidth  compined right/left border allowance
14360  * @constructor
14361  * @param {String/HTMLElement/Element} el The container element
14362  * @param {Object} config
14363  */
14364 Roo.tree.ColumnTree =  function(el, config)
14365 {
14366    Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
14367    this.addEvents({
14368         /**
14369         * @event resize
14370         * Fire this event on a container when it resizes
14371         * @param {int} w Width
14372         * @param {int} h Height
14373         */
14374        "resize" : true
14375     });
14376     this.on('resize', this.onResize, this);
14377 };
14378
14379 Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
14380     //lines:false,
14381     
14382     
14383     borderWidth: Roo.isBorderBox ? 0 : 2, 
14384     headEls : false,
14385     
14386     render : function(){
14387         // add the header.....
14388        
14389         Roo.tree.ColumnTree.superclass.render.apply(this);
14390         
14391         this.el.addClass('x-column-tree');
14392         
14393         this.headers = this.el.createChild(
14394             {cls:'x-tree-headers'},this.innerCt.dom);
14395    
14396         var cols = this.columns, c;
14397         var totalWidth = 0;
14398         this.headEls = [];
14399         var  len = cols.length;
14400         for(var i = 0; i < len; i++){
14401              c = cols[i];
14402              totalWidth += c.width;
14403             this.headEls.push(this.headers.createChild({
14404                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
14405                  cn: {
14406                      cls:'x-tree-hd-text',
14407                      html: c.header
14408                  },
14409                  style:'width:'+(c.width-this.borderWidth)+'px;'
14410              }));
14411         }
14412         this.headers.createChild({cls:'x-clear'});
14413         // prevent floats from wrapping when clipped
14414         this.headers.setWidth(totalWidth);
14415         //this.innerCt.setWidth(totalWidth);
14416         this.innerCt.setStyle({ overflow: 'auto' });
14417         this.onResize(this.width, this.height);
14418              
14419         
14420     },
14421     onResize : function(w,h)
14422     {
14423         this.height = h;
14424         this.width = w;
14425         // resize cols..
14426         this.innerCt.setWidth(this.width);
14427         this.innerCt.setHeight(this.height-20);
14428         
14429         // headers...
14430         var cols = this.columns, c;
14431         var totalWidth = 0;
14432         var expEl = false;
14433         var len = cols.length;
14434         for(var i = 0; i < len; i++){
14435             c = cols[i];
14436             if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
14437                 // it's the expander..
14438                 expEl  = this.headEls[i];
14439                 continue;
14440             }
14441             totalWidth += c.width;
14442             
14443         }
14444         if (expEl) {
14445             expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
14446         }
14447         this.headers.setWidth(w-20);
14448
14449         
14450         
14451         
14452     }
14453 });
14454 /*
14455  * Based on:
14456  * Ext JS Library 1.1.1
14457  * Copyright(c) 2006-2007, Ext JS, LLC.
14458  *
14459  * Originally Released Under LGPL - original licence link has changed is not relivant.
14460  *
14461  * Fork - LGPL
14462  * <script type="text/javascript">
14463  */
14464  
14465 /**
14466  * @class Roo.menu.Menu
14467  * @extends Roo.util.Observable
14468  * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
14469  * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
14470  * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
14471  * @constructor
14472  * Creates a new Menu
14473  * @param {Object} config Configuration options
14474  */
14475 Roo.menu.Menu = function(config){
14476     
14477     Roo.menu.Menu.superclass.constructor.call(this, config);
14478     
14479     this.id = this.id || Roo.id();
14480     this.addEvents({
14481         /**
14482          * @event beforeshow
14483          * Fires before this menu is displayed
14484          * @param {Roo.menu.Menu} this
14485          */
14486         beforeshow : true,
14487         /**
14488          * @event beforehide
14489          * Fires before this menu is hidden
14490          * @param {Roo.menu.Menu} this
14491          */
14492         beforehide : true,
14493         /**
14494          * @event show
14495          * Fires after this menu is displayed
14496          * @param {Roo.menu.Menu} this
14497          */
14498         show : true,
14499         /**
14500          * @event hide
14501          * Fires after this menu is hidden
14502          * @param {Roo.menu.Menu} this
14503          */
14504         hide : true,
14505         /**
14506          * @event click
14507          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
14508          * @param {Roo.menu.Menu} this
14509          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14510          * @param {Roo.EventObject} e
14511          */
14512         click : true,
14513         /**
14514          * @event mouseover
14515          * Fires when the mouse is hovering over this menu
14516          * @param {Roo.menu.Menu} this
14517          * @param {Roo.EventObject} e
14518          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14519          */
14520         mouseover : true,
14521         /**
14522          * @event mouseout
14523          * Fires when the mouse exits this menu
14524          * @param {Roo.menu.Menu} this
14525          * @param {Roo.EventObject} e
14526          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14527          */
14528         mouseout : true,
14529         /**
14530          * @event itemclick
14531          * Fires when a menu item contained in this menu is clicked
14532          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
14533          * @param {Roo.EventObject} e
14534          */
14535         itemclick: true
14536     });
14537     if (this.registerMenu) {
14538         Roo.menu.MenuMgr.register(this);
14539     }
14540     
14541     var mis = this.items;
14542     this.items = new Roo.util.MixedCollection();
14543     if(mis){
14544         this.add.apply(this, mis);
14545     }
14546 };
14547
14548 Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
14549     /**
14550      * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
14551      */
14552     minWidth : 120,
14553     /**
14554      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
14555      * for bottom-right shadow (defaults to "sides")
14556      */
14557     shadow : "sides",
14558     /**
14559      * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
14560      * this menu (defaults to "tl-tr?")
14561      */
14562     subMenuAlign : "tl-tr?",
14563     /**
14564      * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
14565      * relative to its element of origin (defaults to "tl-bl?")
14566      */
14567     defaultAlign : "tl-bl?",
14568     /**
14569      * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
14570      */
14571     allowOtherMenus : false,
14572     /**
14573      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
14574      */
14575     registerMenu : true,
14576
14577     hidden:true,
14578
14579     // private
14580     render : function(){
14581         if(this.el){
14582             return;
14583         }
14584         var el = this.el = new Roo.Layer({
14585             cls: "x-menu",
14586             shadow:this.shadow,
14587             constrain: false,
14588             parentEl: this.parentEl || document.body,
14589             zindex:15000
14590         });
14591
14592         this.keyNav = new Roo.menu.MenuNav(this);
14593
14594         if(this.plain){
14595             el.addClass("x-menu-plain");
14596         }
14597         if(this.cls){
14598             el.addClass(this.cls);
14599         }
14600         // generic focus element
14601         this.focusEl = el.createChild({
14602             tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
14603         });
14604         var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
14605         //disabling touch- as it's causing issues ..
14606         //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
14607         ul.on('click'   , this.onClick, this);
14608         
14609         
14610         ul.on("mouseover", this.onMouseOver, this);
14611         ul.on("mouseout", this.onMouseOut, this);
14612         this.items.each(function(item){
14613             if (item.hidden) {
14614                 return;
14615             }
14616             
14617             var li = document.createElement("li");
14618             li.className = "x-menu-list-item";
14619             ul.dom.appendChild(li);
14620             item.render(li, this);
14621         }, this);
14622         this.ul = ul;
14623         this.autoWidth();
14624     },
14625
14626     // private
14627     autoWidth : function(){
14628         var el = this.el, ul = this.ul;
14629         if(!el){
14630             return;
14631         }
14632         var w = this.width;
14633         if(w){
14634             el.setWidth(w);
14635         }else if(Roo.isIE){
14636             el.setWidth(this.minWidth);
14637             var t = el.dom.offsetWidth; // force recalc
14638             el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
14639         }
14640     },
14641
14642     // private
14643     delayAutoWidth : function(){
14644         if(this.rendered){
14645             if(!this.awTask){
14646                 this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
14647             }
14648             this.awTask.delay(20);
14649         }
14650     },
14651
14652     // private
14653     findTargetItem : function(e){
14654         var t = e.getTarget(".x-menu-list-item", this.ul,  true);
14655         if(t && t.menuItemId){
14656             return this.items.get(t.menuItemId);
14657         }
14658     },
14659
14660     // private
14661     onClick : function(e){
14662         Roo.log("menu.onClick");
14663         var t = this.findTargetItem(e);
14664         if(!t){
14665             return;
14666         }
14667         Roo.log(e);
14668         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
14669             if(t == this.activeItem && t.shouldDeactivate(e)){
14670                 this.activeItem.deactivate();
14671                 delete this.activeItem;
14672                 return;
14673             }
14674             if(t.canActivate){
14675                 this.setActiveItem(t, true);
14676             }
14677             return;
14678             
14679             
14680         }
14681         
14682         t.onClick(e);
14683         this.fireEvent("click", this, t, e);
14684     },
14685
14686     // private
14687     setActiveItem : function(item, autoExpand){
14688         if(item != this.activeItem){
14689             if(this.activeItem){
14690                 this.activeItem.deactivate();
14691             }
14692             this.activeItem = item;
14693             item.activate(autoExpand);
14694         }else if(autoExpand){
14695             item.expandMenu();
14696         }
14697     },
14698
14699     // private
14700     tryActivate : function(start, step){
14701         var items = this.items;
14702         for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
14703             var item = items.get(i);
14704             if(!item.disabled && item.canActivate){
14705                 this.setActiveItem(item, false);
14706                 return item;
14707             }
14708         }
14709         return false;
14710     },
14711
14712     // private
14713     onMouseOver : function(e){
14714         var t;
14715         if(t = this.findTargetItem(e)){
14716             if(t.canActivate && !t.disabled){
14717                 this.setActiveItem(t, true);
14718             }
14719         }
14720         this.fireEvent("mouseover", this, e, t);
14721     },
14722
14723     // private
14724     onMouseOut : function(e){
14725         var t;
14726         if(t = this.findTargetItem(e)){
14727             if(t == this.activeItem && t.shouldDeactivate(e)){
14728                 this.activeItem.deactivate();
14729                 delete this.activeItem;
14730             }
14731         }
14732         this.fireEvent("mouseout", this, e, t);
14733     },
14734
14735     /**
14736      * Read-only.  Returns true if the menu is currently displayed, else false.
14737      * @type Boolean
14738      */
14739     isVisible : function(){
14740         return this.el && !this.hidden;
14741     },
14742
14743     /**
14744      * Displays this menu relative to another element
14745      * @param {String/HTMLElement/Roo.Element} element The element to align to
14746      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
14747      * the element (defaults to this.defaultAlign)
14748      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
14749      */
14750     show : function(el, pos, parentMenu){
14751         this.parentMenu = parentMenu;
14752         if(!this.el){
14753             this.render();
14754         }
14755         this.fireEvent("beforeshow", this);
14756         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
14757     },
14758
14759     /**
14760      * Displays this menu at a specific xy position
14761      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
14762      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
14763      */
14764     showAt : function(xy, parentMenu, /* private: */_e){
14765         this.parentMenu = parentMenu;
14766         if(!this.el){
14767             this.render();
14768         }
14769         if(_e !== false){
14770             this.fireEvent("beforeshow", this);
14771             xy = this.el.adjustForConstraints(xy);
14772         }
14773         this.el.setXY(xy);
14774         this.el.show();
14775         this.hidden = false;
14776         this.focus();
14777         this.fireEvent("show", this);
14778     },
14779
14780     focus : function(){
14781         if(!this.hidden){
14782             this.doFocus.defer(50, this);
14783         }
14784     },
14785
14786     doFocus : function(){
14787         if(!this.hidden){
14788             this.focusEl.focus();
14789         }
14790     },
14791
14792     /**
14793      * Hides this menu and optionally all parent menus
14794      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
14795      */
14796     hide : function(deep){
14797         if(this.el && this.isVisible()){
14798             this.fireEvent("beforehide", this);
14799             if(this.activeItem){
14800                 this.activeItem.deactivate();
14801                 this.activeItem = null;
14802             }
14803             this.el.hide();
14804             this.hidden = true;
14805             this.fireEvent("hide", this);
14806         }
14807         if(deep === true && this.parentMenu){
14808             this.parentMenu.hide(true);
14809         }
14810     },
14811
14812     /**
14813      * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
14814      * Any of the following are valid:
14815      * <ul>
14816      * <li>Any menu item object based on {@link Roo.menu.Item}</li>
14817      * <li>An HTMLElement object which will be converted to a menu item</li>
14818      * <li>A menu item config object that will be created as a new menu item</li>
14819      * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
14820      * it will be converted into a {@link Roo.menu.TextItem} and added</li>
14821      * </ul>
14822      * Usage:
14823      * <pre><code>
14824 // Create the menu
14825 var menu = new Roo.menu.Menu();
14826
14827 // Create a menu item to add by reference
14828 var menuItem = new Roo.menu.Item({ text: 'New Item!' });
14829
14830 // Add a bunch of items at once using different methods.
14831 // Only the last item added will be returned.
14832 var item = menu.add(
14833     menuItem,                // add existing item by ref
14834     'Dynamic Item',          // new TextItem
14835     '-',                     // new separator
14836     { text: 'Config Item' }  // new item by config
14837 );
14838 </code></pre>
14839      * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
14840      * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
14841      */
14842     add : function(){
14843         var a = arguments, l = a.length, item;
14844         for(var i = 0; i < l; i++){
14845             var el = a[i];
14846             if ((typeof(el) == "object") && el.xtype && el.xns) {
14847                 el = Roo.factory(el, Roo.menu);
14848             }
14849             
14850             if(el.render){ // some kind of Item
14851                 item = this.addItem(el);
14852             }else if(typeof el == "string"){ // string
14853                 if(el == "separator" || el == "-"){
14854                     item = this.addSeparator();
14855                 }else{
14856                     item = this.addText(el);
14857                 }
14858             }else if(el.tagName || el.el){ // element
14859                 item = this.addElement(el);
14860             }else if(typeof el == "object"){ // must be menu item config?
14861                 item = this.addMenuItem(el);
14862             }
14863         }
14864         return item;
14865     },
14866
14867     /**
14868      * Returns this menu's underlying {@link Roo.Element} object
14869      * @return {Roo.Element} The element
14870      */
14871     getEl : function(){
14872         if(!this.el){
14873             this.render();
14874         }
14875         return this.el;
14876     },
14877
14878     /**
14879      * Adds a separator bar to the menu
14880      * @return {Roo.menu.Item} The menu item that was added
14881      */
14882     addSeparator : function(){
14883         return this.addItem(new Roo.menu.Separator());
14884     },
14885
14886     /**
14887      * Adds an {@link Roo.Element} object to the menu
14888      * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
14889      * @return {Roo.menu.Item} The menu item that was added
14890      */
14891     addElement : function(el){
14892         return this.addItem(new Roo.menu.BaseItem(el));
14893     },
14894
14895     /**
14896      * Adds an existing object based on {@link Roo.menu.Item} to the menu
14897      * @param {Roo.menu.Item} item The menu item to add
14898      * @return {Roo.menu.Item} The menu item that was added
14899      */
14900     addItem : function(item){
14901         this.items.add(item);
14902         if(this.ul){
14903             var li = document.createElement("li");
14904             li.className = "x-menu-list-item";
14905             this.ul.dom.appendChild(li);
14906             item.render(li, this);
14907             this.delayAutoWidth();
14908         }
14909         return item;
14910     },
14911
14912     /**
14913      * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
14914      * @param {Object} config A MenuItem config object
14915      * @return {Roo.menu.Item} The menu item that was added
14916      */
14917     addMenuItem : function(config){
14918         if(!(config instanceof Roo.menu.Item)){
14919             if(typeof config.checked == "boolean"){ // must be check menu item config?
14920                 config = new Roo.menu.CheckItem(config);
14921             }else{
14922                 config = new Roo.menu.Item(config);
14923             }
14924         }
14925         return this.addItem(config);
14926     },
14927
14928     /**
14929      * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
14930      * @param {String} text The text to display in the menu item
14931      * @return {Roo.menu.Item} The menu item that was added
14932      */
14933     addText : function(text){
14934         return this.addItem(new Roo.menu.TextItem({ text : text }));
14935     },
14936
14937     /**
14938      * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
14939      * @param {Number} index The index in the menu's list of current items where the new item should be inserted
14940      * @param {Roo.menu.Item} item The menu item to add
14941      * @return {Roo.menu.Item} The menu item that was added
14942      */
14943     insert : function(index, item){
14944         this.items.insert(index, item);
14945         if(this.ul){
14946             var li = document.createElement("li");
14947             li.className = "x-menu-list-item";
14948             this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
14949             item.render(li, this);
14950             this.delayAutoWidth();
14951         }
14952         return item;
14953     },
14954
14955     /**
14956      * Removes an {@link Roo.menu.Item} from the menu and destroys the object
14957      * @param {Roo.menu.Item} item The menu item to remove
14958      */
14959     remove : function(item){
14960         this.items.removeKey(item.id);
14961         item.destroy();
14962     },
14963
14964     /**
14965      * Removes and destroys all items in the menu
14966      */
14967     removeAll : function(){
14968         var f;
14969         while(f = this.items.first()){
14970             this.remove(f);
14971         }
14972     }
14973 });
14974
14975 // MenuNav is a private utility class used internally by the Menu
14976 Roo.menu.MenuNav = function(menu){
14977     Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
14978     this.scope = this.menu = menu;
14979 };
14980
14981 Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
14982     doRelay : function(e, h){
14983         var k = e.getKey();
14984         if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
14985             this.menu.tryActivate(0, 1);
14986             return false;
14987         }
14988         return h.call(this.scope || this, e, this.menu);
14989     },
14990
14991     up : function(e, m){
14992         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
14993             m.tryActivate(m.items.length-1, -1);
14994         }
14995     },
14996
14997     down : function(e, m){
14998         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
14999             m.tryActivate(0, 1);
15000         }
15001     },
15002
15003     right : function(e, m){
15004         if(m.activeItem){
15005             m.activeItem.expandMenu(true);
15006         }
15007     },
15008
15009     left : function(e, m){
15010         m.hide();
15011         if(m.parentMenu && m.parentMenu.activeItem){
15012             m.parentMenu.activeItem.activate();
15013         }
15014     },
15015
15016     enter : function(e, m){
15017         if(m.activeItem){
15018             e.stopPropagation();
15019             m.activeItem.onClick(e);
15020             m.fireEvent("click", this, m.activeItem);
15021             return true;
15022         }
15023     }
15024 });/*
15025  * Based on:
15026  * Ext JS Library 1.1.1
15027  * Copyright(c) 2006-2007, Ext JS, LLC.
15028  *
15029  * Originally Released Under LGPL - original licence link has changed is not relivant.
15030  *
15031  * Fork - LGPL
15032  * <script type="text/javascript">
15033  */
15034  
15035 /**
15036  * @class Roo.menu.MenuMgr
15037  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
15038  * @static
15039  */
15040 Roo.menu.MenuMgr = function(){
15041    var menus, active, groups = {}, attached = false, lastShow = new Date();
15042
15043    // private - called when first menu is created
15044    function init(){
15045        menus = {};
15046        active = new Roo.util.MixedCollection();
15047        Roo.get(document).addKeyListener(27, function(){
15048            if(active.length > 0){
15049                hideAll();
15050            }
15051        });
15052    }
15053
15054    // private
15055    function hideAll(){
15056        if(active && active.length > 0){
15057            var c = active.clone();
15058            c.each(function(m){
15059                m.hide();
15060            });
15061        }
15062    }
15063
15064    // private
15065    function onHide(m){
15066        active.remove(m);
15067        if(active.length < 1){
15068            Roo.get(document).un("mousedown", onMouseDown);
15069            attached = false;
15070        }
15071    }
15072
15073    // private
15074    function onShow(m){
15075        var last = active.last();
15076        lastShow = new Date();
15077        active.add(m);
15078        if(!attached){
15079            Roo.get(document).on("mousedown", onMouseDown);
15080            attached = true;
15081        }
15082        if(m.parentMenu){
15083           m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
15084           m.parentMenu.activeChild = m;
15085        }else if(last && last.isVisible()){
15086           m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
15087        }
15088    }
15089
15090    // private
15091    function onBeforeHide(m){
15092        if(m.activeChild){
15093            m.activeChild.hide();
15094        }
15095        if(m.autoHideTimer){
15096            clearTimeout(m.autoHideTimer);
15097            delete m.autoHideTimer;
15098        }
15099    }
15100
15101    // private
15102    function onBeforeShow(m){
15103        var pm = m.parentMenu;
15104        if(!pm && !m.allowOtherMenus){
15105            hideAll();
15106        }else if(pm && pm.activeChild && active != m){
15107            pm.activeChild.hide();
15108        }
15109    }
15110
15111    // private
15112    function onMouseDown(e){
15113        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
15114            hideAll();
15115        }
15116    }
15117
15118    // private
15119    function onBeforeCheck(mi, state){
15120        if(state){
15121            var g = groups[mi.group];
15122            for(var i = 0, l = g.length; i < l; i++){
15123                if(g[i] != mi){
15124                    g[i].setChecked(false);
15125                }
15126            }
15127        }
15128    }
15129
15130    return {
15131
15132        /**
15133         * Hides all menus that are currently visible
15134         */
15135        hideAll : function(){
15136             hideAll();  
15137        },
15138
15139        // private
15140        register : function(menu){
15141            if(!menus){
15142                init();
15143            }
15144            menus[menu.id] = menu;
15145            menu.on("beforehide", onBeforeHide);
15146            menu.on("hide", onHide);
15147            menu.on("beforeshow", onBeforeShow);
15148            menu.on("show", onShow);
15149            var g = menu.group;
15150            if(g && menu.events["checkchange"]){
15151                if(!groups[g]){
15152                    groups[g] = [];
15153                }
15154                groups[g].push(menu);
15155                menu.on("checkchange", onCheck);
15156            }
15157        },
15158
15159         /**
15160          * Returns a {@link Roo.menu.Menu} object
15161          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
15162          * be used to generate and return a new Menu instance.
15163          */
15164        get : function(menu){
15165            if(typeof menu == "string"){ // menu id
15166                return menus[menu];
15167            }else if(menu.events){  // menu instance
15168                return menu;
15169            }else if(typeof menu.length == 'number'){ // array of menu items?
15170                return new Roo.menu.Menu({items:menu});
15171            }else{ // otherwise, must be a config
15172                return new Roo.menu.Menu(menu);
15173            }
15174        },
15175
15176        // private
15177        unregister : function(menu){
15178            delete menus[menu.id];
15179            menu.un("beforehide", onBeforeHide);
15180            menu.un("hide", onHide);
15181            menu.un("beforeshow", onBeforeShow);
15182            menu.un("show", onShow);
15183            var g = menu.group;
15184            if(g && menu.events["checkchange"]){
15185                groups[g].remove(menu);
15186                menu.un("checkchange", onCheck);
15187            }
15188        },
15189
15190        // private
15191        registerCheckable : function(menuItem){
15192            var g = menuItem.group;
15193            if(g){
15194                if(!groups[g]){
15195                    groups[g] = [];
15196                }
15197                groups[g].push(menuItem);
15198                menuItem.on("beforecheckchange", onBeforeCheck);
15199            }
15200        },
15201
15202        // private
15203        unregisterCheckable : function(menuItem){
15204            var g = menuItem.group;
15205            if(g){
15206                groups[g].remove(menuItem);
15207                menuItem.un("beforecheckchange", onBeforeCheck);
15208            }
15209        }
15210    };
15211 }();/*
15212  * Based on:
15213  * Ext JS Library 1.1.1
15214  * Copyright(c) 2006-2007, Ext JS, LLC.
15215  *
15216  * Originally Released Under LGPL - original licence link has changed is not relivant.
15217  *
15218  * Fork - LGPL
15219  * <script type="text/javascript">
15220  */
15221  
15222
15223 /**
15224  * @class Roo.menu.BaseItem
15225  * @extends Roo.Component
15226  * @abstract
15227  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
15228  * management and base configuration options shared by all menu components.
15229  * @constructor
15230  * Creates a new BaseItem
15231  * @param {Object} config Configuration options
15232  */
15233 Roo.menu.BaseItem = function(config){
15234     Roo.menu.BaseItem.superclass.constructor.call(this, config);
15235
15236     this.addEvents({
15237         /**
15238          * @event click
15239          * Fires when this item is clicked
15240          * @param {Roo.menu.BaseItem} this
15241          * @param {Roo.EventObject} e
15242          */
15243         click: true,
15244         /**
15245          * @event activate
15246          * Fires when this item is activated
15247          * @param {Roo.menu.BaseItem} this
15248          */
15249         activate : true,
15250         /**
15251          * @event deactivate
15252          * Fires when this item is deactivated
15253          * @param {Roo.menu.BaseItem} this
15254          */
15255         deactivate : true
15256     });
15257
15258     if(this.handler){
15259         this.on("click", this.handler, this.scope, true);
15260     }
15261 };
15262
15263 Roo.extend(Roo.menu.BaseItem, Roo.Component, {
15264     /**
15265      * @cfg {Function} handler
15266      * A function that will handle the click event of this menu item (defaults to undefined)
15267      */
15268     /**
15269      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
15270      */
15271     canActivate : false,
15272     
15273      /**
15274      * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
15275      */
15276     hidden: false,
15277     
15278     /**
15279      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
15280      */
15281     activeClass : "x-menu-item-active",
15282     /**
15283      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
15284      */
15285     hideOnClick : true,
15286     /**
15287      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
15288      */
15289     hideDelay : 100,
15290
15291     // private
15292     ctype: "Roo.menu.BaseItem",
15293
15294     // private
15295     actionMode : "container",
15296
15297     // private
15298     render : function(container, parentMenu){
15299         this.parentMenu = parentMenu;
15300         Roo.menu.BaseItem.superclass.render.call(this, container);
15301         this.container.menuItemId = this.id;
15302     },
15303
15304     // private
15305     onRender : function(container, position){
15306         this.el = Roo.get(this.el);
15307         container.dom.appendChild(this.el.dom);
15308     },
15309
15310     // private
15311     onClick : function(e){
15312         if(!this.disabled && this.fireEvent("click", this, e) !== false
15313                 && this.parentMenu.fireEvent("itemclick", this, e) !== false){
15314             this.handleClick(e);
15315         }else{
15316             e.stopEvent();
15317         }
15318     },
15319
15320     // private
15321     activate : function(){
15322         if(this.disabled){
15323             return false;
15324         }
15325         var li = this.container;
15326         li.addClass(this.activeClass);
15327         this.region = li.getRegion().adjust(2, 2, -2, -2);
15328         this.fireEvent("activate", this);
15329         return true;
15330     },
15331
15332     // private
15333     deactivate : function(){
15334         this.container.removeClass(this.activeClass);
15335         this.fireEvent("deactivate", this);
15336     },
15337
15338     // private
15339     shouldDeactivate : function(e){
15340         return !this.region || !this.region.contains(e.getPoint());
15341     },
15342
15343     // private
15344     handleClick : function(e){
15345         if(this.hideOnClick){
15346             this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
15347         }
15348     },
15349
15350     // private
15351     expandMenu : function(autoActivate){
15352         // do nothing
15353     },
15354
15355     // private
15356     hideMenu : function(){
15357         // do nothing
15358     }
15359 });/*
15360  * Based on:
15361  * Ext JS Library 1.1.1
15362  * Copyright(c) 2006-2007, Ext JS, LLC.
15363  *
15364  * Originally Released Under LGPL - original licence link has changed is not relivant.
15365  *
15366  * Fork - LGPL
15367  * <script type="text/javascript">
15368  */
15369  
15370 /**
15371  * @class Roo.menu.Adapter
15372  * @extends Roo.menu.BaseItem
15373  * @abstract
15374  * 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.
15375  * It provides basic rendering, activation management and enable/disable logic required to work in menus.
15376  * @constructor
15377  * Creates a new Adapter
15378  * @param {Object} config Configuration options
15379  */
15380 Roo.menu.Adapter = function(component, config){
15381     Roo.menu.Adapter.superclass.constructor.call(this, config);
15382     this.component = component;
15383 };
15384 Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
15385     // private
15386     canActivate : true,
15387
15388     // private
15389     onRender : function(container, position){
15390         this.component.render(container);
15391         this.el = this.component.getEl();
15392     },
15393
15394     // private
15395     activate : function(){
15396         if(this.disabled){
15397             return false;
15398         }
15399         this.component.focus();
15400         this.fireEvent("activate", this);
15401         return true;
15402     },
15403
15404     // private
15405     deactivate : function(){
15406         this.fireEvent("deactivate", this);
15407     },
15408
15409     // private
15410     disable : function(){
15411         this.component.disable();
15412         Roo.menu.Adapter.superclass.disable.call(this);
15413     },
15414
15415     // private
15416     enable : function(){
15417         this.component.enable();
15418         Roo.menu.Adapter.superclass.enable.call(this);
15419     }
15420 });/*
15421  * Based on:
15422  * Ext JS Library 1.1.1
15423  * Copyright(c) 2006-2007, Ext JS, LLC.
15424  *
15425  * Originally Released Under LGPL - original licence link has changed is not relivant.
15426  *
15427  * Fork - LGPL
15428  * <script type="text/javascript">
15429  */
15430
15431 /**
15432  * @class Roo.menu.TextItem
15433  * @extends Roo.menu.BaseItem
15434  * Adds a static text string to a menu, usually used as either a heading or group separator.
15435  * Note: old style constructor with text is still supported.
15436  * 
15437  * @constructor
15438  * Creates a new TextItem
15439  * @param {Object} cfg Configuration
15440  */
15441 Roo.menu.TextItem = function(cfg){
15442     if (typeof(cfg) == 'string') {
15443         this.text = cfg;
15444     } else {
15445         Roo.apply(this,cfg);
15446     }
15447     
15448     Roo.menu.TextItem.superclass.constructor.call(this);
15449 };
15450
15451 Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
15452     /**
15453      * @cfg {String} text Text to show on item.
15454      */
15455     text : '',
15456     
15457     /**
15458      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
15459      */
15460     hideOnClick : false,
15461     /**
15462      * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
15463      */
15464     itemCls : "x-menu-text",
15465
15466     // private
15467     onRender : function(){
15468         var s = document.createElement("span");
15469         s.className = this.itemCls;
15470         s.innerHTML = this.text;
15471         this.el = s;
15472         Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
15473     }
15474 });/*
15475  * Based on:
15476  * Ext JS Library 1.1.1
15477  * Copyright(c) 2006-2007, Ext JS, LLC.
15478  *
15479  * Originally Released Under LGPL - original licence link has changed is not relivant.
15480  *
15481  * Fork - LGPL
15482  * <script type="text/javascript">
15483  */
15484
15485 /**
15486  * @class Roo.menu.Separator
15487  * @extends Roo.menu.BaseItem
15488  * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
15489  * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
15490  * @constructor
15491  * @param {Object} config Configuration options
15492  */
15493 Roo.menu.Separator = function(config){
15494     Roo.menu.Separator.superclass.constructor.call(this, config);
15495 };
15496
15497 Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
15498     /**
15499      * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
15500      */
15501     itemCls : "x-menu-sep",
15502     /**
15503      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
15504      */
15505     hideOnClick : false,
15506
15507     // private
15508     onRender : function(li){
15509         var s = document.createElement("span");
15510         s.className = this.itemCls;
15511         s.innerHTML = "&#160;";
15512         this.el = s;
15513         li.addClass("x-menu-sep-li");
15514         Roo.menu.Separator.superclass.onRender.apply(this, arguments);
15515     }
15516 });/*
15517  * Based on:
15518  * Ext JS Library 1.1.1
15519  * Copyright(c) 2006-2007, Ext JS, LLC.
15520  *
15521  * Originally Released Under LGPL - original licence link has changed is not relivant.
15522  *
15523  * Fork - LGPL
15524  * <script type="text/javascript">
15525  */
15526 /**
15527  * @class Roo.menu.Item
15528  * @extends Roo.menu.BaseItem
15529  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
15530  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
15531  * activation and click handling.
15532  * @constructor
15533  * Creates a new Item
15534  * @param {Object} config Configuration options
15535  */
15536 Roo.menu.Item = function(config){
15537     Roo.menu.Item.superclass.constructor.call(this, config);
15538     if(this.menu){
15539         this.menu = Roo.menu.MenuMgr.get(this.menu);
15540     }
15541 };
15542 Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
15543     /**
15544      * @cfg {Roo.menu.Menu} menu
15545      * A Sub menu
15546      */
15547     /**
15548      * @cfg {String} text
15549      * The text to show on the menu item.
15550      */
15551     text: '',
15552      /**
15553      * @cfg {String} html to render in menu
15554      * The text to show on the menu item (HTML version).
15555      */
15556     html: '',
15557     /**
15558      * @cfg {String} icon
15559      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
15560      */
15561     icon: undefined,
15562     /**
15563      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
15564      */
15565     itemCls : "x-menu-item",
15566     /**
15567      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
15568      */
15569     canActivate : true,
15570     /**
15571      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
15572      */
15573     showDelay: 200,
15574     // doc'd in BaseItem
15575     hideDelay: 200,
15576
15577     // private
15578     ctype: "Roo.menu.Item",
15579     
15580     // private
15581     onRender : function(container, position){
15582         var el = document.createElement("a");
15583         el.hideFocus = true;
15584         el.unselectable = "on";
15585         el.href = this.href || "#";
15586         if(this.hrefTarget){
15587             el.target = this.hrefTarget;
15588         }
15589         el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
15590         
15591         var html = this.html.length ? this.html  : String.format('{0}',this.text);
15592         
15593         el.innerHTML = String.format(
15594                 '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
15595                 this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
15596         this.el = el;
15597         Roo.menu.Item.superclass.onRender.call(this, container, position);
15598     },
15599
15600     /**
15601      * Sets the text to display in this menu item
15602      * @param {String} text The text to display
15603      * @param {Boolean} isHTML true to indicate text is pure html.
15604      */
15605     setText : function(text, isHTML){
15606         if (isHTML) {
15607             this.html = text;
15608         } else {
15609             this.text = text;
15610             this.html = '';
15611         }
15612         if(this.rendered){
15613             var html = this.html.length ? this.html  : String.format('{0}',this.text);
15614      
15615             this.el.update(String.format(
15616                 '<img src="{0}" class="x-menu-item-icon {2}">' + html,
15617                 this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
15618             this.parentMenu.autoWidth();
15619         }
15620     },
15621
15622     // private
15623     handleClick : function(e){
15624         if(!this.href){ // if no link defined, stop the event automatically
15625             e.stopEvent();
15626         }
15627         Roo.menu.Item.superclass.handleClick.apply(this, arguments);
15628     },
15629
15630     // private
15631     activate : function(autoExpand){
15632         if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
15633             this.focus();
15634             if(autoExpand){
15635                 this.expandMenu();
15636             }
15637         }
15638         return true;
15639     },
15640
15641     // private
15642     shouldDeactivate : function(e){
15643         if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
15644             if(this.menu && this.menu.isVisible()){
15645                 return !this.menu.getEl().getRegion().contains(e.getPoint());
15646             }
15647             return true;
15648         }
15649         return false;
15650     },
15651
15652     // private
15653     deactivate : function(){
15654         Roo.menu.Item.superclass.deactivate.apply(this, arguments);
15655         this.hideMenu();
15656     },
15657
15658     // private
15659     expandMenu : function(autoActivate){
15660         if(!this.disabled && this.menu){
15661             clearTimeout(this.hideTimer);
15662             delete this.hideTimer;
15663             if(!this.menu.isVisible() && !this.showTimer){
15664                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
15665             }else if (this.menu.isVisible() && autoActivate){
15666                 this.menu.tryActivate(0, 1);
15667             }
15668         }
15669     },
15670
15671     // private
15672     deferExpand : function(autoActivate){
15673         delete this.showTimer;
15674         this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
15675         if(autoActivate){
15676             this.menu.tryActivate(0, 1);
15677         }
15678     },
15679
15680     // private
15681     hideMenu : function(){
15682         clearTimeout(this.showTimer);
15683         delete this.showTimer;
15684         if(!this.hideTimer && this.menu && this.menu.isVisible()){
15685             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
15686         }
15687     },
15688
15689     // private
15690     deferHide : function(){
15691         delete this.hideTimer;
15692         this.menu.hide();
15693     }
15694 });/*
15695  * Based on:
15696  * Ext JS Library 1.1.1
15697  * Copyright(c) 2006-2007, Ext JS, LLC.
15698  *
15699  * Originally Released Under LGPL - original licence link has changed is not relivant.
15700  *
15701  * Fork - LGPL
15702  * <script type="text/javascript">
15703  */
15704  
15705 /**
15706  * @class Roo.menu.CheckItem
15707  * @extends Roo.menu.Item
15708  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
15709  * @constructor
15710  * Creates a new CheckItem
15711  * @param {Object} config Configuration options
15712  */
15713 Roo.menu.CheckItem = function(config){
15714     Roo.menu.CheckItem.superclass.constructor.call(this, config);
15715     this.addEvents({
15716         /**
15717          * @event beforecheckchange
15718          * Fires before the checked value is set, providing an opportunity to cancel if needed
15719          * @param {Roo.menu.CheckItem} this
15720          * @param {Boolean} checked The new checked value that will be set
15721          */
15722         "beforecheckchange" : true,
15723         /**
15724          * @event checkchange
15725          * Fires after the checked value has been set
15726          * @param {Roo.menu.CheckItem} this
15727          * @param {Boolean} checked The checked value that was set
15728          */
15729         "checkchange" : true
15730     });
15731     if(this.checkHandler){
15732         this.on('checkchange', this.checkHandler, this.scope);
15733     }
15734 };
15735 Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
15736     /**
15737      * @cfg {String} group
15738      * All check items with the same group name will automatically be grouped into a single-select
15739      * radio button group (defaults to '')
15740      */
15741     /**
15742      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
15743      */
15744     itemCls : "x-menu-item x-menu-check-item",
15745     /**
15746      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
15747      */
15748     groupClass : "x-menu-group-item",
15749
15750     /**
15751      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
15752      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
15753      * initialized with checked = true will be rendered as checked.
15754      */
15755     checked: false,
15756
15757     // private
15758     ctype: "Roo.menu.CheckItem",
15759
15760     // private
15761     onRender : function(c){
15762         Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
15763         if(this.group){
15764             this.el.addClass(this.groupClass);
15765         }
15766         Roo.menu.MenuMgr.registerCheckable(this);
15767         if(this.checked){
15768             this.checked = false;
15769             this.setChecked(true, true);
15770         }
15771     },
15772
15773     // private
15774     destroy : function(){
15775         if(this.rendered){
15776             Roo.menu.MenuMgr.unregisterCheckable(this);
15777         }
15778         Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
15779     },
15780
15781     /**
15782      * Set the checked state of this item
15783      * @param {Boolean} checked The new checked value
15784      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
15785      */
15786     setChecked : function(state, suppressEvent){
15787         if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
15788             if(this.container){
15789                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
15790             }
15791             this.checked = state;
15792             if(suppressEvent !== true){
15793                 this.fireEvent("checkchange", this, state);
15794             }
15795         }
15796     },
15797
15798     // private
15799     handleClick : function(e){
15800        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
15801            this.setChecked(!this.checked);
15802        }
15803        Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
15804     }
15805 });/*
15806  * Based on:
15807  * Ext JS Library 1.1.1
15808  * Copyright(c) 2006-2007, Ext JS, LLC.
15809  *
15810  * Originally Released Under LGPL - original licence link has changed is not relivant.
15811  *
15812  * Fork - LGPL
15813  * <script type="text/javascript">
15814  */
15815  
15816 /**
15817  * @class Roo.menu.DateItem
15818  * @extends Roo.menu.Adapter
15819  * A menu item that wraps the {@link Roo.DatPicker} component.
15820  * @constructor
15821  * Creates a new DateItem
15822  * @param {Object} config Configuration options
15823  */
15824 Roo.menu.DateItem = function(config){
15825     Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
15826     /** The Roo.DatePicker object @type Roo.DatePicker */
15827     this.picker = this.component;
15828     this.addEvents({select: true});
15829     
15830     this.picker.on("render", function(picker){
15831         picker.getEl().swallowEvent("click");
15832         picker.container.addClass("x-menu-date-item");
15833     });
15834
15835     this.picker.on("select", this.onSelect, this);
15836 };
15837
15838 Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
15839     // private
15840     onSelect : function(picker, date){
15841         this.fireEvent("select", this, date, picker);
15842         Roo.menu.DateItem.superclass.handleClick.call(this);
15843     }
15844 });/*
15845  * Based on:
15846  * Ext JS Library 1.1.1
15847  * Copyright(c) 2006-2007, Ext JS, LLC.
15848  *
15849  * Originally Released Under LGPL - original licence link has changed is not relivant.
15850  *
15851  * Fork - LGPL
15852  * <script type="text/javascript">
15853  */
15854  
15855 /**
15856  * @class Roo.menu.ColorItem
15857  * @extends Roo.menu.Adapter
15858  * A menu item that wraps the {@link Roo.ColorPalette} component.
15859  * @constructor
15860  * Creates a new ColorItem
15861  * @param {Object} config Configuration options
15862  */
15863 Roo.menu.ColorItem = function(config){
15864     Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
15865     /** The Roo.ColorPalette object @type Roo.ColorPalette */
15866     this.palette = this.component;
15867     this.relayEvents(this.palette, ["select"]);
15868     if(this.selectHandler){
15869         this.on('select', this.selectHandler, this.scope);
15870     }
15871 };
15872 Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
15873  * Based on:
15874  * Ext JS Library 1.1.1
15875  * Copyright(c) 2006-2007, Ext JS, LLC.
15876  *
15877  * Originally Released Under LGPL - original licence link has changed is not relivant.
15878  *
15879  * Fork - LGPL
15880  * <script type="text/javascript">
15881  */
15882  
15883
15884 /**
15885  * @class Roo.menu.DateMenu
15886  * @extends Roo.menu.Menu
15887  * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
15888  * @constructor
15889  * Creates a new DateMenu
15890  * @param {Object} config Configuration options
15891  */
15892 Roo.menu.DateMenu = function(config){
15893     Roo.menu.DateMenu.superclass.constructor.call(this, config);
15894     this.plain = true;
15895     var di = new Roo.menu.DateItem(config);
15896     this.add(di);
15897     /**
15898      * The {@link Roo.DatePicker} instance for this DateMenu
15899      * @type DatePicker
15900      */
15901     this.picker = di.picker;
15902     /**
15903      * @event select
15904      * @param {DatePicker} picker
15905      * @param {Date} date
15906      */
15907     this.relayEvents(di, ["select"]);
15908     this.on('beforeshow', function(){
15909         if(this.picker){
15910             this.picker.hideMonthPicker(false);
15911         }
15912     }, this);
15913 };
15914 Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
15915     cls:'x-date-menu'
15916 });/*
15917  * Based on:
15918  * Ext JS Library 1.1.1
15919  * Copyright(c) 2006-2007, Ext JS, LLC.
15920  *
15921  * Originally Released Under LGPL - original licence link has changed is not relivant.
15922  *
15923  * Fork - LGPL
15924  * <script type="text/javascript">
15925  */
15926  
15927
15928 /**
15929  * @class Roo.menu.ColorMenu
15930  * @extends Roo.menu.Menu
15931  * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
15932  * @constructor
15933  * Creates a new ColorMenu
15934  * @param {Object} config Configuration options
15935  */
15936 Roo.menu.ColorMenu = function(config){
15937     Roo.menu.ColorMenu.superclass.constructor.call(this, config);
15938     this.plain = true;
15939     var ci = new Roo.menu.ColorItem(config);
15940     this.add(ci);
15941     /**
15942      * The {@link Roo.ColorPalette} instance for this ColorMenu
15943      * @type ColorPalette
15944      */
15945     this.palette = ci.palette;
15946     /**
15947      * @event select
15948      * @param {ColorPalette} palette
15949      * @param {String} color
15950      */
15951     this.relayEvents(ci, ["select"]);
15952 };
15953 Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
15954  * Based on:
15955  * Ext JS Library 1.1.1
15956  * Copyright(c) 2006-2007, Ext JS, LLC.
15957  *
15958  * Originally Released Under LGPL - original licence link has changed is not relivant.
15959  *
15960  * Fork - LGPL
15961  * <script type="text/javascript">
15962  */
15963  
15964 /**
15965  * @class Roo.form.TextItem
15966  * @extends Roo.BoxComponent
15967  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
15968  * @constructor
15969  * Creates a new TextItem
15970  * @param {Object} config Configuration options
15971  */
15972 Roo.form.TextItem = function(config){
15973     Roo.form.TextItem.superclass.constructor.call(this, config);
15974 };
15975
15976 Roo.extend(Roo.form.TextItem, Roo.BoxComponent,  {
15977     
15978     /**
15979      * @cfg {String} tag the tag for this item (default div)
15980      */
15981     tag : 'div',
15982     /**
15983      * @cfg {String} html the content for this item
15984      */
15985     html : '',
15986     
15987     getAutoCreate : function()
15988     {
15989         var cfg = {
15990             id: this.id,
15991             tag: this.tag,
15992             html: this.html,
15993             cls: 'x-form-item'
15994         };
15995         
15996         return cfg;
15997         
15998     },
15999     
16000     onRender : function(ct, position)
16001     {
16002         Roo.form.TextItem.superclass.onRender.call(this, ct, position);
16003         
16004         if(!this.el){
16005             var cfg = this.getAutoCreate();
16006             if(!cfg.name){
16007                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
16008             }
16009             if (!cfg.name.length) {
16010                 delete cfg.name;
16011             }
16012             this.el = ct.createChild(cfg, position);
16013         }
16014     },
16015     /*
16016      * setHTML
16017      * @param {String} html update the Contents of the element.
16018      */
16019     setHTML : function(html)
16020     {
16021         this.fieldEl.dom.innerHTML = html;
16022     }
16023     
16024 });/*
16025  * Based on:
16026  * Ext JS Library 1.1.1
16027  * Copyright(c) 2006-2007, Ext JS, LLC.
16028  *
16029  * Originally Released Under LGPL - original licence link has changed is not relivant.
16030  *
16031  * Fork - LGPL
16032  * <script type="text/javascript">
16033  */
16034  
16035 /**
16036  * @class Roo.form.Field
16037  * @extends Roo.BoxComponent
16038  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
16039  * @constructor
16040  * Creates a new Field
16041  * @param {Object} config Configuration options
16042  */
16043 Roo.form.Field = function(config){
16044     Roo.form.Field.superclass.constructor.call(this, config);
16045 };
16046
16047 Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
16048     /**
16049      * @cfg {String} fieldLabel Label to use when rendering a form.
16050      */
16051        /**
16052      * @cfg {String} qtip Mouse over tip
16053      */
16054      
16055     /**
16056      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
16057      */
16058     invalidClass : "x-form-invalid",
16059     /**
16060      * @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")
16061      */
16062     invalidText : "The value in this field is invalid",
16063     /**
16064      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
16065      */
16066     focusClass : "x-form-focus",
16067     /**
16068      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
16069       automatic validation (defaults to "keyup").
16070      */
16071     validationEvent : "keyup",
16072     /**
16073      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
16074      */
16075     validateOnBlur : true,
16076     /**
16077      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
16078      */
16079     validationDelay : 250,
16080     /**
16081      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
16082      * {tag: "input", type: "text", size: "20", autocomplete: "off"})
16083      */
16084     defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
16085     /**
16086      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
16087      */
16088     fieldClass : "x-form-field",
16089     /**
16090      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
16091      *<pre>
16092 Value         Description
16093 -----------   ----------------------------------------------------------------------
16094 qtip          Display a quick tip when the user hovers over the field
16095 title         Display a default browser title attribute popup
16096 under         Add a block div beneath the field containing the error text
16097 side          Add an error icon to the right of the field with a popup on hover
16098 [element id]  Add the error text directly to the innerHTML of the specified element
16099 </pre>
16100      */
16101     msgTarget : 'qtip',
16102     /**
16103      * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
16104      */
16105     msgFx : 'normal',
16106
16107     /**
16108      * @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.
16109      */
16110     readOnly : false,
16111
16112     /**
16113      * @cfg {Boolean} disabled True to disable the field (defaults to false).
16114      */
16115     disabled : false,
16116
16117     /**
16118      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
16119      */
16120     inputType : undefined,
16121     
16122     /**
16123      * @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).
16124          */
16125         tabIndex : undefined,
16126         
16127     // private
16128     isFormField : true,
16129
16130     // private
16131     hasFocus : false,
16132     /**
16133      * @property {Roo.Element} fieldEl
16134      * Element Containing the rendered Field (with label etc.)
16135      */
16136     /**
16137      * @cfg {Mixed} value A value to initialize this field with.
16138      */
16139     value : undefined,
16140
16141     /**
16142      * @cfg {String} name The field's HTML name attribute.
16143      */
16144     /**
16145      * @cfg {String} cls A CSS class to apply to the field's underlying element.
16146      */
16147     // private
16148     loadedValue : false,
16149      
16150      
16151         // private ??
16152         initComponent : function(){
16153         Roo.form.Field.superclass.initComponent.call(this);
16154         this.addEvents({
16155             /**
16156              * @event focus
16157              * Fires when this field receives input focus.
16158              * @param {Roo.form.Field} this
16159              */
16160             focus : true,
16161             /**
16162              * @event blur
16163              * Fires when this field loses input focus.
16164              * @param {Roo.form.Field} this
16165              */
16166             blur : true,
16167             /**
16168              * @event specialkey
16169              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
16170              * {@link Roo.EventObject#getKey} to determine which key was pressed.
16171              * @param {Roo.form.Field} this
16172              * @param {Roo.EventObject} e The event object
16173              */
16174             specialkey : true,
16175             /**
16176              * @event change
16177              * Fires just before the field blurs if the field value has changed.
16178              * @param {Roo.form.Field} this
16179              * @param {Mixed} newValue The new value
16180              * @param {Mixed} oldValue The original value
16181              */
16182             change : true,
16183             /**
16184              * @event invalid
16185              * Fires after the field has been marked as invalid.
16186              * @param {Roo.form.Field} this
16187              * @param {String} msg The validation message
16188              */
16189             invalid : true,
16190             /**
16191              * @event valid
16192              * Fires after the field has been validated with no errors.
16193              * @param {Roo.form.Field} this
16194              */
16195             valid : true,
16196              /**
16197              * @event keyup
16198              * Fires after the key up
16199              * @param {Roo.form.Field} this
16200              * @param {Roo.EventObject}  e The event Object
16201              */
16202             keyup : true
16203         });
16204     },
16205
16206     /**
16207      * Returns the name attribute of the field if available
16208      * @return {String} name The field name
16209      */
16210     getName: function(){
16211          return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
16212     },
16213
16214     // private
16215     onRender : function(ct, position){
16216         Roo.form.Field.superclass.onRender.call(this, ct, position);
16217         if(!this.el){
16218             var cfg = this.getAutoCreate();
16219             if(!cfg.name){
16220                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
16221             }
16222             if (!cfg.name.length) {
16223                 delete cfg.name;
16224             }
16225             if(this.inputType){
16226                 cfg.type = this.inputType;
16227             }
16228             this.el = ct.createChild(cfg, position);
16229         }
16230         var type = this.el.dom.type;
16231         if(type){
16232             if(type == 'password'){
16233                 type = 'text';
16234             }
16235             this.el.addClass('x-form-'+type);
16236         }
16237         if(this.readOnly){
16238             this.el.dom.readOnly = true;
16239         }
16240         if(this.tabIndex !== undefined){
16241             this.el.dom.setAttribute('tabIndex', this.tabIndex);
16242         }
16243
16244         this.el.addClass([this.fieldClass, this.cls]);
16245         this.initValue();
16246     },
16247
16248     /**
16249      * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
16250      * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
16251      * @return {Roo.form.Field} this
16252      */
16253     applyTo : function(target){
16254         this.allowDomMove = false;
16255         this.el = Roo.get(target);
16256         this.render(this.el.dom.parentNode);
16257         return this;
16258     },
16259
16260     // private
16261     initValue : function(){
16262         if(this.value !== undefined){
16263             this.setValue(this.value);
16264         }else if(this.el.dom.value.length > 0){
16265             this.setValue(this.el.dom.value);
16266         }
16267     },
16268
16269     /**
16270      * Returns true if this field has been changed since it was originally loaded and is not disabled.
16271      * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
16272      */
16273     isDirty : function() {
16274         if(this.disabled) {
16275             return false;
16276         }
16277         return String(this.getValue()) !== String(this.originalValue);
16278     },
16279
16280     /**
16281      * stores the current value in loadedValue
16282      */
16283     resetHasChanged : function()
16284     {
16285         this.loadedValue = String(this.getValue());
16286     },
16287     /**
16288      * checks the current value against the 'loaded' value.
16289      * Note - will return false if 'resetHasChanged' has not been called first.
16290      */
16291     hasChanged : function()
16292     {
16293         if(this.disabled || this.readOnly) {
16294             return false;
16295         }
16296         return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
16297     },
16298     
16299     
16300     
16301     // private
16302     afterRender : function(){
16303         Roo.form.Field.superclass.afterRender.call(this);
16304         this.initEvents();
16305     },
16306
16307     // private
16308     fireKey : function(e){
16309         //Roo.log('field ' + e.getKey());
16310         if(e.isNavKeyPress()){
16311             this.fireEvent("specialkey", this, e);
16312         }
16313     },
16314
16315     /**
16316      * Resets the current field value to the originally loaded value and clears any validation messages
16317      */
16318     reset : function(){
16319         this.setValue(this.resetValue);
16320         this.originalValue = this.getValue();
16321         this.clearInvalid();
16322     },
16323
16324     // private
16325     initEvents : function(){
16326         // safari killled keypress - so keydown is now used..
16327         this.el.on("keydown" , this.fireKey,  this);
16328         this.el.on("focus", this.onFocus,  this);
16329         this.el.on("blur", this.onBlur,  this);
16330         this.el.relayEvent('keyup', this);
16331
16332         // reference to original value for reset
16333         this.originalValue = this.getValue();
16334         this.resetValue =  this.getValue();
16335     },
16336
16337     // private
16338     onFocus : function(){
16339         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
16340             this.el.addClass(this.focusClass);
16341         }
16342         if(!this.hasFocus){
16343             this.hasFocus = true;
16344             this.startValue = this.getValue();
16345             this.fireEvent("focus", this);
16346         }
16347     },
16348
16349     beforeBlur : Roo.emptyFn,
16350
16351     // private
16352     onBlur : function(){
16353         this.beforeBlur();
16354         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
16355             this.el.removeClass(this.focusClass);
16356         }
16357         this.hasFocus = false;
16358         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
16359             this.validate();
16360         }
16361         var v = this.getValue();
16362         if(String(v) !== String(this.startValue)){
16363             this.fireEvent('change', this, v, this.startValue);
16364         }
16365         this.fireEvent("blur", this);
16366     },
16367
16368     /**
16369      * Returns whether or not the field value is currently valid
16370      * @param {Boolean} preventMark True to disable marking the field invalid
16371      * @return {Boolean} True if the value is valid, else false
16372      */
16373     isValid : function(preventMark){
16374         if(this.disabled){
16375             return true;
16376         }
16377         var restore = this.preventMark;
16378         this.preventMark = preventMark === true;
16379         var v = this.validateValue(this.processValue(this.getRawValue()));
16380         this.preventMark = restore;
16381         return v;
16382     },
16383
16384     /**
16385      * Validates the field value
16386      * @return {Boolean} True if the value is valid, else false
16387      */
16388     validate : function(){
16389         if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
16390             this.clearInvalid();
16391             return true;
16392         }
16393         return false;
16394     },
16395
16396     processValue : function(value){
16397         return value;
16398     },
16399
16400     // private
16401     // Subclasses should provide the validation implementation by overriding this
16402     validateValue : function(value){
16403         return true;
16404     },
16405
16406     /**
16407      * Mark this field as invalid
16408      * @param {String} msg The validation message
16409      */
16410     markInvalid : function(msg){
16411         if(!this.rendered || this.preventMark){ // not rendered
16412             return;
16413         }
16414         
16415         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
16416         
16417         obj.el.addClass(this.invalidClass);
16418         msg = msg || this.invalidText;
16419         switch(this.msgTarget){
16420             case 'qtip':
16421                 obj.el.dom.qtip = msg;
16422                 obj.el.dom.qclass = 'x-form-invalid-tip';
16423                 if(Roo.QuickTips){ // fix for floating editors interacting with DND
16424                     Roo.QuickTips.enable();
16425                 }
16426                 break;
16427             case 'title':
16428                 this.el.dom.title = msg;
16429                 break;
16430             case 'under':
16431                 if(!this.errorEl){
16432                     var elp = this.el.findParent('.x-form-element', 5, true);
16433                     this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
16434                     this.errorEl.setWidth(elp.getWidth(true)-20);
16435                 }
16436                 this.errorEl.update(msg);
16437                 Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
16438                 break;
16439             case 'side':
16440                 if(!this.errorIcon){
16441                     var elp = this.el.findParent('.x-form-element', 5, true);
16442                     this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
16443                 }
16444                 this.alignErrorIcon();
16445                 this.errorIcon.dom.qtip = msg;
16446                 this.errorIcon.dom.qclass = 'x-form-invalid-tip';
16447                 this.errorIcon.show();
16448                 this.on('resize', this.alignErrorIcon, this);
16449                 break;
16450             default:
16451                 var t = Roo.getDom(this.msgTarget);
16452                 t.innerHTML = msg;
16453                 t.style.display = this.msgDisplay;
16454                 break;
16455         }
16456         this.fireEvent('invalid', this, msg);
16457     },
16458
16459     // private
16460     alignErrorIcon : function(){
16461         this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
16462     },
16463
16464     /**
16465      * Clear any invalid styles/messages for this field
16466      */
16467     clearInvalid : function(){
16468         if(!this.rendered || this.preventMark){ // not rendered
16469             return;
16470         }
16471         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
16472         
16473         obj.el.removeClass(this.invalidClass);
16474         switch(this.msgTarget){
16475             case 'qtip':
16476                 obj.el.dom.qtip = '';
16477                 break;
16478             case 'title':
16479                 this.el.dom.title = '';
16480                 break;
16481             case 'under':
16482                 if(this.errorEl){
16483                     Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
16484                 }
16485                 break;
16486             case 'side':
16487                 if(this.errorIcon){
16488                     this.errorIcon.dom.qtip = '';
16489                     this.errorIcon.hide();
16490                     this.un('resize', this.alignErrorIcon, this);
16491                 }
16492                 break;
16493             default:
16494                 var t = Roo.getDom(this.msgTarget);
16495                 t.innerHTML = '';
16496                 t.style.display = 'none';
16497                 break;
16498         }
16499         this.fireEvent('valid', this);
16500     },
16501
16502     /**
16503      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
16504      * @return {Mixed} value The field value
16505      */
16506     getRawValue : function(){
16507         var v = this.el.getValue();
16508         
16509         return v;
16510     },
16511
16512     /**
16513      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
16514      * @return {Mixed} value The field value
16515      */
16516     getValue : function(){
16517         var v = this.el.getValue();
16518          
16519         return v;
16520     },
16521
16522     /**
16523      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
16524      * @param {Mixed} value The value to set
16525      */
16526     setRawValue : function(v){
16527         return this.el.dom.value = (v === null || v === undefined ? '' : v);
16528     },
16529
16530     /**
16531      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
16532      * @param {Mixed} value The value to set
16533      */
16534     setValue : function(v){
16535         this.value = v;
16536         if(this.rendered){
16537             this.el.dom.value = (v === null || v === undefined ? '' : v);
16538              this.validate();
16539         }
16540     },
16541
16542     adjustSize : function(w, h){
16543         var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
16544         s.width = this.adjustWidth(this.el.dom.tagName, s.width);
16545         return s;
16546     },
16547
16548     adjustWidth : function(tag, w){
16549         tag = tag.toLowerCase();
16550         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
16551             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
16552                 if(tag == 'input'){
16553                     return w + 2;
16554                 }
16555                 if(tag == 'textarea'){
16556                     return w-2;
16557                 }
16558             }else if(Roo.isOpera){
16559                 if(tag == 'input'){
16560                     return w + 2;
16561                 }
16562                 if(tag == 'textarea'){
16563                     return w-2;
16564                 }
16565             }
16566         }
16567         return w;
16568     }
16569 });
16570
16571
16572 // anything other than normal should be considered experimental
16573 Roo.form.Field.msgFx = {
16574     normal : {
16575         show: function(msgEl, f){
16576             msgEl.setDisplayed('block');
16577         },
16578
16579         hide : function(msgEl, f){
16580             msgEl.setDisplayed(false).update('');
16581         }
16582     },
16583
16584     slide : {
16585         show: function(msgEl, f){
16586             msgEl.slideIn('t', {stopFx:true});
16587         },
16588
16589         hide : function(msgEl, f){
16590             msgEl.slideOut('t', {stopFx:true,useDisplay:true});
16591         }
16592     },
16593
16594     slideRight : {
16595         show: function(msgEl, f){
16596             msgEl.fixDisplay();
16597             msgEl.alignTo(f.el, 'tl-tr');
16598             msgEl.slideIn('l', {stopFx:true});
16599         },
16600
16601         hide : function(msgEl, f){
16602             msgEl.slideOut('l', {stopFx:true,useDisplay:true});
16603         }
16604     }
16605 };/*
16606  * Based on:
16607  * Ext JS Library 1.1.1
16608  * Copyright(c) 2006-2007, Ext JS, LLC.
16609  *
16610  * Originally Released Under LGPL - original licence link has changed is not relivant.
16611  *
16612  * Fork - LGPL
16613  * <script type="text/javascript">
16614  */
16615  
16616
16617 /**
16618  * @class Roo.form.TextField
16619  * @extends Roo.form.Field
16620  * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
16621  * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
16622  * @constructor
16623  * Creates a new TextField
16624  * @param {Object} config Configuration options
16625  */
16626 Roo.form.TextField = function(config){
16627     Roo.form.TextField.superclass.constructor.call(this, config);
16628     this.addEvents({
16629         /**
16630          * @event autosize
16631          * Fires when the autosize function is triggered.  The field may or may not have actually changed size
16632          * according to the default logic, but this event provides a hook for the developer to apply additional
16633          * logic at runtime to resize the field if needed.
16634              * @param {Roo.form.Field} this This text field
16635              * @param {Number} width The new field width
16636              */
16637         autosize : true
16638     });
16639 };
16640
16641 Roo.extend(Roo.form.TextField, Roo.form.Field,  {
16642     /**
16643      * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
16644      */
16645     grow : false,
16646     /**
16647      * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
16648      */
16649     growMin : 30,
16650     /**
16651      * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
16652      */
16653     growMax : 800,
16654     /**
16655      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
16656      */
16657     vtype : null,
16658     /**
16659      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
16660      */
16661     maskRe : null,
16662     /**
16663      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
16664      */
16665     disableKeyFilter : false,
16666     /**
16667      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
16668      */
16669     allowBlank : true,
16670     /**
16671      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
16672      */
16673     minLength : 0,
16674     /**
16675      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
16676      */
16677     maxLength : Number.MAX_VALUE,
16678     /**
16679      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
16680      */
16681     minLengthText : "The minimum length for this field is {0}",
16682     /**
16683      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
16684      */
16685     maxLengthText : "The maximum length for this field is {0}",
16686     /**
16687      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
16688      */
16689     selectOnFocus : false,
16690     /**
16691      * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space 
16692      */    
16693     allowLeadingSpace : false,
16694     /**
16695      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
16696      */
16697     blankText : "This field is required",
16698     /**
16699      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
16700      * If available, this function will be called only after the basic validators all return true, and will be passed the
16701      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
16702      */
16703     validator : null,
16704     /**
16705      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
16706      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
16707      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
16708      */
16709     regex : null,
16710     /**
16711      * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
16712      */
16713     regexText : "",
16714     /**
16715      * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
16716      */
16717     emptyText : null,
16718    
16719
16720     // private
16721     initEvents : function()
16722     {
16723         if (this.emptyText) {
16724             this.el.attr('placeholder', this.emptyText);
16725         }
16726         
16727         Roo.form.TextField.superclass.initEvents.call(this);
16728         if(this.validationEvent == 'keyup'){
16729             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
16730             this.el.on('keyup', this.filterValidation, this);
16731         }
16732         else if(this.validationEvent !== false){
16733             this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
16734         }
16735         
16736         if(this.selectOnFocus){
16737             this.on("focus", this.preFocus, this);
16738         }
16739         if (!this.allowLeadingSpace) {
16740             this.on('blur', this.cleanLeadingSpace, this);
16741         }
16742         
16743         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
16744             this.el.on("keypress", this.filterKeys, this);
16745         }
16746         if(this.grow){
16747             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
16748             this.el.on("click", this.autoSize,  this);
16749         }
16750         if(this.el.is('input[type=password]') && Roo.isSafari){
16751             this.el.on('keydown', this.SafariOnKeyDown, this);
16752         }
16753     },
16754
16755     processValue : function(value){
16756         if(this.stripCharsRe){
16757             var newValue = value.replace(this.stripCharsRe, '');
16758             if(newValue !== value){
16759                 this.setRawValue(newValue);
16760                 return newValue;
16761             }
16762         }
16763         return value;
16764     },
16765
16766     filterValidation : function(e){
16767         if(!e.isNavKeyPress()){
16768             this.validationTask.delay(this.validationDelay);
16769         }
16770     },
16771
16772     // private
16773     onKeyUp : function(e){
16774         if(!e.isNavKeyPress()){
16775             this.autoSize();
16776         }
16777     },
16778     // private - clean the leading white space
16779     cleanLeadingSpace : function(e)
16780     {
16781         if ( this.inputType == 'file') {
16782             return;
16783         }
16784         
16785         this.setValue((this.getValue() + '').replace(/^\s+/,''));
16786     },
16787     /**
16788      * Resets the current field value to the originally-loaded value and clears any validation messages.
16789      *  
16790      */
16791     reset : function(){
16792         Roo.form.TextField.superclass.reset.call(this);
16793        
16794     }, 
16795     // private
16796     preFocus : function(){
16797         
16798         if(this.selectOnFocus){
16799             this.el.dom.select();
16800         }
16801     },
16802
16803     
16804     // private
16805     filterKeys : function(e){
16806         var k = e.getKey();
16807         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
16808             return;
16809         }
16810         var c = e.getCharCode(), cc = String.fromCharCode(c);
16811         if(Roo.isIE && (e.isSpecialKey() || !cc)){
16812             return;
16813         }
16814         if(!this.maskRe.test(cc)){
16815             e.stopEvent();
16816         }
16817     },
16818
16819     setValue : function(v){
16820         
16821         Roo.form.TextField.superclass.setValue.apply(this, arguments);
16822         
16823         this.autoSize();
16824     },
16825
16826     /**
16827      * Validates a value according to the field's validation rules and marks the field as invalid
16828      * if the validation fails
16829      * @param {Mixed} value The value to validate
16830      * @return {Boolean} True if the value is valid, else false
16831      */
16832     validateValue : function(value){
16833         if(value.length < 1)  { // if it's blank
16834              if(this.allowBlank){
16835                 this.clearInvalid();
16836                 return true;
16837              }else{
16838                 this.markInvalid(this.blankText);
16839                 return false;
16840              }
16841         }
16842         if(value.length < this.minLength){
16843             this.markInvalid(String.format(this.minLengthText, this.minLength));
16844             return false;
16845         }
16846         if(value.length > this.maxLength){
16847             this.markInvalid(String.format(this.maxLengthText, this.maxLength));
16848             return false;
16849         }
16850         if(this.vtype){
16851             var vt = Roo.form.VTypes;
16852             if(!vt[this.vtype](value, this)){
16853                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
16854                 return false;
16855             }
16856         }
16857         if(typeof this.validator == "function"){
16858             var msg = this.validator(value);
16859             if(msg !== true){
16860                 this.markInvalid(msg);
16861                 return false;
16862             }
16863         }
16864         if(this.regex && !this.regex.test(value)){
16865             this.markInvalid(this.regexText);
16866             return false;
16867         }
16868         return true;
16869     },
16870
16871     /**
16872      * Selects text in this field
16873      * @param {Number} start (optional) The index where the selection should start (defaults to 0)
16874      * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
16875      */
16876     selectText : function(start, end){
16877         var v = this.getRawValue();
16878         if(v.length > 0){
16879             start = start === undefined ? 0 : start;
16880             end = end === undefined ? v.length : end;
16881             var d = this.el.dom;
16882             if(d.setSelectionRange){
16883                 d.setSelectionRange(start, end);
16884             }else if(d.createTextRange){
16885                 var range = d.createTextRange();
16886                 range.moveStart("character", start);
16887                 range.moveEnd("character", v.length-end);
16888                 range.select();
16889             }
16890         }
16891     },
16892
16893     /**
16894      * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
16895      * This only takes effect if grow = true, and fires the autosize event.
16896      */
16897     autoSize : function(){
16898         if(!this.grow || !this.rendered){
16899             return;
16900         }
16901         if(!this.metrics){
16902             this.metrics = Roo.util.TextMetrics.createInstance(this.el);
16903         }
16904         var el = this.el;
16905         var v = el.dom.value;
16906         var d = document.createElement('div');
16907         d.appendChild(document.createTextNode(v));
16908         v = d.innerHTML;
16909         d = null;
16910         v += "&#160;";
16911         var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
16912         this.el.setWidth(w);
16913         this.fireEvent("autosize", this, w);
16914     },
16915     
16916     // private
16917     SafariOnKeyDown : function(event)
16918     {
16919         // this is a workaround for a password hang bug on chrome/ webkit.
16920         
16921         var isSelectAll = false;
16922         
16923         if(this.el.dom.selectionEnd > 0){
16924             isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
16925         }
16926         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
16927             event.preventDefault();
16928             this.setValue('');
16929             return;
16930         }
16931         
16932         if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
16933             
16934             event.preventDefault();
16935             // this is very hacky as keydown always get's upper case.
16936             
16937             var cc = String.fromCharCode(event.getCharCode());
16938             
16939             
16940             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
16941             
16942         }
16943         
16944         
16945     }
16946 });/*
16947  * Based on:
16948  * Ext JS Library 1.1.1
16949  * Copyright(c) 2006-2007, Ext JS, LLC.
16950  *
16951  * Originally Released Under LGPL - original licence link has changed is not relivant.
16952  *
16953  * Fork - LGPL
16954  * <script type="text/javascript">
16955  */
16956  
16957 /**
16958  * @class Roo.form.Hidden
16959  * @extends Roo.form.TextField
16960  * Simple Hidden element used on forms 
16961  * 
16962  * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
16963  * 
16964  * @constructor
16965  * Creates a new Hidden form element.
16966  * @param {Object} config Configuration options
16967  */
16968
16969
16970
16971 // easy hidden field...
16972 Roo.form.Hidden = function(config){
16973     Roo.form.Hidden.superclass.constructor.call(this, config);
16974 };
16975   
16976 Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
16977     fieldLabel:      '',
16978     inputType:      'hidden',
16979     width:          50,
16980     allowBlank:     true,
16981     labelSeparator: '',
16982     hidden:         true,
16983     itemCls :       'x-form-item-display-none'
16984
16985
16986 });
16987
16988
16989 /*
16990  * Based on:
16991  * Ext JS Library 1.1.1
16992  * Copyright(c) 2006-2007, Ext JS, LLC.
16993  *
16994  * Originally Released Under LGPL - original licence link has changed is not relivant.
16995  *
16996  * Fork - LGPL
16997  * <script type="text/javascript">
16998  */
16999  
17000 /**
17001  * @class Roo.form.TriggerField
17002  * @extends Roo.form.TextField
17003  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
17004  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
17005  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
17006  * for which you can provide a custom implementation.  For example:
17007  * <pre><code>
17008 var trigger = new Roo.form.TriggerField();
17009 trigger.onTriggerClick = myTriggerFn;
17010 trigger.applyTo('my-field');
17011 </code></pre>
17012  *
17013  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
17014  * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
17015  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
17016  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
17017  * @constructor
17018  * Create a new TriggerField.
17019  * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
17020  * to the base TextField)
17021  */
17022 Roo.form.TriggerField = function(config){
17023     this.mimicing = false;
17024     Roo.form.TriggerField.superclass.constructor.call(this, config);
17025 };
17026
17027 Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
17028     /**
17029      * @cfg {String} triggerClass A CSS class to apply to the trigger
17030      */
17031     /**
17032      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
17033      * {tag: "input", type: "text", size: "16", autocomplete: "off"})
17034      */
17035     defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
17036     /**
17037      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
17038      */
17039     hideTrigger:false,
17040
17041     /** @cfg {Boolean} grow @hide */
17042     /** @cfg {Number} growMin @hide */
17043     /** @cfg {Number} growMax @hide */
17044
17045     /**
17046      * @hide 
17047      * @method
17048      */
17049     autoSize: Roo.emptyFn,
17050     // private
17051     monitorTab : true,
17052     // private
17053     deferHeight : true,
17054
17055     
17056     actionMode : 'wrap',
17057     // private
17058     onResize : function(w, h){
17059         Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
17060         if(typeof w == 'number'){
17061             var x = w - this.trigger.getWidth();
17062             this.el.setWidth(this.adjustWidth('input', x));
17063             this.trigger.setStyle('left', x+'px');
17064         }
17065     },
17066
17067     // private
17068     adjustSize : Roo.BoxComponent.prototype.adjustSize,
17069
17070     // private
17071     getResizeEl : function(){
17072         return this.wrap;
17073     },
17074
17075     // private
17076     getPositionEl : function(){
17077         return this.wrap;
17078     },
17079
17080     // private
17081     alignErrorIcon : function(){
17082         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
17083     },
17084
17085     // private
17086     onRender : function(ct, position){
17087         Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
17088         this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
17089         this.trigger = this.wrap.createChild(this.triggerConfig ||
17090                 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
17091         if(this.hideTrigger){
17092             this.trigger.setDisplayed(false);
17093         }
17094         this.initTrigger();
17095         if(!this.width){
17096             this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
17097         }
17098     },
17099
17100     // private
17101     initTrigger : function(){
17102         this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
17103         this.trigger.addClassOnOver('x-form-trigger-over');
17104         this.trigger.addClassOnClick('x-form-trigger-click');
17105     },
17106
17107     // private
17108     onDestroy : function(){
17109         if(this.trigger){
17110             this.trigger.removeAllListeners();
17111             this.trigger.remove();
17112         }
17113         if(this.wrap){
17114             this.wrap.remove();
17115         }
17116         Roo.form.TriggerField.superclass.onDestroy.call(this);
17117     },
17118
17119     // private
17120     onFocus : function(){
17121         Roo.form.TriggerField.superclass.onFocus.call(this);
17122         if(!this.mimicing){
17123             this.wrap.addClass('x-trigger-wrap-focus');
17124             this.mimicing = true;
17125             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
17126             if(this.monitorTab){
17127                 this.el.on("keydown", this.checkTab, this);
17128             }
17129         }
17130     },
17131
17132     // private
17133     checkTab : function(e){
17134         if(e.getKey() == e.TAB){
17135             this.triggerBlur();
17136         }
17137     },
17138
17139     // private
17140     onBlur : function(){
17141         // do nothing
17142     },
17143
17144     // private
17145     mimicBlur : function(e, t){
17146         if(!this.wrap.contains(t) && this.validateBlur()){
17147             this.triggerBlur();
17148         }
17149     },
17150
17151     // private
17152     triggerBlur : function(){
17153         this.mimicing = false;
17154         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
17155         if(this.monitorTab){
17156             this.el.un("keydown", this.checkTab, this);
17157         }
17158         this.wrap.removeClass('x-trigger-wrap-focus');
17159         Roo.form.TriggerField.superclass.onBlur.call(this);
17160     },
17161
17162     // private
17163     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
17164     validateBlur : function(e, t){
17165         return true;
17166     },
17167
17168     // private
17169     onDisable : function(){
17170         Roo.form.TriggerField.superclass.onDisable.call(this);
17171         if(this.wrap){
17172             this.wrap.addClass('x-item-disabled');
17173         }
17174     },
17175
17176     // private
17177     onEnable : function(){
17178         Roo.form.TriggerField.superclass.onEnable.call(this);
17179         if(this.wrap){
17180             this.wrap.removeClass('x-item-disabled');
17181         }
17182     },
17183
17184     // private
17185     onShow : function(){
17186         var ae = this.getActionEl();
17187         
17188         if(ae){
17189             ae.dom.style.display = '';
17190             ae.dom.style.visibility = 'visible';
17191         }
17192     },
17193
17194     // private
17195     
17196     onHide : function(){
17197         var ae = this.getActionEl();
17198         ae.dom.style.display = 'none';
17199     },
17200
17201     /**
17202      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
17203      * by an implementing function.
17204      * @method
17205      * @param {EventObject} e
17206      */
17207     onTriggerClick : Roo.emptyFn
17208 });
17209
17210 // TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
17211 // to be extended by an implementing class.  For an example of implementing this class, see the custom
17212 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
17213 Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
17214     initComponent : function(){
17215         Roo.form.TwinTriggerField.superclass.initComponent.call(this);
17216
17217         this.triggerConfig = {
17218             tag:'span', cls:'x-form-twin-triggers', cn:[
17219             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
17220             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
17221         ]};
17222     },
17223
17224     getTrigger : function(index){
17225         return this.triggers[index];
17226     },
17227
17228     initTrigger : function(){
17229         var ts = this.trigger.select('.x-form-trigger', true);
17230         this.wrap.setStyle('overflow', 'hidden');
17231         var triggerField = this;
17232         ts.each(function(t, all, index){
17233             t.hide = function(){
17234                 var w = triggerField.wrap.getWidth();
17235                 this.dom.style.display = 'none';
17236                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
17237             };
17238             t.show = function(){
17239                 var w = triggerField.wrap.getWidth();
17240                 this.dom.style.display = '';
17241                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
17242             };
17243             var triggerIndex = 'Trigger'+(index+1);
17244
17245             if(this['hide'+triggerIndex]){
17246                 t.dom.style.display = 'none';
17247             }
17248             t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
17249             t.addClassOnOver('x-form-trigger-over');
17250             t.addClassOnClick('x-form-trigger-click');
17251         }, this);
17252         this.triggers = ts.elements;
17253     },
17254
17255     onTrigger1Click : Roo.emptyFn,
17256     onTrigger2Click : Roo.emptyFn
17257 });/*
17258  * Based on:
17259  * Ext JS Library 1.1.1
17260  * Copyright(c) 2006-2007, Ext JS, LLC.
17261  *
17262  * Originally Released Under LGPL - original licence link has changed is not relivant.
17263  *
17264  * Fork - LGPL
17265  * <script type="text/javascript">
17266  */
17267  
17268 /**
17269  * @class Roo.form.TextArea
17270  * @extends Roo.form.TextField
17271  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
17272  * support for auto-sizing.
17273  * @constructor
17274  * Creates a new TextArea
17275  * @param {Object} config Configuration options
17276  */
17277 Roo.form.TextArea = function(config){
17278     Roo.form.TextArea.superclass.constructor.call(this, config);
17279     // these are provided exchanges for backwards compat
17280     // minHeight/maxHeight were replaced by growMin/growMax to be
17281     // compatible with TextField growing config values
17282     if(this.minHeight !== undefined){
17283         this.growMin = this.minHeight;
17284     }
17285     if(this.maxHeight !== undefined){
17286         this.growMax = this.maxHeight;
17287     }
17288 };
17289
17290 Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
17291     /**
17292      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
17293      */
17294     growMin : 60,
17295     /**
17296      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
17297      */
17298     growMax: 1000,
17299     /**
17300      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
17301      * in the field (equivalent to setting overflow: hidden, defaults to false)
17302      */
17303     preventScrollbars: false,
17304     /**
17305      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
17306      * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
17307      */
17308
17309     // private
17310     onRender : function(ct, position){
17311         if(!this.el){
17312             this.defaultAutoCreate = {
17313                 tag: "textarea",
17314                 style:"width:300px;height:60px;",
17315                 autocomplete: "new-password"
17316             };
17317         }
17318         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
17319         if(this.grow){
17320             this.textSizeEl = Roo.DomHelper.append(document.body, {
17321                 tag: "pre", cls: "x-form-grow-sizer"
17322             });
17323             if(this.preventScrollbars){
17324                 this.el.setStyle("overflow", "hidden");
17325             }
17326             this.el.setHeight(this.growMin);
17327         }
17328     },
17329
17330     onDestroy : function(){
17331         if(this.textSizeEl){
17332             this.textSizeEl.parentNode.removeChild(this.textSizeEl);
17333         }
17334         Roo.form.TextArea.superclass.onDestroy.call(this);
17335     },
17336
17337     // private
17338     onKeyUp : function(e){
17339         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
17340             this.autoSize();
17341         }
17342     },
17343
17344     /**
17345      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
17346      * This only takes effect if grow = true, and fires the autosize event if the height changes.
17347      */
17348     autoSize : function(){
17349         if(!this.grow || !this.textSizeEl){
17350             return;
17351         }
17352         var el = this.el;
17353         var v = el.dom.value;
17354         var ts = this.textSizeEl;
17355
17356         ts.innerHTML = '';
17357         ts.appendChild(document.createTextNode(v));
17358         v = ts.innerHTML;
17359
17360         Roo.fly(ts).setWidth(this.el.getWidth());
17361         if(v.length < 1){
17362             v = "&#160;&#160;";
17363         }else{
17364             if(Roo.isIE){
17365                 v = v.replace(/\n/g, '<p>&#160;</p>');
17366             }
17367             v += "&#160;\n&#160;";
17368         }
17369         ts.innerHTML = v;
17370         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
17371         if(h != this.lastHeight){
17372             this.lastHeight = h;
17373             this.el.setHeight(h);
17374             this.fireEvent("autosize", this, h);
17375         }
17376     }
17377 });/*
17378  * Based on:
17379  * Ext JS Library 1.1.1
17380  * Copyright(c) 2006-2007, Ext JS, LLC.
17381  *
17382  * Originally Released Under LGPL - original licence link has changed is not relivant.
17383  *
17384  * Fork - LGPL
17385  * <script type="text/javascript">
17386  */
17387  
17388
17389 /**
17390  * @class Roo.form.NumberField
17391  * @extends Roo.form.TextField
17392  * Numeric text field that provides automatic keystroke filtering and numeric validation.
17393  * @constructor
17394  * Creates a new NumberField
17395  * @param {Object} config Configuration options
17396  */
17397 Roo.form.NumberField = function(config){
17398     Roo.form.NumberField.superclass.constructor.call(this, config);
17399 };
17400
17401 Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
17402     /**
17403      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
17404      */
17405     fieldClass: "x-form-field x-form-num-field",
17406     /**
17407      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
17408      */
17409     allowDecimals : true,
17410     /**
17411      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
17412      */
17413     decimalSeparator : ".",
17414     /**
17415      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
17416      */
17417     decimalPrecision : 2,
17418     /**
17419      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
17420      */
17421     allowNegative : true,
17422     /**
17423      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
17424      */
17425     minValue : Number.NEGATIVE_INFINITY,
17426     /**
17427      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
17428      */
17429     maxValue : Number.MAX_VALUE,
17430     /**
17431      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
17432      */
17433     minText : "The minimum value for this field is {0}",
17434     /**
17435      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
17436      */
17437     maxText : "The maximum value for this field is {0}",
17438     /**
17439      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
17440      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
17441      */
17442     nanText : "{0} is not a valid number",
17443
17444     // private
17445     initEvents : function(){
17446         Roo.form.NumberField.superclass.initEvents.call(this);
17447         var allowed = "0123456789";
17448         if(this.allowDecimals){
17449             allowed += this.decimalSeparator;
17450         }
17451         if(this.allowNegative){
17452             allowed += "-";
17453         }
17454         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
17455         var keyPress = function(e){
17456             var k = e.getKey();
17457             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
17458                 return;
17459             }
17460             var c = e.getCharCode();
17461             if(allowed.indexOf(String.fromCharCode(c)) === -1){
17462                 e.stopEvent();
17463             }
17464         };
17465         this.el.on("keypress", keyPress, this);
17466     },
17467
17468     // private
17469     validateValue : function(value){
17470         if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
17471             return false;
17472         }
17473         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
17474              return true;
17475         }
17476         var num = this.parseValue(value);
17477         if(isNaN(num)){
17478             this.markInvalid(String.format(this.nanText, value));
17479             return false;
17480         }
17481         if(num < this.minValue){
17482             this.markInvalid(String.format(this.minText, this.minValue));
17483             return false;
17484         }
17485         if(num > this.maxValue){
17486             this.markInvalid(String.format(this.maxText, this.maxValue));
17487             return false;
17488         }
17489         return true;
17490     },
17491
17492     getValue : function(){
17493         return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
17494     },
17495
17496     // private
17497     parseValue : function(value){
17498         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
17499         return isNaN(value) ? '' : value;
17500     },
17501
17502     // private
17503     fixPrecision : function(value){
17504         var nan = isNaN(value);
17505         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
17506             return nan ? '' : value;
17507         }
17508         return parseFloat(value).toFixed(this.decimalPrecision);
17509     },
17510
17511     setValue : function(v){
17512         v = this.fixPrecision(v);
17513         Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
17514     },
17515
17516     // private
17517     decimalPrecisionFcn : function(v){
17518         return Math.floor(v);
17519     },
17520
17521     beforeBlur : function(){
17522         var v = this.parseValue(this.getRawValue());
17523         if(v){
17524             this.setValue(v);
17525         }
17526     }
17527 });/*
17528  * Based on:
17529  * Ext JS Library 1.1.1
17530  * Copyright(c) 2006-2007, Ext JS, LLC.
17531  *
17532  * Originally Released Under LGPL - original licence link has changed is not relivant.
17533  *
17534  * Fork - LGPL
17535  * <script type="text/javascript">
17536  */
17537  
17538 /**
17539  * @class Roo.form.DateField
17540  * @extends Roo.form.TriggerField
17541  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
17542 * @constructor
17543 * Create a new DateField
17544 * @param {Object} config
17545  */
17546 Roo.form.DateField = function(config)
17547 {
17548     Roo.form.DateField.superclass.constructor.call(this, config);
17549     
17550       this.addEvents({
17551          
17552         /**
17553          * @event select
17554          * Fires when a date is selected
17555              * @param {Roo.form.DateField} combo This combo box
17556              * @param {Date} date The date selected
17557              */
17558         'select' : true
17559          
17560     });
17561     
17562     
17563     if(typeof this.minValue == "string") {
17564         this.minValue = this.parseDate(this.minValue);
17565     }
17566     if(typeof this.maxValue == "string") {
17567         this.maxValue = this.parseDate(this.maxValue);
17568     }
17569     this.ddMatch = null;
17570     if(this.disabledDates){
17571         var dd = this.disabledDates;
17572         var re = "(?:";
17573         for(var i = 0; i < dd.length; i++){
17574             re += dd[i];
17575             if(i != dd.length-1) {
17576                 re += "|";
17577             }
17578         }
17579         this.ddMatch = new RegExp(re + ")");
17580     }
17581 };
17582
17583 Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
17584     /**
17585      * @cfg {String} format
17586      * The default date format string which can be overriden for localization support.  The format must be
17587      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
17588      */
17589     format : "m/d/y",
17590     /**
17591      * @cfg {String} altFormats
17592      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
17593      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
17594      */
17595     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
17596     /**
17597      * @cfg {Array} disabledDays
17598      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
17599      */
17600     disabledDays : null,
17601     /**
17602      * @cfg {String} disabledDaysText
17603      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
17604      */
17605     disabledDaysText : "Disabled",
17606     /**
17607      * @cfg {Array} disabledDates
17608      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
17609      * expression so they are very powerful. Some examples:
17610      * <ul>
17611      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
17612      * <li>["03/08", "09/16"] would disable those days for every year</li>
17613      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
17614      * <li>["03/../2006"] would disable every day in March 2006</li>
17615      * <li>["^03"] would disable every day in every March</li>
17616      * </ul>
17617      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
17618      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
17619      */
17620     disabledDates : null,
17621     /**
17622      * @cfg {String} disabledDatesText
17623      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
17624      */
17625     disabledDatesText : "Disabled",
17626         
17627         
17628         /**
17629      * @cfg {Date/String} zeroValue
17630      * if the date is less that this number, then the field is rendered as empty
17631      * default is 1800
17632      */
17633         zeroValue : '1800-01-01',
17634         
17635         
17636     /**
17637      * @cfg {Date/String} minValue
17638      * The minimum allowed date. Can be either a Javascript date object or a string date in a
17639      * valid format (defaults to null).
17640      */
17641     minValue : null,
17642     /**
17643      * @cfg {Date/String} maxValue
17644      * The maximum allowed date. Can be either a Javascript date object or a string date in a
17645      * valid format (defaults to null).
17646      */
17647     maxValue : null,
17648     /**
17649      * @cfg {String} minText
17650      * The error text to display when the date in the cell is before minValue (defaults to
17651      * 'The date in this field must be after {minValue}').
17652      */
17653     minText : "The date in this field must be equal to or after {0}",
17654     /**
17655      * @cfg {String} maxText
17656      * The error text to display when the date in the cell is after maxValue (defaults to
17657      * 'The date in this field must be before {maxValue}').
17658      */
17659     maxText : "The date in this field must be equal to or before {0}",
17660     /**
17661      * @cfg {String} invalidText
17662      * The error text to display when the date in the field is invalid (defaults to
17663      * '{value} is not a valid date - it must be in the format {format}').
17664      */
17665     invalidText : "{0} is not a valid date - it must be in the format {1}",
17666     /**
17667      * @cfg {String} triggerClass
17668      * An additional CSS class used to style the trigger button.  The trigger will always get the
17669      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
17670      * which displays a calendar icon).
17671      */
17672     triggerClass : 'x-form-date-trigger',
17673     
17674
17675     /**
17676      * @cfg {Boolean} useIso
17677      * if enabled, then the date field will use a hidden field to store the 
17678      * real value as iso formated date. default (false)
17679      */ 
17680     useIso : false,
17681     /**
17682      * @cfg {String/Object} autoCreate
17683      * A DomHelper element spec, or true for a default element spec (defaults to
17684      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
17685      */ 
17686     // private
17687     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
17688     
17689     // private
17690     hiddenField: false,
17691     
17692     onRender : function(ct, position)
17693     {
17694         Roo.form.DateField.superclass.onRender.call(this, ct, position);
17695         if (this.useIso) {
17696             //this.el.dom.removeAttribute('name'); 
17697             Roo.log("Changing name?");
17698             this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
17699             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
17700                     'before', true);
17701             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
17702             // prevent input submission
17703             this.hiddenName = this.name;
17704         }
17705             
17706             
17707     },
17708     
17709     // private
17710     validateValue : function(value)
17711     {
17712         value = this.formatDate(value);
17713         if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
17714             Roo.log('super failed');
17715             return false;
17716         }
17717         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
17718              return true;
17719         }
17720         var svalue = value;
17721         value = this.parseDate(value);
17722         if(!value){
17723             Roo.log('parse date failed' + svalue);
17724             this.markInvalid(String.format(this.invalidText, svalue, this.format));
17725             return false;
17726         }
17727         var time = value.getTime();
17728         if(this.minValue && time < this.minValue.getTime()){
17729             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
17730             return false;
17731         }
17732         if(this.maxValue && time > this.maxValue.getTime()){
17733             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
17734             return false;
17735         }
17736         if(this.disabledDays){
17737             var day = value.getDay();
17738             for(var i = 0; i < this.disabledDays.length; i++) {
17739                 if(day === this.disabledDays[i]){
17740                     this.markInvalid(this.disabledDaysText);
17741                     return false;
17742                 }
17743             }
17744         }
17745         var fvalue = this.formatDate(value);
17746         if(this.ddMatch && this.ddMatch.test(fvalue)){
17747             this.markInvalid(String.format(this.disabledDatesText, fvalue));
17748             return false;
17749         }
17750         return true;
17751     },
17752
17753     // private
17754     // Provides logic to override the default TriggerField.validateBlur which just returns true
17755     validateBlur : function(){
17756         return !this.menu || !this.menu.isVisible();
17757     },
17758     
17759     getName: function()
17760     {
17761         // returns hidden if it's set..
17762         if (!this.rendered) {return ''};
17763         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
17764         
17765     },
17766
17767     /**
17768      * Returns the current date value of the date field.
17769      * @return {Date} The date value
17770      */
17771     getValue : function(){
17772         
17773         return  this.hiddenField ?
17774                 this.hiddenField.value :
17775                 this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
17776     },
17777
17778     /**
17779      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
17780      * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
17781      * (the default format used is "m/d/y").
17782      * <br />Usage:
17783      * <pre><code>
17784 //All of these calls set the same date value (May 4, 2006)
17785
17786 //Pass a date object:
17787 var dt = new Date('5/4/06');
17788 dateField.setValue(dt);
17789
17790 //Pass a date string (default format):
17791 dateField.setValue('5/4/06');
17792
17793 //Pass a date string (custom format):
17794 dateField.format = 'Y-m-d';
17795 dateField.setValue('2006-5-4');
17796 </code></pre>
17797      * @param {String/Date} date The date or valid date string
17798      */
17799     setValue : function(date){
17800         if (this.hiddenField) {
17801             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
17802         }
17803         Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
17804         // make sure the value field is always stored as a date..
17805         this.value = this.parseDate(date);
17806         
17807         
17808     },
17809
17810     // private
17811     parseDate : function(value){
17812                 
17813                 if (value instanceof Date) {
17814                         if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
17815                                 return  '';
17816                         }
17817                         return value;
17818                 }
17819                 
17820                 
17821         if(!value || value instanceof Date){
17822             return value;
17823         }
17824         var v = Date.parseDate(value, this.format);
17825          if (!v && this.useIso) {
17826             v = Date.parseDate(value, 'Y-m-d');
17827         }
17828         if(!v && this.altFormats){
17829             if(!this.altFormatsArray){
17830                 this.altFormatsArray = this.altFormats.split("|");
17831             }
17832             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
17833                 v = Date.parseDate(value, this.altFormatsArray[i]);
17834             }
17835         }
17836                 if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
17837                         v = '';
17838                 }
17839         return v;
17840     },
17841
17842     // private
17843     formatDate : function(date, fmt){
17844         return (!date || !(date instanceof Date)) ?
17845                date : date.dateFormat(fmt || this.format);
17846     },
17847
17848     // private
17849     menuListeners : {
17850         select: function(m, d){
17851             
17852             this.setValue(d);
17853             this.fireEvent('select', this, d);
17854         },
17855         show : function(){ // retain focus styling
17856             this.onFocus();
17857         },
17858         hide : function(){
17859             this.focus.defer(10, this);
17860             var ml = this.menuListeners;
17861             this.menu.un("select", ml.select,  this);
17862             this.menu.un("show", ml.show,  this);
17863             this.menu.un("hide", ml.hide,  this);
17864         }
17865     },
17866
17867     // private
17868     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
17869     onTriggerClick : function(){
17870         if(this.disabled){
17871             return;
17872         }
17873         if(this.menu == null){
17874             this.menu = new Roo.menu.DateMenu();
17875         }
17876         Roo.apply(this.menu.picker,  {
17877             showClear: this.allowBlank,
17878             minDate : this.minValue,
17879             maxDate : this.maxValue,
17880             disabledDatesRE : this.ddMatch,
17881             disabledDatesText : this.disabledDatesText,
17882             disabledDays : this.disabledDays,
17883             disabledDaysText : this.disabledDaysText,
17884             format : this.useIso ? 'Y-m-d' : this.format,
17885             minText : String.format(this.minText, this.formatDate(this.minValue)),
17886             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
17887         });
17888         this.menu.on(Roo.apply({}, this.menuListeners, {
17889             scope:this
17890         }));
17891         this.menu.picker.setValue(this.getValue() || new Date());
17892         this.menu.show(this.el, "tl-bl?");
17893     },
17894
17895     beforeBlur : function(){
17896         var v = this.parseDate(this.getRawValue());
17897         if(v){
17898             this.setValue(v);
17899         }
17900     },
17901
17902     /*@
17903      * overide
17904      * 
17905      */
17906     isDirty : function() {
17907         if(this.disabled) {
17908             return false;
17909         }
17910         
17911         if(typeof(this.startValue) === 'undefined'){
17912             return false;
17913         }
17914         
17915         return String(this.getValue()) !== String(this.startValue);
17916         
17917     },
17918     // @overide
17919     cleanLeadingSpace : function(e)
17920     {
17921        return;
17922     }
17923     
17924 });/*
17925  * Based on:
17926  * Ext JS Library 1.1.1
17927  * Copyright(c) 2006-2007, Ext JS, LLC.
17928  *
17929  * Originally Released Under LGPL - original licence link has changed is not relivant.
17930  *
17931  * Fork - LGPL
17932  * <script type="text/javascript">
17933  */
17934  
17935 /**
17936  * @class Roo.form.MonthField
17937  * @extends Roo.form.TriggerField
17938  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
17939 * @constructor
17940 * Create a new MonthField
17941 * @param {Object} config
17942  */
17943 Roo.form.MonthField = function(config){
17944     
17945     Roo.form.MonthField.superclass.constructor.call(this, config);
17946     
17947       this.addEvents({
17948          
17949         /**
17950          * @event select
17951          * Fires when a date is selected
17952              * @param {Roo.form.MonthFieeld} combo This combo box
17953              * @param {Date} date The date selected
17954              */
17955         'select' : true
17956          
17957     });
17958     
17959     
17960     if(typeof this.minValue == "string") {
17961         this.minValue = this.parseDate(this.minValue);
17962     }
17963     if(typeof this.maxValue == "string") {
17964         this.maxValue = this.parseDate(this.maxValue);
17965     }
17966     this.ddMatch = null;
17967     if(this.disabledDates){
17968         var dd = this.disabledDates;
17969         var re = "(?:";
17970         for(var i = 0; i < dd.length; i++){
17971             re += dd[i];
17972             if(i != dd.length-1) {
17973                 re += "|";
17974             }
17975         }
17976         this.ddMatch = new RegExp(re + ")");
17977     }
17978 };
17979
17980 Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
17981     /**
17982      * @cfg {String} format
17983      * The default date format string which can be overriden for localization support.  The format must be
17984      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
17985      */
17986     format : "M Y",
17987     /**
17988      * @cfg {String} altFormats
17989      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
17990      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
17991      */
17992     altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
17993     /**
17994      * @cfg {Array} disabledDays
17995      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
17996      */
17997     disabledDays : [0,1,2,3,4,5,6],
17998     /**
17999      * @cfg {String} disabledDaysText
18000      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
18001      */
18002     disabledDaysText : "Disabled",
18003     /**
18004      * @cfg {Array} disabledDates
18005      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
18006      * expression so they are very powerful. Some examples:
18007      * <ul>
18008      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
18009      * <li>["03/08", "09/16"] would disable those days for every year</li>
18010      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
18011      * <li>["03/../2006"] would disable every day in March 2006</li>
18012      * <li>["^03"] would disable every day in every March</li>
18013      * </ul>
18014      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
18015      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
18016      */
18017     disabledDates : null,
18018     /**
18019      * @cfg {String} disabledDatesText
18020      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
18021      */
18022     disabledDatesText : "Disabled",
18023     /**
18024      * @cfg {Date/String} minValue
18025      * The minimum allowed date. Can be either a Javascript date object or a string date in a
18026      * valid format (defaults to null).
18027      */
18028     minValue : null,
18029     /**
18030      * @cfg {Date/String} maxValue
18031      * The maximum allowed date. Can be either a Javascript date object or a string date in a
18032      * valid format (defaults to null).
18033      */
18034     maxValue : null,
18035     /**
18036      * @cfg {String} minText
18037      * The error text to display when the date in the cell is before minValue (defaults to
18038      * 'The date in this field must be after {minValue}').
18039      */
18040     minText : "The date in this field must be equal to or after {0}",
18041     /**
18042      * @cfg {String} maxTextf
18043      * The error text to display when the date in the cell is after maxValue (defaults to
18044      * 'The date in this field must be before {maxValue}').
18045      */
18046     maxText : "The date in this field must be equal to or before {0}",
18047     /**
18048      * @cfg {String} invalidText
18049      * The error text to display when the date in the field is invalid (defaults to
18050      * '{value} is not a valid date - it must be in the format {format}').
18051      */
18052     invalidText : "{0} is not a valid date - it must be in the format {1}",
18053     /**
18054      * @cfg {String} triggerClass
18055      * An additional CSS class used to style the trigger button.  The trigger will always get the
18056      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
18057      * which displays a calendar icon).
18058      */
18059     triggerClass : 'x-form-date-trigger',
18060     
18061
18062     /**
18063      * @cfg {Boolean} useIso
18064      * if enabled, then the date field will use a hidden field to store the 
18065      * real value as iso formated date. default (true)
18066      */ 
18067     useIso : true,
18068     /**
18069      * @cfg {String/Object} autoCreate
18070      * A DomHelper element spec, or true for a default element spec (defaults to
18071      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
18072      */ 
18073     // private
18074     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
18075     
18076     // private
18077     hiddenField: false,
18078     
18079     hideMonthPicker : false,
18080     
18081     onRender : function(ct, position)
18082     {
18083         Roo.form.MonthField.superclass.onRender.call(this, ct, position);
18084         if (this.useIso) {
18085             this.el.dom.removeAttribute('name'); 
18086             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
18087                     'before', true);
18088             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
18089             // prevent input submission
18090             this.hiddenName = this.name;
18091         }
18092             
18093             
18094     },
18095     
18096     // private
18097     validateValue : function(value)
18098     {
18099         value = this.formatDate(value);
18100         if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
18101             return false;
18102         }
18103         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
18104              return true;
18105         }
18106         var svalue = value;
18107         value = this.parseDate(value);
18108         if(!value){
18109             this.markInvalid(String.format(this.invalidText, svalue, this.format));
18110             return false;
18111         }
18112         var time = value.getTime();
18113         if(this.minValue && time < this.minValue.getTime()){
18114             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
18115             return false;
18116         }
18117         if(this.maxValue && time > this.maxValue.getTime()){
18118             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
18119             return false;
18120         }
18121         /*if(this.disabledDays){
18122             var day = value.getDay();
18123             for(var i = 0; i < this.disabledDays.length; i++) {
18124                 if(day === this.disabledDays[i]){
18125                     this.markInvalid(this.disabledDaysText);
18126                     return false;
18127                 }
18128             }
18129         }
18130         */
18131         var fvalue = this.formatDate(value);
18132         /*if(this.ddMatch && this.ddMatch.test(fvalue)){
18133             this.markInvalid(String.format(this.disabledDatesText, fvalue));
18134             return false;
18135         }
18136         */
18137         return true;
18138     },
18139
18140     // private
18141     // Provides logic to override the default TriggerField.validateBlur which just returns true
18142     validateBlur : function(){
18143         return !this.menu || !this.menu.isVisible();
18144     },
18145
18146     /**
18147      * Returns the current date value of the date field.
18148      * @return {Date} The date value
18149      */
18150     getValue : function(){
18151         
18152         
18153         
18154         return  this.hiddenField ?
18155                 this.hiddenField.value :
18156                 this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
18157     },
18158
18159     /**
18160      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
18161      * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
18162      * (the default format used is "m/d/y").
18163      * <br />Usage:
18164      * <pre><code>
18165 //All of these calls set the same date value (May 4, 2006)
18166
18167 //Pass a date object:
18168 var dt = new Date('5/4/06');
18169 monthField.setValue(dt);
18170
18171 //Pass a date string (default format):
18172 monthField.setValue('5/4/06');
18173
18174 //Pass a date string (custom format):
18175 monthField.format = 'Y-m-d';
18176 monthField.setValue('2006-5-4');
18177 </code></pre>
18178      * @param {String/Date} date The date or valid date string
18179      */
18180     setValue : function(date){
18181         Roo.log('month setValue' + date);
18182         // can only be first of month..
18183         
18184         var val = this.parseDate(date);
18185         
18186         if (this.hiddenField) {
18187             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
18188         }
18189         Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
18190         this.value = this.parseDate(date);
18191     },
18192
18193     // private
18194     parseDate : function(value){
18195         if(!value || value instanceof Date){
18196             value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
18197             return value;
18198         }
18199         var v = Date.parseDate(value, this.format);
18200         if (!v && this.useIso) {
18201             v = Date.parseDate(value, 'Y-m-d');
18202         }
18203         if (v) {
18204             // 
18205             v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
18206         }
18207         
18208         
18209         if(!v && this.altFormats){
18210             if(!this.altFormatsArray){
18211                 this.altFormatsArray = this.altFormats.split("|");
18212             }
18213             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
18214                 v = Date.parseDate(value, this.altFormatsArray[i]);
18215             }
18216         }
18217         return v;
18218     },
18219
18220     // private
18221     formatDate : function(date, fmt){
18222         return (!date || !(date instanceof Date)) ?
18223                date : date.dateFormat(fmt || this.format);
18224     },
18225
18226     // private
18227     menuListeners : {
18228         select: function(m, d){
18229             this.setValue(d);
18230             this.fireEvent('select', this, d);
18231         },
18232         show : function(){ // retain focus styling
18233             this.onFocus();
18234         },
18235         hide : function(){
18236             this.focus.defer(10, this);
18237             var ml = this.menuListeners;
18238             this.menu.un("select", ml.select,  this);
18239             this.menu.un("show", ml.show,  this);
18240             this.menu.un("hide", ml.hide,  this);
18241         }
18242     },
18243     // private
18244     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
18245     onTriggerClick : function(){
18246         if(this.disabled){
18247             return;
18248         }
18249         if(this.menu == null){
18250             this.menu = new Roo.menu.DateMenu();
18251            
18252         }
18253         
18254         Roo.apply(this.menu.picker,  {
18255             
18256             showClear: this.allowBlank,
18257             minDate : this.minValue,
18258             maxDate : this.maxValue,
18259             disabledDatesRE : this.ddMatch,
18260             disabledDatesText : this.disabledDatesText,
18261             
18262             format : this.useIso ? 'Y-m-d' : this.format,
18263             minText : String.format(this.minText, this.formatDate(this.minValue)),
18264             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
18265             
18266         });
18267          this.menu.on(Roo.apply({}, this.menuListeners, {
18268             scope:this
18269         }));
18270        
18271         
18272         var m = this.menu;
18273         var p = m.picker;
18274         
18275         // hide month picker get's called when we called by 'before hide';
18276         
18277         var ignorehide = true;
18278         p.hideMonthPicker  = function(disableAnim){
18279             if (ignorehide) {
18280                 return;
18281             }
18282              if(this.monthPicker){
18283                 Roo.log("hideMonthPicker called");
18284                 if(disableAnim === true){
18285                     this.monthPicker.hide();
18286                 }else{
18287                     this.monthPicker.slideOut('t', {duration:.2});
18288                     p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
18289                     p.fireEvent("select", this, this.value);
18290                     m.hide();
18291                 }
18292             }
18293         }
18294         
18295         Roo.log('picker set value');
18296         Roo.log(this.getValue());
18297         p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
18298         m.show(this.el, 'tl-bl?');
18299         ignorehide  = false;
18300         // this will trigger hideMonthPicker..
18301         
18302         
18303         // hidden the day picker
18304         Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
18305         
18306         
18307         
18308       
18309         
18310         p.showMonthPicker.defer(100, p);
18311     
18312         
18313        
18314     },
18315
18316     beforeBlur : function(){
18317         var v = this.parseDate(this.getRawValue());
18318         if(v){
18319             this.setValue(v);
18320         }
18321     }
18322
18323     /** @cfg {Boolean} grow @hide */
18324     /** @cfg {Number} growMin @hide */
18325     /** @cfg {Number} growMax @hide */
18326     /**
18327      * @hide
18328      * @method autoSize
18329      */
18330 });/*
18331  * Based on:
18332  * Ext JS Library 1.1.1
18333  * Copyright(c) 2006-2007, Ext JS, LLC.
18334  *
18335  * Originally Released Under LGPL - original licence link has changed is not relivant.
18336  *
18337  * Fork - LGPL
18338  * <script type="text/javascript">
18339  */
18340  
18341
18342 /**
18343  * @class Roo.form.ComboBox
18344  * @extends Roo.form.TriggerField
18345  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
18346  * @constructor
18347  * Create a new ComboBox.
18348  * @param {Object} config Configuration options
18349  */
18350 Roo.form.ComboBox = function(config){
18351     Roo.form.ComboBox.superclass.constructor.call(this, config);
18352     this.addEvents({
18353         /**
18354          * @event expand
18355          * Fires when the dropdown list is expanded
18356              * @param {Roo.form.ComboBox} combo This combo box
18357              */
18358         'expand' : true,
18359         /**
18360          * @event collapse
18361          * Fires when the dropdown list is collapsed
18362              * @param {Roo.form.ComboBox} combo This combo box
18363              */
18364         'collapse' : true,
18365         /**
18366          * @event beforeselect
18367          * Fires before a list item is selected. Return false to cancel the selection.
18368              * @param {Roo.form.ComboBox} combo This combo box
18369              * @param {Roo.data.Record} record The data record returned from the underlying store
18370              * @param {Number} index The index of the selected item in the dropdown list
18371              */
18372         'beforeselect' : true,
18373         /**
18374          * @event select
18375          * Fires when a list item is selected
18376              * @param {Roo.form.ComboBox} combo This combo box
18377              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
18378              * @param {Number} index The index of the selected item in the dropdown list
18379              */
18380         'select' : true,
18381         /**
18382          * @event beforequery
18383          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
18384          * The event object passed has these properties:
18385              * @param {Roo.form.ComboBox} combo This combo box
18386              * @param {String} query The query
18387              * @param {Boolean} forceAll true to force "all" query
18388              * @param {Boolean} cancel true to cancel the query
18389              * @param {Object} e The query event object
18390              */
18391         'beforequery': true,
18392          /**
18393          * @event add
18394          * Fires when the 'add' icon is pressed (add a listener to enable add button)
18395              * @param {Roo.form.ComboBox} combo This combo box
18396              */
18397         'add' : true,
18398         /**
18399          * @event edit
18400          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
18401              * @param {Roo.form.ComboBox} combo This combo box
18402              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
18403              */
18404         'edit' : true
18405         
18406         
18407     });
18408     if(this.transform){
18409         this.allowDomMove = false;
18410         var s = Roo.getDom(this.transform);
18411         if(!this.hiddenName){
18412             this.hiddenName = s.name;
18413         }
18414         if(!this.store){
18415             this.mode = 'local';
18416             var d = [], opts = s.options;
18417             for(var i = 0, len = opts.length;i < len; i++){
18418                 var o = opts[i];
18419                 var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
18420                 if(o.selected) {
18421                     this.value = value;
18422                 }
18423                 d.push([value, o.text]);
18424             }
18425             this.store = new Roo.data.SimpleStore({
18426                 'id': 0,
18427                 fields: ['value', 'text'],
18428                 data : d
18429             });
18430             this.valueField = 'value';
18431             this.displayField = 'text';
18432         }
18433         s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
18434         if(!this.lazyRender){
18435             this.target = true;
18436             this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
18437             s.parentNode.removeChild(s); // remove it
18438             this.render(this.el.parentNode);
18439         }else{
18440             s.parentNode.removeChild(s); // remove it
18441         }
18442
18443     }
18444     if (this.store) {
18445         this.store = Roo.factory(this.store, Roo.data);
18446     }
18447     
18448     this.selectedIndex = -1;
18449     if(this.mode == 'local'){
18450         if(config.queryDelay === undefined){
18451             this.queryDelay = 10;
18452         }
18453         if(config.minChars === undefined){
18454             this.minChars = 0;
18455         }
18456     }
18457 };
18458
18459 Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
18460     /**
18461      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
18462      */
18463     /**
18464      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
18465      * rendering into an Roo.Editor, defaults to false)
18466      */
18467     /**
18468      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
18469      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
18470      */
18471     /**
18472      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
18473      */
18474     /**
18475      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
18476      * the dropdown list (defaults to undefined, with no header element)
18477      */
18478
18479      /**
18480      * @cfg {String/Roo.Template} tpl The template to use to render the output
18481      */
18482      
18483     // private
18484     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
18485     /**
18486      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
18487      */
18488     listWidth: undefined,
18489     /**
18490      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
18491      * mode = 'remote' or 'text' if mode = 'local')
18492      */
18493     displayField: undefined,
18494     /**
18495      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
18496      * mode = 'remote' or 'value' if mode = 'local'). 
18497      * Note: use of a valueField requires the user make a selection
18498      * in order for a value to be mapped.
18499      */
18500     valueField: undefined,
18501     
18502     
18503     /**
18504      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
18505      * field's data value (defaults to the underlying DOM element's name)
18506      */
18507     hiddenName: undefined,
18508     /**
18509      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
18510      */
18511     listClass: '',
18512     /**
18513      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
18514      */
18515     selectedClass: 'x-combo-selected',
18516     /**
18517      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
18518      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
18519      * which displays a downward arrow icon).
18520      */
18521     triggerClass : 'x-form-arrow-trigger',
18522     /**
18523      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
18524      */
18525     shadow:'sides',
18526     /**
18527      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
18528      * anchor positions (defaults to 'tl-bl')
18529      */
18530     listAlign: 'tl-bl?',
18531     /**
18532      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
18533      */
18534     maxHeight: 300,
18535     /**
18536      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
18537      * query specified by the allQuery config option (defaults to 'query')
18538      */
18539     triggerAction: 'query',
18540     /**
18541      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
18542      * (defaults to 4, does not apply if editable = false)
18543      */
18544     minChars : 4,
18545     /**
18546      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
18547      * delay (typeAheadDelay) if it matches a known value (defaults to false)
18548      */
18549     typeAhead: false,
18550     /**
18551      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
18552      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
18553      */
18554     queryDelay: 500,
18555     /**
18556      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
18557      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
18558      */
18559     pageSize: 0,
18560     /**
18561      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
18562      * when editable = true (defaults to false)
18563      */
18564     selectOnFocus:false,
18565     /**
18566      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
18567      */
18568     queryParam: 'query',
18569     /**
18570      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
18571      * when mode = 'remote' (defaults to 'Loading...')
18572      */
18573     loadingText: 'Loading...',
18574     /**
18575      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
18576      */
18577     resizable: false,
18578     /**
18579      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
18580      */
18581     handleHeight : 8,
18582     /**
18583      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
18584      * traditional select (defaults to true)
18585      */
18586     editable: true,
18587     /**
18588      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
18589      */
18590     allQuery: '',
18591     /**
18592      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
18593      */
18594     mode: 'remote',
18595     /**
18596      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
18597      * listWidth has a higher value)
18598      */
18599     minListWidth : 70,
18600     /**
18601      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
18602      * allow the user to set arbitrary text into the field (defaults to false)
18603      */
18604     forceSelection:false,
18605     /**
18606      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
18607      * if typeAhead = true (defaults to 250)
18608      */
18609     typeAheadDelay : 250,
18610     /**
18611      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
18612      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
18613      */
18614     valueNotFoundText : undefined,
18615     /**
18616      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
18617      */
18618     blockFocus : false,
18619     
18620     /**
18621      * @cfg {Boolean} disableClear Disable showing of clear button.
18622      */
18623     disableClear : false,
18624     /**
18625      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
18626      */
18627     alwaysQuery : false,
18628     
18629     //private
18630     addicon : false,
18631     editicon: false,
18632     
18633     // element that contains real text value.. (when hidden is used..)
18634      
18635     // private
18636     onRender : function(ct, position)
18637     {
18638         Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
18639         
18640         if(this.hiddenName){
18641             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
18642                     'before', true);
18643             this.hiddenField.value =
18644                 this.hiddenValue !== undefined ? this.hiddenValue :
18645                 this.value !== undefined ? this.value : '';
18646
18647             // prevent input submission
18648             this.el.dom.removeAttribute('name');
18649              
18650              
18651         }
18652         
18653         if(Roo.isGecko){
18654             this.el.dom.setAttribute('autocomplete', 'off');
18655         }
18656
18657         var cls = 'x-combo-list';
18658
18659         this.list = new Roo.Layer({
18660             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
18661         });
18662
18663         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
18664         this.list.setWidth(lw);
18665         this.list.swallowEvent('mousewheel');
18666         this.assetHeight = 0;
18667
18668         if(this.title){
18669             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
18670             this.assetHeight += this.header.getHeight();
18671         }
18672
18673         this.innerList = this.list.createChild({cls:cls+'-inner'});
18674         this.innerList.on('mouseover', this.onViewOver, this);
18675         this.innerList.on('mousemove', this.onViewMove, this);
18676         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
18677         
18678         if(this.allowBlank && !this.pageSize && !this.disableClear){
18679             this.footer = this.list.createChild({cls:cls+'-ft'});
18680             this.pageTb = new Roo.Toolbar(this.footer);
18681            
18682         }
18683         if(this.pageSize){
18684             this.footer = this.list.createChild({cls:cls+'-ft'});
18685             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
18686                     {pageSize: this.pageSize});
18687             
18688         }
18689         
18690         if (this.pageTb && this.allowBlank && !this.disableClear) {
18691             var _this = this;
18692             this.pageTb.add(new Roo.Toolbar.Fill(), {
18693                 cls: 'x-btn-icon x-btn-clear',
18694                 text: '&#160;',
18695                 handler: function()
18696                 {
18697                     _this.collapse();
18698                     _this.clearValue();
18699                     _this.onSelect(false, -1);
18700                 }
18701             });
18702         }
18703         if (this.footer) {
18704             this.assetHeight += this.footer.getHeight();
18705         }
18706         
18707
18708         if(!this.tpl){
18709             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
18710         }
18711
18712         this.view = new Roo.View(this.innerList, this.tpl, {
18713             singleSelect:true,
18714             store: this.store,
18715             selectedClass: this.selectedClass
18716         });
18717
18718         this.view.on('click', this.onViewClick, this);
18719
18720         this.store.on('beforeload', this.onBeforeLoad, this);
18721         this.store.on('load', this.onLoad, this);
18722         this.store.on('loadexception', this.onLoadException, this);
18723
18724         if(this.resizable){
18725             this.resizer = new Roo.Resizable(this.list,  {
18726                pinned:true, handles:'se'
18727             });
18728             this.resizer.on('resize', function(r, w, h){
18729                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
18730                 this.listWidth = w;
18731                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
18732                 this.restrictHeight();
18733             }, this);
18734             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
18735         }
18736         if(!this.editable){
18737             this.editable = true;
18738             this.setEditable(false);
18739         }  
18740         
18741         
18742         if (typeof(this.events.add.listeners) != 'undefined') {
18743             
18744             this.addicon = this.wrap.createChild(
18745                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
18746        
18747             this.addicon.on('click', function(e) {
18748                 this.fireEvent('add', this);
18749             }, this);
18750         }
18751         if (typeof(this.events.edit.listeners) != 'undefined') {
18752             
18753             this.editicon = this.wrap.createChild(
18754                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
18755             if (this.addicon) {
18756                 this.editicon.setStyle('margin-left', '40px');
18757             }
18758             this.editicon.on('click', function(e) {
18759                 
18760                 // we fire even  if inothing is selected..
18761                 this.fireEvent('edit', this, this.lastData );
18762                 
18763             }, this);
18764         }
18765         
18766         
18767         
18768     },
18769
18770     // private
18771     initEvents : function(){
18772         Roo.form.ComboBox.superclass.initEvents.call(this);
18773
18774         this.keyNav = new Roo.KeyNav(this.el, {
18775             "up" : function(e){
18776                 this.inKeyMode = true;
18777                 this.selectPrev();
18778             },
18779
18780             "down" : function(e){
18781                 if(!this.isExpanded()){
18782                     this.onTriggerClick();
18783                 }else{
18784                     this.inKeyMode = true;
18785                     this.selectNext();
18786                 }
18787             },
18788
18789             "enter" : function(e){
18790                 this.onViewClick();
18791                 //return true;
18792             },
18793
18794             "esc" : function(e){
18795                 this.collapse();
18796             },
18797
18798             "tab" : function(e){
18799                 this.onViewClick(false);
18800                 this.fireEvent("specialkey", this, e);
18801                 return true;
18802             },
18803
18804             scope : this,
18805
18806             doRelay : function(foo, bar, hname){
18807                 if(hname == 'down' || this.scope.isExpanded()){
18808                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
18809                 }
18810                 return true;
18811             },
18812
18813             forceKeyDown: true
18814         });
18815         this.queryDelay = Math.max(this.queryDelay || 10,
18816                 this.mode == 'local' ? 10 : 250);
18817         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
18818         if(this.typeAhead){
18819             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
18820         }
18821         if(this.editable !== false){
18822             this.el.on("keyup", this.onKeyUp, this);
18823         }
18824         if(this.forceSelection){
18825             this.on('blur', this.doForce, this);
18826         }
18827     },
18828
18829     onDestroy : function(){
18830         if(this.view){
18831             this.view.setStore(null);
18832             this.view.el.removeAllListeners();
18833             this.view.el.remove();
18834             this.view.purgeListeners();
18835         }
18836         if(this.list){
18837             this.list.destroy();
18838         }
18839         if(this.store){
18840             this.store.un('beforeload', this.onBeforeLoad, this);
18841             this.store.un('load', this.onLoad, this);
18842             this.store.un('loadexception', this.onLoadException, this);
18843         }
18844         Roo.form.ComboBox.superclass.onDestroy.call(this);
18845     },
18846
18847     // private
18848     fireKey : function(e){
18849         if(e.isNavKeyPress() && !this.list.isVisible()){
18850             this.fireEvent("specialkey", this, e);
18851         }
18852     },
18853
18854     // private
18855     onResize: function(w, h){
18856         Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
18857         
18858         if(typeof w != 'number'){
18859             // we do not handle it!?!?
18860             return;
18861         }
18862         var tw = this.trigger.getWidth();
18863         tw += this.addicon ? this.addicon.getWidth() : 0;
18864         tw += this.editicon ? this.editicon.getWidth() : 0;
18865         var x = w - tw;
18866         this.el.setWidth( this.adjustWidth('input', x));
18867             
18868         this.trigger.setStyle('left', x+'px');
18869         
18870         if(this.list && this.listWidth === undefined){
18871             var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
18872             this.list.setWidth(lw);
18873             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
18874         }
18875         
18876     
18877         
18878     },
18879
18880     /**
18881      * Allow or prevent the user from directly editing the field text.  If false is passed,
18882      * the user will only be able to select from the items defined in the dropdown list.  This method
18883      * is the runtime equivalent of setting the 'editable' config option at config time.
18884      * @param {Boolean} value True to allow the user to directly edit the field text
18885      */
18886     setEditable : function(value){
18887         if(value == this.editable){
18888             return;
18889         }
18890         this.editable = value;
18891         if(!value){
18892             this.el.dom.setAttribute('readOnly', true);
18893             this.el.on('mousedown', this.onTriggerClick,  this);
18894             this.el.addClass('x-combo-noedit');
18895         }else{
18896             this.el.dom.setAttribute('readOnly', false);
18897             this.el.un('mousedown', this.onTriggerClick,  this);
18898             this.el.removeClass('x-combo-noedit');
18899         }
18900     },
18901
18902     // private
18903     onBeforeLoad : function(){
18904         if(!this.hasFocus){
18905             return;
18906         }
18907         this.innerList.update(this.loadingText ?
18908                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
18909         this.restrictHeight();
18910         this.selectedIndex = -1;
18911     },
18912
18913     // private
18914     onLoad : function(){
18915         if(!this.hasFocus){
18916             return;
18917         }
18918         if(this.store.getCount() > 0){
18919             this.expand();
18920             this.restrictHeight();
18921             if(this.lastQuery == this.allQuery){
18922                 if(this.editable){
18923                     this.el.dom.select();
18924                 }
18925                 if(!this.selectByValue(this.value, true)){
18926                     this.select(0, true);
18927                 }
18928             }else{
18929                 this.selectNext();
18930                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
18931                     this.taTask.delay(this.typeAheadDelay);
18932                 }
18933             }
18934         }else{
18935             this.onEmptyResults();
18936         }
18937         //this.el.focus();
18938     },
18939     // private
18940     onLoadException : function()
18941     {
18942         this.collapse();
18943         Roo.log(this.store.reader.jsonData);
18944         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
18945             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
18946         }
18947         
18948         
18949     },
18950     // private
18951     onTypeAhead : function(){
18952         if(this.store.getCount() > 0){
18953             var r = this.store.getAt(0);
18954             var newValue = r.data[this.displayField];
18955             var len = newValue.length;
18956             var selStart = this.getRawValue().length;
18957             if(selStart != len){
18958                 this.setRawValue(newValue);
18959                 this.selectText(selStart, newValue.length);
18960             }
18961         }
18962     },
18963
18964     // private
18965     onSelect : function(record, index){
18966         if(this.fireEvent('beforeselect', this, record, index) !== false){
18967             this.setFromData(index > -1 ? record.data : false);
18968             this.collapse();
18969             this.fireEvent('select', this, record, index);
18970         }
18971     },
18972
18973     /**
18974      * Returns the currently selected field value or empty string if no value is set.
18975      * @return {String} value The selected value
18976      */
18977     getValue : function(){
18978         if(this.valueField){
18979             return typeof this.value != 'undefined' ? this.value : '';
18980         }
18981         return Roo.form.ComboBox.superclass.getValue.call(this);
18982     },
18983
18984     /**
18985      * Clears any text/value currently set in the field
18986      */
18987     clearValue : function(){
18988         if(this.hiddenField){
18989             this.hiddenField.value = '';
18990         }
18991         this.value = '';
18992         this.setRawValue('');
18993         this.lastSelectionText = '';
18994         
18995     },
18996
18997     /**
18998      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
18999      * will be displayed in the field.  If the value does not match the data value of an existing item,
19000      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
19001      * Otherwise the field will be blank (although the value will still be set).
19002      * @param {String} value The value to match
19003      */
19004     setValue : function(v){
19005         var text = v;
19006         if(this.valueField){
19007             var r = this.findRecord(this.valueField, v);
19008             if(r){
19009                 text = r.data[this.displayField];
19010             }else if(this.valueNotFoundText !== undefined){
19011                 text = this.valueNotFoundText;
19012             }
19013         }
19014         this.lastSelectionText = text;
19015         if(this.hiddenField){
19016             this.hiddenField.value = v;
19017         }
19018         Roo.form.ComboBox.superclass.setValue.call(this, text);
19019         this.value = v;
19020     },
19021     /**
19022      * @property {Object} the last set data for the element
19023      */
19024     
19025     lastData : false,
19026     /**
19027      * Sets the value of the field based on a object which is related to the record format for the store.
19028      * @param {Object} value the value to set as. or false on reset?
19029      */
19030     setFromData : function(o){
19031         var dv = ''; // display value
19032         var vv = ''; // value value..
19033         this.lastData = o;
19034         if (this.displayField) {
19035             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
19036         } else {
19037             // this is an error condition!!!
19038             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
19039         }
19040         
19041         if(this.valueField){
19042             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
19043         }
19044         if(this.hiddenField){
19045             this.hiddenField.value = vv;
19046             
19047             this.lastSelectionText = dv;
19048             Roo.form.ComboBox.superclass.setValue.call(this, dv);
19049             this.value = vv;
19050             return;
19051         }
19052         // no hidden field.. - we store the value in 'value', but still display
19053         // display field!!!!
19054         this.lastSelectionText = dv;
19055         Roo.form.ComboBox.superclass.setValue.call(this, dv);
19056         this.value = vv;
19057         
19058         
19059     },
19060     // private
19061     reset : function(){
19062         // overridden so that last data is reset..
19063         this.setValue(this.resetValue);
19064         this.originalValue = this.getValue();
19065         this.clearInvalid();
19066         this.lastData = false;
19067         if (this.view) {
19068             this.view.clearSelections();
19069         }
19070     },
19071     // private
19072     findRecord : function(prop, value){
19073         var record;
19074         if(this.store.getCount() > 0){
19075             this.store.each(function(r){
19076                 if(r.data[prop] == value){
19077                     record = r;
19078                     return false;
19079                 }
19080                 return true;
19081             });
19082         }
19083         return record;
19084     },
19085     
19086     getName: function()
19087     {
19088         // returns hidden if it's set..
19089         if (!this.rendered) {return ''};
19090         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
19091         
19092     },
19093     // private
19094     onViewMove : function(e, t){
19095         this.inKeyMode = false;
19096     },
19097
19098     // private
19099     onViewOver : function(e, t){
19100         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
19101             return;
19102         }
19103         var item = this.view.findItemFromChild(t);
19104         if(item){
19105             var index = this.view.indexOf(item);
19106             this.select(index, false);
19107         }
19108     },
19109
19110     // private
19111     onViewClick : function(doFocus)
19112     {
19113         var index = this.view.getSelectedIndexes()[0];
19114         var r = this.store.getAt(index);
19115         if(r){
19116             this.onSelect(r, index);
19117         }
19118         if(doFocus !== false && !this.blockFocus){
19119             this.el.focus();
19120         }
19121     },
19122
19123     // private
19124     restrictHeight : function(){
19125         this.innerList.dom.style.height = '';
19126         var inner = this.innerList.dom;
19127         var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
19128         this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
19129         this.list.beginUpdate();
19130         this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
19131         this.list.alignTo(this.el, this.listAlign);
19132         this.list.endUpdate();
19133     },
19134
19135     // private
19136     onEmptyResults : function(){
19137         this.collapse();
19138     },
19139
19140     /**
19141      * Returns true if the dropdown list is expanded, else false.
19142      */
19143     isExpanded : function(){
19144         return this.list.isVisible();
19145     },
19146
19147     /**
19148      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
19149      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
19150      * @param {String} value The data value of the item to select
19151      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
19152      * selected item if it is not currently in view (defaults to true)
19153      * @return {Boolean} True if the value matched an item in the list, else false
19154      */
19155     selectByValue : function(v, scrollIntoView){
19156         if(v !== undefined && v !== null){
19157             var r = this.findRecord(this.valueField || this.displayField, v);
19158             if(r){
19159                 this.select(this.store.indexOf(r), scrollIntoView);
19160                 return true;
19161             }
19162         }
19163         return false;
19164     },
19165
19166     /**
19167      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
19168      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
19169      * @param {Number} index The zero-based index of the list item to select
19170      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
19171      * selected item if it is not currently in view (defaults to true)
19172      */
19173     select : function(index, scrollIntoView){
19174         this.selectedIndex = index;
19175         this.view.select(index);
19176         if(scrollIntoView !== false){
19177             var el = this.view.getNode(index);
19178             if(el){
19179                 this.innerList.scrollChildIntoView(el, false);
19180             }
19181         }
19182     },
19183
19184     // private
19185     selectNext : function(){
19186         var ct = this.store.getCount();
19187         if(ct > 0){
19188             if(this.selectedIndex == -1){
19189                 this.select(0);
19190             }else if(this.selectedIndex < ct-1){
19191                 this.select(this.selectedIndex+1);
19192             }
19193         }
19194     },
19195
19196     // private
19197     selectPrev : function(){
19198         var ct = this.store.getCount();
19199         if(ct > 0){
19200             if(this.selectedIndex == -1){
19201                 this.select(0);
19202             }else if(this.selectedIndex != 0){
19203                 this.select(this.selectedIndex-1);
19204             }
19205         }
19206     },
19207
19208     // private
19209     onKeyUp : function(e){
19210         if(this.editable !== false && !e.isSpecialKey()){
19211             this.lastKey = e.getKey();
19212             this.dqTask.delay(this.queryDelay);
19213         }
19214     },
19215
19216     // private
19217     validateBlur : function(){
19218         return !this.list || !this.list.isVisible();   
19219     },
19220
19221     // private
19222     initQuery : function(){
19223         this.doQuery(this.getRawValue());
19224     },
19225
19226     // private
19227     doForce : function(){
19228         if(this.el.dom.value.length > 0){
19229             this.el.dom.value =
19230                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
19231              
19232         }
19233     },
19234
19235     /**
19236      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
19237      * query allowing the query action to be canceled if needed.
19238      * @param {String} query The SQL query to execute
19239      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
19240      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
19241      * saved in the current store (defaults to false)
19242      */
19243     doQuery : function(q, forceAll){
19244         if(q === undefined || q === null){
19245             q = '';
19246         }
19247         var qe = {
19248             query: q,
19249             forceAll: forceAll,
19250             combo: this,
19251             cancel:false
19252         };
19253         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
19254             return false;
19255         }
19256         q = qe.query;
19257         forceAll = qe.forceAll;
19258         if(forceAll === true || (q.length >= this.minChars)){
19259             if(this.lastQuery != q || this.alwaysQuery){
19260                 this.lastQuery = q;
19261                 if(this.mode == 'local'){
19262                     this.selectedIndex = -1;
19263                     if(forceAll){
19264                         this.store.clearFilter();
19265                     }else{
19266                         this.store.filter(this.displayField, q);
19267                     }
19268                     this.onLoad();
19269                 }else{
19270                     this.store.baseParams[this.queryParam] = q;
19271                     this.store.load({
19272                         params: this.getParams(q)
19273                     });
19274                     this.expand();
19275                 }
19276             }else{
19277                 this.selectedIndex = -1;
19278                 this.onLoad();   
19279             }
19280         }
19281     },
19282
19283     // private
19284     getParams : function(q){
19285         var p = {};
19286         //p[this.queryParam] = q;
19287         if(this.pageSize){
19288             p.start = 0;
19289             p.limit = this.pageSize;
19290         }
19291         return p;
19292     },
19293
19294     /**
19295      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
19296      */
19297     collapse : function(){
19298         if(!this.isExpanded()){
19299             return;
19300         }
19301         this.list.hide();
19302         Roo.get(document).un('mousedown', this.collapseIf, this);
19303         Roo.get(document).un('mousewheel', this.collapseIf, this);
19304         if (!this.editable) {
19305             Roo.get(document).un('keydown', this.listKeyPress, this);
19306         }
19307         this.fireEvent('collapse', this);
19308     },
19309
19310     // private
19311     collapseIf : function(e){
19312         if(!e.within(this.wrap) && !e.within(this.list)){
19313             this.collapse();
19314         }
19315     },
19316
19317     /**
19318      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
19319      */
19320     expand : function(){
19321         if(this.isExpanded() || !this.hasFocus){
19322             return;
19323         }
19324         this.list.alignTo(this.el, this.listAlign);
19325         this.list.show();
19326         Roo.get(document).on('mousedown', this.collapseIf, this);
19327         Roo.get(document).on('mousewheel', this.collapseIf, this);
19328         if (!this.editable) {
19329             Roo.get(document).on('keydown', this.listKeyPress, this);
19330         }
19331         
19332         this.fireEvent('expand', this);
19333     },
19334
19335     // private
19336     // Implements the default empty TriggerField.onTriggerClick function
19337     onTriggerClick : function(){
19338         if(this.disabled){
19339             return;
19340         }
19341         if(this.isExpanded()){
19342             this.collapse();
19343             if (!this.blockFocus) {
19344                 this.el.focus();
19345             }
19346             
19347         }else {
19348             this.hasFocus = true;
19349             if(this.triggerAction == 'all') {
19350                 this.doQuery(this.allQuery, true);
19351             } else {
19352                 this.doQuery(this.getRawValue());
19353             }
19354             if (!this.blockFocus) {
19355                 this.el.focus();
19356             }
19357         }
19358     },
19359     listKeyPress : function(e)
19360     {
19361         //Roo.log('listkeypress');
19362         // scroll to first matching element based on key pres..
19363         if (e.isSpecialKey()) {
19364             return false;
19365         }
19366         var k = String.fromCharCode(e.getKey()).toUpperCase();
19367         //Roo.log(k);
19368         var match  = false;
19369         var csel = this.view.getSelectedNodes();
19370         var cselitem = false;
19371         if (csel.length) {
19372             var ix = this.view.indexOf(csel[0]);
19373             cselitem  = this.store.getAt(ix);
19374             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
19375                 cselitem = false;
19376             }
19377             
19378         }
19379         
19380         this.store.each(function(v) { 
19381             if (cselitem) {
19382                 // start at existing selection.
19383                 if (cselitem.id == v.id) {
19384                     cselitem = false;
19385                 }
19386                 return;
19387             }
19388                 
19389             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
19390                 match = this.store.indexOf(v);
19391                 return false;
19392             }
19393         }, this);
19394         
19395         if (match === false) {
19396             return true; // no more action?
19397         }
19398         // scroll to?
19399         this.view.select(match);
19400         var sn = Roo.get(this.view.getSelectedNodes()[0]);
19401         sn.scrollIntoView(sn.dom.parentNode, false);
19402     } 
19403
19404     /** 
19405     * @cfg {Boolean} grow 
19406     * @hide 
19407     */
19408     /** 
19409     * @cfg {Number} growMin 
19410     * @hide 
19411     */
19412     /** 
19413     * @cfg {Number} growMax 
19414     * @hide 
19415     */
19416     /**
19417      * @hide
19418      * @method autoSize
19419      */
19420 });/*
19421  * Copyright(c) 2010-2012, Roo J Solutions Limited
19422  *
19423  * Licence LGPL
19424  *
19425  */
19426
19427 /**
19428  * @class Roo.form.ComboBoxArray
19429  * @extends Roo.form.TextField
19430  * A facebook style adder... for lists of email / people / countries  etc...
19431  * pick multiple items from a combo box, and shows each one.
19432  *
19433  *  Fred [x]  Brian [x]  [Pick another |v]
19434  *
19435  *
19436  *  For this to work: it needs various extra information
19437  *    - normal combo problay has
19438  *      name, hiddenName
19439  *    + displayField, valueField
19440  *
19441  *    For our purpose...
19442  *
19443  *
19444  *   If we change from 'extends' to wrapping...
19445  *   
19446  *  
19447  *
19448  
19449  
19450  * @constructor
19451  * Create a new ComboBoxArray.
19452  * @param {Object} config Configuration options
19453  */
19454  
19455
19456 Roo.form.ComboBoxArray = function(config)
19457 {
19458     this.addEvents({
19459         /**
19460          * @event beforeremove
19461          * Fires before remove the value from the list
19462              * @param {Roo.form.ComboBoxArray} _self This combo box array
19463              * @param {Roo.form.ComboBoxArray.Item} item removed item
19464              */
19465         'beforeremove' : true,
19466         /**
19467          * @event remove
19468          * Fires when remove the value from the list
19469              * @param {Roo.form.ComboBoxArray} _self This combo box array
19470              * @param {Roo.form.ComboBoxArray.Item} item removed item
19471              */
19472         'remove' : true
19473         
19474         
19475     });
19476     
19477     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
19478     
19479     this.items = new Roo.util.MixedCollection(false);
19480     
19481     // construct the child combo...
19482     
19483     
19484     
19485     
19486    
19487     
19488 }
19489
19490  
19491 Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
19492
19493     /**
19494      * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
19495      */
19496     
19497     lastData : false,
19498     
19499     // behavies liek a hiddne field
19500     inputType:      'hidden',
19501     /**
19502      * @cfg {Number} width The width of the box that displays the selected element
19503      */ 
19504     width:          300,
19505
19506     
19507     
19508     /**
19509      * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
19510      */
19511     name : false,
19512     /**
19513      * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
19514      */
19515     hiddenName : false,
19516       /**
19517      * @cfg {String} seperator    The value seperator normally ',' 
19518      */
19519     seperator : ',',
19520     
19521     // private the array of items that are displayed..
19522     items  : false,
19523     // private - the hidden field el.
19524     hiddenEl : false,
19525     // private - the filed el..
19526     el : false,
19527     
19528     //validateValue : function() { return true; }, // all values are ok!
19529     //onAddClick: function() { },
19530     
19531     onRender : function(ct, position) 
19532     {
19533         
19534         // create the standard hidden element
19535         //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
19536         
19537         
19538         // give fake names to child combo;
19539         this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
19540         this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
19541         
19542         this.combo = Roo.factory(this.combo, Roo.form);
19543         this.combo.onRender(ct, position);
19544         if (typeof(this.combo.width) != 'undefined') {
19545             this.combo.onResize(this.combo.width,0);
19546         }
19547         
19548         this.combo.initEvents();
19549         
19550         // assigned so form know we need to do this..
19551         this.store          = this.combo.store;
19552         this.valueField     = this.combo.valueField;
19553         this.displayField   = this.combo.displayField ;
19554         
19555         
19556         this.combo.wrap.addClass('x-cbarray-grp');
19557         
19558         var cbwrap = this.combo.wrap.createChild(
19559             {tag: 'div', cls: 'x-cbarray-cb'},
19560             this.combo.el.dom
19561         );
19562         
19563              
19564         this.hiddenEl = this.combo.wrap.createChild({
19565             tag: 'input',  type:'hidden' , name: this.hiddenName, value : ''
19566         });
19567         this.el = this.combo.wrap.createChild({
19568             tag: 'input',  type:'hidden' , name: this.name, value : ''
19569         });
19570          //   this.el.dom.removeAttribute("name");
19571         
19572         
19573         this.outerWrap = this.combo.wrap;
19574         this.wrap = cbwrap;
19575         
19576         this.outerWrap.setWidth(this.width);
19577         this.outerWrap.dom.removeChild(this.el.dom);
19578         
19579         this.wrap.dom.appendChild(this.el.dom);
19580         this.outerWrap.dom.removeChild(this.combo.trigger.dom);
19581         this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
19582         
19583         this.combo.trigger.setStyle('position','relative');
19584         this.combo.trigger.setStyle('left', '0px');
19585         this.combo.trigger.setStyle('top', '2px');
19586         
19587         this.combo.el.setStyle('vertical-align', 'text-bottom');
19588         
19589         //this.trigger.setStyle('vertical-align', 'top');
19590         
19591         // this should use the code from combo really... on('add' ....)
19592         if (this.adder) {
19593             
19594         
19595             this.adder = this.outerWrap.createChild(
19596                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});  
19597             var _t = this;
19598             this.adder.on('click', function(e) {
19599                 _t.fireEvent('adderclick', this, e);
19600             }, _t);
19601         }
19602         //var _t = this;
19603         //this.adder.on('click', this.onAddClick, _t);
19604         
19605         
19606         this.combo.on('select', function(cb, rec, ix) {
19607             this.addItem(rec.data);
19608             
19609             cb.setValue('');
19610             cb.el.dom.value = '';
19611             //cb.lastData = rec.data;
19612             // add to list
19613             
19614         }, this);
19615         
19616         
19617     },
19618     
19619     
19620     getName: function()
19621     {
19622         // returns hidden if it's set..
19623         if (!this.rendered) {return ''};
19624         return  this.hiddenName ? this.hiddenName : this.name;
19625         
19626     },
19627     
19628     
19629     onResize: function(w, h){
19630         
19631         return;
19632         // not sure if this is needed..
19633         //this.combo.onResize(w,h);
19634         
19635         if(typeof w != 'number'){
19636             // we do not handle it!?!?
19637             return;
19638         }
19639         var tw = this.combo.trigger.getWidth();
19640         tw += this.addicon ? this.addicon.getWidth() : 0;
19641         tw += this.editicon ? this.editicon.getWidth() : 0;
19642         var x = w - tw;
19643         this.combo.el.setWidth( this.combo.adjustWidth('input', x));
19644             
19645         this.combo.trigger.setStyle('left', '0px');
19646         
19647         if(this.list && this.listWidth === undefined){
19648             var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
19649             this.list.setWidth(lw);
19650             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
19651         }
19652         
19653     
19654         
19655     },
19656     
19657     addItem: function(rec)
19658     {
19659         var valueField = this.combo.valueField;
19660         var displayField = this.combo.displayField;
19661         
19662         if (this.items.indexOfKey(rec[valueField]) > -1) {
19663             //console.log("GOT " + rec.data.id);
19664             return;
19665         }
19666         
19667         var x = new Roo.form.ComboBoxArray.Item({
19668             //id : rec[this.idField],
19669             data : rec,
19670             displayField : displayField ,
19671             tipField : displayField ,
19672             cb : this
19673         });
19674         // use the 
19675         this.items.add(rec[valueField],x);
19676         // add it before the element..
19677         this.updateHiddenEl();
19678         x.render(this.outerWrap, this.wrap.dom);
19679         // add the image handler..
19680     },
19681     
19682     updateHiddenEl : function()
19683     {
19684         this.validate();
19685         if (!this.hiddenEl) {
19686             return;
19687         }
19688         var ar = [];
19689         var idField = this.combo.valueField;
19690         
19691         this.items.each(function(f) {
19692             ar.push(f.data[idField]);
19693         });
19694         this.hiddenEl.dom.value = ar.join(this.seperator);
19695         this.validate();
19696     },
19697     
19698     reset : function()
19699     {
19700         this.items.clear();
19701         
19702         Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
19703            el.remove();
19704         });
19705         
19706         this.el.dom.value = '';
19707         if (this.hiddenEl) {
19708             this.hiddenEl.dom.value = '';
19709         }
19710         
19711     },
19712     getValue: function()
19713     {
19714         return this.hiddenEl ? this.hiddenEl.dom.value : '';
19715     },
19716     setValue: function(v) // not a valid action - must use addItems..
19717     {
19718         
19719         this.reset();
19720          
19721         if (this.store.isLocal && (typeof(v) == 'string')) {
19722             // then we can use the store to find the values..
19723             // comma seperated at present.. this needs to allow JSON based encoding..
19724             this.hiddenEl.value  = v;
19725             var v_ar = [];
19726             Roo.each(v.split(this.seperator), function(k) {
19727                 Roo.log("CHECK " + this.valueField + ',' + k);
19728                 var li = this.store.query(this.valueField, k);
19729                 if (!li.length) {
19730                     return;
19731                 }
19732                 var add = {};
19733                 add[this.valueField] = k;
19734                 add[this.displayField] = li.item(0).data[this.displayField];
19735                 
19736                 this.addItem(add);
19737             }, this) 
19738              
19739         }
19740         if (typeof(v) == 'object' ) {
19741             // then let's assume it's an array of objects..
19742             Roo.each(v, function(l) {
19743                 var add = l;
19744                 if (typeof(l) == 'string') {
19745                     add = {};
19746                     add[this.valueField] = l;
19747                     add[this.displayField] = l
19748                 }
19749                 this.addItem(add);
19750             }, this);
19751              
19752         }
19753         
19754         
19755     },
19756     setFromData: function(v)
19757     {
19758         // this recieves an object, if setValues is called.
19759         this.reset();
19760         this.el.dom.value = v[this.displayField];
19761         this.hiddenEl.dom.value = v[this.valueField];
19762         if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
19763             return;
19764         }
19765         var kv = v[this.valueField];
19766         var dv = v[this.displayField];
19767         kv = typeof(kv) != 'string' ? '' : kv;
19768         dv = typeof(dv) != 'string' ? '' : dv;
19769         
19770         
19771         var keys = kv.split(this.seperator);
19772         var display = dv.split(this.seperator);
19773         for (var i = 0 ; i < keys.length; i++) {
19774             add = {};
19775             add[this.valueField] = keys[i];
19776             add[this.displayField] = display[i];
19777             this.addItem(add);
19778         }
19779       
19780         
19781     },
19782     
19783     /**
19784      * Validates the combox array value
19785      * @return {Boolean} True if the value is valid, else false
19786      */
19787     validate : function(){
19788         if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
19789             this.clearInvalid();
19790             return true;
19791         }
19792         return false;
19793     },
19794     
19795     validateValue : function(value){
19796         return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
19797         
19798     },
19799     
19800     /*@
19801      * overide
19802      * 
19803      */
19804     isDirty : function() {
19805         if(this.disabled) {
19806             return false;
19807         }
19808         
19809         try {
19810             var d = Roo.decode(String(this.originalValue));
19811         } catch (e) {
19812             return String(this.getValue()) !== String(this.originalValue);
19813         }
19814         
19815         var originalValue = [];
19816         
19817         for (var i = 0; i < d.length; i++){
19818             originalValue.push(d[i][this.valueField]);
19819         }
19820         
19821         return String(this.getValue()) !== String(originalValue.join(this.seperator));
19822         
19823     }
19824     
19825 });
19826
19827
19828
19829 /**
19830  * @class Roo.form.ComboBoxArray.Item
19831  * @extends Roo.BoxComponent
19832  * A selected item in the list
19833  *  Fred [x]  Brian [x]  [Pick another |v]
19834  * 
19835  * @constructor
19836  * Create a new item.
19837  * @param {Object} config Configuration options
19838  */
19839  
19840 Roo.form.ComboBoxArray.Item = function(config) {
19841     config.id = Roo.id();
19842     Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
19843 }
19844
19845 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
19846     data : {},
19847     cb: false,
19848     displayField : false,
19849     tipField : false,
19850     
19851     
19852     defaultAutoCreate : {
19853         tag: 'div',
19854         cls: 'x-cbarray-item',
19855         cn : [ 
19856             { tag: 'div' },
19857             {
19858                 tag: 'img',
19859                 width:16,
19860                 height : 16,
19861                 src : Roo.BLANK_IMAGE_URL ,
19862                 align: 'center'
19863             }
19864         ]
19865         
19866     },
19867     
19868  
19869     onRender : function(ct, position)
19870     {
19871         Roo.form.Field.superclass.onRender.call(this, ct, position);
19872         
19873         if(!this.el){
19874             var cfg = this.getAutoCreate();
19875             this.el = ct.createChild(cfg, position);
19876         }
19877         
19878         this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
19879         
19880         this.el.child('div').dom.innerHTML = this.cb.renderer ? 
19881             this.cb.renderer(this.data) :
19882             String.format('{0}',this.data[this.displayField]);
19883         
19884             
19885         this.el.child('div').dom.setAttribute('qtip',
19886                         String.format('{0}',this.data[this.tipField])
19887         );
19888         
19889         this.el.child('img').on('click', this.remove, this);
19890         
19891     },
19892    
19893     remove : function()
19894     {
19895         if(this.cb.disabled){
19896             return;
19897         }
19898         
19899         if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
19900             this.cb.items.remove(this);
19901             this.el.child('img').un('click', this.remove, this);
19902             this.el.remove();
19903             this.cb.updateHiddenEl();
19904
19905             this.cb.fireEvent('remove', this.cb, this);
19906         }
19907         
19908     }
19909 });/*
19910  * RooJS Library 1.1.1
19911  * Copyright(c) 2008-2011  Alan Knowles
19912  *
19913  * License - LGPL
19914  */
19915  
19916
19917 /**
19918  * @class Roo.form.ComboNested
19919  * @extends Roo.form.ComboBox
19920  * A combobox for that allows selection of nested items in a list,
19921  * eg.
19922  *
19923  *  Book
19924  *    -> red
19925  *    -> green
19926  *  Table
19927  *    -> square
19928  *      ->red
19929  *      ->green
19930  *    -> rectangle
19931  *      ->green
19932  *      
19933  * 
19934  * @constructor
19935  * Create a new ComboNested
19936  * @param {Object} config Configuration options
19937  */
19938 Roo.form.ComboNested = function(config){
19939     Roo.form.ComboCheck.superclass.constructor.call(this, config);
19940     // should verify some data...
19941     // like
19942     // hiddenName = required..
19943     // displayField = required
19944     // valudField == required
19945     var req= [ 'hiddenName', 'displayField', 'valueField' ];
19946     var _t = this;
19947     Roo.each(req, function(e) {
19948         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
19949             throw "Roo.form.ComboNested : missing value for: " + e;
19950         }
19951     });
19952      
19953     
19954 };
19955
19956 Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
19957    
19958     /*
19959      * @config {Number} max Number of columns to show
19960      */
19961     
19962     maxColumns : 3,
19963    
19964     list : null, // the outermost div..
19965     innerLists : null, // the
19966     views : null,
19967     stores : null,
19968     // private
19969     loadingChildren : false,
19970     
19971     onRender : function(ct, position)
19972     {
19973         Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
19974         
19975         if(this.hiddenName){
19976             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
19977                     'before', true);
19978             this.hiddenField.value =
19979                 this.hiddenValue !== undefined ? this.hiddenValue :
19980                 this.value !== undefined ? this.value : '';
19981
19982             // prevent input submission
19983             this.el.dom.removeAttribute('name');
19984              
19985              
19986         }
19987         
19988         if(Roo.isGecko){
19989             this.el.dom.setAttribute('autocomplete', 'off');
19990         }
19991
19992         var cls = 'x-combo-list';
19993
19994         this.list = new Roo.Layer({
19995             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
19996         });
19997
19998         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
19999         this.list.setWidth(lw);
20000         this.list.swallowEvent('mousewheel');
20001         this.assetHeight = 0;
20002
20003         if(this.title){
20004             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
20005             this.assetHeight += this.header.getHeight();
20006         }
20007         this.innerLists = [];
20008         this.views = [];
20009         this.stores = [];
20010         for (var i =0 ; i < this.maxColumns; i++) {
20011             this.onRenderList( cls, i);
20012         }
20013         
20014         // always needs footer, as we are going to have an 'OK' button.
20015         this.footer = this.list.createChild({cls:cls+'-ft'});
20016         this.pageTb = new Roo.Toolbar(this.footer);  
20017         var _this = this;
20018         this.pageTb.add(  {
20019             
20020             text: 'Done',
20021             handler: function()
20022             {
20023                 _this.collapse();
20024             }
20025         });
20026         
20027         if ( this.allowBlank && !this.disableClear) {
20028             
20029             this.pageTb.add(new Roo.Toolbar.Fill(), {
20030                 cls: 'x-btn-icon x-btn-clear',
20031                 text: '&#160;',
20032                 handler: function()
20033                 {
20034                     _this.collapse();
20035                     _this.clearValue();
20036                     _this.onSelect(false, -1);
20037                 }
20038             });
20039         }
20040         if (this.footer) {
20041             this.assetHeight += this.footer.getHeight();
20042         }
20043         
20044     },
20045     onRenderList : function (  cls, i)
20046     {
20047         
20048         var lw = Math.floor(
20049                 ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
20050         );
20051         
20052         this.list.setWidth(lw); // default to '1'
20053
20054         var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
20055         //il.on('mouseover', this.onViewOver, this, { list:  i });
20056         //il.on('mousemove', this.onViewMove, this, { list:  i });
20057         il.setWidth(lw);
20058         il.setStyle({ 'overflow-x' : 'hidden'});
20059
20060         if(!this.tpl){
20061             this.tpl = new Roo.Template({
20062                 html :  '<div class="'+cls+'-item '+cls+'-item-{cn:this.isEmpty}">{' + this.displayField + '}</div>',
20063                 isEmpty: function (value, allValues) {
20064                     //Roo.log(value);
20065                     var dl = typeof(value.data) != 'undefined' ? value.data.length : value.length; ///json is a nested response..
20066                     return dl ? 'has-children' : 'no-children'
20067                 }
20068             });
20069         }
20070         
20071         var store  = this.store;
20072         if (i > 0) {
20073             store  = new Roo.data.SimpleStore({
20074                 //fields : this.store.reader.meta.fields,
20075                 reader : this.store.reader,
20076                 data : [ ]
20077             });
20078         }
20079         this.stores[i]  = store;
20080                   
20081         var view = this.views[i] = new Roo.View(
20082             il,
20083             this.tpl,
20084             {
20085                 singleSelect:true,
20086                 store: store,
20087                 selectedClass: this.selectedClass
20088             }
20089         );
20090         view.getEl().setWidth(lw);
20091         view.getEl().setStyle({
20092             position: i < 1 ? 'relative' : 'absolute',
20093             top: 0,
20094             left: (i * lw ) + 'px',
20095             display : i > 0 ? 'none' : 'block'
20096         });
20097         view.on('selectionchange', this.onSelectChange.createDelegate(this, {list : i }, true));
20098         view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
20099         //view.on('click', this.onViewClick, this, { list : i });
20100
20101         store.on('beforeload', this.onBeforeLoad, this);
20102         store.on('load',  this.onLoad, this, { list  : i});
20103         store.on('loadexception', this.onLoadException, this);
20104
20105         // hide the other vies..
20106         
20107         
20108         
20109     },
20110       
20111     restrictHeight : function()
20112     {
20113         var mh = 0;
20114         Roo.each(this.innerLists, function(il,i) {
20115             var el = this.views[i].getEl();
20116             el.dom.style.height = '';
20117             var inner = el.dom;
20118             var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
20119             // only adjust heights on other ones..
20120             mh = Math.max(h, mh);
20121             if (i < 1) {
20122                 
20123                 el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
20124                 il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
20125                
20126             }
20127             
20128             
20129         }, this);
20130         
20131         this.list.beginUpdate();
20132         this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
20133         this.list.alignTo(this.el, this.listAlign);
20134         this.list.endUpdate();
20135         
20136     },
20137      
20138     
20139     // -- store handlers..
20140     // private
20141     onBeforeLoad : function()
20142     {
20143         if(!this.hasFocus){
20144             return;
20145         }
20146         this.innerLists[0].update(this.loadingText ?
20147                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
20148         this.restrictHeight();
20149         this.selectedIndex = -1;
20150     },
20151     // private
20152     onLoad : function(a,b,c,d)
20153     {
20154         if (!this.loadingChildren) {
20155             // then we are loading the top level. - hide the children
20156             for (var i = 1;i < this.views.length; i++) {
20157                 this.views[i].getEl().setStyle({ display : 'none' });
20158             }
20159             var lw = Math.floor(
20160                 ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
20161             );
20162         
20163              this.list.setWidth(lw); // default to '1'
20164
20165             
20166         }
20167         if(!this.hasFocus){
20168             return;
20169         }
20170         
20171         if(this.store.getCount() > 0) {
20172             this.expand();
20173             this.restrictHeight();   
20174         } else {
20175             this.onEmptyResults();
20176         }
20177         
20178         if (!this.loadingChildren) {
20179             this.selectActive();
20180         }
20181         /*
20182         this.stores[1].loadData([]);
20183         this.stores[2].loadData([]);
20184         this.views
20185         */    
20186     
20187         //this.el.focus();
20188     },
20189     
20190     
20191     // private
20192     onLoadException : function()
20193     {
20194         this.collapse();
20195         Roo.log(this.store.reader.jsonData);
20196         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
20197             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
20198         }
20199         
20200         
20201     },
20202     // no cleaning of leading spaces on blur here.
20203     cleanLeadingSpace : function(e) { },
20204     
20205
20206     onSelectChange : function (view, sels, opts )
20207     {
20208         var ix = view.getSelectedIndexes();
20209          
20210         if (opts.list > this.maxColumns - 2) {
20211             if (view.store.getCount()<  1) {
20212                 this.views[opts.list ].getEl().setStyle({ display :   'none' });
20213
20214             } else  {
20215                 if (ix.length) {
20216                     // used to clear ?? but if we are loading unselected 
20217                     this.setFromData(view.store.getAt(ix[0]).data);
20218                 }
20219                 
20220             }
20221             
20222             return;
20223         }
20224         
20225         if (!ix.length) {
20226             // this get's fired when trigger opens..
20227            // this.setFromData({});
20228             var str = this.stores[opts.list+1];
20229             str.data.clear(); // removeall wihtout the fire events..
20230             return;
20231         }
20232         
20233         var rec = view.store.getAt(ix[0]);
20234          
20235         this.setFromData(rec.data);
20236         this.fireEvent('select', this, rec, ix[0]);
20237         
20238         var lw = Math.floor(
20239              (
20240                 (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
20241              ) / this.maxColumns
20242         );
20243         this.loadingChildren = true;
20244         this.stores[opts.list+1].loadDataFromChildren( rec );
20245         this.loadingChildren = false;
20246         var dl = this.stores[opts.list+1]. getTotalCount();
20247         
20248         this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
20249         
20250         this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
20251         for (var i = opts.list+2; i < this.views.length;i++) {
20252             this.views[i].getEl().setStyle({ display : 'none' });
20253         }
20254         
20255         this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
20256         this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
20257         
20258         if (this.isLoading) {
20259            // this.selectActive(opts.list);
20260         }
20261          
20262     },
20263     
20264     
20265     
20266     
20267     onDoubleClick : function()
20268     {
20269         this.collapse(); //??
20270     },
20271     
20272      
20273     
20274     
20275     
20276     // private
20277     recordToStack : function(store, prop, value, stack)
20278     {
20279         var cstore = new Roo.data.SimpleStore({
20280             //fields : this.store.reader.meta.fields, // we need array reader.. for
20281             reader : this.store.reader,
20282             data : [ ]
20283         });
20284         var _this = this;
20285         var record  = false;
20286         var srec = false;
20287         if(store.getCount() < 1){
20288             return false;
20289         }
20290         store.each(function(r){
20291             if(r.data[prop] == value){
20292                 record = r;
20293             srec = r;
20294                 return false;
20295             }
20296             if (r.data.cn && r.data.cn.length) {
20297                 cstore.loadDataFromChildren( r);
20298                 var cret = _this.recordToStack(cstore, prop, value, stack);
20299                 if (cret !== false) {
20300                     record = cret;
20301                     srec = r;
20302                     return false;
20303                 }
20304             }
20305              
20306             return true;
20307         });
20308         if (record == false) {
20309             return false
20310         }
20311         stack.unshift(srec);
20312         return record;
20313     },
20314     
20315     /*
20316      * find the stack of stores that match our value.
20317      *
20318      * 
20319      */
20320     
20321     selectActive : function ()
20322     {
20323         // if store is not loaded, then we will need to wait for that to happen first.
20324         var stack = [];
20325         this.recordToStack(this.store, this.valueField, this.getValue(), stack);
20326         for (var i = 0; i < stack.length; i++ ) {
20327             this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
20328         }
20329         
20330     }
20331         
20332          
20333     
20334     
20335     
20336     
20337 });/*
20338  * Based on:
20339  * Ext JS Library 1.1.1
20340  * Copyright(c) 2006-2007, Ext JS, LLC.
20341  *
20342  * Originally Released Under LGPL - original licence link has changed is not relivant.
20343  *
20344  * Fork - LGPL
20345  * <script type="text/javascript">
20346  */
20347 /**
20348  * @class Roo.form.Checkbox
20349  * @extends Roo.form.Field
20350  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
20351  * @constructor
20352  * Creates a new Checkbox
20353  * @param {Object} config Configuration options
20354  */
20355 Roo.form.Checkbox = function(config){
20356     Roo.form.Checkbox.superclass.constructor.call(this, config);
20357     this.addEvents({
20358         /**
20359          * @event check
20360          * Fires when the checkbox is checked or unchecked.
20361              * @param {Roo.form.Checkbox} this This checkbox
20362              * @param {Boolean} checked The new checked value
20363              */
20364         check : true
20365     });
20366 };
20367
20368 Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
20369     /**
20370      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
20371      */
20372     focusClass : undefined,
20373     /**
20374      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
20375      */
20376     fieldClass: "x-form-field",
20377     /**
20378      * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
20379      */
20380     checked: false,
20381     /**
20382      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
20383      * {tag: "input", type: "checkbox", autocomplete: "off"})
20384      */
20385     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
20386     /**
20387      * @cfg {String} boxLabel The text that appears beside the checkbox
20388      */
20389     boxLabel : "",
20390     /**
20391      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
20392      */  
20393     inputValue : '1',
20394     /**
20395      * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
20396      */
20397      valueOff: '0', // value when not checked..
20398
20399     actionMode : 'viewEl', 
20400     //
20401     // private
20402     itemCls : 'x-menu-check-item x-form-item',
20403     groupClass : 'x-menu-group-item',
20404     inputType : 'hidden',
20405     
20406     
20407     inSetChecked: false, // check that we are not calling self...
20408     
20409     inputElement: false, // real input element?
20410     basedOn: false, // ????
20411     
20412     isFormField: true, // not sure where this is needed!!!!
20413
20414     onResize : function(){
20415         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
20416         if(!this.boxLabel){
20417             this.el.alignTo(this.wrap, 'c-c');
20418         }
20419     },
20420
20421     initEvents : function(){
20422         Roo.form.Checkbox.superclass.initEvents.call(this);
20423         this.el.on("click", this.onClick,  this);
20424         this.el.on("change", this.onClick,  this);
20425     },
20426
20427
20428     getResizeEl : function(){
20429         return this.wrap;
20430     },
20431
20432     getPositionEl : function(){
20433         return this.wrap;
20434     },
20435
20436     // private
20437     onRender : function(ct, position){
20438         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
20439         /*
20440         if(this.inputValue !== undefined){
20441             this.el.dom.value = this.inputValue;
20442         }
20443         */
20444         //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
20445         this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
20446         var viewEl = this.wrap.createChild({ 
20447             tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
20448         this.viewEl = viewEl;   
20449         this.wrap.on('click', this.onClick,  this); 
20450         
20451         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
20452         this.el.on('propertychange', this.setFromHidden,  this);  //ie
20453         
20454         
20455         
20456         if(this.boxLabel){
20457             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
20458         //    viewEl.on('click', this.onClick,  this); 
20459         }
20460         //if(this.checked){
20461             this.setChecked(this.checked);
20462         //}else{
20463             //this.checked = this.el.dom;
20464         //}
20465
20466     },
20467
20468     // private
20469     initValue : Roo.emptyFn,
20470
20471     /**
20472      * Returns the checked state of the checkbox.
20473      * @return {Boolean} True if checked, else false
20474      */
20475     getValue : function(){
20476         if(this.el){
20477             return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
20478         }
20479         return this.valueOff;
20480         
20481     },
20482
20483         // private
20484     onClick : function(){ 
20485         if (this.disabled) {
20486             return;
20487         }
20488         this.setChecked(!this.checked);
20489
20490         //if(this.el.dom.checked != this.checked){
20491         //    this.setValue(this.el.dom.checked);
20492        // }
20493     },
20494
20495     /**
20496      * Sets the checked state of the checkbox.
20497      * On is always based on a string comparison between inputValue and the param.
20498      * @param {Boolean/String} value - the value to set 
20499      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
20500      */
20501     setValue : function(v,suppressEvent){
20502         
20503         
20504         //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
20505         //if(this.el && this.el.dom){
20506         //    this.el.dom.checked = this.checked;
20507         //    this.el.dom.defaultChecked = this.checked;
20508         //}
20509         this.setChecked(String(v) === String(this.inputValue), suppressEvent);
20510         //this.fireEvent("check", this, this.checked);
20511     },
20512     // private..
20513     setChecked : function(state,suppressEvent)
20514     {
20515         if (this.inSetChecked) {
20516             this.checked = state;
20517             return;
20518         }
20519         
20520     
20521         if(this.wrap){
20522             this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
20523         }
20524         this.checked = state;
20525         if(suppressEvent !== true){
20526             this.fireEvent('check', this, state);
20527         }
20528         this.inSetChecked = true;
20529         this.el.dom.value = state ? this.inputValue : this.valueOff;
20530         this.inSetChecked = false;
20531         
20532     },
20533     // handle setting of hidden value by some other method!!?!?
20534     setFromHidden: function()
20535     {
20536         if(!this.el){
20537             return;
20538         }
20539         //console.log("SET FROM HIDDEN");
20540         //alert('setFrom hidden');
20541         this.setValue(this.el.dom.value);
20542     },
20543     
20544     onDestroy : function()
20545     {
20546         if(this.viewEl){
20547             Roo.get(this.viewEl).remove();
20548         }
20549          
20550         Roo.form.Checkbox.superclass.onDestroy.call(this);
20551     },
20552     
20553     setBoxLabel : function(str)
20554     {
20555         this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
20556     }
20557
20558 });/*
20559  * Based on:
20560  * Ext JS Library 1.1.1
20561  * Copyright(c) 2006-2007, Ext JS, LLC.
20562  *
20563  * Originally Released Under LGPL - original licence link has changed is not relivant.
20564  *
20565  * Fork - LGPL
20566  * <script type="text/javascript">
20567  */
20568  
20569 /**
20570  * @class Roo.form.Radio
20571  * @extends Roo.form.Checkbox
20572  * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
20573  * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
20574  * @constructor
20575  * Creates a new Radio
20576  * @param {Object} config Configuration options
20577  */
20578 Roo.form.Radio = function(){
20579     Roo.form.Radio.superclass.constructor.apply(this, arguments);
20580 };
20581 Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
20582     inputType: 'radio',
20583
20584     /**
20585      * If this radio is part of a group, it will return the selected value
20586      * @return {String}
20587      */
20588     getGroupValue : function(){
20589         return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
20590     },
20591     
20592     
20593     onRender : function(ct, position){
20594         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
20595         
20596         if(this.inputValue !== undefined){
20597             this.el.dom.value = this.inputValue;
20598         }
20599          
20600         this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
20601         //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
20602         //var viewEl = this.wrap.createChild({ 
20603         //    tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
20604         //this.viewEl = viewEl;   
20605         //this.wrap.on('click', this.onClick,  this); 
20606         
20607         //this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
20608         //this.el.on('propertychange', this.setFromHidden,  this);  //ie
20609         
20610         
20611         
20612         if(this.boxLabel){
20613             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
20614         //    viewEl.on('click', this.onClick,  this); 
20615         }
20616          if(this.checked){
20617             this.el.dom.checked =   'checked' ;
20618         }
20619          
20620     } 
20621     
20622     
20623 });Roo.rtf = {}; // namespace
20624 Roo.rtf.Hex = function(hex)
20625 {
20626     this.hexstr = hex;
20627 };
20628 Roo.rtf.Paragraph = function(opts)
20629 {
20630     this.content = []; ///??? is that used?
20631 };Roo.rtf.Span = function(opts)
20632 {
20633     this.value = opts.value;
20634 };
20635
20636 Roo.rtf.Group = function(parent)
20637 {
20638     // we dont want to acutally store parent - it will make debug a nightmare..
20639     this.content = [];
20640     this.cn  = [];
20641      
20642        
20643     
20644 };
20645
20646 Roo.rtf.Group.prototype = {
20647     ignorable : false,
20648     content: false,
20649     cn: false,
20650     addContent : function(node) {
20651         // could set styles...
20652         this.content.push(node);
20653     },
20654     addChild : function(cn)
20655     {
20656         this.cn.push(cn);
20657     },
20658     // only for images really...
20659     toDataURL : function()
20660     {
20661         var mimetype = false;
20662         switch(true) {
20663             case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
20664                 mimetype = "image/png";
20665                 break;
20666              case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
20667                 mimetype = "image/jpeg";
20668                 break;
20669             default :
20670                 return 'about:blank'; // ?? error?
20671         }
20672         
20673         
20674         var hexstring = this.content[this.content.length-1].value;
20675         
20676         return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
20677             return String.fromCharCode(parseInt(a, 16));
20678         }).join(""));
20679     }
20680     
20681 };
20682 // this looks like it's normally the {rtf{ .... }}
20683 Roo.rtf.Document = function()
20684 {
20685     // we dont want to acutally store parent - it will make debug a nightmare..
20686     this.rtlch  = [];
20687     this.content = [];
20688     this.cn = [];
20689     
20690 };
20691 Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
20692     addChild : function(cn)
20693     {
20694         this.cn.push(cn);
20695         switch(cn.type) {
20696             case 'rtlch': // most content seems to be inside this??
20697             case 'listtext':
20698             case 'shpinst':
20699                 this.rtlch.push(cn);
20700                 return;
20701             default:
20702                 this[cn.type] = cn;
20703         }
20704         
20705     },
20706     
20707     getElementsByType : function(type)
20708     {
20709         var ret =  [];
20710         this._getElementsByType(type, ret, this.cn, 'rtf');
20711         return ret;
20712     },
20713     _getElementsByType : function (type, ret, search_array, path)
20714     {
20715         search_array.forEach(function(n,i) {
20716             if (n.type == type) {
20717                 n.path = path + '/' + n.type + ':' + i;
20718                 ret.push(n);
20719             }
20720             if (n.cn.length > 0) {
20721                 this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
20722             }
20723         },this);
20724     }
20725     
20726 });
20727  
20728 Roo.rtf.Ctrl = function(opts)
20729 {
20730     this.value = opts.value;
20731     this.param = opts.param;
20732 };
20733 /**
20734  *
20735  *
20736  * based on this https://github.com/iarna/rtf-parser
20737  * it's really only designed to extract pict from pasted RTF 
20738  *
20739  * usage:
20740  *
20741  *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
20742  *  
20743  *
20744  */
20745
20746  
20747
20748
20749
20750 Roo.rtf.Parser = function(text) {
20751     //super({objectMode: true})
20752     this.text = '';
20753     this.parserState = this.parseText;
20754     
20755     // these are for interpeter...
20756     this.doc = {};
20757     ///this.parserState = this.parseTop
20758     this.groupStack = [];
20759     this.hexStore = [];
20760     this.doc = false;
20761     
20762     this.groups = []; // where we put the return.
20763     
20764     for (var ii = 0; ii < text.length; ++ii) {
20765         ++this.cpos;
20766         
20767         if (text[ii] === '\n') {
20768             ++this.row;
20769             this.col = 1;
20770         } else {
20771             ++this.col;
20772         }
20773         this.parserState(text[ii]);
20774     }
20775     
20776     
20777     
20778 };
20779 Roo.rtf.Parser.prototype = {
20780     text : '', // string being parsed..
20781     controlWord : '',
20782     controlWordParam :  '',
20783     hexChar : '',
20784     doc : false,
20785     group: false,
20786     groupStack : false,
20787     hexStore : false,
20788     
20789     
20790     cpos : 0, 
20791     row : 1, // reportin?
20792     col : 1, //
20793
20794      
20795     push : function (el)
20796     {
20797         var m = 'cmd'+ el.type;
20798         if (typeof(this[m]) == 'undefined') {
20799             Roo.log('invalid cmd:' + el.type);
20800             return;
20801         }
20802         this[m](el);
20803         //Roo.log(el);
20804     },
20805     flushHexStore : function()
20806     {
20807         if (this.hexStore.length < 1) {
20808             return;
20809         }
20810         var hexstr = this.hexStore.map(
20811             function(cmd) {
20812                 return cmd.value;
20813         }).join('');
20814         
20815         this.group.addContent( new Roo.rtf.Hex( hexstr ));
20816               
20817             
20818         this.hexStore.splice(0)
20819         
20820     },
20821     
20822     cmdgroupstart : function()
20823     {
20824         this.flushHexStore();
20825         if (this.group) {
20826             this.groupStack.push(this.group);
20827         }
20828          // parent..
20829         if (this.doc === false) {
20830             this.group = this.doc = new Roo.rtf.Document();
20831             return;
20832             
20833         }
20834         this.group = new Roo.rtf.Group(this.group);
20835     },
20836     cmdignorable : function()
20837     {
20838         this.flushHexStore();
20839         this.group.ignorable = true;
20840     },
20841     cmdendparagraph : function()
20842     {
20843         this.flushHexStore();
20844         this.group.addContent(new Roo.rtf.Paragraph());
20845     },
20846     cmdgroupend : function ()
20847     {
20848         this.flushHexStore();
20849         var endingGroup = this.group;
20850         
20851         
20852         this.group = this.groupStack.pop();
20853         if (this.group) {
20854             this.group.addChild(endingGroup);
20855         }
20856         
20857         
20858         
20859         var doc = this.group || this.doc;
20860         //if (endingGroup instanceof FontTable) {
20861         //  doc.fonts = endingGroup.table
20862         //} else if (endingGroup instanceof ColorTable) {
20863         //  doc.colors = endingGroup.table
20864         //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
20865         if (endingGroup.ignorable === false) {
20866             //code
20867             this.groups.push(endingGroup);
20868            // Roo.log( endingGroup );
20869         }
20870             //Roo.each(endingGroup.content, function(item)) {
20871             //    doc.addContent(item);
20872             //}
20873             //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
20874         //}
20875     },
20876     cmdtext : function (cmd)
20877     {
20878         this.flushHexStore();
20879         if (!this.group) { // an RTF fragment, missing the {\rtf1 header
20880             //this.group = this.doc
20881             return;  // we really don't care about stray text...
20882         }
20883         this.group.addContent(new Roo.rtf.Span(cmd));
20884     },
20885     cmdcontrolword : function (cmd)
20886     {
20887         this.flushHexStore();
20888         if (!this.group.type) {
20889             this.group.type = cmd.value;
20890             return;
20891         }
20892         this.group.addContent(new Roo.rtf.Ctrl(cmd));
20893         // we actually don't care about ctrl words...
20894         return ;
20895         /*
20896         var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
20897         if (this[method]) {
20898             this[method](cmd.param)
20899         } else {
20900             if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
20901         }
20902         */
20903     },
20904     cmdhexchar : function(cmd) {
20905         this.hexStore.push(cmd);
20906     },
20907     cmderror : function(cmd) {
20908         throw cmd.value;
20909     },
20910     
20911     /*
20912       _flush (done) {
20913         if (this.text !== '\u0000') this.emitText()
20914         done()
20915       }
20916       */
20917       
20918       
20919     parseText : function(c)
20920     {
20921         if (c === '\\') {
20922             this.parserState = this.parseEscapes;
20923         } else if (c === '{') {
20924             this.emitStartGroup();
20925         } else if (c === '}') {
20926             this.emitEndGroup();
20927         } else if (c === '\x0A' || c === '\x0D') {
20928             // cr/lf are noise chars
20929         } else {
20930             this.text += c;
20931         }
20932     },
20933     
20934     parseEscapes: function (c)
20935     {
20936         if (c === '\\' || c === '{' || c === '}') {
20937             this.text += c;
20938             this.parserState = this.parseText;
20939         } else {
20940             this.parserState = this.parseControlSymbol;
20941             this.parseControlSymbol(c);
20942         }
20943     },
20944     parseControlSymbol: function(c)
20945     {
20946         if (c === '~') {
20947             this.text += '\u00a0'; // nbsp
20948             this.parserState = this.parseText
20949         } else if (c === '-') {
20950              this.text += '\u00ad'; // soft hyphen
20951         } else if (c === '_') {
20952             this.text += '\u2011'; // non-breaking hyphen
20953         } else if (c === '*') {
20954             this.emitIgnorable();
20955             this.parserState = this.parseText;
20956         } else if (c === "'") {
20957             this.parserState = this.parseHexChar;
20958         } else if (c === '|') { // formula cacter
20959             this.emitFormula();
20960             this.parserState = this.parseText;
20961         } else if (c === ':') { // subentry in an index entry
20962             this.emitIndexSubEntry();
20963             this.parserState = this.parseText;
20964         } else if (c === '\x0a') {
20965             this.emitEndParagraph();
20966             this.parserState = this.parseText;
20967         } else if (c === '\x0d') {
20968             this.emitEndParagraph();
20969             this.parserState = this.parseText;
20970         } else {
20971             this.parserState = this.parseControlWord;
20972             this.parseControlWord(c);
20973         }
20974     },
20975     parseHexChar: function (c)
20976     {
20977         if (/^[A-Fa-f0-9]$/.test(c)) {
20978             this.hexChar += c;
20979             if (this.hexChar.length >= 2) {
20980               this.emitHexChar();
20981               this.parserState = this.parseText;
20982             }
20983             return;
20984         }
20985         this.emitError("Invalid character \"" + c + "\" in hex literal.");
20986         this.parserState = this.parseText;
20987         
20988     },
20989     parseControlWord : function(c)
20990     {
20991         if (c === ' ') {
20992             this.emitControlWord();
20993             this.parserState = this.parseText;
20994         } else if (/^[-\d]$/.test(c)) {
20995             this.parserState = this.parseControlWordParam;
20996             this.controlWordParam += c;
20997         } else if (/^[A-Za-z]$/.test(c)) {
20998           this.controlWord += c;
20999         } else {
21000           this.emitControlWord();
21001           this.parserState = this.parseText;
21002           this.parseText(c);
21003         }
21004     },
21005     parseControlWordParam : function (c) {
21006         if (/^\d$/.test(c)) {
21007           this.controlWordParam += c;
21008         } else if (c === ' ') {
21009           this.emitControlWord();
21010           this.parserState = this.parseText;
21011         } else {
21012           this.emitControlWord();
21013           this.parserState = this.parseText;
21014           this.parseText(c);
21015         }
21016     },
21017     
21018     
21019     
21020     
21021     emitText : function () {
21022         if (this.text === '') {
21023             return;
21024         }
21025         this.push({
21026             type: 'text',
21027             value: this.text,
21028             pos: this.cpos,
21029             row: this.row,
21030             col: this.col
21031         });
21032         this.text = ''
21033     },
21034     emitControlWord : function ()
21035     {
21036         this.emitText();
21037         if (this.controlWord === '') {
21038             // do we want to track this - it seems just to cause problems.
21039             //this.emitError('empty control word');
21040         } else {
21041             this.push({
21042                   type: 'controlword',
21043                   value: this.controlWord,
21044                   param: this.controlWordParam !== '' && Number(this.controlWordParam),
21045                   pos: this.cpos,
21046                   row: this.row,
21047                   col: this.col
21048             });
21049         }
21050         this.controlWord = '';
21051         this.controlWordParam = '';
21052     },
21053     emitStartGroup : function ()
21054     {
21055         this.emitText();
21056         this.push({
21057             type: 'groupstart',
21058             pos: this.cpos,
21059             row: this.row,
21060             col: this.col
21061         });
21062     },
21063     emitEndGroup : function ()
21064     {
21065         this.emitText();
21066         this.push({
21067             type: 'groupend',
21068             pos: this.cpos,
21069             row: this.row,
21070             col: this.col
21071         });
21072     },
21073     emitIgnorable : function ()
21074     {
21075         this.emitText();
21076         this.push({
21077             type: 'ignorable',
21078             pos: this.cpos,
21079             row: this.row,
21080             col: this.col
21081         });
21082     },
21083     emitHexChar : function ()
21084     {
21085         this.emitText();
21086         this.push({
21087             type: 'hexchar',
21088             value: this.hexChar,
21089             pos: this.cpos,
21090             row: this.row,
21091             col: this.col
21092         });
21093         this.hexChar = ''
21094     },
21095     emitError : function (message)
21096     {
21097       this.emitText();
21098       this.push({
21099             type: 'error',
21100             value: message,
21101             row: this.row,
21102             col: this.col,
21103             char: this.cpos //,
21104             //stack: new Error().stack
21105         });
21106     },
21107     emitEndParagraph : function () {
21108         this.emitText();
21109         this.push({
21110             type: 'endparagraph',
21111             pos: this.cpos,
21112             row: this.row,
21113             col: this.col
21114         });
21115     }
21116      
21117 } ;
21118 Roo.htmleditor = {};
21119  
21120 /**
21121  * @class Roo.htmleditor.Filter
21122  * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
21123  * @cfg {DomElement} node The node to iterate and filter
21124  * @cfg {boolean|String|Array} tag Tags to replace 
21125  * @constructor
21126  * Create a new Filter.
21127  * @param {Object} config Configuration options
21128  */
21129
21130
21131
21132 Roo.htmleditor.Filter = function(cfg) {
21133     Roo.apply(this.cfg);
21134     // this does not actually call walk as it's really just a abstract class
21135 }
21136
21137
21138 Roo.htmleditor.Filter.prototype = {
21139     
21140     node: false,
21141     
21142     tag: false,
21143
21144     // overrride to do replace comments.
21145     replaceComment : false,
21146     
21147     // overrride to do replace or do stuff with tags..
21148     replaceTag : false,
21149     
21150     walk : function(dom)
21151     {
21152         Roo.each( Array.from(dom.childNodes), function( e ) {
21153             switch(true) {
21154                 
21155                 case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
21156                     this.replaceComment(e);
21157                     return;
21158                 
21159                 case e.nodeType != 1: //not a node.
21160                     return;
21161                 
21162                 case this.tag === true: // everything
21163                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
21164                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
21165                 case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
21166                 case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
21167                     if (this.replaceTag && false === this.replaceTag(e)) {
21168                         return;
21169                     }
21170                     if (e.hasChildNodes()) {
21171                         this.walk(e);
21172                     }
21173                     return;
21174                 
21175                 default:    // tags .. that do not match.
21176                     if (e.hasChildNodes()) {
21177                         this.walk(e);
21178                     }
21179             }
21180             
21181         }, this);
21182         
21183     },
21184     
21185     
21186     removeNodeKeepChildren : function( node)
21187     {
21188     
21189         ar = Array.from(node.childNodes);
21190         for (var i = 0; i < ar.length; i++) {
21191          
21192             node.removeChild(ar[i]);
21193             // what if we need to walk these???
21194             node.parentNode.insertBefore(ar[i], node);
21195            
21196         }
21197         node.parentNode.removeChild(node);
21198     }
21199 }; 
21200
21201 /**
21202  * @class Roo.htmleditor.FilterAttributes
21203  * clean attributes and  styles including http:// etc.. in attribute
21204  * @constructor
21205 * Run a new Attribute Filter
21206 * @param {Object} config Configuration options
21207  */
21208 Roo.htmleditor.FilterAttributes = function(cfg)
21209 {
21210     Roo.apply(this, cfg);
21211     this.attrib_black = this.attrib_black || [];
21212     this.attrib_white = this.attrib_white || [];
21213
21214     this.attrib_clean = this.attrib_clean || [];
21215     this.style_white = this.style_white || [];
21216     this.style_black = this.style_black || [];
21217     this.walk(cfg.node);
21218 }
21219
21220 Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
21221 {
21222     tag: true, // all tags
21223     
21224     attrib_black : false, // array
21225     attrib_clean : false,
21226     attrib_white : false,
21227
21228     style_white : false,
21229     style_black : false,
21230      
21231      
21232     replaceTag : function(node)
21233     {
21234         if (!node.attributes || !node.attributes.length) {
21235             return true;
21236         }
21237         
21238         for (var i = node.attributes.length-1; i > -1 ; i--) {
21239             var a = node.attributes[i];
21240             //console.log(a);
21241             if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
21242                 node.removeAttribute(a.name);
21243                 continue;
21244             }
21245             
21246             
21247             
21248             if (a.name.toLowerCase().substr(0,2)=='on')  {
21249                 node.removeAttribute(a.name);
21250                 continue;
21251             }
21252             
21253             
21254             if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
21255                 node.removeAttribute(a.name);
21256                 continue;
21257             }
21258             if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
21259                 this.cleanAttr(node,a.name,a.value); // fixme..
21260                 continue;
21261             }
21262             if (a.name == 'style') {
21263                 this.cleanStyle(node,a.name,a.value);
21264                 continue;
21265             }
21266             /// clean up MS crap..
21267             // tecnically this should be a list of valid class'es..
21268             
21269             
21270             if (a.name == 'class') {
21271                 if (a.value.match(/^Mso/)) {
21272                     node.removeAttribute('class');
21273                 }
21274                 
21275                 if (a.value.match(/^body$/)) {
21276                     node.removeAttribute('class');
21277                 }
21278                 continue;
21279             }
21280             
21281             
21282             // style cleanup!?
21283             // class cleanup?
21284             
21285         }
21286         return true; // clean children
21287     },
21288         
21289     cleanAttr: function(node, n,v)
21290     {
21291         
21292         if (v.match(/^\./) || v.match(/^\//)) {
21293             return;
21294         }
21295         if (v.match(/^(http|https):\/\//)
21296             || v.match(/^mailto:/) 
21297             || v.match(/^ftp:/)
21298             || v.match(/^data:/)
21299             ) {
21300             return;
21301         }
21302         if (v.match(/^#/)) {
21303             return;
21304         }
21305         if (v.match(/^\{/)) { // allow template editing.
21306             return;
21307         }
21308 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
21309         node.removeAttribute(n);
21310         
21311     },
21312     cleanStyle : function(node,  n,v)
21313     {
21314         if (v.match(/expression/)) { //XSS?? should we even bother..
21315             node.removeAttribute(n);
21316             return;
21317         }
21318         
21319         var parts = v.split(/;/);
21320         var clean = [];
21321         
21322         Roo.each(parts, function(p) {
21323             p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
21324             if (!p.length) {
21325                 return true;
21326             }
21327             var l = p.split(':').shift().replace(/\s+/g,'');
21328             l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
21329             
21330             if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
21331                 return true;
21332             }
21333             //Roo.log()
21334             // only allow 'c whitelisted system attributes'
21335             if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
21336                 return true;
21337             }
21338             
21339             
21340             clean.push(p);
21341             return true;
21342         },this);
21343         if (clean.length) { 
21344             node.setAttribute(n, clean.join(';'));
21345         } else {
21346             node.removeAttribute(n);
21347         }
21348         
21349     }
21350         
21351         
21352         
21353     
21354 });/**
21355  * @class Roo.htmleditor.FilterBlack
21356  * remove blacklisted elements.
21357  * @constructor
21358  * Run a new Blacklisted Filter
21359  * @param {Object} config Configuration options
21360  */
21361
21362 Roo.htmleditor.FilterBlack = function(cfg)
21363 {
21364     Roo.apply(this, cfg);
21365     this.walk(cfg.node);
21366 }
21367
21368 Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
21369 {
21370     tag : true, // all elements.
21371    
21372     replaceTag : function(n)
21373     {
21374         n.parentNode.removeChild(n);
21375     }
21376 });
21377 /**
21378  * @class Roo.htmleditor.FilterComment
21379  * remove comments.
21380  * @constructor
21381 * Run a new Comments Filter
21382 * @param {Object} config Configuration options
21383  */
21384 Roo.htmleditor.FilterComment = function(cfg)
21385 {
21386     this.walk(cfg.node);
21387 }
21388
21389 Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
21390 {
21391   
21392     replaceComment : function(n)
21393     {
21394         n.parentNode.removeChild(n);
21395     }
21396 });/**
21397  * @class Roo.htmleditor.FilterKeepChildren
21398  * remove tags but keep children
21399  * @constructor
21400  * Run a new Keep Children Filter
21401  * @param {Object} config Configuration options
21402  */
21403
21404 Roo.htmleditor.FilterKeepChildren = function(cfg)
21405 {
21406     Roo.apply(this, cfg);
21407     if (this.tag === false) {
21408         return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
21409     }
21410     // hacky?
21411     if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
21412         this.cleanNamespace = true;
21413     }
21414         
21415     this.walk(cfg.node);
21416 }
21417
21418 Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
21419 {
21420     cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
21421   
21422     replaceTag : function(node)
21423     {
21424         // walk children...
21425         //Roo.log(node.tagName);
21426         var ar = Array.from(node.childNodes);
21427         //remove first..
21428         
21429         for (var i = 0; i < ar.length; i++) {
21430             var e = ar[i];
21431             if (e.nodeType == 1) {
21432                 if (
21433                     (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
21434                     || // array and it matches
21435                     (typeof(this.tag) == 'string' && this.tag == e.tagName)
21436                     ||
21437                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
21438                     ||
21439                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
21440                 ) {
21441                     this.replaceTag(ar[i]); // child is blacklisted as well...
21442                     continue;
21443                 }
21444             }
21445         }  
21446         ar = Array.from(node.childNodes);
21447         for (var i = 0; i < ar.length; i++) {
21448          
21449             node.removeChild(ar[i]);
21450             // what if we need to walk these???
21451             node.parentNode.insertBefore(ar[i], node);
21452             if (this.tag !== false) {
21453                 this.walk(ar[i]);
21454                 
21455             }
21456         }
21457         //Roo.log("REMOVE:" + node.tagName);
21458         node.parentNode.removeChild(node);
21459         return false; // don't walk children
21460         
21461         
21462     }
21463 });/**
21464  * @class Roo.htmleditor.FilterParagraph
21465  * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
21466  * like on 'push' to remove the <p> tags and replace them with line breaks.
21467  * @constructor
21468  * Run a new Paragraph Filter
21469  * @param {Object} config Configuration options
21470  */
21471
21472 Roo.htmleditor.FilterParagraph = function(cfg)
21473 {
21474     // no need to apply config.
21475     this.walk(cfg.node);
21476 }
21477
21478 Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
21479 {
21480     
21481      
21482     tag : 'P',
21483     
21484      
21485     replaceTag : function(node)
21486     {
21487         
21488         if (node.childNodes.length == 1 &&
21489             node.childNodes[0].nodeType == 3 &&
21490             node.childNodes[0].textContent.trim().length < 1
21491             ) {
21492             // remove and replace with '<BR>';
21493             node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
21494             return false; // no need to walk..
21495         }
21496         var ar = Array.from(node.childNodes);
21497         for (var i = 0; i < ar.length; i++) {
21498             node.removeChild(ar[i]);
21499             // what if we need to walk these???
21500             node.parentNode.insertBefore(ar[i], node);
21501         }
21502         // now what about this?
21503         // <p> &nbsp; </p>
21504         
21505         // double BR.
21506         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
21507         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
21508         node.parentNode.removeChild(node);
21509         
21510         return false;
21511
21512     }
21513     
21514 });/**
21515  * @class Roo.htmleditor.FilterSpan
21516  * filter span's with no attributes out..
21517  * @constructor
21518  * Run a new Span Filter
21519  * @param {Object} config Configuration options
21520  */
21521
21522 Roo.htmleditor.FilterSpan = function(cfg)
21523 {
21524     // no need to apply config.
21525     this.walk(cfg.node);
21526 }
21527
21528 Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
21529 {
21530      
21531     tag : 'SPAN',
21532      
21533  
21534     replaceTag : function(node)
21535     {
21536         if (node.attributes && node.attributes.length > 0) {
21537             return true; // walk if there are any.
21538         }
21539         Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
21540         return false;
21541      
21542     }
21543     
21544 });/**
21545  * @class Roo.htmleditor.FilterTableWidth
21546   try and remove table width data - as that frequently messes up other stuff.
21547  * 
21548  *      was cleanTableWidths.
21549  *
21550  * Quite often pasting from word etc.. results in tables with column and widths.
21551  * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
21552  *
21553  * @constructor
21554  * Run a new Table Filter
21555  * @param {Object} config Configuration options
21556  */
21557
21558 Roo.htmleditor.FilterTableWidth = function(cfg)
21559 {
21560     // no need to apply config.
21561     this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
21562     this.walk(cfg.node);
21563 }
21564
21565 Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
21566 {
21567      
21568      
21569     
21570     replaceTag: function(node) {
21571         
21572         
21573       
21574         if (node.hasAttribute('width')) {
21575             node.removeAttribute('width');
21576         }
21577         
21578          
21579         if (node.hasAttribute("style")) {
21580             // pretty basic...
21581             
21582             var styles = node.getAttribute("style").split(";");
21583             var nstyle = [];
21584             Roo.each(styles, function(s) {
21585                 if (!s.match(/:/)) {
21586                     return;
21587                 }
21588                 var kv = s.split(":");
21589                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
21590                     return;
21591                 }
21592                 // what ever is left... we allow.
21593                 nstyle.push(s);
21594             });
21595             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
21596             if (!nstyle.length) {
21597                 node.removeAttribute('style');
21598             }
21599         }
21600         
21601         return true; // continue doing children..
21602     }
21603 });/**
21604  * @class Roo.htmleditor.FilterWord
21605  * try and clean up all the mess that Word generates.
21606  * 
21607  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
21608  
21609  * @constructor
21610  * Run a new Span Filter
21611  * @param {Object} config Configuration options
21612  */
21613
21614 Roo.htmleditor.FilterWord = function(cfg)
21615 {
21616     // no need to apply config.
21617     this.replaceDocBullets(cfg.node);
21618     
21619     this.replaceAname(cfg.node);
21620     // this is disabled as the removal is done by other filters;
21621    // this.walk(cfg.node);
21622     
21623     
21624 }
21625
21626 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
21627 {
21628     tag: true,
21629      
21630     
21631     /**
21632      * Clean up MS wordisms...
21633      */
21634     replaceTag : function(node)
21635     {
21636          
21637         // no idea what this does - span with text, replaceds with just text.
21638         if(
21639                 node.nodeName == 'SPAN' &&
21640                 !node.hasAttributes() &&
21641                 node.childNodes.length == 1 &&
21642                 node.firstChild.nodeName == "#text"  
21643         ) {
21644             var textNode = node.firstChild;
21645             node.removeChild(textNode);
21646             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
21647                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
21648             }
21649             node.parentNode.insertBefore(textNode, node);
21650             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
21651                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
21652             }
21653             
21654             node.parentNode.removeChild(node);
21655             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
21656         }
21657         
21658    
21659         
21660         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
21661             node.parentNode.removeChild(node);
21662             return false; // dont do chidlren
21663         }
21664         //Roo.log(node.tagName);
21665         // remove - but keep children..
21666         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
21667             //Roo.log('-- removed');
21668             while (node.childNodes.length) {
21669                 var cn = node.childNodes[0];
21670                 node.removeChild(cn);
21671                 node.parentNode.insertBefore(cn, node);
21672                 // move node to parent - and clean it..
21673                 if (cn.nodeType == 1) {
21674                     this.replaceTag(cn);
21675                 }
21676                 
21677             }
21678             node.parentNode.removeChild(node);
21679             /// no need to iterate chidlren = it's got none..
21680             //this.iterateChildren(node, this.cleanWord);
21681             return false; // no need to iterate children.
21682         }
21683         // clean styles
21684         if (node.className.length) {
21685             
21686             var cn = node.className.split(/\W+/);
21687             var cna = [];
21688             Roo.each(cn, function(cls) {
21689                 if (cls.match(/Mso[a-zA-Z]+/)) {
21690                     return;
21691                 }
21692                 cna.push(cls);
21693             });
21694             node.className = cna.length ? cna.join(' ') : '';
21695             if (!cna.length) {
21696                 node.removeAttribute("class");
21697             }
21698         }
21699         
21700         if (node.hasAttribute("lang")) {
21701             node.removeAttribute("lang");
21702         }
21703         
21704         if (node.hasAttribute("style")) {
21705             
21706             var styles = node.getAttribute("style").split(";");
21707             var nstyle = [];
21708             Roo.each(styles, function(s) {
21709                 if (!s.match(/:/)) {
21710                     return;
21711                 }
21712                 var kv = s.split(":");
21713                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
21714                     return;
21715                 }
21716                 // what ever is left... we allow.
21717                 nstyle.push(s);
21718             });
21719             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
21720             if (!nstyle.length) {
21721                 node.removeAttribute('style');
21722             }
21723         }
21724         return true; // do children
21725         
21726         
21727         
21728     },
21729     
21730     styleToObject: function(node)
21731     {
21732         var styles = (node.getAttribute("style") || '').split(";");
21733         var ret = {};
21734         Roo.each(styles, function(s) {
21735             if (!s.match(/:/)) {
21736                 return;
21737             }
21738             var kv = s.split(":");
21739              
21740             // what ever is left... we allow.
21741             ret[kv[0].trim()] = kv[1];
21742         });
21743         return ret;
21744     },
21745     
21746     
21747     replaceAname : function (doc)
21748     {
21749         // replace all the a/name without..
21750         var aa = Array.from(doc.getElementsByTagName('a'));
21751         for (var i = 0; i  < aa.length; i++) {
21752             var a = aa[i];
21753             if (a.hasAttribute("name")) {
21754                 a.removeAttribute("name");
21755             }
21756             if (a.hasAttribute("href")) {
21757                 continue;
21758             }
21759             // reparent children.
21760             this.removeNodeKeepChildren(a);
21761             
21762         }
21763         
21764         
21765         
21766     },
21767
21768     
21769     
21770     replaceDocBullets : function(doc)
21771     {
21772         // this is a bit odd - but it appears some indents use ql-indent-1
21773          //Roo.log(doc.innerHTML);
21774         
21775         var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
21776         for( var i = 0; i < listpara.length; i ++) {
21777             listpara[i].className = "MsoListParagraph";
21778         }
21779         
21780         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
21781         for( var i = 0; i < listpara.length; i ++) {
21782             listpara[i].className = "MsoListParagraph";
21783         }
21784         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
21785         for( var i = 0; i < listpara.length; i ++) {
21786             listpara[i].className = "MsoListParagraph";
21787         }
21788         listpara =  Array.from(doc.getElementsByClassName('ql-indent-1'));
21789         for( var i = 0; i < listpara.length; i ++) {
21790             listpara[i].className = "MsoListParagraph";
21791         }
21792         
21793         // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
21794         var htwo =  Array.from(doc.getElementsByTagName('h2'));
21795         for( var i = 0; i < htwo.length; i ++) {
21796             if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
21797                 htwo[i].className = "MsoListParagraph";
21798             }
21799         }
21800         listpara =  Array.from(doc.getElementsByClassName('MsoNormal'));
21801         for( var i = 0; i < listpara.length; i ++) {
21802             if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
21803                 listpara[i].className = "MsoListParagraph";
21804             } else {
21805                 listpara[i].className = "MsoNormalx";
21806             }
21807         }
21808        
21809         listpara = doc.getElementsByClassName('MsoListParagraph');
21810         // Roo.log(doc.innerHTML);
21811         
21812         
21813         
21814         while(listpara.length) {
21815             
21816             this.replaceDocBullet(listpara.item(0));
21817         }
21818       
21819     },
21820     
21821      
21822     
21823     replaceDocBullet : function(p)
21824     {
21825         // gather all the siblings.
21826         var ns = p,
21827             parent = p.parentNode,
21828             doc = parent.ownerDocument,
21829             items = [];
21830             
21831         var listtype = 'ul';   
21832         while (ns) {
21833             if (ns.nodeType != 1) {
21834                 ns = ns.nextSibling;
21835                 continue;
21836             }
21837             if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
21838                 break;
21839             }
21840             var spans = ns.getElementsByTagName('span');
21841             if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
21842                 items.push(ns);
21843                 ns = ns.nextSibling;
21844                 has_list = true;
21845                 if (spans.length && spans[0].hasAttribute('style')) {
21846                     var  style = this.styleToObject(spans[0]);
21847                     if (typeof(style['font-family']) != 'undefined' && !style['font-family'].match(/Symbol/)) {
21848                         listtype = 'ol';
21849                     }
21850                 }
21851                 
21852                 continue;
21853             }
21854             var spans = ns.getElementsByTagName('span');
21855             if (!spans.length) {
21856                 break;
21857             }
21858             var has_list  = false;
21859             for(var i = 0; i < spans.length; i++) {
21860                 if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
21861                     has_list = true;
21862                     break;
21863                 }
21864             }
21865             if (!has_list) {
21866                 break;
21867             }
21868             items.push(ns);
21869             ns = ns.nextSibling;
21870             
21871             
21872         }
21873         if (!items.length) {
21874             ns.className = "";
21875             return;
21876         }
21877         
21878         var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
21879         parent.insertBefore(ul, p);
21880         var lvl = 0;
21881         var stack = [ ul ];
21882         var last_li = false;
21883         
21884         var margin_to_depth = {};
21885         max_margins = -1;
21886         
21887         items.forEach(function(n, ipos) {
21888             //Roo.log("got innertHMLT=" + n.innerHTML);
21889             
21890             var spans = n.getElementsByTagName('span');
21891             if (!spans.length) {
21892                 //Roo.log("No spans found");
21893                  
21894                 parent.removeChild(n);
21895                 
21896                 
21897                 return; // skip it...
21898             }
21899            
21900                 
21901             var num = 1;
21902             var style = {};
21903             for(var i = 0; i < spans.length; i++) {
21904             
21905                 style = this.styleToObject(spans[i]);
21906                 if (typeof(style['mso-list']) == 'undefined') {
21907                     continue;
21908                 }
21909                 if (listtype == 'ol') {
21910                    num = spans[i].innerText.replace(/[^0-9]+]/g,'')  * 1;
21911                 }
21912                 spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
21913                 break;
21914             }
21915             //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
21916             style = this.styleToObject(n); // mo-list is from the parent node.
21917             if (typeof(style['mso-list']) == 'undefined') {
21918                 //Roo.log("parent is missing level");
21919                   
21920                 parent.removeChild(n);
21921                  
21922                 return;
21923             }
21924             
21925             var margin = style['margin-left'];
21926             if (typeof(margin_to_depth[margin]) == 'undefined') {
21927                 max_margins++;
21928                 margin_to_depth[margin] = max_margins;
21929             }
21930             nlvl = margin_to_depth[margin] ;
21931              
21932             if (nlvl > lvl) {
21933                 //new indent
21934                 var nul = doc.createElement(listtype); // what about number lists...
21935                 if (!last_li) {
21936                     last_li = doc.createElement('li');
21937                     stack[lvl].appendChild(last_li);
21938                 }
21939                 last_li.appendChild(nul);
21940                 stack[nlvl] = nul;
21941                 
21942             }
21943             lvl = nlvl;
21944             
21945             // not starting at 1..
21946             if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
21947                 stack[nlvl].setAttribute("start", num);
21948             }
21949             
21950             var nli = stack[nlvl].appendChild(doc.createElement('li'));
21951             last_li = nli;
21952             nli.innerHTML = n.innerHTML;
21953             //Roo.log("innerHTML = " + n.innerHTML);
21954             parent.removeChild(n);
21955             
21956              
21957              
21958             
21959         },this);
21960         
21961         
21962         
21963         
21964     }
21965     
21966     
21967     
21968 });
21969 /**
21970  * @class Roo.htmleditor.FilterStyleToTag
21971  * part of the word stuff... - certain 'styles' should be converted to tags.
21972  * eg.
21973  *   font-weight: bold -> bold
21974  *   ?? super / subscrit etc..
21975  * 
21976  * @constructor
21977 * Run a new style to tag filter.
21978 * @param {Object} config Configuration options
21979  */
21980 Roo.htmleditor.FilterStyleToTag = function(cfg)
21981 {
21982     
21983     this.tags = {
21984         B  : [ 'fontWeight' , 'bold'],
21985         I :  [ 'fontStyle' , 'italic'],
21986         //pre :  [ 'font-style' , 'italic'],
21987         // h1.. h6 ?? font-size?
21988         SUP : [ 'verticalAlign' , 'super' ],
21989         SUB : [ 'verticalAlign' , 'sub' ]
21990         
21991         
21992     };
21993     
21994     Roo.apply(this, cfg);
21995      
21996     
21997     this.walk(cfg.node);
21998     
21999     
22000     
22001 }
22002
22003
22004 Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
22005 {
22006     tag: true, // all tags
22007     
22008     tags : false,
22009     
22010     
22011     replaceTag : function(node)
22012     {
22013         
22014         
22015         if (node.getAttribute("style") === null) {
22016             return true;
22017         }
22018         var inject = [];
22019         for (var k in this.tags) {
22020             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
22021                 inject.push(k);
22022                 node.style.removeProperty(this.tags[k][0]);
22023             }
22024         }
22025         if (!inject.length) {
22026             return true; 
22027         }
22028         var cn = Array.from(node.childNodes);
22029         var nn = node;
22030         Roo.each(inject, function(t) {
22031             var nc = node.ownerDocument.createElement(t);
22032             nn.appendChild(nc);
22033             nn = nc;
22034         });
22035         for(var i = 0;i < cn.length;cn++) {
22036             node.removeChild(cn[i]);
22037             nn.appendChild(cn[i]);
22038         }
22039         return true /// iterate thru
22040     }
22041     
22042 })/**
22043  * @class Roo.htmleditor.FilterLongBr
22044  * BR/BR/BR - keep a maximum of 2...
22045  * @constructor
22046  * Run a new Long BR Filter
22047  * @param {Object} config Configuration options
22048  */
22049
22050 Roo.htmleditor.FilterLongBr = function(cfg)
22051 {
22052     // no need to apply config.
22053     this.walk(cfg.node);
22054 }
22055
22056 Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
22057 {
22058     
22059      
22060     tag : 'BR',
22061     
22062      
22063     replaceTag : function(node)
22064     {
22065         
22066         var ps = node.nextSibling;
22067         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
22068             ps = ps.nextSibling;
22069         }
22070         
22071         if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
22072             node.parentNode.removeChild(node); // remove last BR inside one fo these tags
22073             return false;
22074         }
22075         
22076         if (!ps || ps.nodeType != 1) {
22077             return false;
22078         }
22079         
22080         if (!ps || ps.tagName != 'BR') {
22081            
22082             return false;
22083         }
22084         
22085         
22086         
22087         
22088         
22089         if (!node.previousSibling) {
22090             return false;
22091         }
22092         var ps = node.previousSibling;
22093         
22094         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
22095             ps = ps.previousSibling;
22096         }
22097         if (!ps || ps.nodeType != 1) {
22098             return false;
22099         }
22100         // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
22101         if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
22102             return false;
22103         }
22104         
22105         node.parentNode.removeChild(node); // remove me...
22106         
22107         return false; // no need to do children
22108
22109     }
22110     
22111 }); 
22112
22113 /**
22114  * @class Roo.htmleditor.FilterBlock
22115  * removes id / data-block and contenteditable that are associated with blocks
22116  * usage should be done on a cloned copy of the dom
22117  * @constructor
22118 * Run a new Attribute Filter { node : xxxx }}
22119 * @param {Object} config Configuration options
22120  */
22121 Roo.htmleditor.FilterBlock = function(cfg)
22122 {
22123     Roo.apply(this, cfg);
22124     var qa = cfg.node.querySelectorAll;
22125     this.removeAttributes('data-block');
22126     this.removeAttributes('contenteditable');
22127     this.removeAttributes('id');
22128     
22129 }
22130
22131 Roo.apply(Roo.htmleditor.FilterBlock.prototype,
22132 {
22133     node: true, // all tags
22134      
22135      
22136     removeAttributes : function(attr)
22137     {
22138         var ar = this.node.querySelectorAll('*[' + attr + ']');
22139         for (var i =0;i<ar.length;i++) {
22140             ar[i].removeAttribute(attr);
22141         }
22142     }
22143         
22144         
22145         
22146     
22147 });
22148 /***
22149  * This is based loosely on tinymce 
22150  * @class Roo.htmleditor.TidySerializer
22151  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
22152  * @constructor
22153  * @method Serializer
22154  * @param {Object} settings Name/value settings object.
22155  */
22156
22157
22158 Roo.htmleditor.TidySerializer = function(settings)
22159 {
22160     Roo.apply(this, settings);
22161     
22162     this.writer = new Roo.htmleditor.TidyWriter(settings);
22163     
22164     
22165
22166 };
22167 Roo.htmleditor.TidySerializer.prototype = {
22168     
22169     /**
22170      * @param {boolean} inner do the inner of the node.
22171      */
22172     inner : false,
22173     
22174     writer : false,
22175     
22176     /**
22177     * Serializes the specified node into a string.
22178     *
22179     * @example
22180     * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
22181     * @method serialize
22182     * @param {DomElement} node Node instance to serialize.
22183     * @return {String} String with HTML based on DOM tree.
22184     */
22185     serialize : function(node) {
22186         
22187         // = settings.validate;
22188         var writer = this.writer;
22189         var self  = this;
22190         this.handlers = {
22191             // #text
22192             3: function(node) {
22193                 
22194                 writer.text(node.nodeValue, node);
22195             },
22196             // #comment
22197             8: function(node) {
22198                 writer.comment(node.nodeValue);
22199             },
22200             // Processing instruction
22201             7: function(node) {
22202                 writer.pi(node.name, node.nodeValue);
22203             },
22204             // Doctype
22205             10: function(node) {
22206                 writer.doctype(node.nodeValue);
22207             },
22208             // CDATA
22209             4: function(node) {
22210                 writer.cdata(node.nodeValue);
22211             },
22212             // Document fragment
22213             11: function(node) {
22214                 node = node.firstChild;
22215                 if (!node) {
22216                     return;
22217                 }
22218                 while(node) {
22219                     self.walk(node);
22220                     node = node.nextSibling
22221                 }
22222             }
22223         };
22224         writer.reset();
22225         1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
22226         return writer.getContent();
22227     },
22228
22229     walk: function(node)
22230     {
22231         var attrName, attrValue, sortedAttrs, i, l, elementRule,
22232             handler = this.handlers[node.nodeType];
22233             
22234         if (handler) {
22235             handler(node);
22236             return;
22237         }
22238     
22239         var name = node.nodeName;
22240         var isEmpty = node.childNodes.length < 1;
22241       
22242         var writer = this.writer;
22243         var attrs = node.attributes;
22244         // Sort attributes
22245         
22246         writer.start(node.nodeName, attrs, isEmpty, node);
22247         if (isEmpty) {
22248             return;
22249         }
22250         node = node.firstChild;
22251         if (!node) {
22252             writer.end(name);
22253             return;
22254         }
22255         while (node) {
22256             this.walk(node);
22257             node = node.nextSibling;
22258         }
22259         writer.end(name);
22260         
22261     
22262     }
22263     // Serialize element and treat all non elements as fragments
22264    
22265 }; 
22266
22267 /***
22268  * This is based loosely on tinymce 
22269  * @class Roo.htmleditor.TidyWriter
22270  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
22271  *
22272  * Known issues?
22273  * - not tested much with 'PRE' formated elements.
22274  * 
22275  *
22276  *
22277  */
22278
22279 Roo.htmleditor.TidyWriter = function(settings)
22280 {
22281     
22282     // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
22283     Roo.apply(this, settings);
22284     this.html = [];
22285     this.state = [];
22286      
22287     this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
22288   
22289 }
22290 Roo.htmleditor.TidyWriter.prototype = {
22291
22292  
22293     state : false,
22294     
22295     indent :  '  ',
22296     
22297     // part of state...
22298     indentstr : '',
22299     in_pre: false,
22300     in_inline : false,
22301     last_inline : false,
22302     encode : false,
22303      
22304     
22305             /**
22306     * Writes the a start element such as <p id="a">.
22307     *
22308     * @method start
22309     * @param {String} name Name of the element.
22310     * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
22311     * @param {Boolean} empty Optional empty state if the tag should end like <br />.
22312     */
22313     start: function(name, attrs, empty, node)
22314     {
22315         var i, l, attr, value;
22316         
22317         // there are some situations where adding line break && indentation will not work. will not work.
22318         // <span / b / i ... formating?
22319         
22320         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
22321         var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
22322         
22323         var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
22324         
22325         var add_lb = name == 'BR' ? false : in_inline;
22326         
22327         if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
22328             i_inline = false;
22329         }
22330
22331         var indentstr =  this.indentstr;
22332         
22333         // e_inline = elements that can be inline, but still allow \n before and after?
22334         // only 'BR' ??? any others?
22335         
22336         // ADD LINE BEFORE tage
22337         if (!this.in_pre) {
22338             if (in_inline) {
22339                 //code
22340                 if (name == 'BR') {
22341                     this.addLine();
22342                 } else if (this.lastElementEndsWS()) {
22343                     this.addLine();
22344                 } else{
22345                     // otherwise - no new line. (and dont indent.)
22346                     indentstr = '';
22347                 }
22348                 
22349             } else {
22350                 this.addLine();
22351             }
22352         } else {
22353             indentstr = '';
22354         }
22355         
22356         this.html.push(indentstr + '<', name.toLowerCase());
22357         
22358         if (attrs) {
22359             for (i = 0, l = attrs.length; i < l; i++) {
22360                 attr = attrs[i];
22361                 this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
22362             }
22363         }
22364      
22365         if (empty) {
22366             if (is_short) {
22367                 this.html[this.html.length] = '/>';
22368             } else {
22369                 this.html[this.html.length] = '></' + name.toLowerCase() + '>';
22370             }
22371             var e_inline = name == 'BR' ? false : this.in_inline;
22372             
22373             if (!e_inline && !this.in_pre) {
22374                 this.addLine();
22375             }
22376             return;
22377         
22378         }
22379         // not empty..
22380         this.html[this.html.length] = '>';
22381         
22382         // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
22383         /*
22384         if (!in_inline && !in_pre) {
22385             var cn = node.firstChild;
22386             while(cn) {
22387                 if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
22388                     in_inline = true
22389                     break;
22390                 }
22391                 cn = cn.nextSibling;
22392             }
22393              
22394         }
22395         */
22396         
22397         
22398         this.pushState({
22399             indentstr : in_pre   ? '' : (this.indentstr + this.indent),
22400             in_pre : in_pre,
22401             in_inline :  in_inline
22402         });
22403         // add a line after if we are not in a
22404         
22405         if (!in_inline && !in_pre) {
22406             this.addLine();
22407         }
22408         
22409             
22410          
22411         
22412     },
22413     
22414     lastElementEndsWS : function()
22415     {
22416         var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
22417         if (value === false) {
22418             return true;
22419         }
22420         return value.match(/\s+$/);
22421         
22422     },
22423     
22424     /**
22425      * Writes the a end element such as </p>.
22426      *
22427      * @method end
22428      * @param {String} name Name of the element.
22429      */
22430     end: function(name) {
22431         var value;
22432         this.popState();
22433         var indentstr = '';
22434         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
22435         
22436         if (!this.in_pre && !in_inline) {
22437             this.addLine();
22438             indentstr  = this.indentstr;
22439         }
22440         this.html.push(indentstr + '</', name.toLowerCase(), '>');
22441         this.last_inline = in_inline;
22442         
22443         // pop the indent state..
22444     },
22445     /**
22446      * Writes a text node.
22447      *
22448      * In pre - we should not mess with the contents.
22449      * 
22450      *
22451      * @method text
22452      * @param {String} text String to write out.
22453      * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
22454      */
22455     text: function(in_text, node)
22456     {
22457         // if not in whitespace critical
22458         if (in_text.length < 1) {
22459             return;
22460         }
22461         var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
22462         
22463         if (this.in_pre) {
22464             this.html[this.html.length] =  text;
22465             return;   
22466         }
22467         
22468         if (this.in_inline) {
22469             text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
22470             if (text != ' ') {
22471                 text = text.replace(/\s+/,' ');  // all white space to single white space
22472                 
22473                     
22474                 // if next tag is '<BR>', then we can trim right..
22475                 if (node.nextSibling &&
22476                     node.nextSibling.nodeType == 1 &&
22477                     node.nextSibling.nodeName == 'BR' )
22478                 {
22479                     text = text.replace(/\s+$/g,'');
22480                 }
22481                 // if previous tag was a BR, we can also trim..
22482                 if (node.previousSibling &&
22483                     node.previousSibling.nodeType == 1 &&
22484                     node.previousSibling.nodeName == 'BR' )
22485                 {
22486                     text = this.indentstr +  text.replace(/^\s+/g,'');
22487                 }
22488                 if (text.match(/\n/)) {
22489                     text = text.replace(
22490                         /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
22491                     );
22492                     // remoeve the last whitespace / line break.
22493                     text = text.replace(/\n\s+$/,'');
22494                 }
22495                 // repace long lines
22496                 
22497             }
22498              
22499             this.html[this.html.length] =  text;
22500             return;   
22501         }
22502         // see if previous element was a inline element.
22503         var indentstr = this.indentstr;
22504    
22505         text = text.replace(/\s+/g," "); // all whitespace into single white space.
22506         
22507         // should trim left?
22508         if (node.previousSibling &&
22509             node.previousSibling.nodeType == 1 &&
22510             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
22511         {
22512             indentstr = '';
22513             
22514         } else {
22515             this.addLine();
22516             text = text.replace(/^\s+/,''); // trim left
22517           
22518         }
22519         // should trim right?
22520         if (node.nextSibling &&
22521             node.nextSibling.nodeType == 1 &&
22522             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
22523         {
22524           // noop
22525             
22526         }  else {
22527             text = text.replace(/\s+$/,''); // trim right
22528         }
22529          
22530               
22531         
22532         
22533         
22534         if (text.length < 1) {
22535             return;
22536         }
22537         if (!text.match(/\n/)) {
22538             this.html.push(indentstr + text);
22539             return;
22540         }
22541         
22542         text = this.indentstr + text.replace(
22543             /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
22544         );
22545         // remoeve the last whitespace / line break.
22546         text = text.replace(/\s+$/,''); 
22547         
22548         this.html.push(text);
22549         
22550         // split and indent..
22551         
22552         
22553     },
22554     /**
22555      * Writes a cdata node such as <![CDATA[data]]>.
22556      *
22557      * @method cdata
22558      * @param {String} text String to write out inside the cdata.
22559      */
22560     cdata: function(text) {
22561         this.html.push('<![CDATA[', text, ']]>');
22562     },
22563     /**
22564     * Writes a comment node such as <!-- Comment -->.
22565     *
22566     * @method cdata
22567     * @param {String} text String to write out inside the comment.
22568     */
22569    comment: function(text) {
22570        this.html.push('<!--', text, '-->');
22571    },
22572     /**
22573      * Writes a PI node such as <?xml attr="value" ?>.
22574      *
22575      * @method pi
22576      * @param {String} name Name of the pi.
22577      * @param {String} text String to write out inside the pi.
22578      */
22579     pi: function(name, text) {
22580         text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
22581         this.indent != '' && this.html.push('\n');
22582     },
22583     /**
22584      * Writes a doctype node such as <!DOCTYPE data>.
22585      *
22586      * @method doctype
22587      * @param {String} text String to write out inside the doctype.
22588      */
22589     doctype: function(text) {
22590         this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
22591     },
22592     /**
22593      * Resets the internal buffer if one wants to reuse the writer.
22594      *
22595      * @method reset
22596      */
22597     reset: function() {
22598         this.html.length = 0;
22599         this.state = [];
22600         this.pushState({
22601             indentstr : '',
22602             in_pre : false, 
22603             in_inline : false
22604         })
22605     },
22606     /**
22607      * Returns the contents that got serialized.
22608      *
22609      * @method getContent
22610      * @return {String} HTML contents that got written down.
22611      */
22612     getContent: function() {
22613         return this.html.join('').replace(/\n$/, '');
22614     },
22615     
22616     pushState : function(cfg)
22617     {
22618         this.state.push(cfg);
22619         Roo.apply(this, cfg);
22620     },
22621     
22622     popState : function()
22623     {
22624         if (this.state.length < 1) {
22625             return; // nothing to push
22626         }
22627         var cfg = {
22628             in_pre: false,
22629             indentstr : ''
22630         };
22631         this.state.pop();
22632         if (this.state.length > 0) {
22633             cfg = this.state[this.state.length-1]; 
22634         }
22635         Roo.apply(this, cfg);
22636     },
22637     
22638     addLine: function()
22639     {
22640         if (this.html.length < 1) {
22641             return;
22642         }
22643         
22644         
22645         var value = this.html[this.html.length - 1];
22646         if (value.length > 0 && '\n' !== value) {
22647             this.html.push('\n');
22648         }
22649     }
22650     
22651     
22652 //'pre script noscript style textarea video audio iframe object code'
22653 // shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
22654 // inline 
22655 };
22656
22657 Roo.htmleditor.TidyWriter.inline_elements = [
22658         'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
22659         'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
22660 ];
22661 Roo.htmleditor.TidyWriter.shortend_elements = [
22662     'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
22663     'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
22664 ];
22665
22666 Roo.htmleditor.TidyWriter.whitespace_elements = [
22667     'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
22668 ];/***
22669  * This is based loosely on tinymce 
22670  * @class Roo.htmleditor.TidyEntities
22671  * @static
22672  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
22673  *
22674  * Not 100% sure this is actually used or needed.
22675  */
22676
22677 Roo.htmleditor.TidyEntities = {
22678     
22679     /**
22680      * initialize data..
22681      */
22682     init : function (){
22683      
22684         this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
22685        
22686     },
22687
22688
22689     buildEntitiesLookup: function(items, radix) {
22690         var i, chr, entity, lookup = {};
22691         if (!items) {
22692             return {};
22693         }
22694         items = typeof(items) == 'string' ? items.split(',') : items;
22695         radix = radix || 10;
22696         // Build entities lookup table
22697         for (i = 0; i < items.length; i += 2) {
22698             chr = String.fromCharCode(parseInt(items[i], radix));
22699             // Only add non base entities
22700             if (!this.baseEntities[chr]) {
22701                 entity = '&' + items[i + 1] + ';';
22702                 lookup[chr] = entity;
22703                 lookup[entity] = chr;
22704             }
22705         }
22706         return lookup;
22707         
22708     },
22709     
22710     asciiMap : {
22711             128: '€',
22712             130: '‚',
22713             131: 'ƒ',
22714             132: '„',
22715             133: '…',
22716             134: '†',
22717             135: '‡',
22718             136: 'ˆ',
22719             137: '‰',
22720             138: 'Š',
22721             139: '‹',
22722             140: 'Œ',
22723             142: 'Ž',
22724             145: '‘',
22725             146: '’',
22726             147: '“',
22727             148: '”',
22728             149: '•',
22729             150: '–',
22730             151: '—',
22731             152: '˜',
22732             153: '™',
22733             154: 'š',
22734             155: '›',
22735             156: 'œ',
22736             158: 'ž',
22737             159: 'Ÿ'
22738     },
22739     // Raw entities
22740     baseEntities : {
22741         '"': '&quot;',
22742         // Needs to be escaped since the YUI compressor would otherwise break the code
22743         '\'': '&#39;',
22744         '<': '&lt;',
22745         '>': '&gt;',
22746         '&': '&amp;',
22747         '`': '&#96;'
22748     },
22749     // Reverse lookup table for raw entities
22750     reverseEntities : {
22751         '&lt;': '<',
22752         '&gt;': '>',
22753         '&amp;': '&',
22754         '&quot;': '"',
22755         '&apos;': '\''
22756     },
22757     
22758     attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
22759     textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
22760     rawCharsRegExp : /[<>&\"\']/g,
22761     entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
22762     namedEntities  : false,
22763     namedEntitiesData : [ 
22764         '50',
22765         'nbsp',
22766         '51',
22767         'iexcl',
22768         '52',
22769         'cent',
22770         '53',
22771         'pound',
22772         '54',
22773         'curren',
22774         '55',
22775         'yen',
22776         '56',
22777         'brvbar',
22778         '57',
22779         'sect',
22780         '58',
22781         'uml',
22782         '59',
22783         'copy',
22784         '5a',
22785         'ordf',
22786         '5b',
22787         'laquo',
22788         '5c',
22789         'not',
22790         '5d',
22791         'shy',
22792         '5e',
22793         'reg',
22794         '5f',
22795         'macr',
22796         '5g',
22797         'deg',
22798         '5h',
22799         'plusmn',
22800         '5i',
22801         'sup2',
22802         '5j',
22803         'sup3',
22804         '5k',
22805         'acute',
22806         '5l',
22807         'micro',
22808         '5m',
22809         'para',
22810         '5n',
22811         'middot',
22812         '5o',
22813         'cedil',
22814         '5p',
22815         'sup1',
22816         '5q',
22817         'ordm',
22818         '5r',
22819         'raquo',
22820         '5s',
22821         'frac14',
22822         '5t',
22823         'frac12',
22824         '5u',
22825         'frac34',
22826         '5v',
22827         'iquest',
22828         '60',
22829         'Agrave',
22830         '61',
22831         'Aacute',
22832         '62',
22833         'Acirc',
22834         '63',
22835         'Atilde',
22836         '64',
22837         'Auml',
22838         '65',
22839         'Aring',
22840         '66',
22841         'AElig',
22842         '67',
22843         'Ccedil',
22844         '68',
22845         'Egrave',
22846         '69',
22847         'Eacute',
22848         '6a',
22849         'Ecirc',
22850         '6b',
22851         'Euml',
22852         '6c',
22853         'Igrave',
22854         '6d',
22855         'Iacute',
22856         '6e',
22857         'Icirc',
22858         '6f',
22859         'Iuml',
22860         '6g',
22861         'ETH',
22862         '6h',
22863         'Ntilde',
22864         '6i',
22865         'Ograve',
22866         '6j',
22867         'Oacute',
22868         '6k',
22869         'Ocirc',
22870         '6l',
22871         'Otilde',
22872         '6m',
22873         'Ouml',
22874         '6n',
22875         'times',
22876         '6o',
22877         'Oslash',
22878         '6p',
22879         'Ugrave',
22880         '6q',
22881         'Uacute',
22882         '6r',
22883         'Ucirc',
22884         '6s',
22885         'Uuml',
22886         '6t',
22887         'Yacute',
22888         '6u',
22889         'THORN',
22890         '6v',
22891         'szlig',
22892         '70',
22893         'agrave',
22894         '71',
22895         'aacute',
22896         '72',
22897         'acirc',
22898         '73',
22899         'atilde',
22900         '74',
22901         'auml',
22902         '75',
22903         'aring',
22904         '76',
22905         'aelig',
22906         '77',
22907         'ccedil',
22908         '78',
22909         'egrave',
22910         '79',
22911         'eacute',
22912         '7a',
22913         'ecirc',
22914         '7b',
22915         'euml',
22916         '7c',
22917         'igrave',
22918         '7d',
22919         'iacute',
22920         '7e',
22921         'icirc',
22922         '7f',
22923         'iuml',
22924         '7g',
22925         'eth',
22926         '7h',
22927         'ntilde',
22928         '7i',
22929         'ograve',
22930         '7j',
22931         'oacute',
22932         '7k',
22933         'ocirc',
22934         '7l',
22935         'otilde',
22936         '7m',
22937         'ouml',
22938         '7n',
22939         'divide',
22940         '7o',
22941         'oslash',
22942         '7p',
22943         'ugrave',
22944         '7q',
22945         'uacute',
22946         '7r',
22947         'ucirc',
22948         '7s',
22949         'uuml',
22950         '7t',
22951         'yacute',
22952         '7u',
22953         'thorn',
22954         '7v',
22955         'yuml',
22956         'ci',
22957         'fnof',
22958         'sh',
22959         'Alpha',
22960         'si',
22961         'Beta',
22962         'sj',
22963         'Gamma',
22964         'sk',
22965         'Delta',
22966         'sl',
22967         'Epsilon',
22968         'sm',
22969         'Zeta',
22970         'sn',
22971         'Eta',
22972         'so',
22973         'Theta',
22974         'sp',
22975         'Iota',
22976         'sq',
22977         'Kappa',
22978         'sr',
22979         'Lambda',
22980         'ss',
22981         'Mu',
22982         'st',
22983         'Nu',
22984         'su',
22985         'Xi',
22986         'sv',
22987         'Omicron',
22988         't0',
22989         'Pi',
22990         't1',
22991         'Rho',
22992         't3',
22993         'Sigma',
22994         't4',
22995         'Tau',
22996         't5',
22997         'Upsilon',
22998         't6',
22999         'Phi',
23000         't7',
23001         'Chi',
23002         't8',
23003         'Psi',
23004         't9',
23005         'Omega',
23006         'th',
23007         'alpha',
23008         'ti',
23009         'beta',
23010         'tj',
23011         'gamma',
23012         'tk',
23013         'delta',
23014         'tl',
23015         'epsilon',
23016         'tm',
23017         'zeta',
23018         'tn',
23019         'eta',
23020         'to',
23021         'theta',
23022         'tp',
23023         'iota',
23024         'tq',
23025         'kappa',
23026         'tr',
23027         'lambda',
23028         'ts',
23029         'mu',
23030         'tt',
23031         'nu',
23032         'tu',
23033         'xi',
23034         'tv',
23035         'omicron',
23036         'u0',
23037         'pi',
23038         'u1',
23039         'rho',
23040         'u2',
23041         'sigmaf',
23042         'u3',
23043         'sigma',
23044         'u4',
23045         'tau',
23046         'u5',
23047         'upsilon',
23048         'u6',
23049         'phi',
23050         'u7',
23051         'chi',
23052         'u8',
23053         'psi',
23054         'u9',
23055         'omega',
23056         'uh',
23057         'thetasym',
23058         'ui',
23059         'upsih',
23060         'um',
23061         'piv',
23062         '812',
23063         'bull',
23064         '816',
23065         'hellip',
23066         '81i',
23067         'prime',
23068         '81j',
23069         'Prime',
23070         '81u',
23071         'oline',
23072         '824',
23073         'frasl',
23074         '88o',
23075         'weierp',
23076         '88h',
23077         'image',
23078         '88s',
23079         'real',
23080         '892',
23081         'trade',
23082         '89l',
23083         'alefsym',
23084         '8cg',
23085         'larr',
23086         '8ch',
23087         'uarr',
23088         '8ci',
23089         'rarr',
23090         '8cj',
23091         'darr',
23092         '8ck',
23093         'harr',
23094         '8dl',
23095         'crarr',
23096         '8eg',
23097         'lArr',
23098         '8eh',
23099         'uArr',
23100         '8ei',
23101         'rArr',
23102         '8ej',
23103         'dArr',
23104         '8ek',
23105         'hArr',
23106         '8g0',
23107         'forall',
23108         '8g2',
23109         'part',
23110         '8g3',
23111         'exist',
23112         '8g5',
23113         'empty',
23114         '8g7',
23115         'nabla',
23116         '8g8',
23117         'isin',
23118         '8g9',
23119         'notin',
23120         '8gb',
23121         'ni',
23122         '8gf',
23123         'prod',
23124         '8gh',
23125         'sum',
23126         '8gi',
23127         'minus',
23128         '8gn',
23129         'lowast',
23130         '8gq',
23131         'radic',
23132         '8gt',
23133         'prop',
23134         '8gu',
23135         'infin',
23136         '8h0',
23137         'ang',
23138         '8h7',
23139         'and',
23140         '8h8',
23141         'or',
23142         '8h9',
23143         'cap',
23144         '8ha',
23145         'cup',
23146         '8hb',
23147         'int',
23148         '8hk',
23149         'there4',
23150         '8hs',
23151         'sim',
23152         '8i5',
23153         'cong',
23154         '8i8',
23155         'asymp',
23156         '8j0',
23157         'ne',
23158         '8j1',
23159         'equiv',
23160         '8j4',
23161         'le',
23162         '8j5',
23163         'ge',
23164         '8k2',
23165         'sub',
23166         '8k3',
23167         'sup',
23168         '8k4',
23169         'nsub',
23170         '8k6',
23171         'sube',
23172         '8k7',
23173         'supe',
23174         '8kl',
23175         'oplus',
23176         '8kn',
23177         'otimes',
23178         '8l5',
23179         'perp',
23180         '8m5',
23181         'sdot',
23182         '8o8',
23183         'lceil',
23184         '8o9',
23185         'rceil',
23186         '8oa',
23187         'lfloor',
23188         '8ob',
23189         'rfloor',
23190         '8p9',
23191         'lang',
23192         '8pa',
23193         'rang',
23194         '9ea',
23195         'loz',
23196         '9j0',
23197         'spades',
23198         '9j3',
23199         'clubs',
23200         '9j5',
23201         'hearts',
23202         '9j6',
23203         'diams',
23204         'ai',
23205         'OElig',
23206         'aj',
23207         'oelig',
23208         'b0',
23209         'Scaron',
23210         'b1',
23211         'scaron',
23212         'bo',
23213         'Yuml',
23214         'm6',
23215         'circ',
23216         'ms',
23217         'tilde',
23218         '802',
23219         'ensp',
23220         '803',
23221         'emsp',
23222         '809',
23223         'thinsp',
23224         '80c',
23225         'zwnj',
23226         '80d',
23227         'zwj',
23228         '80e',
23229         'lrm',
23230         '80f',
23231         'rlm',
23232         '80j',
23233         'ndash',
23234         '80k',
23235         'mdash',
23236         '80o',
23237         'lsquo',
23238         '80p',
23239         'rsquo',
23240         '80q',
23241         'sbquo',
23242         '80s',
23243         'ldquo',
23244         '80t',
23245         'rdquo',
23246         '80u',
23247         'bdquo',
23248         '810',
23249         'dagger',
23250         '811',
23251         'Dagger',
23252         '81g',
23253         'permil',
23254         '81p',
23255         'lsaquo',
23256         '81q',
23257         'rsaquo',
23258         '85c',
23259         'euro'
23260     ],
23261
23262          
23263     /**
23264      * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
23265      *
23266      * @method encodeRaw
23267      * @param {String} text Text to encode.
23268      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
23269      * @return {String} Entity encoded text.
23270      */
23271     encodeRaw: function(text, attr)
23272     {
23273         var t = this;
23274         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
23275             return t.baseEntities[chr] || chr;
23276         });
23277     },
23278     /**
23279      * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
23280      * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
23281      * and is exposed as the DOMUtils.encode function.
23282      *
23283      * @method encodeAllRaw
23284      * @param {String} text Text to encode.
23285      * @return {String} Entity encoded text.
23286      */
23287     encodeAllRaw: function(text) {
23288         var t = this;
23289         return ('' + text).replace(this.rawCharsRegExp, function(chr) {
23290             return t.baseEntities[chr] || chr;
23291         });
23292     },
23293     /**
23294      * Encodes the specified string using numeric entities. The core entities will be
23295      * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
23296      *
23297      * @method encodeNumeric
23298      * @param {String} text Text to encode.
23299      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
23300      * @return {String} Entity encoded text.
23301      */
23302     encodeNumeric: function(text, attr) {
23303         var t = this;
23304         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
23305             // Multi byte sequence convert it to a single entity
23306             if (chr.length > 1) {
23307                 return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
23308             }
23309             return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
23310         });
23311     },
23312     /**
23313      * Encodes the specified string using named entities. The core entities will be encoded
23314      * as named ones but all non lower ascii characters will be encoded into named entities.
23315      *
23316      * @method encodeNamed
23317      * @param {String} text Text to encode.
23318      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
23319      * @param {Object} entities Optional parameter with entities to use.
23320      * @return {String} Entity encoded text.
23321      */
23322     encodeNamed: function(text, attr, entities) {
23323         var t = this;
23324         entities = entities || this.namedEntities;
23325         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
23326             return t.baseEntities[chr] || entities[chr] || chr;
23327         });
23328     },
23329     /**
23330      * Returns an encode function based on the name(s) and it's optional entities.
23331      *
23332      * @method getEncodeFunc
23333      * @param {String} name Comma separated list of encoders for example named,numeric.
23334      * @param {String} entities Optional parameter with entities to use instead of the built in set.
23335      * @return {function} Encode function to be used.
23336      */
23337     getEncodeFunc: function(name, entities) {
23338         entities = this.buildEntitiesLookup(entities) || this.namedEntities;
23339         var t = this;
23340         function encodeNamedAndNumeric(text, attr) {
23341             return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
23342                 return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
23343             });
23344         }
23345
23346         function encodeCustomNamed(text, attr) {
23347             return t.encodeNamed(text, attr, entities);
23348         }
23349         // Replace + with , to be compatible with previous TinyMCE versions
23350         name = this.makeMap(name.replace(/\+/g, ','));
23351         // Named and numeric encoder
23352         if (name.named && name.numeric) {
23353             return this.encodeNamedAndNumeric;
23354         }
23355         // Named encoder
23356         if (name.named) {
23357             // Custom names
23358             if (entities) {
23359                 return encodeCustomNamed;
23360             }
23361             return this.encodeNamed;
23362         }
23363         // Numeric
23364         if (name.numeric) {
23365             return this.encodeNumeric;
23366         }
23367         // Raw encoder
23368         return this.encodeRaw;
23369     },
23370     /**
23371      * Decodes the specified string, this will replace entities with raw UTF characters.
23372      *
23373      * @method decode
23374      * @param {String} text Text to entity decode.
23375      * @return {String} Entity decoded string.
23376      */
23377     decode: function(text)
23378     {
23379         var  t = this;
23380         return text.replace(this.entityRegExp, function(all, numeric) {
23381             if (numeric) {
23382                 numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
23383                 // Support upper UTF
23384                 if (numeric > 65535) {
23385                     numeric -= 65536;
23386                     return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
23387                 }
23388                 return t.asciiMap[numeric] || String.fromCharCode(numeric);
23389             }
23390             return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
23391         });
23392     },
23393     nativeDecode : function (text) {
23394         return text;
23395     },
23396     makeMap : function (items, delim, map) {
23397                 var i;
23398                 items = items || [];
23399                 delim = delim || ',';
23400                 if (typeof items == "string") {
23401                         items = items.split(delim);
23402                 }
23403                 map = map || {};
23404                 i = items.length;
23405                 while (i--) {
23406                         map[items[i]] = {};
23407                 }
23408                 return map;
23409         }
23410 };
23411     
23412     
23413     
23414 Roo.htmleditor.TidyEntities.init();
23415 /**
23416  * @class Roo.htmleditor.KeyEnter
23417  * Handle Enter press..
23418  * @cfg {Roo.HtmlEditorCore} core the editor.
23419  * @constructor
23420  * Create a new Filter.
23421  * @param {Object} config Configuration options
23422  */
23423
23424
23425
23426
23427
23428 Roo.htmleditor.KeyEnter = function(cfg) {
23429     Roo.apply(this, cfg);
23430     // this does not actually call walk as it's really just a abstract class
23431  
23432     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
23433 }
23434
23435 //Roo.htmleditor.KeyEnter.i = 0;
23436
23437
23438 Roo.htmleditor.KeyEnter.prototype = {
23439     
23440     core : false,
23441     
23442     keypress : function(e)
23443     {
23444         if (e.charCode != 13 && e.charCode != 10) {
23445             Roo.log([e.charCode,e]);
23446             return true;
23447         }
23448         e.preventDefault();
23449         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
23450         var doc = this.core.doc;
23451           //add a new line
23452        
23453     
23454         var sel = this.core.getSelection();
23455         var range = sel.getRangeAt(0);
23456         var n = range.commonAncestorContainer;
23457         var pc = range.closest([ 'ol', 'ul']);
23458         var pli = range.closest('li');
23459         if (!pc || e.ctrlKey) {
23460             // on it list, or ctrl pressed.
23461             if (!e.ctrlKey) {
23462                 sel.insertNode('br', 'after'); 
23463             } else {
23464                 // only do this if we have ctrl key..
23465                 var br = doc.createElement('br');
23466                 br.className = 'clear';
23467                 br.setAttribute('style', 'clear: both');
23468                 sel.insertNode(br, 'after'); 
23469             }
23470             
23471          
23472             this.core.undoManager.addEvent();
23473             this.core.fireEditorEvent(e);
23474             return false;
23475         }
23476         
23477         // deal with <li> insetion
23478         if (pli.innerText.trim() == '' &&
23479             pli.previousSibling &&
23480             pli.previousSibling.nodeName == 'LI' &&
23481             pli.previousSibling.innerText.trim() ==  '') {
23482             pli.parentNode.removeChild(pli.previousSibling);
23483             sel.cursorAfter(pc);
23484             this.core.undoManager.addEvent();
23485             this.core.fireEditorEvent(e);
23486             return false;
23487         }
23488     
23489         var li = doc.createElement('LI');
23490         li.innerHTML = '&nbsp;';
23491         if (!pli || !pli.firstSibling) {
23492             pc.appendChild(li);
23493         } else {
23494             pli.parentNode.insertBefore(li, pli.firstSibling);
23495         }
23496         sel.cursorText (li.firstChild);
23497       
23498         this.core.undoManager.addEvent();
23499         this.core.fireEditorEvent(e);
23500
23501         return false;
23502         
23503     
23504         
23505         
23506          
23507     }
23508 };
23509      
23510 /**
23511  * @class Roo.htmleditor.Block
23512  * Base class for html editor blocks - do not use it directly .. extend it..
23513  * @cfg {DomElement} node The node to apply stuff to.
23514  * @cfg {String} friendly_name the name that appears in the context bar about this block
23515  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
23516  
23517  * @constructor
23518  * Create a new Filter.
23519  * @param {Object} config Configuration options
23520  */
23521
23522 Roo.htmleditor.Block  = function(cfg)
23523 {
23524     // do nothing .. should not be called really.
23525 }
23526 /**
23527  * factory method to get the block from an element (using cache if necessary)
23528  * @static
23529  * @param {HtmlElement} the dom element
23530  */
23531 Roo.htmleditor.Block.factory = function(node)
23532 {
23533     var cc = Roo.htmleditor.Block.cache;
23534     var id = Roo.get(node).id;
23535     if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
23536         Roo.htmleditor.Block.cache[id].readElement(node);
23537         return Roo.htmleditor.Block.cache[id];
23538     }
23539     var db  = node.getAttribute('data-block');
23540     if (!db) {
23541         db = node.nodeName.toLowerCase().toUpperCaseFirst();
23542     }
23543     var cls = Roo.htmleditor['Block' + db];
23544     if (typeof(cls) == 'undefined') {
23545         //Roo.log(node.getAttribute('data-block'));
23546         Roo.log("OOps missing block : " + 'Block' + db);
23547         return false;
23548     }
23549     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
23550     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
23551 };
23552
23553 /**
23554  * initalize all Elements from content that are 'blockable'
23555  * @static
23556  * @param the body element
23557  */
23558 Roo.htmleditor.Block.initAll = function(body, type)
23559 {
23560     if (typeof(type) == 'undefined') {
23561         var ia = Roo.htmleditor.Block.initAll;
23562         ia(body,'table');
23563         ia(body,'td');
23564         ia(body,'figure');
23565         return;
23566     }
23567     Roo.each(Roo.get(body).query(type), function(e) {
23568         Roo.htmleditor.Block.factory(e);    
23569     },this);
23570 };
23571 // question goes here... do we need to clear out this cache sometimes?
23572 // or show we make it relivant to the htmleditor.
23573 Roo.htmleditor.Block.cache = {};
23574
23575 Roo.htmleditor.Block.prototype = {
23576     
23577     node : false,
23578     
23579      // used by context menu
23580     friendly_name : 'Based Block',
23581     
23582     // text for button to delete this element
23583     deleteTitle : false,
23584     
23585     context : false,
23586     /**
23587      * Update a node with values from this object
23588      * @param {DomElement} node
23589      */
23590     updateElement : function(node)
23591     {
23592         Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
23593     },
23594      /**
23595      * convert to plain HTML for calling insertAtCursor..
23596      */
23597     toHTML : function()
23598     {
23599         return Roo.DomHelper.markup(this.toObject());
23600     },
23601     /**
23602      * used by readEleemnt to extract data from a node
23603      * may need improving as it's pretty basic
23604      
23605      * @param {DomElement} node
23606      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
23607      * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
23608      * @param {String} style the style property - eg. text-align
23609      */
23610     getVal : function(node, tag, attr, style)
23611     {
23612         var n = node;
23613         if (tag !== true && n.tagName != tag.toUpperCase()) {
23614             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
23615             // but kiss for now.
23616             n = node.getElementsByTagName(tag).item(0);
23617         }
23618         if (!n) {
23619             return '';
23620         }
23621         if (attr === false) {
23622             return n;
23623         }
23624         if (attr == 'html') {
23625             return n.innerHTML;
23626         }
23627         if (attr == 'style') {
23628             return n.style[style]; 
23629         }
23630         
23631         return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
23632             
23633     },
23634     /**
23635      * create a DomHelper friendly object - for use with 
23636      * Roo.DomHelper.markup / overwrite / etc..
23637      * (override this)
23638      */
23639     toObject : function()
23640     {
23641         return {};
23642     },
23643       /**
23644      * Read a node that has a 'data-block' property - and extract the values from it.
23645      * @param {DomElement} node - the node
23646      */
23647     readElement : function(node)
23648     {
23649         
23650     } 
23651     
23652     
23653 };
23654
23655  
23656
23657 /**
23658  * @class Roo.htmleditor.BlockFigure
23659  * Block that has an image and a figcaption
23660  * @cfg {String} image_src the url for the image
23661  * @cfg {String} align (left|right) alignment for the block default left
23662  * @cfg {String} caption the text to appear below  (and in the alt tag)
23663  * @cfg {String} caption_display (block|none) display or not the caption
23664  * @cfg {String|number} image_width the width of the image number or %?
23665  * @cfg {String|number} image_height the height of the image number or %?
23666  * 
23667  * @constructor
23668  * Create a new Filter.
23669  * @param {Object} config Configuration options
23670  */
23671
23672 Roo.htmleditor.BlockFigure = function(cfg)
23673 {
23674     if (cfg.node) {
23675         this.readElement(cfg.node);
23676         this.updateElement(cfg.node);
23677     }
23678     Roo.apply(this, cfg);
23679 }
23680 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
23681  
23682     
23683     // setable values.
23684     image_src: '',
23685     align: 'center',
23686     caption : '',
23687     caption_display : 'block',
23688     width : '100%',
23689     cls : '',
23690     href: '',
23691     video_url : '',
23692     
23693     // margin: '2%', not used
23694     
23695     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
23696
23697     
23698     // used by context menu
23699     friendly_name : 'Image with caption',
23700     deleteTitle : "Delete Image and Caption",
23701     
23702     contextMenu : function(toolbar)
23703     {
23704         
23705         var block = function() {
23706             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
23707         };
23708         
23709         
23710         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
23711         
23712         var syncValue = toolbar.editorcore.syncValue;
23713         
23714         var fields = {};
23715         
23716         return [
23717              {
23718                 xtype : 'TextItem',
23719                 text : "Source: ",
23720                 xns : rooui.Toolbar  //Boostrap?
23721             },
23722             {
23723                 xtype : 'Button',
23724                 text: 'Change Image URL',
23725                  
23726                 listeners : {
23727                     click: function (btn, state)
23728                     {
23729                         var b = block();
23730                         
23731                         Roo.MessageBox.show({
23732                             title : "Image Source URL",
23733                             msg : "Enter the url for the image",
23734                             buttons: Roo.MessageBox.OKCANCEL,
23735                             fn: function(btn, val){
23736                                 if (btn != 'ok') {
23737                                     return;
23738                                 }
23739                                 b.image_src = val;
23740                                 b.updateElement();
23741                                 syncValue();
23742                                 toolbar.editorcore.onEditorEvent();
23743                             },
23744                             minWidth:250,
23745                             prompt:true,
23746                             //multiline: multiline,
23747                             modal : true,
23748                             value : b.image_src
23749                         });
23750                     }
23751                 },
23752                 xns : rooui.Toolbar
23753             },
23754          
23755             {
23756                 xtype : 'Button',
23757                 text: 'Change Link URL',
23758                  
23759                 listeners : {
23760                     click: function (btn, state)
23761                     {
23762                         var b = block();
23763                         
23764                         Roo.MessageBox.show({
23765                             title : "Link URL",
23766                             msg : "Enter the url for the link - leave blank to have no link",
23767                             buttons: Roo.MessageBox.OKCANCEL,
23768                             fn: function(btn, val){
23769                                 if (btn != 'ok') {
23770                                     return;
23771                                 }
23772                                 b.href = val;
23773                                 b.updateElement();
23774                                 syncValue();
23775                                 toolbar.editorcore.onEditorEvent();
23776                             },
23777                             minWidth:250,
23778                             prompt:true,
23779                             //multiline: multiline,
23780                             modal : true,
23781                             value : b.href
23782                         });
23783                     }
23784                 },
23785                 xns : rooui.Toolbar
23786             },
23787             {
23788                 xtype : 'Button',
23789                 text: 'Show Video URL',
23790                  
23791                 listeners : {
23792                     click: function (btn, state)
23793                     {
23794                         Roo.MessageBox.alert("Video URL",
23795                             block().video_url == '' ? 'This image is not linked ot a video' :
23796                                 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
23797                     }
23798                 },
23799                 xns : rooui.Toolbar
23800             },
23801             
23802             
23803             {
23804                 xtype : 'TextItem',
23805                 text : "Width: ",
23806                 xns : rooui.Toolbar  //Boostrap?
23807             },
23808             {
23809                 xtype : 'ComboBox',
23810                 allowBlank : false,
23811                 displayField : 'val',
23812                 editable : true,
23813                 listWidth : 100,
23814                 triggerAction : 'all',
23815                 typeAhead : true,
23816                 valueField : 'val',
23817                 width : 70,
23818                 name : 'width',
23819                 listeners : {
23820                     select : function (combo, r, index)
23821                     {
23822                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
23823                         var b = block();
23824                         b.width = r.get('val');
23825                         b.updateElement();
23826                         syncValue();
23827                         toolbar.editorcore.onEditorEvent();
23828                     }
23829                 },
23830                 xns : rooui.form,
23831                 store : {
23832                     xtype : 'SimpleStore',
23833                     data : [
23834                         ['100%'],
23835                         ['80%'],
23836                         ['50%'],
23837                         ['20%'],
23838                         ['10%']
23839                     ],
23840                     fields : [ 'val'],
23841                     xns : Roo.data
23842                 }
23843             },
23844             {
23845                 xtype : 'TextItem',
23846                 text : "Align: ",
23847                 xns : rooui.Toolbar  //Boostrap?
23848             },
23849             {
23850                 xtype : 'ComboBox',
23851                 allowBlank : false,
23852                 displayField : 'val',
23853                 editable : true,
23854                 listWidth : 100,
23855                 triggerAction : 'all',
23856                 typeAhead : true,
23857                 valueField : 'val',
23858                 width : 70,
23859                 name : 'align',
23860                 listeners : {
23861                     select : function (combo, r, index)
23862                     {
23863                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
23864                         var b = block();
23865                         b.align = r.get('val');
23866                         b.updateElement();
23867                         syncValue();
23868                         toolbar.editorcore.onEditorEvent();
23869                     }
23870                 },
23871                 xns : rooui.form,
23872                 store : {
23873                     xtype : 'SimpleStore',
23874                     data : [
23875                         ['left'],
23876                         ['right'],
23877                         ['center']
23878                     ],
23879                     fields : [ 'val'],
23880                     xns : Roo.data
23881                 }
23882             },
23883             
23884             
23885             {
23886                 xtype : 'Button',
23887                 text: 'Hide Caption',
23888                 name : 'caption_display',
23889                 pressed : false,
23890                 enableToggle : true,
23891                 setValue : function(v) {
23892                     // this trigger toggle.
23893                      
23894                     this.setText(v ? "Hide Caption" : "Show Caption");
23895                     this.setPressed(v != 'block');
23896                 },
23897                 listeners : {
23898                     toggle: function (btn, state)
23899                     {
23900                         var b  = block();
23901                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
23902                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
23903                         b.updateElement();
23904                         syncValue();
23905                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
23906                         toolbar.editorcore.onEditorEvent();
23907                     }
23908                 },
23909                 xns : rooui.Toolbar
23910             }
23911         ];
23912         
23913     },
23914     /**
23915      * create a DomHelper friendly object - for use with
23916      * Roo.DomHelper.markup / overwrite / etc..
23917      */
23918     toObject : function()
23919     {
23920         var d = document.createElement('div');
23921         d.innerHTML = this.caption;
23922         
23923         var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
23924         
23925         var iw = this.align == 'center' ? this.width : '100%';
23926         var img =   {
23927             tag : 'img',
23928             contenteditable : 'false',
23929             src : this.image_src,
23930             alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
23931             style: {
23932                 width : iw,
23933                 maxWidth : iw + ' !important', // this is not getting rendered?
23934                 margin : m  
23935                 
23936             }
23937         };
23938         /*
23939         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
23940                     '<a href="{2}">' + 
23941                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
23942                     '</a>' + 
23943                 '</div>',
23944         */
23945                 
23946         if (this.href.length > 0) {
23947             img = {
23948                 tag : 'a',
23949                 href: this.href,
23950                 contenteditable : 'true',
23951                 cn : [
23952                     img
23953                 ]
23954             };
23955         }
23956         
23957         
23958         if (this.video_url.length > 0) {
23959             img = {
23960                 tag : 'div',
23961                 cls : this.cls,
23962                 frameborder : 0,
23963                 allowfullscreen : true,
23964                 width : 420,  // these are for video tricks - that we replace the outer
23965                 height : 315,
23966                 src : this.video_url,
23967                 cn : [
23968                     img
23969                 ]
23970             };
23971         }
23972         // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
23973         var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
23974         
23975   
23976         var ret =   {
23977             tag: 'figure',
23978             'data-block' : 'Figure',
23979             'data-width' : this.width, 
23980             contenteditable : 'false',
23981             
23982             style : {
23983                 display: 'block',
23984                 float :  this.align ,
23985                 maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
23986                 width : this.align == 'center' ? '100%' : this.width,
23987                 margin:  '0px',
23988                 padding: this.align == 'center' ? '0' : '0 10px' ,
23989                 textAlign : this.align   // seems to work for email..
23990                 
23991             },
23992            
23993             
23994             align : this.align,
23995             cn : [
23996                 img,
23997               
23998                 {
23999                     tag: 'figcaption',
24000                     'data-display' : this.caption_display,
24001                     style : {
24002                         textAlign : 'left',
24003                         fontSize : '16px',
24004                         lineHeight : '24px',
24005                         display : this.caption_display,
24006                         maxWidth : (this.align == 'center' ?  this.width : '100%' ) + ' !important',
24007                         margin: m,
24008                         width: this.align == 'center' ?  this.width : '100%' 
24009                     
24010                          
24011                     },
24012                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
24013                     cn : [
24014                         {
24015                             tag: 'div',
24016                             style  : {
24017                                 marginTop : '16px',
24018                                 textAlign : 'left'
24019                             },
24020                             align: 'left',
24021                             cn : [
24022                                 {
24023                                     // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
24024                                     tag : 'i',
24025                                     contenteditable : true,
24026                                     html : captionhtml
24027                                 }
24028                                 
24029                             ]
24030                         }
24031                         
24032                     ]
24033                     
24034                 }
24035             ]
24036         };
24037         return ret;
24038          
24039     },
24040     
24041     readElement : function(node)
24042     {
24043         // this should not really come from the link...
24044         this.video_url = this.getVal(node, 'div', 'src');
24045         this.cls = this.getVal(node, 'div', 'class');
24046         this.href = this.getVal(node, 'a', 'href');
24047         
24048         
24049         this.image_src = this.getVal(node, 'img', 'src');
24050          
24051         this.align = this.getVal(node, 'figure', 'align');
24052         var figcaption = this.getVal(node, 'figcaption', false);
24053         if (figcaption !== '') {
24054             this.caption = this.getVal(figcaption, 'i', 'html');
24055         }
24056         
24057
24058         this.caption_display = this.getVal(node, 'figcaption', 'data-display');
24059         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
24060         this.width = this.getVal(node, true, 'data-width');
24061         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
24062         
24063     },
24064     removeNode : function()
24065     {
24066         return this.node;
24067     }
24068     
24069   
24070    
24071      
24072     
24073     
24074     
24075     
24076 })
24077
24078  
24079
24080 /**
24081  * @class Roo.htmleditor.BlockTable
24082  * Block that manages a table
24083  * 
24084  * @constructor
24085  * Create a new Filter.
24086  * @param {Object} config Configuration options
24087  */
24088
24089 Roo.htmleditor.BlockTable = function(cfg)
24090 {
24091     if (cfg.node) {
24092         this.readElement(cfg.node);
24093         this.updateElement(cfg.node);
24094     }
24095     Roo.apply(this, cfg);
24096     if (!cfg.node) {
24097         this.rows = [];
24098         for(var r = 0; r < this.no_row; r++) {
24099             this.rows[r] = [];
24100             for(var c = 0; c < this.no_col; c++) {
24101                 this.rows[r][c] = this.emptyCell();
24102             }
24103         }
24104     }
24105     
24106     
24107 }
24108 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
24109  
24110     rows : false,
24111     no_col : 1,
24112     no_row : 1,
24113     
24114     
24115     width: '100%',
24116     
24117     // used by context menu
24118     friendly_name : 'Table',
24119     deleteTitle : 'Delete Table',
24120     // context menu is drawn once..
24121     
24122     contextMenu : function(toolbar)
24123     {
24124         
24125         var block = function() {
24126             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
24127         };
24128         
24129         
24130         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
24131         
24132         var syncValue = toolbar.editorcore.syncValue;
24133         
24134         var fields = {};
24135         
24136         return [
24137             {
24138                 xtype : 'TextItem',
24139                 text : "Width: ",
24140                 xns : rooui.Toolbar  //Boostrap?
24141             },
24142             {
24143                 xtype : 'ComboBox',
24144                 allowBlank : false,
24145                 displayField : 'val',
24146                 editable : true,
24147                 listWidth : 100,
24148                 triggerAction : 'all',
24149                 typeAhead : true,
24150                 valueField : 'val',
24151                 width : 100,
24152                 name : 'width',
24153                 listeners : {
24154                     select : function (combo, r, index)
24155                     {
24156                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24157                         var b = block();
24158                         b.width = r.get('val');
24159                         b.updateElement();
24160                         syncValue();
24161                         toolbar.editorcore.onEditorEvent();
24162                     }
24163                 },
24164                 xns : rooui.form,
24165                 store : {
24166                     xtype : 'SimpleStore',
24167                     data : [
24168                         ['100%'],
24169                         ['auto']
24170                     ],
24171                     fields : [ 'val'],
24172                     xns : Roo.data
24173                 }
24174             },
24175             // -------- Cols
24176             
24177             {
24178                 xtype : 'TextItem',
24179                 text : "Columns: ",
24180                 xns : rooui.Toolbar  //Boostrap?
24181             },
24182          
24183             {
24184                 xtype : 'Button',
24185                 text: '-',
24186                 listeners : {
24187                     click : function (_self, e)
24188                     {
24189                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24190                         block().removeColumn();
24191                         syncValue();
24192                         toolbar.editorcore.onEditorEvent();
24193                     }
24194                 },
24195                 xns : rooui.Toolbar
24196             },
24197             {
24198                 xtype : 'Button',
24199                 text: '+',
24200                 listeners : {
24201                     click : function (_self, e)
24202                     {
24203                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24204                         block().addColumn();
24205                         syncValue();
24206                         toolbar.editorcore.onEditorEvent();
24207                     }
24208                 },
24209                 xns : rooui.Toolbar
24210             },
24211             // -------- ROWS
24212             {
24213                 xtype : 'TextItem',
24214                 text : "Rows: ",
24215                 xns : rooui.Toolbar  //Boostrap?
24216             },
24217          
24218             {
24219                 xtype : 'Button',
24220                 text: '-',
24221                 listeners : {
24222                     click : function (_self, e)
24223                     {
24224                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24225                         block().removeRow();
24226                         syncValue();
24227                         toolbar.editorcore.onEditorEvent();
24228                     }
24229                 },
24230                 xns : rooui.Toolbar
24231             },
24232             {
24233                 xtype : 'Button',
24234                 text: '+',
24235                 listeners : {
24236                     click : function (_self, e)
24237                     {
24238                         block().addRow();
24239                         syncValue();
24240                         toolbar.editorcore.onEditorEvent();
24241                     }
24242                 },
24243                 xns : rooui.Toolbar
24244             },
24245             // -------- ROWS
24246             {
24247                 xtype : 'Button',
24248                 text: 'Reset Column Widths',
24249                 listeners : {
24250                     
24251                     click : function (_self, e)
24252                     {
24253                         block().resetWidths();
24254                         syncValue();
24255                         toolbar.editorcore.onEditorEvent();
24256                     }
24257                 },
24258                 xns : rooui.Toolbar
24259             } 
24260             
24261             
24262             
24263         ];
24264         
24265     },
24266     
24267     
24268   /**
24269      * create a DomHelper friendly object - for use with
24270      * Roo.DomHelper.markup / overwrite / etc..
24271      * ?? should it be called with option to hide all editing features?
24272      */
24273     toObject : function()
24274     {
24275         
24276         var ret = {
24277             tag : 'table',
24278             contenteditable : 'false', // this stops cell selection from picking the table.
24279             'data-block' : 'Table',
24280             style : {
24281                 width:  this.width,
24282                 border : 'solid 1px #000', // ??? hard coded?
24283                 'border-collapse' : 'collapse' 
24284             },
24285             cn : [
24286                 { tag : 'tbody' , cn : [] }
24287             ]
24288         };
24289         
24290         // do we have a head = not really 
24291         var ncols = 0;
24292         Roo.each(this.rows, function( row ) {
24293             var tr = {
24294                 tag: 'tr',
24295                 style : {
24296                     margin: '6px',
24297                     border : 'solid 1px #000',
24298                     textAlign : 'left' 
24299                 },
24300                 cn : [ ]
24301             };
24302             
24303             ret.cn[0].cn.push(tr);
24304             // does the row have any properties? ?? height?
24305             var nc = 0;
24306             Roo.each(row, function( cell ) {
24307                 
24308                 var td = {
24309                     tag : 'td',
24310                     contenteditable :  'true',
24311                     'data-block' : 'Td',
24312                     html : cell.html,
24313                     style : cell.style
24314                 };
24315                 if (cell.colspan > 1) {
24316                     td.colspan = cell.colspan ;
24317                     nc += cell.colspan;
24318                 } else {
24319                     nc++;
24320                 }
24321                 if (cell.rowspan > 1) {
24322                     td.rowspan = cell.rowspan ;
24323                 }
24324                 
24325                 
24326                 // widths ?
24327                 tr.cn.push(td);
24328                     
24329                 
24330             }, this);
24331             ncols = Math.max(nc, ncols);
24332             
24333             
24334         }, this);
24335         // add the header row..
24336         
24337         ncols++;
24338          
24339         
24340         return ret;
24341          
24342     },
24343     
24344     readElement : function(node)
24345     {
24346         node  = node ? node : this.node ;
24347         this.width = this.getVal(node, true, 'style', 'width') || '100%';
24348         
24349         this.rows = [];
24350         this.no_row = 0;
24351         var trs = Array.from(node.rows);
24352         trs.forEach(function(tr) {
24353             var row =  [];
24354             this.rows.push(row);
24355             
24356             this.no_row++;
24357             var no_column = 0;
24358             Array.from(tr.cells).forEach(function(td) {
24359                 
24360                 var add = {
24361                     colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
24362                     rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
24363                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
24364                     html : td.innerHTML
24365                 };
24366                 no_column += add.colspan;
24367                      
24368                 
24369                 row.push(add);
24370                 
24371                 
24372             },this);
24373             this.no_col = Math.max(this.no_col, no_column);
24374             
24375             
24376         },this);
24377         
24378         
24379     },
24380     normalizeRows: function()
24381     {
24382         var ret= [];
24383         var rid = -1;
24384         this.rows.forEach(function(row) {
24385             rid++;
24386             ret[rid] = [];
24387             row = this.normalizeRow(row);
24388             var cid = 0;
24389             row.forEach(function(c) {
24390                 while (typeof(ret[rid][cid]) != 'undefined') {
24391                     cid++;
24392                 }
24393                 if (typeof(ret[rid]) == 'undefined') {
24394                     ret[rid] = [];
24395                 }
24396                 ret[rid][cid] = c;
24397                 c.row = rid;
24398                 c.col = cid;
24399                 if (c.rowspan < 2) {
24400                     return;
24401                 }
24402                 
24403                 for(var i = 1 ;i < c.rowspan; i++) {
24404                     if (typeof(ret[rid+i]) == 'undefined') {
24405                         ret[rid+i] = [];
24406                     }
24407                     ret[rid+i][cid] = c;
24408                 }
24409             });
24410         }, this);
24411         return ret;
24412     
24413     },
24414     
24415     normalizeRow: function(row)
24416     {
24417         var ret= [];
24418         row.forEach(function(c) {
24419             if (c.colspan < 2) {
24420                 ret.push(c);
24421                 return;
24422             }
24423             for(var i =0 ;i < c.colspan; i++) {
24424                 ret.push(c);
24425             }
24426         });
24427         return ret;
24428     
24429     },
24430     
24431     deleteColumn : function(sel)
24432     {
24433         if (!sel || sel.type != 'col') {
24434             return;
24435         }
24436         if (this.no_col < 2) {
24437             return;
24438         }
24439         
24440         this.rows.forEach(function(row) {
24441             var cols = this.normalizeRow(row);
24442             var col = cols[sel.col];
24443             if (col.colspan > 1) {
24444                 col.colspan --;
24445             } else {
24446                 row.remove(col);
24447             }
24448             
24449         }, this);
24450         this.no_col--;
24451         
24452     },
24453     removeColumn : function()
24454     {
24455         this.deleteColumn({
24456             type: 'col',
24457             col : this.no_col-1
24458         });
24459         this.updateElement();
24460     },
24461     
24462      
24463     addColumn : function()
24464     {
24465         
24466         this.rows.forEach(function(row) {
24467             row.push(this.emptyCell());
24468            
24469         }, this);
24470         this.updateElement();
24471     },
24472     
24473     deleteRow : function(sel)
24474     {
24475         if (!sel || sel.type != 'row') {
24476             return;
24477         }
24478         
24479         if (this.no_row < 2) {
24480             return;
24481         }
24482         
24483         var rows = this.normalizeRows();
24484         
24485         
24486         rows[sel.row].forEach(function(col) {
24487             if (col.rowspan > 1) {
24488                 col.rowspan--;
24489             } else {
24490                 col.remove = 1; // flage it as removed.
24491             }
24492             
24493         }, this);
24494         var newrows = [];
24495         this.rows.forEach(function(row) {
24496             newrow = [];
24497             row.forEach(function(c) {
24498                 if (typeof(c.remove) == 'undefined') {
24499                     newrow.push(c);
24500                 }
24501                 
24502             });
24503             if (newrow.length > 0) {
24504                 newrows.push(row);
24505             }
24506         });
24507         this.rows =  newrows;
24508         
24509         
24510         
24511         this.no_row--;
24512         this.updateElement();
24513         
24514     },
24515     removeRow : function()
24516     {
24517         this.deleteRow({
24518             type: 'row',
24519             row : this.no_row-1
24520         });
24521         
24522     },
24523     
24524      
24525     addRow : function()
24526     {
24527         
24528         var row = [];
24529         for (var i = 0; i < this.no_col; i++ ) {
24530             
24531             row.push(this.emptyCell());
24532            
24533         }
24534         this.rows.push(row);
24535         this.updateElement();
24536         
24537     },
24538      
24539     // the default cell object... at present...
24540     emptyCell : function() {
24541         return (new Roo.htmleditor.BlockTd({})).toObject();
24542         
24543      
24544     },
24545     
24546     removeNode : function()
24547     {
24548         return this.node;
24549     },
24550     
24551     
24552     
24553     resetWidths : function()
24554     {
24555         Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
24556             var nn = Roo.htmleditor.Block.factory(n);
24557             nn.width = '';
24558             nn.updateElement(n);
24559         });
24560     }
24561     
24562     
24563     
24564     
24565 })
24566
24567 /**
24568  *
24569  * editing a TD?
24570  *
24571  * since selections really work on the table cell, then editing really should work from there
24572  *
24573  * The original plan was to support merging etc... - but that may not be needed yet..
24574  *
24575  * So this simple version will support:
24576  *   add/remove cols
24577  *   adjust the width +/-
24578  *   reset the width...
24579  *   
24580  *
24581  */
24582
24583
24584  
24585
24586 /**
24587  * @class Roo.htmleditor.BlockTable
24588  * Block that manages a table
24589  * 
24590  * @constructor
24591  * Create a new Filter.
24592  * @param {Object} config Configuration options
24593  */
24594
24595 Roo.htmleditor.BlockTd = function(cfg)
24596 {
24597     if (cfg.node) {
24598         this.readElement(cfg.node);
24599         this.updateElement(cfg.node);
24600     }
24601     Roo.apply(this, cfg);
24602      
24603     
24604     
24605 }
24606 Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
24607  
24608     node : false,
24609     
24610     width: '',
24611     textAlign : 'left',
24612     valign : 'top',
24613     
24614     colspan : 1,
24615     rowspan : 1,
24616     
24617     
24618     // used by context menu
24619     friendly_name : 'Table Cell',
24620     deleteTitle : false, // use our customer delete
24621     
24622     // context menu is drawn once..
24623     
24624     contextMenu : function(toolbar)
24625     {
24626         
24627         var cell = function() {
24628             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
24629         };
24630         
24631         var table = function() {
24632             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
24633         };
24634         
24635         var lr = false;
24636         var saveSel = function()
24637         {
24638             lr = toolbar.editorcore.getSelection().getRangeAt(0);
24639         }
24640         var restoreSel = function()
24641         {
24642             if (lr) {
24643                 (function() {
24644                     toolbar.editorcore.focus();
24645                     var cr = toolbar.editorcore.getSelection();
24646                     cr.removeAllRanges();
24647                     cr.addRange(lr);
24648                     toolbar.editorcore.onEditorEvent();
24649                 }).defer(10, this);
24650                 
24651                 
24652             }
24653         }
24654         
24655         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
24656         
24657         var syncValue = toolbar.editorcore.syncValue;
24658         
24659         var fields = {};
24660         
24661         return [
24662             {
24663                 xtype : 'Button',
24664                 text : 'Edit Table',
24665                 listeners : {
24666                     click : function() {
24667                         var t = toolbar.tb.selectedNode.closest('table');
24668                         toolbar.editorcore.selectNode(t);
24669                         toolbar.editorcore.onEditorEvent();                        
24670                     }
24671                 }
24672                 
24673             },
24674               
24675            
24676              
24677             {
24678                 xtype : 'TextItem',
24679                 text : "Column Width: ",
24680                  xns : rooui.Toolbar 
24681                
24682             },
24683             {
24684                 xtype : 'Button',
24685                 text: '-',
24686                 listeners : {
24687                     click : function (_self, e)
24688                     {
24689                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24690                         cell().shrinkColumn();
24691                         syncValue();
24692                          toolbar.editorcore.onEditorEvent();
24693                     }
24694                 },
24695                 xns : rooui.Toolbar
24696             },
24697             {
24698                 xtype : 'Button',
24699                 text: '+',
24700                 listeners : {
24701                     click : function (_self, e)
24702                     {
24703                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24704                         cell().growColumn();
24705                         syncValue();
24706                         toolbar.editorcore.onEditorEvent();
24707                     }
24708                 },
24709                 xns : rooui.Toolbar
24710             },
24711             
24712             {
24713                 xtype : 'TextItem',
24714                 text : "Vertical Align: ",
24715                 xns : rooui.Toolbar  //Boostrap?
24716             },
24717             {
24718                 xtype : 'ComboBox',
24719                 allowBlank : false,
24720                 displayField : 'val',
24721                 editable : true,
24722                 listWidth : 100,
24723                 triggerAction : 'all',
24724                 typeAhead : true,
24725                 valueField : 'val',
24726                 width : 100,
24727                 name : 'valign',
24728                 listeners : {
24729                     select : function (combo, r, index)
24730                     {
24731                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24732                         var b = cell();
24733                         b.valign = r.get('val');
24734                         b.updateElement();
24735                         syncValue();
24736                         toolbar.editorcore.onEditorEvent();
24737                     }
24738                 },
24739                 xns : rooui.form,
24740                 store : {
24741                     xtype : 'SimpleStore',
24742                     data : [
24743                         ['top'],
24744                         ['middle'],
24745                         ['bottom'] // there are afew more... 
24746                     ],
24747                     fields : [ 'val'],
24748                     xns : Roo.data
24749                 }
24750             },
24751             
24752             {
24753                 xtype : 'TextItem',
24754                 text : "Merge Cells: ",
24755                  xns : rooui.Toolbar 
24756                
24757             },
24758             
24759             
24760             {
24761                 xtype : 'Button',
24762                 text: 'Right',
24763                 listeners : {
24764                     click : function (_self, e)
24765                     {
24766                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24767                         cell().mergeRight();
24768                         //block().growColumn();
24769                         syncValue();
24770                         toolbar.editorcore.onEditorEvent();
24771                     }
24772                 },
24773                 xns : rooui.Toolbar
24774             },
24775              
24776             {
24777                 xtype : 'Button',
24778                 text: 'Below',
24779                 listeners : {
24780                     click : function (_self, e)
24781                     {
24782                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24783                         cell().mergeBelow();
24784                         //block().growColumn();
24785                         syncValue();
24786                         toolbar.editorcore.onEditorEvent();
24787                     }
24788                 },
24789                 xns : rooui.Toolbar
24790             },
24791             {
24792                 xtype : 'TextItem',
24793                 text : "| ",
24794                  xns : rooui.Toolbar 
24795                
24796             },
24797             
24798             {
24799                 xtype : 'Button',
24800                 text: 'Split',
24801                 listeners : {
24802                     click : function (_self, e)
24803                     {
24804                         //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24805                         cell().split();
24806                         syncValue();
24807                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
24808                         toolbar.editorcore.onEditorEvent();
24809                                              
24810                     }
24811                 },
24812                 xns : rooui.Toolbar
24813             },
24814             {
24815                 xtype : 'Fill',
24816                 xns : rooui.Toolbar 
24817                
24818             },
24819         
24820           
24821             {
24822                 xtype : 'Button',
24823                 text: 'Delete',
24824                  
24825                 xns : rooui.Toolbar,
24826                 menu : {
24827                     xtype : 'Menu',
24828                     xns : rooui.menu,
24829                     items : [
24830                         {
24831                             xtype : 'Item',
24832                             html: 'Column',
24833                             listeners : {
24834                                 click : function (_self, e)
24835                                 {
24836                                     var t = table();
24837                                     
24838                                     cell().deleteColumn();
24839                                     syncValue();
24840                                     toolbar.editorcore.selectNode(t.node);
24841                                     toolbar.editorcore.onEditorEvent();   
24842                                 }
24843                             },
24844                             xns : rooui.menu
24845                         },
24846                         {
24847                             xtype : 'Item',
24848                             html: 'Row',
24849                             listeners : {
24850                                 click : function (_self, e)
24851                                 {
24852                                     var t = table();
24853                                     cell().deleteRow();
24854                                     syncValue();
24855                                     
24856                                     toolbar.editorcore.selectNode(t.node);
24857                                     toolbar.editorcore.onEditorEvent();   
24858                                                          
24859                                 }
24860                             },
24861                             xns : rooui.menu
24862                         },
24863                        {
24864                             xtype : 'Separator',
24865                             xns : rooui.menu
24866                         },
24867                         {
24868                             xtype : 'Item',
24869                             html: 'Table',
24870                             listeners : {
24871                                 click : function (_self, e)
24872                                 {
24873                                     var t = table();
24874                                     var nn = t.node.nextSibling || t.node.previousSibling;
24875                                     t.node.parentNode.removeChild(t.node);
24876                                     if (nn) { 
24877                                         toolbar.editorcore.selectNode(nn, true);
24878                                     }
24879                                     toolbar.editorcore.onEditorEvent();   
24880                                                          
24881                                 }
24882                             },
24883                             xns : rooui.menu
24884                         }
24885                     ]
24886                 }
24887             }
24888             
24889             // align... << fixme
24890             
24891         ];
24892         
24893     },
24894     
24895     
24896   /**
24897      * create a DomHelper friendly object - for use with
24898      * Roo.DomHelper.markup / overwrite / etc..
24899      * ?? should it be called with option to hide all editing features?
24900      */
24901  /**
24902      * create a DomHelper friendly object - for use with
24903      * Roo.DomHelper.markup / overwrite / etc..
24904      * ?? should it be called with option to hide all editing features?
24905      */
24906     toObject : function()
24907     {
24908         var ret = {
24909             tag : 'td',
24910             contenteditable : 'true', // this stops cell selection from picking the table.
24911             'data-block' : 'Td',
24912             valign : this.valign,
24913             style : {  
24914                 'text-align' :  this.textAlign,
24915                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
24916                 'border-collapse' : 'collapse',
24917                 padding : '6px', // 8 for desktop / 4 for mobile
24918                 'vertical-align': this.valign
24919             },
24920             html : this.html
24921         };
24922         if (this.width != '') {
24923             ret.width = this.width;
24924             ret.style.width = this.width;
24925         }
24926         
24927         
24928         if (this.colspan > 1) {
24929             ret.colspan = this.colspan ;
24930         } 
24931         if (this.rowspan > 1) {
24932             ret.rowspan = this.rowspan ;
24933         }
24934         
24935            
24936         
24937         return ret;
24938          
24939     },
24940     
24941     readElement : function(node)
24942     {
24943         node  = node ? node : this.node ;
24944         this.width = node.style.width;
24945         this.colspan = Math.max(1,1*node.getAttribute('colspan'));
24946         this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
24947         this.html = node.innerHTML;
24948         if (node.style.textAlign != '') {
24949             this.textAlign = node.style.textAlign;
24950         }
24951         
24952         
24953     },
24954      
24955     // the default cell object... at present...
24956     emptyCell : function() {
24957         return {
24958             colspan :  1,
24959             rowspan :  1,
24960             textAlign : 'left',
24961             html : "&nbsp;" // is this going to be editable now?
24962         };
24963      
24964     },
24965     
24966     removeNode : function()
24967     {
24968         return this.node.closest('table');
24969          
24970     },
24971     
24972     cellData : false,
24973     
24974     colWidths : false,
24975     
24976     toTableArray  : function()
24977     {
24978         var ret = [];
24979         var tab = this.node.closest('tr').closest('table');
24980         Array.from(tab.rows).forEach(function(r, ri){
24981             ret[ri] = [];
24982         });
24983         var rn = 0;
24984         this.colWidths = [];
24985         var all_auto = true;
24986         Array.from(tab.rows).forEach(function(r, ri){
24987             
24988             var cn = 0;
24989             Array.from(r.cells).forEach(function(ce, ci){
24990                 var c =  {
24991                     cell : ce,
24992                     row : rn,
24993                     col: cn,
24994                     colspan : ce.colSpan,
24995                     rowspan : ce.rowSpan
24996                 };
24997                 if (ce.isEqualNode(this.node)) {
24998                     this.cellData = c;
24999                 }
25000                 // if we have been filled up by a row?
25001                 if (typeof(ret[rn][cn]) != 'undefined') {
25002                     while(typeof(ret[rn][cn]) != 'undefined') {
25003                         cn++;
25004                     }
25005                     c.col = cn;
25006                 }
25007                 
25008                 if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
25009                     this.colWidths[cn] =   ce.style.width;
25010                     if (this.colWidths[cn] != '') {
25011                         all_auto = false;
25012                     }
25013                 }
25014                 
25015                 
25016                 if (c.colspan < 2 && c.rowspan < 2 ) {
25017                     ret[rn][cn] = c;
25018                     cn++;
25019                     return;
25020                 }
25021                 for(var j = 0; j < c.rowspan; j++) {
25022                     if (typeof(ret[rn+j]) == 'undefined') {
25023                         continue; // we have a problem..
25024                     }
25025                     ret[rn+j][cn] = c;
25026                     for(var i = 0; i < c.colspan; i++) {
25027                         ret[rn+j][cn+i] = c;
25028                     }
25029                 }
25030                 
25031                 cn += c.colspan;
25032             }, this);
25033             rn++;
25034         }, this);
25035         
25036         // initalize widths.?
25037         // either all widths or no widths..
25038         if (all_auto) {
25039             this.colWidths[0] = false; // no widths flag.
25040         }
25041         
25042         
25043         return ret;
25044         
25045     },
25046     
25047     
25048     
25049     
25050     mergeRight: function()
25051     {
25052          
25053         // get the contents of the next cell along..
25054         var tr = this.node.closest('tr');
25055         var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
25056         if (i >= tr.childNodes.length - 1) {
25057             return; // no cells on right to merge with.
25058         }
25059         var table = this.toTableArray();
25060         
25061         if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
25062             return; // nothing right?
25063         }
25064         var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
25065         // right cell - must be same rowspan and on the same row.
25066         if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
25067             return; // right hand side is not same rowspan.
25068         }
25069         
25070         
25071         
25072         this.node.innerHTML += ' ' + rc.cell.innerHTML;
25073         tr.removeChild(rc.cell);
25074         this.colspan += rc.colspan;
25075         this.node.setAttribute('colspan', this.colspan);
25076
25077         var table = this.toTableArray();
25078         this.normalizeWidths(table);
25079         this.updateWidths(table);
25080     },
25081     
25082     
25083     mergeBelow : function()
25084     {
25085         var table = this.toTableArray();
25086         if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
25087             return; // no row below
25088         }
25089         if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
25090             return; // nothing right?
25091         }
25092         var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
25093         
25094         if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
25095             return; // right hand side is not same rowspan.
25096         }
25097         this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
25098         rc.cell.parentNode.removeChild(rc.cell);
25099         this.rowspan += rc.rowspan;
25100         this.node.setAttribute('rowspan', this.rowspan);
25101     },
25102     
25103     split: function()
25104     {
25105         if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
25106             return;
25107         }
25108         var table = this.toTableArray();
25109         var cd = this.cellData;
25110         this.rowspan = 1;
25111         this.colspan = 1;
25112         
25113         for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
25114              
25115             
25116             for(var c = cd.col; c < cd.col + cd.colspan; c++) {
25117                 if (r == cd.row && c == cd.col) {
25118                     this.node.removeAttribute('rowspan');
25119                     this.node.removeAttribute('colspan');
25120                 }
25121                  
25122                 var ntd = this.node.cloneNode(); // which col/row should be 0..
25123                 ntd.removeAttribute('id'); 
25124                 ntd.style.width  = this.colWidths[c];
25125                 ntd.innerHTML = '';
25126                 table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
25127             }
25128             
25129         }
25130         this.redrawAllCells(table);
25131         
25132     },
25133     
25134     
25135     
25136     redrawAllCells: function(table)
25137     {
25138         
25139          
25140         var tab = this.node.closest('tr').closest('table');
25141         var ctr = tab.rows[0].parentNode;
25142         Array.from(tab.rows).forEach(function(r, ri){
25143             
25144             Array.from(r.cells).forEach(function(ce, ci){
25145                 ce.parentNode.removeChild(ce);
25146             });
25147             r.parentNode.removeChild(r);
25148         });
25149         for(var r = 0 ; r < table.length; r++) {
25150             var re = tab.rows[r];
25151             
25152             var re = tab.ownerDocument.createElement('tr');
25153             ctr.appendChild(re);
25154             for(var c = 0 ; c < table[r].length; c++) {
25155                 if (table[r][c].cell === false) {
25156                     continue;
25157                 }
25158                 
25159                 re.appendChild(table[r][c].cell);
25160                  
25161                 table[r][c].cell = false;
25162             }
25163         }
25164         
25165     },
25166     updateWidths : function(table)
25167     {
25168         for(var r = 0 ; r < table.length; r++) {
25169            
25170             for(var c = 0 ; c < table[r].length; c++) {
25171                 if (table[r][c].cell === false) {
25172                     continue;
25173                 }
25174                 
25175                 if (this.colWidths[0] != false && table[r][c].colspan < 2) {
25176                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
25177                     el.width = Math.floor(this.colWidths[c])  +'%';
25178                     el.updateElement(el.node);
25179                 }
25180                 if (this.colWidths[0] != false && table[r][c].colspan > 1) {
25181                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
25182                     var width = 0;
25183                     for(var i = 0; i < table[r][c].colspan; i ++) {
25184                         width += Math.floor(this.colWidths[c + i]);
25185                     }
25186                     el.width = width  +'%';
25187                     el.updateElement(el.node);
25188                 }
25189                 table[r][c].cell = false; // done
25190             }
25191         }
25192     },
25193     normalizeWidths : function(table)
25194     {
25195         if (this.colWidths[0] === false) {
25196             var nw = 100.0 / this.colWidths.length;
25197             this.colWidths.forEach(function(w,i) {
25198                 this.colWidths[i] = nw;
25199             },this);
25200             return;
25201         }
25202     
25203         var t = 0, missing = [];
25204         
25205         this.colWidths.forEach(function(w,i) {
25206             //if you mix % and
25207             this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
25208             var add =  this.colWidths[i];
25209             if (add > 0) {
25210                 t+=add;
25211                 return;
25212             }
25213             missing.push(i);
25214             
25215             
25216         },this);
25217         var nc = this.colWidths.length;
25218         if (missing.length) {
25219             var mult = (nc - missing.length) / (1.0 * nc);
25220             var t = mult * t;
25221             var ew = (100 -t) / (1.0 * missing.length);
25222             this.colWidths.forEach(function(w,i) {
25223                 if (w > 0) {
25224                     this.colWidths[i] = w * mult;
25225                     return;
25226                 }
25227                 
25228                 this.colWidths[i] = ew;
25229             }, this);
25230             // have to make up numbers..
25231              
25232         }
25233         // now we should have all the widths..
25234         
25235     
25236     },
25237     
25238     shrinkColumn : function()
25239     {
25240         var table = this.toTableArray();
25241         this.normalizeWidths(table);
25242         var col = this.cellData.col;
25243         var nw = this.colWidths[col] * 0.8;
25244         if (nw < 5) {
25245             return;
25246         }
25247         var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
25248         this.colWidths.forEach(function(w,i) {
25249             if (i == col) {
25250                  this.colWidths[i] = nw;
25251                 return;
25252             }
25253             this.colWidths[i] += otherAdd
25254         }, this);
25255         this.updateWidths(table);
25256          
25257     },
25258     growColumn : function()
25259     {
25260         var table = this.toTableArray();
25261         this.normalizeWidths(table);
25262         var col = this.cellData.col;
25263         var nw = this.colWidths[col] * 1.2;
25264         if (nw > 90) {
25265             return;
25266         }
25267         var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
25268         this.colWidths.forEach(function(w,i) {
25269             if (i == col) {
25270                 this.colWidths[i] = nw;
25271                 return;
25272             }
25273             this.colWidths[i] -= otherSub
25274         }, this);
25275         this.updateWidths(table);
25276          
25277     },
25278     deleteRow : function()
25279     {
25280         // delete this rows 'tr'
25281         // if any of the cells in this row have a rowspan > 1 && row!= this row..
25282         // then reduce the rowspan.
25283         var table = this.toTableArray();
25284         // this.cellData.row;
25285         for (var i =0;i< table[this.cellData.row].length ; i++) {
25286             var c = table[this.cellData.row][i];
25287             if (c.row != this.cellData.row) {
25288                 
25289                 c.rowspan--;
25290                 c.cell.setAttribute('rowspan', c.rowspan);
25291                 continue;
25292             }
25293             if (c.rowspan > 1) {
25294                 c.rowspan--;
25295                 c.cell.setAttribute('rowspan', c.rowspan);
25296             }
25297         }
25298         table.splice(this.cellData.row,1);
25299         this.redrawAllCells(table);
25300         
25301     },
25302     deleteColumn : function()
25303     {
25304         var table = this.toTableArray();
25305         
25306         for (var i =0;i< table.length ; i++) {
25307             var c = table[i][this.cellData.col];
25308             if (c.col != this.cellData.col) {
25309                 table[i][this.cellData.col].colspan--;
25310             } else if (c.colspan > 1) {
25311                 c.colspan--;
25312                 c.cell.setAttribute('colspan', c.colspan);
25313             }
25314             table[i].splice(this.cellData.col,1);
25315         }
25316         
25317         this.redrawAllCells(table);
25318     }
25319     
25320     
25321     
25322     
25323 })
25324
25325 //<script type="text/javascript">
25326
25327 /*
25328  * Based  Ext JS Library 1.1.1
25329  * Copyright(c) 2006-2007, Ext JS, LLC.
25330  * LGPL
25331  *
25332  */
25333  
25334 /**
25335  * @class Roo.HtmlEditorCore
25336  * @extends Roo.Component
25337  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
25338  *
25339  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
25340  */
25341
25342 Roo.HtmlEditorCore = function(config){
25343     
25344     
25345     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
25346     
25347     
25348     this.addEvents({
25349         /**
25350          * @event initialize
25351          * Fires when the editor is fully initialized (including the iframe)
25352          * @param {Roo.HtmlEditorCore} this
25353          */
25354         initialize: true,
25355         /**
25356          * @event activate
25357          * Fires when the editor is first receives the focus. Any insertion must wait
25358          * until after this event.
25359          * @param {Roo.HtmlEditorCore} this
25360          */
25361         activate: true,
25362          /**
25363          * @event beforesync
25364          * Fires before the textarea is updated with content from the editor iframe. Return false
25365          * to cancel the sync.
25366          * @param {Roo.HtmlEditorCore} this
25367          * @param {String} html
25368          */
25369         beforesync: true,
25370          /**
25371          * @event beforepush
25372          * Fires before the iframe editor is updated with content from the textarea. Return false
25373          * to cancel the push.
25374          * @param {Roo.HtmlEditorCore} this
25375          * @param {String} html
25376          */
25377         beforepush: true,
25378          /**
25379          * @event sync
25380          * Fires when the textarea is updated with content from the editor iframe.
25381          * @param {Roo.HtmlEditorCore} this
25382          * @param {String} html
25383          */
25384         sync: true,
25385          /**
25386          * @event push
25387          * Fires when the iframe editor is updated with content from the textarea.
25388          * @param {Roo.HtmlEditorCore} this
25389          * @param {String} html
25390          */
25391         push: true,
25392         
25393         /**
25394          * @event editorevent
25395          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
25396          * @param {Roo.HtmlEditorCore} this
25397          */
25398         editorevent: true 
25399          
25400         
25401     });
25402     
25403     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
25404     
25405     // defaults : white / black...
25406     this.applyBlacklists();
25407     
25408     
25409     
25410 };
25411
25412
25413 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
25414
25415
25416      /**
25417      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
25418      */
25419     
25420     owner : false,
25421     
25422      /**
25423      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
25424      *                        Roo.resizable.
25425      */
25426     resizable : false,
25427      /**
25428      * @cfg {Number} height (in pixels)
25429      */   
25430     height: 300,
25431    /**
25432      * @cfg {Number} width (in pixels)
25433      */   
25434     width: 500,
25435      /**
25436      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
25437      *         if you are doing an email editor, this probably needs disabling, it's designed
25438      */
25439     autoClean: true,
25440     
25441     /**
25442      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
25443      */
25444     enableBlocks : true,
25445     /**
25446      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
25447      * 
25448      */
25449     stylesheets: false,
25450      /**
25451      * @cfg {String} language default en - language of text (usefull for rtl languages)
25452      * 
25453      */
25454     language: 'en',
25455     
25456     /**
25457      * @cfg {boolean} allowComments - default false - allow comments in HTML source
25458      *          - by default they are stripped - if you are editing email you may need this.
25459      */
25460     allowComments: false,
25461     // id of frame..
25462     frameId: false,
25463     
25464     // private properties
25465     validationEvent : false,
25466     deferHeight: true,
25467     initialized : false,
25468     activated : false,
25469     sourceEditMode : false,
25470     onFocus : Roo.emptyFn,
25471     iframePad:3,
25472     hideMode:'offsets',
25473     
25474     clearUp: true,
25475     
25476     // blacklist + whitelisted elements..
25477     black: false,
25478     white: false,
25479      
25480     bodyCls : '',
25481
25482     
25483     undoManager : false,
25484     /**
25485      * Protected method that will not generally be called directly. It
25486      * is called when the editor initializes the iframe with HTML contents. Override this method if you
25487      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
25488      */
25489     getDocMarkup : function(){
25490         // body styles..
25491         var st = '';
25492         
25493         // inherit styels from page...?? 
25494         if (this.stylesheets === false) {
25495             
25496             Roo.get(document.head).select('style').each(function(node) {
25497                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
25498             });
25499             
25500             Roo.get(document.head).select('link').each(function(node) { 
25501                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
25502             });
25503             
25504         } else if (!this.stylesheets.length) {
25505                 // simple..
25506                 st = '<style type="text/css">' +
25507                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
25508                    '</style>';
25509         } else {
25510             for (var i in this.stylesheets) {
25511                 if (typeof(this.stylesheets[i]) != 'string') {
25512                     continue;
25513                 }
25514                 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
25515             }
25516             
25517         }
25518         
25519         st +=  '<style type="text/css">' +
25520             'IMG { cursor: pointer } ' +
25521         '</style>';
25522         
25523         st += '<meta name="google" content="notranslate">';
25524         
25525         var cls = 'notranslate roo-htmleditor-body';
25526         
25527         if(this.bodyCls.length){
25528             cls += ' ' + this.bodyCls;
25529         }
25530         
25531         return '<html  class="notranslate" translate="no"><head>' + st  +
25532             //<style type="text/css">' +
25533             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
25534             //'</style>' +
25535             ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
25536     },
25537
25538     // private
25539     onRender : function(ct, position)
25540     {
25541         var _t = this;
25542         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
25543         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
25544         
25545         
25546         this.el.dom.style.border = '0 none';
25547         this.el.dom.setAttribute('tabIndex', -1);
25548         this.el.addClass('x-hidden hide');
25549         
25550         
25551         
25552         if(Roo.isIE){ // fix IE 1px bogus margin
25553             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
25554         }
25555        
25556         
25557         this.frameId = Roo.id();
25558         
25559          
25560         
25561         var iframe = this.owner.wrap.createChild({
25562             tag: 'iframe',
25563             cls: 'form-control', // bootstrap..
25564             id: this.frameId,
25565             name: this.frameId,
25566             frameBorder : 'no',
25567             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
25568         }, this.el
25569         );
25570         
25571         
25572         this.iframe = iframe.dom;
25573
25574         this.assignDocWin();
25575         
25576         this.doc.designMode = 'on';
25577        
25578         this.doc.open();
25579         this.doc.write(this.getDocMarkup());
25580         this.doc.close();
25581
25582         
25583         var task = { // must defer to wait for browser to be ready
25584             run : function(){
25585                 //console.log("run task?" + this.doc.readyState);
25586                 this.assignDocWin();
25587                 if(this.doc.body || this.doc.readyState == 'complete'){
25588                     try {
25589                         this.doc.designMode="on";
25590                         
25591                     } catch (e) {
25592                         return;
25593                     }
25594                     Roo.TaskMgr.stop(task);
25595                     this.initEditor.defer(10, this);
25596                 }
25597             },
25598             interval : 10,
25599             duration: 10000,
25600             scope: this
25601         };
25602         Roo.TaskMgr.start(task);
25603
25604     },
25605
25606     // private
25607     onResize : function(w, h)
25608     {
25609          Roo.log('resize: ' +w + ',' + h );
25610         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
25611         if(!this.iframe){
25612             return;
25613         }
25614         if(typeof w == 'number'){
25615             
25616             this.iframe.style.width = w + 'px';
25617         }
25618         if(typeof h == 'number'){
25619             
25620             this.iframe.style.height = h + 'px';
25621             if(this.doc){
25622                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
25623             }
25624         }
25625         
25626     },
25627
25628     /**
25629      * Toggles the editor between standard and source edit mode.
25630      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
25631      */
25632     toggleSourceEdit : function(sourceEditMode){
25633         
25634         this.sourceEditMode = sourceEditMode === true;
25635         
25636         if(this.sourceEditMode){
25637  
25638             Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
25639             
25640         }else{
25641             Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
25642             //this.iframe.className = '';
25643             this.deferFocus();
25644         }
25645         //this.setSize(this.owner.wrap.getSize());
25646         //this.fireEvent('editmodechange', this, this.sourceEditMode);
25647     },
25648
25649     
25650   
25651
25652     /**
25653      * Protected method that will not generally be called directly. If you need/want
25654      * custom HTML cleanup, this is the method you should override.
25655      * @param {String} html The HTML to be cleaned
25656      * return {String} The cleaned HTML
25657      */
25658     cleanHtml : function(html)
25659     {
25660         html = String(html);
25661         if(html.length > 5){
25662             if(Roo.isSafari){ // strip safari nonsense
25663                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
25664             }
25665         }
25666         if(html == '&nbsp;'){
25667             html = '';
25668         }
25669         return html;
25670     },
25671
25672     /**
25673      * HTML Editor -> Textarea
25674      * Protected method that will not generally be called directly. Syncs the contents
25675      * of the editor iframe with the textarea.
25676      */
25677     syncValue : function()
25678     {
25679         //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
25680         if(this.initialized){
25681             
25682             if (this.undoManager) {
25683                 this.undoManager.addEvent();
25684             }
25685
25686             
25687             var bd = (this.doc.body || this.doc.documentElement);
25688            
25689             
25690             var sel = this.win.getSelection();
25691             
25692             var div = document.createElement('div');
25693             div.innerHTML = bd.innerHTML;
25694             var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
25695             if (gtx.length > 0) {
25696                 var rm = gtx.item(0).parentNode;
25697                 rm.parentNode.removeChild(rm);
25698             }
25699             
25700            
25701             if (this.enableBlocks) {
25702                 new Roo.htmleditor.FilterBlock({ node : div });
25703             }
25704             //?? tidy?
25705             if (this.autoClean) {
25706                 var tidy = new Roo.htmleditor.TidySerializer({
25707                     inner:  true
25708                 });
25709                 var html  = tidy.serialize(div);
25710                 
25711             }
25712             
25713             
25714             if(Roo.isSafari){
25715                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
25716                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
25717                 if(m && m[1]){
25718                     html = '<div style="'+m[0]+'">' + html + '</div>';
25719                 }
25720             }
25721             html = this.cleanHtml(html);
25722             // fix up the special chars.. normaly like back quotes in word...
25723             // however we do not want to do this with chinese..
25724             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
25725                 
25726                 var cc = match.charCodeAt();
25727
25728                 // Get the character value, handling surrogate pairs
25729                 if (match.length == 2) {
25730                     // It's a surrogate pair, calculate the Unicode code point
25731                     var high = match.charCodeAt(0) - 0xD800;
25732                     var low  = match.charCodeAt(1) - 0xDC00;
25733                     cc = (high * 0x400) + low + 0x10000;
25734                 }  else if (
25735                     (cc >= 0x4E00 && cc < 0xA000 ) ||
25736                     (cc >= 0x3400 && cc < 0x4E00 ) ||
25737                     (cc >= 0xf900 && cc < 0xfb00 )
25738                 ) {
25739                         return match;
25740                 }  
25741          
25742                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
25743                 return "&#" + cc + ";";
25744                 
25745                 
25746             });
25747             
25748             
25749              
25750             if(this.owner.fireEvent('beforesync', this, html) !== false){
25751                 this.el.dom.value = html;
25752                 this.owner.fireEvent('sync', this, html);
25753             }
25754         }
25755     },
25756
25757     /**
25758      * TEXTAREA -> EDITABLE
25759      * Protected method that will not generally be called directly. Pushes the value of the textarea
25760      * into the iframe editor.
25761      */
25762     pushValue : function()
25763     {
25764         //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
25765         if(this.initialized){
25766             var v = this.el.dom.value.trim();
25767             
25768             
25769             if(this.owner.fireEvent('beforepush', this, v) !== false){
25770                 var d = (this.doc.body || this.doc.documentElement);
25771                 d.innerHTML = v;
25772                  
25773                 this.el.dom.value = d.innerHTML;
25774                 this.owner.fireEvent('push', this, v);
25775             }
25776             if (this.autoClean) {
25777                 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
25778                 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
25779             }
25780             if (this.enableBlocks) {
25781                 Roo.htmleditor.Block.initAll(this.doc.body);
25782             }
25783             
25784             this.updateLanguage();
25785             
25786             var lc = this.doc.body.lastChild;
25787             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
25788                 // add an extra line at the end.
25789                 this.doc.body.appendChild(this.doc.createElement('br'));
25790             }
25791             
25792             
25793         }
25794     },
25795
25796     // private
25797     deferFocus : function(){
25798         this.focus.defer(10, this);
25799     },
25800
25801     // doc'ed in Field
25802     focus : function(){
25803         if(this.win && !this.sourceEditMode){
25804             this.win.focus();
25805         }else{
25806             this.el.focus();
25807         }
25808     },
25809     
25810     assignDocWin: function()
25811     {
25812         var iframe = this.iframe;
25813         
25814          if(Roo.isIE){
25815             this.doc = iframe.contentWindow.document;
25816             this.win = iframe.contentWindow;
25817         } else {
25818 //            if (!Roo.get(this.frameId)) {
25819 //                return;
25820 //            }
25821 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
25822 //            this.win = Roo.get(this.frameId).dom.contentWindow;
25823             
25824             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
25825                 return;
25826             }
25827             
25828             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
25829             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
25830         }
25831     },
25832     
25833     // private
25834     initEditor : function(){
25835         //console.log("INIT EDITOR");
25836         this.assignDocWin();
25837         
25838         
25839         
25840         this.doc.designMode="on";
25841         this.doc.open();
25842         this.doc.write(this.getDocMarkup());
25843         this.doc.close();
25844         
25845         var dbody = (this.doc.body || this.doc.documentElement);
25846         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
25847         // this copies styles from the containing element into thsi one..
25848         // not sure why we need all of this..
25849         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
25850         
25851         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
25852         //ss['background-attachment'] = 'fixed'; // w3c
25853         dbody.bgProperties = 'fixed'; // ie
25854         dbody.setAttribute("translate", "no");
25855         
25856         //Roo.DomHelper.applyStyles(dbody, ss);
25857         Roo.EventManager.on(this.doc, {
25858              
25859             'mouseup': this.onEditorEvent,
25860             'dblclick': this.onEditorEvent,
25861             'click': this.onEditorEvent,
25862             'keyup': this.onEditorEvent,
25863             
25864             buffer:100,
25865             scope: this
25866         });
25867         Roo.EventManager.on(this.doc, {
25868             'paste': this.onPasteEvent,
25869             scope : this
25870         });
25871         if(Roo.isGecko){
25872             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
25873         }
25874         //??? needed???
25875         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
25876             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
25877         }
25878         this.initialized = true;
25879
25880         
25881         // initialize special key events - enter
25882         new Roo.htmleditor.KeyEnter({core : this});
25883         
25884          
25885         
25886         this.owner.fireEvent('initialize', this);
25887         this.pushValue();
25888     },
25889     // this is to prevent a href clicks resulting in a redirect?
25890    
25891     onPasteEvent : function(e,v)
25892     {
25893         // I think we better assume paste is going to be a dirty load of rubish from word..
25894         
25895         // even pasting into a 'email version' of this widget will have to clean up that mess.
25896         var cd = (e.browserEvent.clipboardData || window.clipboardData);
25897         
25898         // check what type of paste - if it's an image, then handle it differently.
25899         if (cd.files && cd.files.length > 0) {
25900             // pasting images?
25901             var urlAPI = (window.createObjectURL && window) || 
25902                 (window.URL && URL.revokeObjectURL && URL) || 
25903                 (window.webkitURL && webkitURL);
25904     
25905             var url = urlAPI.createObjectURL( cd.files[0]);
25906             this.insertAtCursor('<img src=" + url + ">');
25907             return false;
25908         }
25909         if (cd.types.indexOf('text/html') < 0 ) {
25910             return false;
25911         }
25912         var images = [];
25913         var html = cd.getData('text/html'); // clipboard event
25914         if (cd.types.indexOf('text/rtf') > -1) {
25915             var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
25916             images = parser.doc ? parser.doc.getElementsByType('pict') : [];
25917         }
25918         //Roo.log(images);
25919         //Roo.log(imgs);
25920         // fixme..
25921         images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
25922                        .map(function(g) { return g.toDataURL(); })
25923                        .filter(function(g) { return g != 'about:blank'; });
25924         
25925         //Roo.log(html);
25926         html = this.cleanWordChars(html);
25927         
25928         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
25929         
25930         
25931         var sn = this.getParentElement();
25932         // check if d contains a table, and prevent nesting??
25933         //Roo.log(d.getElementsByTagName('table'));
25934         //Roo.log(sn);
25935         //Roo.log(sn.closest('table'));
25936         if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
25937             e.preventDefault();
25938             this.insertAtCursor("You can not nest tables");
25939             //Roo.log("prevent?"); // fixme - 
25940             return false;
25941         }
25942         
25943         
25944         
25945         if (images.length > 0) {
25946             // replace all v:imagedata - with img.
25947             var ar = Array.from(d.getElementsByTagName('v:imagedata'));
25948             Roo.each(ar, function(node) {
25949                 node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
25950                 node.parentNode.removeChild(node);
25951             });
25952             
25953             
25954             Roo.each(d.getElementsByTagName('img'), function(img, i) {
25955                 img.setAttribute('src', images[i]);
25956             });
25957         }
25958         if (this.autoClean) {
25959             new Roo.htmleditor.FilterWord({ node : d });
25960             
25961             new Roo.htmleditor.FilterStyleToTag({ node : d });
25962             new Roo.htmleditor.FilterAttributes({
25963                 node : d,
25964                 attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width', 'start'],
25965                 attrib_clean : ['href', 'src' ] 
25966             });
25967             new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
25968             // should be fonts..
25969             new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
25970             new Roo.htmleditor.FilterParagraph({ node : d });
25971             new Roo.htmleditor.FilterSpan({ node : d });
25972             new Roo.htmleditor.FilterLongBr({ node : d });
25973             new Roo.htmleditor.FilterComment({ node : d });
25974             
25975             
25976         }
25977         if (this.enableBlocks) {
25978                 
25979             Array.from(d.getElementsByTagName('img')).forEach(function(img) {
25980                 if (img.closest('figure')) { // assume!! that it's aready
25981                     return;
25982                 }
25983                 var fig  = new Roo.htmleditor.BlockFigure({
25984                     image_src  : img.src
25985                 });
25986                 fig.updateElement(img); // replace it..
25987                 
25988             });
25989         }
25990         
25991         
25992         this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
25993         if (this.enableBlocks) {
25994             Roo.htmleditor.Block.initAll(this.doc.body);
25995         }
25996          
25997         
25998         e.preventDefault();
25999         return false;
26000         // default behaveiour should be our local cleanup paste? (optional?)
26001         // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
26002         //this.owner.fireEvent('paste', e, v);
26003     },
26004     // private
26005     onDestroy : function(){
26006         
26007         
26008         
26009         if(this.rendered){
26010             
26011             //for (var i =0; i < this.toolbars.length;i++) {
26012             //    // fixme - ask toolbars for heights?
26013             //    this.toolbars[i].onDestroy();
26014            // }
26015             
26016             //this.wrap.dom.innerHTML = '';
26017             //this.wrap.remove();
26018         }
26019     },
26020
26021     // private
26022     onFirstFocus : function(){
26023         
26024         this.assignDocWin();
26025         this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
26026         
26027         this.activated = true;
26028          
26029     
26030         if(Roo.isGecko){ // prevent silly gecko errors
26031             this.win.focus();
26032             var s = this.win.getSelection();
26033             if(!s.focusNode || s.focusNode.nodeType != 3){
26034                 var r = s.getRangeAt(0);
26035                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
26036                 r.collapse(true);
26037                 this.deferFocus();
26038             }
26039             try{
26040                 this.execCmd('useCSS', true);
26041                 this.execCmd('styleWithCSS', false);
26042             }catch(e){}
26043         }
26044         this.owner.fireEvent('activate', this);
26045     },
26046
26047     // private
26048     adjustFont: function(btn){
26049         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
26050         //if(Roo.isSafari){ // safari
26051         //    adjust *= 2;
26052        // }
26053         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
26054         if(Roo.isSafari){ // safari
26055             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
26056             v =  (v < 10) ? 10 : v;
26057             v =  (v > 48) ? 48 : v;
26058             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
26059             
26060         }
26061         
26062         
26063         v = Math.max(1, v+adjust);
26064         
26065         this.execCmd('FontSize', v  );
26066     },
26067
26068     onEditorEvent : function(e)
26069     {
26070          
26071         
26072         if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
26073             return; // we do not handle this.. (undo manager does..)
26074         }
26075         // in theory this detects if the last element is not a br, then we try and do that.
26076         // its so clicking in space at bottom triggers adding a br and moving the cursor.
26077         if (e &&
26078             e.target.nodeName == 'BODY' &&
26079             e.type == "mouseup" &&
26080             this.doc.body.lastChild
26081            ) {
26082             var lc = this.doc.body.lastChild;
26083             // gtx-trans is google translate plugin adding crap.
26084             while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
26085                 lc = lc.previousSibling;
26086             }
26087             if (lc.nodeType == 1 && lc.nodeName != 'BR') {
26088             // if last element is <BR> - then dont do anything.
26089             
26090                 var ns = this.doc.createElement('br');
26091                 this.doc.body.appendChild(ns);
26092                 range = this.doc.createRange();
26093                 range.setStartAfter(ns);
26094                 range.collapse(true);
26095                 var sel = this.win.getSelection();
26096                 sel.removeAllRanges();
26097                 sel.addRange(range);
26098             }
26099         }
26100         
26101         
26102         
26103         this.fireEditorEvent(e);
26104       //  this.updateToolbar();
26105         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
26106     },
26107     
26108     fireEditorEvent: function(e)
26109     {
26110         this.owner.fireEvent('editorevent', this, e);
26111     },
26112
26113     insertTag : function(tg)
26114     {
26115         // could be a bit smarter... -> wrap the current selected tRoo..
26116         if (tg.toLowerCase() == 'span' ||
26117             tg.toLowerCase() == 'code' ||
26118             tg.toLowerCase() == 'sup' ||
26119             tg.toLowerCase() == 'sub' 
26120             ) {
26121             
26122             range = this.createRange(this.getSelection());
26123             var wrappingNode = this.doc.createElement(tg.toLowerCase());
26124             wrappingNode.appendChild(range.extractContents());
26125             range.insertNode(wrappingNode);
26126
26127             return;
26128             
26129             
26130             
26131         }
26132         this.execCmd("formatblock",   tg);
26133         this.undoManager.addEvent(); 
26134     },
26135     
26136     insertText : function(txt)
26137     {
26138         
26139         
26140         var range = this.createRange();
26141         range.deleteContents();
26142                //alert(Sender.getAttribute('label'));
26143                
26144         range.insertNode(this.doc.createTextNode(txt));
26145         this.undoManager.addEvent();
26146     } ,
26147     
26148      
26149
26150     /**
26151      * Executes a Midas editor command on the editor document and performs necessary focus and
26152      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
26153      * @param {String} cmd The Midas command
26154      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
26155      */
26156     relayCmd : function(cmd, value)
26157     {
26158         
26159         switch (cmd) {
26160             case 'justifyleft':
26161             case 'justifyright':
26162             case 'justifycenter':
26163                 // if we are in a cell, then we will adjust the
26164                 var n = this.getParentElement();
26165                 var td = n.closest('td');
26166                 if (td) {
26167                     var bl = Roo.htmleditor.Block.factory(td);
26168                     bl.textAlign = cmd.replace('justify','');
26169                     bl.updateElement();
26170                     this.owner.fireEvent('editorevent', this);
26171                     return;
26172                 }
26173                 this.execCmd('styleWithCSS', true); // 
26174                 break;
26175             case 'bold':
26176             case 'italic':
26177                 // if there is no selection, then we insert, and set the curson inside it..
26178                 this.execCmd('styleWithCSS', false); 
26179                 break;
26180                 
26181         
26182             default:
26183                 break;
26184         }
26185         
26186         
26187         this.win.focus();
26188         this.execCmd(cmd, value);
26189         this.owner.fireEvent('editorevent', this);
26190         //this.updateToolbar();
26191         this.owner.deferFocus();
26192     },
26193
26194     /**
26195      * Executes a Midas editor command directly on the editor document.
26196      * For visual commands, you should use {@link #relayCmd} instead.
26197      * <b>This should only be called after the editor is initialized.</b>
26198      * @param {String} cmd The Midas command
26199      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
26200      */
26201     execCmd : function(cmd, value){
26202         this.doc.execCommand(cmd, false, value === undefined ? null : value);
26203         this.syncValue();
26204     },
26205  
26206  
26207    
26208     /**
26209      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
26210      * to insert tRoo.
26211      * @param {String} text | dom node.. 
26212      */
26213     insertAtCursor : function(text)
26214     {
26215         
26216         if(!this.activated){
26217             return;
26218         }
26219          
26220         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
26221             this.win.focus();
26222             
26223             
26224             // from jquery ui (MIT licenced)
26225             var range, node;
26226             var win = this.win;
26227             
26228             if (win.getSelection && win.getSelection().getRangeAt) {
26229                 
26230                 // delete the existing?
26231                 
26232                 this.createRange(this.getSelection()).deleteContents();
26233                 range = win.getSelection().getRangeAt(0);
26234                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
26235                 range.insertNode(node);
26236                 range = range.cloneRange();
26237                 range.collapse(false);
26238                  
26239                 win.getSelection().removeAllRanges();
26240                 win.getSelection().addRange(range);
26241                 
26242                 
26243                 
26244             } else if (win.document.selection && win.document.selection.createRange) {
26245                 // no firefox support
26246                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
26247                 win.document.selection.createRange().pasteHTML(txt);
26248             
26249             } else {
26250                 // no firefox support
26251                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
26252                 this.execCmd('InsertHTML', txt);
26253             } 
26254             this.syncValue();
26255             
26256             this.deferFocus();
26257         }
26258     },
26259  // private
26260     mozKeyPress : function(e){
26261         if(e.ctrlKey){
26262             var c = e.getCharCode(), cmd;
26263           
26264             if(c > 0){
26265                 c = String.fromCharCode(c).toLowerCase();
26266                 switch(c){
26267                     case 'b':
26268                         cmd = 'bold';
26269                         break;
26270                     case 'i':
26271                         cmd = 'italic';
26272                         break;
26273                     
26274                     case 'u':
26275                         cmd = 'underline';
26276                         break;
26277                     
26278                     //case 'v':
26279                       //  this.cleanUpPaste.defer(100, this);
26280                       //  return;
26281                         
26282                 }
26283                 if(cmd){
26284                     
26285                     this.relayCmd(cmd);
26286                     //this.win.focus();
26287                     //this.execCmd(cmd);
26288                     //this.deferFocus();
26289                     e.preventDefault();
26290                 }
26291                 
26292             }
26293         }
26294     },
26295
26296     // private
26297     fixKeys : function(){ // load time branching for fastest keydown performance
26298         
26299         
26300         if(Roo.isIE){
26301             return function(e){
26302                 var k = e.getKey(), r;
26303                 if(k == e.TAB){
26304                     e.stopEvent();
26305                     r = this.doc.selection.createRange();
26306                     if(r){
26307                         r.collapse(true);
26308                         r.pasteHTML('&#160;&#160;&#160;&#160;');
26309                         this.deferFocus();
26310                     }
26311                     return;
26312                 }
26313                 /// this is handled by Roo.htmleditor.KeyEnter
26314                  /*
26315                 if(k == e.ENTER){
26316                     r = this.doc.selection.createRange();
26317                     if(r){
26318                         var target = r.parentElement();
26319                         if(!target || target.tagName.toLowerCase() != 'li'){
26320                             e.stopEvent();
26321                             r.pasteHTML('<br/>');
26322                             r.collapse(false);
26323                             r.select();
26324                         }
26325                     }
26326                 }
26327                 */
26328                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
26329                 //    this.cleanUpPaste.defer(100, this);
26330                 //    return;
26331                 //}
26332                 
26333                 
26334             };
26335         }else if(Roo.isOpera){
26336             return function(e){
26337                 var k = e.getKey();
26338                 if(k == e.TAB){
26339                     e.stopEvent();
26340                     this.win.focus();
26341                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
26342                     this.deferFocus();
26343                 }
26344                
26345                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
26346                 //    this.cleanUpPaste.defer(100, this);
26347                  //   return;
26348                 //}
26349                 
26350             };
26351         }else if(Roo.isSafari){
26352             return function(e){
26353                 var k = e.getKey();
26354                 
26355                 if(k == e.TAB){
26356                     e.stopEvent();
26357                     this.execCmd('InsertText','\t');
26358                     this.deferFocus();
26359                     return;
26360                 }
26361                  this.mozKeyPress(e);
26362                 
26363                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
26364                  //   this.cleanUpPaste.defer(100, this);
26365                  //   return;
26366                // }
26367                 
26368              };
26369         }
26370     }(),
26371     
26372     getAllAncestors: function()
26373     {
26374         var p = this.getSelectedNode();
26375         var a = [];
26376         if (!p) {
26377             a.push(p); // push blank onto stack..
26378             p = this.getParentElement();
26379         }
26380         
26381         
26382         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
26383             a.push(p);
26384             p = p.parentNode;
26385         }
26386         a.push(this.doc.body);
26387         return a;
26388     },
26389     lastSel : false,
26390     lastSelNode : false,
26391     
26392     
26393     getSelection : function() 
26394     {
26395         this.assignDocWin();
26396         return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
26397     },
26398     /**
26399      * Select a dom node
26400      * @param {DomElement} node the node to select
26401      */
26402     selectNode : function(node, collapse)
26403     {
26404         var nodeRange = node.ownerDocument.createRange();
26405         try {
26406             nodeRange.selectNode(node);
26407         } catch (e) {
26408             nodeRange.selectNodeContents(node);
26409         }
26410         if (collapse === true) {
26411             nodeRange.collapse(true);
26412         }
26413         //
26414         var s = this.win.getSelection();
26415         s.removeAllRanges();
26416         s.addRange(nodeRange);
26417     },
26418     
26419     getSelectedNode: function() 
26420     {
26421         // this may only work on Gecko!!!
26422         
26423         // should we cache this!!!!
26424         
26425          
26426          
26427         var range = this.createRange(this.getSelection()).cloneRange();
26428         
26429         if (Roo.isIE) {
26430             var parent = range.parentElement();
26431             while (true) {
26432                 var testRange = range.duplicate();
26433                 testRange.moveToElementText(parent);
26434                 if (testRange.inRange(range)) {
26435                     break;
26436                 }
26437                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
26438                     break;
26439                 }
26440                 parent = parent.parentElement;
26441             }
26442             return parent;
26443         }
26444         
26445         // is ancestor a text element.
26446         var ac =  range.commonAncestorContainer;
26447         if (ac.nodeType == 3) {
26448             ac = ac.parentNode;
26449         }
26450         
26451         var ar = ac.childNodes;
26452          
26453         var nodes = [];
26454         var other_nodes = [];
26455         var has_other_nodes = false;
26456         for (var i=0;i<ar.length;i++) {
26457             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
26458                 continue;
26459             }
26460             // fullly contained node.
26461             
26462             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
26463                 nodes.push(ar[i]);
26464                 continue;
26465             }
26466             
26467             // probably selected..
26468             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
26469                 other_nodes.push(ar[i]);
26470                 continue;
26471             }
26472             // outer..
26473             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
26474                 continue;
26475             }
26476             
26477             
26478             has_other_nodes = true;
26479         }
26480         if (!nodes.length && other_nodes.length) {
26481             nodes= other_nodes;
26482         }
26483         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
26484             return false;
26485         }
26486         
26487         return nodes[0];
26488     },
26489     
26490     
26491     createRange: function(sel)
26492     {
26493         // this has strange effects when using with 
26494         // top toolbar - not sure if it's a great idea.
26495         //this.editor.contentWindow.focus();
26496         if (typeof sel != "undefined") {
26497             try {
26498                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
26499             } catch(e) {
26500                 return this.doc.createRange();
26501             }
26502         } else {
26503             return this.doc.createRange();
26504         }
26505     },
26506     getParentElement: function()
26507     {
26508         
26509         this.assignDocWin();
26510         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
26511         
26512         var range = this.createRange(sel);
26513          
26514         try {
26515             var p = range.commonAncestorContainer;
26516             while (p.nodeType == 3) { // text node
26517                 p = p.parentNode;
26518             }
26519             return p;
26520         } catch (e) {
26521             return null;
26522         }
26523     
26524     },
26525     /***
26526      *
26527      * Range intersection.. the hard stuff...
26528      *  '-1' = before
26529      *  '0' = hits..
26530      *  '1' = after.
26531      *         [ -- selected range --- ]
26532      *   [fail]                        [fail]
26533      *
26534      *    basically..
26535      *      if end is before start or  hits it. fail.
26536      *      if start is after end or hits it fail.
26537      *
26538      *   if either hits (but other is outside. - then it's not 
26539      *   
26540      *    
26541      **/
26542     
26543     
26544     // @see http://www.thismuchiknow.co.uk/?p=64.
26545     rangeIntersectsNode : function(range, node)
26546     {
26547         var nodeRange = node.ownerDocument.createRange();
26548         try {
26549             nodeRange.selectNode(node);
26550         } catch (e) {
26551             nodeRange.selectNodeContents(node);
26552         }
26553     
26554         var rangeStartRange = range.cloneRange();
26555         rangeStartRange.collapse(true);
26556     
26557         var rangeEndRange = range.cloneRange();
26558         rangeEndRange.collapse(false);
26559     
26560         var nodeStartRange = nodeRange.cloneRange();
26561         nodeStartRange.collapse(true);
26562     
26563         var nodeEndRange = nodeRange.cloneRange();
26564         nodeEndRange.collapse(false);
26565     
26566         return rangeStartRange.compareBoundaryPoints(
26567                  Range.START_TO_START, nodeEndRange) == -1 &&
26568                rangeEndRange.compareBoundaryPoints(
26569                  Range.START_TO_START, nodeStartRange) == 1;
26570         
26571          
26572     },
26573     rangeCompareNode : function(range, node)
26574     {
26575         var nodeRange = node.ownerDocument.createRange();
26576         try {
26577             nodeRange.selectNode(node);
26578         } catch (e) {
26579             nodeRange.selectNodeContents(node);
26580         }
26581         
26582         
26583         range.collapse(true);
26584     
26585         nodeRange.collapse(true);
26586      
26587         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
26588         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
26589          
26590         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
26591         
26592         var nodeIsBefore   =  ss == 1;
26593         var nodeIsAfter    = ee == -1;
26594         
26595         if (nodeIsBefore && nodeIsAfter) {
26596             return 0; // outer
26597         }
26598         if (!nodeIsBefore && nodeIsAfter) {
26599             return 1; //right trailed.
26600         }
26601         
26602         if (nodeIsBefore && !nodeIsAfter) {
26603             return 2;  // left trailed.
26604         }
26605         // fully contined.
26606         return 3;
26607     },
26608  
26609     cleanWordChars : function(input) {// change the chars to hex code
26610         
26611        var swapCodes  = [ 
26612             [    8211, "&#8211;" ], 
26613             [    8212, "&#8212;" ], 
26614             [    8216,  "'" ],  
26615             [    8217, "'" ],  
26616             [    8220, '"' ],  
26617             [    8221, '"' ],  
26618             [    8226, "*" ],  
26619             [    8230, "..." ]
26620         ]; 
26621         var output = input;
26622         Roo.each(swapCodes, function(sw) { 
26623             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
26624             
26625             output = output.replace(swapper, sw[1]);
26626         });
26627         
26628         return output;
26629     },
26630     
26631      
26632     
26633         
26634     
26635     cleanUpChild : function (node)
26636     {
26637         
26638         new Roo.htmleditor.FilterComment({node : node});
26639         new Roo.htmleditor.FilterAttributes({
26640                 node : node,
26641                 attrib_black : this.ablack,
26642                 attrib_clean : this.aclean,
26643                 style_white : this.cwhite,
26644                 style_black : this.cblack
26645         });
26646         new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
26647         new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
26648          
26649         
26650     },
26651     
26652     /**
26653      * Clean up MS wordisms...
26654      * @deprecated - use filter directly
26655      */
26656     cleanWord : function(node)
26657     {
26658         new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
26659         new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
26660         
26661     },
26662    
26663     
26664     /**
26665
26666      * @deprecated - use filters
26667      */
26668     cleanTableWidths : function(node)
26669     {
26670         new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
26671         
26672  
26673     },
26674     
26675      
26676         
26677     applyBlacklists : function()
26678     {
26679         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
26680         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
26681         
26682         this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
26683         this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
26684         this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
26685         
26686         this.white = [];
26687         this.black = [];
26688         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
26689             if (b.indexOf(tag) > -1) {
26690                 return;
26691             }
26692             this.white.push(tag);
26693             
26694         }, this);
26695         
26696         Roo.each(w, function(tag) {
26697             if (b.indexOf(tag) > -1) {
26698                 return;
26699             }
26700             if (this.white.indexOf(tag) > -1) {
26701                 return;
26702             }
26703             this.white.push(tag);
26704             
26705         }, this);
26706         
26707         
26708         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
26709             if (w.indexOf(tag) > -1) {
26710                 return;
26711             }
26712             this.black.push(tag);
26713             
26714         }, this);
26715         
26716         Roo.each(b, function(tag) {
26717             if (w.indexOf(tag) > -1) {
26718                 return;
26719             }
26720             if (this.black.indexOf(tag) > -1) {
26721                 return;
26722             }
26723             this.black.push(tag);
26724             
26725         }, this);
26726         
26727         
26728         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
26729         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
26730         
26731         this.cwhite = [];
26732         this.cblack = [];
26733         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
26734             if (b.indexOf(tag) > -1) {
26735                 return;
26736             }
26737             this.cwhite.push(tag);
26738             
26739         }, this);
26740         
26741         Roo.each(w, function(tag) {
26742             if (b.indexOf(tag) > -1) {
26743                 return;
26744             }
26745             if (this.cwhite.indexOf(tag) > -1) {
26746                 return;
26747             }
26748             this.cwhite.push(tag);
26749             
26750         }, this);
26751         
26752         
26753         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
26754             if (w.indexOf(tag) > -1) {
26755                 return;
26756             }
26757             this.cblack.push(tag);
26758             
26759         }, this);
26760         
26761         Roo.each(b, function(tag) {
26762             if (w.indexOf(tag) > -1) {
26763                 return;
26764             }
26765             if (this.cblack.indexOf(tag) > -1) {
26766                 return;
26767             }
26768             this.cblack.push(tag);
26769             
26770         }, this);
26771     },
26772     
26773     setStylesheets : function(stylesheets)
26774     {
26775         if(typeof(stylesheets) == 'string'){
26776             Roo.get(this.iframe.contentDocument.head).createChild({
26777                 tag : 'link',
26778                 rel : 'stylesheet',
26779                 type : 'text/css',
26780                 href : stylesheets
26781             });
26782             
26783             return;
26784         }
26785         var _this = this;
26786      
26787         Roo.each(stylesheets, function(s) {
26788             if(!s.length){
26789                 return;
26790             }
26791             
26792             Roo.get(_this.iframe.contentDocument.head).createChild({
26793                 tag : 'link',
26794                 rel : 'stylesheet',
26795                 type : 'text/css',
26796                 href : s
26797             });
26798         });
26799
26800         
26801     },
26802     
26803     
26804     updateLanguage : function()
26805     {
26806         if (!this.iframe || !this.iframe.contentDocument) {
26807             return;
26808         }
26809         Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
26810     },
26811     
26812     
26813     removeStylesheets : function()
26814     {
26815         var _this = this;
26816         
26817         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
26818             s.remove();
26819         });
26820     },
26821     
26822     setStyle : function(style)
26823     {
26824         Roo.get(this.iframe.contentDocument.head).createChild({
26825             tag : 'style',
26826             type : 'text/css',
26827             html : style
26828         });
26829
26830         return;
26831     }
26832     
26833     // hide stuff that is not compatible
26834     /**
26835      * @event blur
26836      * @hide
26837      */
26838     /**
26839      * @event change
26840      * @hide
26841      */
26842     /**
26843      * @event focus
26844      * @hide
26845      */
26846     /**
26847      * @event specialkey
26848      * @hide
26849      */
26850     /**
26851      * @cfg {String} fieldClass @hide
26852      */
26853     /**
26854      * @cfg {String} focusClass @hide
26855      */
26856     /**
26857      * @cfg {String} autoCreate @hide
26858      */
26859     /**
26860      * @cfg {String} inputType @hide
26861      */
26862     /**
26863      * @cfg {String} invalidClass @hide
26864      */
26865     /**
26866      * @cfg {String} invalidText @hide
26867      */
26868     /**
26869      * @cfg {String} msgFx @hide
26870      */
26871     /**
26872      * @cfg {String} validateOnBlur @hide
26873      */
26874 });
26875
26876 Roo.HtmlEditorCore.white = [
26877         'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
26878         
26879        'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
26880        'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
26881        'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
26882        'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
26883        'TABLE',   'UL',         'XMP', 
26884        
26885        'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
26886       'THEAD',   'TR', 
26887      
26888       'DIR', 'MENU', 'OL', 'UL', 'DL',
26889        
26890       'EMBED',  'OBJECT'
26891 ];
26892
26893
26894 Roo.HtmlEditorCore.black = [
26895     //    'embed',  'object', // enable - backend responsiblity to clean thiese
26896         'APPLET', // 
26897         'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
26898         'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
26899         'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
26900         'SCRIPT', 'STYLE' ,'TITLE',  'XML',
26901         //'FONT' // CLEAN LATER..
26902         'COLGROUP', 'COL'   // messy tables.
26903         
26904         
26905 ];
26906 Roo.HtmlEditorCore.clean = [ // ?? needed???
26907      'SCRIPT', 'STYLE', 'TITLE', 'XML'
26908 ];
26909 Roo.HtmlEditorCore.tag_remove = [
26910     'FONT', 'TBODY'  
26911 ];
26912 // attributes..
26913
26914 Roo.HtmlEditorCore.ablack = [
26915     'on'
26916 ];
26917     
26918 Roo.HtmlEditorCore.aclean = [ 
26919     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
26920 ];
26921
26922 // protocols..
26923 Roo.HtmlEditorCore.pwhite= [
26924         'http',  'https',  'mailto'
26925 ];
26926
26927 // white listed style attributes.
26928 Roo.HtmlEditorCore.cwhite= [
26929       //  'text-align', /// default is to allow most things..
26930       
26931          
26932 //        'font-size'//??
26933 ];
26934
26935 // black listed style attributes.
26936 Roo.HtmlEditorCore.cblack= [
26937       //  'font-size' -- this can be set by the project 
26938 ];
26939
26940
26941
26942
26943     //<script type="text/javascript">
26944
26945 /*
26946  * Ext JS Library 1.1.1
26947  * Copyright(c) 2006-2007, Ext JS, LLC.
26948  * Licence LGPL
26949  * 
26950  */
26951  
26952  
26953 Roo.form.HtmlEditor = function(config){
26954     
26955     
26956     
26957     Roo.form.HtmlEditor.superclass.constructor.call(this, config);
26958     
26959     if (!this.toolbars) {
26960         this.toolbars = [];
26961     }
26962     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
26963     
26964     
26965 };
26966
26967 /**
26968  * @class Roo.form.HtmlEditor
26969  * @extends Roo.form.Field
26970  * Provides a lightweight HTML Editor component.
26971  *
26972  * This has been tested on Fireforx / Chrome.. IE may not be so great..
26973  * 
26974  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
26975  * supported by this editor.</b><br/><br/>
26976  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
26977  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
26978  */
26979 Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
26980     /**
26981      * @cfg {Boolean} clearUp
26982      */
26983     clearUp : true,
26984       /**
26985      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
26986      */
26987     toolbars : false,
26988    
26989      /**
26990      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
26991      *                        Roo.resizable.
26992      */
26993     resizable : false,
26994      /**
26995      * @cfg {Number} height (in pixels)
26996      */   
26997     height: 300,
26998    /**
26999      * @cfg {Number} width (in pixels)
27000      */   
27001     width: 500,
27002     
27003     /**
27004      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea  rootURL + '/roojs1/css/undoreset.css',   .
27005      * 
27006      */
27007     stylesheets: false,
27008     
27009     
27010      /**
27011      * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
27012      * 
27013      */
27014     cblack: false,
27015     /**
27016      * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
27017      * 
27018      */
27019     cwhite: false,
27020     
27021      /**
27022      * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
27023      * 
27024      */
27025     black: false,
27026     /**
27027      * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
27028      * 
27029      */
27030     white: false,
27031     /**
27032      * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
27033      */
27034     allowComments: false,
27035     /**
27036      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
27037      */
27038     enableBlocks : true,
27039     
27040     /**
27041      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
27042      *         if you are doing an email editor, this probably needs disabling, it's designed
27043      */
27044     autoClean: true,
27045     /**
27046      * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
27047      */
27048     bodyCls : '',
27049     /**
27050      * @cfg {String} language default en - language of text (usefull for rtl languages)
27051      * 
27052      */
27053     language: 'en',
27054     
27055      
27056     // id of frame..
27057     frameId: false,
27058     
27059     // private properties
27060     validationEvent : false,
27061     deferHeight: true,
27062     initialized : false,
27063     activated : false,
27064     
27065     onFocus : Roo.emptyFn,
27066     iframePad:3,
27067     hideMode:'offsets',
27068     
27069     actionMode : 'container', // defaults to hiding it...
27070     
27071     defaultAutoCreate : { // modified by initCompnoent..
27072         tag: "textarea",
27073         style:"width:500px;height:300px;",
27074         autocomplete: "new-password"
27075     },
27076
27077     // private
27078     initComponent : function(){
27079         this.addEvents({
27080             /**
27081              * @event initialize
27082              * Fires when the editor is fully initialized (including the iframe)
27083              * @param {HtmlEditor} this
27084              */
27085             initialize: true,
27086             /**
27087              * @event activate
27088              * Fires when the editor is first receives the focus. Any insertion must wait
27089              * until after this event.
27090              * @param {HtmlEditor} this
27091              */
27092             activate: true,
27093              /**
27094              * @event beforesync
27095              * Fires before the textarea is updated with content from the editor iframe. Return false
27096              * to cancel the sync.
27097              * @param {HtmlEditor} this
27098              * @param {String} html
27099              */
27100             beforesync: true,
27101              /**
27102              * @event beforepush
27103              * Fires before the iframe editor is updated with content from the textarea. Return false
27104              * to cancel the push.
27105              * @param {HtmlEditor} this
27106              * @param {String} html
27107              */
27108             beforepush: true,
27109              /**
27110              * @event sync
27111              * Fires when the textarea is updated with content from the editor iframe.
27112              * @param {HtmlEditor} this
27113              * @param {String} html
27114              */
27115             sync: true,
27116              /**
27117              * @event push
27118              * Fires when the iframe editor is updated with content from the textarea.
27119              * @param {HtmlEditor} this
27120              * @param {String} html
27121              */
27122             push: true,
27123              /**
27124              * @event editmodechange
27125              * Fires when the editor switches edit modes
27126              * @param {HtmlEditor} this
27127              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
27128              */
27129             editmodechange: true,
27130             /**
27131              * @event editorevent
27132              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
27133              * @param {HtmlEditor} this
27134              */
27135             editorevent: true,
27136             /**
27137              * @event firstfocus
27138              * Fires when on first focus - needed by toolbars..
27139              * @param {HtmlEditor} this
27140              */
27141             firstfocus: true,
27142             /**
27143              * @event autosave
27144              * Auto save the htmlEditor value as a file into Events
27145              * @param {HtmlEditor} this
27146              */
27147             autosave: true,
27148             /**
27149              * @event savedpreview
27150              * preview the saved version of htmlEditor
27151              * @param {HtmlEditor} this
27152              */
27153             savedpreview: true,
27154             
27155             /**
27156             * @event stylesheetsclick
27157             * Fires when press the Sytlesheets button
27158             * @param {Roo.HtmlEditorCore} this
27159             */
27160             stylesheetsclick: true,
27161             /**
27162             * @event paste
27163             * Fires when press user pastes into the editor
27164             * @param {Roo.HtmlEditorCore} this
27165             */
27166             paste: true 
27167         });
27168         this.defaultAutoCreate =  {
27169             tag: "textarea",
27170             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
27171             autocomplete: "new-password"
27172         };
27173     },
27174
27175     /**
27176      * Protected method that will not generally be called directly. It
27177      * is called when the editor creates its toolbar. Override this method if you need to
27178      * add custom toolbar buttons.
27179      * @param {HtmlEditor} editor
27180      */
27181     createToolbar : function(editor){
27182         Roo.log("create toolbars");
27183         if (!editor.toolbars || !editor.toolbars.length) {
27184             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
27185         }
27186         
27187         for (var i =0 ; i < editor.toolbars.length;i++) {
27188             editor.toolbars[i] = Roo.factory(
27189                     typeof(editor.toolbars[i]) == 'string' ?
27190                         { xtype: editor.toolbars[i]} : editor.toolbars[i],
27191                 Roo.form.HtmlEditor);
27192             editor.toolbars[i].init(editor);
27193         }
27194          
27195         
27196     },
27197     /**
27198      * get the Context selected node
27199      * @returns {DomElement|boolean} selected node if active or false if none
27200      * 
27201      */
27202     getSelectedNode : function()
27203     {
27204         if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
27205             return false;
27206         }
27207         return this.toolbars[1].tb.selectedNode;
27208     
27209     },
27210     // private
27211     onRender : function(ct, position)
27212     {
27213         var _t = this;
27214         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
27215         
27216         this.wrap = this.el.wrap({
27217             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
27218         });
27219         
27220         this.editorcore.onRender(ct, position);
27221          
27222         if (this.resizable) {
27223             this.resizeEl = new Roo.Resizable(this.wrap, {
27224                 pinned : true,
27225                 wrap: true,
27226                 dynamic : true,
27227                 minHeight : this.height,
27228                 height: this.height,
27229                 handles : this.resizable,
27230                 width: this.width,
27231                 listeners : {
27232                     resize : function(r, w, h) {
27233                         _t.onResize(w,h); // -something
27234                     }
27235                 }
27236             });
27237             
27238         }
27239         this.createToolbar(this);
27240        
27241         
27242         if(!this.width){
27243             this.setSize(this.wrap.getSize());
27244         }
27245         if (this.resizeEl) {
27246             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
27247             // should trigger onReize..
27248         }
27249         
27250         this.keyNav = new Roo.KeyNav(this.el, {
27251             
27252             "tab" : function(e){
27253                 e.preventDefault();
27254                 
27255                 var value = this.getValue();
27256                 
27257                 var start = this.el.dom.selectionStart;
27258                 var end = this.el.dom.selectionEnd;
27259                 
27260                 if(!e.shiftKey){
27261                     
27262                     this.setValue(value.substring(0, start) + "\t" + value.substring(end));
27263                     this.el.dom.setSelectionRange(end + 1, end + 1);
27264                     return;
27265                 }
27266                 
27267                 var f = value.substring(0, start).split("\t");
27268                 
27269                 if(f.pop().length != 0){
27270                     return;
27271                 }
27272                 
27273                 this.setValue(f.join("\t") + value.substring(end));
27274                 this.el.dom.setSelectionRange(start - 1, start - 1);
27275                 
27276             },
27277             
27278             "home" : function(e){
27279                 e.preventDefault();
27280                 
27281                 var curr = this.el.dom.selectionStart;
27282                 var lines = this.getValue().split("\n");
27283                 
27284                 if(!lines.length){
27285                     return;
27286                 }
27287                 
27288                 if(e.ctrlKey){
27289                     this.el.dom.setSelectionRange(0, 0);
27290                     return;
27291                 }
27292                 
27293                 var pos = 0;
27294                 
27295                 for (var i = 0; i < lines.length;i++) {
27296                     pos += lines[i].length;
27297                     
27298                     if(i != 0){
27299                         pos += 1;
27300                     }
27301                     
27302                     if(pos < curr){
27303                         continue;
27304                     }
27305                     
27306                     pos -= lines[i].length;
27307                     
27308                     break;
27309                 }
27310                 
27311                 if(!e.shiftKey){
27312                     this.el.dom.setSelectionRange(pos, pos);
27313                     return;
27314                 }
27315                 
27316                 this.el.dom.selectionStart = pos;
27317                 this.el.dom.selectionEnd = curr;
27318             },
27319             
27320             "end" : function(e){
27321                 e.preventDefault();
27322                 
27323                 var curr = this.el.dom.selectionStart;
27324                 var lines = this.getValue().split("\n");
27325                 
27326                 if(!lines.length){
27327                     return;
27328                 }
27329                 
27330                 if(e.ctrlKey){
27331                     this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
27332                     return;
27333                 }
27334                 
27335                 var pos = 0;
27336                 
27337                 for (var i = 0; i < lines.length;i++) {
27338                     
27339                     pos += lines[i].length;
27340                     
27341                     if(i != 0){
27342                         pos += 1;
27343                     }
27344                     
27345                     if(pos < curr){
27346                         continue;
27347                     }
27348                     
27349                     break;
27350                 }
27351                 
27352                 if(!e.shiftKey){
27353                     this.el.dom.setSelectionRange(pos, pos);
27354                     return;
27355                 }
27356                 
27357                 this.el.dom.selectionStart = curr;
27358                 this.el.dom.selectionEnd = pos;
27359             },
27360
27361             scope : this,
27362
27363             doRelay : function(foo, bar, hname){
27364                 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
27365             },
27366
27367             forceKeyDown: true
27368         });
27369         
27370 //        if(this.autosave && this.w){
27371 //            this.autoSaveFn = setInterval(this.autosave, 1000);
27372 //        }
27373     },
27374
27375     // private
27376     onResize : function(w, h)
27377     {
27378         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
27379         var ew = false;
27380         var eh = false;
27381         
27382         if(this.el ){
27383             if(typeof w == 'number'){
27384                 var aw = w - this.wrap.getFrameWidth('lr');
27385                 this.el.setWidth(this.adjustWidth('textarea', aw));
27386                 ew = aw;
27387             }
27388             if(typeof h == 'number'){
27389                 var tbh = 0;
27390                 for (var i =0; i < this.toolbars.length;i++) {
27391                     // fixme - ask toolbars for heights?
27392                     tbh += this.toolbars[i].tb.el.getHeight();
27393                     if (this.toolbars[i].footer) {
27394                         tbh += this.toolbars[i].footer.el.getHeight();
27395                     }
27396                 }
27397                 
27398                 
27399                 
27400                 
27401                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
27402                 ah -= 5; // knock a few pixes off for look..
27403 //                Roo.log(ah);
27404                 this.el.setHeight(this.adjustWidth('textarea', ah));
27405                 var eh = ah;
27406             }
27407         }
27408         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
27409         this.editorcore.onResize(ew,eh);
27410         
27411     },
27412
27413     /**
27414      * Toggles the editor between standard and source edit mode.
27415      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
27416      */
27417     toggleSourceEdit : function(sourceEditMode)
27418     {
27419         this.editorcore.toggleSourceEdit(sourceEditMode);
27420         
27421         if(this.editorcore.sourceEditMode){
27422             Roo.log('editor - showing textarea');
27423             
27424 //            Roo.log('in');
27425 //            Roo.log(this.syncValue());
27426             this.editorcore.syncValue();
27427             this.el.removeClass('x-hidden');
27428             this.el.dom.removeAttribute('tabIndex');
27429             this.el.focus();
27430             this.el.dom.scrollTop = 0;
27431             
27432             
27433             for (var i = 0; i < this.toolbars.length; i++) {
27434                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
27435                     this.toolbars[i].tb.hide();
27436                     this.toolbars[i].footer.hide();
27437                 }
27438             }
27439             
27440         }else{
27441             Roo.log('editor - hiding textarea');
27442 //            Roo.log('out')
27443 //            Roo.log(this.pushValue()); 
27444             this.editorcore.pushValue();
27445             
27446             this.el.addClass('x-hidden');
27447             this.el.dom.setAttribute('tabIndex', -1);
27448             
27449             for (var i = 0; i < this.toolbars.length; i++) {
27450                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
27451                     this.toolbars[i].tb.show();
27452                     this.toolbars[i].footer.show();
27453                 }
27454             }
27455             
27456             //this.deferFocus();
27457         }
27458         
27459         this.setSize(this.wrap.getSize());
27460         this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
27461         
27462         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
27463     },
27464  
27465     // private (for BoxComponent)
27466     adjustSize : Roo.BoxComponent.prototype.adjustSize,
27467
27468     // private (for BoxComponent)
27469     getResizeEl : function(){
27470         return this.wrap;
27471     },
27472
27473     // private (for BoxComponent)
27474     getPositionEl : function(){
27475         return this.wrap;
27476     },
27477
27478     // private
27479     initEvents : function(){
27480         this.originalValue = this.getValue();
27481     },
27482
27483     /**
27484      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
27485      * @method
27486      */
27487     markInvalid : Roo.emptyFn,
27488     /**
27489      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
27490      * @method
27491      */
27492     clearInvalid : Roo.emptyFn,
27493
27494     setValue : function(v){
27495         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
27496         this.editorcore.pushValue();
27497     },
27498
27499     /**
27500      * update the language in the body - really done by core
27501      * @param {String} language - eg. en / ar / zh-CN etc..
27502      */
27503     updateLanguage : function(lang)
27504     {
27505         this.language = lang;
27506         this.editorcore.language = lang;
27507         this.editorcore.updateLanguage();
27508      
27509     },
27510     // private
27511     deferFocus : function(){
27512         this.focus.defer(10, this);
27513     },
27514
27515     // doc'ed in Field
27516     focus : function(){
27517         this.editorcore.focus();
27518         
27519     },
27520       
27521
27522     // private
27523     onDestroy : function(){
27524         
27525         
27526         
27527         if(this.rendered){
27528             
27529             for (var i =0; i < this.toolbars.length;i++) {
27530                 // fixme - ask toolbars for heights?
27531                 this.toolbars[i].onDestroy();
27532             }
27533             
27534             this.wrap.dom.innerHTML = '';
27535             this.wrap.remove();
27536         }
27537     },
27538
27539     // private
27540     onFirstFocus : function(){
27541         //Roo.log("onFirstFocus");
27542         this.editorcore.onFirstFocus();
27543          for (var i =0; i < this.toolbars.length;i++) {
27544             this.toolbars[i].onFirstFocus();
27545         }
27546         
27547     },
27548     
27549     // private
27550     syncValue : function()
27551     {
27552         this.editorcore.syncValue();
27553     },
27554     
27555     pushValue : function()
27556     {
27557         this.editorcore.pushValue();
27558     },
27559     
27560     setStylesheets : function(stylesheets)
27561     {
27562         this.editorcore.setStylesheets(stylesheets);
27563     },
27564     
27565     removeStylesheets : function()
27566     {
27567         this.editorcore.removeStylesheets();
27568     }
27569      
27570     
27571     // hide stuff that is not compatible
27572     /**
27573      * @event blur
27574      * @hide
27575      */
27576     /**
27577      * @event change
27578      * @hide
27579      */
27580     /**
27581      * @event focus
27582      * @hide
27583      */
27584     /**
27585      * @event specialkey
27586      * @hide
27587      */
27588     /**
27589      * @cfg {String} fieldClass @hide
27590      */
27591     /**
27592      * @cfg {String} focusClass @hide
27593      */
27594     /**
27595      * @cfg {String} autoCreate @hide
27596      */
27597     /**
27598      * @cfg {String} inputType @hide
27599      */
27600     /**
27601      * @cfg {String} invalidClass @hide
27602      */
27603     /**
27604      * @cfg {String} invalidText @hide
27605      */
27606     /**
27607      * @cfg {String} msgFx @hide
27608      */
27609     /**
27610      * @cfg {String} validateOnBlur @hide
27611      */
27612 });
27613  
27614     /*
27615  * Based on
27616  * Ext JS Library 1.1.1
27617  * Copyright(c) 2006-2007, Ext JS, LLC.
27618  *  
27619  
27620  */
27621
27622 /**
27623  * @class Roo.form.HtmlEditor.ToolbarStandard
27624  * Basic Toolbar
27625
27626  * Usage:
27627  *
27628  new Roo.form.HtmlEditor({
27629     ....
27630     toolbars : [
27631         new Roo.form.HtmlEditorToolbar1({
27632             disable : { fonts: 1 , format: 1, ..., ... , ...],
27633             btns : [ .... ]
27634         })
27635     }
27636      
27637  * 
27638  * @cfg {Object} disable List of elements to disable..
27639  * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
27640  * 
27641  * 
27642  * NEEDS Extra CSS? 
27643  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
27644  */
27645  
27646 Roo.form.HtmlEditor.ToolbarStandard = function(config)
27647 {
27648     
27649     Roo.apply(this, config);
27650     
27651     // default disabled, based on 'good practice'..
27652     this.disable = this.disable || {};
27653     Roo.applyIf(this.disable, {
27654         fontSize : true,
27655         colors : true,
27656         specialElements : true
27657     });
27658     
27659     
27660     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
27661     // dont call parent... till later.
27662 }
27663
27664 Roo.form.HtmlEditor.ToolbarStandard.prototype = {
27665     
27666     tb: false,
27667     
27668     rendered: false,
27669     
27670     editor : false,
27671     editorcore : false,
27672     /**
27673      * @cfg {Object} disable  List of toolbar elements to disable
27674          
27675      */
27676     disable : false,
27677     
27678     
27679      /**
27680      * @cfg {String} createLinkText The default text for the create link prompt
27681      */
27682     createLinkText : 'Please enter the URL for the link:',
27683     /**
27684      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
27685      */
27686     defaultLinkValue : 'http:/'+'/',
27687    
27688     
27689       /**
27690      * @cfg {Array} fontFamilies An array of available font families
27691      */
27692     fontFamilies : [
27693         'Arial',
27694         'Courier New',
27695         'Tahoma',
27696         'Times New Roman',
27697         'Verdana'
27698     ],
27699     
27700     specialChars : [
27701            "&#169;",
27702           "&#174;",     
27703           "&#8482;",    
27704           "&#163;" ,    
27705          // "&#8212;",    
27706           "&#8230;",    
27707           "&#247;" ,    
27708         //  "&#225;" ,     ?? a acute?
27709            "&#8364;"    , //Euro
27710        //   "&#8220;"    ,
27711         //  "&#8221;"    ,
27712         //  "&#8226;"    ,
27713           "&#176;"  //   , // degrees
27714
27715          // "&#233;"     , // e ecute
27716          // "&#250;"     , // u ecute?
27717     ],
27718     
27719     specialElements : [
27720         {
27721             text: "Insert Table",
27722             xtype: 'MenuItem',
27723             xns : Roo.Menu,
27724             ihtml :  '<table><tr><td>Cell</td></tr></table>' 
27725                 
27726         },
27727         {    
27728             text: "Insert Image",
27729             xtype: 'MenuItem',
27730             xns : Roo.Menu,
27731             ihtml : '<img src="about:blank"/>'
27732             
27733         }
27734         
27735          
27736     ],
27737     
27738     
27739     inputElements : [ 
27740             "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
27741             "input:submit", "input:button", "select", "textarea", "label" ],
27742     formats : [
27743         ["p"] ,  
27744         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
27745         ["pre"],[ "code"], 
27746         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
27747         ['div'],['span'],
27748         ['sup'],['sub']
27749     ],
27750     
27751     cleanStyles : [
27752         "font-size"
27753     ],
27754      /**
27755      * @cfg {String} defaultFont default font to use.
27756      */
27757     defaultFont: 'tahoma',
27758    
27759     fontSelect : false,
27760     
27761     
27762     formatCombo : false,
27763     
27764     init : function(editor)
27765     {
27766         this.editor = editor;
27767         this.editorcore = editor.editorcore ? editor.editorcore : editor;
27768         var editorcore = this.editorcore;
27769         
27770         var _t = this;
27771         
27772         var fid = editorcore.frameId;
27773         var etb = this;
27774         function btn(id, toggle, handler){
27775             var xid = fid + '-'+ id ;
27776             return {
27777                 id : xid,
27778                 cmd : id,
27779                 cls : 'x-btn-icon x-edit-'+id,
27780                 enableToggle:toggle !== false,
27781                 scope: _t, // was editor...
27782                 handler:handler||_t.relayBtnCmd,
27783                 clickEvent:'mousedown',
27784                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
27785                 tabIndex:-1
27786             };
27787         }
27788         
27789         
27790         
27791         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
27792         this.tb = tb;
27793          // stop form submits
27794         tb.el.on('click', function(e){
27795             e.preventDefault(); // what does this do?
27796         });
27797
27798         if(!this.disable.font) { // && !Roo.isSafari){
27799             /* why no safari for fonts 
27800             editor.fontSelect = tb.el.createChild({
27801                 tag:'select',
27802                 tabIndex: -1,
27803                 cls:'x-font-select',
27804                 html: this.createFontOptions()
27805             });
27806             
27807             editor.fontSelect.on('change', function(){
27808                 var font = editor.fontSelect.dom.value;
27809                 editor.relayCmd('fontname', font);
27810                 editor.deferFocus();
27811             }, editor);
27812             
27813             tb.add(
27814                 editor.fontSelect.dom,
27815                 '-'
27816             );
27817             */
27818             
27819         };
27820         if(!this.disable.formats){
27821             this.formatCombo = new Roo.form.ComboBox({
27822                 store: new Roo.data.SimpleStore({
27823                     id : 'tag',
27824                     fields: ['tag'],
27825                     data : this.formats // from states.js
27826                 }),
27827                 blockFocus : true,
27828                 name : '',
27829                 //autoCreate : {tag: "div",  size: "20"},
27830                 displayField:'tag',
27831                 typeAhead: false,
27832                 mode: 'local',
27833                 editable : false,
27834                 triggerAction: 'all',
27835                 emptyText:'Add tag',
27836                 selectOnFocus:true,
27837                 width:135,
27838                 listeners : {
27839                     'select': function(c, r, i) {
27840                         editorcore.insertTag(r.get('tag'));
27841                         editor.focus();
27842                     }
27843                 }
27844
27845             });
27846             tb.addField(this.formatCombo);
27847             
27848         }
27849         
27850         if(!this.disable.format){
27851             tb.add(
27852                 btn('bold'),
27853                 btn('italic'),
27854                 btn('underline'),
27855                 btn('strikethrough')
27856             );
27857         };
27858         if(!this.disable.fontSize){
27859             tb.add(
27860                 '-',
27861                 
27862                 
27863                 btn('increasefontsize', false, editorcore.adjustFont),
27864                 btn('decreasefontsize', false, editorcore.adjustFont)
27865             );
27866         };
27867         
27868         
27869         if(!this.disable.colors){
27870             tb.add(
27871                 '-', {
27872                     id:editorcore.frameId +'-forecolor',
27873                     cls:'x-btn-icon x-edit-forecolor',
27874                     clickEvent:'mousedown',
27875                     tooltip: this.buttonTips['forecolor'] || undefined,
27876                     tabIndex:-1,
27877                     menu : new Roo.menu.ColorMenu({
27878                         allowReselect: true,
27879                         focus: Roo.emptyFn,
27880                         value:'000000',
27881                         plain:true,
27882                         selectHandler: function(cp, color){
27883                             editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
27884                             editor.deferFocus();
27885                         },
27886                         scope: editorcore,
27887                         clickEvent:'mousedown'
27888                     })
27889                 }, {
27890                     id:editorcore.frameId +'backcolor',
27891                     cls:'x-btn-icon x-edit-backcolor',
27892                     clickEvent:'mousedown',
27893                     tooltip: this.buttonTips['backcolor'] || undefined,
27894                     tabIndex:-1,
27895                     menu : new Roo.menu.ColorMenu({
27896                         focus: Roo.emptyFn,
27897                         value:'FFFFFF',
27898                         plain:true,
27899                         allowReselect: true,
27900                         selectHandler: function(cp, color){
27901                             if(Roo.isGecko){
27902                                 editorcore.execCmd('useCSS', false);
27903                                 editorcore.execCmd('hilitecolor', color);
27904                                 editorcore.execCmd('useCSS', true);
27905                                 editor.deferFocus();
27906                             }else{
27907                                 editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
27908                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
27909                                 editor.deferFocus();
27910                             }
27911                         },
27912                         scope:editorcore,
27913                         clickEvent:'mousedown'
27914                     })
27915                 }
27916             );
27917         };
27918         // now add all the items...
27919         
27920
27921         if(!this.disable.alignments){
27922             tb.add(
27923                 '-',
27924                 btn('justifyleft'),
27925                 btn('justifycenter'),
27926                 btn('justifyright')
27927             );
27928         };
27929
27930         //if(!Roo.isSafari){
27931             if(!this.disable.links){
27932                 tb.add(
27933                     '-',
27934                     btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
27935                 );
27936             };
27937
27938             if(!this.disable.lists){
27939                 tb.add(
27940                     '-',
27941                     btn('insertorderedlist'),
27942                     btn('insertunorderedlist')
27943                 );
27944             }
27945             if(!this.disable.sourceEdit){
27946                 tb.add(
27947                     '-',
27948                     btn('sourceedit', true, function(btn){
27949                         this.toggleSourceEdit(btn.pressed);
27950                     })
27951                 );
27952             }
27953         //}
27954         
27955         var smenu = { };
27956         // special menu.. - needs to be tidied up..
27957         if (!this.disable.special) {
27958             smenu = {
27959                 text: "&#169;",
27960                 cls: 'x-edit-none',
27961                 
27962                 menu : {
27963                     items : []
27964                 }
27965             };
27966             for (var i =0; i < this.specialChars.length; i++) {
27967                 smenu.menu.items.push({
27968                     
27969                     html: this.specialChars[i],
27970                     handler: function(a,b) {
27971                         editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
27972                         //editor.insertAtCursor(a.html);
27973                         
27974                     },
27975                     tabIndex:-1
27976                 });
27977             }
27978             
27979             
27980             tb.add(smenu);
27981             
27982             
27983         }
27984         
27985         var cmenu = { };
27986         if (!this.disable.cleanStyles) {
27987             cmenu = {
27988                 cls: 'x-btn-icon x-btn-clear',
27989                 
27990                 menu : {
27991                     items : []
27992                 }
27993             };
27994             for (var i =0; i < this.cleanStyles.length; i++) {
27995                 cmenu.menu.items.push({
27996                     actiontype : this.cleanStyles[i],
27997                     html: 'Remove ' + this.cleanStyles[i],
27998                     handler: function(a,b) {
27999 //                        Roo.log(a);
28000 //                        Roo.log(b);
28001                         var c = Roo.get(editorcore.doc.body);
28002                         c.select('[style]').each(function(s) {
28003                             s.dom.style.removeProperty(a.actiontype);
28004                         });
28005                         editorcore.syncValue();
28006                     },
28007                     tabIndex:-1
28008                 });
28009             }
28010             cmenu.menu.items.push({
28011                 actiontype : 'tablewidths',
28012                 html: 'Remove Table Widths',
28013                 handler: function(a,b) {
28014                     editorcore.cleanTableWidths();
28015                     editorcore.syncValue();
28016                 },
28017                 tabIndex:-1
28018             });
28019             cmenu.menu.items.push({
28020                 actiontype : 'word',
28021                 html: 'Remove MS Word Formating',
28022                 handler: function(a,b) {
28023                     editorcore.cleanWord();
28024                     editorcore.syncValue();
28025                 },
28026                 tabIndex:-1
28027             });
28028             
28029             cmenu.menu.items.push({
28030                 actiontype : 'all',
28031                 html: 'Remove All Styles',
28032                 handler: function(a,b) {
28033                     
28034                     var c = Roo.get(editorcore.doc.body);
28035                     c.select('[style]').each(function(s) {
28036                         s.dom.removeAttribute('style');
28037                     });
28038                     editorcore.syncValue();
28039                 },
28040                 tabIndex:-1
28041             });
28042             
28043             cmenu.menu.items.push({
28044                 actiontype : 'all',
28045                 html: 'Remove All CSS Classes',
28046                 handler: function(a,b) {
28047                     
28048                     var c = Roo.get(editorcore.doc.body);
28049                     c.select('[class]').each(function(s) {
28050                         s.dom.removeAttribute('class');
28051                     });
28052                     editorcore.cleanWord();
28053                     editorcore.syncValue();
28054                 },
28055                 tabIndex:-1
28056             });
28057             
28058              cmenu.menu.items.push({
28059                 actiontype : 'tidy',
28060                 html: 'Tidy HTML Source',
28061                 handler: function(a,b) {
28062                     new Roo.htmleditor.Tidy(editorcore.doc.body);
28063                     editorcore.syncValue();
28064                 },
28065                 tabIndex:-1
28066             });
28067             
28068             
28069             tb.add(cmenu);
28070         }
28071          
28072         if (!this.disable.specialElements) {
28073             var semenu = {
28074                 text: "Other;",
28075                 cls: 'x-edit-none',
28076                 menu : {
28077                     items : []
28078                 }
28079             };
28080             for (var i =0; i < this.specialElements.length; i++) {
28081                 semenu.menu.items.push(
28082                     Roo.apply({ 
28083                         handler: function(a,b) {
28084                             editor.insertAtCursor(this.ihtml);
28085                         }
28086                     }, this.specialElements[i])
28087                 );
28088                     
28089             }
28090             
28091             tb.add(semenu);
28092             
28093             
28094         }
28095          
28096         
28097         if (this.btns) {
28098             for(var i =0; i< this.btns.length;i++) {
28099                 var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
28100                 b.cls =  'x-edit-none';
28101                 
28102                 if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
28103                     b.cls += ' x-init-enable';
28104                 }
28105                 
28106                 b.scope = editorcore;
28107                 tb.add(b);
28108             }
28109         
28110         }
28111         
28112         
28113         
28114         // disable everything...
28115         
28116         this.tb.items.each(function(item){
28117             
28118            if(
28119                 item.id != editorcore.frameId+ '-sourceedit' && 
28120                 (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
28121             ){
28122                 
28123                 item.disable();
28124             }
28125         });
28126         this.rendered = true;
28127         
28128         // the all the btns;
28129         editor.on('editorevent', this.updateToolbar, this);
28130         // other toolbars need to implement this..
28131         //editor.on('editmodechange', this.updateToolbar, this);
28132     },
28133     
28134     
28135     relayBtnCmd : function(btn) {
28136         this.editorcore.relayCmd(btn.cmd);
28137     },
28138     // private used internally
28139     createLink : function(){
28140         //Roo.log("create link?");
28141         var ec = this.editorcore;
28142         var ar = ec.getAllAncestors();
28143         var n = false;
28144         for(var i = 0;i< ar.length;i++) {
28145             if (ar[i] && ar[i].nodeName == 'A') {
28146                 n = ar[i];
28147                 break;
28148             }
28149         }
28150         
28151         (function() {
28152             
28153             Roo.MessageBox.show({
28154                 title : "Add / Edit Link URL",
28155                 msg : "Enter the url for the link",
28156                 buttons: Roo.MessageBox.OKCANCEL,
28157                 fn: function(btn, url){
28158                     if (btn != 'ok') {
28159                         return;
28160                     }
28161                     if(url && url != 'http:/'+'/'){
28162                         if (n) {
28163                             n.setAttribute('href', url);
28164                         } else {
28165                             ec.relayCmd('createlink', url);
28166                         }
28167                     }
28168                 },
28169                 minWidth:250,
28170                 prompt:true,
28171                 //multiline: multiline,
28172                 modal : true,
28173                 value :  n  ? n.getAttribute('href') : '' 
28174             });
28175             
28176              
28177         }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
28178         
28179     },
28180
28181     
28182     /**
28183      * Protected method that will not generally be called directly. It triggers
28184      * a toolbar update by reading the markup state of the current selection in the editor.
28185      */
28186     updateToolbar: function(){
28187
28188         if(!this.editorcore.activated){
28189             this.editor.onFirstFocus();
28190             return;
28191         }
28192
28193         var btns = this.tb.items.map, 
28194             doc = this.editorcore.doc,
28195             frameId = this.editorcore.frameId;
28196
28197         if(!this.disable.font && !Roo.isSafari){
28198             /*
28199             var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
28200             if(name != this.fontSelect.dom.value){
28201                 this.fontSelect.dom.value = name;
28202             }
28203             */
28204         }
28205         if(!this.disable.format){
28206             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
28207             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
28208             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
28209             btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
28210         }
28211         if(!this.disable.alignments){
28212             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
28213             btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
28214             btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
28215         }
28216         if(!Roo.isSafari && !this.disable.lists){
28217             btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
28218             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
28219         }
28220         
28221         var ans = this.editorcore.getAllAncestors();
28222         if (this.formatCombo) {
28223             
28224             
28225             var store = this.formatCombo.store;
28226             this.formatCombo.setValue("");
28227             for (var i =0; i < ans.length;i++) {
28228                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
28229                     // select it..
28230                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
28231                     break;
28232                 }
28233             }
28234         }
28235         
28236         
28237         
28238         // hides menus... - so this cant be on a menu...
28239         Roo.menu.MenuMgr.hideAll();
28240
28241         //this.editorsyncValue();
28242     },
28243    
28244     
28245     createFontOptions : function(){
28246         var buf = [], fs = this.fontFamilies, ff, lc;
28247         
28248         
28249         
28250         for(var i = 0, len = fs.length; i< len; i++){
28251             ff = fs[i];
28252             lc = ff.toLowerCase();
28253             buf.push(
28254                 '<option value="',lc,'" style="font-family:',ff,';"',
28255                     (this.defaultFont == lc ? ' selected="true">' : '>'),
28256                     ff,
28257                 '</option>'
28258             );
28259         }
28260         return buf.join('');
28261     },
28262     
28263     toggleSourceEdit : function(sourceEditMode){
28264         
28265         Roo.log("toolbar toogle");
28266         if(sourceEditMode === undefined){
28267             sourceEditMode = !this.sourceEditMode;
28268         }
28269         this.sourceEditMode = sourceEditMode === true;
28270         var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
28271         // just toggle the button?
28272         if(btn.pressed !== this.sourceEditMode){
28273             btn.toggle(this.sourceEditMode);
28274             return;
28275         }
28276         
28277         if(sourceEditMode){
28278             Roo.log("disabling buttons");
28279             this.tb.items.each(function(item){
28280                 if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
28281                     item.disable();
28282                 }
28283             });
28284           
28285         }else{
28286             Roo.log("enabling buttons");
28287             if(this.editorcore.initialized){
28288                 this.tb.items.each(function(item){
28289                     item.enable();
28290                 });
28291                 // initialize 'blocks'
28292                 Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
28293                     Roo.htmleditor.Block.factory(e).updateElement(e);
28294                 },this);
28295             
28296             }
28297             
28298         }
28299         Roo.log("calling toggole on editor");
28300         // tell the editor that it's been pressed..
28301         this.editor.toggleSourceEdit(sourceEditMode);
28302        
28303     },
28304      /**
28305      * Object collection of toolbar tooltips for the buttons in the editor. The key
28306      * is the command id associated with that button and the value is a valid QuickTips object.
28307      * For example:
28308 <pre><code>
28309 {
28310     bold : {
28311         title: 'Bold (Ctrl+B)',
28312         text: 'Make the selected text bold.',
28313         cls: 'x-html-editor-tip'
28314     },
28315     italic : {
28316         title: 'Italic (Ctrl+I)',
28317         text: 'Make the selected text italic.',
28318         cls: 'x-html-editor-tip'
28319     },
28320     ...
28321 </code></pre>
28322     * @type Object
28323      */
28324     buttonTips : {
28325         bold : {
28326             title: 'Bold (Ctrl+B)',
28327             text: 'Make the selected text bold.',
28328             cls: 'x-html-editor-tip'
28329         },
28330         italic : {
28331             title: 'Italic (Ctrl+I)',
28332             text: 'Make the selected text italic.',
28333             cls: 'x-html-editor-tip'
28334         },
28335         underline : {
28336             title: 'Underline (Ctrl+U)',
28337             text: 'Underline the selected text.',
28338             cls: 'x-html-editor-tip'
28339         },
28340         strikethrough : {
28341             title: 'Strikethrough',
28342             text: 'Strikethrough the selected text.',
28343             cls: 'x-html-editor-tip'
28344         },
28345         increasefontsize : {
28346             title: 'Grow Text',
28347             text: 'Increase the font size.',
28348             cls: 'x-html-editor-tip'
28349         },
28350         decreasefontsize : {
28351             title: 'Shrink Text',
28352             text: 'Decrease the font size.',
28353             cls: 'x-html-editor-tip'
28354         },
28355         backcolor : {
28356             title: 'Text Highlight Color',
28357             text: 'Change the background color of the selected text.',
28358             cls: 'x-html-editor-tip'
28359         },
28360         forecolor : {
28361             title: 'Font Color',
28362             text: 'Change the color of the selected text.',
28363             cls: 'x-html-editor-tip'
28364         },
28365         justifyleft : {
28366             title: 'Align Text Left',
28367             text: 'Align text to the left.',
28368             cls: 'x-html-editor-tip'
28369         },
28370         justifycenter : {
28371             title: 'Center Text',
28372             text: 'Center text in the editor.',
28373             cls: 'x-html-editor-tip'
28374         },
28375         justifyright : {
28376             title: 'Align Text Right',
28377             text: 'Align text to the right.',
28378             cls: 'x-html-editor-tip'
28379         },
28380         insertunorderedlist : {
28381             title: 'Bullet List',
28382             text: 'Start a bulleted list.',
28383             cls: 'x-html-editor-tip'
28384         },
28385         insertorderedlist : {
28386             title: 'Numbered List',
28387             text: 'Start a numbered list.',
28388             cls: 'x-html-editor-tip'
28389         },
28390         createlink : {
28391             title: 'Hyperlink',
28392             text: 'Make the selected text a hyperlink.',
28393             cls: 'x-html-editor-tip'
28394         },
28395         sourceedit : {
28396             title: 'Source Edit',
28397             text: 'Switch to source editing mode.',
28398             cls: 'x-html-editor-tip'
28399         }
28400     },
28401     // private
28402     onDestroy : function(){
28403         if(this.rendered){
28404             
28405             this.tb.items.each(function(item){
28406                 if(item.menu){
28407                     item.menu.removeAll();
28408                     if(item.menu.el){
28409                         item.menu.el.destroy();
28410                     }
28411                 }
28412                 item.destroy();
28413             });
28414              
28415         }
28416     },
28417     onFirstFocus: function() {
28418         this.tb.items.each(function(item){
28419            item.enable();
28420         });
28421     }
28422 };
28423
28424
28425
28426
28427 // <script type="text/javascript">
28428 /*
28429  * Based on
28430  * Ext JS Library 1.1.1
28431  * Copyright(c) 2006-2007, Ext JS, LLC.
28432  *  
28433  
28434  */
28435
28436  
28437 /**
28438  * @class Roo.form.HtmlEditor.ToolbarContext
28439  * Context Toolbar
28440  * 
28441  * Usage:
28442  *
28443  new Roo.form.HtmlEditor({
28444     ....
28445     toolbars : [
28446         { xtype: 'ToolbarStandard', styles : {} }
28447         { xtype: 'ToolbarContext', disable : {} }
28448     ]
28449 })
28450
28451      
28452  * 
28453  * @config : {Object} disable List of elements to disable.. (not done yet.)
28454  * @config : {Object} styles  Map of styles available.
28455  * 
28456  */
28457
28458 Roo.form.HtmlEditor.ToolbarContext = function(config)
28459 {
28460     
28461     Roo.apply(this, config);
28462     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
28463     // dont call parent... till later.
28464     this.styles = this.styles || {};
28465 }
28466
28467  
28468
28469 Roo.form.HtmlEditor.ToolbarContext.types = {
28470     'IMG' : [
28471         {
28472             name : 'width',
28473             title: "Width",
28474             width: 40
28475         },
28476         {
28477             name : 'height',
28478             title: "Height",
28479             width: 40
28480         },
28481         {
28482             name : 'align',
28483             title: "Align",
28484             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
28485             width : 80
28486             
28487         },
28488         {
28489             name : 'border',
28490             title: "Border",
28491             width: 40
28492         },
28493         {
28494             name : 'alt',
28495             title: "Alt",
28496             width: 120
28497         },
28498         {
28499             name : 'src',
28500             title: "Src",
28501             width: 220
28502         }
28503         
28504     ],
28505     
28506     'FIGURE' : [
28507         {
28508             name : 'align',
28509             title: "Align",
28510             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
28511             width : 80  
28512         }
28513     ],
28514     'A' : [
28515         {
28516             name : 'name',
28517             title: "Name",
28518             width: 50
28519         },
28520         {
28521             name : 'target',
28522             title: "Target",
28523             width: 120
28524         },
28525         {
28526             name : 'href',
28527             title: "Href",
28528             width: 220
28529         } // border?
28530         
28531     ],
28532     
28533     'INPUT' : [
28534         {
28535             name : 'name',
28536             title: "name",
28537             width: 120
28538         },
28539         {
28540             name : 'value',
28541             title: "Value",
28542             width: 120
28543         },
28544         {
28545             name : 'width',
28546             title: "Width",
28547             width: 40
28548         }
28549     ],
28550     'LABEL' : [
28551          {
28552             name : 'for',
28553             title: "For",
28554             width: 120
28555         }
28556     ],
28557     'TEXTAREA' : [
28558         {
28559             name : 'name',
28560             title: "name",
28561             width: 120
28562         },
28563         {
28564             name : 'rows',
28565             title: "Rows",
28566             width: 20
28567         },
28568         {
28569             name : 'cols',
28570             title: "Cols",
28571             width: 20
28572         }
28573     ],
28574     'SELECT' : [
28575         {
28576             name : 'name',
28577             title: "name",
28578             width: 120
28579         },
28580         {
28581             name : 'selectoptions',
28582             title: "Options",
28583             width: 200
28584         }
28585     ],
28586     
28587     // should we really allow this??
28588     // should this just be 
28589     'BODY' : [
28590         
28591         {
28592             name : 'title',
28593             title: "Title",
28594             width: 200,
28595             disabled : true
28596         }
28597     ],
28598  
28599     '*' : [
28600         // empty.
28601     ]
28602
28603 };
28604
28605 // this should be configurable.. - you can either set it up using stores, or modify options somehwere..
28606 Roo.form.HtmlEditor.ToolbarContext.stores = false;
28607
28608 Roo.form.HtmlEditor.ToolbarContext.options = {
28609         'font-family'  : [ 
28610                 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
28611                 [ 'Courier New', 'Courier New'],
28612                 [ 'Tahoma', 'Tahoma'],
28613                 [ 'Times New Roman,serif', 'Times'],
28614                 [ 'Verdana','Verdana' ]
28615         ]
28616 };
28617
28618 // fixme - these need to be configurable..
28619  
28620
28621 //Roo.form.HtmlEditor.ToolbarContext.types
28622
28623
28624 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
28625     
28626     tb: false,
28627     
28628     rendered: false,
28629     
28630     editor : false,
28631     editorcore : false,
28632     /**
28633      * @cfg {Object} disable  List of toolbar elements to disable
28634          
28635      */
28636     disable : false,
28637     /**
28638      * @cfg {Object} styles List of styles 
28639      *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
28640      *
28641      * These must be defined in the page, so they get rendered correctly..
28642      * .headline { }
28643      * TD.underline { }
28644      * 
28645      */
28646     styles : false,
28647     
28648     options: false,
28649     
28650     toolbars : false,
28651     
28652     init : function(editor)
28653     {
28654         this.editor = editor;
28655         this.editorcore = editor.editorcore ? editor.editorcore : editor;
28656         var editorcore = this.editorcore;
28657         
28658         var fid = editorcore.frameId;
28659         var etb = this;
28660         function btn(id, toggle, handler){
28661             var xid = fid + '-'+ id ;
28662             return {
28663                 id : xid,
28664                 cmd : id,
28665                 cls : 'x-btn-icon x-edit-'+id,
28666                 enableToggle:toggle !== false,
28667                 scope: editorcore, // was editor...
28668                 handler:handler||editorcore.relayBtnCmd,
28669                 clickEvent:'mousedown',
28670                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
28671                 tabIndex:-1
28672             };
28673         }
28674         // create a new element.
28675         var wdiv = editor.wrap.createChild({
28676                 tag: 'div'
28677             }, editor.wrap.dom.firstChild.nextSibling, true);
28678         
28679         // can we do this more than once??
28680         
28681          // stop form submits
28682       
28683  
28684         // disable everything...
28685         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
28686         this.toolbars = {};
28687         // block toolbars are built in updateToolbar when needed.
28688         for (var i in  ty) {
28689             
28690             this.toolbars[i] = this.buildToolbar(ty[i],i);
28691         }
28692         this.tb = this.toolbars.BODY;
28693         this.tb.el.show();
28694         this.buildFooter();
28695         this.footer.show();
28696         editor.on('hide', function( ) { this.footer.hide() }, this);
28697         editor.on('show', function( ) { this.footer.show() }, this);
28698         
28699          
28700         this.rendered = true;
28701         
28702         // the all the btns;
28703         editor.on('editorevent', this.updateToolbar, this);
28704         // other toolbars need to implement this..
28705         //editor.on('editmodechange', this.updateToolbar, this);
28706     },
28707     
28708     
28709     
28710     /**
28711      * Protected method that will not generally be called directly. It triggers
28712      * a toolbar update by reading the markup state of the current selection in the editor.
28713      *
28714      * Note you can force an update by calling on('editorevent', scope, false)
28715      */
28716     updateToolbar: function(editor ,ev, sel)
28717     {
28718         
28719         if (ev) {
28720             ev.stopEvent(); // se if we can stop this looping with mutiple events.
28721         }
28722         
28723         //Roo.log(ev);
28724         // capture mouse up - this is handy for selecting images..
28725         // perhaps should go somewhere else...
28726         if(!this.editorcore.activated){
28727              this.editor.onFirstFocus();
28728             return;
28729         }
28730         //Roo.log(ev ? ev.target : 'NOTARGET');
28731         
28732         
28733         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
28734         // selectNode - might want to handle IE?
28735         
28736         
28737         
28738         if (ev &&
28739             (ev.type == 'mouseup' || ev.type == 'click' ) &&
28740             ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
28741             // they have click on an image...
28742             // let's see if we can change the selection...
28743             sel = ev.target;
28744             
28745             // this triggers looping?
28746             //this.editorcore.selectNode(sel);
28747              
28748         }
28749         
28750         // this forces an id..
28751         Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
28752              e.classList.remove('roo-ed-selection');
28753         });
28754         //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
28755         //Roo.get(node).addClass('roo-ed-selection');
28756       
28757         //var updateFooter = sel ? false : true; 
28758         
28759         
28760         var ans = this.editorcore.getAllAncestors();
28761         
28762         // pick
28763         var ty = Roo.form.HtmlEditor.ToolbarContext.types;
28764         
28765         if (!sel) { 
28766             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
28767             sel = sel ? sel : this.editorcore.doc.body;
28768             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
28769             
28770         }
28771         
28772         var tn = sel.tagName.toUpperCase();
28773         var lastSel = this.tb.selectedNode;
28774         this.tb.selectedNode = sel;
28775         var left_label = tn;
28776         
28777         // ok see if we are editing a block?
28778         
28779         var db = false;
28780         // you are not actually selecting the block.
28781         if (sel && sel.hasAttribute('data-block')) {
28782             db = sel;
28783         } else if (sel && sel.closest('[data-block]')) {
28784             
28785             db = sel.closest('[data-block]');
28786             //var cepar = sel.closest('[contenteditable=true]');
28787             //if (db && cepar && cepar.tagName != 'BODY') {
28788             //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
28789             //}   
28790         }
28791         
28792         
28793         var block = false;
28794         //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
28795         if (db && this.editorcore.enableBlocks) {
28796             block = Roo.htmleditor.Block.factory(db);
28797             
28798             
28799             if (block) {
28800                  db.className = (
28801                         db.classList.length > 0  ? db.className + ' ' : ''
28802                     )  + 'roo-ed-selection';
28803                  
28804                  // since we removed it earlier... its not there..
28805                 tn = 'BLOCK.' + db.getAttribute('data-block');
28806                 
28807                 //this.editorcore.selectNode(db);
28808                 if (typeof(this.toolbars[tn]) == 'undefined') {
28809                    this.toolbars[tn] = this.buildToolbar( false  ,tn ,block.friendly_name, block);
28810                 }
28811                 this.toolbars[tn].selectedNode = db;
28812                 left_label = block.friendly_name;
28813                 ans = this.editorcore.getAllAncestors();
28814             }
28815             
28816                 
28817             
28818         }
28819         
28820         
28821         if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
28822             return; // no change?
28823         }
28824         
28825         
28826           
28827         this.tb.el.hide();
28828         ///console.log("show: " + tn);
28829         this.tb =  typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
28830         
28831         this.tb.el.show();
28832         // update name
28833         this.tb.items.first().el.innerHTML = left_label + ':&nbsp;';
28834         
28835         
28836         // update attributes
28837         if (block && this.tb.fields) {
28838              
28839             this.tb.fields.each(function(e) {
28840                 e.setValue(block[e.name]);
28841             });
28842             
28843             
28844         } else  if (this.tb.fields && this.tb.selectedNode) {
28845             this.tb.fields.each( function(e) {
28846                 if (e.stylename) {
28847                     e.setValue(this.tb.selectedNode.style[e.stylename]);
28848                     return;
28849                 } 
28850                 e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
28851             }, this);
28852             this.updateToolbarStyles(this.tb.selectedNode);  
28853         }
28854         
28855         
28856        
28857         Roo.menu.MenuMgr.hideAll();
28858
28859         
28860         
28861     
28862         // update the footer
28863         //
28864         this.updateFooter(ans);
28865              
28866     },
28867     
28868     updateToolbarStyles : function(sel)
28869     {
28870         var hasStyles = false;
28871         for(var i in this.styles) {
28872             hasStyles = true;
28873             break;
28874         }
28875         
28876         // update styles
28877         if (hasStyles && this.tb.hasStyles) { 
28878             var st = this.tb.fields.item(0);
28879             
28880             st.store.removeAll();
28881             var cn = sel.className.split(/\s+/);
28882             
28883             var avs = [];
28884             if (this.styles['*']) {
28885                 
28886                 Roo.each(this.styles['*'], function(v) {
28887                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
28888                 });
28889             }
28890             if (this.styles[tn]) { 
28891                 Roo.each(this.styles[tn], function(v) {
28892                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
28893                 });
28894             }
28895             
28896             st.store.loadData(avs);
28897             st.collapse();
28898             st.setValue(cn);
28899         }
28900     },
28901     
28902      
28903     updateFooter : function(ans)
28904     {
28905         var html = '';
28906         if (ans === false) {
28907             this.footDisp.dom.innerHTML = '';
28908             return;
28909         }
28910         
28911         this.footerEls = ans.reverse();
28912         Roo.each(this.footerEls, function(a,i) {
28913             if (!a) { return; }
28914             html += html.length ? ' &gt; '  :  '';
28915             
28916             html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
28917             
28918         });
28919        
28920         // 
28921         var sz = this.footDisp.up('td').getSize();
28922         this.footDisp.dom.style.width = (sz.width -10) + 'px';
28923         this.footDisp.dom.style.marginLeft = '5px';
28924         
28925         this.footDisp.dom.style.overflow = 'hidden';
28926         
28927         this.footDisp.dom.innerHTML = html;
28928             
28929         
28930     },
28931    
28932        
28933     // private
28934     onDestroy : function(){
28935         if(this.rendered){
28936             
28937             this.tb.items.each(function(item){
28938                 if(item.menu){
28939                     item.menu.removeAll();
28940                     if(item.menu.el){
28941                         item.menu.el.destroy();
28942                     }
28943                 }
28944                 item.destroy();
28945             });
28946              
28947         }
28948     },
28949     onFirstFocus: function() {
28950         // need to do this for all the toolbars..
28951         this.tb.items.each(function(item){
28952            item.enable();
28953         });
28954     },
28955     buildToolbar: function(tlist, nm, friendly_name, block)
28956     {
28957         var editor = this.editor;
28958         var editorcore = this.editorcore;
28959          // create a new element.
28960         var wdiv = editor.wrap.createChild({
28961                 tag: 'div'
28962             }, editor.wrap.dom.firstChild.nextSibling, true);
28963         
28964        
28965         var tb = new Roo.Toolbar(wdiv);
28966         ///this.tb = tb; // << this sets the active toolbar..
28967         if (tlist === false && block) {
28968             tlist = block.contextMenu(this);
28969         }
28970         
28971         tb.hasStyles = false;
28972         tb.name = nm;
28973         
28974         tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ":&nbsp;");
28975         
28976         var styles = Array.from(this.styles);
28977         
28978         
28979         // styles...
28980         if (styles && styles.length) {
28981             tb.hasStyles = true;
28982             // this needs a multi-select checkbox...
28983             tb.addField( new Roo.form.ComboBox({
28984                 store: new Roo.data.SimpleStore({
28985                     id : 'val',
28986                     fields: ['val', 'selected'],
28987                     data : [] 
28988                 }),
28989                 name : '-roo-edit-className',
28990                 attrname : 'className',
28991                 displayField: 'val',
28992                 typeAhead: false,
28993                 mode: 'local',
28994                 editable : false,
28995                 triggerAction: 'all',
28996                 emptyText:'Select Style',
28997                 selectOnFocus:true,
28998                 width: 130,
28999                 listeners : {
29000                     'select': function(c, r, i) {
29001                         // initial support only for on class per el..
29002                         tb.selectedNode.className =  r ? r.get('val') : '';
29003                         editorcore.syncValue();
29004                     }
29005                 }
29006     
29007             }));
29008         }
29009         
29010         var tbc = Roo.form.HtmlEditor.ToolbarContext;
29011         
29012         
29013         for (var i = 0; i < tlist.length; i++) {
29014             
29015             // newer versions will use xtype cfg to create menus.
29016             if (typeof(tlist[i].xtype) != 'undefined') {
29017                 
29018                 tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
29019                 
29020                 
29021                 continue;
29022             }
29023             
29024             var item = tlist[i];
29025             tb.add(item.title + ":&nbsp;");
29026             
29027             
29028             //optname == used so you can configure the options available..
29029             var opts = item.opts ? item.opts : false;
29030             if (item.optname) { // use the b
29031                 opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
29032            
29033             }
29034             
29035             if (opts) {
29036                 // opts == pulldown..
29037                 tb.addField( new Roo.form.ComboBox({
29038                     store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
29039                         id : 'val',
29040                         fields: ['val', 'display'],
29041                         data : opts  
29042                     }),
29043                     name : '-roo-edit-' + tlist[i].name,
29044                     
29045                     attrname : tlist[i].name,
29046                     stylename : item.style ? item.style : false,
29047                     
29048                     displayField: item.displayField ? item.displayField : 'val',
29049                     valueField :  'val',
29050                     typeAhead: false,
29051                     mode: typeof(tbc.stores[tlist[i].name]) != 'undefined'  ? 'remote' : 'local',
29052                     editable : false,
29053                     triggerAction: 'all',
29054                     emptyText:'Select',
29055                     selectOnFocus:true,
29056                     width: item.width ? item.width  : 130,
29057                     listeners : {
29058                         'select': function(c, r, i) {
29059                              
29060                             
29061                             if (c.stylename) {
29062                                 tb.selectedNode.style[c.stylename] =  r.get('val');
29063                                 editorcore.syncValue();
29064                                 return;
29065                             }
29066                             if (r === false) {
29067                                 tb.selectedNode.removeAttribute(c.attrname);
29068                                 editorcore.syncValue();
29069                                 return;
29070                             }
29071                             tb.selectedNode.setAttribute(c.attrname, r.get('val'));
29072                             editorcore.syncValue();
29073                         }
29074                     }
29075
29076                 }));
29077                 continue;
29078                     
29079                  
29080                 /*
29081                 tb.addField( new Roo.form.TextField({
29082                     name: i,
29083                     width: 100,
29084                     //allowBlank:false,
29085                     value: ''
29086                 }));
29087                 continue;
29088                 */
29089             }
29090             tb.addField( new Roo.form.TextField({
29091                 name: '-roo-edit-' + tlist[i].name,
29092                 attrname : tlist[i].name,
29093                 
29094                 width: item.width,
29095                 //allowBlank:true,
29096                 value: '',
29097                 listeners: {
29098                     'change' : function(f, nv, ov) {
29099                         
29100                          
29101                         tb.selectedNode.setAttribute(f.attrname, nv);
29102                         editorcore.syncValue();
29103                     }
29104                 }
29105             }));
29106              
29107         }
29108         
29109         var _this = this;
29110         var show_delete = !block || block.deleteTitle !== false;
29111         if(nm == 'BODY'){
29112             show_delete = false;
29113             tb.addSeparator();
29114         
29115             tb.addButton( {
29116                 text: 'Stylesheets',
29117
29118                 listeners : {
29119                     click : function ()
29120                     {
29121                         _this.editor.fireEvent('stylesheetsclick', _this.editor);
29122                     }
29123                 }
29124             });
29125         }
29126         
29127         tb.addFill();
29128         if (show_delete) {
29129             tb.addButton({
29130                 text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
29131         
29132                 listeners : {
29133                     click : function ()
29134                     {
29135                         var sn = tb.selectedNode;
29136                         if (block) {
29137                             sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
29138                             
29139                         }
29140                         if (!sn) {
29141                             return;
29142                         }
29143                         var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
29144                         if (sn.hasAttribute('data-block')) {
29145                             stn =  sn.nextSibling || sn.previousSibling || sn.parentNode;
29146                             sn.parentNode.removeChild(sn);
29147                             
29148                         } else if (sn && sn.tagName != 'BODY') {
29149                             // remove and keep parents.
29150                             a = new Roo.htmleditor.FilterKeepChildren({tag : false});
29151                             a.replaceTag(sn);
29152                         }
29153                         
29154                         
29155                         var range = editorcore.createRange();
29156             
29157                         range.setStart(stn,0);
29158                         range.setEnd(stn,0); 
29159                         var selection = editorcore.getSelection();
29160                         selection.removeAllRanges();
29161                         selection.addRange(range);
29162                         
29163                         
29164                         //_this.updateToolbar(null, null, pn);
29165                         _this.updateToolbar(null, null, null);
29166                         _this.updateFooter(false);
29167                         
29168                     }
29169                 }
29170                 
29171                         
29172                     
29173                 
29174             });
29175         }    
29176         
29177         tb.el.on('click', function(e){
29178             e.preventDefault(); // what does this do?
29179         });
29180         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
29181         tb.el.hide();
29182         
29183         // dont need to disable them... as they will get hidden
29184         return tb;
29185          
29186         
29187     },
29188     buildFooter : function()
29189     {
29190         
29191         var fel = this.editor.wrap.createChild();
29192         this.footer = new Roo.Toolbar(fel);
29193         // toolbar has scrolly on left / right?
29194         var footDisp= new Roo.Toolbar.Fill();
29195         var _t = this;
29196         this.footer.add(
29197             {
29198                 text : '&lt;',
29199                 xtype: 'Button',
29200                 handler : function() {
29201                     _t.footDisp.scrollTo('left',0,true)
29202                 }
29203             }
29204         );
29205         this.footer.add( footDisp );
29206         this.footer.add( 
29207             {
29208                 text : '&gt;',
29209                 xtype: 'Button',
29210                 handler : function() {
29211                     // no animation..
29212                     _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
29213                 }
29214             }
29215         );
29216         var fel = Roo.get(footDisp.el);
29217         fel.addClass('x-editor-context');
29218         this.footDispWrap = fel; 
29219         this.footDispWrap.overflow  = 'hidden';
29220         
29221         this.footDisp = fel.createChild();
29222         this.footDispWrap.on('click', this.onContextClick, this)
29223         
29224         
29225     },
29226     // when the footer contect changes
29227     onContextClick : function (ev,dom)
29228     {
29229         ev.preventDefault();
29230         var  cn = dom.className;
29231         //Roo.log(cn);
29232         if (!cn.match(/x-ed-loc-/)) {
29233             return;
29234         }
29235         var n = cn.split('-').pop();
29236         var ans = this.footerEls;
29237         var sel = ans[n];
29238         
29239         this.editorcore.selectNode(sel);
29240         
29241         
29242         this.updateToolbar(null, null, sel);
29243         
29244         
29245     }
29246     
29247     
29248     
29249     
29250     
29251 });
29252
29253
29254
29255
29256
29257 /*
29258  * Based on:
29259  * Ext JS Library 1.1.1
29260  * Copyright(c) 2006-2007, Ext JS, LLC.
29261  *
29262  * Originally Released Under LGPL - original licence link has changed is not relivant.
29263  *
29264  * Fork - LGPL
29265  * <script type="text/javascript">
29266  */
29267  
29268 /**
29269  * @class Roo.form.BasicForm
29270  * @extends Roo.util.Observable
29271  * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
29272  * @constructor
29273  * @param {String/HTMLElement/Roo.Element} el The form element or its id
29274  * @param {Object} config Configuration options
29275  */
29276 Roo.form.BasicForm = function(el, config){
29277     this.allItems = [];
29278     this.childForms = [];
29279     Roo.apply(this, config);
29280     /*
29281      * The Roo.form.Field items in this form.
29282      * @type MixedCollection
29283      */
29284      
29285      
29286     this.items = new Roo.util.MixedCollection(false, function(o){
29287         return o.id || (o.id = Roo.id());
29288     });
29289     this.addEvents({
29290         /**
29291          * @event beforeaction
29292          * Fires before any action is performed. Return false to cancel the action.
29293          * @param {Form} this
29294          * @param {Action} action The action to be performed
29295          */
29296         beforeaction: true,
29297         /**
29298          * @event actionfailed
29299          * Fires when an action fails.
29300          * @param {Form} this
29301          * @param {Action} action The action that failed
29302          */
29303         actionfailed : true,
29304         /**
29305          * @event actioncomplete
29306          * Fires when an action is completed.
29307          * @param {Form} this
29308          * @param {Action} action The action that completed
29309          */
29310         actioncomplete : true
29311     });
29312     if(el){
29313         this.initEl(el);
29314     }
29315     Roo.form.BasicForm.superclass.constructor.call(this);
29316     
29317     Roo.form.BasicForm.popover.apply();
29318 };
29319
29320 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
29321     /**
29322      * @cfg {String} method
29323      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
29324      */
29325     /**
29326      * @cfg {DataReader} reader
29327      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
29328      * This is optional as there is built-in support for processing JSON.
29329      */
29330     /**
29331      * @cfg {DataReader} errorReader
29332      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
29333      * This is completely optional as there is built-in support for processing JSON.
29334      */
29335     /**
29336      * @cfg {String} url
29337      * The URL to use for form actions if one isn't supplied in the action options.
29338      */
29339     /**
29340      * @cfg {Boolean} fileUpload
29341      * Set to true if this form is a file upload.
29342      */
29343      
29344     /**
29345      * @cfg {Object} baseParams
29346      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
29347      */
29348      /**
29349      
29350     /**
29351      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
29352      */
29353     timeout: 30,
29354
29355     // private
29356     activeAction : null,
29357
29358     /**
29359      * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
29360      * or setValues() data instead of when the form was first created.
29361      */
29362     trackResetOnLoad : false,
29363     
29364     
29365     /**
29366      * childForms - used for multi-tab forms
29367      * @type {Array}
29368      */
29369     childForms : false,
29370     
29371     /**
29372      * allItems - full list of fields.
29373      * @type {Array}
29374      */
29375     allItems : false,
29376     
29377     /**
29378      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
29379      * element by passing it or its id or mask the form itself by passing in true.
29380      * @type Mixed
29381      */
29382     waitMsgTarget : false,
29383     
29384     /**
29385      * @type Boolean
29386      */
29387     disableMask : false,
29388     
29389     /**
29390      * @cfg {Boolean} errorMask (true|false) default false
29391      */
29392     errorMask : false,
29393     
29394     /**
29395      * @cfg {Number} maskOffset Default 100
29396      */
29397     maskOffset : 100,
29398
29399     // private
29400     initEl : function(el){
29401         this.el = Roo.get(el);
29402         this.id = this.el.id || Roo.id();
29403         this.el.on('submit', this.onSubmit, this);
29404         this.el.addClass('x-form');
29405     },
29406
29407     // private
29408     onSubmit : function(e){
29409         e.stopEvent();
29410     },
29411
29412     /**
29413      * Returns true if client-side validation on the form is successful.
29414      * @return Boolean
29415      */
29416     isValid : function(){
29417         var valid = true;
29418         var target = false;
29419         this.items.each(function(f){
29420             if(f.validate()){
29421                 return;
29422             }
29423             
29424             valid = false;
29425                 
29426             if(!target && f.el.isVisible(true)){
29427                 target = f;
29428             }
29429         });
29430         
29431         if(this.errorMask && !valid){
29432             Roo.form.BasicForm.popover.mask(this, target);
29433         }
29434         
29435         return valid;
29436     },
29437     /**
29438      * Returns array of invalid form fields.
29439      * @return Array
29440      */
29441     
29442     invalidFields : function()
29443     {
29444         var ret = [];
29445         this.items.each(function(f){
29446             if(f.validate()){
29447                 return;
29448             }
29449             ret.push(f);
29450             
29451         });
29452         
29453         return ret;
29454     },
29455     
29456     
29457     /**
29458      * DEPRICATED Returns true if any fields in this form have changed since their original load. 
29459      * @return Boolean
29460      */
29461     isDirty : function(){
29462         var dirty = false;
29463         this.items.each(function(f){
29464            if(f.isDirty()){
29465                dirty = true;
29466                return false;
29467            }
29468         });
29469         return dirty;
29470     },
29471     
29472     /**
29473      * Returns true if any fields in this form have changed since their original load. (New version)
29474      * @return Boolean
29475      */
29476     
29477     hasChanged : function()
29478     {
29479         var dirty = false;
29480         this.items.each(function(f){
29481            if(f.hasChanged()){
29482                dirty = true;
29483                return false;
29484            }
29485         });
29486         return dirty;
29487         
29488     },
29489     /**
29490      * Resets all hasChanged to 'false' -
29491      * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
29492      * So hasChanged storage is only to be used for this purpose
29493      * @return Boolean
29494      */
29495     resetHasChanged : function()
29496     {
29497         this.items.each(function(f){
29498            f.resetHasChanged();
29499         });
29500         
29501     },
29502     
29503     
29504     /**
29505      * Performs a predefined action (submit or load) or custom actions you define on this form.
29506      * @param {String} actionName The name of the action type
29507      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
29508      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
29509      * accept other config options):
29510      * <pre>
29511 Property          Type             Description
29512 ----------------  ---------------  ----------------------------------------------------------------------------------
29513 url               String           The url for the action (defaults to the form's url)
29514 method            String           The form method to use (defaults to the form's method, or POST if not defined)
29515 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
29516 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
29517                                    validate the form on the client (defaults to false)
29518      * </pre>
29519      * @return {BasicForm} this
29520      */
29521     doAction : function(action, options){
29522         if(typeof action == 'string'){
29523             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
29524         }
29525         if(this.fireEvent('beforeaction', this, action) !== false){
29526             this.beforeAction(action);
29527             action.run.defer(100, action);
29528         }
29529         return this;
29530     },
29531
29532     /**
29533      * Shortcut to do a submit action.
29534      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
29535      * @return {BasicForm} this
29536      */
29537     submit : function(options){
29538         this.doAction('submit', options);
29539         return this;
29540     },
29541
29542     /**
29543      * Shortcut to do a load action.
29544      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
29545      * @return {BasicForm} this
29546      */
29547     load : function(options){
29548         this.doAction('load', options);
29549         return this;
29550     },
29551
29552     /**
29553      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
29554      * @param {Record} record The record to edit
29555      * @return {BasicForm} this
29556      */
29557     updateRecord : function(record){
29558         record.beginEdit();
29559         var fs = record.fields;
29560         fs.each(function(f){
29561             var field = this.findField(f.name);
29562             if(field){
29563                 record.set(f.name, field.getValue());
29564             }
29565         }, this);
29566         record.endEdit();
29567         return this;
29568     },
29569
29570     /**
29571      * Loads an Roo.data.Record into this form.
29572      * @param {Record} record The record to load
29573      * @return {BasicForm} this
29574      */
29575     loadRecord : function(record){
29576         this.setValues(record.data);
29577         return this;
29578     },
29579
29580     // private
29581     beforeAction : function(action){
29582         var o = action.options;
29583         
29584         if(!this.disableMask) {
29585             if(this.waitMsgTarget === true){
29586                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
29587             }else if(this.waitMsgTarget){
29588                 this.waitMsgTarget = Roo.get(this.waitMsgTarget);
29589                 this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
29590             }else {
29591                 Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
29592             }
29593         }
29594         
29595          
29596     },
29597
29598     // private
29599     afterAction : function(action, success){
29600         this.activeAction = null;
29601         var o = action.options;
29602         
29603         if(!this.disableMask) {
29604             if(this.waitMsgTarget === true){
29605                 this.el.unmask();
29606             }else if(this.waitMsgTarget){
29607                 this.waitMsgTarget.unmask();
29608             }else{
29609                 Roo.MessageBox.updateProgress(1);
29610                 Roo.MessageBox.hide();
29611             }
29612         }
29613         
29614         if(success){
29615             if(o.reset){
29616                 this.reset();
29617             }
29618             Roo.callback(o.success, o.scope, [this, action]);
29619             this.fireEvent('actioncomplete', this, action);
29620             
29621         }else{
29622             
29623             // failure condition..
29624             // we have a scenario where updates need confirming.
29625             // eg. if a locking scenario exists..
29626             // we look for { errors : { needs_confirm : true }} in the response.
29627             if (
29628                 (typeof(action.result) != 'undefined')  &&
29629                 (typeof(action.result.errors) != 'undefined')  &&
29630                 (typeof(action.result.errors.needs_confirm) != 'undefined')
29631            ){
29632                 var _t = this;
29633                 Roo.MessageBox.confirm(
29634                     "Change requires confirmation",
29635                     action.result.errorMsg,
29636                     function(r) {
29637                         if (r != 'yes') {
29638                             return;
29639                         }
29640                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
29641                     }
29642                     
29643                 );
29644                 
29645                 
29646                 
29647                 return;
29648             }
29649             
29650             Roo.callback(o.failure, o.scope, [this, action]);
29651             // show an error message if no failed handler is set..
29652             if (!this.hasListener('actionfailed')) {
29653                 Roo.MessageBox.alert("Error",
29654                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
29655                         action.result.errorMsg :
29656                         "Saving Failed, please check your entries or try again"
29657                 );
29658             }
29659             
29660             this.fireEvent('actionfailed', this, action);
29661         }
29662         
29663     },
29664
29665     /**
29666      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
29667      * @param {String} id The value to search for
29668      * @return Field
29669      */
29670     findField : function(id){
29671         var field = this.items.get(id);
29672         if(!field){
29673             this.items.each(function(f){
29674                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
29675                     field = f;
29676                     return false;
29677                 }
29678             });
29679         }
29680         return field || null;
29681     },
29682
29683     /**
29684      * Add a secondary form to this one, 
29685      * Used to provide tabbed forms. One form is primary, with hidden values 
29686      * which mirror the elements from the other forms.
29687      * 
29688      * @param {Roo.form.Form} form to add.
29689      * 
29690      */
29691     addForm : function(form)
29692     {
29693        
29694         if (this.childForms.indexOf(form) > -1) {
29695             // already added..
29696             return;
29697         }
29698         this.childForms.push(form);
29699         var n = '';
29700         Roo.each(form.allItems, function (fe) {
29701             
29702             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
29703             if (this.findField(n)) { // already added..
29704                 return;
29705             }
29706             var add = new Roo.form.Hidden({
29707                 name : n
29708             });
29709             add.render(this.el);
29710             
29711             this.add( add );
29712         }, this);
29713         
29714     },
29715     /**
29716      * Mark fields in this form invalid in bulk.
29717      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
29718      * @return {BasicForm} this
29719      */
29720     markInvalid : function(errors){
29721         if(errors instanceof Array){
29722             for(var i = 0, len = errors.length; i < len; i++){
29723                 var fieldError = errors[i];
29724                 var f = this.findField(fieldError.id);
29725                 if(f){
29726                     f.markInvalid(fieldError.msg);
29727                 }
29728             }
29729         }else{
29730             var field, id;
29731             for(id in errors){
29732                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
29733                     field.markInvalid(errors[id]);
29734                 }
29735             }
29736         }
29737         Roo.each(this.childForms || [], function (f) {
29738             f.markInvalid(errors);
29739         });
29740         
29741         return this;
29742     },
29743
29744     /**
29745      * Set values for fields in this form in bulk.
29746      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
29747      * @return {BasicForm} this
29748      */
29749     setValues : function(values){
29750         if(values instanceof Array){ // array of objects
29751             for(var i = 0, len = values.length; i < len; i++){
29752                 var v = values[i];
29753                 var f = this.findField(v.id);
29754                 if(f){
29755                     f.setValue(v.value);
29756                     if(this.trackResetOnLoad){
29757                         f.originalValue = f.getValue();
29758                     }
29759                 }
29760             }
29761         }else{ // object hash
29762             var field, id;
29763             for(id in values){
29764                 if(typeof values[id] != 'function' && (field = this.findField(id))){
29765                     
29766                     if (field.setFromData && 
29767                         field.valueField && 
29768                         field.displayField &&
29769                         // combos' with local stores can 
29770                         // be queried via setValue()
29771                         // to set their value..
29772                         (field.store && !field.store.isLocal)
29773                         ) {
29774                         // it's a combo
29775                         var sd = { };
29776                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
29777                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
29778                         field.setFromData(sd);
29779                         
29780                     } else {
29781                         field.setValue(values[id]);
29782                     }
29783                     
29784                     
29785                     if(this.trackResetOnLoad){
29786                         field.originalValue = field.getValue();
29787                     }
29788                 }
29789             }
29790         }
29791         this.resetHasChanged();
29792         
29793         
29794         Roo.each(this.childForms || [], function (f) {
29795             f.setValues(values);
29796             f.resetHasChanged();
29797         });
29798                 
29799         return this;
29800     },
29801  
29802     /**
29803      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
29804      * they are returned as an array.
29805      * @param {Boolean} asString
29806      * @return {Object}
29807      */
29808     getValues : function(asString)
29809     {
29810         if (this.childForms) {
29811             // copy values from the child forms
29812             Roo.each(this.childForms, function (f) {
29813                 this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
29814             }, this);
29815         }
29816         
29817         // use formdata
29818         if (typeof(FormData) != 'undefined' && asString !== true) {
29819             // this relies on a 'recent' version of chrome apparently...
29820             try {
29821                 var fd = (new FormData(this.el.dom)).entries();
29822                 var ret = {};
29823                 var ent = fd.next();
29824                 while (!ent.done) {
29825                     ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
29826                     ent = fd.next();
29827                 };
29828                 return ret;
29829             } catch(e) {
29830                 
29831             }
29832             
29833         }
29834         
29835         
29836         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
29837         if(asString === true){
29838             return fs;
29839         }
29840         return Roo.urlDecode(fs);
29841     },
29842     
29843     /**
29844      * Returns the fields in this form as an object with key/value pairs. 
29845      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
29846      * Normally this will not return readOnly data 
29847      * @param {Boolean} with_readonly return readonly field data.
29848      * @return {Object}
29849      */
29850     getFieldValues : function(with_readonly)
29851     {
29852         if (this.childForms) {
29853             // copy values from the child forms
29854             // should this call getFieldValues - probably not as we do not currently copy
29855             // hidden fields when we generate..
29856             Roo.each(this.childForms, function (f) {
29857                 this.setValues(f.getFieldValues());
29858             }, this);
29859         }
29860         
29861         var ret = {};
29862         this.items.each(function(f){
29863             
29864             if (f.readOnly && with_readonly !== true) {
29865                 return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
29866                         // if a subform contains a copy of them.
29867                         // if you have subforms with the same editable data, you will need to copy the data back
29868                         // and forth.
29869             }
29870             
29871             if (!f.getName()) {
29872                 return;
29873             }
29874             var v = f.getValue();
29875             if (f.inputType =='radio') {
29876                 if (typeof(ret[f.getName()]) == 'undefined') {
29877                     ret[f.getName()] = ''; // empty..
29878                 }
29879                 
29880                 if (!f.el.dom.checked) {
29881                     return;
29882                     
29883                 }
29884                 v = f.el.dom.value;
29885                 
29886             }
29887             
29888             // not sure if this supported any more..
29889             if ((typeof(v) == 'object') && f.getRawValue) {
29890                 v = f.getRawValue() ; // dates..
29891             }
29892             // combo boxes where name != hiddenName...
29893             if (f.name != f.getName()) {
29894                 ret[f.name] = f.getRawValue();
29895             }
29896             ret[f.getName()] = v;
29897         });
29898         
29899         return ret;
29900     },
29901
29902     /**
29903      * Clears all invalid messages in this form.
29904      * @return {BasicForm} this
29905      */
29906     clearInvalid : function(){
29907         this.items.each(function(f){
29908            f.clearInvalid();
29909         });
29910         
29911         Roo.each(this.childForms || [], function (f) {
29912             f.clearInvalid();
29913         });
29914         
29915         
29916         return this;
29917     },
29918
29919     /**
29920      * Resets this form.
29921      * @return {BasicForm} this
29922      */
29923     reset : function(){
29924         this.items.each(function(f){
29925             f.reset();
29926         });
29927         
29928         Roo.each(this.childForms || [], function (f) {
29929             f.reset();
29930         });
29931         this.resetHasChanged();
29932         
29933         return this;
29934     },
29935
29936     /**
29937      * Add Roo.form components to this form.
29938      * @param {Field} field1
29939      * @param {Field} field2 (optional)
29940      * @param {Field} etc (optional)
29941      * @return {BasicForm} this
29942      */
29943     add : function(){
29944         this.items.addAll(Array.prototype.slice.call(arguments, 0));
29945         return this;
29946     },
29947
29948
29949     /**
29950      * Removes a field from the items collection (does NOT remove its markup).
29951      * @param {Field} field
29952      * @return {BasicForm} this
29953      */
29954     remove : function(field){
29955         this.items.remove(field);
29956         return this;
29957     },
29958
29959     /**
29960      * Looks at the fields in this form, checks them for an id attribute,
29961      * and calls applyTo on the existing dom element with that id.
29962      * @return {BasicForm} this
29963      */
29964     render : function(){
29965         this.items.each(function(f){
29966             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
29967                 f.applyTo(f.id);
29968             }
29969         });
29970         return this;
29971     },
29972
29973     /**
29974      * Calls {@link Ext#apply} for all fields in this form with the passed object.
29975      * @param {Object} values
29976      * @return {BasicForm} this
29977      */
29978     applyToFields : function(o){
29979         this.items.each(function(f){
29980            Roo.apply(f, o);
29981         });
29982         return this;
29983     },
29984
29985     /**
29986      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
29987      * @param {Object} values
29988      * @return {BasicForm} this
29989      */
29990     applyIfToFields : function(o){
29991         this.items.each(function(f){
29992            Roo.applyIf(f, o);
29993         });
29994         return this;
29995     }
29996 });
29997
29998 // back compat
29999 Roo.BasicForm = Roo.form.BasicForm;
30000
30001 Roo.apply(Roo.form.BasicForm, {
30002     
30003     popover : {
30004         
30005         padding : 5,
30006         
30007         isApplied : false,
30008         
30009         isMasked : false,
30010         
30011         form : false,
30012         
30013         target : false,
30014         
30015         intervalID : false,
30016         
30017         maskEl : false,
30018         
30019         apply : function()
30020         {
30021             if(this.isApplied){
30022                 return;
30023             }
30024             
30025             this.maskEl = {
30026                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
30027                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
30028                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
30029                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
30030             };
30031             
30032             this.maskEl.top.enableDisplayMode("block");
30033             this.maskEl.left.enableDisplayMode("block");
30034             this.maskEl.bottom.enableDisplayMode("block");
30035             this.maskEl.right.enableDisplayMode("block");
30036             
30037             Roo.get(document.body).on('click', function(){
30038                 this.unmask();
30039             }, this);
30040             
30041             Roo.get(document.body).on('touchstart', function(){
30042                 this.unmask();
30043             }, this);
30044             
30045             this.isApplied = true
30046         },
30047         
30048         mask : function(form, target)
30049         {
30050             this.form = form;
30051             
30052             this.target = target;
30053             
30054             if(!this.form.errorMask || !target.el){
30055                 return;
30056             }
30057             
30058             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
30059             
30060             var ot = this.target.el.calcOffsetsTo(scrollable);
30061             
30062             var scrollTo = ot[1] - this.form.maskOffset;
30063             
30064             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
30065             
30066             scrollable.scrollTo('top', scrollTo);
30067             
30068             var el = this.target.wrap || this.target.el;
30069             
30070             var box = el.getBox();
30071             
30072             this.maskEl.top.setStyle('position', 'absolute');
30073             this.maskEl.top.setStyle('z-index', 10000);
30074             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
30075             this.maskEl.top.setLeft(0);
30076             this.maskEl.top.setTop(0);
30077             this.maskEl.top.show();
30078             
30079             this.maskEl.left.setStyle('position', 'absolute');
30080             this.maskEl.left.setStyle('z-index', 10000);
30081             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
30082             this.maskEl.left.setLeft(0);
30083             this.maskEl.left.setTop(box.y - this.padding);
30084             this.maskEl.left.show();
30085
30086             this.maskEl.bottom.setStyle('position', 'absolute');
30087             this.maskEl.bottom.setStyle('z-index', 10000);
30088             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
30089             this.maskEl.bottom.setLeft(0);
30090             this.maskEl.bottom.setTop(box.bottom + this.padding);
30091             this.maskEl.bottom.show();
30092
30093             this.maskEl.right.setStyle('position', 'absolute');
30094             this.maskEl.right.setStyle('z-index', 10000);
30095             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
30096             this.maskEl.right.setLeft(box.right + this.padding);
30097             this.maskEl.right.setTop(box.y - this.padding);
30098             this.maskEl.right.show();
30099
30100             this.intervalID = window.setInterval(function() {
30101                 Roo.form.BasicForm.popover.unmask();
30102             }, 10000);
30103
30104             window.onwheel = function(){ return false;};
30105             
30106             (function(){ this.isMasked = true; }).defer(500, this);
30107             
30108         },
30109         
30110         unmask : function()
30111         {
30112             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
30113                 return;
30114             }
30115             
30116             this.maskEl.top.setStyle('position', 'absolute');
30117             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
30118             this.maskEl.top.hide();
30119
30120             this.maskEl.left.setStyle('position', 'absolute');
30121             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
30122             this.maskEl.left.hide();
30123
30124             this.maskEl.bottom.setStyle('position', 'absolute');
30125             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
30126             this.maskEl.bottom.hide();
30127
30128             this.maskEl.right.setStyle('position', 'absolute');
30129             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
30130             this.maskEl.right.hide();
30131             
30132             window.onwheel = function(){ return true;};
30133             
30134             if(this.intervalID){
30135                 window.clearInterval(this.intervalID);
30136                 this.intervalID = false;
30137             }
30138             
30139             this.isMasked = false;
30140             
30141         }
30142         
30143     }
30144     
30145 });/*
30146  * Based on:
30147  * Ext JS Library 1.1.1
30148  * Copyright(c) 2006-2007, Ext JS, LLC.
30149  *
30150  * Originally Released Under LGPL - original licence link has changed is not relivant.
30151  *
30152  * Fork - LGPL
30153  * <script type="text/javascript">
30154  */
30155
30156 /**
30157  * @class Roo.form.Form
30158  * @extends Roo.form.BasicForm
30159  * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
30160  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
30161  * @constructor
30162  * @param {Object} config Configuration options
30163  */
30164 Roo.form.Form = function(config){
30165     var xitems =  [];
30166     if (config.items) {
30167         xitems = config.items;
30168         delete config.items;
30169     }
30170    
30171     
30172     Roo.form.Form.superclass.constructor.call(this, null, config);
30173     this.url = this.url || this.action;
30174     if(!this.root){
30175         this.root = new Roo.form.Layout(Roo.applyIf({
30176             id: Roo.id()
30177         }, config));
30178     }
30179     this.active = this.root;
30180     /**
30181      * Array of all the buttons that have been added to this form via {@link addButton}
30182      * @type Array
30183      */
30184     this.buttons = [];
30185     this.allItems = [];
30186     this.addEvents({
30187         /**
30188          * @event clientvalidation
30189          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
30190          * @param {Form} this
30191          * @param {Boolean} valid true if the form has passed client-side validation
30192          */
30193         clientvalidation: true,
30194         /**
30195          * @event rendered
30196          * Fires when the form is rendered
30197          * @param {Roo.form.Form} form
30198          */
30199         rendered : true
30200     });
30201     
30202     if (this.progressUrl) {
30203             // push a hidden field onto the list of fields..
30204             this.addxtype( {
30205                     xns: Roo.form, 
30206                     xtype : 'Hidden', 
30207                     name : 'UPLOAD_IDENTIFIER' 
30208             });
30209         }
30210         
30211     
30212     Roo.each(xitems, this.addxtype, this);
30213     
30214 };
30215
30216 Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
30217      /**
30218      * @cfg {Roo.Button} buttons[] buttons at bottom of form
30219      */
30220     
30221     /**
30222      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
30223      */
30224     /**
30225      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
30226      */
30227     /**
30228      * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
30229      */
30230     buttonAlign:'center',
30231
30232     /**
30233      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
30234      */
30235     minButtonWidth:75,
30236
30237     /**
30238      * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
30239      * This property cascades to child containers if not set.
30240      */
30241     labelAlign:'left',
30242
30243     /**
30244      * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
30245      * fires a looping event with that state. This is required to bind buttons to the valid
30246      * state using the config value formBind:true on the button.
30247      */
30248     monitorValid : false,
30249
30250     /**
30251      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
30252      */
30253     monitorPoll : 200,
30254     
30255     /**
30256      * @cfg {String} progressUrl - Url to return progress data 
30257      */
30258     
30259     progressUrl : false,
30260     /**
30261      * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
30262      * sending a formdata with extra parameters - eg uploaded elements.
30263      */
30264     
30265     formData : false,
30266     
30267     /**
30268      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
30269      * fields are added and the column is closed. If no fields are passed the column remains open
30270      * until end() is called.
30271      * @param {Object} config The config to pass to the column
30272      * @param {Field} field1 (optional)
30273      * @param {Field} field2 (optional)
30274      * @param {Field} etc (optional)
30275      * @return Column The column container object
30276      */
30277     column : function(c){
30278         var col = new Roo.form.Column(c);
30279         this.start(col);
30280         if(arguments.length > 1){ // duplicate code required because of Opera
30281             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
30282             this.end();
30283         }
30284         return col;
30285     },
30286
30287     /**
30288      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
30289      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
30290      * until end() is called.
30291      * @param {Object} config The config to pass to the fieldset
30292      * @param {Field} field1 (optional)
30293      * @param {Field} field2 (optional)
30294      * @param {Field} etc (optional)
30295      * @return FieldSet The fieldset container object
30296      */
30297     fieldset : function(c){
30298         var fs = new Roo.form.FieldSet(c);
30299         this.start(fs);
30300         if(arguments.length > 1){ // duplicate code required because of Opera
30301             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
30302             this.end();
30303         }
30304         return fs;
30305     },
30306
30307     /**
30308      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
30309      * fields are added and the container is closed. If no fields are passed the container remains open
30310      * until end() is called.
30311      * @param {Object} config The config to pass to the Layout
30312      * @param {Field} field1 (optional)
30313      * @param {Field} field2 (optional)
30314      * @param {Field} etc (optional)
30315      * @return Layout The container object
30316      */
30317     container : function(c){
30318         var l = new Roo.form.Layout(c);
30319         this.start(l);
30320         if(arguments.length > 1){ // duplicate code required because of Opera
30321             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
30322             this.end();
30323         }
30324         return l;
30325     },
30326
30327     /**
30328      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
30329      * @param {Object} container A Roo.form.Layout or subclass of Layout
30330      * @return {Form} this
30331      */
30332     start : function(c){
30333         // cascade label info
30334         Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
30335         this.active.stack.push(c);
30336         c.ownerCt = this.active;
30337         this.active = c;
30338         return this;
30339     },
30340
30341     /**
30342      * Closes the current open container
30343      * @return {Form} this
30344      */
30345     end : function(){
30346         if(this.active == this.root){
30347             return this;
30348         }
30349         this.active = this.active.ownerCt;
30350         return this;
30351     },
30352
30353     /**
30354      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
30355      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
30356      * as the label of the field.
30357      * @param {Field} field1
30358      * @param {Field} field2 (optional)
30359      * @param {Field} etc. (optional)
30360      * @return {Form} this
30361      */
30362     add : function(){
30363         this.active.stack.push.apply(this.active.stack, arguments);
30364         this.allItems.push.apply(this.allItems,arguments);
30365         var r = [];
30366         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
30367             if(a[i].isFormField){
30368                 r.push(a[i]);
30369             }
30370         }
30371         if(r.length > 0){
30372             Roo.form.Form.superclass.add.apply(this, r);
30373         }
30374         return this;
30375     },
30376     
30377
30378     
30379     
30380     
30381      /**
30382      * Find any element that has been added to a form, using it's ID or name
30383      * This can include framesets, columns etc. along with regular fields..
30384      * @param {String} id - id or name to find.
30385      
30386      * @return {Element} e - or false if nothing found.
30387      */
30388     findbyId : function(id)
30389     {
30390         var ret = false;
30391         if (!id) {
30392             return ret;
30393         }
30394         Roo.each(this.allItems, function(f){
30395             if (f.id == id || f.name == id ){
30396                 ret = f;
30397                 return false;
30398             }
30399         });
30400         return ret;
30401     },
30402
30403     
30404     
30405     /**
30406      * Render this form into the passed container. This should only be called once!
30407      * @param {String/HTMLElement/Element} container The element this component should be rendered into
30408      * @return {Form} this
30409      */
30410     render : function(ct)
30411     {
30412         
30413         
30414         
30415         ct = Roo.get(ct);
30416         var o = this.autoCreate || {
30417             tag: 'form',
30418             method : this.method || 'POST',
30419             id : this.id || Roo.id()
30420         };
30421         this.initEl(ct.createChild(o));
30422
30423         this.root.render(this.el);
30424         
30425        
30426              
30427         this.items.each(function(f){
30428             f.render('x-form-el-'+f.id);
30429         });
30430
30431         if(this.buttons.length > 0){
30432             // tables are required to maintain order and for correct IE layout
30433             var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
30434                 cls:"x-form-btns x-form-btns-"+this.buttonAlign,
30435                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
30436             }}, null, true);
30437             var tr = tb.getElementsByTagName('tr')[0];
30438             for(var i = 0, len = this.buttons.length; i < len; i++) {
30439                 var b = this.buttons[i];
30440                 var td = document.createElement('td');
30441                 td.className = 'x-form-btn-td';
30442                 b.render(tr.appendChild(td));
30443             }
30444         }
30445         if(this.monitorValid){ // initialize after render
30446             this.startMonitoring();
30447         }
30448         this.fireEvent('rendered', this);
30449         return this;
30450     },
30451
30452     /**
30453      * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
30454      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
30455      * object or a valid Roo.DomHelper element config
30456      * @param {Function} handler The function called when the button is clicked
30457      * @param {Object} scope (optional) The scope of the handler function
30458      * @return {Roo.Button}
30459      */
30460     addButton : function(config, handler, scope){
30461         var bc = {
30462             handler: handler,
30463             scope: scope,
30464             minWidth: this.minButtonWidth,
30465             hideParent:true
30466         };
30467         if(typeof config == "string"){
30468             bc.text = config;
30469         }else{
30470             Roo.apply(bc, config);
30471         }
30472         var btn = new Roo.Button(null, bc);
30473         this.buttons.push(btn);
30474         return btn;
30475     },
30476
30477      /**
30478      * Adds a series of form elements (using the xtype property as the factory method.
30479      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
30480      * @param {Object} config 
30481      */
30482     
30483     addxtype : function()
30484     {
30485         var ar = Array.prototype.slice.call(arguments, 0);
30486         var ret = false;
30487         for(var i = 0; i < ar.length; i++) {
30488             if (!ar[i]) {
30489                 continue; // skip -- if this happends something invalid got sent, we 
30490                 // should ignore it, as basically that interface element will not show up
30491                 // and that should be pretty obvious!!
30492             }
30493             
30494             if (Roo.form[ar[i].xtype]) {
30495                 ar[i].form = this;
30496                 var fe = Roo.factory(ar[i], Roo.form);
30497                 if (!ret) {
30498                     ret = fe;
30499                 }
30500                 fe.form = this;
30501                 if (fe.store) {
30502                     fe.store.form = this;
30503                 }
30504                 if (fe.isLayout) {  
30505                          
30506                     this.start(fe);
30507                     this.allItems.push(fe);
30508                     if (fe.items && fe.addxtype) {
30509                         fe.addxtype.apply(fe, fe.items);
30510                         delete fe.items;
30511                     }
30512                      this.end();
30513                     continue;
30514                 }
30515                 
30516                 
30517                  
30518                 this.add(fe);
30519               //  console.log('adding ' + ar[i].xtype);
30520             }
30521             if (ar[i].xtype == 'Button') {  
30522                 //console.log('adding button');
30523                 //console.log(ar[i]);
30524                 this.addButton(ar[i]);
30525                 this.allItems.push(fe);
30526                 continue;
30527             }
30528             
30529             if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
30530                 alert('end is not supported on xtype any more, use items');
30531             //    this.end();
30532             //    //console.log('adding end');
30533             }
30534             
30535         }
30536         return ret;
30537     },
30538     
30539     /**
30540      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
30541      * option "monitorValid"
30542      */
30543     startMonitoring : function(){
30544         if(!this.bound){
30545             this.bound = true;
30546             Roo.TaskMgr.start({
30547                 run : this.bindHandler,
30548                 interval : this.monitorPoll || 200,
30549                 scope: this
30550             });
30551         }
30552     },
30553
30554     /**
30555      * Stops monitoring of the valid state of this form
30556      */
30557     stopMonitoring : function(){
30558         this.bound = false;
30559     },
30560
30561     // private
30562     bindHandler : function(){
30563         if(!this.bound){
30564             return false; // stops binding
30565         }
30566         var valid = true;
30567         this.items.each(function(f){
30568             if(!f.isValid(true)){
30569                 valid = false;
30570                 return false;
30571             }
30572         });
30573         for(var i = 0, len = this.buttons.length; i < len; i++){
30574             var btn = this.buttons[i];
30575             if(btn.formBind === true && btn.disabled === valid){
30576                 btn.setDisabled(!valid);
30577             }
30578         }
30579         this.fireEvent('clientvalidation', this, valid);
30580     }
30581     
30582     
30583     
30584     
30585     
30586     
30587     
30588     
30589 });
30590
30591
30592 // back compat
30593 Roo.Form = Roo.form.Form;
30594 /*
30595  * Based on:
30596  * Ext JS Library 1.1.1
30597  * Copyright(c) 2006-2007, Ext JS, LLC.
30598  *
30599  * Originally Released Under LGPL - original licence link has changed is not relivant.
30600  *
30601  * Fork - LGPL
30602  * <script type="text/javascript">
30603  */
30604
30605 // as we use this in bootstrap.
30606 Roo.namespace('Roo.form');
30607  /**
30608  * @class Roo.form.Action
30609  * Internal Class used to handle form actions
30610  * @constructor
30611  * @param {Roo.form.BasicForm} el The form element or its id
30612  * @param {Object} config Configuration options
30613  */
30614
30615  
30616  
30617 // define the action interface
30618 Roo.form.Action = function(form, options){
30619     this.form = form;
30620     this.options = options || {};
30621 };
30622 /**
30623  * Client Validation Failed
30624  * @const 
30625  */
30626 Roo.form.Action.CLIENT_INVALID = 'client';
30627 /**
30628  * Server Validation Failed
30629  * @const 
30630  */
30631 Roo.form.Action.SERVER_INVALID = 'server';
30632  /**
30633  * Connect to Server Failed
30634  * @const 
30635  */
30636 Roo.form.Action.CONNECT_FAILURE = 'connect';
30637 /**
30638  * Reading Data from Server Failed
30639  * @const 
30640  */
30641 Roo.form.Action.LOAD_FAILURE = 'load';
30642
30643 Roo.form.Action.prototype = {
30644     type : 'default',
30645     failureType : undefined,
30646     response : undefined,
30647     result : undefined,
30648
30649     // interface method
30650     run : function(options){
30651
30652     },
30653
30654     // interface method
30655     success : function(response){
30656
30657     },
30658
30659     // interface method
30660     handleResponse : function(response){
30661
30662     },
30663
30664     // default connection failure
30665     failure : function(response){
30666         
30667         this.response = response;
30668         this.failureType = Roo.form.Action.CONNECT_FAILURE;
30669         this.form.afterAction(this, false);
30670     },
30671
30672     processResponse : function(response){
30673         this.response = response;
30674         if(!response.responseText){
30675             return true;
30676         }
30677         this.result = this.handleResponse(response);
30678         return this.result;
30679     },
30680
30681     // utility functions used internally
30682     getUrl : function(appendParams){
30683         var url = this.options.url || this.form.url || this.form.el.dom.action;
30684         if(appendParams){
30685             var p = this.getParams();
30686             if(p){
30687                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
30688             }
30689         }
30690         return url;
30691     },
30692
30693     getMethod : function(){
30694         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
30695     },
30696
30697     getParams : function(){
30698         var bp = this.form.baseParams;
30699         var p = this.options.params;
30700         if(p){
30701             if(typeof p == "object"){
30702                 p = Roo.urlEncode(Roo.applyIf(p, bp));
30703             }else if(typeof p == 'string' && bp){
30704                 p += '&' + Roo.urlEncode(bp);
30705             }
30706         }else if(bp){
30707             p = Roo.urlEncode(bp);
30708         }
30709         return p;
30710     },
30711
30712     createCallback : function(){
30713         return {
30714             success: this.success,
30715             failure: this.failure,
30716             scope: this,
30717             timeout: (this.form.timeout*1000),
30718             upload: this.form.fileUpload ? this.success : undefined
30719         };
30720     }
30721 };
30722
30723 Roo.form.Action.Submit = function(form, options){
30724     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
30725 };
30726
30727 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
30728     type : 'submit',
30729
30730     haveProgress : false,
30731     uploadComplete : false,
30732     
30733     // uploadProgress indicator.
30734     uploadProgress : function()
30735     {
30736         if (!this.form.progressUrl) {
30737             return;
30738         }
30739         
30740         if (!this.haveProgress) {
30741             Roo.MessageBox.progress("Uploading", "Uploading");
30742         }
30743         if (this.uploadComplete) {
30744            Roo.MessageBox.hide();
30745            return;
30746         }
30747         
30748         this.haveProgress = true;
30749    
30750         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
30751         
30752         var c = new Roo.data.Connection();
30753         c.request({
30754             url : this.form.progressUrl,
30755             params: {
30756                 id : uid
30757             },
30758             method: 'GET',
30759             success : function(req){
30760                //console.log(data);
30761                 var rdata = false;
30762                 var edata;
30763                 try  {
30764                    rdata = Roo.decode(req.responseText)
30765                 } catch (e) {
30766                     Roo.log("Invalid data from server..");
30767                     Roo.log(edata);
30768                     return;
30769                 }
30770                 if (!rdata || !rdata.success) {
30771                     Roo.log(rdata);
30772                     Roo.MessageBox.alert(Roo.encode(rdata));
30773                     return;
30774                 }
30775                 var data = rdata.data;
30776                 
30777                 if (this.uploadComplete) {
30778                    Roo.MessageBox.hide();
30779                    return;
30780                 }
30781                    
30782                 if (data){
30783                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
30784                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
30785                     );
30786                 }
30787                 this.uploadProgress.defer(2000,this);
30788             },
30789        
30790             failure: function(data) {
30791                 Roo.log('progress url failed ');
30792                 Roo.log(data);
30793             },
30794             scope : this
30795         });
30796            
30797     },
30798     
30799     
30800     run : function()
30801     {
30802         // run get Values on the form, so it syncs any secondary forms.
30803         this.form.getValues();
30804         
30805         var o = this.options;
30806         var method = this.getMethod();
30807         var isPost = method == 'POST';
30808         if(o.clientValidation === false || this.form.isValid()){
30809             
30810             if (this.form.progressUrl) {
30811                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
30812                     (new Date() * 1) + '' + Math.random());
30813                     
30814             } 
30815             
30816             
30817             Roo.Ajax.request(Roo.apply(this.createCallback(), {
30818                 form:this.form.el.dom,
30819                 url:this.getUrl(!isPost),
30820                 method: method,
30821                 params:isPost ? this.getParams() : null,
30822                 isUpload: this.form.fileUpload,
30823                 formData : this.form.formData
30824             }));
30825             
30826             this.uploadProgress();
30827
30828         }else if (o.clientValidation !== false){ // client validation failed
30829             this.failureType = Roo.form.Action.CLIENT_INVALID;
30830             this.form.afterAction(this, false);
30831         }
30832     },
30833
30834     success : function(response)
30835     {
30836         this.uploadComplete= true;
30837         if (this.haveProgress) {
30838             Roo.MessageBox.hide();
30839         }
30840         
30841         
30842         var result = this.processResponse(response);
30843         if(result === true || result.success){
30844             this.form.afterAction(this, true);
30845             return;
30846         }
30847         if(result.errors){
30848             this.form.markInvalid(result.errors);
30849             this.failureType = Roo.form.Action.SERVER_INVALID;
30850         }
30851         this.form.afterAction(this, false);
30852     },
30853     failure : function(response)
30854     {
30855         this.uploadComplete= true;
30856         if (this.haveProgress) {
30857             Roo.MessageBox.hide();
30858         }
30859         
30860         this.response = response;
30861         this.failureType = Roo.form.Action.CONNECT_FAILURE;
30862         this.form.afterAction(this, false);
30863     },
30864     
30865     handleResponse : function(response){
30866         if(this.form.errorReader){
30867             var rs = this.form.errorReader.read(response);
30868             var errors = [];
30869             if(rs.records){
30870                 for(var i = 0, len = rs.records.length; i < len; i++) {
30871                     var r = rs.records[i];
30872                     errors[i] = r.data;
30873                 }
30874             }
30875             if(errors.length < 1){
30876                 errors = null;
30877             }
30878             return {
30879                 success : rs.success,
30880                 errors : errors
30881             };
30882         }
30883         var ret = false;
30884         try {
30885             ret = Roo.decode(response.responseText);
30886         } catch (e) {
30887             ret = {
30888                 success: false,
30889                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
30890                 errors : []
30891             };
30892         }
30893         return ret;
30894         
30895     }
30896 });
30897
30898
30899 Roo.form.Action.Load = function(form, options){
30900     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
30901     this.reader = this.form.reader;
30902 };
30903
30904 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
30905     type : 'load',
30906
30907     run : function(){
30908         
30909         Roo.Ajax.request(Roo.apply(
30910                 this.createCallback(), {
30911                     method:this.getMethod(),
30912                     url:this.getUrl(false),
30913                     params:this.getParams()
30914         }));
30915     },
30916
30917     success : function(response){
30918         
30919         var result = this.processResponse(response);
30920         if(result === true || !result.success || !result.data){
30921             this.failureType = Roo.form.Action.LOAD_FAILURE;
30922             this.form.afterAction(this, false);
30923             return;
30924         }
30925         this.form.clearInvalid();
30926         this.form.setValues(result.data);
30927         this.form.afterAction(this, true);
30928     },
30929
30930     handleResponse : function(response){
30931         if(this.form.reader){
30932             var rs = this.form.reader.read(response);
30933             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
30934             return {
30935                 success : rs.success,
30936                 data : data
30937             };
30938         }
30939         return Roo.decode(response.responseText);
30940     }
30941 });
30942
30943 Roo.form.Action.ACTION_TYPES = {
30944     'load' : Roo.form.Action.Load,
30945     'submit' : Roo.form.Action.Submit
30946 };/*
30947  * Based on:
30948  * Ext JS Library 1.1.1
30949  * Copyright(c) 2006-2007, Ext JS, LLC.
30950  *
30951  * Originally Released Under LGPL - original licence link has changed is not relivant.
30952  *
30953  * Fork - LGPL
30954  * <script type="text/javascript">
30955  */
30956  
30957 /**
30958  * @class Roo.form.Layout
30959  * @extends Roo.Component
30960  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
30961  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
30962  * @constructor
30963  * @param {Object} config Configuration options
30964  */
30965 Roo.form.Layout = function(config){
30966     var xitems = [];
30967     if (config.items) {
30968         xitems = config.items;
30969         delete config.items;
30970     }
30971     Roo.form.Layout.superclass.constructor.call(this, config);
30972     this.stack = [];
30973     Roo.each(xitems, this.addxtype, this);
30974      
30975 };
30976
30977 Roo.extend(Roo.form.Layout, Roo.Component, {
30978     /**
30979      * @cfg {String/Object} autoCreate
30980      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
30981      */
30982     /**
30983      * @cfg {String/Object/Function} style
30984      * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
30985      * a function which returns such a specification.
30986      */
30987     /**
30988      * @cfg {String} labelAlign (left|top|right)
30989      * Valid values are "left," "top" and "right" (defaults to "left")
30990      */
30991     /**
30992      * @cfg {Number} labelWidth
30993      * Fixed width in pixels of all field labels (defaults to undefined)
30994      */
30995     /**
30996      * @cfg {Boolean} clear
30997      * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
30998      */
30999     clear : true,
31000     /**
31001      * @cfg {String} labelSeparator
31002      * The separator to use after field labels (defaults to ':')
31003      */
31004     labelSeparator : ':',
31005     /**
31006      * @cfg {Boolean} hideLabels
31007      * True to suppress the display of field labels in this layout (defaults to false)
31008      */
31009     hideLabels : false,
31010
31011     // private
31012     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
31013     
31014     isLayout : true,
31015     
31016     // private
31017     onRender : function(ct, position){
31018         if(this.el){ // from markup
31019             this.el = Roo.get(this.el);
31020         }else {  // generate
31021             var cfg = this.getAutoCreate();
31022             this.el = ct.createChild(cfg, position);
31023         }
31024         if(this.style){
31025             this.el.applyStyles(this.style);
31026         }
31027         if(this.labelAlign){
31028             this.el.addClass('x-form-label-'+this.labelAlign);
31029         }
31030         if(this.hideLabels){
31031             this.labelStyle = "display:none";
31032             this.elementStyle = "padding-left:0;";
31033         }else{
31034             if(typeof this.labelWidth == 'number'){
31035                 this.labelStyle = "width:"+this.labelWidth+"px;";
31036                 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
31037             }
31038             if(this.labelAlign == 'top'){
31039                 this.labelStyle = "width:auto;";
31040                 this.elementStyle = "padding-left:0;";
31041             }
31042         }
31043         var stack = this.stack;
31044         var slen = stack.length;
31045         if(slen > 0){
31046             if(!this.fieldTpl){
31047                 var t = new Roo.Template(
31048                     '<div class="x-form-item {5}">',
31049                         '<label for="{0}" style="{2}">{1}{4}</label>',
31050                         '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
31051                         '</div>',
31052                     '</div><div class="x-form-clear-left"></div>'
31053                 );
31054                 t.disableFormats = true;
31055                 t.compile();
31056                 Roo.form.Layout.prototype.fieldTpl = t;
31057             }
31058             for(var i = 0; i < slen; i++) {
31059                 if(stack[i].isFormField){
31060                     this.renderField(stack[i]);
31061                 }else{
31062                     this.renderComponent(stack[i]);
31063                 }
31064             }
31065         }
31066         if(this.clear){
31067             this.el.createChild({cls:'x-form-clear'});
31068         }
31069     },
31070
31071     // private
31072     renderField : function(f){
31073         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
31074                f.id, //0
31075                f.fieldLabel, //1
31076                f.labelStyle||this.labelStyle||'', //2
31077                this.elementStyle||'', //3
31078                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
31079                f.itemCls||this.itemCls||''  //5
31080        ], true).getPrevSibling());
31081     },
31082
31083     // private
31084     renderComponent : function(c){
31085         c.render(c.isLayout ? this.el : this.el.createChild());    
31086     },
31087     /**
31088      * Adds a object form elements (using the xtype property as the factory method.)
31089      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
31090      * @param {Object} config 
31091      */
31092     addxtype : function(o)
31093     {
31094         // create the lement.
31095         o.form = this.form;
31096         var fe = Roo.factory(o, Roo.form);
31097         this.form.allItems.push(fe);
31098         this.stack.push(fe);
31099         
31100         if (fe.isFormField) {
31101             this.form.items.add(fe);
31102         }
31103          
31104         return fe;
31105     }
31106 });
31107
31108
31109 /**
31110  * @class Roo.form.Column
31111  * @extends Roo.form.Layout
31112  * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
31113  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
31114  * @constructor
31115  * @param {Object} config Configuration options
31116  */
31117 Roo.form.Column = function(config){
31118     Roo.form.Column.superclass.constructor.call(this, config);
31119 };
31120
31121 Roo.extend(Roo.form.Column, Roo.form.Layout, {
31122     /**
31123      * @cfg {Number/String} width
31124      * The fixed width of the column in pixels or CSS value (defaults to "auto")
31125      */
31126     /**
31127      * @cfg {String/Object} autoCreate
31128      * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
31129      */
31130
31131     // private
31132     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
31133
31134     // private
31135     onRender : function(ct, position){
31136         Roo.form.Column.superclass.onRender.call(this, ct, position);
31137         if(this.width){
31138             this.el.setWidth(this.width);
31139         }
31140     }
31141 });
31142
31143 /**
31144  * @class Roo.form.Row
31145  * @extends Roo.form.Layout
31146  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
31147  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
31148  * @constructor
31149  * @param {Object} config Configuration options
31150  */
31151
31152  
31153 Roo.form.Row = function(config){
31154     Roo.form.Row.superclass.constructor.call(this, config);
31155 };
31156  
31157 Roo.extend(Roo.form.Row, Roo.form.Layout, {
31158       /**
31159      * @cfg {Number/String} width
31160      * The fixed width of the column in pixels or CSS value (defaults to "auto")
31161      */
31162     /**
31163      * @cfg {Number/String} height
31164      * The fixed height of the column in pixels or CSS value (defaults to "auto")
31165      */
31166     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
31167     
31168     padWidth : 20,
31169     // private
31170     onRender : function(ct, position){
31171         //console.log('row render');
31172         if(!this.rowTpl){
31173             var t = new Roo.Template(
31174                 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
31175                     '<label for="{0}" style="{2}">{1}{4}</label>',
31176                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
31177                     '</div>',
31178                 '</div>'
31179             );
31180             t.disableFormats = true;
31181             t.compile();
31182             Roo.form.Layout.prototype.rowTpl = t;
31183         }
31184         this.fieldTpl = this.rowTpl;
31185         
31186         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
31187         var labelWidth = 100;
31188         
31189         if ((this.labelAlign != 'top')) {
31190             if (typeof this.labelWidth == 'number') {
31191                 labelWidth = this.labelWidth
31192             }
31193             this.padWidth =  20 + labelWidth;
31194             
31195         }
31196         
31197         Roo.form.Column.superclass.onRender.call(this, ct, position);
31198         if(this.width){
31199             this.el.setWidth(this.width);
31200         }
31201         if(this.height){
31202             this.el.setHeight(this.height);
31203         }
31204     },
31205     
31206     // private
31207     renderField : function(f){
31208         f.fieldEl = this.fieldTpl.append(this.el, [
31209                f.id, f.fieldLabel,
31210                f.labelStyle||this.labelStyle||'',
31211                this.elementStyle||'',
31212                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
31213                f.itemCls||this.itemCls||'',
31214                f.width ? f.width + this.padWidth : 160 + this.padWidth
31215        ],true);
31216     }
31217 });
31218  
31219
31220 /**
31221  * @class Roo.form.FieldSet
31222  * @extends Roo.form.Layout
31223  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
31224  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
31225  * @constructor
31226  * @param {Object} config Configuration options
31227  */
31228 Roo.form.FieldSet = function(config){
31229     Roo.form.FieldSet.superclass.constructor.call(this, config);
31230 };
31231
31232 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
31233     /**
31234      * @cfg {String} legend
31235      * The text to display as the legend for the FieldSet (defaults to '')
31236      */
31237     /**
31238      * @cfg {String/Object} autoCreate
31239      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
31240      */
31241
31242     // private
31243     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
31244
31245     // private
31246     onRender : function(ct, position){
31247         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
31248         if(this.legend){
31249             this.setLegend(this.legend);
31250         }
31251     },
31252
31253     // private
31254     setLegend : function(text){
31255         if(this.rendered){
31256             this.el.child('legend').update(text);
31257         }
31258     }
31259 });/*
31260  * Based on:
31261  * Ext JS Library 1.1.1
31262  * Copyright(c) 2006-2007, Ext JS, LLC.
31263  *
31264  * Originally Released Under LGPL - original licence link has changed is not relivant.
31265  *
31266  * Fork - LGPL
31267  * <script type="text/javascript">
31268  */
31269 /**
31270  * @class Roo.form.VTypes
31271  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
31272  * @static
31273  */
31274 Roo.form.VTypes = function(){
31275     // closure these in so they are only created once.
31276     var alpha = /^[a-zA-Z_]+$/;
31277     var alphanum = /^[a-zA-Z0-9_]+$/;
31278     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
31279     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
31280
31281     // All these messages and functions are configurable
31282     return {
31283         /**
31284          * The function used to validate email addresses
31285          * @param {String} value The email address
31286          */
31287         'email' : function(v){
31288             return email.test(v);
31289         },
31290         /**
31291          * The error text to display when the email validation function returns false
31292          * @type String
31293          */
31294         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
31295         /**
31296          * The keystroke filter mask to be applied on email input
31297          * @type RegExp
31298          */
31299         'emailMask' : /[a-z0-9_\.\-@]/i,
31300
31301         /**
31302          * The function used to validate URLs
31303          * @param {String} value The URL
31304          */
31305         'url' : function(v){
31306             return url.test(v);
31307         },
31308         /**
31309          * The error text to display when the url validation function returns false
31310          * @type String
31311          */
31312         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
31313         
31314         /**
31315          * The function used to validate alpha values
31316          * @param {String} value The value
31317          */
31318         'alpha' : function(v){
31319             return alpha.test(v);
31320         },
31321         /**
31322          * The error text to display when the alpha validation function returns false
31323          * @type String
31324          */
31325         'alphaText' : 'This field should only contain letters and _',
31326         /**
31327          * The keystroke filter mask to be applied on alpha input
31328          * @type RegExp
31329          */
31330         'alphaMask' : /[a-z_]/i,
31331
31332         /**
31333          * The function used to validate alphanumeric values
31334          * @param {String} value The value
31335          */
31336         'alphanum' : function(v){
31337             return alphanum.test(v);
31338         },
31339         /**
31340          * The error text to display when the alphanumeric validation function returns false
31341          * @type String
31342          */
31343         'alphanumText' : 'This field should only contain letters, numbers and _',
31344         /**
31345          * The keystroke filter mask to be applied on alphanumeric input
31346          * @type RegExp
31347          */
31348         'alphanumMask' : /[a-z0-9_]/i
31349     };
31350 }();//<script type="text/javascript">
31351
31352 /**
31353  * @class Roo.form.FCKeditor
31354  * @extends Roo.form.TextArea
31355  * Wrapper around the FCKEditor http://www.fckeditor.net
31356  * @constructor
31357  * Creates a new FCKeditor
31358  * @param {Object} config Configuration options
31359  */
31360 Roo.form.FCKeditor = function(config){
31361     Roo.form.FCKeditor.superclass.constructor.call(this, config);
31362     this.addEvents({
31363          /**
31364          * @event editorinit
31365          * Fired when the editor is initialized - you can add extra handlers here..
31366          * @param {FCKeditor} this
31367          * @param {Object} the FCK object.
31368          */
31369         editorinit : true
31370     });
31371     
31372     
31373 };
31374 Roo.form.FCKeditor.editors = { };
31375 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
31376 {
31377     //defaultAutoCreate : {
31378     //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
31379     //},
31380     // private
31381     /**
31382      * @cfg {Object} fck options - see fck manual for details.
31383      */
31384     fckconfig : false,
31385     
31386     /**
31387      * @cfg {Object} fck toolbar set (Basic or Default)
31388      */
31389     toolbarSet : 'Basic',
31390     /**
31391      * @cfg {Object} fck BasePath
31392      */ 
31393     basePath : '/fckeditor/',
31394     
31395     
31396     frame : false,
31397     
31398     value : '',
31399     
31400    
31401     onRender : function(ct, position)
31402     {
31403         if(!this.el){
31404             this.defaultAutoCreate = {
31405                 tag: "textarea",
31406                 style:"width:300px;height:60px;",
31407                 autocomplete: "new-password"
31408             };
31409         }
31410         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
31411         /*
31412         if(this.grow){
31413             this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
31414             if(this.preventScrollbars){
31415                 this.el.setStyle("overflow", "hidden");
31416             }
31417             this.el.setHeight(this.growMin);
31418         }
31419         */
31420         //console.log('onrender' + this.getId() );
31421         Roo.form.FCKeditor.editors[this.getId()] = this;
31422          
31423
31424         this.replaceTextarea() ;
31425         
31426     },
31427     
31428     getEditor : function() {
31429         return this.fckEditor;
31430     },
31431     /**
31432      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
31433      * @param {Mixed} value The value to set
31434      */
31435     
31436     
31437     setValue : function(value)
31438     {
31439         //console.log('setValue: ' + value);
31440         
31441         if(typeof(value) == 'undefined') { // not sure why this is happending...
31442             return;
31443         }
31444         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
31445         
31446         //if(!this.el || !this.getEditor()) {
31447         //    this.value = value;
31448             //this.setValue.defer(100,this,[value]);    
31449         //    return;
31450         //} 
31451         
31452         if(!this.getEditor()) {
31453             return;
31454         }
31455         
31456         this.getEditor().SetData(value);
31457         
31458         //
31459
31460     },
31461
31462     /**
31463      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
31464      * @return {Mixed} value The field value
31465      */
31466     getValue : function()
31467     {
31468         
31469         if (this.frame && this.frame.dom.style.display == 'none') {
31470             return Roo.form.FCKeditor.superclass.getValue.call(this);
31471         }
31472         
31473         if(!this.el || !this.getEditor()) {
31474            
31475            // this.getValue.defer(100,this); 
31476             return this.value;
31477         }
31478        
31479         
31480         var value=this.getEditor().GetData();
31481         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
31482         return Roo.form.FCKeditor.superclass.getValue.call(this);
31483         
31484
31485     },
31486
31487     /**
31488      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
31489      * @return {Mixed} value The field value
31490      */
31491     getRawValue : function()
31492     {
31493         if (this.frame && this.frame.dom.style.display == 'none') {
31494             return Roo.form.FCKeditor.superclass.getRawValue.call(this);
31495         }
31496         
31497         if(!this.el || !this.getEditor()) {
31498             //this.getRawValue.defer(100,this); 
31499             return this.value;
31500             return;
31501         }
31502         
31503         
31504         
31505         var value=this.getEditor().GetData();
31506         Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
31507         return Roo.form.FCKeditor.superclass.getRawValue.call(this);
31508          
31509     },
31510     
31511     setSize : function(w,h) {
31512         
31513         
31514         
31515         //if (this.frame && this.frame.dom.style.display == 'none') {
31516         //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
31517         //    return;
31518         //}
31519         //if(!this.el || !this.getEditor()) {
31520         //    this.setSize.defer(100,this, [w,h]); 
31521         //    return;
31522         //}
31523         
31524         
31525         
31526         Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
31527         
31528         this.frame.dom.setAttribute('width', w);
31529         this.frame.dom.setAttribute('height', h);
31530         this.frame.setSize(w,h);
31531         
31532     },
31533     
31534     toggleSourceEdit : function(value) {
31535         
31536       
31537          
31538         this.el.dom.style.display = value ? '' : 'none';
31539         this.frame.dom.style.display = value ?  'none' : '';
31540         
31541     },
31542     
31543     
31544     focus: function(tag)
31545     {
31546         if (this.frame.dom.style.display == 'none') {
31547             return Roo.form.FCKeditor.superclass.focus.call(this);
31548         }
31549         if(!this.el || !this.getEditor()) {
31550             this.focus.defer(100,this, [tag]); 
31551             return;
31552         }
31553         
31554         
31555         
31556         
31557         var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
31558         this.getEditor().Focus();
31559         if (tgs.length) {
31560             if (!this.getEditor().Selection.GetSelection()) {
31561                 this.focus.defer(100,this, [tag]); 
31562                 return;
31563             }
31564             
31565             
31566             var r = this.getEditor().EditorDocument.createRange();
31567             r.setStart(tgs[0],0);
31568             r.setEnd(tgs[0],0);
31569             this.getEditor().Selection.GetSelection().removeAllRanges();
31570             this.getEditor().Selection.GetSelection().addRange(r);
31571             this.getEditor().Focus();
31572         }
31573         
31574     },
31575     
31576     
31577     
31578     replaceTextarea : function()
31579     {
31580         if ( document.getElementById( this.getId() + '___Frame' ) ) {
31581             return ;
31582         }
31583         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
31584         //{
31585             // We must check the elements firstly using the Id and then the name.
31586         var oTextarea = document.getElementById( this.getId() );
31587         
31588         var colElementsByName = document.getElementsByName( this.getId() ) ;
31589          
31590         oTextarea.style.display = 'none' ;
31591
31592         if ( oTextarea.tabIndex ) {            
31593             this.TabIndex = oTextarea.tabIndex ;
31594         }
31595         
31596         this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
31597         this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
31598         this.frame = Roo.get(this.getId() + '___Frame')
31599     },
31600     
31601     _getConfigHtml : function()
31602     {
31603         var sConfig = '' ;
31604
31605         for ( var o in this.fckconfig ) {
31606             sConfig += sConfig.length > 0  ? '&amp;' : '';
31607             sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
31608         }
31609
31610         return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
31611     },
31612     
31613     
31614     _getIFrameHtml : function()
31615     {
31616         var sFile = 'fckeditor.html' ;
31617         /* no idea what this is about..
31618         try
31619         {
31620             if ( (/fcksource=true/i).test( window.top.location.search ) )
31621                 sFile = 'fckeditor.original.html' ;
31622         }
31623         catch (e) { 
31624         */
31625
31626         var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
31627         sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
31628         
31629         
31630         var html = '<iframe id="' + this.getId() +
31631             '___Frame" src="' + sLink +
31632             '" width="' + this.width +
31633             '" height="' + this.height + '"' +
31634             (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
31635             ' frameborder="0" scrolling="no"></iframe>' ;
31636
31637         return html ;
31638     },
31639     
31640     _insertHtmlBefore : function( html, element )
31641     {
31642         if ( element.insertAdjacentHTML )       {
31643             // IE
31644             element.insertAdjacentHTML( 'beforeBegin', html ) ;
31645         } else { // Gecko
31646             var oRange = document.createRange() ;
31647             oRange.setStartBefore( element ) ;
31648             var oFragment = oRange.createContextualFragment( html );
31649             element.parentNode.insertBefore( oFragment, element ) ;
31650         }
31651     }
31652     
31653     
31654   
31655     
31656     
31657     
31658     
31659
31660 });
31661
31662 //Roo.reg('fckeditor', Roo.form.FCKeditor);
31663
31664 function FCKeditor_OnComplete(editorInstance){
31665     var f = Roo.form.FCKeditor.editors[editorInstance.Name];
31666     f.fckEditor = editorInstance;
31667     //console.log("loaded");
31668     f.fireEvent('editorinit', f, editorInstance);
31669
31670   
31671
31672  
31673
31674
31675
31676
31677
31678
31679
31680
31681
31682
31683
31684
31685
31686
31687
31688 //<script type="text/javascript">
31689 /**
31690  * @class Roo.form.GridField
31691  * @extends Roo.form.Field
31692  * Embed a grid (or editable grid into a form)
31693  * STATUS ALPHA
31694  * 
31695  * This embeds a grid in a form, the value of the field should be the json encoded array of rows
31696  * it needs 
31697  * xgrid.store = Roo.data.Store
31698  * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
31699  * xgrid.store.reader = Roo.data.JsonReader 
31700  * 
31701  * 
31702  * @constructor
31703  * Creates a new GridField
31704  * @param {Object} config Configuration options
31705  */
31706 Roo.form.GridField = function(config){
31707     Roo.form.GridField.superclass.constructor.call(this, config);
31708      
31709 };
31710
31711 Roo.extend(Roo.form.GridField, Roo.form.Field,  {
31712     /**
31713      * @cfg {Number} width  - used to restrict width of grid..
31714      */
31715     width : 100,
31716     /**
31717      * @cfg {Number} height - used to restrict height of grid..
31718      */
31719     height : 50,
31720      /**
31721      * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
31722          * 
31723          *}
31724      */
31725     xgrid : false, 
31726     /**
31727      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
31728      * {tag: "input", type: "checkbox", autocomplete: "off"})
31729      */
31730    // defaultAutoCreate : { tag: 'div' },
31731     defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
31732     /**
31733      * @cfg {String} addTitle Text to include for adding a title.
31734      */
31735     addTitle : false,
31736     //
31737     onResize : function(){
31738         Roo.form.Field.superclass.onResize.apply(this, arguments);
31739     },
31740
31741     initEvents : function(){
31742         // Roo.form.Checkbox.superclass.initEvents.call(this);
31743         // has no events...
31744        
31745     },
31746
31747
31748     getResizeEl : function(){
31749         return this.wrap;
31750     },
31751
31752     getPositionEl : function(){
31753         return this.wrap;
31754     },
31755
31756     // private
31757     onRender : function(ct, position){
31758         
31759         this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
31760         var style = this.style;
31761         delete this.style;
31762         
31763         Roo.form.GridField.superclass.onRender.call(this, ct, position);
31764         this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
31765         this.viewEl = this.wrap.createChild({ tag: 'div' });
31766         if (style) {
31767             this.viewEl.applyStyles(style);
31768         }
31769         if (this.width) {
31770             this.viewEl.setWidth(this.width);
31771         }
31772         if (this.height) {
31773             this.viewEl.setHeight(this.height);
31774         }
31775         //if(this.inputValue !== undefined){
31776         //this.setValue(this.value);
31777         
31778         
31779         this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
31780         
31781         
31782         this.grid.render();
31783         this.grid.getDataSource().on('remove', this.refreshValue, this);
31784         this.grid.getDataSource().on('update', this.refreshValue, this);
31785         this.grid.on('afteredit', this.refreshValue, this);
31786  
31787     },
31788      
31789     
31790     /**
31791      * Sets the value of the item. 
31792      * @param {String} either an object  or a string..
31793      */
31794     setValue : function(v){
31795         //this.value = v;
31796         v = v || []; // empty set..
31797         // this does not seem smart - it really only affects memoryproxy grids..
31798         if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
31799             var ds = this.grid.getDataSource();
31800             // assumes a json reader..
31801             var data = {}
31802             data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
31803             ds.loadData( data);
31804         }
31805         // clear selection so it does not get stale.
31806         if (this.grid.sm) { 
31807             this.grid.sm.clearSelections();
31808         }
31809         
31810         Roo.form.GridField.superclass.setValue.call(this, v);
31811         this.refreshValue();
31812         // should load data in the grid really....
31813     },
31814     
31815     // private
31816     refreshValue: function() {
31817          var val = [];
31818         this.grid.getDataSource().each(function(r) {
31819             val.push(r.data);
31820         });
31821         this.el.dom.value = Roo.encode(val);
31822     }
31823     
31824      
31825     
31826     
31827 });/*
31828  * Based on:
31829  * Ext JS Library 1.1.1
31830  * Copyright(c) 2006-2007, Ext JS, LLC.
31831  *
31832  * Originally Released Under LGPL - original licence link has changed is not relivant.
31833  *
31834  * Fork - LGPL
31835  * <script type="text/javascript">
31836  */
31837 /**
31838  * @class Roo.form.DisplayField
31839  * @extends Roo.form.Field
31840  * A generic Field to display non-editable data.
31841  * @cfg {Boolean} closable (true|false) default false
31842  * @constructor
31843  * Creates a new Display Field item.
31844  * @param {Object} config Configuration options
31845  */
31846 Roo.form.DisplayField = function(config){
31847     Roo.form.DisplayField.superclass.constructor.call(this, config);
31848     
31849     this.addEvents({
31850         /**
31851          * @event close
31852          * Fires after the click the close btn
31853              * @param {Roo.form.DisplayField} this
31854              */
31855         close : true
31856     });
31857 };
31858
31859 Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
31860     inputType:      'hidden',
31861     allowBlank:     true,
31862     readOnly:         true,
31863     
31864  
31865     /**
31866      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
31867      */
31868     focusClass : undefined,
31869     /**
31870      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
31871      */
31872     fieldClass: 'x-form-field',
31873     
31874      /**
31875      * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
31876      */
31877     valueRenderer: undefined,
31878     
31879     width: 100,
31880     /**
31881      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
31882      * {tag: "input", type: "checkbox", autocomplete: "off"})
31883      */
31884      
31885  //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
31886  
31887     closable : false,
31888     
31889     onResize : function(){
31890         Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
31891         
31892     },
31893
31894     initEvents : function(){
31895         // Roo.form.Checkbox.superclass.initEvents.call(this);
31896         // has no events...
31897         
31898         if(this.closable){
31899             this.closeEl.on('click', this.onClose, this);
31900         }
31901        
31902     },
31903
31904
31905     getResizeEl : function(){
31906         return this.wrap;
31907     },
31908
31909     getPositionEl : function(){
31910         return this.wrap;
31911     },
31912
31913     // private
31914     onRender : function(ct, position){
31915         
31916         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
31917         //if(this.inputValue !== undefined){
31918         this.wrap = this.el.wrap();
31919         
31920         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
31921         
31922         if(this.closable){
31923             this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
31924         }
31925         
31926         if (this.bodyStyle) {
31927             this.viewEl.applyStyles(this.bodyStyle);
31928         }
31929         //this.viewEl.setStyle('padding', '2px');
31930         
31931         this.setValue(this.value);
31932         
31933     },
31934 /*
31935     // private
31936     initValue : Roo.emptyFn,
31937
31938   */
31939
31940         // private
31941     onClick : function(){
31942         
31943     },
31944
31945     /**
31946      * Sets the checked state of the checkbox.
31947      * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
31948      */
31949     setValue : function(v){
31950         this.value = v;
31951         var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
31952         // this might be called before we have a dom element..
31953         if (!this.viewEl) {
31954             return;
31955         }
31956         this.viewEl.dom.innerHTML = html;
31957         Roo.form.DisplayField.superclass.setValue.call(this, v);
31958
31959     },
31960     
31961     onClose : function(e)
31962     {
31963         e.preventDefault();
31964         
31965         this.fireEvent('close', this);
31966     }
31967 });/*
31968  * 
31969  * Licence- LGPL
31970  * 
31971  */
31972
31973 /**
31974  * @class Roo.form.DayPicker
31975  * @extends Roo.form.Field
31976  * A Day picker show [M] [T] [W] ....
31977  * @constructor
31978  * Creates a new Day Picker
31979  * @param {Object} config Configuration options
31980  */
31981 Roo.form.DayPicker= function(config){
31982     Roo.form.DayPicker.superclass.constructor.call(this, config);
31983      
31984 };
31985
31986 Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
31987     /**
31988      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
31989      */
31990     focusClass : undefined,
31991     /**
31992      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
31993      */
31994     fieldClass: "x-form-field",
31995    
31996     /**
31997      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
31998      * {tag: "input", type: "checkbox", autocomplete: "off"})
31999      */
32000     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
32001     
32002    
32003     actionMode : 'viewEl', 
32004     //
32005     // private
32006  
32007     inputType : 'hidden',
32008     
32009      
32010     inputElement: false, // real input element?
32011     basedOn: false, // ????
32012     
32013     isFormField: true, // not sure where this is needed!!!!
32014
32015     onResize : function(){
32016         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
32017         if(!this.boxLabel){
32018             this.el.alignTo(this.wrap, 'c-c');
32019         }
32020     },
32021
32022     initEvents : function(){
32023         Roo.form.Checkbox.superclass.initEvents.call(this);
32024         this.el.on("click", this.onClick,  this);
32025         this.el.on("change", this.onClick,  this);
32026     },
32027
32028
32029     getResizeEl : function(){
32030         return this.wrap;
32031     },
32032
32033     getPositionEl : function(){
32034         return this.wrap;
32035     },
32036
32037     
32038     // private
32039     onRender : function(ct, position){
32040         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
32041        
32042         this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
32043         
32044         var r1 = '<table><tr>';
32045         var r2 = '<tr class="x-form-daypick-icons">';
32046         for (var i=0; i < 7; i++) {
32047             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
32048             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
32049         }
32050         
32051         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
32052         viewEl.select('img').on('click', this.onClick, this);
32053         this.viewEl = viewEl;   
32054         
32055         
32056         // this will not work on Chrome!!!
32057         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
32058         this.el.on('propertychange', this.setFromHidden,  this);  //ie
32059         
32060         
32061           
32062
32063     },
32064
32065     // private
32066     initValue : Roo.emptyFn,
32067
32068     /**
32069      * Returns the checked state of the checkbox.
32070      * @return {Boolean} True if checked, else false
32071      */
32072     getValue : function(){
32073         return this.el.dom.value;
32074         
32075     },
32076
32077         // private
32078     onClick : function(e){ 
32079         //this.setChecked(!this.checked);
32080         Roo.get(e.target).toggleClass('x-menu-item-checked');
32081         this.refreshValue();
32082         //if(this.el.dom.checked != this.checked){
32083         //    this.setValue(this.el.dom.checked);
32084        // }
32085     },
32086     
32087     // private
32088     refreshValue : function()
32089     {
32090         var val = '';
32091         this.viewEl.select('img',true).each(function(e,i,n)  {
32092             val += e.is(".x-menu-item-checked") ? String(n) : '';
32093         });
32094         this.setValue(val, true);
32095     },
32096
32097     /**
32098      * Sets the checked state of the checkbox.
32099      * On is always based on a string comparison between inputValue and the param.
32100      * @param {Boolean/String} value - the value to set 
32101      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
32102      */
32103     setValue : function(v,suppressEvent){
32104         if (!this.el.dom) {
32105             return;
32106         }
32107         var old = this.el.dom.value ;
32108         this.el.dom.value = v;
32109         if (suppressEvent) {
32110             return ;
32111         }
32112          
32113         // update display..
32114         this.viewEl.select('img',true).each(function(e,i,n)  {
32115             
32116             var on = e.is(".x-menu-item-checked");
32117             var newv = v.indexOf(String(n)) > -1;
32118             if (on != newv) {
32119                 e.toggleClass('x-menu-item-checked');
32120             }
32121             
32122         });
32123         
32124         
32125         this.fireEvent('change', this, v, old);
32126         
32127         
32128     },
32129    
32130     // handle setting of hidden value by some other method!!?!?
32131     setFromHidden: function()
32132     {
32133         if(!this.el){
32134             return;
32135         }
32136         //console.log("SET FROM HIDDEN");
32137         //alert('setFrom hidden');
32138         this.setValue(this.el.dom.value);
32139     },
32140     
32141     onDestroy : function()
32142     {
32143         if(this.viewEl){
32144             Roo.get(this.viewEl).remove();
32145         }
32146          
32147         Roo.form.DayPicker.superclass.onDestroy.call(this);
32148     }
32149
32150 });/*
32151  * RooJS Library 1.1.1
32152  * Copyright(c) 2008-2011  Alan Knowles
32153  *
32154  * License - LGPL
32155  */
32156  
32157
32158 /**
32159  * @class Roo.form.ComboCheck
32160  * @extends Roo.form.ComboBox
32161  * A combobox for multiple select items.
32162  *
32163  * FIXME - could do with a reset button..
32164  * 
32165  * @constructor
32166  * Create a new ComboCheck
32167  * @param {Object} config Configuration options
32168  */
32169 Roo.form.ComboCheck = function(config){
32170     Roo.form.ComboCheck.superclass.constructor.call(this, config);
32171     // should verify some data...
32172     // like
32173     // hiddenName = required..
32174     // displayField = required
32175     // valudField == required
32176     var req= [ 'hiddenName', 'displayField', 'valueField' ];
32177     var _t = this;
32178     Roo.each(req, function(e) {
32179         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
32180             throw "Roo.form.ComboCheck : missing value for: " + e;
32181         }
32182     });
32183     
32184     
32185 };
32186
32187 Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
32188      
32189      
32190     editable : false,
32191      
32192     selectedClass: 'x-menu-item-checked', 
32193     
32194     // private
32195     onRender : function(ct, position){
32196         var _t = this;
32197         
32198         
32199         
32200         if(!this.tpl){
32201             var cls = 'x-combo-list';
32202
32203             
32204             this.tpl =  new Roo.Template({
32205                 html :  '<div class="'+cls+'-item x-menu-check-item">' +
32206                    '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
32207                    '<span>{' + this.displayField + '}</span>' +
32208                     '</div>' 
32209                 
32210             });
32211         }
32212  
32213         
32214         Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
32215         this.view.singleSelect = false;
32216         this.view.multiSelect = true;
32217         this.view.toggleSelect = true;
32218         this.pageTb.add(new Roo.Toolbar.Fill(), {
32219             
32220             text: 'Done',
32221             handler: function()
32222             {
32223                 _t.collapse();
32224             }
32225         });
32226     },
32227     
32228     onViewOver : function(e, t){
32229         // do nothing...
32230         return;
32231         
32232     },
32233     
32234     onViewClick : function(doFocus,index){
32235         return;
32236         
32237     },
32238     select: function () {
32239         //Roo.log("SELECT CALLED");
32240     },
32241      
32242     selectByValue : function(xv, scrollIntoView){
32243         var ar = this.getValueArray();
32244         var sels = [];
32245         
32246         Roo.each(ar, function(v) {
32247             if(v === undefined || v === null){
32248                 return;
32249             }
32250             var r = this.findRecord(this.valueField, v);
32251             if(r){
32252                 sels.push(this.store.indexOf(r))
32253                 
32254             }
32255         },this);
32256         this.view.select(sels);
32257         return false;
32258     },
32259     
32260     
32261     
32262     onSelect : function(record, index){
32263        // Roo.log("onselect Called");
32264        // this is only called by the clear button now..
32265         this.view.clearSelections();
32266         this.setValue('[]');
32267         if (this.value != this.valueBefore) {
32268             this.fireEvent('change', this, this.value, this.valueBefore);
32269             this.valueBefore = this.value;
32270         }
32271     },
32272     getValueArray : function()
32273     {
32274         var ar = [] ;
32275         
32276         try {
32277             //Roo.log(this.value);
32278             if (typeof(this.value) == 'undefined') {
32279                 return [];
32280             }
32281             var ar = Roo.decode(this.value);
32282             return  ar instanceof Array ? ar : []; //?? valid?
32283             
32284         } catch(e) {
32285             Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
32286             return [];
32287         }
32288          
32289     },
32290     expand : function ()
32291     {
32292         
32293         Roo.form.ComboCheck.superclass.expand.call(this);
32294         this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
32295         //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
32296         
32297
32298     },
32299     
32300     collapse : function(){
32301         Roo.form.ComboCheck.superclass.collapse.call(this);
32302         var sl = this.view.getSelectedIndexes();
32303         var st = this.store;
32304         var nv = [];
32305         var tv = [];
32306         var r;
32307         Roo.each(sl, function(i) {
32308             r = st.getAt(i);
32309             nv.push(r.get(this.valueField));
32310         },this);
32311         this.setValue(Roo.encode(nv));
32312         if (this.value != this.valueBefore) {
32313
32314             this.fireEvent('change', this, this.value, this.valueBefore);
32315             this.valueBefore = this.value;
32316         }
32317         
32318     },
32319     
32320     setValue : function(v){
32321         // Roo.log(v);
32322         this.value = v;
32323         
32324         var vals = this.getValueArray();
32325         var tv = [];
32326         Roo.each(vals, function(k) {
32327             var r = this.findRecord(this.valueField, k);
32328             if(r){
32329                 tv.push(r.data[this.displayField]);
32330             }else if(this.valueNotFoundText !== undefined){
32331                 tv.push( this.valueNotFoundText );
32332             }
32333         },this);
32334        // Roo.log(tv);
32335         
32336         Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
32337         this.hiddenField.value = v;
32338         this.value = v;
32339     }
32340     
32341 });/*
32342  * Based on:
32343  * Ext JS Library 1.1.1
32344  * Copyright(c) 2006-2007, Ext JS, LLC.
32345  *
32346  * Originally Released Under LGPL - original licence link has changed is not relivant.
32347  *
32348  * Fork - LGPL
32349  * <script type="text/javascript">
32350  */
32351  
32352 /**
32353  * @class Roo.form.Signature
32354  * @extends Roo.form.Field
32355  * Signature field.  
32356  * @constructor
32357  * 
32358  * @param {Object} config Configuration options
32359  */
32360
32361 Roo.form.Signature = function(config){
32362     Roo.form.Signature.superclass.constructor.call(this, config);
32363     
32364     this.addEvents({// not in used??
32365          /**
32366          * @event confirm
32367          * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
32368              * @param {Roo.form.Signature} combo This combo box
32369              */
32370         'confirm' : true,
32371         /**
32372          * @event reset
32373          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
32374              * @param {Roo.form.ComboBox} combo This combo box
32375              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
32376              */
32377         'reset' : true
32378     });
32379 };
32380
32381 Roo.extend(Roo.form.Signature, Roo.form.Field,  {
32382     /**
32383      * @cfg {Object} labels Label to use when rendering a form.
32384      * defaults to 
32385      * labels : { 
32386      *      clear : "Clear",
32387      *      confirm : "Confirm"
32388      *  }
32389      */
32390     labels : { 
32391         clear : "Clear",
32392         confirm : "Confirm"
32393     },
32394     /**
32395      * @cfg {Number} width The signature panel width (defaults to 300)
32396      */
32397     width: 300,
32398     /**
32399      * @cfg {Number} height The signature panel height (defaults to 100)
32400      */
32401     height : 100,
32402     /**
32403      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
32404      */
32405     allowBlank : false,
32406     
32407     //private
32408     // {Object} signPanel The signature SVG panel element (defaults to {})
32409     signPanel : {},
32410     // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
32411     isMouseDown : false,
32412     // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
32413     isConfirmed : false,
32414     // {String} signatureTmp SVG mapping string (defaults to empty string)
32415     signatureTmp : '',
32416     
32417     
32418     defaultAutoCreate : { // modified by initCompnoent..
32419         tag: "input",
32420         type:"hidden"
32421     },
32422
32423     // private
32424     onRender : function(ct, position){
32425         
32426         Roo.form.Signature.superclass.onRender.call(this, ct, position);
32427         
32428         this.wrap = this.el.wrap({
32429             cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
32430         });
32431         
32432         this.createToolbar(this);
32433         this.signPanel = this.wrap.createChild({
32434                 tag: 'div',
32435                 style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
32436             }, this.el
32437         );
32438             
32439         this.svgID = Roo.id();
32440         this.svgEl = this.signPanel.createChild({
32441               xmlns : 'http://www.w3.org/2000/svg',
32442               tag : 'svg',
32443               id : this.svgID + "-svg",
32444               width: this.width,
32445               height: this.height,
32446               viewBox: '0 0 '+this.width+' '+this.height,
32447               cn : [
32448                 {
32449                     tag: "rect",
32450                     id: this.svgID + "-svg-r",
32451                     width: this.width,
32452                     height: this.height,
32453                     fill: "#ffa"
32454                 },
32455                 {
32456                     tag: "line",
32457                     id: this.svgID + "-svg-l",
32458                     x1: "0", // start
32459                     y1: (this.height*0.8), // start set the line in 80% of height
32460                     x2: this.width, // end
32461                     y2: (this.height*0.8), // end set the line in 80% of height
32462                     'stroke': "#666",
32463                     'stroke-width': "1",
32464                     'stroke-dasharray': "3",
32465                     'shape-rendering': "crispEdges",
32466                     'pointer-events': "none"
32467                 },
32468                 {
32469                     tag: "path",
32470                     id: this.svgID + "-svg-p",
32471                     'stroke': "navy",
32472                     'stroke-width': "3",
32473                     'fill': "none",
32474                     'pointer-events': 'none'
32475                 }
32476               ]
32477         });
32478         this.createSVG();
32479         this.svgBox = this.svgEl.dom.getScreenCTM();
32480     },
32481     createSVG : function(){ 
32482         var svg = this.signPanel;
32483         var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
32484         var t = this;
32485
32486         r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
32487         r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
32488         r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
32489         r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
32490         r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
32491         r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
32492         r.addEventListener('touchend', function(e) { return t.up(e); }, false);
32493         
32494     },
32495     isTouchEvent : function(e){
32496         return e.type.match(/^touch/);
32497     },
32498     getCoords : function (e) {
32499         var pt    = this.svgEl.dom.createSVGPoint();
32500         pt.x = e.clientX; 
32501         pt.y = e.clientY;
32502         if (this.isTouchEvent(e)) {
32503             pt.x =  e.targetTouches[0].clientX;
32504             pt.y = e.targetTouches[0].clientY;
32505         }
32506         var a = this.svgEl.dom.getScreenCTM();
32507         var b = a.inverse();
32508         var mx = pt.matrixTransform(b);
32509         return mx.x + ',' + mx.y;
32510     },
32511     //mouse event headler 
32512     down : function (e) {
32513         this.signatureTmp += 'M' + this.getCoords(e) + ' ';
32514         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
32515         
32516         this.isMouseDown = true;
32517         
32518         e.preventDefault();
32519     },
32520     move : function (e) {
32521         if (this.isMouseDown) {
32522             this.signatureTmp += 'L' + this.getCoords(e) + ' ';
32523             this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
32524         }
32525         
32526         e.preventDefault();
32527     },
32528     up : function (e) {
32529         this.isMouseDown = false;
32530         var sp = this.signatureTmp.split(' ');
32531         
32532         if(sp.length > 1){
32533             if(!sp[sp.length-2].match(/^L/)){
32534                 sp.pop();
32535                 sp.pop();
32536                 sp.push("");
32537                 this.signatureTmp = sp.join(" ");
32538             }
32539         }
32540         if(this.getValue() != this.signatureTmp){
32541             this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
32542             this.isConfirmed = false;
32543         }
32544         e.preventDefault();
32545     },
32546     
32547     /**
32548      * Protected method that will not generally be called directly. It
32549      * is called when the editor creates its toolbar. Override this method if you need to
32550      * add custom toolbar buttons.
32551      * @param {HtmlEditor} editor
32552      */
32553     createToolbar : function(editor){
32554          function btn(id, toggle, handler){
32555             var xid = fid + '-'+ id ;
32556             return {
32557                 id : xid,
32558                 cmd : id,
32559                 cls : 'x-btn-icon x-edit-'+id,
32560                 enableToggle:toggle !== false,
32561                 scope: editor, // was editor...
32562                 handler:handler||editor.relayBtnCmd,
32563                 clickEvent:'mousedown',
32564                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
32565                 tabIndex:-1
32566             };
32567         }
32568         
32569         
32570         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
32571         this.tb = tb;
32572         this.tb.add(
32573            {
32574                 cls : ' x-signature-btn x-signature-'+id,
32575                 scope: editor, // was editor...
32576                 handler: this.reset,
32577                 clickEvent:'mousedown',
32578                 text: this.labels.clear
32579             },
32580             {
32581                  xtype : 'Fill',
32582                  xns: Roo.Toolbar
32583             }, 
32584             {
32585                 cls : '  x-signature-btn x-signature-'+id,
32586                 scope: editor, // was editor...
32587                 handler: this.confirmHandler,
32588                 clickEvent:'mousedown',
32589                 text: this.labels.confirm
32590             }
32591         );
32592     
32593     },
32594     //public
32595     /**
32596      * when user is clicked confirm then show this image.....
32597      * 
32598      * @return {String} Image Data URI
32599      */
32600     getImageDataURI : function(){
32601         var svg = this.svgEl.dom.parentNode.innerHTML;
32602         var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
32603         return src; 
32604     },
32605     /**
32606      * 
32607      * @return {Boolean} this.isConfirmed
32608      */
32609     getConfirmed : function(){
32610         return this.isConfirmed;
32611     },
32612     /**
32613      * 
32614      * @return {Number} this.width
32615      */
32616     getWidth : function(){
32617         return this.width;
32618     },
32619     /**
32620      * 
32621      * @return {Number} this.height
32622      */
32623     getHeight : function(){
32624         return this.height;
32625     },
32626     // private
32627     getSignature : function(){
32628         return this.signatureTmp;
32629     },
32630     // private
32631     reset : function(){
32632         this.signatureTmp = '';
32633         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
32634         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
32635         this.isConfirmed = false;
32636         Roo.form.Signature.superclass.reset.call(this);
32637     },
32638     setSignature : function(s){
32639         this.signatureTmp = s;
32640         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
32641         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
32642         this.setValue(s);
32643         this.isConfirmed = false;
32644         Roo.form.Signature.superclass.reset.call(this);
32645     }, 
32646     test : function(){
32647 //        Roo.log(this.signPanel.dom.contentWindow.up())
32648     },
32649     //private
32650     setConfirmed : function(){
32651         
32652         
32653         
32654 //        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
32655     },
32656     // private
32657     confirmHandler : function(){
32658         if(!this.getSignature()){
32659             return;
32660         }
32661         
32662         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
32663         this.setValue(this.getSignature());
32664         this.isConfirmed = true;
32665         
32666         this.fireEvent('confirm', this);
32667     },
32668     // private
32669     // Subclasses should provide the validation implementation by overriding this
32670     validateValue : function(value){
32671         if(this.allowBlank){
32672             return true;
32673         }
32674         
32675         if(this.isConfirmed){
32676             return true;
32677         }
32678         return false;
32679     }
32680 });/*
32681  * Based on:
32682  * Ext JS Library 1.1.1
32683  * Copyright(c) 2006-2007, Ext JS, LLC.
32684  *
32685  * Originally Released Under LGPL - original licence link has changed is not relivant.
32686  *
32687  * Fork - LGPL
32688  * <script type="text/javascript">
32689  */
32690  
32691
32692 /**
32693  * @class Roo.form.ComboBox
32694  * @extends Roo.form.TriggerField
32695  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
32696  * @constructor
32697  * Create a new ComboBox.
32698  * @param {Object} config Configuration options
32699  */
32700 Roo.form.Select = function(config){
32701     Roo.form.Select.superclass.constructor.call(this, config);
32702      
32703 };
32704
32705 Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
32706     /**
32707      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
32708      */
32709     /**
32710      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
32711      * rendering into an Roo.Editor, defaults to false)
32712      */
32713     /**
32714      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
32715      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
32716      */
32717     /**
32718      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
32719      */
32720     /**
32721      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
32722      * the dropdown list (defaults to undefined, with no header element)
32723      */
32724
32725      /**
32726      * @cfg {String/Roo.Template} tpl The template to use to render the output
32727      */
32728      
32729     // private
32730     defaultAutoCreate : {tag: "select"  },
32731     /**
32732      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
32733      */
32734     listWidth: undefined,
32735     /**
32736      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
32737      * mode = 'remote' or 'text' if mode = 'local')
32738      */
32739     displayField: undefined,
32740     /**
32741      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
32742      * mode = 'remote' or 'value' if mode = 'local'). 
32743      * Note: use of a valueField requires the user make a selection
32744      * in order for a value to be mapped.
32745      */
32746     valueField: undefined,
32747     
32748     
32749     /**
32750      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
32751      * field's data value (defaults to the underlying DOM element's name)
32752      */
32753     hiddenName: undefined,
32754     /**
32755      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
32756      */
32757     listClass: '',
32758     /**
32759      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
32760      */
32761     selectedClass: 'x-combo-selected',
32762     /**
32763      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
32764      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
32765      * which displays a downward arrow icon).
32766      */
32767     triggerClass : 'x-form-arrow-trigger',
32768     /**
32769      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
32770      */
32771     shadow:'sides',
32772     /**
32773      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
32774      * anchor positions (defaults to 'tl-bl')
32775      */
32776     listAlign: 'tl-bl?',
32777     /**
32778      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
32779      */
32780     maxHeight: 300,
32781     /**
32782      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
32783      * query specified by the allQuery config option (defaults to 'query')
32784      */
32785     triggerAction: 'query',
32786     /**
32787      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
32788      * (defaults to 4, does not apply if editable = false)
32789      */
32790     minChars : 4,
32791     /**
32792      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
32793      * delay (typeAheadDelay) if it matches a known value (defaults to false)
32794      */
32795     typeAhead: false,
32796     /**
32797      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
32798      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
32799      */
32800     queryDelay: 500,
32801     /**
32802      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
32803      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
32804      */
32805     pageSize: 0,
32806     /**
32807      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
32808      * when editable = true (defaults to false)
32809      */
32810     selectOnFocus:false,
32811     /**
32812      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
32813      */
32814     queryParam: 'query',
32815     /**
32816      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
32817      * when mode = 'remote' (defaults to 'Loading...')
32818      */
32819     loadingText: 'Loading...',
32820     /**
32821      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
32822      */
32823     resizable: false,
32824     /**
32825      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
32826      */
32827     handleHeight : 8,
32828     /**
32829      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
32830      * traditional select (defaults to true)
32831      */
32832     editable: true,
32833     /**
32834      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
32835      */
32836     allQuery: '',
32837     /**
32838      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
32839      */
32840     mode: 'remote',
32841     /**
32842      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
32843      * listWidth has a higher value)
32844      */
32845     minListWidth : 70,
32846     /**
32847      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
32848      * allow the user to set arbitrary text into the field (defaults to false)
32849      */
32850     forceSelection:false,
32851     /**
32852      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
32853      * if typeAhead = true (defaults to 250)
32854      */
32855     typeAheadDelay : 250,
32856     /**
32857      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
32858      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
32859      */
32860     valueNotFoundText : undefined,
32861     
32862     /**
32863      * @cfg {String} defaultValue The value displayed after loading the store.
32864      */
32865     defaultValue: '',
32866     
32867     /**
32868      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
32869      */
32870     blockFocus : false,
32871     
32872     /**
32873      * @cfg {Boolean} disableClear Disable showing of clear button.
32874      */
32875     disableClear : false,
32876     /**
32877      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
32878      */
32879     alwaysQuery : false,
32880     
32881     //private
32882     addicon : false,
32883     editicon: false,
32884     
32885     // element that contains real text value.. (when hidden is used..)
32886      
32887     // private
32888     onRender : function(ct, position){
32889         Roo.form.Field.prototype.onRender.call(this, ct, position);
32890         
32891         if(this.store){
32892             this.store.on('beforeload', this.onBeforeLoad, this);
32893             this.store.on('load', this.onLoad, this);
32894             this.store.on('loadexception', this.onLoadException, this);
32895             this.store.load({});
32896         }
32897         
32898         
32899         
32900     },
32901
32902     // private
32903     initEvents : function(){
32904         //Roo.form.ComboBox.superclass.initEvents.call(this);
32905  
32906     },
32907
32908     onDestroy : function(){
32909        
32910         if(this.store){
32911             this.store.un('beforeload', this.onBeforeLoad, this);
32912             this.store.un('load', this.onLoad, this);
32913             this.store.un('loadexception', this.onLoadException, this);
32914         }
32915         //Roo.form.ComboBox.superclass.onDestroy.call(this);
32916     },
32917
32918     // private
32919     fireKey : function(e){
32920         if(e.isNavKeyPress() && !this.list.isVisible()){
32921             this.fireEvent("specialkey", this, e);
32922         }
32923     },
32924
32925     // private
32926     onResize: function(w, h){
32927         
32928         return; 
32929     
32930         
32931     },
32932
32933     /**
32934      * Allow or prevent the user from directly editing the field text.  If false is passed,
32935      * the user will only be able to select from the items defined in the dropdown list.  This method
32936      * is the runtime equivalent of setting the 'editable' config option at config time.
32937      * @param {Boolean} value True to allow the user to directly edit the field text
32938      */
32939     setEditable : function(value){
32940          
32941     },
32942
32943     // private
32944     onBeforeLoad : function(){
32945         
32946         Roo.log("Select before load");
32947         return;
32948     
32949         this.innerList.update(this.loadingText ?
32950                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
32951         //this.restrictHeight();
32952         this.selectedIndex = -1;
32953     },
32954
32955     // private
32956     onLoad : function(){
32957
32958     
32959         var dom = this.el.dom;
32960         dom.innerHTML = '';
32961          var od = dom.ownerDocument;
32962          
32963         if (this.emptyText) {
32964             var op = od.createElement('option');
32965             op.setAttribute('value', '');
32966             op.innerHTML = String.format('{0}', this.emptyText);
32967             dom.appendChild(op);
32968         }
32969         if(this.store.getCount() > 0){
32970            
32971             var vf = this.valueField;
32972             var df = this.displayField;
32973             this.store.data.each(function(r) {
32974                 // which colmsn to use... testing - cdoe / title..
32975                 var op = od.createElement('option');
32976                 op.setAttribute('value', r.data[vf]);
32977                 op.innerHTML = String.format('{0}', r.data[df]);
32978                 dom.appendChild(op);
32979             });
32980             if (typeof(this.defaultValue != 'undefined')) {
32981                 this.setValue(this.defaultValue);
32982             }
32983             
32984              
32985         }else{
32986             //this.onEmptyResults();
32987         }
32988         //this.el.focus();
32989     },
32990     // private
32991     onLoadException : function()
32992     {
32993         dom.innerHTML = '';
32994             
32995         Roo.log("Select on load exception");
32996         return;
32997     
32998         this.collapse();
32999         Roo.log(this.store.reader.jsonData);
33000         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
33001             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
33002         }
33003         
33004         
33005     },
33006     // private
33007     onTypeAhead : function(){
33008          
33009     },
33010
33011     // private
33012     onSelect : function(record, index){
33013         Roo.log('on select?');
33014         return;
33015         if(this.fireEvent('beforeselect', this, record, index) !== false){
33016             this.setFromData(index > -1 ? record.data : false);
33017             this.collapse();
33018             this.fireEvent('select', this, record, index);
33019         }
33020     },
33021
33022     /**
33023      * Returns the currently selected field value or empty string if no value is set.
33024      * @return {String} value The selected value
33025      */
33026     getValue : function(){
33027         var dom = this.el.dom;
33028         this.value = dom.options[dom.selectedIndex].value;
33029         return this.value;
33030         
33031     },
33032
33033     /**
33034      * Clears any text/value currently set in the field
33035      */
33036     clearValue : function(){
33037         this.value = '';
33038         this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
33039         
33040     },
33041
33042     /**
33043      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
33044      * will be displayed in the field.  If the value does not match the data value of an existing item,
33045      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
33046      * Otherwise the field will be blank (although the value will still be set).
33047      * @param {String} value The value to match
33048      */
33049     setValue : function(v){
33050         var d = this.el.dom;
33051         for (var i =0; i < d.options.length;i++) {
33052             if (v == d.options[i].value) {
33053                 d.selectedIndex = i;
33054                 this.value = v;
33055                 return;
33056             }
33057         }
33058         this.clearValue();
33059     },
33060     /**
33061      * @property {Object} the last set data for the element
33062      */
33063     
33064     lastData : false,
33065     /**
33066      * Sets the value of the field based on a object which is related to the record format for the store.
33067      * @param {Object} value the value to set as. or false on reset?
33068      */
33069     setFromData : function(o){
33070         Roo.log('setfrom data?');
33071          
33072         
33073         
33074     },
33075     // private
33076     reset : function(){
33077         this.clearValue();
33078     },
33079     // private
33080     findRecord : function(prop, value){
33081         
33082         return false;
33083     
33084         var record;
33085         if(this.store.getCount() > 0){
33086             this.store.each(function(r){
33087                 if(r.data[prop] == value){
33088                     record = r;
33089                     return false;
33090                 }
33091                 return true;
33092             });
33093         }
33094         return record;
33095     },
33096     
33097     getName: function()
33098     {
33099         // returns hidden if it's set..
33100         if (!this.rendered) {return ''};
33101         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
33102         
33103     },
33104      
33105
33106     
33107
33108     // private
33109     onEmptyResults : function(){
33110         Roo.log('empty results');
33111         //this.collapse();
33112     },
33113
33114     /**
33115      * Returns true if the dropdown list is expanded, else false.
33116      */
33117     isExpanded : function(){
33118         return false;
33119     },
33120
33121     /**
33122      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
33123      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
33124      * @param {String} value The data value of the item to select
33125      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
33126      * selected item if it is not currently in view (defaults to true)
33127      * @return {Boolean} True if the value matched an item in the list, else false
33128      */
33129     selectByValue : function(v, scrollIntoView){
33130         Roo.log('select By Value');
33131         return false;
33132     
33133         if(v !== undefined && v !== null){
33134             var r = this.findRecord(this.valueField || this.displayField, v);
33135             if(r){
33136                 this.select(this.store.indexOf(r), scrollIntoView);
33137                 return true;
33138             }
33139         }
33140         return false;
33141     },
33142
33143     /**
33144      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
33145      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
33146      * @param {Number} index The zero-based index of the list item to select
33147      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
33148      * selected item if it is not currently in view (defaults to true)
33149      */
33150     select : function(index, scrollIntoView){
33151         Roo.log('select ');
33152         return  ;
33153         
33154         this.selectedIndex = index;
33155         this.view.select(index);
33156         if(scrollIntoView !== false){
33157             var el = this.view.getNode(index);
33158             if(el){
33159                 this.innerList.scrollChildIntoView(el, false);
33160             }
33161         }
33162     },
33163
33164       
33165
33166     // private
33167     validateBlur : function(){
33168         
33169         return;
33170         
33171     },
33172
33173     // private
33174     initQuery : function(){
33175         this.doQuery(this.getRawValue());
33176     },
33177
33178     // private
33179     doForce : function(){
33180         if(this.el.dom.value.length > 0){
33181             this.el.dom.value =
33182                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
33183              
33184         }
33185     },
33186
33187     /**
33188      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
33189      * query allowing the query action to be canceled if needed.
33190      * @param {String} query The SQL query to execute
33191      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
33192      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
33193      * saved in the current store (defaults to false)
33194      */
33195     doQuery : function(q, forceAll){
33196         
33197         Roo.log('doQuery?');
33198         if(q === undefined || q === null){
33199             q = '';
33200         }
33201         var qe = {
33202             query: q,
33203             forceAll: forceAll,
33204             combo: this,
33205             cancel:false
33206         };
33207         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
33208             return false;
33209         }
33210         q = qe.query;
33211         forceAll = qe.forceAll;
33212         if(forceAll === true || (q.length >= this.minChars)){
33213             if(this.lastQuery != q || this.alwaysQuery){
33214                 this.lastQuery = q;
33215                 if(this.mode == 'local'){
33216                     this.selectedIndex = -1;
33217                     if(forceAll){
33218                         this.store.clearFilter();
33219                     }else{
33220                         this.store.filter(this.displayField, q);
33221                     }
33222                     this.onLoad();
33223                 }else{
33224                     this.store.baseParams[this.queryParam] = q;
33225                     this.store.load({
33226                         params: this.getParams(q)
33227                     });
33228                     this.expand();
33229                 }
33230             }else{
33231                 this.selectedIndex = -1;
33232                 this.onLoad();   
33233             }
33234         }
33235     },
33236
33237     // private
33238     getParams : function(q){
33239         var p = {};
33240         //p[this.queryParam] = q;
33241         if(this.pageSize){
33242             p.start = 0;
33243             p.limit = this.pageSize;
33244         }
33245         return p;
33246     },
33247
33248     /**
33249      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
33250      */
33251     collapse : function(){
33252         
33253     },
33254
33255     // private
33256     collapseIf : function(e){
33257         
33258     },
33259
33260     /**
33261      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
33262      */
33263     expand : function(){
33264         
33265     } ,
33266
33267     // private
33268      
33269
33270     /** 
33271     * @cfg {Boolean} grow 
33272     * @hide 
33273     */
33274     /** 
33275     * @cfg {Number} growMin 
33276     * @hide 
33277     */
33278     /** 
33279     * @cfg {Number} growMax 
33280     * @hide 
33281     */
33282     /**
33283      * @hide
33284      * @method autoSize
33285      */
33286     
33287     setWidth : function()
33288     {
33289         
33290     },
33291     getResizeEl : function(){
33292         return this.el;
33293     }
33294 });//<script type="text/javasscript">
33295  
33296
33297 /**
33298  * @class Roo.DDView
33299  * A DnD enabled version of Roo.View.
33300  * @param {Element/String} container The Element in which to create the View.
33301  * @param {String} tpl The template string used to create the markup for each element of the View
33302  * @param {Object} config The configuration properties. These include all the config options of
33303  * {@link Roo.View} plus some specific to this class.<br>
33304  * <p>
33305  * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
33306  * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
33307  * <p>
33308  * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
33309 .x-view-drag-insert-above {
33310         border-top:1px dotted #3366cc;
33311 }
33312 .x-view-drag-insert-below {
33313         border-bottom:1px dotted #3366cc;
33314 }
33315 </code></pre>
33316  * 
33317  */
33318  
33319 Roo.DDView = function(container, tpl, config) {
33320     Roo.DDView.superclass.constructor.apply(this, arguments);
33321     this.getEl().setStyle("outline", "0px none");
33322     this.getEl().unselectable();
33323     if (this.dragGroup) {
33324         this.setDraggable(this.dragGroup.split(","));
33325     }
33326     if (this.dropGroup) {
33327         this.setDroppable(this.dropGroup.split(","));
33328     }
33329     if (this.deletable) {
33330         this.setDeletable();
33331     }
33332     this.isDirtyFlag = false;
33333         this.addEvents({
33334                 "drop" : true
33335         });
33336 };
33337
33338 Roo.extend(Roo.DDView, Roo.View, {
33339 /**     @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
33340 /**     @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
33341 /**     @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
33342 /**     @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
33343
33344         isFormField: true,
33345
33346         reset: Roo.emptyFn,
33347         
33348         clearInvalid: Roo.form.Field.prototype.clearInvalid,
33349
33350         validate: function() {
33351                 return true;
33352         },
33353         
33354         destroy: function() {
33355                 this.purgeListeners();
33356                 this.getEl.removeAllListeners();
33357                 this.getEl().remove();
33358                 if (this.dragZone) {
33359                         if (this.dragZone.destroy) {
33360                                 this.dragZone.destroy();
33361                         }
33362                 }
33363                 if (this.dropZone) {
33364                         if (this.dropZone.destroy) {
33365                                 this.dropZone.destroy();
33366                         }
33367                 }
33368         },
33369
33370 /**     Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
33371         getName: function() {
33372                 return this.name;
33373         },
33374
33375 /**     Loads the View from a JSON string representing the Records to put into the Store. */
33376         setValue: function(v) {
33377                 if (!this.store) {
33378                         throw "DDView.setValue(). DDView must be constructed with a valid Store";
33379                 }
33380                 var data = {};
33381                 data[this.store.reader.meta.root] = v ? [].concat(v) : [];
33382                 this.store.proxy = new Roo.data.MemoryProxy(data);
33383                 this.store.load();
33384         },
33385
33386 /**     @return {String} a parenthesised list of the ids of the Records in the View. */
33387         getValue: function() {
33388                 var result = '(';
33389                 this.store.each(function(rec) {
33390                         result += rec.id + ',';
33391                 });
33392                 return result.substr(0, result.length - 1) + ')';
33393         },
33394         
33395         getIds: function() {
33396                 var i = 0, result = new Array(this.store.getCount());
33397                 this.store.each(function(rec) {
33398                         result[i++] = rec.id;
33399                 });
33400                 return result;
33401         },
33402         
33403         isDirty: function() {
33404                 return this.isDirtyFlag;
33405         },
33406
33407 /**
33408  *      Part of the Roo.dd.DropZone interface. If no target node is found, the
33409  *      whole Element becomes the target, and this causes the drop gesture to append.
33410  */
33411     getTargetFromEvent : function(e) {
33412                 var target = e.getTarget();
33413                 while ((target !== null) && (target.parentNode != this.el.dom)) {
33414                 target = target.parentNode;
33415                 }
33416                 if (!target) {
33417                         target = this.el.dom.lastChild || this.el.dom;
33418                 }
33419                 return target;
33420     },
33421
33422 /**
33423  *      Create the drag data which consists of an object which has the property "ddel" as
33424  *      the drag proxy element. 
33425  */
33426     getDragData : function(e) {
33427         var target = this.findItemFromChild(e.getTarget());
33428                 if(target) {
33429                         this.handleSelection(e);
33430                         var selNodes = this.getSelectedNodes();
33431             var dragData = {
33432                 source: this,
33433                 copy: this.copy || (this.allowCopy && e.ctrlKey),
33434                 nodes: selNodes,
33435                 records: []
33436                         };
33437                         var selectedIndices = this.getSelectedIndexes();
33438                         for (var i = 0; i < selectedIndices.length; i++) {
33439                                 dragData.records.push(this.store.getAt(selectedIndices[i]));
33440                         }
33441                         if (selNodes.length == 1) {
33442                                 dragData.ddel = target.cloneNode(true); // the div element
33443                         } else {
33444                                 var div = document.createElement('div'); // create the multi element drag "ghost"
33445                                 div.className = 'multi-proxy';
33446                                 for (var i = 0, len = selNodes.length; i < len; i++) {
33447                                         div.appendChild(selNodes[i].cloneNode(true));
33448                                 }
33449                                 dragData.ddel = div;
33450                         }
33451             //console.log(dragData)
33452             //console.log(dragData.ddel.innerHTML)
33453                         return dragData;
33454                 }
33455         //console.log('nodragData')
33456                 return false;
33457     },
33458     
33459 /**     Specify to which ddGroup items in this DDView may be dragged. */
33460     setDraggable: function(ddGroup) {
33461         if (ddGroup instanceof Array) {
33462                 Roo.each(ddGroup, this.setDraggable, this);
33463                 return;
33464         }
33465         if (this.dragZone) {
33466                 this.dragZone.addToGroup(ddGroup);
33467         } else {
33468                         this.dragZone = new Roo.dd.DragZone(this.getEl(), {
33469                                 containerScroll: true,
33470                                 ddGroup: ddGroup 
33471
33472                         });
33473 //                      Draggability implies selection. DragZone's mousedown selects the element.
33474                         if (!this.multiSelect) { this.singleSelect = true; }
33475
33476 //                      Wire the DragZone's handlers up to methods in *this*
33477                         this.dragZone.getDragData = this.getDragData.createDelegate(this);
33478                 }
33479     },
33480
33481 /**     Specify from which ddGroup this DDView accepts drops. */
33482     setDroppable: function(ddGroup) {
33483         if (ddGroup instanceof Array) {
33484                 Roo.each(ddGroup, this.setDroppable, this);
33485                 return;
33486         }
33487         if (this.dropZone) {
33488                 this.dropZone.addToGroup(ddGroup);
33489         } else {
33490                         this.dropZone = new Roo.dd.DropZone(this.getEl(), {
33491                                 containerScroll: true,
33492                                 ddGroup: ddGroup
33493                         });
33494
33495 //                      Wire the DropZone's handlers up to methods in *this*
33496                         this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
33497                         this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
33498                         this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
33499                         this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
33500                         this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
33501                 }
33502     },
33503
33504 /**     Decide whether to drop above or below a View node. */
33505     getDropPoint : function(e, n, dd){
33506         if (n == this.el.dom) { return "above"; }
33507                 var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
33508                 var c = t + (b - t) / 2;
33509                 var y = Roo.lib.Event.getPageY(e);
33510                 if(y <= c) {
33511                         return "above";
33512                 }else{
33513                         return "below";
33514                 }
33515     },
33516
33517     onNodeEnter : function(n, dd, e, data){
33518                 return false;
33519     },
33520     
33521     onNodeOver : function(n, dd, e, data){
33522                 var pt = this.getDropPoint(e, n, dd);
33523                 // set the insert point style on the target node
33524                 var dragElClass = this.dropNotAllowed;
33525                 if (pt) {
33526                         var targetElClass;
33527                         if (pt == "above"){
33528                                 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
33529                                 targetElClass = "x-view-drag-insert-above";
33530                         } else {
33531                                 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
33532                                 targetElClass = "x-view-drag-insert-below";
33533                         }
33534                         if (this.lastInsertClass != targetElClass){
33535                                 Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
33536                                 this.lastInsertClass = targetElClass;
33537                         }
33538                 }
33539                 return dragElClass;
33540         },
33541
33542     onNodeOut : function(n, dd, e, data){
33543                 this.removeDropIndicators(n);
33544     },
33545
33546     onNodeDrop : function(n, dd, e, data){
33547         if (this.fireEvent("drop", this, n, dd, e, data) === false) {
33548                 return false;
33549         }
33550         var pt = this.getDropPoint(e, n, dd);
33551                 var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
33552                 if (pt == "below") { insertAt++; }
33553                 for (var i = 0; i < data.records.length; i++) {
33554                         var r = data.records[i];
33555                         var dup = this.store.getById(r.id);
33556                         if (dup && (dd != this.dragZone)) {
33557                                 Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
33558                         } else {
33559                                 if (data.copy) {
33560                                         this.store.insert(insertAt++, r.copy());
33561                                 } else {
33562                                         data.source.isDirtyFlag = true;
33563                                         r.store.remove(r);
33564                                         this.store.insert(insertAt++, r);
33565                                 }
33566                                 this.isDirtyFlag = true;
33567                         }
33568                 }
33569                 this.dragZone.cachedTarget = null;
33570                 return true;
33571     },
33572
33573     removeDropIndicators : function(n){
33574                 if(n){
33575                         Roo.fly(n).removeClass([
33576                                 "x-view-drag-insert-above",
33577                                 "x-view-drag-insert-below"]);
33578                         this.lastInsertClass = "_noclass";
33579                 }
33580     },
33581
33582 /**
33583  *      Utility method. Add a delete option to the DDView's context menu.
33584  *      @param {String} imageUrl The URL of the "delete" icon image.
33585  */
33586         setDeletable: function(imageUrl) {
33587                 if (!this.singleSelect && !this.multiSelect) {
33588                         this.singleSelect = true;
33589                 }
33590                 var c = this.getContextMenu();
33591                 this.contextMenu.on("itemclick", function(item) {
33592                         switch (item.id) {
33593                                 case "delete":
33594                                         this.remove(this.getSelectedIndexes());
33595                                         break;
33596                         }
33597                 }, this);
33598                 this.contextMenu.add({
33599                         icon: imageUrl,
33600                         id: "delete",
33601                         text: 'Delete'
33602                 });
33603         },
33604         
33605 /**     Return the context menu for this DDView. */
33606         getContextMenu: function() {
33607                 if (!this.contextMenu) {
33608 //                      Create the View's context menu
33609                         this.contextMenu = new Roo.menu.Menu({
33610                                 id: this.id + "-contextmenu"
33611                         });
33612                         this.el.on("contextmenu", this.showContextMenu, this);
33613                 }
33614                 return this.contextMenu;
33615         },
33616         
33617         disableContextMenu: function() {
33618                 if (this.contextMenu) {
33619                         this.el.un("contextmenu", this.showContextMenu, this);
33620                 }
33621         },
33622
33623         showContextMenu: function(e, item) {
33624         item = this.findItemFromChild(e.getTarget());
33625                 if (item) {
33626                         e.stopEvent();
33627                         this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
33628                         this.contextMenu.showAt(e.getXY());
33629             }
33630     },
33631
33632 /**
33633  *      Remove {@link Roo.data.Record}s at the specified indices.
33634  *      @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
33635  */
33636     remove: function(selectedIndices) {
33637                 selectedIndices = [].concat(selectedIndices);
33638                 for (var i = 0; i < selectedIndices.length; i++) {
33639                         var rec = this.store.getAt(selectedIndices[i]);
33640                         this.store.remove(rec);
33641                 }
33642     },
33643
33644 /**
33645  *      Double click fires the event, but also, if this is draggable, and there is only one other
33646  *      related DropZone, it transfers the selected node.
33647  */
33648     onDblClick : function(e){
33649         var item = this.findItemFromChild(e.getTarget());
33650         if(item){
33651             if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
33652                 return false;
33653             }
33654             if (this.dragGroup) {
33655                     var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
33656                     while (targets.indexOf(this.dropZone) > -1) {
33657                             targets.remove(this.dropZone);
33658                                 }
33659                     if (targets.length == 1) {
33660                                         this.dragZone.cachedTarget = null;
33661                         var el = Roo.get(targets[0].getEl());
33662                         var box = el.getBox(true);
33663                         targets[0].onNodeDrop(el.dom, {
33664                                 target: el.dom,
33665                                 xy: [box.x, box.y + box.height - 1]
33666                         }, null, this.getDragData(e));
33667                     }
33668                 }
33669         }
33670     },
33671     
33672     handleSelection: function(e) {
33673                 this.dragZone.cachedTarget = null;
33674         var item = this.findItemFromChild(e.getTarget());
33675         if (!item) {
33676                 this.clearSelections(true);
33677                 return;
33678         }
33679                 if (item && (this.multiSelect || this.singleSelect)){
33680                         if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
33681                                 this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
33682                         }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
33683                                 this.unselect(item);
33684                         } else {
33685                                 this.select(item, this.multiSelect && e.ctrlKey);
33686                                 this.lastSelection = item;
33687                         }
33688                 }
33689     },
33690
33691     onItemClick : function(item, index, e){
33692                 if(this.fireEvent("beforeclick", this, index, item, e) === false){
33693                         return false;
33694                 }
33695                 return true;
33696     },
33697
33698     unselect : function(nodeInfo, suppressEvent){
33699                 var node = this.getNode(nodeInfo);
33700                 if(node && this.isSelected(node)){
33701                         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
33702                                 Roo.fly(node).removeClass(this.selectedClass);
33703                                 this.selections.remove(node);
33704                                 if(!suppressEvent){
33705                                         this.fireEvent("selectionchange", this, this.selections);
33706                                 }
33707                         }
33708                 }
33709     }
33710 });
33711 /*
33712  * Based on:
33713  * Ext JS Library 1.1.1
33714  * Copyright(c) 2006-2007, Ext JS, LLC.
33715  *
33716  * Originally Released Under LGPL - original licence link has changed is not relivant.
33717  *
33718  * Fork - LGPL
33719  * <script type="text/javascript">
33720  */
33721  
33722 /**
33723  * @class Roo.LayoutManager
33724  * @extends Roo.util.Observable
33725  * Base class for layout managers.
33726  */
33727 Roo.LayoutManager = function(container, config){
33728     Roo.LayoutManager.superclass.constructor.call(this);
33729     this.el = Roo.get(container);
33730     // ie scrollbar fix
33731     if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
33732         document.body.scroll = "no";
33733     }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
33734         this.el.position('relative');
33735     }
33736     this.id = this.el.id;
33737     this.el.addClass("x-layout-container");
33738     /** false to disable window resize monitoring @type Boolean */
33739     this.monitorWindowResize = true;
33740     this.regions = {};
33741     this.addEvents({
33742         /**
33743          * @event layout
33744          * Fires when a layout is performed. 
33745          * @param {Roo.LayoutManager} this
33746          */
33747         "layout" : true,
33748         /**
33749          * @event regionresized
33750          * Fires when the user resizes a region. 
33751          * @param {Roo.LayoutRegion} region The resized region
33752          * @param {Number} newSize The new size (width for east/west, height for north/south)
33753          */
33754         "regionresized" : true,
33755         /**
33756          * @event regioncollapsed
33757          * Fires when a region is collapsed. 
33758          * @param {Roo.LayoutRegion} region The collapsed region
33759          */
33760         "regioncollapsed" : true,
33761         /**
33762          * @event regionexpanded
33763          * Fires when a region is expanded.  
33764          * @param {Roo.LayoutRegion} region The expanded region
33765          */
33766         "regionexpanded" : true
33767     });
33768     this.updating = false;
33769     Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
33770 };
33771
33772 Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
33773     /**
33774      * Returns true if this layout is currently being updated
33775      * @return {Boolean}
33776      */
33777     isUpdating : function(){
33778         return this.updating; 
33779     },
33780     
33781     /**
33782      * Suspend the LayoutManager from doing auto-layouts while
33783      * making multiple add or remove calls
33784      */
33785     beginUpdate : function(){
33786         this.updating = true;    
33787     },
33788     
33789     /**
33790      * Restore auto-layouts and optionally disable the manager from performing a layout
33791      * @param {Boolean} noLayout true to disable a layout update 
33792      */
33793     endUpdate : function(noLayout){
33794         this.updating = false;
33795         if(!noLayout){
33796             this.layout();
33797         }    
33798     },
33799     
33800     layout: function(){
33801         
33802     },
33803     
33804     onRegionResized : function(region, newSize){
33805         this.fireEvent("regionresized", region, newSize);
33806         this.layout();
33807     },
33808     
33809     onRegionCollapsed : function(region){
33810         this.fireEvent("regioncollapsed", region);
33811     },
33812     
33813     onRegionExpanded : function(region){
33814         this.fireEvent("regionexpanded", region);
33815     },
33816         
33817     /**
33818      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
33819      * performs box-model adjustments.
33820      * @return {Object} The size as an object {width: (the width), height: (the height)}
33821      */
33822     getViewSize : function(){
33823         var size;
33824         if(this.el.dom != document.body){
33825             size = this.el.getSize();
33826         }else{
33827             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
33828         }
33829         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
33830         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
33831         return size;
33832     },
33833     
33834     /**
33835      * Returns the Element this layout is bound to.
33836      * @return {Roo.Element}
33837      */
33838     getEl : function(){
33839         return this.el;
33840     },
33841     
33842     /**
33843      * Returns the specified region.
33844      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
33845      * @return {Roo.LayoutRegion}
33846      */
33847     getRegion : function(target){
33848         return this.regions[target.toLowerCase()];
33849     },
33850     
33851     onWindowResize : function(){
33852         if(this.monitorWindowResize){
33853             this.layout();
33854         }
33855     }
33856 });/*
33857  * Based on:
33858  * Ext JS Library 1.1.1
33859  * Copyright(c) 2006-2007, Ext JS, LLC.
33860  *
33861  * Originally Released Under LGPL - original licence link has changed is not relivant.
33862  *
33863  * Fork - LGPL
33864  * <script type="text/javascript">
33865  */
33866 /**
33867  * @class Roo.BorderLayout
33868  * @extends Roo.LayoutManager
33869  * @children Roo.ContentPanel
33870  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
33871  * please see: <br><br>
33872  * <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>
33873  * <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>
33874  * Example:
33875  <pre><code>
33876  var layout = new Roo.BorderLayout(document.body, {
33877     north: {
33878         initialSize: 25,
33879         titlebar: false
33880     },
33881     west: {
33882         split:true,
33883         initialSize: 200,
33884         minSize: 175,
33885         maxSize: 400,
33886         titlebar: true,
33887         collapsible: true
33888     },
33889     east: {
33890         split:true,
33891         initialSize: 202,
33892         minSize: 175,
33893         maxSize: 400,
33894         titlebar: true,
33895         collapsible: true
33896     },
33897     south: {
33898         split:true,
33899         initialSize: 100,
33900         minSize: 100,
33901         maxSize: 200,
33902         titlebar: true,
33903         collapsible: true
33904     },
33905     center: {
33906         titlebar: true,
33907         autoScroll:true,
33908         resizeTabs: true,
33909         minTabWidth: 50,
33910         preferredTabWidth: 150
33911     }
33912 });
33913
33914 // shorthand
33915 var CP = Roo.ContentPanel;
33916
33917 layout.beginUpdate();
33918 layout.add("north", new CP("north", "North"));
33919 layout.add("south", new CP("south", {title: "South", closable: true}));
33920 layout.add("west", new CP("west", {title: "West"}));
33921 layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
33922 layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
33923 layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
33924 layout.getRegion("center").showPanel("center1");
33925 layout.endUpdate();
33926 </code></pre>
33927
33928 <b>The container the layout is rendered into can be either the body element or any other element.
33929 If it is not the body element, the container needs to either be an absolute positioned element,
33930 or you will need to add "position:relative" to the css of the container.  You will also need to specify
33931 the container size if it is not the body element.</b>
33932
33933 * @constructor
33934 * Create a new BorderLayout
33935 * @param {String/HTMLElement/Element} container The container this layout is bound to
33936 * @param {Object} config Configuration options
33937  */
33938 Roo.BorderLayout = function(container, config){
33939     config = config || {};
33940     Roo.BorderLayout.superclass.constructor.call(this, container, config);
33941     this.factory = config.factory || Roo.BorderLayout.RegionFactory;
33942     for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
33943         var target = this.factory.validRegions[i];
33944         if(config[target]){
33945             this.addRegion(target, config[target]);
33946         }
33947     }
33948 };
33949
33950 Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
33951         
33952         /**
33953          * @cfg {Roo.LayoutRegion} east
33954          */
33955         /**
33956          * @cfg {Roo.LayoutRegion} west
33957          */
33958         /**
33959          * @cfg {Roo.LayoutRegion} north
33960          */
33961         /**
33962          * @cfg {Roo.LayoutRegion} south
33963          */
33964         /**
33965          * @cfg {Roo.LayoutRegion} center
33966          */
33967     /**
33968      * Creates and adds a new region if it doesn't already exist.
33969      * @param {String} target The target region key (north, south, east, west or center).
33970      * @param {Object} config The regions config object
33971      * @return {BorderLayoutRegion} The new region
33972      */
33973     addRegion : function(target, config){
33974         if(!this.regions[target]){
33975             var r = this.factory.create(target, this, config);
33976             this.bindRegion(target, r);
33977         }
33978         return this.regions[target];
33979     },
33980
33981     // private (kinda)
33982     bindRegion : function(name, r){
33983         this.regions[name] = r;
33984         r.on("visibilitychange", this.layout, this);
33985         r.on("paneladded", this.layout, this);
33986         r.on("panelremoved", this.layout, this);
33987         r.on("invalidated", this.layout, this);
33988         r.on("resized", this.onRegionResized, this);
33989         r.on("collapsed", this.onRegionCollapsed, this);
33990         r.on("expanded", this.onRegionExpanded, this);
33991     },
33992
33993     /**
33994      * Performs a layout update.
33995      */
33996     layout : function(){
33997         if(this.updating) {
33998             return;
33999         }
34000         var size = this.getViewSize();
34001         var w = size.width;
34002         var h = size.height;
34003         var centerW = w;
34004         var centerH = h;
34005         var centerY = 0;
34006         var centerX = 0;
34007         //var x = 0, y = 0;
34008
34009         var rs = this.regions;
34010         var north = rs["north"];
34011         var south = rs["south"]; 
34012         var west = rs["west"];
34013         var east = rs["east"];
34014         var center = rs["center"];
34015         //if(this.hideOnLayout){ // not supported anymore
34016             //c.el.setStyle("display", "none");
34017         //}
34018         if(north && north.isVisible()){
34019             var b = north.getBox();
34020             var m = north.getMargins();
34021             b.width = w - (m.left+m.right);
34022             b.x = m.left;
34023             b.y = m.top;
34024             centerY = b.height + b.y + m.bottom;
34025             centerH -= centerY;
34026             north.updateBox(this.safeBox(b));
34027         }
34028         if(south && south.isVisible()){
34029             var b = south.getBox();
34030             var m = south.getMargins();
34031             b.width = w - (m.left+m.right);
34032             b.x = m.left;
34033             var totalHeight = (b.height + m.top + m.bottom);
34034             b.y = h - totalHeight + m.top;
34035             centerH -= totalHeight;
34036             south.updateBox(this.safeBox(b));
34037         }
34038         if(west && west.isVisible()){
34039             var b = west.getBox();
34040             var m = west.getMargins();
34041             b.height = centerH - (m.top+m.bottom);
34042             b.x = m.left;
34043             b.y = centerY + m.top;
34044             var totalWidth = (b.width + m.left + m.right);
34045             centerX += totalWidth;
34046             centerW -= totalWidth;
34047             west.updateBox(this.safeBox(b));
34048         }
34049         if(east && east.isVisible()){
34050             var b = east.getBox();
34051             var m = east.getMargins();
34052             b.height = centerH - (m.top+m.bottom);
34053             var totalWidth = (b.width + m.left + m.right);
34054             b.x = w - totalWidth + m.left;
34055             b.y = centerY + m.top;
34056             centerW -= totalWidth;
34057             east.updateBox(this.safeBox(b));
34058         }
34059         if(center){
34060             var m = center.getMargins();
34061             var centerBox = {
34062                 x: centerX + m.left,
34063                 y: centerY + m.top,
34064                 width: centerW - (m.left+m.right),
34065                 height: centerH - (m.top+m.bottom)
34066             };
34067             //if(this.hideOnLayout){
34068                 //center.el.setStyle("display", "block");
34069             //}
34070             center.updateBox(this.safeBox(centerBox));
34071         }
34072         this.el.repaint();
34073         this.fireEvent("layout", this);
34074     },
34075
34076     // private
34077     safeBox : function(box){
34078         box.width = Math.max(0, box.width);
34079         box.height = Math.max(0, box.height);
34080         return box;
34081     },
34082
34083     /**
34084      * Adds a ContentPanel (or subclass) to this layout.
34085      * @param {String} target The target region key (north, south, east, west or center).
34086      * @param {Roo.ContentPanel} panel The panel to add
34087      * @return {Roo.ContentPanel} The added panel
34088      */
34089     add : function(target, panel){
34090          
34091         target = target.toLowerCase();
34092         return this.regions[target].add(panel);
34093     },
34094
34095     /**
34096      * Remove a ContentPanel (or subclass) to this layout.
34097      * @param {String} target The target region key (north, south, east, west or center).
34098      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
34099      * @return {Roo.ContentPanel} The removed panel
34100      */
34101     remove : function(target, panel){
34102         target = target.toLowerCase();
34103         return this.regions[target].remove(panel);
34104     },
34105
34106     /**
34107      * Searches all regions for a panel with the specified id
34108      * @param {String} panelId
34109      * @return {Roo.ContentPanel} The panel or null if it wasn't found
34110      */
34111     findPanel : function(panelId){
34112         var rs = this.regions;
34113         for(var target in rs){
34114             if(typeof rs[target] != "function"){
34115                 var p = rs[target].getPanel(panelId);
34116                 if(p){
34117                     return p;
34118                 }
34119             }
34120         }
34121         return null;
34122     },
34123
34124     /**
34125      * Searches all regions for a panel with the specified id and activates (shows) it.
34126      * @param {String/ContentPanel} panelId The panels id or the panel itself
34127      * @return {Roo.ContentPanel} The shown panel or null
34128      */
34129     showPanel : function(panelId) {
34130       var rs = this.regions;
34131       for(var target in rs){
34132          var r = rs[target];
34133          if(typeof r != "function"){
34134             if(r.hasPanel(panelId)){
34135                return r.showPanel(panelId);
34136             }
34137          }
34138       }
34139       return null;
34140    },
34141
34142    /**
34143      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
34144      * @param {Roo.state.Provider} provider (optional) An alternate state provider
34145      */
34146     restoreState : function(provider){
34147         if(!provider){
34148             provider = Roo.state.Manager;
34149         }
34150         var sm = new Roo.LayoutStateManager();
34151         sm.init(this, provider);
34152     },
34153
34154     /**
34155      * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
34156      * object should contain properties for each region to add ContentPanels to, and each property's value should be
34157      * a valid ContentPanel config object.  Example:
34158      * <pre><code>
34159 // Create the main layout
34160 var layout = new Roo.BorderLayout('main-ct', {
34161     west: {
34162         split:true,
34163         minSize: 175,
34164         titlebar: true
34165     },
34166     center: {
34167         title:'Components'
34168     }
34169 }, 'main-ct');
34170
34171 // Create and add multiple ContentPanels at once via configs
34172 layout.batchAdd({
34173    west: {
34174        id: 'source-files',
34175        autoCreate:true,
34176        title:'Ext Source Files',
34177        autoScroll:true,
34178        fitToFrame:true
34179    },
34180    center : {
34181        el: cview,
34182        autoScroll:true,
34183        fitToFrame:true,
34184        toolbar: tb,
34185        resizeEl:'cbody'
34186    }
34187 });
34188 </code></pre>
34189      * @param {Object} regions An object containing ContentPanel configs by region name
34190      */
34191     batchAdd : function(regions){
34192         this.beginUpdate();
34193         for(var rname in regions){
34194             var lr = this.regions[rname];
34195             if(lr){
34196                 this.addTypedPanels(lr, regions[rname]);
34197             }
34198         }
34199         this.endUpdate();
34200     },
34201
34202     // private
34203     addTypedPanels : function(lr, ps){
34204         if(typeof ps == 'string'){
34205             lr.add(new Roo.ContentPanel(ps));
34206         }
34207         else if(ps instanceof Array){
34208             for(var i =0, len = ps.length; i < len; i++){
34209                 this.addTypedPanels(lr, ps[i]);
34210             }
34211         }
34212         else if(!ps.events){ // raw config?
34213             var el = ps.el;
34214             delete ps.el; // prevent conflict
34215             lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
34216         }
34217         else {  // panel object assumed!
34218             lr.add(ps);
34219         }
34220     },
34221     /**
34222      * Adds a xtype elements to the layout.
34223      * <pre><code>
34224
34225 layout.addxtype({
34226        xtype : 'ContentPanel',
34227        region: 'west',
34228        items: [ .... ]
34229    }
34230 );
34231
34232 layout.addxtype({
34233         xtype : 'NestedLayoutPanel',
34234         region: 'west',
34235         layout: {
34236            center: { },
34237            west: { }   
34238         },
34239         items : [ ... list of content panels or nested layout panels.. ]
34240    }
34241 );
34242 </code></pre>
34243      * @param {Object} cfg Xtype definition of item to add.
34244      */
34245     addxtype : function(cfg)
34246     {
34247         // basically accepts a pannel...
34248         // can accept a layout region..!?!?
34249         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
34250         
34251         if (!cfg.xtype.match(/Panel$/)) {
34252             return false;
34253         }
34254         var ret = false;
34255         
34256         if (typeof(cfg.region) == 'undefined') {
34257             Roo.log("Failed to add Panel, region was not set");
34258             Roo.log(cfg);
34259             return false;
34260         }
34261         var region = cfg.region;
34262         delete cfg.region;
34263         
34264           
34265         var xitems = [];
34266         if (cfg.items) {
34267             xitems = cfg.items;
34268             delete cfg.items;
34269         }
34270         var nb = false;
34271         
34272         switch(cfg.xtype) 
34273         {
34274             case 'ContentPanel':  // ContentPanel (el, cfg)
34275             case 'ScrollPanel':  // ContentPanel (el, cfg)
34276             case 'ViewPanel': 
34277                 if(cfg.autoCreate) {
34278                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
34279                 } else {
34280                     var el = this.el.createChild();
34281                     ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
34282                 }
34283                 
34284                 this.add(region, ret);
34285                 break;
34286             
34287             
34288             case 'TreePanel': // our new panel!
34289                 cfg.el = this.el.createChild();
34290                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
34291                 this.add(region, ret);
34292                 break;
34293             
34294             case 'NestedLayoutPanel': 
34295                 // create a new Layout (which is  a Border Layout...
34296                 var el = this.el.createChild();
34297                 var clayout = cfg.layout;
34298                 delete cfg.layout;
34299                 clayout.items   = clayout.items  || [];
34300                 // replace this exitems with the clayout ones..
34301                 xitems = clayout.items;
34302                  
34303                 
34304                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
34305                     cfg.background = false;
34306                 }
34307                 var layout = new Roo.BorderLayout(el, clayout);
34308                 
34309                 ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
34310                 //console.log('adding nested layout panel '  + cfg.toSource());
34311                 this.add(region, ret);
34312                 nb = {}; /// find first...
34313                 break;
34314                 
34315             case 'GridPanel': 
34316             
34317                 // needs grid and region
34318                 
34319                 //var el = this.getRegion(region).el.createChild();
34320                 var el = this.el.createChild();
34321                 // create the grid first...
34322                 
34323                 var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
34324                 delete cfg.grid;
34325                 if (region == 'center' && this.active ) {
34326                     cfg.background = false;
34327                 }
34328                 ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
34329                 
34330                 this.add(region, ret);
34331                 if (cfg.background) {
34332                     ret.on('activate', function(gp) {
34333                         if (!gp.grid.rendered) {
34334                             gp.grid.render();
34335                         }
34336                     });
34337                 } else {
34338                     grid.render();
34339                 }
34340                 break;
34341            
34342            
34343            
34344                 
34345                 
34346                 
34347             default:
34348                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
34349                     
34350                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
34351                     this.add(region, ret);
34352                 } else {
34353                 
34354                     alert("Can not add '" + cfg.xtype + "' to BorderLayout");
34355                     return null;
34356                 }
34357                 
34358              // GridPanel (grid, cfg)
34359             
34360         }
34361         this.beginUpdate();
34362         // add children..
34363         var region = '';
34364         var abn = {};
34365         Roo.each(xitems, function(i)  {
34366             region = nb && i.region ? i.region : false;
34367             
34368             var add = ret.addxtype(i);
34369            
34370             if (region) {
34371                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
34372                 if (!i.background) {
34373                     abn[region] = nb[region] ;
34374                 }
34375             }
34376             
34377         });
34378         this.endUpdate();
34379
34380         // make the last non-background panel active..
34381         //if (nb) { Roo.log(abn); }
34382         if (nb) {
34383             
34384             for(var r in abn) {
34385                 region = this.getRegion(r);
34386                 if (region) {
34387                     // tried using nb[r], but it does not work..
34388                      
34389                     region.showPanel(abn[r]);
34390                    
34391                 }
34392             }
34393         }
34394         return ret;
34395         
34396     }
34397 });
34398
34399 /**
34400  * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
34401  * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
34402  * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
34403  * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
34404  * <pre><code>
34405 // shorthand
34406 var CP = Roo.ContentPanel;
34407
34408 var layout = Roo.BorderLayout.create({
34409     north: {
34410         initialSize: 25,
34411         titlebar: false,
34412         panels: [new CP("north", "North")]
34413     },
34414     west: {
34415         split:true,
34416         initialSize: 200,
34417         minSize: 175,
34418         maxSize: 400,
34419         titlebar: true,
34420         collapsible: true,
34421         panels: [new CP("west", {title: "West"})]
34422     },
34423     east: {
34424         split:true,
34425         initialSize: 202,
34426         minSize: 175,
34427         maxSize: 400,
34428         titlebar: true,
34429         collapsible: true,
34430         panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
34431     },
34432     south: {
34433         split:true,
34434         initialSize: 100,
34435         minSize: 100,
34436         maxSize: 200,
34437         titlebar: true,
34438         collapsible: true,
34439         panels: [new CP("south", {title: "South", closable: true})]
34440     },
34441     center: {
34442         titlebar: true,
34443         autoScroll:true,
34444         resizeTabs: true,
34445         minTabWidth: 50,
34446         preferredTabWidth: 150,
34447         panels: [
34448             new CP("center1", {title: "Close Me", closable: true}),
34449             new CP("center2", {title: "Center Panel", closable: false})
34450         ]
34451     }
34452 }, document.body);
34453
34454 layout.getRegion("center").showPanel("center1");
34455 </code></pre>
34456  * @param config
34457  * @param targetEl
34458  */
34459 Roo.BorderLayout.create = function(config, targetEl){
34460     var layout = new Roo.BorderLayout(targetEl || document.body, config);
34461     layout.beginUpdate();
34462     var regions = Roo.BorderLayout.RegionFactory.validRegions;
34463     for(var j = 0, jlen = regions.length; j < jlen; j++){
34464         var lr = regions[j];
34465         if(layout.regions[lr] && config[lr].panels){
34466             var r = layout.regions[lr];
34467             var ps = config[lr].panels;
34468             layout.addTypedPanels(r, ps);
34469         }
34470     }
34471     layout.endUpdate();
34472     return layout;
34473 };
34474
34475 // private
34476 Roo.BorderLayout.RegionFactory = {
34477     // private
34478     validRegions : ["north","south","east","west","center"],
34479
34480     // private
34481     create : function(target, mgr, config){
34482         target = target.toLowerCase();
34483         if(config.lightweight || config.basic){
34484             return new Roo.BasicLayoutRegion(mgr, config, target);
34485         }
34486         switch(target){
34487             case "north":
34488                 return new Roo.NorthLayoutRegion(mgr, config);
34489             case "south":
34490                 return new Roo.SouthLayoutRegion(mgr, config);
34491             case "east":
34492                 return new Roo.EastLayoutRegion(mgr, config);
34493             case "west":
34494                 return new Roo.WestLayoutRegion(mgr, config);
34495             case "center":
34496                 return new Roo.CenterLayoutRegion(mgr, config);
34497         }
34498         throw 'Layout region "'+target+'" not supported.';
34499     }
34500 };/*
34501  * Based on:
34502  * Ext JS Library 1.1.1
34503  * Copyright(c) 2006-2007, Ext JS, LLC.
34504  *
34505  * Originally Released Under LGPL - original licence link has changed is not relivant.
34506  *
34507  * Fork - LGPL
34508  * <script type="text/javascript">
34509  */
34510  
34511 /**
34512  * @class Roo.BasicLayoutRegion
34513  * @extends Roo.util.Observable
34514  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
34515  * and does not have a titlebar, tabs or any other features. All it does is size and position 
34516  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
34517  */
34518 Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
34519     this.mgr = mgr;
34520     this.position  = pos;
34521     this.events = {
34522         /**
34523          * @scope Roo.BasicLayoutRegion
34524          */
34525         
34526         /**
34527          * @event beforeremove
34528          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
34529          * @param {Roo.LayoutRegion} this
34530          * @param {Roo.ContentPanel} panel The panel
34531          * @param {Object} e The cancel event object
34532          */
34533         "beforeremove" : true,
34534         /**
34535          * @event invalidated
34536          * Fires when the layout for this region is changed.
34537          * @param {Roo.LayoutRegion} this
34538          */
34539         "invalidated" : true,
34540         /**
34541          * @event visibilitychange
34542          * Fires when this region is shown or hidden 
34543          * @param {Roo.LayoutRegion} this
34544          * @param {Boolean} visibility true or false
34545          */
34546         "visibilitychange" : true,
34547         /**
34548          * @event paneladded
34549          * Fires when a panel is added. 
34550          * @param {Roo.LayoutRegion} this
34551          * @param {Roo.ContentPanel} panel The panel
34552          */
34553         "paneladded" : true,
34554         /**
34555          * @event panelremoved
34556          * Fires when a panel is removed. 
34557          * @param {Roo.LayoutRegion} this
34558          * @param {Roo.ContentPanel} panel The panel
34559          */
34560         "panelremoved" : true,
34561         /**
34562          * @event beforecollapse
34563          * Fires when this region before collapse.
34564          * @param {Roo.LayoutRegion} this
34565          */
34566         "beforecollapse" : true,
34567         /**
34568          * @event collapsed
34569          * Fires when this region is collapsed.
34570          * @param {Roo.LayoutRegion} this
34571          */
34572         "collapsed" : true,
34573         /**
34574          * @event expanded
34575          * Fires when this region is expanded.
34576          * @param {Roo.LayoutRegion} this
34577          */
34578         "expanded" : true,
34579         /**
34580          * @event slideshow
34581          * Fires when this region is slid into view.
34582          * @param {Roo.LayoutRegion} this
34583          */
34584         "slideshow" : true,
34585         /**
34586          * @event slidehide
34587          * Fires when this region slides out of view. 
34588          * @param {Roo.LayoutRegion} this
34589          */
34590         "slidehide" : true,
34591         /**
34592          * @event panelactivated
34593          * Fires when a panel is activated. 
34594          * @param {Roo.LayoutRegion} this
34595          * @param {Roo.ContentPanel} panel The activated panel
34596          */
34597         "panelactivated" : true,
34598         /**
34599          * @event resized
34600          * Fires when the user resizes this region. 
34601          * @param {Roo.LayoutRegion} this
34602          * @param {Number} newSize The new size (width for east/west, height for north/south)
34603          */
34604         "resized" : true
34605     };
34606     /** A collection of panels in this region. @type Roo.util.MixedCollection */
34607     this.panels = new Roo.util.MixedCollection();
34608     this.panels.getKey = this.getPanelId.createDelegate(this);
34609     this.box = null;
34610     this.activePanel = null;
34611     // ensure listeners are added...
34612     
34613     if (config.listeners || config.events) {
34614         Roo.BasicLayoutRegion.superclass.constructor.call(this, {
34615             listeners : config.listeners || {},
34616             events : config.events || {}
34617         });
34618     }
34619     
34620     if(skipConfig !== true){
34621         this.applyConfig(config);
34622     }
34623 };
34624
34625 Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
34626     getPanelId : function(p){
34627         return p.getId();
34628     },
34629     
34630     applyConfig : function(config){
34631         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
34632         this.config = config;
34633         
34634     },
34635     
34636     /**
34637      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
34638      * the width, for horizontal (north, south) the height.
34639      * @param {Number} newSize The new width or height
34640      */
34641     resizeTo : function(newSize){
34642         var el = this.el ? this.el :
34643                  (this.activePanel ? this.activePanel.getEl() : null);
34644         if(el){
34645             switch(this.position){
34646                 case "east":
34647                 case "west":
34648                     el.setWidth(newSize);
34649                     this.fireEvent("resized", this, newSize);
34650                 break;
34651                 case "north":
34652                 case "south":
34653                     el.setHeight(newSize);
34654                     this.fireEvent("resized", this, newSize);
34655                 break;                
34656             }
34657         }
34658     },
34659     
34660     getBox : function(){
34661         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
34662     },
34663     
34664     getMargins : function(){
34665         return this.margins;
34666     },
34667     
34668     updateBox : function(box){
34669         this.box = box;
34670         var el = this.activePanel.getEl();
34671         el.dom.style.left = box.x + "px";
34672         el.dom.style.top = box.y + "px";
34673         this.activePanel.setSize(box.width, box.height);
34674     },
34675     
34676     /**
34677      * Returns the container element for this region.
34678      * @return {Roo.Element}
34679      */
34680     getEl : function(){
34681         return this.activePanel;
34682     },
34683     
34684     /**
34685      * Returns true if this region is currently visible.
34686      * @return {Boolean}
34687      */
34688     isVisible : function(){
34689         return this.activePanel ? true : false;
34690     },
34691     
34692     setActivePanel : function(panel){
34693         panel = this.getPanel(panel);
34694         if(this.activePanel && this.activePanel != panel){
34695             this.activePanel.setActiveState(false);
34696             this.activePanel.getEl().setLeftTop(-10000,-10000);
34697         }
34698         this.activePanel = panel;
34699         panel.setActiveState(true);
34700         if(this.box){
34701             panel.setSize(this.box.width, this.box.height);
34702         }
34703         this.fireEvent("panelactivated", this, panel);
34704         this.fireEvent("invalidated");
34705     },
34706     
34707     /**
34708      * Show the specified panel.
34709      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
34710      * @return {Roo.ContentPanel} The shown panel or null
34711      */
34712     showPanel : function(panel){
34713         if(panel = this.getPanel(panel)){
34714             this.setActivePanel(panel);
34715         }
34716         return panel;
34717     },
34718     
34719     /**
34720      * Get the active panel for this region.
34721      * @return {Roo.ContentPanel} The active panel or null
34722      */
34723     getActivePanel : function(){
34724         return this.activePanel;
34725     },
34726     
34727     /**
34728      * Add the passed ContentPanel(s)
34729      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
34730      * @return {Roo.ContentPanel} The panel added (if only one was added)
34731      */
34732     add : function(panel){
34733         if(arguments.length > 1){
34734             for(var i = 0, len = arguments.length; i < len; i++) {
34735                 this.add(arguments[i]);
34736             }
34737             return null;
34738         }
34739         if(this.hasPanel(panel)){
34740             this.showPanel(panel);
34741             return panel;
34742         }
34743         var el = panel.getEl();
34744         if(el.dom.parentNode != this.mgr.el.dom){
34745             this.mgr.el.dom.appendChild(el.dom);
34746         }
34747         if(panel.setRegion){
34748             panel.setRegion(this);
34749         }
34750         this.panels.add(panel);
34751         el.setStyle("position", "absolute");
34752         if(!panel.background){
34753             this.setActivePanel(panel);
34754             if(this.config.initialSize && this.panels.getCount()==1){
34755                 this.resizeTo(this.config.initialSize);
34756             }
34757         }
34758         this.fireEvent("paneladded", this, panel);
34759         return panel;
34760     },
34761     
34762     /**
34763      * Returns true if the panel is in this region.
34764      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
34765      * @return {Boolean}
34766      */
34767     hasPanel : function(panel){
34768         if(typeof panel == "object"){ // must be panel obj
34769             panel = panel.getId();
34770         }
34771         return this.getPanel(panel) ? true : false;
34772     },
34773     
34774     /**
34775      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
34776      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
34777      * @param {Boolean} preservePanel Overrides the config preservePanel option
34778      * @return {Roo.ContentPanel} The panel that was removed
34779      */
34780     remove : function(panel, preservePanel){
34781         panel = this.getPanel(panel);
34782         if(!panel){
34783             return null;
34784         }
34785         var e = {};
34786         this.fireEvent("beforeremove", this, panel, e);
34787         if(e.cancel === true){
34788             return null;
34789         }
34790         var panelId = panel.getId();
34791         this.panels.removeKey(panelId);
34792         return panel;
34793     },
34794     
34795     /**
34796      * Returns the panel specified or null if it's not in this region.
34797      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
34798      * @return {Roo.ContentPanel}
34799      */
34800     getPanel : function(id){
34801         if(typeof id == "object"){ // must be panel obj
34802             return id;
34803         }
34804         return this.panels.get(id);
34805     },
34806     
34807     /**
34808      * Returns this regions position (north/south/east/west/center).
34809      * @return {String} 
34810      */
34811     getPosition: function(){
34812         return this.position;    
34813     }
34814 });/*
34815  * Based on:
34816  * Ext JS Library 1.1.1
34817  * Copyright(c) 2006-2007, Ext JS, LLC.
34818  *
34819  * Originally Released Under LGPL - original licence link has changed is not relivant.
34820  *
34821  * Fork - LGPL
34822  * <script type="text/javascript">
34823  */
34824  
34825 /**
34826  * @class Roo.LayoutRegion
34827  * @extends Roo.BasicLayoutRegion
34828  * This class represents a region in a layout manager.
34829  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
34830  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
34831  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
34832  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
34833  * @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})
34834  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
34835  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
34836  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
34837  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
34838  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
34839  * @cfg {String}    title           The title for the region (overrides panel titles)
34840  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
34841  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
34842  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
34843  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
34844  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
34845  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
34846  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
34847  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
34848  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
34849  * @cfg {Boolean}   showPin         True to show a pin button
34850  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
34851  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
34852  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
34853  * @cfg {Number}    width           For East/West panels
34854  * @cfg {Number}    height          For North/South panels
34855  * @cfg {Boolean}   split           To show the splitter
34856  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
34857  */
34858 Roo.LayoutRegion = function(mgr, config, pos){
34859     Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
34860     var dh = Roo.DomHelper;
34861     /** This region's container element 
34862     * @type Roo.Element */
34863     this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
34864     /** This region's title element 
34865     * @type Roo.Element */
34866
34867     this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
34868         {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
34869         {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
34870     ]}, true);
34871     this.titleEl.enableDisplayMode();
34872     /** This region's title text element 
34873     * @type HTMLElement */
34874     this.titleTextEl = this.titleEl.dom.firstChild;
34875     this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
34876     this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
34877     this.closeBtn.enableDisplayMode();
34878     this.closeBtn.on("click", this.closeClicked, this);
34879     this.closeBtn.hide();
34880
34881     this.createBody(config);
34882     this.visible = true;
34883     this.collapsed = false;
34884
34885     if(config.hideWhenEmpty){
34886         this.hide();
34887         this.on("paneladded", this.validateVisibility, this);
34888         this.on("panelremoved", this.validateVisibility, this);
34889     }
34890     this.applyConfig(config);
34891 };
34892
34893 Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
34894
34895     createBody : function(){
34896         /** This region's body element 
34897         * @type Roo.Element */
34898         this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
34899     },
34900
34901     applyConfig : function(c){
34902         if(c.collapsible && this.position != "center" && !this.collapsedEl){
34903             var dh = Roo.DomHelper;
34904             if(c.titlebar !== false){
34905                 this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
34906                 this.collapseBtn.on("click", this.collapse, this);
34907                 this.collapseBtn.enableDisplayMode();
34908
34909                 if(c.showPin === true || this.showPin){
34910                     this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
34911                     this.stickBtn.enableDisplayMode();
34912                     this.stickBtn.on("click", this.expand, this);
34913                     this.stickBtn.hide();
34914                 }
34915             }
34916             /** This region's collapsed element
34917             * @type Roo.Element */
34918             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
34919                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
34920             ]}, true);
34921             if(c.floatable !== false){
34922                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
34923                this.collapsedEl.on("click", this.collapseClick, this);
34924             }
34925
34926             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
34927                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
34928                    id: "message", unselectable: "on", style:{"float":"left"}});
34929                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
34930              }
34931             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
34932             this.expandBtn.on("click", this.expand, this);
34933         }
34934         if(this.collapseBtn){
34935             this.collapseBtn.setVisible(c.collapsible == true);
34936         }
34937         this.cmargins = c.cmargins || this.cmargins ||
34938                          (this.position == "west" || this.position == "east" ?
34939                              {top: 0, left: 2, right:2, bottom: 0} :
34940                              {top: 2, left: 0, right:0, bottom: 2});
34941         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
34942         this.bottomTabs = c.tabPosition != "top";
34943         this.autoScroll = c.autoScroll || false;
34944         if(this.autoScroll){
34945             this.bodyEl.setStyle("overflow", "auto");
34946         }else{
34947             this.bodyEl.setStyle("overflow", "hidden");
34948         }
34949         //if(c.titlebar !== false){
34950             if((!c.titlebar && !c.title) || c.titlebar === false){
34951                 this.titleEl.hide();
34952             }else{
34953                 this.titleEl.show();
34954                 if(c.title){
34955                     this.titleTextEl.innerHTML = c.title;
34956                 }
34957             }
34958         //}
34959         this.duration = c.duration || .30;
34960         this.slideDuration = c.slideDuration || .45;
34961         this.config = c;
34962         if(c.collapsed){
34963             this.collapse(true);
34964         }
34965         if(c.hidden){
34966             this.hide();
34967         }
34968     },
34969     /**
34970      * Returns true if this region is currently visible.
34971      * @return {Boolean}
34972      */
34973     isVisible : function(){
34974         return this.visible;
34975     },
34976
34977     /**
34978      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
34979      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
34980      */
34981     setCollapsedTitle : function(title){
34982         title = title || "&#160;";
34983         if(this.collapsedTitleTextEl){
34984             this.collapsedTitleTextEl.innerHTML = title;
34985         }
34986     },
34987
34988     getBox : function(){
34989         var b;
34990         if(!this.collapsed){
34991             b = this.el.getBox(false, true);
34992         }else{
34993             b = this.collapsedEl.getBox(false, true);
34994         }
34995         return b;
34996     },
34997
34998     getMargins : function(){
34999         return this.collapsed ? this.cmargins : this.margins;
35000     },
35001
35002     highlight : function(){
35003         this.el.addClass("x-layout-panel-dragover");
35004     },
35005
35006     unhighlight : function(){
35007         this.el.removeClass("x-layout-panel-dragover");
35008     },
35009
35010     updateBox : function(box){
35011         this.box = box;
35012         if(!this.collapsed){
35013             this.el.dom.style.left = box.x + "px";
35014             this.el.dom.style.top = box.y + "px";
35015             this.updateBody(box.width, box.height);
35016         }else{
35017             this.collapsedEl.dom.style.left = box.x + "px";
35018             this.collapsedEl.dom.style.top = box.y + "px";
35019             this.collapsedEl.setSize(box.width, box.height);
35020         }
35021         if(this.tabs){
35022             this.tabs.autoSizeTabs();
35023         }
35024     },
35025
35026     updateBody : function(w, h){
35027         if(w !== null){
35028             this.el.setWidth(w);
35029             w -= this.el.getBorderWidth("rl");
35030             if(this.config.adjustments){
35031                 w += this.config.adjustments[0];
35032             }
35033         }
35034         if(h !== null){
35035             this.el.setHeight(h);
35036             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
35037             h -= this.el.getBorderWidth("tb");
35038             if(this.config.adjustments){
35039                 h += this.config.adjustments[1];
35040             }
35041             this.bodyEl.setHeight(h);
35042             if(this.tabs){
35043                 h = this.tabs.syncHeight(h);
35044             }
35045         }
35046         if(this.panelSize){
35047             w = w !== null ? w : this.panelSize.width;
35048             h = h !== null ? h : this.panelSize.height;
35049         }
35050         if(this.activePanel){
35051             var el = this.activePanel.getEl();
35052             w = w !== null ? w : el.getWidth();
35053             h = h !== null ? h : el.getHeight();
35054             this.panelSize = {width: w, height: h};
35055             this.activePanel.setSize(w, h);
35056         }
35057         if(Roo.isIE && this.tabs){
35058             this.tabs.el.repaint();
35059         }
35060     },
35061
35062     /**
35063      * Returns the container element for this region.
35064      * @return {Roo.Element}
35065      */
35066     getEl : function(){
35067         return this.el;
35068     },
35069
35070     /**
35071      * Hides this region.
35072      */
35073     hide : function(){
35074         if(!this.collapsed){
35075             this.el.dom.style.left = "-2000px";
35076             this.el.hide();
35077         }else{
35078             this.collapsedEl.dom.style.left = "-2000px";
35079             this.collapsedEl.hide();
35080         }
35081         this.visible = false;
35082         this.fireEvent("visibilitychange", this, false);
35083     },
35084
35085     /**
35086      * Shows this region if it was previously hidden.
35087      */
35088     show : function(){
35089         if(!this.collapsed){
35090             this.el.show();
35091         }else{
35092             this.collapsedEl.show();
35093         }
35094         this.visible = true;
35095         this.fireEvent("visibilitychange", this, true);
35096     },
35097
35098     closeClicked : function(){
35099         if(this.activePanel){
35100             this.remove(this.activePanel);
35101         }
35102     },
35103
35104     collapseClick : function(e){
35105         if(this.isSlid){
35106            e.stopPropagation();
35107            this.slideIn();
35108         }else{
35109            e.stopPropagation();
35110            this.slideOut();
35111         }
35112     },
35113
35114     /**
35115      * Collapses this region.
35116      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
35117      */
35118     collapse : function(skipAnim, skipCheck){
35119         if(this.collapsed) {
35120             return;
35121         }
35122         
35123         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
35124             
35125             this.collapsed = true;
35126             if(this.split){
35127                 this.split.el.hide();
35128             }
35129             if(this.config.animate && skipAnim !== true){
35130                 this.fireEvent("invalidated", this);
35131                 this.animateCollapse();
35132             }else{
35133                 this.el.setLocation(-20000,-20000);
35134                 this.el.hide();
35135                 this.collapsedEl.show();
35136                 this.fireEvent("collapsed", this);
35137                 this.fireEvent("invalidated", this);
35138             }
35139         }
35140         
35141     },
35142
35143     animateCollapse : function(){
35144         // overridden
35145     },
35146
35147     /**
35148      * Expands this region if it was previously collapsed.
35149      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
35150      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
35151      */
35152     expand : function(e, skipAnim){
35153         if(e) {
35154             e.stopPropagation();
35155         }
35156         if(!this.collapsed || this.el.hasActiveFx()) {
35157             return;
35158         }
35159         if(this.isSlid){
35160             this.afterSlideIn();
35161             skipAnim = true;
35162         }
35163         this.collapsed = false;
35164         if(this.config.animate && skipAnim !== true){
35165             this.animateExpand();
35166         }else{
35167             this.el.show();
35168             if(this.split){
35169                 this.split.el.show();
35170             }
35171             this.collapsedEl.setLocation(-2000,-2000);
35172             this.collapsedEl.hide();
35173             this.fireEvent("invalidated", this);
35174             this.fireEvent("expanded", this);
35175         }
35176     },
35177
35178     animateExpand : function(){
35179         // overridden
35180     },
35181
35182     initTabs : function()
35183     {
35184         this.bodyEl.setStyle("overflow", "hidden");
35185         var ts = new Roo.TabPanel(
35186                 this.bodyEl.dom,
35187                 {
35188                     tabPosition: this.bottomTabs ? 'bottom' : 'top',
35189                     disableTooltips: this.config.disableTabTips,
35190                     toolbar : this.config.toolbar
35191                 }
35192         );
35193         if(this.config.hideTabs){
35194             ts.stripWrap.setDisplayed(false);
35195         }
35196         this.tabs = ts;
35197         ts.resizeTabs = this.config.resizeTabs === true;
35198         ts.minTabWidth = this.config.minTabWidth || 40;
35199         ts.maxTabWidth = this.config.maxTabWidth || 250;
35200         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
35201         ts.monitorResize = false;
35202         ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
35203         ts.bodyEl.addClass('x-layout-tabs-body');
35204         this.panels.each(this.initPanelAsTab, this);
35205     },
35206
35207     initPanelAsTab : function(panel){
35208         var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
35209                     this.config.closeOnTab && panel.isClosable());
35210         if(panel.tabTip !== undefined){
35211             ti.setTooltip(panel.tabTip);
35212         }
35213         ti.on("activate", function(){
35214               this.setActivePanel(panel);
35215         }, this);
35216         if(this.config.closeOnTab){
35217             ti.on("beforeclose", function(t, e){
35218                 e.cancel = true;
35219                 this.remove(panel);
35220             }, this);
35221         }
35222         return ti;
35223     },
35224
35225     updatePanelTitle : function(panel, title){
35226         if(this.activePanel == panel){
35227             this.updateTitle(title);
35228         }
35229         if(this.tabs){
35230             var ti = this.tabs.getTab(panel.getEl().id);
35231             ti.setText(title);
35232             if(panel.tabTip !== undefined){
35233                 ti.setTooltip(panel.tabTip);
35234             }
35235         }
35236     },
35237
35238     updateTitle : function(title){
35239         if(this.titleTextEl && !this.config.title){
35240             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
35241         }
35242     },
35243
35244     setActivePanel : function(panel){
35245         panel = this.getPanel(panel);
35246         if(this.activePanel && this.activePanel != panel){
35247             this.activePanel.setActiveState(false);
35248         }
35249         this.activePanel = panel;
35250         panel.setActiveState(true);
35251         if(this.panelSize){
35252             panel.setSize(this.panelSize.width, this.panelSize.height);
35253         }
35254         if(this.closeBtn){
35255             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
35256         }
35257         this.updateTitle(panel.getTitle());
35258         if(this.tabs){
35259             this.fireEvent("invalidated", this);
35260         }
35261         this.fireEvent("panelactivated", this, panel);
35262     },
35263
35264     /**
35265      * Shows the specified panel.
35266      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
35267      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
35268      */
35269     showPanel : function(panel)
35270     {
35271         panel = this.getPanel(panel);
35272         if(panel){
35273             if(this.tabs){
35274                 var tab = this.tabs.getTab(panel.getEl().id);
35275                 if(tab.isHidden()){
35276                     this.tabs.unhideTab(tab.id);
35277                 }
35278                 tab.activate();
35279             }else{
35280                 this.setActivePanel(panel);
35281             }
35282         }
35283         return panel;
35284     },
35285
35286     /**
35287      * Get the active panel for this region.
35288      * @return {Roo.ContentPanel} The active panel or null
35289      */
35290     getActivePanel : function(){
35291         return this.activePanel;
35292     },
35293
35294     validateVisibility : function(){
35295         if(this.panels.getCount() < 1){
35296             this.updateTitle("&#160;");
35297             this.closeBtn.hide();
35298             this.hide();
35299         }else{
35300             if(!this.isVisible()){
35301                 this.show();
35302             }
35303         }
35304     },
35305
35306     /**
35307      * Adds the passed ContentPanel(s) to this region.
35308      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
35309      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
35310      */
35311     add : function(panel){
35312         if(arguments.length > 1){
35313             for(var i = 0, len = arguments.length; i < len; i++) {
35314                 this.add(arguments[i]);
35315             }
35316             return null;
35317         }
35318         if(this.hasPanel(panel)){
35319             this.showPanel(panel);
35320             return panel;
35321         }
35322         panel.setRegion(this);
35323         this.panels.add(panel);
35324         if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
35325             this.bodyEl.dom.appendChild(panel.getEl().dom);
35326             if(panel.background !== true){
35327                 this.setActivePanel(panel);
35328             }
35329             this.fireEvent("paneladded", this, panel);
35330             return panel;
35331         }
35332         if(!this.tabs){
35333             this.initTabs();
35334         }else{
35335             this.initPanelAsTab(panel);
35336         }
35337         if(panel.background !== true){
35338             this.tabs.activate(panel.getEl().id);
35339         }
35340         this.fireEvent("paneladded", this, panel);
35341         return panel;
35342     },
35343
35344     /**
35345      * Hides the tab for the specified panel.
35346      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
35347      */
35348     hidePanel : function(panel){
35349         if(this.tabs && (panel = this.getPanel(panel))){
35350             this.tabs.hideTab(panel.getEl().id);
35351         }
35352     },
35353
35354     /**
35355      * Unhides the tab for a previously hidden panel.
35356      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
35357      */
35358     unhidePanel : function(panel){
35359         if(this.tabs && (panel = this.getPanel(panel))){
35360             this.tabs.unhideTab(panel.getEl().id);
35361         }
35362     },
35363
35364     clearPanels : function(){
35365         while(this.panels.getCount() > 0){
35366              this.remove(this.panels.first());
35367         }
35368     },
35369
35370     /**
35371      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
35372      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
35373      * @param {Boolean} preservePanel Overrides the config preservePanel option
35374      * @return {Roo.ContentPanel} The panel that was removed
35375      */
35376     remove : function(panel, preservePanel){
35377         panel = this.getPanel(panel);
35378         if(!panel){
35379             return null;
35380         }
35381         var e = {};
35382         this.fireEvent("beforeremove", this, panel, e);
35383         if(e.cancel === true){
35384             return null;
35385         }
35386         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
35387         var panelId = panel.getId();
35388         this.panels.removeKey(panelId);
35389         if(preservePanel){
35390             document.body.appendChild(panel.getEl().dom);
35391         }
35392         if(this.tabs){
35393             this.tabs.removeTab(panel.getEl().id);
35394         }else if (!preservePanel){
35395             this.bodyEl.dom.removeChild(panel.getEl().dom);
35396         }
35397         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
35398             var p = this.panels.first();
35399             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
35400             tempEl.appendChild(p.getEl().dom);
35401             this.bodyEl.update("");
35402             this.bodyEl.dom.appendChild(p.getEl().dom);
35403             tempEl = null;
35404             this.updateTitle(p.getTitle());
35405             this.tabs = null;
35406             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
35407             this.setActivePanel(p);
35408         }
35409         panel.setRegion(null);
35410         if(this.activePanel == panel){
35411             this.activePanel = null;
35412         }
35413         if(this.config.autoDestroy !== false && preservePanel !== true){
35414             try{panel.destroy();}catch(e){}
35415         }
35416         this.fireEvent("panelremoved", this, panel);
35417         return panel;
35418     },
35419
35420     /**
35421      * Returns the TabPanel component used by this region
35422      * @return {Roo.TabPanel}
35423      */
35424     getTabs : function(){
35425         return this.tabs;
35426     },
35427
35428     createTool : function(parentEl, className){
35429         var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
35430             children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
35431         btn.addClassOnOver("x-layout-tools-button-over");
35432         return btn;
35433     }
35434 });/*
35435  * Based on:
35436  * Ext JS Library 1.1.1
35437  * Copyright(c) 2006-2007, Ext JS, LLC.
35438  *
35439  * Originally Released Under LGPL - original licence link has changed is not relivant.
35440  *
35441  * Fork - LGPL
35442  * <script type="text/javascript">
35443  */
35444  
35445
35446
35447 /**
35448  * @class Roo.SplitLayoutRegion
35449  * @extends Roo.LayoutRegion
35450  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
35451  */
35452 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
35453     this.cursor = cursor;
35454     Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
35455 };
35456
35457 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
35458     splitTip : "Drag to resize.",
35459     collapsibleSplitTip : "Drag to resize. Double click to hide.",
35460     useSplitTips : false,
35461
35462     applyConfig : function(config){
35463         Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
35464         if(config.split){
35465             if(!this.split){
35466                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
35467                         {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
35468                 /** The SplitBar for this region 
35469                 * @type Roo.SplitBar */
35470                 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
35471                 this.split.on("moved", this.onSplitMove, this);
35472                 this.split.useShim = config.useShim === true;
35473                 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
35474                 if(this.useSplitTips){
35475                     this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
35476                 }
35477                 if(config.collapsible){
35478                     this.split.el.on("dblclick", this.collapse,  this);
35479                 }
35480             }
35481             if(typeof config.minSize != "undefined"){
35482                 this.split.minSize = config.minSize;
35483             }
35484             if(typeof config.maxSize != "undefined"){
35485                 this.split.maxSize = config.maxSize;
35486             }
35487             if(config.hideWhenEmpty || config.hidden || config.collapsed){
35488                 this.hideSplitter();
35489             }
35490         }
35491     },
35492
35493     getHMaxSize : function(){
35494          var cmax = this.config.maxSize || 10000;
35495          var center = this.mgr.getRegion("center");
35496          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
35497     },
35498
35499     getVMaxSize : function(){
35500          var cmax = this.config.maxSize || 10000;
35501          var center = this.mgr.getRegion("center");
35502          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
35503     },
35504
35505     onSplitMove : function(split, newSize){
35506         this.fireEvent("resized", this, newSize);
35507     },
35508     
35509     /** 
35510      * Returns the {@link Roo.SplitBar} for this region.
35511      * @return {Roo.SplitBar}
35512      */
35513     getSplitBar : function(){
35514         return this.split;
35515     },
35516     
35517     hide : function(){
35518         this.hideSplitter();
35519         Roo.SplitLayoutRegion.superclass.hide.call(this);
35520     },
35521
35522     hideSplitter : function(){
35523         if(this.split){
35524             this.split.el.setLocation(-2000,-2000);
35525             this.split.el.hide();
35526         }
35527     },
35528
35529     show : function(){
35530         if(this.split){
35531             this.split.el.show();
35532         }
35533         Roo.SplitLayoutRegion.superclass.show.call(this);
35534     },
35535     
35536     beforeSlide: function(){
35537         if(Roo.isGecko){// firefox overflow auto bug workaround
35538             this.bodyEl.clip();
35539             if(this.tabs) {
35540                 this.tabs.bodyEl.clip();
35541             }
35542             if(this.activePanel){
35543                 this.activePanel.getEl().clip();
35544                 
35545                 if(this.activePanel.beforeSlide){
35546                     this.activePanel.beforeSlide();
35547                 }
35548             }
35549         }
35550     },
35551     
35552     afterSlide : function(){
35553         if(Roo.isGecko){// firefox overflow auto bug workaround
35554             this.bodyEl.unclip();
35555             if(this.tabs) {
35556                 this.tabs.bodyEl.unclip();
35557             }
35558             if(this.activePanel){
35559                 this.activePanel.getEl().unclip();
35560                 if(this.activePanel.afterSlide){
35561                     this.activePanel.afterSlide();
35562                 }
35563             }
35564         }
35565     },
35566
35567     initAutoHide : function(){
35568         if(this.autoHide !== false){
35569             if(!this.autoHideHd){
35570                 var st = new Roo.util.DelayedTask(this.slideIn, this);
35571                 this.autoHideHd = {
35572                     "mouseout": function(e){
35573                         if(!e.within(this.el, true)){
35574                             st.delay(500);
35575                         }
35576                     },
35577                     "mouseover" : function(e){
35578                         st.cancel();
35579                     },
35580                     scope : this
35581                 };
35582             }
35583             this.el.on(this.autoHideHd);
35584         }
35585     },
35586
35587     clearAutoHide : function(){
35588         if(this.autoHide !== false){
35589             this.el.un("mouseout", this.autoHideHd.mouseout);
35590             this.el.un("mouseover", this.autoHideHd.mouseover);
35591         }
35592     },
35593
35594     clearMonitor : function(){
35595         Roo.get(document).un("click", this.slideInIf, this);
35596     },
35597
35598     // these names are backwards but not changed for compat
35599     slideOut : function(){
35600         if(this.isSlid || this.el.hasActiveFx()){
35601             return;
35602         }
35603         this.isSlid = true;
35604         if(this.collapseBtn){
35605             this.collapseBtn.hide();
35606         }
35607         this.closeBtnState = this.closeBtn.getStyle('display');
35608         this.closeBtn.hide();
35609         if(this.stickBtn){
35610             this.stickBtn.show();
35611         }
35612         this.el.show();
35613         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
35614         this.beforeSlide();
35615         this.el.setStyle("z-index", 10001);
35616         this.el.slideIn(this.getSlideAnchor(), {
35617             callback: function(){
35618                 this.afterSlide();
35619                 this.initAutoHide();
35620                 Roo.get(document).on("click", this.slideInIf, this);
35621                 this.fireEvent("slideshow", this);
35622             },
35623             scope: this,
35624             block: true
35625         });
35626     },
35627
35628     afterSlideIn : function(){
35629         this.clearAutoHide();
35630         this.isSlid = false;
35631         this.clearMonitor();
35632         this.el.setStyle("z-index", "");
35633         if(this.collapseBtn){
35634             this.collapseBtn.show();
35635         }
35636         this.closeBtn.setStyle('display', this.closeBtnState);
35637         if(this.stickBtn){
35638             this.stickBtn.hide();
35639         }
35640         this.fireEvent("slidehide", this);
35641     },
35642
35643     slideIn : function(cb){
35644         if(!this.isSlid || this.el.hasActiveFx()){
35645             Roo.callback(cb);
35646             return;
35647         }
35648         this.isSlid = false;
35649         this.beforeSlide();
35650         this.el.slideOut(this.getSlideAnchor(), {
35651             callback: function(){
35652                 this.el.setLeftTop(-10000, -10000);
35653                 this.afterSlide();
35654                 this.afterSlideIn();
35655                 Roo.callback(cb);
35656             },
35657             scope: this,
35658             block: true
35659         });
35660     },
35661     
35662     slideInIf : function(e){
35663         if(!e.within(this.el)){
35664             this.slideIn();
35665         }
35666     },
35667
35668     animateCollapse : function(){
35669         this.beforeSlide();
35670         this.el.setStyle("z-index", 20000);
35671         var anchor = this.getSlideAnchor();
35672         this.el.slideOut(anchor, {
35673             callback : function(){
35674                 this.el.setStyle("z-index", "");
35675                 this.collapsedEl.slideIn(anchor, {duration:.3});
35676                 this.afterSlide();
35677                 this.el.setLocation(-10000,-10000);
35678                 this.el.hide();
35679                 this.fireEvent("collapsed", this);
35680             },
35681             scope: this,
35682             block: true
35683         });
35684     },
35685
35686     animateExpand : function(){
35687         this.beforeSlide();
35688         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
35689         this.el.setStyle("z-index", 20000);
35690         this.collapsedEl.hide({
35691             duration:.1
35692         });
35693         this.el.slideIn(this.getSlideAnchor(), {
35694             callback : function(){
35695                 this.el.setStyle("z-index", "");
35696                 this.afterSlide();
35697                 if(this.split){
35698                     this.split.el.show();
35699                 }
35700                 this.fireEvent("invalidated", this);
35701                 this.fireEvent("expanded", this);
35702             },
35703             scope: this,
35704             block: true
35705         });
35706     },
35707
35708     anchors : {
35709         "west" : "left",
35710         "east" : "right",
35711         "north" : "top",
35712         "south" : "bottom"
35713     },
35714
35715     sanchors : {
35716         "west" : "l",
35717         "east" : "r",
35718         "north" : "t",
35719         "south" : "b"
35720     },
35721
35722     canchors : {
35723         "west" : "tl-tr",
35724         "east" : "tr-tl",
35725         "north" : "tl-bl",
35726         "south" : "bl-tl"
35727     },
35728
35729     getAnchor : function(){
35730         return this.anchors[this.position];
35731     },
35732
35733     getCollapseAnchor : function(){
35734         return this.canchors[this.position];
35735     },
35736
35737     getSlideAnchor : function(){
35738         return this.sanchors[this.position];
35739     },
35740
35741     getAlignAdj : function(){
35742         var cm = this.cmargins;
35743         switch(this.position){
35744             case "west":
35745                 return [0, 0];
35746             break;
35747             case "east":
35748                 return [0, 0];
35749             break;
35750             case "north":
35751                 return [0, 0];
35752             break;
35753             case "south":
35754                 return [0, 0];
35755             break;
35756         }
35757     },
35758
35759     getExpandAdj : function(){
35760         var c = this.collapsedEl, cm = this.cmargins;
35761         switch(this.position){
35762             case "west":
35763                 return [-(cm.right+c.getWidth()+cm.left), 0];
35764             break;
35765             case "east":
35766                 return [cm.right+c.getWidth()+cm.left, 0];
35767             break;
35768             case "north":
35769                 return [0, -(cm.top+cm.bottom+c.getHeight())];
35770             break;
35771             case "south":
35772                 return [0, cm.top+cm.bottom+c.getHeight()];
35773             break;
35774         }
35775     }
35776 });/*
35777  * Based on:
35778  * Ext JS Library 1.1.1
35779  * Copyright(c) 2006-2007, Ext JS, LLC.
35780  *
35781  * Originally Released Under LGPL - original licence link has changed is not relivant.
35782  *
35783  * Fork - LGPL
35784  * <script type="text/javascript">
35785  */
35786 /*
35787  * These classes are private internal classes
35788  */
35789 Roo.CenterLayoutRegion = function(mgr, config){
35790     Roo.LayoutRegion.call(this, mgr, config, "center");
35791     this.visible = true;
35792     this.minWidth = config.minWidth || 20;
35793     this.minHeight = config.minHeight || 20;
35794 };
35795
35796 Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
35797     hide : function(){
35798         // center panel can't be hidden
35799     },
35800     
35801     show : function(){
35802         // center panel can't be hidden
35803     },
35804     
35805     getMinWidth: function(){
35806         return this.minWidth;
35807     },
35808     
35809     getMinHeight: function(){
35810         return this.minHeight;
35811     }
35812 });
35813
35814
35815 Roo.NorthLayoutRegion = function(mgr, config){
35816     Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
35817     if(this.split){
35818         this.split.placement = Roo.SplitBar.TOP;
35819         this.split.orientation = Roo.SplitBar.VERTICAL;
35820         this.split.el.addClass("x-layout-split-v");
35821     }
35822     var size = config.initialSize || config.height;
35823     if(typeof size != "undefined"){
35824         this.el.setHeight(size);
35825     }
35826 };
35827 Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
35828     orientation: Roo.SplitBar.VERTICAL,
35829     getBox : function(){
35830         if(this.collapsed){
35831             return this.collapsedEl.getBox();
35832         }
35833         var box = this.el.getBox();
35834         if(this.split){
35835             box.height += this.split.el.getHeight();
35836         }
35837         return box;
35838     },
35839     
35840     updateBox : function(box){
35841         if(this.split && !this.collapsed){
35842             box.height -= this.split.el.getHeight();
35843             this.split.el.setLeft(box.x);
35844             this.split.el.setTop(box.y+box.height);
35845             this.split.el.setWidth(box.width);
35846         }
35847         if(this.collapsed){
35848             this.updateBody(box.width, null);
35849         }
35850         Roo.LayoutRegion.prototype.updateBox.call(this, box);
35851     }
35852 });
35853
35854 Roo.SouthLayoutRegion = function(mgr, config){
35855     Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
35856     if(this.split){
35857         this.split.placement = Roo.SplitBar.BOTTOM;
35858         this.split.orientation = Roo.SplitBar.VERTICAL;
35859         this.split.el.addClass("x-layout-split-v");
35860     }
35861     var size = config.initialSize || config.height;
35862     if(typeof size != "undefined"){
35863         this.el.setHeight(size);
35864     }
35865 };
35866 Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
35867     orientation: Roo.SplitBar.VERTICAL,
35868     getBox : function(){
35869         if(this.collapsed){
35870             return this.collapsedEl.getBox();
35871         }
35872         var box = this.el.getBox();
35873         if(this.split){
35874             var sh = this.split.el.getHeight();
35875             box.height += sh;
35876             box.y -= sh;
35877         }
35878         return box;
35879     },
35880     
35881     updateBox : function(box){
35882         if(this.split && !this.collapsed){
35883             var sh = this.split.el.getHeight();
35884             box.height -= sh;
35885             box.y += sh;
35886             this.split.el.setLeft(box.x);
35887             this.split.el.setTop(box.y-sh);
35888             this.split.el.setWidth(box.width);
35889         }
35890         if(this.collapsed){
35891             this.updateBody(box.width, null);
35892         }
35893         Roo.LayoutRegion.prototype.updateBox.call(this, box);
35894     }
35895 });
35896
35897 Roo.EastLayoutRegion = function(mgr, config){
35898     Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
35899     if(this.split){
35900         this.split.placement = Roo.SplitBar.RIGHT;
35901         this.split.orientation = Roo.SplitBar.HORIZONTAL;
35902         this.split.el.addClass("x-layout-split-h");
35903     }
35904     var size = config.initialSize || config.width;
35905     if(typeof size != "undefined"){
35906         this.el.setWidth(size);
35907     }
35908 };
35909 Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
35910     orientation: Roo.SplitBar.HORIZONTAL,
35911     getBox : function(){
35912         if(this.collapsed){
35913             return this.collapsedEl.getBox();
35914         }
35915         var box = this.el.getBox();
35916         if(this.split){
35917             var sw = this.split.el.getWidth();
35918             box.width += sw;
35919             box.x -= sw;
35920         }
35921         return box;
35922     },
35923
35924     updateBox : function(box){
35925         if(this.split && !this.collapsed){
35926             var sw = this.split.el.getWidth();
35927             box.width -= sw;
35928             this.split.el.setLeft(box.x);
35929             this.split.el.setTop(box.y);
35930             this.split.el.setHeight(box.height);
35931             box.x += sw;
35932         }
35933         if(this.collapsed){
35934             this.updateBody(null, box.height);
35935         }
35936         Roo.LayoutRegion.prototype.updateBox.call(this, box);
35937     }
35938 });
35939
35940 Roo.WestLayoutRegion = function(mgr, config){
35941     Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
35942     if(this.split){
35943         this.split.placement = Roo.SplitBar.LEFT;
35944         this.split.orientation = Roo.SplitBar.HORIZONTAL;
35945         this.split.el.addClass("x-layout-split-h");
35946     }
35947     var size = config.initialSize || config.width;
35948     if(typeof size != "undefined"){
35949         this.el.setWidth(size);
35950     }
35951 };
35952 Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
35953     orientation: Roo.SplitBar.HORIZONTAL,
35954     getBox : function(){
35955         if(this.collapsed){
35956             return this.collapsedEl.getBox();
35957         }
35958         var box = this.el.getBox();
35959         if(this.split){
35960             box.width += this.split.el.getWidth();
35961         }
35962         return box;
35963     },
35964     
35965     updateBox : function(box){
35966         if(this.split && !this.collapsed){
35967             var sw = this.split.el.getWidth();
35968             box.width -= sw;
35969             this.split.el.setLeft(box.x+box.width);
35970             this.split.el.setTop(box.y);
35971             this.split.el.setHeight(box.height);
35972         }
35973         if(this.collapsed){
35974             this.updateBody(null, box.height);
35975         }
35976         Roo.LayoutRegion.prototype.updateBox.call(this, box);
35977     }
35978 });
35979 /*
35980  * Based on:
35981  * Ext JS Library 1.1.1
35982  * Copyright(c) 2006-2007, Ext JS, LLC.
35983  *
35984  * Originally Released Under LGPL - original licence link has changed is not relivant.
35985  *
35986  * Fork - LGPL
35987  * <script type="text/javascript">
35988  */
35989  
35990  
35991 /*
35992  * Private internal class for reading and applying state
35993  */
35994 Roo.LayoutStateManager = function(layout){
35995      // default empty state
35996      this.state = {
35997         north: {},
35998         south: {},
35999         east: {},
36000         west: {}       
36001     };
36002 };
36003
36004 Roo.LayoutStateManager.prototype = {
36005     init : function(layout, provider){
36006         this.provider = provider;
36007         var state = provider.get(layout.id+"-layout-state");
36008         if(state){
36009             var wasUpdating = layout.isUpdating();
36010             if(!wasUpdating){
36011                 layout.beginUpdate();
36012             }
36013             for(var key in state){
36014                 if(typeof state[key] != "function"){
36015                     var rstate = state[key];
36016                     var r = layout.getRegion(key);
36017                     if(r && rstate){
36018                         if(rstate.size){
36019                             r.resizeTo(rstate.size);
36020                         }
36021                         if(rstate.collapsed == true){
36022                             r.collapse(true);
36023                         }else{
36024                             r.expand(null, true);
36025                         }
36026                     }
36027                 }
36028             }
36029             if(!wasUpdating){
36030                 layout.endUpdate();
36031             }
36032             this.state = state; 
36033         }
36034         this.layout = layout;
36035         layout.on("regionresized", this.onRegionResized, this);
36036         layout.on("regioncollapsed", this.onRegionCollapsed, this);
36037         layout.on("regionexpanded", this.onRegionExpanded, this);
36038     },
36039     
36040     storeState : function(){
36041         this.provider.set(this.layout.id+"-layout-state", this.state);
36042     },
36043     
36044     onRegionResized : function(region, newSize){
36045         this.state[region.getPosition()].size = newSize;
36046         this.storeState();
36047     },
36048     
36049     onRegionCollapsed : function(region){
36050         this.state[region.getPosition()].collapsed = true;
36051         this.storeState();
36052     },
36053     
36054     onRegionExpanded : function(region){
36055         this.state[region.getPosition()].collapsed = false;
36056         this.storeState();
36057     }
36058 };/*
36059  * Based on:
36060  * Ext JS Library 1.1.1
36061  * Copyright(c) 2006-2007, Ext JS, LLC.
36062  *
36063  * Originally Released Under LGPL - original licence link has changed is not relivant.
36064  *
36065  * Fork - LGPL
36066  * <script type="text/javascript">
36067  */
36068 /**
36069  * @class Roo.ContentPanel
36070  * @extends Roo.util.Observable
36071  * @children Roo.form.Form Roo.JsonView Roo.View
36072  * @parent Roo.BorderLayout Roo.LayoutDialog builder
36073  * A basic ContentPanel element.
36074  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
36075  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
36076  * @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
36077  * @cfg {Boolean}   closable      True if the panel can be closed/removed
36078  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
36079  * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
36080  * @cfg {Roo.Toolbar}   toolbar       A toolbar for this panel
36081  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
36082  * @cfg {String} title          The title for this panel
36083  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
36084  * @cfg {String} url            Calls {@link #setUrl} with this value
36085  * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
36086  * @cfg {String|Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
36087  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
36088  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
36089  * @cfg {String}    style  Extra style to add to the content panel
36090  * @cfg {Roo.menu.Menu} menu  popup menu
36091
36092  * @constructor
36093  * Create a new ContentPanel.
36094  * @param {String/HTMLElement/Roo.Element} el The container element for this panel
36095  * @param {String/Object} config A string to set only the title or a config object
36096  * @param {String} content (optional) Set the HTML content for this panel
36097  * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
36098  */
36099 Roo.ContentPanel = function(el, config, content){
36100     
36101     /*
36102     if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
36103         config = el;
36104         el = Roo.id();
36105     }
36106     if (config && config.parentLayout) { 
36107         el = config.parentLayout.el.createChild(); 
36108     }
36109     */
36110     if(el.autoCreate){ // xtype is available if this is called from factory
36111         config = el;
36112         el = Roo.id();
36113     }
36114     this.el = Roo.get(el);
36115     if(!this.el && config && config.autoCreate){
36116         if(typeof config.autoCreate == "object"){
36117             if(!config.autoCreate.id){
36118                 config.autoCreate.id = config.id||el;
36119             }
36120             this.el = Roo.DomHelper.append(document.body,
36121                         config.autoCreate, true);
36122         }else{
36123             this.el = Roo.DomHelper.append(document.body,
36124                         {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
36125         }
36126     }
36127     
36128     
36129     this.closable = false;
36130     this.loaded = false;
36131     this.active = false;
36132     if(typeof config == "string"){
36133         this.title = config;
36134     }else{
36135         Roo.apply(this, config);
36136     }
36137     
36138     if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
36139         this.wrapEl = this.el.wrap();
36140         this.toolbar.container = this.el.insertSibling(false, 'before');
36141         this.toolbar = new Roo.Toolbar(this.toolbar);
36142     }
36143     
36144     // xtype created footer. - not sure if will work as we normally have to render first..
36145     if (this.footer && !this.footer.el && this.footer.xtype) {
36146         if (!this.wrapEl) {
36147             this.wrapEl = this.el.wrap();
36148         }
36149     
36150         this.footer.container = this.wrapEl.createChild();
36151          
36152         this.footer = Roo.factory(this.footer, Roo);
36153         
36154     }
36155     
36156     if(this.resizeEl){
36157         this.resizeEl = Roo.get(this.resizeEl, true);
36158     }else{
36159         this.resizeEl = this.el;
36160     }
36161     // handle view.xtype
36162     
36163  
36164     
36165     
36166     this.addEvents({
36167         /**
36168          * @event activate
36169          * Fires when this panel is activated. 
36170          * @param {Roo.ContentPanel} this
36171          */
36172         "activate" : true,
36173         /**
36174          * @event deactivate
36175          * Fires when this panel is activated. 
36176          * @param {Roo.ContentPanel} this
36177          */
36178         "deactivate" : true,
36179
36180         /**
36181          * @event resize
36182          * Fires when this panel is resized if fitToFrame is true.
36183          * @param {Roo.ContentPanel} this
36184          * @param {Number} width The width after any component adjustments
36185          * @param {Number} height The height after any component adjustments
36186          */
36187         "resize" : true,
36188         
36189          /**
36190          * @event render
36191          * Fires when this tab is created
36192          * @param {Roo.ContentPanel} this
36193          */
36194         "render" : true
36195          
36196         
36197     });
36198     
36199
36200     
36201     
36202     if(this.autoScroll){
36203         this.resizeEl.setStyle("overflow", "auto");
36204     } else {
36205         // fix randome scrolling
36206         this.el.on('scroll', function() {
36207             Roo.log('fix random scolling');
36208             this.scrollTo('top',0); 
36209         });
36210     }
36211     content = content || this.content;
36212     if(content){
36213         this.setContent(content);
36214     }
36215     if(config && config.url){
36216         this.setUrl(this.url, this.params, this.loadOnce);
36217     }
36218     
36219     
36220     
36221     Roo.ContentPanel.superclass.constructor.call(this);
36222     
36223     if (this.view && typeof(this.view.xtype) != 'undefined') {
36224         this.view.el = this.el.appendChild(document.createElement("div"));
36225         this.view = Roo.factory(this.view); 
36226         this.view.render  &&  this.view.render(false, '');  
36227     }
36228     
36229     
36230     this.fireEvent('render', this);
36231 };
36232
36233 Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
36234     tabTip:'',
36235     setRegion : function(region){
36236         this.region = region;
36237         if(region){
36238            this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
36239         }else{
36240            this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
36241         } 
36242     },
36243     
36244     /**
36245      * Returns the toolbar for this Panel if one was configured. 
36246      * @return {Roo.Toolbar} 
36247      */
36248     getToolbar : function(){
36249         return this.toolbar;
36250     },
36251     
36252     setActiveState : function(active){
36253         this.active = active;
36254         if(!active){
36255             this.fireEvent("deactivate", this);
36256         }else{
36257             this.fireEvent("activate", this);
36258         }
36259     },
36260     /**
36261      * Updates this panel's element
36262      * @param {String} content The new content
36263      * @param {Boolean} loadScripts (optional) true to look for and process scripts
36264     */
36265     setContent : function(content, loadScripts){
36266         this.el.update(content, loadScripts);
36267     },
36268
36269     ignoreResize : function(w, h){
36270         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
36271             return true;
36272         }else{
36273             this.lastSize = {width: w, height: h};
36274             return false;
36275         }
36276     },
36277     /**
36278      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
36279      * @return {Roo.UpdateManager} The UpdateManager
36280      */
36281     getUpdateManager : function(){
36282         return this.el.getUpdateManager();
36283     },
36284      /**
36285      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
36286      * @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:
36287 <pre><code>
36288 panel.load({
36289     url: "your-url.php",
36290     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
36291     callback: yourFunction,
36292     scope: yourObject, //(optional scope)
36293     discardUrl: false,
36294     nocache: false,
36295     text: "Loading...",
36296     timeout: 30,
36297     scripts: false
36298 });
36299 </code></pre>
36300      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
36301      * 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.
36302      * @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}
36303      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
36304      * @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.
36305      * @return {Roo.ContentPanel} this
36306      */
36307     load : function(){
36308         var um = this.el.getUpdateManager();
36309         um.update.apply(um, arguments);
36310         return this;
36311     },
36312
36313
36314     /**
36315      * 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.
36316      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
36317      * @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)
36318      * @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)
36319      * @return {Roo.UpdateManager} The UpdateManager
36320      */
36321     setUrl : function(url, params, loadOnce){
36322         if(this.refreshDelegate){
36323             this.removeListener("activate", this.refreshDelegate);
36324         }
36325         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
36326         this.on("activate", this.refreshDelegate);
36327         return this.el.getUpdateManager();
36328     },
36329     
36330     _handleRefresh : function(url, params, loadOnce){
36331         if(!loadOnce || !this.loaded){
36332             var updater = this.el.getUpdateManager();
36333             updater.update(url, params, this._setLoaded.createDelegate(this));
36334         }
36335     },
36336     
36337     _setLoaded : function(){
36338         this.loaded = true;
36339     }, 
36340     
36341     /**
36342      * Returns this panel's id
36343      * @return {String} 
36344      */
36345     getId : function(){
36346         return this.el.id;
36347     },
36348     
36349     /** 
36350      * Returns this panel's element - used by regiosn to add.
36351      * @return {Roo.Element} 
36352      */
36353     getEl : function(){
36354         return this.wrapEl || this.el;
36355     },
36356     
36357     adjustForComponents : function(width, height)
36358     {
36359         //Roo.log('adjustForComponents ');
36360         if(this.resizeEl != this.el){
36361             width -= this.el.getFrameWidth('lr');
36362             height -= this.el.getFrameWidth('tb');
36363         }
36364         if(this.toolbar){
36365             var te = this.toolbar.getEl();
36366             height -= te.getHeight();
36367             te.setWidth(width);
36368         }
36369         if(this.footer){
36370             var te = this.footer.getEl();
36371             //Roo.log("footer:" + te.getHeight());
36372             
36373             height -= te.getHeight();
36374             te.setWidth(width);
36375         }
36376         
36377         
36378         if(this.adjustments){
36379             width += this.adjustments[0];
36380             height += this.adjustments[1];
36381         }
36382         return {"width": width, "height": height};
36383     },
36384     
36385     setSize : function(width, height){
36386         if(this.fitToFrame && !this.ignoreResize(width, height)){
36387             if(this.fitContainer && this.resizeEl != this.el){
36388                 this.el.setSize(width, height);
36389             }
36390             var size = this.adjustForComponents(width, height);
36391             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
36392             this.fireEvent('resize', this, size.width, size.height);
36393         }
36394     },
36395     
36396     /**
36397      * Returns this panel's title
36398      * @return {String} 
36399      */
36400     getTitle : function(){
36401         return this.title;
36402     },
36403     
36404     /**
36405      * Set this panel's title
36406      * @param {String} title
36407      */
36408     setTitle : function(title){
36409         this.title = title;
36410         if(this.region){
36411             this.region.updatePanelTitle(this, title);
36412         }
36413     },
36414     
36415     /**
36416      * Returns true is this panel was configured to be closable
36417      * @return {Boolean} 
36418      */
36419     isClosable : function(){
36420         return this.closable;
36421     },
36422     
36423     beforeSlide : function(){
36424         this.el.clip();
36425         this.resizeEl.clip();
36426     },
36427     
36428     afterSlide : function(){
36429         this.el.unclip();
36430         this.resizeEl.unclip();
36431     },
36432     
36433     /**
36434      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
36435      *   Will fail silently if the {@link #setUrl} method has not been called.
36436      *   This does not activate the panel, just updates its content.
36437      */
36438     refresh : function(){
36439         if(this.refreshDelegate){
36440            this.loaded = false;
36441            this.refreshDelegate();
36442         }
36443     },
36444     
36445     /**
36446      * Destroys this panel
36447      */
36448     destroy : function(){
36449         this.el.removeAllListeners();
36450         var tempEl = document.createElement("span");
36451         tempEl.appendChild(this.el.dom);
36452         tempEl.innerHTML = "";
36453         this.el.remove();
36454         this.el = null;
36455     },
36456     
36457     /**
36458      * form - if the content panel contains a form - this is a reference to it.
36459      * @type {Roo.form.Form}
36460      */
36461     form : false,
36462     /**
36463      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
36464      *    This contains a reference to it.
36465      * @type {Roo.View}
36466      */
36467     view : false,
36468     
36469       /**
36470      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
36471      * <pre><code>
36472
36473 layout.addxtype({
36474        xtype : 'Form',
36475        items: [ .... ]
36476    }
36477 );
36478
36479 </code></pre>
36480      * @param {Object} cfg Xtype definition of item to add.
36481      */
36482     
36483     addxtype : function(cfg) {
36484         if(cfg.xtype.match(/^UploadCropbox$/)) {
36485
36486             this.cropbox = new Roo.factory(cfg);
36487
36488             this.cropbox.render(this.el);
36489
36490             return this.cropbox;
36491         }
36492         // add form..
36493         if (cfg.xtype.match(/^Form$/)) {
36494             
36495             var el;
36496             //if (this.footer) {
36497             //    el = this.footer.container.insertSibling(false, 'before');
36498             //} else {
36499                 el = this.el.createChild();
36500             //}
36501
36502             this.form = new  Roo.form.Form(cfg);
36503             
36504             
36505             if ( this.form.allItems.length) {
36506                 this.form.render(el.dom);
36507             }
36508             return this.form;
36509         }
36510         // should only have one of theses..
36511         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
36512             // views.. should not be just added - used named prop 'view''
36513             
36514             cfg.el = this.el.appendChild(document.createElement("div"));
36515             // factory?
36516             
36517             var ret = new Roo.factory(cfg);
36518              
36519              ret.render && ret.render(false, ''); // render blank..
36520             this.view = ret;
36521             return ret;
36522         }
36523         return false;
36524     }
36525 });
36526
36527
36528
36529
36530
36531
36532
36533
36534
36535
36536
36537
36538 /**
36539  * @class Roo.GridPanel
36540  * @extends Roo.ContentPanel
36541  * @parent Roo.BorderLayout Roo.LayoutDialog builder
36542  * @constructor
36543  * Create a new GridPanel.
36544  * @cfg {Roo.grid.Grid} grid The grid for this panel
36545  */
36546 Roo.GridPanel = function(grid, config){
36547     
36548     // universal ctor...
36549     if (typeof(grid.grid) != 'undefined') {
36550         config = grid;
36551         grid = config.grid;
36552     }
36553     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
36554         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
36555         
36556     this.wrapper.dom.appendChild(grid.getGridEl().dom);
36557     
36558     Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
36559     
36560     if(this.toolbar){
36561         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
36562     }
36563     // xtype created footer. - not sure if will work as we normally have to render first..
36564     if (this.footer && !this.footer.el && this.footer.xtype) {
36565         
36566         this.footer.container = this.grid.getView().getFooterPanel(true);
36567         this.footer.dataSource = this.grid.dataSource;
36568         this.footer = Roo.factory(this.footer, Roo);
36569         
36570     }
36571     
36572     grid.monitorWindowResize = false; // turn off autosizing
36573     grid.autoHeight = false;
36574     grid.autoWidth = false;
36575     this.grid = grid;
36576     this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
36577 };
36578
36579 Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
36580     getId : function(){
36581         return this.grid.id;
36582     },
36583     
36584     /**
36585      * Returns the grid for this panel
36586      * @return {Roo.grid.Grid} 
36587      */
36588     getGrid : function(){
36589         return this.grid;    
36590     },
36591     
36592     setSize : function(width, height){
36593         if(!this.ignoreResize(width, height)){
36594             var grid = this.grid;
36595             var size = this.adjustForComponents(width, height);
36596             grid.getGridEl().setSize(size.width, size.height);
36597             grid.autoSize();
36598         }
36599     },
36600     
36601     beforeSlide : function(){
36602         this.grid.getView().scroller.clip();
36603     },
36604     
36605     afterSlide : function(){
36606         this.grid.getView().scroller.unclip();
36607     },
36608     
36609     destroy : function(){
36610         this.grid.destroy();
36611         delete this.grid;
36612         Roo.GridPanel.superclass.destroy.call(this); 
36613     }
36614 });
36615
36616
36617 /**
36618  * @class Roo.NestedLayoutPanel
36619  * @extends Roo.ContentPanel
36620  * @parent Roo.BorderLayout Roo.LayoutDialog builder
36621  * @cfg {Roo.BorderLayout} layout   [required] The layout for this panel
36622  *
36623  * 
36624  * @constructor
36625  * Create a new NestedLayoutPanel.
36626  * 
36627  * 
36628  * @param {Roo.BorderLayout} layout [required] The layout for this panel
36629  * @param {String/Object} config A string to set only the title or a config object
36630  */
36631 Roo.NestedLayoutPanel = function(layout, config)
36632 {
36633     // construct with only one argument..
36634     /* FIXME - implement nicer consturctors
36635     if (layout.layout) {
36636         config = layout;
36637         layout = config.layout;
36638         delete config.layout;
36639     }
36640     if (layout.xtype && !layout.getEl) {
36641         // then layout needs constructing..
36642         layout = Roo.factory(layout, Roo);
36643     }
36644     */
36645     
36646     
36647     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
36648     
36649     layout.monitorWindowResize = false; // turn off autosizing
36650     this.layout = layout;
36651     this.layout.getEl().addClass("x-layout-nested-layout");
36652     
36653     
36654     
36655     
36656 };
36657
36658 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
36659
36660     layout : false,
36661
36662     setSize : function(width, height){
36663         if(!this.ignoreResize(width, height)){
36664             var size = this.adjustForComponents(width, height);
36665             var el = this.layout.getEl();
36666             el.setSize(size.width, size.height);
36667             var touch = el.dom.offsetWidth;
36668             this.layout.layout();
36669             // ie requires a double layout on the first pass
36670             if(Roo.isIE && !this.initialized){
36671                 this.initialized = true;
36672                 this.layout.layout();
36673             }
36674         }
36675     },
36676     
36677     // activate all subpanels if not currently active..
36678     
36679     setActiveState : function(active){
36680         this.active = active;
36681         if(!active){
36682             this.fireEvent("deactivate", this);
36683             return;
36684         }
36685         
36686         this.fireEvent("activate", this);
36687         // not sure if this should happen before or after..
36688         if (!this.layout) {
36689             return; // should not happen..
36690         }
36691         var reg = false;
36692         for (var r in this.layout.regions) {
36693             reg = this.layout.getRegion(r);
36694             if (reg.getActivePanel()) {
36695                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
36696                 reg.setActivePanel(reg.getActivePanel());
36697                 continue;
36698             }
36699             if (!reg.panels.length) {
36700                 continue;
36701             }
36702             reg.showPanel(reg.getPanel(0));
36703         }
36704         
36705         
36706         
36707         
36708     },
36709     
36710     /**
36711      * Returns the nested BorderLayout for this panel
36712      * @return {Roo.BorderLayout}
36713      */
36714     getLayout : function(){
36715         return this.layout;
36716     },
36717     
36718      /**
36719      * Adds a xtype elements to the layout of the nested panel
36720      * <pre><code>
36721
36722 panel.addxtype({
36723        xtype : 'ContentPanel',
36724        region: 'west',
36725        items: [ .... ]
36726    }
36727 );
36728
36729 panel.addxtype({
36730         xtype : 'NestedLayoutPanel',
36731         region: 'west',
36732         layout: {
36733            center: { },
36734            west: { }   
36735         },
36736         items : [ ... list of content panels or nested layout panels.. ]
36737    }
36738 );
36739 </code></pre>
36740      * @param {Object} cfg Xtype definition of item to add.
36741      */
36742     addxtype : function(cfg) {
36743         return this.layout.addxtype(cfg);
36744     
36745     }
36746 });
36747
36748 Roo.ScrollPanel = function(el, config, content){
36749     config = config || {};
36750     config.fitToFrame = true;
36751     Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
36752     
36753     this.el.dom.style.overflow = "hidden";
36754     var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
36755     this.el.removeClass("x-layout-inactive-content");
36756     this.el.on("mousewheel", this.onWheel, this);
36757
36758     var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
36759     var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
36760     up.unselectable(); down.unselectable();
36761     up.on("click", this.scrollUp, this);
36762     down.on("click", this.scrollDown, this);
36763     up.addClassOnOver("x-scroller-btn-over");
36764     down.addClassOnOver("x-scroller-btn-over");
36765     up.addClassOnClick("x-scroller-btn-click");
36766     down.addClassOnClick("x-scroller-btn-click");
36767     this.adjustments = [0, -(up.getHeight() + down.getHeight())];
36768
36769     this.resizeEl = this.el;
36770     this.el = wrap; this.up = up; this.down = down;
36771 };
36772
36773 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
36774     increment : 100,
36775     wheelIncrement : 5,
36776     scrollUp : function(){
36777         this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
36778     },
36779
36780     scrollDown : function(){
36781         this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
36782     },
36783
36784     afterScroll : function(){
36785         var el = this.resizeEl;
36786         var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
36787         this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
36788         this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
36789     },
36790
36791     setSize : function(){
36792         Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
36793         this.afterScroll();
36794     },
36795
36796     onWheel : function(e){
36797         var d = e.getWheelDelta();
36798         this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
36799         this.afterScroll();
36800         e.stopEvent();
36801     },
36802
36803     setContent : function(content, loadScripts){
36804         this.resizeEl.update(content, loadScripts);
36805     }
36806
36807 });
36808
36809
36810
36811 /**
36812  * @class Roo.TreePanel
36813  * @extends Roo.ContentPanel
36814  * @parent Roo.BorderLayout Roo.LayoutDialog builder
36815  * Treepanel component
36816  * 
36817  * @constructor
36818  * Create a new TreePanel. - defaults to fit/scoll contents.
36819  * @param {String/Object} config A string to set only the panel's title, or a config object
36820  */
36821 Roo.TreePanel = function(config){
36822     var el = config.el;
36823     var tree = config.tree;
36824     delete config.tree; 
36825     delete config.el; // hopefull!
36826     
36827     // wrapper for IE7 strict & safari scroll issue
36828     
36829     var treeEl = el.createChild();
36830     config.resizeEl = treeEl;
36831     
36832     
36833     
36834     Roo.TreePanel.superclass.constructor.call(this, el, config);
36835  
36836  
36837     this.tree = new Roo.tree.TreePanel(treeEl , tree);
36838     //console.log(tree);
36839     this.on('activate', function()
36840     {
36841         if (this.tree.rendered) {
36842             return;
36843         }
36844         //console.log('render tree');
36845         this.tree.render();
36846     });
36847     // this should not be needed.. - it's actually the 'el' that resizes?
36848     // actuall it breaks the containerScroll - dragging nodes auto scroll at top
36849     
36850     //this.on('resize',  function (cp, w, h) {
36851     //        this.tree.innerCt.setWidth(w);
36852     //        this.tree.innerCt.setHeight(h);
36853     //        //this.tree.innerCt.setStyle('overflow-y', 'auto');
36854     //});
36855
36856         
36857     
36858 };
36859
36860 Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
36861     fitToFrame : true,
36862     autoScroll : true,
36863     /*
36864      * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
36865      */
36866     tree : false
36867
36868 });
36869 /*
36870  * Based on:
36871  * Ext JS Library 1.1.1
36872  * Copyright(c) 2006-2007, Ext JS, LLC.
36873  *
36874  * Originally Released Under LGPL - original licence link has changed is not relivant.
36875  *
36876  * Fork - LGPL
36877  * <script type="text/javascript">
36878  */
36879  
36880
36881 /**
36882  * @class Roo.ReaderLayout
36883  * @extends Roo.BorderLayout
36884  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
36885  * center region containing two nested regions (a top one for a list view and one for item preview below),
36886  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
36887  * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
36888  * expedites the setup of the overall layout and regions for this common application style.
36889  * Example:
36890  <pre><code>
36891 var reader = new Roo.ReaderLayout();
36892 var CP = Roo.ContentPanel;  // shortcut for adding
36893
36894 reader.beginUpdate();
36895 reader.add("north", new CP("north", "North"));
36896 reader.add("west", new CP("west", {title: "West"}));
36897 reader.add("east", new CP("east", {title: "East"}));
36898
36899 reader.regions.listView.add(new CP("listView", "List"));
36900 reader.regions.preview.add(new CP("preview", "Preview"));
36901 reader.endUpdate();
36902 </code></pre>
36903 * @constructor
36904 * Create a new ReaderLayout
36905 * @param {Object} config Configuration options
36906 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
36907 * document.body if omitted)
36908 */
36909 Roo.ReaderLayout = function(config, renderTo){
36910     var c = config || {size:{}};
36911     Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
36912         north: c.north !== false ? Roo.apply({
36913             split:false,
36914             initialSize: 32,
36915             titlebar: false
36916         }, c.north) : false,
36917         west: c.west !== false ? Roo.apply({
36918             split:true,
36919             initialSize: 200,
36920             minSize: 175,
36921             maxSize: 400,
36922             titlebar: true,
36923             collapsible: true,
36924             animate: true,
36925             margins:{left:5,right:0,bottom:5,top:5},
36926             cmargins:{left:5,right:5,bottom:5,top:5}
36927         }, c.west) : false,
36928         east: c.east !== false ? Roo.apply({
36929             split:true,
36930             initialSize: 200,
36931             minSize: 175,
36932             maxSize: 400,
36933             titlebar: true,
36934             collapsible: true,
36935             animate: true,
36936             margins:{left:0,right:5,bottom:5,top:5},
36937             cmargins:{left:5,right:5,bottom:5,top:5}
36938         }, c.east) : false,
36939         center: Roo.apply({
36940             tabPosition: 'top',
36941             autoScroll:false,
36942             closeOnTab: true,
36943             titlebar:false,
36944             margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
36945         }, c.center)
36946     });
36947
36948     this.el.addClass('x-reader');
36949
36950     this.beginUpdate();
36951
36952     var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
36953         south: c.preview !== false ? Roo.apply({
36954             split:true,
36955             initialSize: 200,
36956             minSize: 100,
36957             autoScroll:true,
36958             collapsible:true,
36959             titlebar: true,
36960             cmargins:{top:5,left:0, right:0, bottom:0}
36961         }, c.preview) : false,
36962         center: Roo.apply({
36963             autoScroll:false,
36964             titlebar:false,
36965             minHeight:200
36966         }, c.listView)
36967     });
36968     this.add('center', new Roo.NestedLayoutPanel(inner,
36969             Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
36970
36971     this.endUpdate();
36972
36973     this.regions.preview = inner.getRegion('south');
36974     this.regions.listView = inner.getRegion('center');
36975 };
36976
36977 Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
36978  * Based on:
36979  * Ext JS Library 1.1.1
36980  * Copyright(c) 2006-2007, Ext JS, LLC.
36981  *
36982  * Originally Released Under LGPL - original licence link has changed is not relivant.
36983  *
36984  * Fork - LGPL
36985  * <script type="text/javascript">
36986  */
36987  
36988 /**
36989  * @class Roo.grid.Grid
36990  * @extends Roo.util.Observable
36991  * This class represents the primary interface of a component based grid control.
36992  * <br><br>Usage:<pre><code>
36993  var grid = new Roo.grid.Grid("my-container-id", {
36994      ds: myDataStore,
36995      cm: myColModel,
36996      selModel: mySelectionModel,
36997      autoSizeColumns: true,
36998      monitorWindowResize: false,
36999      trackMouseOver: true
37000  });
37001  // set any options
37002  grid.render();
37003  * </code></pre>
37004  * <b>Common Problems:</b><br/>
37005  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
37006  * element will correct this<br/>
37007  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
37008  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
37009  * are unpredictable.<br/>
37010  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
37011  * grid to calculate dimensions/offsets.<br/>
37012   * @constructor
37013  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
37014  * The container MUST have some type of size defined for the grid to fill. The container will be
37015  * automatically set to position relative if it isn't already.
37016  * @param {Object} config A config object that sets properties on this grid.
37017  */
37018 Roo.grid.Grid = function(container, config){
37019         // initialize the container
37020         this.container = Roo.get(container);
37021         this.container.update("");
37022         this.container.setStyle("overflow", "hidden");
37023     this.container.addClass('x-grid-container');
37024
37025     this.id = this.container.id;
37026
37027     Roo.apply(this, config);
37028     // check and correct shorthanded configs
37029     if(this.ds){
37030         this.dataSource = this.ds;
37031         delete this.ds;
37032     }
37033     if(this.cm){
37034         this.colModel = this.cm;
37035         delete this.cm;
37036     }
37037     if(this.sm){
37038         this.selModel = this.sm;
37039         delete this.sm;
37040     }
37041
37042     if (this.selModel) {
37043         this.selModel = Roo.factory(this.selModel, Roo.grid);
37044         this.sm = this.selModel;
37045         this.sm.xmodule = this.xmodule || false;
37046     }
37047     if (typeof(this.colModel.config) == 'undefined') {
37048         this.colModel = new Roo.grid.ColumnModel(this.colModel);
37049         this.cm = this.colModel;
37050         this.cm.xmodule = this.xmodule || false;
37051     }
37052     if (this.dataSource) {
37053         this.dataSource= Roo.factory(this.dataSource, Roo.data);
37054         this.ds = this.dataSource;
37055         this.ds.xmodule = this.xmodule || false;
37056          
37057     }
37058     
37059     
37060     
37061     if(this.width){
37062         this.container.setWidth(this.width);
37063     }
37064
37065     if(this.height){
37066         this.container.setHeight(this.height);
37067     }
37068     /** @private */
37069         this.addEvents({
37070         // raw events
37071         /**
37072          * @event click
37073          * The raw click event for the entire grid.
37074          * @param {Roo.EventObject} e
37075          */
37076         "click" : true,
37077         /**
37078          * @event dblclick
37079          * The raw dblclick event for the entire grid.
37080          * @param {Roo.EventObject} e
37081          */
37082         "dblclick" : true,
37083         /**
37084          * @event contextmenu
37085          * The raw contextmenu event for the entire grid.
37086          * @param {Roo.EventObject} e
37087          */
37088         "contextmenu" : true,
37089         /**
37090          * @event mousedown
37091          * The raw mousedown event for the entire grid.
37092          * @param {Roo.EventObject} e
37093          */
37094         "mousedown" : true,
37095         /**
37096          * @event mouseup
37097          * The raw mouseup event for the entire grid.
37098          * @param {Roo.EventObject} e
37099          */
37100         "mouseup" : true,
37101         /**
37102          * @event mouseover
37103          * The raw mouseover event for the entire grid.
37104          * @param {Roo.EventObject} e
37105          */
37106         "mouseover" : true,
37107         /**
37108          * @event mouseout
37109          * The raw mouseout event for the entire grid.
37110          * @param {Roo.EventObject} e
37111          */
37112         "mouseout" : true,
37113         /**
37114          * @event keypress
37115          * The raw keypress event for the entire grid.
37116          * @param {Roo.EventObject} e
37117          */
37118         "keypress" : true,
37119         /**
37120          * @event keydown
37121          * The raw keydown event for the entire grid.
37122          * @param {Roo.EventObject} e
37123          */
37124         "keydown" : true,
37125
37126         // custom events
37127
37128         /**
37129          * @event cellclick
37130          * Fires when a cell is clicked
37131          * @param {Grid} this
37132          * @param {Number} rowIndex
37133          * @param {Number} columnIndex
37134          * @param {Roo.EventObject} e
37135          */
37136         "cellclick" : true,
37137         /**
37138          * @event celldblclick
37139          * Fires when a cell is double clicked
37140          * @param {Grid} this
37141          * @param {Number} rowIndex
37142          * @param {Number} columnIndex
37143          * @param {Roo.EventObject} e
37144          */
37145         "celldblclick" : true,
37146         /**
37147          * @event rowclick
37148          * Fires when a row is clicked
37149          * @param {Grid} this
37150          * @param {Number} rowIndex
37151          * @param {Roo.EventObject} e
37152          */
37153         "rowclick" : true,
37154         /**
37155          * @event rowdblclick
37156          * Fires when a row is double clicked
37157          * @param {Grid} this
37158          * @param {Number} rowIndex
37159          * @param {Roo.EventObject} e
37160          */
37161         "rowdblclick" : true,
37162         /**
37163          * @event headerclick
37164          * Fires when a header is clicked
37165          * @param {Grid} this
37166          * @param {Number} columnIndex
37167          * @param {Roo.EventObject} e
37168          */
37169         "headerclick" : true,
37170         /**
37171          * @event headerdblclick
37172          * Fires when a header cell is double clicked
37173          * @param {Grid} this
37174          * @param {Number} columnIndex
37175          * @param {Roo.EventObject} e
37176          */
37177         "headerdblclick" : true,
37178         /**
37179          * @event rowcontextmenu
37180          * Fires when a row is right clicked
37181          * @param {Grid} this
37182          * @param {Number} rowIndex
37183          * @param {Roo.EventObject} e
37184          */
37185         "rowcontextmenu" : true,
37186         /**
37187          * @event cellcontextmenu
37188          * Fires when a cell is right clicked
37189          * @param {Grid} this
37190          * @param {Number} rowIndex
37191          * @param {Number} cellIndex
37192          * @param {Roo.EventObject} e
37193          */
37194          "cellcontextmenu" : true,
37195         /**
37196          * @event headercontextmenu
37197          * Fires when a header is right clicked
37198          * @param {Grid} this
37199          * @param {Number} columnIndex
37200          * @param {Roo.EventObject} e
37201          */
37202         "headercontextmenu" : true,
37203         /**
37204          * @event bodyscroll
37205          * Fires when the body element is scrolled
37206          * @param {Number} scrollLeft
37207          * @param {Number} scrollTop
37208          */
37209         "bodyscroll" : true,
37210         /**
37211          * @event columnresize
37212          * Fires when the user resizes a column
37213          * @param {Number} columnIndex
37214          * @param {Number} newSize
37215          */
37216         "columnresize" : true,
37217         /**
37218          * @event columnmove
37219          * Fires when the user moves a column
37220          * @param {Number} oldIndex
37221          * @param {Number} newIndex
37222          */
37223         "columnmove" : true,
37224         /**
37225          * @event startdrag
37226          * Fires when row(s) start being dragged
37227          * @param {Grid} this
37228          * @param {Roo.GridDD} dd The drag drop object
37229          * @param {event} e The raw browser event
37230          */
37231         "startdrag" : true,
37232         /**
37233          * @event enddrag
37234          * Fires when a drag operation is complete
37235          * @param {Grid} this
37236          * @param {Roo.GridDD} dd The drag drop object
37237          * @param {event} e The raw browser event
37238          */
37239         "enddrag" : true,
37240         /**
37241          * @event dragdrop
37242          * Fires when dragged row(s) are dropped on a valid DD target
37243          * @param {Grid} this
37244          * @param {Roo.GridDD} dd The drag drop object
37245          * @param {String} targetId The target drag drop object
37246          * @param {event} e The raw browser event
37247          */
37248         "dragdrop" : true,
37249         /**
37250          * @event dragover
37251          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
37252          * @param {Grid} this
37253          * @param {Roo.GridDD} dd The drag drop object
37254          * @param {String} targetId The target drag drop object
37255          * @param {event} e The raw browser event
37256          */
37257         "dragover" : true,
37258         /**
37259          * @event dragenter
37260          *  Fires when the dragged row(s) first cross another DD target while being dragged
37261          * @param {Grid} this
37262          * @param {Roo.GridDD} dd The drag drop object
37263          * @param {String} targetId The target drag drop object
37264          * @param {event} e The raw browser event
37265          */
37266         "dragenter" : true,
37267         /**
37268          * @event dragout
37269          * Fires when the dragged row(s) leave another DD target while being dragged
37270          * @param {Grid} this
37271          * @param {Roo.GridDD} dd The drag drop object
37272          * @param {String} targetId The target drag drop object
37273          * @param {event} e The raw browser event
37274          */
37275         "dragout" : true,
37276         /**
37277          * @event rowclass
37278          * Fires when a row is rendered, so you can change add a style to it.
37279          * @param {GridView} gridview   The grid view
37280          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
37281          */
37282         'rowclass' : true,
37283
37284         /**
37285          * @event render
37286          * Fires when the grid is rendered
37287          * @param {Grid} grid
37288          */
37289         'render' : true
37290     });
37291
37292     Roo.grid.Grid.superclass.constructor.call(this);
37293 };
37294 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
37295     
37296     /**
37297          * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
37298          */
37299         /**
37300          * @cfg {Roo.grid.GridView} view  The view that renders the grid (default = Roo.grid.GridView)
37301          */
37302         /**
37303          * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
37304          */
37305         /**
37306          * @cfg {Roo.data.Store} ds The data store for the grid
37307          */
37308         /**
37309          * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
37310          */
37311         /**
37312      * @cfg {String} ddGroup - drag drop group.
37313      */
37314       /**
37315      * @cfg {String} dragGroup - drag group (?? not sure if needed.)
37316      */
37317
37318     /**
37319      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
37320      */
37321     minColumnWidth : 25,
37322
37323     /**
37324      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
37325      * <b>on initial render.</b> It is more efficient to explicitly size the columns
37326      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
37327      */
37328     autoSizeColumns : false,
37329
37330     /**
37331      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
37332      */
37333     autoSizeHeaders : true,
37334
37335     /**
37336      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
37337      */
37338     monitorWindowResize : true,
37339
37340     /**
37341      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
37342      * rows measured to get a columns size. Default is 0 (all rows).
37343      */
37344     maxRowsToMeasure : 0,
37345
37346     /**
37347      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
37348      */
37349     trackMouseOver : true,
37350
37351     /**
37352     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
37353     */
37354       /**
37355     * @cfg {Boolean} enableDrop  True to enable drop of elements. Default is false. (double check if this is needed?)
37356     */
37357     
37358     /**
37359     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
37360     */
37361     enableDragDrop : false,
37362     
37363     /**
37364     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
37365     */
37366     enableColumnMove : true,
37367     
37368     /**
37369     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
37370     */
37371     enableColumnHide : true,
37372     
37373     /**
37374     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
37375     */
37376     enableRowHeightSync : false,
37377     
37378     /**
37379     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
37380     */
37381     stripeRows : true,
37382     
37383     /**
37384     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
37385     */
37386     autoHeight : false,
37387
37388     /**
37389      * @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.
37390      */
37391     autoExpandColumn : false,
37392
37393     /**
37394     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
37395     * Default is 50.
37396     */
37397     autoExpandMin : 50,
37398
37399     /**
37400     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
37401     */
37402     autoExpandMax : 1000,
37403
37404     /**
37405     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
37406     */
37407     view : null,
37408
37409     /**
37410     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
37411     */
37412     loadMask : false,
37413     /**
37414     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
37415     */
37416     dropTarget: false,
37417      /**
37418     * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
37419     */ 
37420     sortColMenu : false,
37421     
37422     // private
37423     rendered : false,
37424
37425     /**
37426     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
37427     * of a fixed width. Default is false.
37428     */
37429     /**
37430     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
37431     */
37432     
37433     
37434     /**
37435     * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
37436     * %0 is replaced with the number of selected rows.
37437     */
37438     ddText : "{0} selected row{1}",
37439     
37440     
37441     /**
37442      * Called once after all setup has been completed and the grid is ready to be rendered.
37443      * @return {Roo.grid.Grid} this
37444      */
37445     render : function()
37446     {
37447         var c = this.container;
37448         // try to detect autoHeight/width mode
37449         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
37450             this.autoHeight = true;
37451         }
37452         var view = this.getView();
37453         view.init(this);
37454
37455         c.on("click", this.onClick, this);
37456         c.on("dblclick", this.onDblClick, this);
37457         c.on("contextmenu", this.onContextMenu, this);
37458         c.on("keydown", this.onKeyDown, this);
37459         if (Roo.isTouch) {
37460             c.on("touchstart", this.onTouchStart, this);
37461         }
37462
37463         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
37464
37465         this.getSelectionModel().init(this);
37466
37467         view.render();
37468
37469         if(this.loadMask){
37470             this.loadMask = new Roo.LoadMask(this.container,
37471                     Roo.apply({store:this.dataSource}, this.loadMask));
37472         }
37473         
37474         
37475         if (this.toolbar && this.toolbar.xtype) {
37476             this.toolbar.container = this.getView().getHeaderPanel(true);
37477             this.toolbar = new Roo.Toolbar(this.toolbar);
37478         }
37479         if (this.footer && this.footer.xtype) {
37480             this.footer.dataSource = this.getDataSource();
37481             this.footer.container = this.getView().getFooterPanel(true);
37482             this.footer = Roo.factory(this.footer, Roo);
37483         }
37484         if (this.dropTarget && this.dropTarget.xtype) {
37485             delete this.dropTarget.xtype;
37486             this.dropTarget =  new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
37487         }
37488         
37489         
37490         this.rendered = true;
37491         this.fireEvent('render', this);
37492         return this;
37493     },
37494
37495     /**
37496      * Reconfigures the grid to use a different Store and Column Model.
37497      * The View will be bound to the new objects and refreshed.
37498      * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
37499      * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
37500      */
37501     reconfigure : function(dataSource, colModel){
37502         if(this.loadMask){
37503             this.loadMask.destroy();
37504             this.loadMask = new Roo.LoadMask(this.container,
37505                     Roo.apply({store:dataSource}, this.loadMask));
37506         }
37507         this.view.bind(dataSource, colModel);
37508         this.dataSource = dataSource;
37509         this.colModel = colModel;
37510         this.view.refresh(true);
37511     },
37512     /**
37513      * addColumns
37514      * Add's a column, default at the end..
37515      
37516      * @param {int} position to add (default end)
37517      * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel} 
37518      */
37519     addColumns : function(pos, ar)
37520     {
37521         
37522         for (var i =0;i< ar.length;i++) {
37523             var cfg = ar[i];
37524             cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
37525             this.cm.lookup[cfg.id] = cfg;
37526         }
37527         
37528         
37529         if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
37530             pos = this.cm.config.length; //this.cm.config.push(cfg);
37531         } 
37532         pos = Math.max(0,pos);
37533         ar.unshift(0);
37534         ar.unshift(pos);
37535         this.cm.config.splice.apply(this.cm.config, ar);
37536         
37537         
37538         
37539         this.view.generateRules(this.cm);
37540         this.view.refresh(true);
37541         
37542     },
37543     
37544     
37545     
37546     
37547     // private
37548     onKeyDown : function(e){
37549         this.fireEvent("keydown", e);
37550     },
37551
37552     /**
37553      * Destroy this grid.
37554      * @param {Boolean} removeEl True to remove the element
37555      */
37556     destroy : function(removeEl, keepListeners){
37557         if(this.loadMask){
37558             this.loadMask.destroy();
37559         }
37560         var c = this.container;
37561         c.removeAllListeners();
37562         this.view.destroy();
37563         this.colModel.purgeListeners();
37564         if(!keepListeners){
37565             this.purgeListeners();
37566         }
37567         c.update("");
37568         if(removeEl === true){
37569             c.remove();
37570         }
37571     },
37572
37573     // private
37574     processEvent : function(name, e){
37575         // does this fire select???
37576         //Roo.log('grid:processEvent '  + name);
37577         
37578         if (name != 'touchstart' ) {
37579             this.fireEvent(name, e);    
37580         }
37581         
37582         var t = e.getTarget();
37583         var v = this.view;
37584         var header = v.findHeaderIndex(t);
37585         if(header !== false){
37586             var ename = name == 'touchstart' ? 'click' : name;
37587              
37588             this.fireEvent("header" + ename, this, header, e);
37589         }else{
37590             var row = v.findRowIndex(t);
37591             var cell = v.findCellIndex(t);
37592             if (name == 'touchstart') {
37593                 // first touch is always a click.
37594                 // hopefull this happens after selection is updated.?
37595                 name = false;
37596                 
37597                 if (typeof(this.selModel.getSelectedCell) != 'undefined') {
37598                     var cs = this.selModel.getSelectedCell();
37599                     if (row == cs[0] && cell == cs[1]){
37600                         name = 'dblclick';
37601                     }
37602                 }
37603                 if (typeof(this.selModel.getSelections) != 'undefined') {
37604                     var cs = this.selModel.getSelections();
37605                     var ds = this.dataSource;
37606                     if (cs.length == 1 && ds.getAt(row) == cs[0]){
37607                         name = 'dblclick';
37608                     }
37609                 }
37610                 if (!name) {
37611                     return;
37612                 }
37613             }
37614             
37615             
37616             if(row !== false){
37617                 this.fireEvent("row" + name, this, row, e);
37618                 if(cell !== false){
37619                     this.fireEvent("cell" + name, this, row, cell, e);
37620                 }
37621             }
37622         }
37623     },
37624
37625     // private
37626     onClick : function(e){
37627         this.processEvent("click", e);
37628     },
37629    // private
37630     onTouchStart : function(e){
37631         this.processEvent("touchstart", e);
37632     },
37633
37634     // private
37635     onContextMenu : function(e, t){
37636         this.processEvent("contextmenu", e);
37637     },
37638
37639     // private
37640     onDblClick : function(e){
37641         this.processEvent("dblclick", e);
37642     },
37643
37644     // private
37645     walkCells : function(row, col, step, fn, scope){
37646         var cm = this.colModel, clen = cm.getColumnCount();
37647         var ds = this.dataSource, rlen = ds.getCount(), first = true;
37648         if(step < 0){
37649             if(col < 0){
37650                 row--;
37651                 first = false;
37652             }
37653             while(row >= 0){
37654                 if(!first){
37655                     col = clen-1;
37656                 }
37657                 first = false;
37658                 while(col >= 0){
37659                     if(fn.call(scope || this, row, col, cm) === true){
37660                         return [row, col];
37661                     }
37662                     col--;
37663                 }
37664                 row--;
37665             }
37666         } else {
37667             if(col >= clen){
37668                 row++;
37669                 first = false;
37670             }
37671             while(row < rlen){
37672                 if(!first){
37673                     col = 0;
37674                 }
37675                 first = false;
37676                 while(col < clen){
37677                     if(fn.call(scope || this, row, col, cm) === true){
37678                         return [row, col];
37679                     }
37680                     col++;
37681                 }
37682                 row++;
37683             }
37684         }
37685         return null;
37686     },
37687
37688     // private
37689     getSelections : function(){
37690         return this.selModel.getSelections();
37691     },
37692
37693     /**
37694      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
37695      * but if manual update is required this method will initiate it.
37696      */
37697     autoSize : function(){
37698         if(this.rendered){
37699             this.view.layout();
37700             if(this.view.adjustForScroll){
37701                 this.view.adjustForScroll();
37702             }
37703         }
37704     },
37705
37706     /**
37707      * Returns the grid's underlying element.
37708      * @return {Element} The element
37709      */
37710     getGridEl : function(){
37711         return this.container;
37712     },
37713
37714     // private for compatibility, overridden by editor grid
37715     stopEditing : function(){},
37716
37717     /**
37718      * Returns the grid's SelectionModel.
37719      * @return {SelectionModel}
37720      */
37721     getSelectionModel : function(){
37722         if(!this.selModel){
37723             this.selModel = new Roo.grid.RowSelectionModel();
37724         }
37725         return this.selModel;
37726     },
37727
37728     /**
37729      * Returns the grid's DataSource.
37730      * @return {DataSource}
37731      */
37732     getDataSource : function(){
37733         return this.dataSource;
37734     },
37735
37736     /**
37737      * Returns the grid's ColumnModel.
37738      * @return {ColumnModel}
37739      */
37740     getColumnModel : function(){
37741         return this.colModel;
37742     },
37743
37744     /**
37745      * Returns the grid's GridView object.
37746      * @return {GridView}
37747      */
37748     getView : function(){
37749         if(!this.view){
37750             this.view = new Roo.grid.GridView(this.viewConfig);
37751             this.relayEvents(this.view, [
37752                 "beforerowremoved", "beforerowsinserted",
37753                 "beforerefresh", "rowremoved",
37754                 "rowsinserted", "rowupdated" ,"refresh"
37755             ]);
37756         }
37757         return this.view;
37758     },
37759     /**
37760      * Called to get grid's drag proxy text, by default returns this.ddText.
37761      * Override this to put something different in the dragged text.
37762      * @return {String}
37763      */
37764     getDragDropText : function(){
37765         var count = this.selModel.getCount();
37766         return String.format(this.ddText, count, count == 1 ? '' : 's');
37767     }
37768 });
37769 /*
37770  * Based on:
37771  * Ext JS Library 1.1.1
37772  * Copyright(c) 2006-2007, Ext JS, LLC.
37773  *
37774  * Originally Released Under LGPL - original licence link has changed is not relivant.
37775  *
37776  * Fork - LGPL
37777  * <script type="text/javascript">
37778  */
37779  /**
37780  * @class Roo.grid.AbstractGridView
37781  * @extends Roo.util.Observable
37782  * @abstract
37783  * Abstract base class for grid Views
37784  * @constructor
37785  */
37786 Roo.grid.AbstractGridView = function(){
37787         this.grid = null;
37788         
37789         this.events = {
37790             "beforerowremoved" : true,
37791             "beforerowsinserted" : true,
37792             "beforerefresh" : true,
37793             "rowremoved" : true,
37794             "rowsinserted" : true,
37795             "rowupdated" : true,
37796             "refresh" : true
37797         };
37798     Roo.grid.AbstractGridView.superclass.constructor.call(this);
37799 };
37800
37801 Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
37802     rowClass : "x-grid-row",
37803     cellClass : "x-grid-cell",
37804     tdClass : "x-grid-td",
37805     hdClass : "x-grid-hd",
37806     splitClass : "x-grid-hd-split",
37807     
37808     init: function(grid){
37809         this.grid = grid;
37810                 var cid = this.grid.getGridEl().id;
37811         this.colSelector = "#" + cid + " ." + this.cellClass + "-";
37812         this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
37813         this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
37814         this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
37815         },
37816         
37817     getColumnRenderers : function(){
37818         var renderers = [];
37819         var cm = this.grid.colModel;
37820         var colCount = cm.getColumnCount();
37821         for(var i = 0; i < colCount; i++){
37822             renderers[i] = cm.getRenderer(i);
37823         }
37824         return renderers;
37825     },
37826     
37827     getColumnIds : function(){
37828         var ids = [];
37829         var cm = this.grid.colModel;
37830         var colCount = cm.getColumnCount();
37831         for(var i = 0; i < colCount; i++){
37832             ids[i] = cm.getColumnId(i);
37833         }
37834         return ids;
37835     },
37836     
37837     getDataIndexes : function(){
37838         if(!this.indexMap){
37839             this.indexMap = this.buildIndexMap();
37840         }
37841         return this.indexMap.colToData;
37842     },
37843     
37844     getColumnIndexByDataIndex : function(dataIndex){
37845         if(!this.indexMap){
37846             this.indexMap = this.buildIndexMap();
37847         }
37848         return this.indexMap.dataToCol[dataIndex];
37849     },
37850     
37851     /**
37852      * Set a css style for a column dynamically. 
37853      * @param {Number} colIndex The index of the column
37854      * @param {String} name The css property name
37855      * @param {String} value The css value
37856      */
37857     setCSSStyle : function(colIndex, name, value){
37858         var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
37859         Roo.util.CSS.updateRule(selector, name, value);
37860     },
37861     
37862     generateRules : function(cm){
37863         var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
37864         Roo.util.CSS.removeStyleSheet(rulesId);
37865         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
37866             var cid = cm.getColumnId(i);
37867             ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
37868                          this.tdSelector, cid, " {\n}\n",
37869                          this.hdSelector, cid, " {\n}\n",
37870                          this.splitSelector, cid, " {\n}\n");
37871         }
37872         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
37873     }
37874 });/*
37875  * Based on:
37876  * Ext JS Library 1.1.1
37877  * Copyright(c) 2006-2007, Ext JS, LLC.
37878  *
37879  * Originally Released Under LGPL - original licence link has changed is not relivant.
37880  *
37881  * Fork - LGPL
37882  * <script type="text/javascript">
37883  */
37884
37885 // private
37886 // This is a support class used internally by the Grid components
37887 Roo.grid.HeaderDragZone = function(grid, hd, hd2){
37888     this.grid = grid;
37889     this.view = grid.getView();
37890     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
37891     Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
37892     if(hd2){
37893         this.setHandleElId(Roo.id(hd));
37894         this.setOuterHandleElId(Roo.id(hd2));
37895     }
37896     this.scroll = false;
37897 };
37898 Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
37899     maxDragWidth: 120,
37900     getDragData : function(e){
37901         var t = Roo.lib.Event.getTarget(e);
37902         var h = this.view.findHeaderCell(t);
37903         if(h){
37904             return {ddel: h.firstChild, header:h};
37905         }
37906         return false;
37907     },
37908
37909     onInitDrag : function(e){
37910         this.view.headersDisabled = true;
37911         var clone = this.dragData.ddel.cloneNode(true);
37912         clone.id = Roo.id();
37913         clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
37914         this.proxy.update(clone);
37915         return true;
37916     },
37917
37918     afterValidDrop : function(){
37919         var v = this.view;
37920         setTimeout(function(){
37921             v.headersDisabled = false;
37922         }, 50);
37923     },
37924
37925     afterInvalidDrop : function(){
37926         var v = this.view;
37927         setTimeout(function(){
37928             v.headersDisabled = false;
37929         }, 50);
37930     }
37931 });
37932 /*
37933  * Based on:
37934  * Ext JS Library 1.1.1
37935  * Copyright(c) 2006-2007, Ext JS, LLC.
37936  *
37937  * Originally Released Under LGPL - original licence link has changed is not relivant.
37938  *
37939  * Fork - LGPL
37940  * <script type="text/javascript">
37941  */
37942 // private
37943 // This is a support class used internally by the Grid components
37944 Roo.grid.HeaderDropZone = function(grid, hd, hd2){
37945     this.grid = grid;
37946     this.view = grid.getView();
37947     // split the proxies so they don't interfere with mouse events
37948     this.proxyTop = Roo.DomHelper.append(document.body, {
37949         cls:"col-move-top", html:"&#160;"
37950     }, true);
37951     this.proxyBottom = Roo.DomHelper.append(document.body, {
37952         cls:"col-move-bottom", html:"&#160;"
37953     }, true);
37954     this.proxyTop.hide = this.proxyBottom.hide = function(){
37955         this.setLeftTop(-100,-100);
37956         this.setStyle("visibility", "hidden");
37957     };
37958     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
37959     // temporarily disabled
37960     //Roo.dd.ScrollManager.register(this.view.scroller.dom);
37961     Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
37962 };
37963 Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
37964     proxyOffsets : [-4, -9],
37965     fly: Roo.Element.fly,
37966
37967     getTargetFromEvent : function(e){
37968         var t = Roo.lib.Event.getTarget(e);
37969         var cindex = this.view.findCellIndex(t);
37970         if(cindex !== false){
37971             return this.view.getHeaderCell(cindex);
37972         }
37973         return null;
37974     },
37975
37976     nextVisible : function(h){
37977         var v = this.view, cm = this.grid.colModel;
37978         h = h.nextSibling;
37979         while(h){
37980             if(!cm.isHidden(v.getCellIndex(h))){
37981                 return h;
37982             }
37983             h = h.nextSibling;
37984         }
37985         return null;
37986     },
37987
37988     prevVisible : function(h){
37989         var v = this.view, cm = this.grid.colModel;
37990         h = h.prevSibling;
37991         while(h){
37992             if(!cm.isHidden(v.getCellIndex(h))){
37993                 return h;
37994             }
37995             h = h.prevSibling;
37996         }
37997         return null;
37998     },
37999
38000     positionIndicator : function(h, n, e){
38001         var x = Roo.lib.Event.getPageX(e);
38002         var r = Roo.lib.Dom.getRegion(n.firstChild);
38003         var px, pt, py = r.top + this.proxyOffsets[1];
38004         if((r.right - x) <= (r.right-r.left)/2){
38005             px = r.right+this.view.borderWidth;
38006             pt = "after";
38007         }else{
38008             px = r.left;
38009             pt = "before";
38010         }
38011         var oldIndex = this.view.getCellIndex(h);
38012         var newIndex = this.view.getCellIndex(n);
38013
38014         if(this.grid.colModel.isFixed(newIndex)){
38015             return false;
38016         }
38017
38018         var locked = this.grid.colModel.isLocked(newIndex);
38019
38020         if(pt == "after"){
38021             newIndex++;
38022         }
38023         if(oldIndex < newIndex){
38024             newIndex--;
38025         }
38026         if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
38027             return false;
38028         }
38029         px +=  this.proxyOffsets[0];
38030         this.proxyTop.setLeftTop(px, py);
38031         this.proxyTop.show();
38032         if(!this.bottomOffset){
38033             this.bottomOffset = this.view.mainHd.getHeight();
38034         }
38035         this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
38036         this.proxyBottom.show();
38037         return pt;
38038     },
38039
38040     onNodeEnter : function(n, dd, e, data){
38041         if(data.header != n){
38042             this.positionIndicator(data.header, n, e);
38043         }
38044     },
38045
38046     onNodeOver : function(n, dd, e, data){
38047         var result = false;
38048         if(data.header != n){
38049             result = this.positionIndicator(data.header, n, e);
38050         }
38051         if(!result){
38052             this.proxyTop.hide();
38053             this.proxyBottom.hide();
38054         }
38055         return result ? this.dropAllowed : this.dropNotAllowed;
38056     },
38057
38058     onNodeOut : function(n, dd, e, data){
38059         this.proxyTop.hide();
38060         this.proxyBottom.hide();
38061     },
38062
38063     onNodeDrop : function(n, dd, e, data){
38064         var h = data.header;
38065         if(h != n){
38066             var cm = this.grid.colModel;
38067             var x = Roo.lib.Event.getPageX(e);
38068             var r = Roo.lib.Dom.getRegion(n.firstChild);
38069             var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
38070             var oldIndex = this.view.getCellIndex(h);
38071             var newIndex = this.view.getCellIndex(n);
38072             var locked = cm.isLocked(newIndex);
38073             if(pt == "after"){
38074                 newIndex++;
38075             }
38076             if(oldIndex < newIndex){
38077                 newIndex--;
38078             }
38079             if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
38080                 return false;
38081             }
38082             cm.setLocked(oldIndex, locked, true);
38083             cm.moveColumn(oldIndex, newIndex);
38084             this.grid.fireEvent("columnmove", oldIndex, newIndex);
38085             return true;
38086         }
38087         return false;
38088     }
38089 });
38090 /*
38091  * Based on:
38092  * Ext JS Library 1.1.1
38093  * Copyright(c) 2006-2007, Ext JS, LLC.
38094  *
38095  * Originally Released Under LGPL - original licence link has changed is not relivant.
38096  *
38097  * Fork - LGPL
38098  * <script type="text/javascript">
38099  */
38100   
38101 /**
38102  * @class Roo.grid.GridView
38103  * @extends Roo.util.Observable
38104  *
38105  * @constructor
38106  * @param {Object} config
38107  */
38108 Roo.grid.GridView = function(config){
38109     Roo.grid.GridView.superclass.constructor.call(this);
38110     this.el = null;
38111
38112     Roo.apply(this, config);
38113 };
38114
38115 Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
38116
38117     unselectable :  'unselectable="on"',
38118     unselectableCls :  'x-unselectable',
38119     
38120     
38121     rowClass : "x-grid-row",
38122
38123     cellClass : "x-grid-col",
38124
38125     tdClass : "x-grid-td",
38126
38127     hdClass : "x-grid-hd",
38128
38129     splitClass : "x-grid-split",
38130
38131     sortClasses : ["sort-asc", "sort-desc"],
38132
38133     enableMoveAnim : false,
38134
38135     hlColor: "C3DAF9",
38136
38137     dh : Roo.DomHelper,
38138
38139     fly : Roo.Element.fly,
38140
38141     css : Roo.util.CSS,
38142
38143     borderWidth: 1,
38144
38145     splitOffset: 3,
38146
38147     scrollIncrement : 22,
38148
38149     cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
38150
38151     findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
38152
38153     bind : function(ds, cm){
38154         if(this.ds){
38155             this.ds.un("load", this.onLoad, this);
38156             this.ds.un("datachanged", this.onDataChange, this);
38157             this.ds.un("add", this.onAdd, this);
38158             this.ds.un("remove", this.onRemove, this);
38159             this.ds.un("update", this.onUpdate, this);
38160             this.ds.un("clear", this.onClear, this);
38161         }
38162         if(ds){
38163             ds.on("load", this.onLoad, this);
38164             ds.on("datachanged", this.onDataChange, this);
38165             ds.on("add", this.onAdd, this);
38166             ds.on("remove", this.onRemove, this);
38167             ds.on("update", this.onUpdate, this);
38168             ds.on("clear", this.onClear, this);
38169         }
38170         this.ds = ds;
38171
38172         if(this.cm){
38173             this.cm.un("widthchange", this.onColWidthChange, this);
38174             this.cm.un("headerchange", this.onHeaderChange, this);
38175             this.cm.un("hiddenchange", this.onHiddenChange, this);
38176             this.cm.un("columnmoved", this.onColumnMove, this);
38177             this.cm.un("columnlockchange", this.onColumnLock, this);
38178         }
38179         if(cm){
38180             this.generateRules(cm);
38181             cm.on("widthchange", this.onColWidthChange, this);
38182             cm.on("headerchange", this.onHeaderChange, this);
38183             cm.on("hiddenchange", this.onHiddenChange, this);
38184             cm.on("columnmoved", this.onColumnMove, this);
38185             cm.on("columnlockchange", this.onColumnLock, this);
38186         }
38187         this.cm = cm;
38188     },
38189
38190     init: function(grid){
38191         Roo.grid.GridView.superclass.init.call(this, grid);
38192
38193         this.bind(grid.dataSource, grid.colModel);
38194
38195         grid.on("headerclick", this.handleHeaderClick, this);
38196
38197         if(grid.trackMouseOver){
38198             grid.on("mouseover", this.onRowOver, this);
38199             grid.on("mouseout", this.onRowOut, this);
38200         }
38201         grid.cancelTextSelection = function(){};
38202         this.gridId = grid.id;
38203
38204         var tpls = this.templates || {};
38205
38206         if(!tpls.master){
38207             tpls.master = new Roo.Template(
38208                '<div class="x-grid" hidefocus="true">',
38209                 '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
38210                   '<div class="x-grid-topbar"></div>',
38211                   '<div class="x-grid-scroller"><div></div></div>',
38212                   '<div class="x-grid-locked">',
38213                       '<div class="x-grid-header">{lockedHeader}</div>',
38214                       '<div class="x-grid-body">{lockedBody}</div>',
38215                   "</div>",
38216                   '<div class="x-grid-viewport">',
38217                       '<div class="x-grid-header">{header}</div>',
38218                       '<div class="x-grid-body">{body}</div>',
38219                   "</div>",
38220                   '<div class="x-grid-bottombar"></div>',
38221                  
38222                   '<div class="x-grid-resize-proxy">&#160;</div>',
38223                "</div>"
38224             );
38225             tpls.master.disableformats = true;
38226         }
38227
38228         if(!tpls.header){
38229             tpls.header = new Roo.Template(
38230                '<table border="0" cellspacing="0" cellpadding="0">',
38231                '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
38232                "</table>{splits}"
38233             );
38234             tpls.header.disableformats = true;
38235         }
38236         tpls.header.compile();
38237
38238         if(!tpls.hcell){
38239             tpls.hcell = new Roo.Template(
38240                 '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
38241                 '<div class="x-grid-hd-text ' + this.unselectableCls +  '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
38242                 "</div></td>"
38243              );
38244              tpls.hcell.disableFormats = true;
38245         }
38246         tpls.hcell.compile();
38247
38248         if(!tpls.hsplit){
38249             tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
38250                                             this.unselectableCls +  '" ' + this.unselectable +'>&#160;</div>');
38251             tpls.hsplit.disableFormats = true;
38252         }
38253         tpls.hsplit.compile();
38254
38255         if(!tpls.body){
38256             tpls.body = new Roo.Template(
38257                '<table border="0" cellspacing="0" cellpadding="0">',
38258                "<tbody>{rows}</tbody>",
38259                "</table>"
38260             );
38261             tpls.body.disableFormats = true;
38262         }
38263         tpls.body.compile();
38264
38265         if(!tpls.row){
38266             tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
38267             tpls.row.disableFormats = true;
38268         }
38269         tpls.row.compile();
38270
38271         if(!tpls.cell){
38272             tpls.cell = new Roo.Template(
38273                 '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
38274                 '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
38275                     this.unselectableCls +  '" ' + this.unselectable +'" {attr}>{value}</div></div>',
38276                 "</td>"
38277             );
38278             tpls.cell.disableFormats = true;
38279         }
38280         tpls.cell.compile();
38281
38282         this.templates = tpls;
38283     },
38284
38285     // remap these for backwards compat
38286     onColWidthChange : function(){
38287         this.updateColumns.apply(this, arguments);
38288     },
38289     onHeaderChange : function(){
38290         this.updateHeaders.apply(this, arguments);
38291     }, 
38292     onHiddenChange : function(){
38293         this.handleHiddenChange.apply(this, arguments);
38294     },
38295     onColumnMove : function(){
38296         this.handleColumnMove.apply(this, arguments);
38297     },
38298     onColumnLock : function(){
38299         this.handleLockChange.apply(this, arguments);
38300     },
38301
38302     onDataChange : function(){
38303         this.refresh();
38304         this.updateHeaderSortState();
38305     },
38306
38307     onClear : function(){
38308         this.refresh();
38309     },
38310
38311     onUpdate : function(ds, record){
38312         this.refreshRow(record);
38313     },
38314
38315     refreshRow : function(record){
38316         var ds = this.ds, index;
38317         if(typeof record == 'number'){
38318             index = record;
38319             record = ds.getAt(index);
38320         }else{
38321             index = ds.indexOf(record);
38322         }
38323         this.insertRows(ds, index, index, true);
38324         this.onRemove(ds, record, index+1, true);
38325         this.syncRowHeights(index, index);
38326         this.layout();
38327         this.fireEvent("rowupdated", this, index, record);
38328     },
38329
38330     onAdd : function(ds, records, index){
38331         this.insertRows(ds, index, index + (records.length-1));
38332     },
38333
38334     onRemove : function(ds, record, index, isUpdate){
38335         if(isUpdate !== true){
38336             this.fireEvent("beforerowremoved", this, index, record);
38337         }
38338         var bt = this.getBodyTable(), lt = this.getLockedTable();
38339         if(bt.rows[index]){
38340             bt.firstChild.removeChild(bt.rows[index]);
38341         }
38342         if(lt.rows[index]){
38343             lt.firstChild.removeChild(lt.rows[index]);
38344         }
38345         if(isUpdate !== true){
38346             this.stripeRows(index);
38347             this.syncRowHeights(index, index);
38348             this.layout();
38349             this.fireEvent("rowremoved", this, index, record);
38350         }
38351     },
38352
38353     onLoad : function(){
38354         this.scrollToTop();
38355     },
38356
38357     /**
38358      * Scrolls the grid to the top
38359      */
38360     scrollToTop : function(){
38361         if(this.scroller){
38362             this.scroller.dom.scrollTop = 0;
38363             this.syncScroll();
38364         }
38365     },
38366
38367     /**
38368      * Gets a panel in the header of the grid that can be used for toolbars etc.
38369      * After modifying the contents of this panel a call to grid.autoSize() may be
38370      * required to register any changes in size.
38371      * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
38372      * @return Roo.Element
38373      */
38374     getHeaderPanel : function(doShow){
38375         if(doShow){
38376             this.headerPanel.show();
38377         }
38378         return this.headerPanel;
38379     },
38380
38381     /**
38382      * Gets a panel in the footer of the grid that can be used for toolbars etc.
38383      * After modifying the contents of this panel a call to grid.autoSize() may be
38384      * required to register any changes in size.
38385      * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
38386      * @return Roo.Element
38387      */
38388     getFooterPanel : function(doShow){
38389         if(doShow){
38390             this.footerPanel.show();
38391         }
38392         return this.footerPanel;
38393     },
38394
38395     initElements : function(){
38396         var E = Roo.Element;
38397         var el = this.grid.getGridEl().dom.firstChild;
38398         var cs = el.childNodes;
38399
38400         this.el = new E(el);
38401         
38402          this.focusEl = new E(el.firstChild);
38403         this.focusEl.swallowEvent("click", true);
38404         
38405         this.headerPanel = new E(cs[1]);
38406         this.headerPanel.enableDisplayMode("block");
38407
38408         this.scroller = new E(cs[2]);
38409         this.scrollSizer = new E(this.scroller.dom.firstChild);
38410
38411         this.lockedWrap = new E(cs[3]);
38412         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
38413         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
38414
38415         this.mainWrap = new E(cs[4]);
38416         this.mainHd = new E(this.mainWrap.dom.firstChild);
38417         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
38418
38419         this.footerPanel = new E(cs[5]);
38420         this.footerPanel.enableDisplayMode("block");
38421
38422         this.resizeProxy = new E(cs[6]);
38423
38424         this.headerSelector = String.format(
38425            '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
38426            this.lockedHd.id, this.mainHd.id
38427         );
38428
38429         this.splitterSelector = String.format(
38430            '#{0} div.x-grid-split, #{1} div.x-grid-split',
38431            this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
38432         );
38433     },
38434     idToCssName : function(s)
38435     {
38436         return s.replace(/[^a-z0-9]+/ig, '-');
38437     },
38438
38439     getHeaderCell : function(index){
38440         return Roo.DomQuery.select(this.headerSelector)[index];
38441     },
38442
38443     getHeaderCellMeasure : function(index){
38444         return this.getHeaderCell(index).firstChild;
38445     },
38446
38447     getHeaderCellText : function(index){
38448         return this.getHeaderCell(index).firstChild.firstChild;
38449     },
38450
38451     getLockedTable : function(){
38452         return this.lockedBody.dom.firstChild;
38453     },
38454
38455     getBodyTable : function(){
38456         return this.mainBody.dom.firstChild;
38457     },
38458
38459     getLockedRow : function(index){
38460         return this.getLockedTable().rows[index];
38461     },
38462
38463     getRow : function(index){
38464         return this.getBodyTable().rows[index];
38465     },
38466
38467     getRowComposite : function(index){
38468         if(!this.rowEl){
38469             this.rowEl = new Roo.CompositeElementLite();
38470         }
38471         var els = [], lrow, mrow;
38472         if(lrow = this.getLockedRow(index)){
38473             els.push(lrow);
38474         }
38475         if(mrow = this.getRow(index)){
38476             els.push(mrow);
38477         }
38478         this.rowEl.elements = els;
38479         return this.rowEl;
38480     },
38481     /**
38482      * Gets the 'td' of the cell
38483      * 
38484      * @param {Integer} rowIndex row to select
38485      * @param {Integer} colIndex column to select
38486      * 
38487      * @return {Object} 
38488      */
38489     getCell : function(rowIndex, colIndex){
38490         var locked = this.cm.getLockedCount();
38491         var source;
38492         if(colIndex < locked){
38493             source = this.lockedBody.dom.firstChild;
38494         }else{
38495             source = this.mainBody.dom.firstChild;
38496             colIndex -= locked;
38497         }
38498         return source.rows[rowIndex].childNodes[colIndex];
38499     },
38500
38501     getCellText : function(rowIndex, colIndex){
38502         return this.getCell(rowIndex, colIndex).firstChild.firstChild;
38503     },
38504
38505     getCellBox : function(cell){
38506         var b = this.fly(cell).getBox();
38507         if(Roo.isOpera){ // opera fails to report the Y
38508             b.y = cell.offsetTop + this.mainBody.getY();
38509         }
38510         return b;
38511     },
38512
38513     getCellIndex : function(cell){
38514         var id = String(cell.className).match(this.cellRE);
38515         if(id){
38516             return parseInt(id[1], 10);
38517         }
38518         return 0;
38519     },
38520
38521     findHeaderIndex : function(n){
38522         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
38523         return r ? this.getCellIndex(r) : false;
38524     },
38525
38526     findHeaderCell : function(n){
38527         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
38528         return r ? r : false;
38529     },
38530
38531     findRowIndex : function(n){
38532         if(!n){
38533             return false;
38534         }
38535         var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
38536         return r ? r.rowIndex : false;
38537     },
38538
38539     findCellIndex : function(node){
38540         var stop = this.el.dom;
38541         while(node && node != stop){
38542             if(this.findRE.test(node.className)){
38543                 return this.getCellIndex(node);
38544             }
38545             node = node.parentNode;
38546         }
38547         return false;
38548     },
38549
38550     getColumnId : function(index){
38551         return this.cm.getColumnId(index);
38552     },
38553
38554     getSplitters : function()
38555     {
38556         if(this.splitterSelector){
38557            return Roo.DomQuery.select(this.splitterSelector);
38558         }else{
38559             return null;
38560       }
38561     },
38562
38563     getSplitter : function(index){
38564         return this.getSplitters()[index];
38565     },
38566
38567     onRowOver : function(e, t){
38568         var row;
38569         if((row = this.findRowIndex(t)) !== false){
38570             this.getRowComposite(row).addClass("x-grid-row-over");
38571         }
38572     },
38573
38574     onRowOut : function(e, t){
38575         var row;
38576         if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
38577             this.getRowComposite(row).removeClass("x-grid-row-over");
38578         }
38579     },
38580
38581     renderHeaders : function(){
38582         var cm = this.cm;
38583         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
38584         var cb = [], lb = [], sb = [], lsb = [], p = {};
38585         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
38586             p.cellId = "x-grid-hd-0-" + i;
38587             p.splitId = "x-grid-csplit-0-" + i;
38588             p.id = cm.getColumnId(i);
38589             p.value = cm.getColumnHeader(i) || "";
38590             p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</)  ? '' :  p.value  || "";
38591             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
38592             if(!cm.isLocked(i)){
38593                 cb[cb.length] = ct.apply(p);
38594                 sb[sb.length] = st.apply(p);
38595             }else{
38596                 lb[lb.length] = ct.apply(p);
38597                 lsb[lsb.length] = st.apply(p);
38598             }
38599         }
38600         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
38601                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
38602     },
38603
38604     updateHeaders : function(){
38605         var html = this.renderHeaders();
38606         this.lockedHd.update(html[0]);
38607         this.mainHd.update(html[1]);
38608     },
38609
38610     /**
38611      * Focuses the specified row.
38612      * @param {Number} row The row index
38613      */
38614     focusRow : function(row)
38615     {
38616         //Roo.log('GridView.focusRow');
38617         var x = this.scroller.dom.scrollLeft;
38618         this.focusCell(row, 0, false);
38619         this.scroller.dom.scrollLeft = x;
38620     },
38621
38622     /**
38623      * Focuses the specified cell.
38624      * @param {Number} row The row index
38625      * @param {Number} col The column index
38626      * @param {Boolean} hscroll false to disable horizontal scrolling
38627      */
38628     focusCell : function(row, col, hscroll)
38629     {
38630         //Roo.log('GridView.focusCell');
38631         var el = this.ensureVisible(row, col, hscroll);
38632         this.focusEl.alignTo(el, "tl-tl");
38633         if(Roo.isGecko){
38634             this.focusEl.focus();
38635         }else{
38636             this.focusEl.focus.defer(1, this.focusEl);
38637         }
38638     },
38639
38640     /**
38641      * Scrolls the specified cell into view
38642      * @param {Number} row The row index
38643      * @param {Number} col The column index
38644      * @param {Boolean} hscroll false to disable horizontal scrolling
38645      */
38646     ensureVisible : function(row, col, hscroll)
38647     {
38648         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
38649         //return null; //disable for testing.
38650         if(typeof row != "number"){
38651             row = row.rowIndex;
38652         }
38653         if(row < 0 && row >= this.ds.getCount()){
38654             return  null;
38655         }
38656         col = (col !== undefined ? col : 0);
38657         var cm = this.grid.colModel;
38658         while(cm.isHidden(col)){
38659             col++;
38660         }
38661
38662         var el = this.getCell(row, col);
38663         if(!el){
38664             return null;
38665         }
38666         var c = this.scroller.dom;
38667
38668         var ctop = parseInt(el.offsetTop, 10);
38669         var cleft = parseInt(el.offsetLeft, 10);
38670         var cbot = ctop + el.offsetHeight;
38671         var cright = cleft + el.offsetWidth;
38672         
38673         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
38674         var stop = parseInt(c.scrollTop, 10);
38675         var sleft = parseInt(c.scrollLeft, 10);
38676         var sbot = stop + ch;
38677         var sright = sleft + c.clientWidth;
38678         /*
38679         Roo.log('GridView.ensureVisible:' +
38680                 ' ctop:' + ctop +
38681                 ' c.clientHeight:' + c.clientHeight +
38682                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
38683                 ' stop:' + stop +
38684                 ' cbot:' + cbot +
38685                 ' sbot:' + sbot +
38686                 ' ch:' + ch  
38687                 );
38688         */
38689         if(ctop < stop){
38690             c.scrollTop = ctop;
38691             //Roo.log("set scrolltop to ctop DISABLE?");
38692         }else if(cbot > sbot){
38693             //Roo.log("set scrolltop to cbot-ch");
38694             c.scrollTop = cbot-ch;
38695         }
38696         
38697         if(hscroll !== false){
38698             if(cleft < sleft){
38699                 c.scrollLeft = cleft;
38700             }else if(cright > sright){
38701                 c.scrollLeft = cright-c.clientWidth;
38702             }
38703         }
38704          
38705         return el;
38706     },
38707
38708     updateColumns : function(){
38709         this.grid.stopEditing();
38710         var cm = this.grid.colModel, colIds = this.getColumnIds();
38711         //var totalWidth = cm.getTotalWidth();
38712         var pos = 0;
38713         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
38714             //if(cm.isHidden(i)) continue;
38715             var w = cm.getColumnWidth(i);
38716             this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
38717             this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
38718         }
38719         this.updateSplitters();
38720     },
38721
38722     generateRules : function(cm){
38723         var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
38724         Roo.util.CSS.removeStyleSheet(rulesId);
38725         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
38726             var cid = cm.getColumnId(i);
38727             var align = '';
38728             if(cm.config[i].align){
38729                 align = 'text-align:'+cm.config[i].align+';';
38730             }
38731             var hidden = '';
38732             if(cm.isHidden(i)){
38733                 hidden = 'display:none;';
38734             }
38735             var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
38736             ruleBuf.push(
38737                     this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
38738                     this.hdSelector, cid, " {\n", align, width, "}\n",
38739                     this.tdSelector, cid, " {\n",hidden,"\n}\n",
38740                     this.splitSelector, cid, " {\n", hidden , "\n}\n");
38741         }
38742         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
38743     },
38744
38745     updateSplitters : function(){
38746         var cm = this.cm, s = this.getSplitters();
38747         if(s){ // splitters not created yet
38748             var pos = 0, locked = true;
38749             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
38750                 if(cm.isHidden(i)) {
38751                     continue;
38752                 }
38753                 var w = cm.getColumnWidth(i); // make sure it's a number
38754                 if(!cm.isLocked(i) && locked){
38755                     pos = 0;
38756                     locked = false;
38757                 }
38758                 pos += w;
38759                 s[i].style.left = (pos-this.splitOffset) + "px";
38760             }
38761         }
38762     },
38763
38764     handleHiddenChange : function(colModel, colIndex, hidden){
38765         if(hidden){
38766             this.hideColumn(colIndex);
38767         }else{
38768             this.unhideColumn(colIndex);
38769         }
38770     },
38771
38772     hideColumn : function(colIndex){
38773         var cid = this.getColumnId(colIndex);
38774         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
38775         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
38776         if(Roo.isSafari){
38777             this.updateHeaders();
38778         }
38779         this.updateSplitters();
38780         this.layout();
38781     },
38782
38783     unhideColumn : function(colIndex){
38784         var cid = this.getColumnId(colIndex);
38785         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
38786         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
38787
38788         if(Roo.isSafari){
38789             this.updateHeaders();
38790         }
38791         this.updateSplitters();
38792         this.layout();
38793     },
38794
38795     insertRows : function(dm, firstRow, lastRow, isUpdate){
38796         if(firstRow == 0 && lastRow == dm.getCount()-1){
38797             this.refresh();
38798         }else{
38799             if(!isUpdate){
38800                 this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
38801             }
38802             var s = this.getScrollState();
38803             var markup = this.renderRows(firstRow, lastRow);
38804             this.bufferRows(markup[0], this.getLockedTable(), firstRow);
38805             this.bufferRows(markup[1], this.getBodyTable(), firstRow);
38806             this.restoreScroll(s);
38807             if(!isUpdate){
38808                 this.fireEvent("rowsinserted", this, firstRow, lastRow);
38809                 this.syncRowHeights(firstRow, lastRow);
38810                 this.stripeRows(firstRow);
38811                 this.layout();
38812             }
38813         }
38814     },
38815
38816     bufferRows : function(markup, target, index){
38817         var before = null, trows = target.rows, tbody = target.tBodies[0];
38818         if(index < trows.length){
38819             before = trows[index];
38820         }
38821         var b = document.createElement("div");
38822         b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
38823         var rows = b.firstChild.rows;
38824         for(var i = 0, len = rows.length; i < len; i++){
38825             if(before){
38826                 tbody.insertBefore(rows[0], before);
38827             }else{
38828                 tbody.appendChild(rows[0]);
38829             }
38830         }
38831         b.innerHTML = "";
38832         b = null;
38833     },
38834
38835     deleteRows : function(dm, firstRow, lastRow){
38836         if(dm.getRowCount()<1){
38837             this.fireEvent("beforerefresh", this);
38838             this.mainBody.update("");
38839             this.lockedBody.update("");
38840             this.fireEvent("refresh", this);
38841         }else{
38842             this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
38843             var bt = this.getBodyTable();
38844             var tbody = bt.firstChild;
38845             var rows = bt.rows;
38846             for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
38847                 tbody.removeChild(rows[firstRow]);
38848             }
38849             this.stripeRows(firstRow);
38850             this.fireEvent("rowsdeleted", this, firstRow, lastRow);
38851         }
38852     },
38853
38854     updateRows : function(dataSource, firstRow, lastRow){
38855         var s = this.getScrollState();
38856         this.refresh();
38857         this.restoreScroll(s);
38858     },
38859
38860     handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
38861         if(!noRefresh){
38862            this.refresh();
38863         }
38864         this.updateHeaderSortState();
38865     },
38866
38867     getScrollState : function(){
38868         
38869         var sb = this.scroller.dom;
38870         return {left: sb.scrollLeft, top: sb.scrollTop};
38871     },
38872
38873     stripeRows : function(startRow){
38874         if(!this.grid.stripeRows || this.ds.getCount() < 1){
38875             return;
38876         }
38877         startRow = startRow || 0;
38878         var rows = this.getBodyTable().rows;
38879         var lrows = this.getLockedTable().rows;
38880         var cls = ' x-grid-row-alt ';
38881         for(var i = startRow, len = rows.length; i < len; i++){
38882             var row = rows[i], lrow = lrows[i];
38883             var isAlt = ((i+1) % 2 == 0);
38884             var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
38885             if(isAlt == hasAlt){
38886                 continue;
38887             }
38888             if(isAlt){
38889                 row.className += " x-grid-row-alt";
38890             }else{
38891                 row.className = row.className.replace("x-grid-row-alt", "");
38892             }
38893             if(lrow){
38894                 lrow.className = row.className;
38895             }
38896         }
38897     },
38898
38899     restoreScroll : function(state){
38900         //Roo.log('GridView.restoreScroll');
38901         var sb = this.scroller.dom;
38902         sb.scrollLeft = state.left;
38903         sb.scrollTop = state.top;
38904         this.syncScroll();
38905     },
38906
38907     syncScroll : function(){
38908         //Roo.log('GridView.syncScroll');
38909         var sb = this.scroller.dom;
38910         var sh = this.mainHd.dom;
38911         var bs = this.mainBody.dom;
38912         var lv = this.lockedBody.dom;
38913         sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
38914         lv.scrollTop = bs.scrollTop = sb.scrollTop;
38915     },
38916
38917     handleScroll : function(e){
38918         this.syncScroll();
38919         var sb = this.scroller.dom;
38920         this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
38921         e.stopEvent();
38922     },
38923
38924     handleWheel : function(e){
38925         var d = e.getWheelDelta();
38926         this.scroller.dom.scrollTop -= d*22;
38927         // set this here to prevent jumpy scrolling on large tables
38928         this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
38929         e.stopEvent();
38930     },
38931
38932     renderRows : function(startRow, endRow){
38933         // pull in all the crap needed to render rows
38934         var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
38935         var colCount = cm.getColumnCount();
38936
38937         if(ds.getCount() < 1){
38938             return ["", ""];
38939         }
38940
38941         // build a map for all the columns
38942         var cs = [];
38943         for(var i = 0; i < colCount; i++){
38944             var name = cm.getDataIndex(i);
38945             cs[i] = {
38946                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
38947                 renderer : cm.getRenderer(i),
38948                 id : cm.getColumnId(i),
38949                 locked : cm.isLocked(i),
38950                 has_editor : cm.isCellEditable(i)
38951             };
38952         }
38953
38954         startRow = startRow || 0;
38955         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
38956
38957         // records to render
38958         var rs = ds.getRange(startRow, endRow);
38959
38960         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
38961     },
38962
38963     // As much as I hate to duplicate code, this was branched because FireFox really hates
38964     // [].join("") on strings. The performance difference was substantial enough to
38965     // branch this function
38966     doRender : Roo.isGecko ?
38967             function(cs, rs, ds, startRow, colCount, stripe){
38968                 var ts = this.templates, ct = ts.cell, rt = ts.row;
38969                 // buffers
38970                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
38971                 
38972                 var hasListener = this.grid.hasListener('rowclass');
38973                 var rowcfg = {};
38974                 for(var j = 0, len = rs.length; j < len; j++){
38975                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
38976                     for(var i = 0; i < colCount; i++){
38977                         c = cs[i];
38978                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
38979                         p.id = c.id;
38980                         p.css = p.attr = "";
38981                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
38982                         if(p.value == undefined || p.value === "") {
38983                             p.value = "&#160;";
38984                         }
38985                         if(c.has_editor){
38986                             p.css += ' x-grid-editable-cell';
38987                         }
38988                         if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
38989                             p.css +=  ' x-grid-dirty-cell';
38990                         }
38991                         var markup = ct.apply(p);
38992                         if(!c.locked){
38993                             cb+= markup;
38994                         }else{
38995                             lcb+= markup;
38996                         }
38997                     }
38998                     var alt = [];
38999                     if(stripe && ((rowIndex+1) % 2 == 0)){
39000                         alt.push("x-grid-row-alt")
39001                     }
39002                     if(r.dirty){
39003                         alt.push(  " x-grid-dirty-row");
39004                     }
39005                     rp.cells = lcb;
39006                     if(this.getRowClass){
39007                         alt.push(this.getRowClass(r, rowIndex));
39008                     }
39009                     if (hasListener) {
39010                         rowcfg = {
39011                              
39012                             record: r,
39013                             rowIndex : rowIndex,
39014                             rowClass : ''
39015                         };
39016                         this.grid.fireEvent('rowclass', this, rowcfg);
39017                         alt.push(rowcfg.rowClass);
39018                     }
39019                     rp.alt = alt.join(" ");
39020                     lbuf+= rt.apply(rp);
39021                     rp.cells = cb;
39022                     buf+=  rt.apply(rp);
39023                 }
39024                 return [lbuf, buf];
39025             } :
39026             function(cs, rs, ds, startRow, colCount, stripe){
39027                 var ts = this.templates, ct = ts.cell, rt = ts.row;
39028                 // buffers
39029                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
39030                 var hasListener = this.grid.hasListener('rowclass');
39031  
39032                 var rowcfg = {};
39033                 for(var j = 0, len = rs.length; j < len; j++){
39034                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
39035                     for(var i = 0; i < colCount; i++){
39036                         c = cs[i];
39037                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
39038                         p.id = c.id;
39039                         p.css = p.attr = "";
39040                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
39041                         if(p.value == undefined || p.value === "") {
39042                             p.value = "&#160;";
39043                         }
39044                         //Roo.log(c);
39045                          if(c.has_editor){
39046                             p.css += ' x-grid-editable-cell';
39047                         }
39048                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
39049                             p.css += ' x-grid-dirty-cell' 
39050                         }
39051                         
39052                         var markup = ct.apply(p);
39053                         if(!c.locked){
39054                             cb[cb.length] = markup;
39055                         }else{
39056                             lcb[lcb.length] = markup;
39057                         }
39058                     }
39059                     var alt = [];
39060                     if(stripe && ((rowIndex+1) % 2 == 0)){
39061                         alt.push( "x-grid-row-alt");
39062                     }
39063                     if(r.dirty){
39064                         alt.push(" x-grid-dirty-row");
39065                     }
39066                     rp.cells = lcb;
39067                     if(this.getRowClass){
39068                         alt.push( this.getRowClass(r, rowIndex));
39069                     }
39070                     if (hasListener) {
39071                         rowcfg = {
39072                              
39073                             record: r,
39074                             rowIndex : rowIndex,
39075                             rowClass : ''
39076                         };
39077                         this.grid.fireEvent('rowclass', this, rowcfg);
39078                         alt.push(rowcfg.rowClass);
39079                     }
39080                     
39081                     rp.alt = alt.join(" ");
39082                     rp.cells = lcb.join("");
39083                     lbuf[lbuf.length] = rt.apply(rp);
39084                     rp.cells = cb.join("");
39085                     buf[buf.length] =  rt.apply(rp);
39086                 }
39087                 return [lbuf.join(""), buf.join("")];
39088             },
39089
39090     renderBody : function(){
39091         var markup = this.renderRows();
39092         var bt = this.templates.body;
39093         return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
39094     },
39095
39096     /**
39097      * Refreshes the grid
39098      * @param {Boolean} headersToo
39099      */
39100     refresh : function(headersToo){
39101         this.fireEvent("beforerefresh", this);
39102         this.grid.stopEditing();
39103         var result = this.renderBody();
39104         this.lockedBody.update(result[0]);
39105         this.mainBody.update(result[1]);
39106         if(headersToo === true){
39107             this.updateHeaders();
39108             this.updateColumns();
39109             this.updateSplitters();
39110             this.updateHeaderSortState();
39111         }
39112         this.syncRowHeights();
39113         this.layout();
39114         this.fireEvent("refresh", this);
39115     },
39116
39117     handleColumnMove : function(cm, oldIndex, newIndex){
39118         this.indexMap = null;
39119         var s = this.getScrollState();
39120         this.refresh(true);
39121         this.restoreScroll(s);
39122         this.afterMove(newIndex);
39123     },
39124
39125     afterMove : function(colIndex){
39126         if(this.enableMoveAnim && Roo.enableFx){
39127             this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
39128         }
39129         // if multisort - fix sortOrder, and reload..
39130         if (this.grid.dataSource.multiSort) {
39131             // the we can call sort again..
39132             var dm = this.grid.dataSource;
39133             var cm = this.grid.colModel;
39134             var so = [];
39135             for(var i = 0; i < cm.config.length; i++ ) {
39136                 
39137                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
39138                     continue; // dont' bother, it's not in sort list or being set.
39139                 }
39140                 
39141                 so.push(cm.config[i].dataIndex);
39142             };
39143             dm.sortOrder = so;
39144             dm.load(dm.lastOptions);
39145             
39146             
39147         }
39148         
39149     },
39150
39151     updateCell : function(dm, rowIndex, dataIndex){
39152         var colIndex = this.getColumnIndexByDataIndex(dataIndex);
39153         if(typeof colIndex == "undefined"){ // not present in grid
39154             return;
39155         }
39156         var cm = this.grid.colModel;
39157         var cell = this.getCell(rowIndex, colIndex);
39158         var cellText = this.getCellText(rowIndex, colIndex);
39159
39160         var p = {
39161             cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
39162             id : cm.getColumnId(colIndex),
39163             css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
39164         };
39165         var renderer = cm.getRenderer(colIndex);
39166         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
39167         if(typeof val == "undefined" || val === "") {
39168             val = "&#160;";
39169         }
39170         cellText.innerHTML = val;
39171         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
39172         this.syncRowHeights(rowIndex, rowIndex);
39173     },
39174
39175     calcColumnWidth : function(colIndex, maxRowsToMeasure){
39176         var maxWidth = 0;
39177         if(this.grid.autoSizeHeaders){
39178             var h = this.getHeaderCellMeasure(colIndex);
39179             maxWidth = Math.max(maxWidth, h.scrollWidth);
39180         }
39181         var tb, index;
39182         if(this.cm.isLocked(colIndex)){
39183             tb = this.getLockedTable();
39184             index = colIndex;
39185         }else{
39186             tb = this.getBodyTable();
39187             index = colIndex - this.cm.getLockedCount();
39188         }
39189         if(tb && tb.rows){
39190             var rows = tb.rows;
39191             var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
39192             for(var i = 0; i < stopIndex; i++){
39193                 var cell = rows[i].childNodes[index].firstChild;
39194                 maxWidth = Math.max(maxWidth, cell.scrollWidth);
39195             }
39196         }
39197         return maxWidth + /*margin for error in IE*/ 5;
39198     },
39199     /**
39200      * Autofit a column to its content.
39201      * @param {Number} colIndex
39202      * @param {Boolean} forceMinSize true to force the column to go smaller if possible
39203      */
39204      autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
39205          if(this.cm.isHidden(colIndex)){
39206              return; // can't calc a hidden column
39207          }
39208         if(forceMinSize){
39209             var cid = this.cm.getColumnId(colIndex);
39210             this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
39211            if(this.grid.autoSizeHeaders){
39212                this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
39213            }
39214         }
39215         var newWidth = this.calcColumnWidth(colIndex);
39216         this.cm.setColumnWidth(colIndex,
39217             Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
39218         if(!suppressEvent){
39219             this.grid.fireEvent("columnresize", colIndex, newWidth);
39220         }
39221     },
39222
39223     /**
39224      * Autofits all columns to their content and then expands to fit any extra space in the grid
39225      */
39226      autoSizeColumns : function(){
39227         var cm = this.grid.colModel;
39228         var colCount = cm.getColumnCount();
39229         for(var i = 0; i < colCount; i++){
39230             this.autoSizeColumn(i, true, true);
39231         }
39232         if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
39233             this.fitColumns();
39234         }else{
39235             this.updateColumns();
39236             this.layout();
39237         }
39238     },
39239
39240     /**
39241      * Autofits all columns to the grid's width proportionate with their current size
39242      * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
39243      */
39244     fitColumns : function(reserveScrollSpace){
39245         var cm = this.grid.colModel;
39246         var colCount = cm.getColumnCount();
39247         var cols = [];
39248         var width = 0;
39249         var i, w;
39250         for (i = 0; i < colCount; i++){
39251             if(!cm.isHidden(i) && !cm.isFixed(i)){
39252                 w = cm.getColumnWidth(i);
39253                 cols.push(i);
39254                 cols.push(w);
39255                 width += w;
39256             }
39257         }
39258         var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
39259         if(reserveScrollSpace){
39260             avail -= 17;
39261         }
39262         var frac = (avail - cm.getTotalWidth())/width;
39263         while (cols.length){
39264             w = cols.pop();
39265             i = cols.pop();
39266             cm.setColumnWidth(i, Math.floor(w + w*frac), true);
39267         }
39268         this.updateColumns();
39269         this.layout();
39270     },
39271
39272     onRowSelect : function(rowIndex){
39273         var row = this.getRowComposite(rowIndex);
39274         row.addClass("x-grid-row-selected");
39275     },
39276
39277     onRowDeselect : function(rowIndex){
39278         var row = this.getRowComposite(rowIndex);
39279         row.removeClass("x-grid-row-selected");
39280     },
39281
39282     onCellSelect : function(row, col){
39283         var cell = this.getCell(row, col);
39284         if(cell){
39285             Roo.fly(cell).addClass("x-grid-cell-selected");
39286         }
39287     },
39288
39289     onCellDeselect : function(row, col){
39290         var cell = this.getCell(row, col);
39291         if(cell){
39292             Roo.fly(cell).removeClass("x-grid-cell-selected");
39293         }
39294     },
39295
39296     updateHeaderSortState : function(){
39297         
39298         // sort state can be single { field: xxx, direction : yyy}
39299         // or   { xxx=>ASC , yyy : DESC ..... }
39300         
39301         var mstate = {};
39302         if (!this.ds.multiSort) { 
39303             var state = this.ds.getSortState();
39304             if(!state){
39305                 return;
39306             }
39307             mstate[state.field] = state.direction;
39308             // FIXME... - this is not used here.. but might be elsewhere..
39309             this.sortState = state;
39310             
39311         } else {
39312             mstate = this.ds.sortToggle;
39313         }
39314         //remove existing sort classes..
39315         
39316         var sc = this.sortClasses;
39317         var hds = this.el.select(this.headerSelector).removeClass(sc);
39318         
39319         for(var f in mstate) {
39320         
39321             var sortColumn = this.cm.findColumnIndex(f);
39322             
39323             if(sortColumn != -1){
39324                 var sortDir = mstate[f];        
39325                 hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
39326             }
39327         }
39328         
39329          
39330         
39331     },
39332
39333
39334     handleHeaderClick : function(g, index,e){
39335         
39336         Roo.log("header click");
39337         
39338         if (Roo.isTouch) {
39339             // touch events on header are handled by context
39340             this.handleHdCtx(g,index,e);
39341             return;
39342         }
39343         
39344         
39345         if(this.headersDisabled){
39346             return;
39347         }
39348         var dm = g.dataSource, cm = g.colModel;
39349         if(!cm.isSortable(index)){
39350             return;
39351         }
39352         g.stopEditing();
39353         
39354         if (dm.multiSort) {
39355             // update the sortOrder
39356             var so = [];
39357             for(var i = 0; i < cm.config.length; i++ ) {
39358                 
39359                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
39360                     continue; // dont' bother, it's not in sort list or being set.
39361                 }
39362                 
39363                 so.push(cm.config[i].dataIndex);
39364             };
39365             dm.sortOrder = so;
39366         }
39367         
39368         
39369         dm.sort(cm.getDataIndex(index));
39370     },
39371
39372
39373     destroy : function(){
39374         if(this.colMenu){
39375             this.colMenu.removeAll();
39376             Roo.menu.MenuMgr.unregister(this.colMenu);
39377             this.colMenu.getEl().remove();
39378             delete this.colMenu;
39379         }
39380         if(this.hmenu){
39381             this.hmenu.removeAll();
39382             Roo.menu.MenuMgr.unregister(this.hmenu);
39383             this.hmenu.getEl().remove();
39384             delete this.hmenu;
39385         }
39386         if(this.grid.enableColumnMove){
39387             var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
39388             if(dds){
39389                 for(var dd in dds){
39390                     if(!dds[dd].config.isTarget && dds[dd].dragElId){
39391                         var elid = dds[dd].dragElId;
39392                         dds[dd].unreg();
39393                         Roo.get(elid).remove();
39394                     } else if(dds[dd].config.isTarget){
39395                         dds[dd].proxyTop.remove();
39396                         dds[dd].proxyBottom.remove();
39397                         dds[dd].unreg();
39398                     }
39399                     if(Roo.dd.DDM.locationCache[dd]){
39400                         delete Roo.dd.DDM.locationCache[dd];
39401                     }
39402                 }
39403                 delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
39404             }
39405         }
39406         Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
39407         this.bind(null, null);
39408         Roo.EventManager.removeResizeListener(this.onWindowResize, this);
39409     },
39410
39411     handleLockChange : function(){
39412         this.refresh(true);
39413     },
39414
39415     onDenyColumnLock : function(){
39416
39417     },
39418
39419     onDenyColumnHide : function(){
39420
39421     },
39422
39423     handleHdMenuClick : function(item){
39424         var index = this.hdCtxIndex;
39425         var cm = this.cm, ds = this.ds;
39426         switch(item.id){
39427             case "asc":
39428                 ds.sort(cm.getDataIndex(index), "ASC");
39429                 break;
39430             case "desc":
39431                 ds.sort(cm.getDataIndex(index), "DESC");
39432                 break;
39433             case "lock":
39434                 var lc = cm.getLockedCount();
39435                 if(cm.getColumnCount(true) <= lc+1){
39436                     this.onDenyColumnLock();
39437                     return;
39438                 }
39439                 if(lc != index){
39440                     cm.setLocked(index, true, true);
39441                     cm.moveColumn(index, lc);
39442                     this.grid.fireEvent("columnmove", index, lc);
39443                 }else{
39444                     cm.setLocked(index, true);
39445                 }
39446             break;
39447             case "unlock":
39448                 var lc = cm.getLockedCount();
39449                 if((lc-1) != index){
39450                     cm.setLocked(index, false, true);
39451                     cm.moveColumn(index, lc-1);
39452                     this.grid.fireEvent("columnmove", index, lc-1);
39453                 }else{
39454                     cm.setLocked(index, false);
39455                 }
39456             break;
39457             case 'wider': // used to expand cols on touch..
39458             case 'narrow':
39459                 var cw = cm.getColumnWidth(index);
39460                 cw += (item.id == 'wider' ? 1 : -1) * 50;
39461                 cw = Math.max(0, cw);
39462                 cw = Math.min(cw,4000);
39463                 cm.setColumnWidth(index, cw);
39464                 break;
39465                 
39466             default:
39467                 index = cm.getIndexById(item.id.substr(4));
39468                 if(index != -1){
39469                     if(item.checked && cm.getColumnCount(true) <= 1){
39470                         this.onDenyColumnHide();
39471                         return false;
39472                     }
39473                     cm.setHidden(index, item.checked);
39474                 }
39475         }
39476         return true;
39477     },
39478
39479     beforeColMenuShow : function(){
39480         var cm = this.cm,  colCount = cm.getColumnCount();
39481         this.colMenu.removeAll();
39482         
39483         var items = [];
39484         for(var i = 0; i < colCount; i++){
39485             items.push({
39486                 id: "col-"+cm.getColumnId(i),
39487                 text: cm.getColumnHeader(i),
39488                 checked: !cm.isHidden(i),
39489                 hideOnClick:false
39490             });
39491         }
39492         
39493         if (this.grid.sortColMenu) {
39494             items.sort(function(a,b) {
39495                 if (a.text == b.text) {
39496                     return 0;
39497                 }
39498                 return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
39499             });
39500         }
39501         
39502         for(var i = 0; i < colCount; i++){
39503             this.colMenu.add(new Roo.menu.CheckItem(items[i]));
39504         }
39505     },
39506
39507     handleHdCtx : function(g, index, e){
39508         e.stopEvent();
39509         var hd = this.getHeaderCell(index);
39510         this.hdCtxIndex = index;
39511         var ms = this.hmenu.items, cm = this.cm;
39512         ms.get("asc").setDisabled(!cm.isSortable(index));
39513         ms.get("desc").setDisabled(!cm.isSortable(index));
39514         if(this.grid.enableColLock !== false){
39515             ms.get("lock").setDisabled(cm.isLocked(index));
39516             ms.get("unlock").setDisabled(!cm.isLocked(index));
39517         }
39518         this.hmenu.show(hd, "tl-bl");
39519     },
39520
39521     handleHdOver : function(e){
39522         var hd = this.findHeaderCell(e.getTarget());
39523         if(hd && !this.headersDisabled){
39524             if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
39525                this.fly(hd).addClass("x-grid-hd-over");
39526             }
39527         }
39528     },
39529
39530     handleHdOut : function(e){
39531         var hd = this.findHeaderCell(e.getTarget());
39532         if(hd){
39533             this.fly(hd).removeClass("x-grid-hd-over");
39534         }
39535     },
39536
39537     handleSplitDblClick : function(e, t){
39538         var i = this.getCellIndex(t);
39539         if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
39540             this.autoSizeColumn(i, true);
39541             this.layout();
39542         }
39543     },
39544
39545     render : function(){
39546
39547         var cm = this.cm;
39548         var colCount = cm.getColumnCount();
39549
39550         if(this.grid.monitorWindowResize === true){
39551             Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
39552         }
39553         var header = this.renderHeaders();
39554         var body = this.templates.body.apply({rows:""});
39555         var html = this.templates.master.apply({
39556             lockedBody: body,
39557             body: body,
39558             lockedHeader: header[0],
39559             header: header[1]
39560         });
39561
39562         //this.updateColumns();
39563
39564         this.grid.getGridEl().dom.innerHTML = html;
39565
39566         this.initElements();
39567         
39568         // a kludge to fix the random scolling effect in webkit
39569         this.el.on("scroll", function() {
39570             this.el.dom.scrollTop=0; // hopefully not recursive..
39571         },this);
39572
39573         this.scroller.on("scroll", this.handleScroll, this);
39574         this.lockedBody.on("mousewheel", this.handleWheel, this);
39575         this.mainBody.on("mousewheel", this.handleWheel, this);
39576
39577         this.mainHd.on("mouseover", this.handleHdOver, this);
39578         this.mainHd.on("mouseout", this.handleHdOut, this);
39579         this.mainHd.on("dblclick", this.handleSplitDblClick, this,
39580                 {delegate: "."+this.splitClass});
39581
39582         this.lockedHd.on("mouseover", this.handleHdOver, this);
39583         this.lockedHd.on("mouseout", this.handleHdOut, this);
39584         this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
39585                 {delegate: "."+this.splitClass});
39586
39587         if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
39588             new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
39589         }
39590
39591         this.updateSplitters();
39592
39593         if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
39594             new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
39595             new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
39596         }
39597
39598         if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
39599             this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
39600             this.hmenu.add(
39601                 {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
39602                 {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
39603             );
39604             if(this.grid.enableColLock !== false){
39605                 this.hmenu.add('-',
39606                     {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
39607                     {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
39608                 );
39609             }
39610             if (Roo.isTouch) {
39611                  this.hmenu.add('-',
39612                     {id:"wider", text: this.columnsWiderText},
39613                     {id:"narrow", text: this.columnsNarrowText }
39614                 );
39615                 
39616                  
39617             }
39618             
39619             if(this.grid.enableColumnHide !== false){
39620
39621                 this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
39622                 this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
39623                 this.colMenu.on("itemclick", this.handleHdMenuClick, this);
39624
39625                 this.hmenu.add('-',
39626                     {id:"columns", text: this.columnsText, menu: this.colMenu}
39627                 );
39628             }
39629             this.hmenu.on("itemclick", this.handleHdMenuClick, this);
39630
39631             this.grid.on("headercontextmenu", this.handleHdCtx, this);
39632         }
39633
39634         if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
39635             this.dd = new Roo.grid.GridDragZone(this.grid, {
39636                 ddGroup : this.grid.ddGroup || 'GridDD'
39637             });
39638             
39639         }
39640
39641         /*
39642         for(var i = 0; i < colCount; i++){
39643             if(cm.isHidden(i)){
39644                 this.hideColumn(i);
39645             }
39646             if(cm.config[i].align){
39647                 this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
39648                 this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
39649             }
39650         }*/
39651         
39652         this.updateHeaderSortState();
39653
39654         this.beforeInitialResize();
39655         this.layout(true);
39656
39657         // two part rendering gives faster view to the user
39658         this.renderPhase2.defer(1, this);
39659     },
39660
39661     renderPhase2 : function(){
39662         // render the rows now
39663         this.refresh();
39664         if(this.grid.autoSizeColumns){
39665             this.autoSizeColumns();
39666         }
39667     },
39668
39669     beforeInitialResize : function(){
39670
39671     },
39672
39673     onColumnSplitterMoved : function(i, w){
39674         this.userResized = true;
39675         var cm = this.grid.colModel;
39676         cm.setColumnWidth(i, w, true);
39677         var cid = cm.getColumnId(i);
39678         this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
39679         this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
39680         this.updateSplitters();
39681         this.layout();
39682         this.grid.fireEvent("columnresize", i, w);
39683     },
39684
39685     syncRowHeights : function(startIndex, endIndex){
39686         if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
39687             startIndex = startIndex || 0;
39688             var mrows = this.getBodyTable().rows;
39689             var lrows = this.getLockedTable().rows;
39690             var len = mrows.length-1;
39691             endIndex = Math.min(endIndex || len, len);
39692             for(var i = startIndex; i <= endIndex; i++){
39693                 var m = mrows[i], l = lrows[i];
39694                 var h = Math.max(m.offsetHeight, l.offsetHeight);
39695                 m.style.height = l.style.height = h + "px";
39696             }
39697         }
39698     },
39699
39700     layout : function(initialRender, is2ndPass)
39701     {
39702         var g = this.grid;
39703         var auto = g.autoHeight;
39704         var scrollOffset = 16;
39705         var c = g.getGridEl(), cm = this.cm,
39706                 expandCol = g.autoExpandColumn,
39707                 gv = this;
39708         //c.beginMeasure();
39709
39710         if(!c.dom.offsetWidth){ // display:none?
39711             if(initialRender){
39712                 this.lockedWrap.show();
39713                 this.mainWrap.show();
39714             }
39715             return;
39716         }
39717
39718         var hasLock = this.cm.isLocked(0);
39719
39720         var tbh = this.headerPanel.getHeight();
39721         var bbh = this.footerPanel.getHeight();
39722
39723         if(auto){
39724             var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
39725             var newHeight = ch + c.getBorderWidth("tb");
39726             if(g.maxHeight){
39727                 newHeight = Math.min(g.maxHeight, newHeight);
39728             }
39729             c.setHeight(newHeight);
39730         }
39731
39732         if(g.autoWidth){
39733             c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
39734         }
39735
39736         var s = this.scroller;
39737
39738         var csize = c.getSize(true);
39739
39740         this.el.setSize(csize.width, csize.height);
39741
39742         this.headerPanel.setWidth(csize.width);
39743         this.footerPanel.setWidth(csize.width);
39744
39745         var hdHeight = this.mainHd.getHeight();
39746         var vw = csize.width;
39747         var vh = csize.height - (tbh + bbh);
39748
39749         s.setSize(vw, vh);
39750
39751         var bt = this.getBodyTable();
39752         
39753         if(cm.getLockedCount() == cm.config.length){
39754             bt = this.getLockedTable();
39755         }
39756         
39757         var ltWidth = hasLock ?
39758                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
39759
39760         var scrollHeight = bt.offsetHeight;
39761         var scrollWidth = ltWidth + bt.offsetWidth;
39762         var vscroll = false, hscroll = false;
39763
39764         this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
39765
39766         var lw = this.lockedWrap, mw = this.mainWrap;
39767         var lb = this.lockedBody, mb = this.mainBody;
39768
39769         setTimeout(function(){
39770             var t = s.dom.offsetTop;
39771             var w = s.dom.clientWidth,
39772                 h = s.dom.clientHeight;
39773
39774             lw.setTop(t);
39775             lw.setSize(ltWidth, h);
39776
39777             mw.setLeftTop(ltWidth, t);
39778             mw.setSize(w-ltWidth, h);
39779
39780             lb.setHeight(h-hdHeight);
39781             mb.setHeight(h-hdHeight);
39782
39783             if(is2ndPass !== true && !gv.userResized && expandCol){
39784                 // high speed resize without full column calculation
39785                 
39786                 var ci = cm.getIndexById(expandCol);
39787                 if (ci < 0) {
39788                     ci = cm.findColumnIndex(expandCol);
39789                 }
39790                 ci = Math.max(0, ci); // make sure it's got at least the first col.
39791                 var expandId = cm.getColumnId(ci);
39792                 var  tw = cm.getTotalWidth(false);
39793                 var currentWidth = cm.getColumnWidth(ci);
39794                 var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
39795                 if(currentWidth != cw){
39796                     cm.setColumnWidth(ci, cw, true);
39797                     gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
39798                     gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
39799                     gv.updateSplitters();
39800                     gv.layout(false, true);
39801                 }
39802             }
39803
39804             if(initialRender){
39805                 lw.show();
39806                 mw.show();
39807             }
39808             //c.endMeasure();
39809         }, 10);
39810     },
39811
39812     onWindowResize : function(){
39813         if(!this.grid.monitorWindowResize || this.grid.autoHeight){
39814             return;
39815         }
39816         this.layout();
39817     },
39818
39819     appendFooter : function(parentEl){
39820         return null;
39821     },
39822
39823     sortAscText : "Sort Ascending",
39824     sortDescText : "Sort Descending",
39825     lockText : "Lock Column",
39826     unlockText : "Unlock Column",
39827     columnsText : "Columns",
39828  
39829     columnsWiderText : "Wider",
39830     columnsNarrowText : "Thinner"
39831 });
39832
39833
39834 Roo.grid.GridView.ColumnDragZone = function(grid, hd){
39835     Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
39836     this.proxy.el.addClass('x-grid3-col-dd');
39837 };
39838
39839 Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
39840     handleMouseDown : function(e){
39841
39842     },
39843
39844     callHandleMouseDown : function(e){
39845         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
39846     }
39847 });
39848 /*
39849  * Based on:
39850  * Ext JS Library 1.1.1
39851  * Copyright(c) 2006-2007, Ext JS, LLC.
39852  *
39853  * Originally Released Under LGPL - original licence link has changed is not relivant.
39854  *
39855  * Fork - LGPL
39856  * <script type="text/javascript">
39857  */
39858  /**
39859  * @extends Roo.dd.DDProxy
39860  * @class Roo.grid.SplitDragZone
39861  * Support for Column Header resizing
39862  * @constructor
39863  * @param {Object} config
39864  */
39865 // private
39866 // This is a support class used internally by the Grid components
39867 Roo.grid.SplitDragZone = function(grid, hd, hd2){
39868     this.grid = grid;
39869     this.view = grid.getView();
39870     this.proxy = this.view.resizeProxy;
39871     Roo.grid.SplitDragZone.superclass.constructor.call(
39872         this,
39873         hd, // ID
39874         "gridSplitters" + this.grid.getGridEl().id, // SGROUP
39875         {  // CONFIG
39876             dragElId : Roo.id(this.proxy.dom),
39877             resizeFrame:false
39878         }
39879     );
39880     
39881     this.setHandleElId(Roo.id(hd));
39882     if (hd2 !== false) {
39883         this.setOuterHandleElId(Roo.id(hd2));
39884     }
39885     
39886     this.scroll = false;
39887 };
39888 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
39889     fly: Roo.Element.fly,
39890
39891     b4StartDrag : function(x, y){
39892         this.view.headersDisabled = true;
39893         var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
39894                     this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
39895         );
39896         this.proxy.setHeight(h);
39897         
39898         // for old system colWidth really stored the actual width?
39899         // in bootstrap we tried using xs/ms/etc.. to do % sizing?
39900         // which in reality did not work.. - it worked only for fixed sizes
39901         // for resizable we need to use actual sizes.
39902         var w = this.cm.getColumnWidth(this.cellIndex);
39903         if (!this.view.mainWrap) {
39904             // bootstrap.
39905             w = this.view.getHeaderIndex(this.cellIndex).getWidth();
39906         }
39907         
39908         
39909         
39910         // this was w-this.grid.minColumnWidth;
39911         // doesnt really make sense? - w = thie curren width or the rendered one?
39912         var minw = Math.max(w-this.grid.minColumnWidth, 0);
39913         this.resetConstraints();
39914         this.setXConstraint(minw, 1000);
39915         this.setYConstraint(0, 0);
39916         this.minX = x - minw;
39917         this.maxX = x + 1000;
39918         this.startPos = x;
39919         if (!this.view.mainWrap) { // this is Bootstrap code..
39920             this.getDragEl().style.display='block';
39921         }
39922         
39923         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
39924     },
39925
39926
39927     handleMouseDown : function(e){
39928         ev = Roo.EventObject.setEvent(e);
39929         var t = this.fly(ev.getTarget());
39930         if(t.hasClass("x-grid-split")){
39931             this.cellIndex = this.view.getCellIndex(t.dom);
39932             this.split = t.dom;
39933             this.cm = this.grid.colModel;
39934             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
39935                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
39936             }
39937         }
39938     },
39939
39940     endDrag : function(e){
39941         this.view.headersDisabled = false;
39942         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
39943         var diff = endX - this.startPos;
39944         // 
39945         var w = this.cm.getColumnWidth(this.cellIndex);
39946         if (!this.view.mainWrap) {
39947             w = 0;
39948         }
39949         this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
39950     },
39951
39952     autoOffset : function(){
39953         this.setDelta(0,0);
39954     }
39955 });/*
39956  * Based on:
39957  * Ext JS Library 1.1.1
39958  * Copyright(c) 2006-2007, Ext JS, LLC.
39959  *
39960  * Originally Released Under LGPL - original licence link has changed is not relivant.
39961  *
39962  * Fork - LGPL
39963  * <script type="text/javascript">
39964  */
39965  
39966 // private
39967 // This is a support class used internally by the Grid components
39968 Roo.grid.GridDragZone = function(grid, config){
39969     this.view = grid.getView();
39970     Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
39971     if(this.view.lockedBody){
39972         this.setHandleElId(Roo.id(this.view.mainBody.dom));
39973         this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
39974     }
39975     this.scroll = false;
39976     this.grid = grid;
39977     this.ddel = document.createElement('div');
39978     this.ddel.className = 'x-grid-dd-wrap';
39979 };
39980
39981 Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
39982     ddGroup : "GridDD",
39983
39984     getDragData : function(e){
39985         var t = Roo.lib.Event.getTarget(e);
39986         var rowIndex = this.view.findRowIndex(t);
39987         var sm = this.grid.selModel;
39988             
39989         //Roo.log(rowIndex);
39990         
39991         if (sm.getSelectedCell) {
39992             // cell selection..
39993             if (!sm.getSelectedCell()) {
39994                 return false;
39995             }
39996             if (rowIndex != sm.getSelectedCell()[0]) {
39997                 return false;
39998             }
39999         
40000         }
40001         if (sm.getSelections && sm.getSelections().length < 1) {
40002             return false;
40003         }
40004         
40005         
40006         // before it used to all dragging of unseleted... - now we dont do that.
40007         if(rowIndex !== false){
40008             
40009             // if editorgrid.. 
40010             
40011             
40012             //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
40013                
40014             //if(!sm.isSelected(rowIndex) || e.hasModifier()){
40015               //  
40016             //}
40017             if (e.hasModifier()){
40018                 sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
40019             }
40020             
40021             Roo.log("getDragData");
40022             
40023             return {
40024                 grid: this.grid,
40025                 ddel: this.ddel,
40026                 rowIndex: rowIndex,
40027                 selections: sm.getSelections ? sm.getSelections() : (
40028                     sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
40029             };
40030         }
40031         return false;
40032     },
40033     
40034     
40035     onInitDrag : function(e){
40036         var data = this.dragData;
40037         this.ddel.innerHTML = this.grid.getDragDropText();
40038         this.proxy.update(this.ddel);
40039         // fire start drag?
40040     },
40041
40042     afterRepair : function(){
40043         this.dragging = false;
40044     },
40045
40046     getRepairXY : function(e, data){
40047         return false;
40048     },
40049
40050     onEndDrag : function(data, e){
40051         // fire end drag?
40052     },
40053
40054     onValidDrop : function(dd, e, id){
40055         // fire drag drop?
40056         this.hideProxy();
40057     },
40058
40059     beforeInvalidDrop : function(e, id){
40060
40061     }
40062 });/*
40063  * Based on:
40064  * Ext JS Library 1.1.1
40065  * Copyright(c) 2006-2007, Ext JS, LLC.
40066  *
40067  * Originally Released Under LGPL - original licence link has changed is not relivant.
40068  *
40069  * Fork - LGPL
40070  * <script type="text/javascript">
40071  */
40072  
40073
40074 /**
40075  * @class Roo.grid.ColumnModel
40076  * @extends Roo.util.Observable
40077  * This is the default implementation of a ColumnModel used by the Grid. It defines
40078  * the columns in the grid.
40079  * <br>Usage:<br>
40080  <pre><code>
40081  var colModel = new Roo.grid.ColumnModel([
40082         {header: "Ticker", width: 60, sortable: true, locked: true},
40083         {header: "Company Name", width: 150, sortable: true},
40084         {header: "Market Cap.", width: 100, sortable: true},
40085         {header: "$ Sales", width: 100, sortable: true, renderer: money},
40086         {header: "Employees", width: 100, sortable: true, resizable: false}
40087  ]);
40088  </code></pre>
40089  * <p>
40090  
40091  * The config options listed for this class are options which may appear in each
40092  * individual column definition.
40093  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
40094  * @constructor
40095  * @param {Object} config An Array of column config objects. See this class's
40096  * config objects for details.
40097 */
40098 Roo.grid.ColumnModel = function(config){
40099         /**
40100      * The config passed into the constructor
40101      */
40102     this.config = []; //config;
40103     this.lookup = {};
40104
40105     // if no id, create one
40106     // if the column does not have a dataIndex mapping,
40107     // map it to the order it is in the config
40108     for(var i = 0, len = config.length; i < len; i++){
40109         this.addColumn(config[i]);
40110         
40111     }
40112
40113     /**
40114      * The width of columns which have no width specified (defaults to 100)
40115      * @type Number
40116      */
40117     this.defaultWidth = 100;
40118
40119     /**
40120      * Default sortable of columns which have no sortable specified (defaults to false)
40121      * @type Boolean
40122      */
40123     this.defaultSortable = false;
40124
40125     this.addEvents({
40126         /**
40127              * @event widthchange
40128              * Fires when the width of a column changes.
40129              * @param {ColumnModel} this
40130              * @param {Number} columnIndex The column index
40131              * @param {Number} newWidth The new width
40132              */
40133             "widthchange": true,
40134         /**
40135              * @event headerchange
40136              * Fires when the text of a header changes.
40137              * @param {ColumnModel} this
40138              * @param {Number} columnIndex The column index
40139              * @param {Number} newText The new header text
40140              */
40141             "headerchange": true,
40142         /**
40143              * @event hiddenchange
40144              * Fires when a column is hidden or "unhidden".
40145              * @param {ColumnModel} this
40146              * @param {Number} columnIndex The column index
40147              * @param {Boolean} hidden true if hidden, false otherwise
40148              */
40149             "hiddenchange": true,
40150             /**
40151          * @event columnmoved
40152          * Fires when a column is moved.
40153          * @param {ColumnModel} this
40154          * @param {Number} oldIndex
40155          * @param {Number} newIndex
40156          */
40157         "columnmoved" : true,
40158         /**
40159          * @event columlockchange
40160          * Fires when a column's locked state is changed
40161          * @param {ColumnModel} this
40162          * @param {Number} colIndex
40163          * @param {Boolean} locked true if locked
40164          */
40165         "columnlockchange" : true
40166     });
40167     Roo.grid.ColumnModel.superclass.constructor.call(this);
40168 };
40169 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
40170     /**
40171      * @cfg {String} header [required] The header text to display in the Grid view.
40172      */
40173         /**
40174      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
40175      */
40176         /**
40177      * @cfg {String} smHeader Header at Bootsrap Small width
40178      */
40179         /**
40180      * @cfg {String} mdHeader Header at Bootsrap Medium width
40181      */
40182         /**
40183      * @cfg {String} lgHeader Header at Bootsrap Large width
40184      */
40185         /**
40186      * @cfg {String} xlHeader Header at Bootsrap extra Large width
40187      */
40188     /**
40189      * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
40190      * {@link Roo.data.Record} definition from which to draw the column's value. If not
40191      * specified, the column's index is used as an index into the Record's data Array.
40192      */
40193     /**
40194      * @cfg {Number} width  The initial width in pixels of the column. Using this
40195      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
40196      */
40197     /**
40198      * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
40199      * Defaults to the value of the {@link #defaultSortable} property.
40200      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
40201      */
40202     /**
40203      * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
40204      */
40205     /**
40206      * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
40207      */
40208     /**
40209      * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
40210      */
40211     /**
40212      * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
40213      */
40214     /**
40215      * @cfg {Function} renderer A function used to generate HTML markup for a cell
40216      * given the cell's data value. See {@link #setRenderer}. If not specified, the
40217      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
40218      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
40219      */
40220        /**
40221      * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
40222      */
40223     /**
40224      * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
40225      */
40226     /**
40227      * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
40228      */
40229     /**
40230      * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
40231      */
40232     /**
40233      * @cfg {String} tooltip mouse over tooltip text
40234      */
40235     /**
40236      * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
40237      */
40238     /**
40239      * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
40240      */
40241     /**
40242      * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
40243      */
40244     /**
40245      * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
40246      */
40247         /**
40248      * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
40249      */
40250     /**
40251      * Returns the id of the column at the specified index.
40252      * @param {Number} index The column index
40253      * @return {String} the id
40254      */
40255     getColumnId : function(index){
40256         return this.config[index].id;
40257     },
40258
40259     /**
40260      * Returns the column for a specified id.
40261      * @param {String} id The column id
40262      * @return {Object} the column
40263      */
40264     getColumnById : function(id){
40265         return this.lookup[id];
40266     },
40267
40268     
40269     /**
40270      * Returns the column Object for a specified dataIndex.
40271      * @param {String} dataIndex The column dataIndex
40272      * @return {Object|Boolean} the column or false if not found
40273      */
40274     getColumnByDataIndex: function(dataIndex){
40275         var index = this.findColumnIndex(dataIndex);
40276         return index > -1 ? this.config[index] : false;
40277     },
40278     
40279     /**
40280      * Returns the index for a specified column id.
40281      * @param {String} id The column id
40282      * @return {Number} the index, or -1 if not found
40283      */
40284     getIndexById : function(id){
40285         for(var i = 0, len = this.config.length; i < len; i++){
40286             if(this.config[i].id == id){
40287                 return i;
40288             }
40289         }
40290         return -1;
40291     },
40292     
40293     /**
40294      * Returns the index for a specified column dataIndex.
40295      * @param {String} dataIndex The column dataIndex
40296      * @return {Number} the index, or -1 if not found
40297      */
40298     
40299     findColumnIndex : function(dataIndex){
40300         for(var i = 0, len = this.config.length; i < len; i++){
40301             if(this.config[i].dataIndex == dataIndex){
40302                 return i;
40303             }
40304         }
40305         return -1;
40306     },
40307     
40308     
40309     moveColumn : function(oldIndex, newIndex){
40310         var c = this.config[oldIndex];
40311         this.config.splice(oldIndex, 1);
40312         this.config.splice(newIndex, 0, c);
40313         this.dataMap = null;
40314         this.fireEvent("columnmoved", this, oldIndex, newIndex);
40315     },
40316
40317     isLocked : function(colIndex){
40318         return this.config[colIndex].locked === true;
40319     },
40320
40321     setLocked : function(colIndex, value, suppressEvent){
40322         if(this.isLocked(colIndex) == value){
40323             return;
40324         }
40325         this.config[colIndex].locked = value;
40326         if(!suppressEvent){
40327             this.fireEvent("columnlockchange", this, colIndex, value);
40328         }
40329     },
40330
40331     getTotalLockedWidth : function(){
40332         var totalWidth = 0;
40333         for(var i = 0; i < this.config.length; i++){
40334             if(this.isLocked(i) && !this.isHidden(i)){
40335                 this.totalWidth += this.getColumnWidth(i);
40336             }
40337         }
40338         return totalWidth;
40339     },
40340
40341     getLockedCount : function(){
40342         for(var i = 0, len = this.config.length; i < len; i++){
40343             if(!this.isLocked(i)){
40344                 return i;
40345             }
40346         }
40347         
40348         return this.config.length;
40349     },
40350
40351     /**
40352      * Returns the number of columns.
40353      * @return {Number}
40354      */
40355     getColumnCount : function(visibleOnly){
40356         if(visibleOnly === true){
40357             var c = 0;
40358             for(var i = 0, len = this.config.length; i < len; i++){
40359                 if(!this.isHidden(i)){
40360                     c++;
40361                 }
40362             }
40363             return c;
40364         }
40365         return this.config.length;
40366     },
40367
40368     /**
40369      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
40370      * @param {Function} fn
40371      * @param {Object} scope (optional)
40372      * @return {Array} result
40373      */
40374     getColumnsBy : function(fn, scope){
40375         var r = [];
40376         for(var i = 0, len = this.config.length; i < len; i++){
40377             var c = this.config[i];
40378             if(fn.call(scope||this, c, i) === true){
40379                 r[r.length] = c;
40380             }
40381         }
40382         return r;
40383     },
40384
40385     /**
40386      * Returns true if the specified column is sortable.
40387      * @param {Number} col The column index
40388      * @return {Boolean}
40389      */
40390     isSortable : function(col){
40391         if(typeof this.config[col].sortable == "undefined"){
40392             return this.defaultSortable;
40393         }
40394         return this.config[col].sortable;
40395     },
40396
40397     /**
40398      * Returns the rendering (formatting) function defined for the column.
40399      * @param {Number} col The column index.
40400      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
40401      */
40402     getRenderer : function(col){
40403         if(!this.config[col].renderer){
40404             return Roo.grid.ColumnModel.defaultRenderer;
40405         }
40406         return this.config[col].renderer;
40407     },
40408
40409     /**
40410      * Sets the rendering (formatting) function for a column.
40411      * @param {Number} col The column index
40412      * @param {Function} fn The function to use to process the cell's raw data
40413      * to return HTML markup for the grid view. The render function is called with
40414      * the following parameters:<ul>
40415      * <li>Data value.</li>
40416      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
40417      * <li>css A CSS style string to apply to the table cell.</li>
40418      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
40419      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
40420      * <li>Row index</li>
40421      * <li>Column index</li>
40422      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
40423      */
40424     setRenderer : function(col, fn){
40425         this.config[col].renderer = fn;
40426     },
40427
40428     /**
40429      * Returns the width for the specified column.
40430      * @param {Number} col The column index
40431      * @param (optional) {String} gridSize bootstrap width size.
40432      * @return {Number}
40433      */
40434     getColumnWidth : function(col, gridSize)
40435         {
40436                 var cfg = this.config[col];
40437                 
40438                 if (typeof(gridSize) == 'undefined') {
40439                         return cfg.width * 1 || this.defaultWidth;
40440                 }
40441                 if (gridSize === false) { // if we set it..
40442                         return cfg.width || false;
40443                 }
40444                 var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
40445                 
40446                 for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
40447                         if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
40448                                 continue;
40449                         }
40450                         return cfg[ sizes[i] ];
40451                 }
40452                 return 1;
40453                 
40454     },
40455
40456     /**
40457      * Sets the width for a column.
40458      * @param {Number} col The column index
40459      * @param {Number} width The new width
40460      */
40461     setColumnWidth : function(col, width, suppressEvent){
40462         this.config[col].width = width;
40463         this.totalWidth = null;
40464         if(!suppressEvent){
40465              this.fireEvent("widthchange", this, col, width);
40466         }
40467     },
40468
40469     /**
40470      * Returns the total width of all columns.
40471      * @param {Boolean} includeHidden True to include hidden column widths
40472      * @return {Number}
40473      */
40474     getTotalWidth : function(includeHidden){
40475         if(!this.totalWidth){
40476             this.totalWidth = 0;
40477             for(var i = 0, len = this.config.length; i < len; i++){
40478                 if(includeHidden || !this.isHidden(i)){
40479                     this.totalWidth += this.getColumnWidth(i);
40480                 }
40481             }
40482         }
40483         return this.totalWidth;
40484     },
40485
40486     /**
40487      * Returns the header for the specified column.
40488      * @param {Number} col The column index
40489      * @return {String}
40490      */
40491     getColumnHeader : function(col){
40492         return this.config[col].header;
40493     },
40494
40495     /**
40496      * Sets the header for a column.
40497      * @param {Number} col The column index
40498      * @param {String} header The new header
40499      */
40500     setColumnHeader : function(col, header){
40501         this.config[col].header = header;
40502         this.fireEvent("headerchange", this, col, header);
40503     },
40504
40505     /**
40506      * Returns the tooltip for the specified column.
40507      * @param {Number} col The column index
40508      * @return {String}
40509      */
40510     getColumnTooltip : function(col){
40511             return this.config[col].tooltip;
40512     },
40513     /**
40514      * Sets the tooltip for a column.
40515      * @param {Number} col The column index
40516      * @param {String} tooltip The new tooltip
40517      */
40518     setColumnTooltip : function(col, tooltip){
40519             this.config[col].tooltip = tooltip;
40520     },
40521
40522     /**
40523      * Returns the dataIndex for the specified column.
40524      * @param {Number} col The column index
40525      * @return {Number}
40526      */
40527     getDataIndex : function(col){
40528         return this.config[col].dataIndex;
40529     },
40530
40531     /**
40532      * Sets the dataIndex for a column.
40533      * @param {Number} col The column index
40534      * @param {Number} dataIndex The new dataIndex
40535      */
40536     setDataIndex : function(col, dataIndex){
40537         this.config[col].dataIndex = dataIndex;
40538     },
40539
40540     
40541     
40542     /**
40543      * Returns true if the cell is editable.
40544      * @param {Number} colIndex The column index
40545      * @param {Number} rowIndex The row index - this is nto actually used..?
40546      * @return {Boolean}
40547      */
40548     isCellEditable : function(colIndex, rowIndex){
40549         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
40550     },
40551
40552     /**
40553      * Returns the editor defined for the cell/column.
40554      * return false or null to disable editing.
40555      * @param {Number} colIndex The column index
40556      * @param {Number} rowIndex The row index
40557      * @return {Object}
40558      */
40559     getCellEditor : function(colIndex, rowIndex){
40560         return this.config[colIndex].editor;
40561     },
40562
40563     /**
40564      * Sets if a column is editable.
40565      * @param {Number} col The column index
40566      * @param {Boolean} editable True if the column is editable
40567      */
40568     setEditable : function(col, editable){
40569         this.config[col].editable = editable;
40570     },
40571
40572
40573     /**
40574      * Returns true if the column is hidden.
40575      * @param {Number} colIndex The column index
40576      * @return {Boolean}
40577      */
40578     isHidden : function(colIndex){
40579         return this.config[colIndex].hidden;
40580     },
40581
40582
40583     /**
40584      * Returns true if the column width cannot be changed
40585      */
40586     isFixed : function(colIndex){
40587         return this.config[colIndex].fixed;
40588     },
40589
40590     /**
40591      * Returns true if the column can be resized
40592      * @return {Boolean}
40593      */
40594     isResizable : function(colIndex){
40595         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
40596     },
40597     /**
40598      * Sets if a column is hidden.
40599      * @param {Number} colIndex The column index
40600      * @param {Boolean} hidden True if the column is hidden
40601      */
40602     setHidden : function(colIndex, hidden){
40603         this.config[colIndex].hidden = hidden;
40604         this.totalWidth = null;
40605         this.fireEvent("hiddenchange", this, colIndex, hidden);
40606     },
40607
40608     /**
40609      * Sets the editor for a column.
40610      * @param {Number} col The column index
40611      * @param {Object} editor The editor object
40612      */
40613     setEditor : function(col, editor){
40614         this.config[col].editor = editor;
40615     },
40616     /**
40617      * Add a column (experimental...) - defaults to adding to the end..
40618      * @param {Object} config 
40619     */
40620     addColumn : function(c)
40621     {
40622     
40623         var i = this.config.length;
40624         this.config[i] = c;
40625         
40626         if(typeof c.dataIndex == "undefined"){
40627             c.dataIndex = i;
40628         }
40629         if(typeof c.renderer == "string"){
40630             c.renderer = Roo.util.Format[c.renderer];
40631         }
40632         if(typeof c.id == "undefined"){
40633             c.id = Roo.id();
40634         }
40635         if(c.editor && c.editor.xtype){
40636             c.editor  = Roo.factory(c.editor, Roo.grid);
40637         }
40638         if(c.editor && c.editor.isFormField){
40639             c.editor = new Roo.grid.GridEditor(c.editor);
40640         }
40641         this.lookup[c.id] = c;
40642     }
40643     
40644 });
40645
40646 Roo.grid.ColumnModel.defaultRenderer = function(value)
40647 {
40648     if(typeof value == "object") {
40649         return value;
40650     }
40651         if(typeof value == "string" && value.length < 1){
40652             return "&#160;";
40653         }
40654     
40655         return String.format("{0}", value);
40656 };
40657
40658 // Alias for backwards compatibility
40659 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
40660 /*
40661  * Based on:
40662  * Ext JS Library 1.1.1
40663  * Copyright(c) 2006-2007, Ext JS, LLC.
40664  *
40665  * Originally Released Under LGPL - original licence link has changed is not relivant.
40666  *
40667  * Fork - LGPL
40668  * <script type="text/javascript">
40669  */
40670
40671 /**
40672  * @class Roo.grid.AbstractSelectionModel
40673  * @extends Roo.util.Observable
40674  * @abstract
40675  * Abstract base class for grid SelectionModels.  It provides the interface that should be
40676  * implemented by descendant classes.  This class should not be directly instantiated.
40677  * @constructor
40678  */
40679 Roo.grid.AbstractSelectionModel = function(){
40680     this.locked = false;
40681     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
40682 };
40683
40684 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
40685     /** @ignore Called by the grid automatically. Do not call directly. */
40686     init : function(grid){
40687         this.grid = grid;
40688         this.initEvents();
40689     },
40690
40691     /**
40692      * Locks the selections.
40693      */
40694     lock : function(){
40695         this.locked = true;
40696     },
40697
40698     /**
40699      * Unlocks the selections.
40700      */
40701     unlock : function(){
40702         this.locked = false;
40703     },
40704
40705     /**
40706      * Returns true if the selections are locked.
40707      * @return {Boolean}
40708      */
40709     isLocked : function(){
40710         return this.locked;
40711     }
40712 });/*
40713  * Based on:
40714  * Ext JS Library 1.1.1
40715  * Copyright(c) 2006-2007, Ext JS, LLC.
40716  *
40717  * Originally Released Under LGPL - original licence link has changed is not relivant.
40718  *
40719  * Fork - LGPL
40720  * <script type="text/javascript">
40721  */
40722 /**
40723  * @extends Roo.grid.AbstractSelectionModel
40724  * @class Roo.grid.RowSelectionModel
40725  * The default SelectionModel used by {@link Roo.grid.Grid}.
40726  * It supports multiple selections and keyboard selection/navigation. 
40727  * @constructor
40728  * @param {Object} config
40729  */
40730 Roo.grid.RowSelectionModel = function(config){
40731     Roo.apply(this, config);
40732     this.selections = new Roo.util.MixedCollection(false, function(o){
40733         return o.id;
40734     });
40735
40736     this.last = false;
40737     this.lastActive = false;
40738
40739     this.addEvents({
40740         /**
40741         * @event selectionchange
40742         * Fires when the selection changes
40743         * @param {SelectionModel} this
40744         */
40745        "selectionchange" : true,
40746        /**
40747         * @event afterselectionchange
40748         * Fires after the selection changes (eg. by key press or clicking)
40749         * @param {SelectionModel} this
40750         */
40751        "afterselectionchange" : true,
40752        /**
40753         * @event beforerowselect
40754         * Fires when a row is selected being selected, return false to cancel.
40755         * @param {SelectionModel} this
40756         * @param {Number} rowIndex The selected index
40757         * @param {Boolean} keepExisting False if other selections will be cleared
40758         */
40759        "beforerowselect" : true,
40760        /**
40761         * @event rowselect
40762         * Fires when a row is selected.
40763         * @param {SelectionModel} this
40764         * @param {Number} rowIndex The selected index
40765         * @param {Roo.data.Record} r The record
40766         */
40767        "rowselect" : true,
40768        /**
40769         * @event rowdeselect
40770         * Fires when a row is deselected.
40771         * @param {SelectionModel} this
40772         * @param {Number} rowIndex The selected index
40773         */
40774         "rowdeselect" : true
40775     });
40776     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
40777     this.locked = false;
40778 };
40779
40780 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
40781     /**
40782      * @cfg {Boolean} singleSelect
40783      * True to allow selection of only one row at a time (defaults to false)
40784      */
40785     singleSelect : false,
40786
40787     // private
40788     initEvents : function(){
40789
40790         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
40791             this.grid.on("mousedown", this.handleMouseDown, this);
40792         }else{ // allow click to work like normal
40793             this.grid.on("rowclick", this.handleDragableRowClick, this);
40794         }
40795         // bootstrap does not have a view..
40796         var view = this.grid.view ? this.grid.view : this.grid;
40797         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
40798             "up" : function(e){
40799                 if(!e.shiftKey){
40800                     this.selectPrevious(e.shiftKey);
40801                 }else if(this.last !== false && this.lastActive !== false){
40802                     var last = this.last;
40803                     this.selectRange(this.last,  this.lastActive-1);
40804                     view.focusRow(this.lastActive);
40805                     if(last !== false){
40806                         this.last = last;
40807                     }
40808                 }else{
40809                     this.selectFirstRow();
40810                 }
40811                 this.fireEvent("afterselectionchange", this);
40812             },
40813             "down" : function(e){
40814                 if(!e.shiftKey){
40815                     this.selectNext(e.shiftKey);
40816                 }else if(this.last !== false && this.lastActive !== false){
40817                     var last = this.last;
40818                     this.selectRange(this.last,  this.lastActive+1);
40819                     view.focusRow(this.lastActive);
40820                     if(last !== false){
40821                         this.last = last;
40822                     }
40823                 }else{
40824                     this.selectFirstRow();
40825                 }
40826                 this.fireEvent("afterselectionchange", this);
40827             },
40828             scope: this
40829         });
40830
40831          
40832         view.on("refresh", this.onRefresh, this);
40833         view.on("rowupdated", this.onRowUpdated, this);
40834         view.on("rowremoved", this.onRemove, this);
40835     },
40836
40837     // private
40838     onRefresh : function(){
40839         var ds = this.grid.ds, i, v = this.grid.view;
40840         var s = this.selections;
40841         s.each(function(r){
40842             if((i = ds.indexOfId(r.id)) != -1){
40843                 v.onRowSelect(i);
40844                 s.add(ds.getAt(i)); // updating the selection relate data
40845             }else{
40846                 s.remove(r);
40847             }
40848         });
40849     },
40850
40851     // private
40852     onRemove : function(v, index, r){
40853         this.selections.remove(r);
40854     },
40855
40856     // private
40857     onRowUpdated : function(v, index, r){
40858         if(this.isSelected(r)){
40859             v.onRowSelect(index);
40860         }
40861     },
40862
40863     /**
40864      * Select records.
40865      * @param {Array} records The records to select
40866      * @param {Boolean} keepExisting (optional) True to keep existing selections
40867      */
40868     selectRecords : function(records, keepExisting){
40869         if(!keepExisting){
40870             this.clearSelections();
40871         }
40872         var ds = this.grid.ds;
40873         for(var i = 0, len = records.length; i < len; i++){
40874             this.selectRow(ds.indexOf(records[i]), true);
40875         }
40876     },
40877
40878     /**
40879      * Gets the number of selected rows.
40880      * @return {Number}
40881      */
40882     getCount : function(){
40883         return this.selections.length;
40884     },
40885
40886     /**
40887      * Selects the first row in the grid.
40888      */
40889     selectFirstRow : function(){
40890         this.selectRow(0);
40891     },
40892
40893     /**
40894      * Select the last row.
40895      * @param {Boolean} keepExisting (optional) True to keep existing selections
40896      */
40897     selectLastRow : function(keepExisting){
40898         this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
40899     },
40900
40901     /**
40902      * Selects the row immediately following the last selected row.
40903      * @param {Boolean} keepExisting (optional) True to keep existing selections
40904      */
40905     selectNext : function(keepExisting){
40906         if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
40907             this.selectRow(this.last+1, keepExisting);
40908             var view = this.grid.view ? this.grid.view : this.grid;
40909             view.focusRow(this.last);
40910         }
40911     },
40912
40913     /**
40914      * Selects the row that precedes the last selected row.
40915      * @param {Boolean} keepExisting (optional) True to keep existing selections
40916      */
40917     selectPrevious : function(keepExisting){
40918         if(this.last){
40919             this.selectRow(this.last-1, keepExisting);
40920             var view = this.grid.view ? this.grid.view : this.grid;
40921             view.focusRow(this.last);
40922         }
40923     },
40924
40925     /**
40926      * Returns the selected records
40927      * @return {Array} Array of selected records
40928      */
40929     getSelections : function(){
40930         return [].concat(this.selections.items);
40931     },
40932
40933     /**
40934      * Returns the first selected record.
40935      * @return {Record}
40936      */
40937     getSelected : function(){
40938         return this.selections.itemAt(0);
40939     },
40940
40941
40942     /**
40943      * Clears all selections.
40944      */
40945     clearSelections : function(fast){
40946         if(this.locked) {
40947             return;
40948         }
40949         if(fast !== true){
40950             var ds = this.grid.ds;
40951             var s = this.selections;
40952             s.each(function(r){
40953                 this.deselectRow(ds.indexOfId(r.id));
40954             }, this);
40955             s.clear();
40956         }else{
40957             this.selections.clear();
40958         }
40959         this.last = false;
40960     },
40961
40962
40963     /**
40964      * Selects all rows.
40965      */
40966     selectAll : function(){
40967         if(this.locked) {
40968             return;
40969         }
40970         this.selections.clear();
40971         for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
40972             this.selectRow(i, true);
40973         }
40974     },
40975
40976     /**
40977      * Returns True if there is a selection.
40978      * @return {Boolean}
40979      */
40980     hasSelection : function(){
40981         return this.selections.length > 0;
40982     },
40983
40984     /**
40985      * Returns True if the specified row is selected.
40986      * @param {Number/Record} record The record or index of the record to check
40987      * @return {Boolean}
40988      */
40989     isSelected : function(index){
40990         var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
40991         return (r && this.selections.key(r.id) ? true : false);
40992     },
40993
40994     /**
40995      * Returns True if the specified record id is selected.
40996      * @param {String} id The id of record to check
40997      * @return {Boolean}
40998      */
40999     isIdSelected : function(id){
41000         return (this.selections.key(id) ? true : false);
41001     },
41002
41003     // private
41004     handleMouseDown : function(e, t)
41005     {
41006         var view = this.grid.view ? this.grid.view : this.grid;
41007         var rowIndex;
41008         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
41009             return;
41010         };
41011         if(e.shiftKey && this.last !== false){
41012             var last = this.last;
41013             this.selectRange(last, rowIndex, e.ctrlKey);
41014             this.last = last; // reset the last
41015             view.focusRow(rowIndex);
41016         }else{
41017             var isSelected = this.isSelected(rowIndex);
41018             if(e.button !== 0 && isSelected){
41019                 view.focusRow(rowIndex);
41020             }else if(e.ctrlKey && isSelected){
41021                 this.deselectRow(rowIndex);
41022             }else if(!isSelected){
41023                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
41024                 view.focusRow(rowIndex);
41025             }
41026         }
41027         this.fireEvent("afterselectionchange", this);
41028     },
41029     // private
41030     handleDragableRowClick :  function(grid, rowIndex, e) 
41031     {
41032         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
41033             this.selectRow(rowIndex, false);
41034             var view = this.grid.view ? this.grid.view : this.grid;
41035             view.focusRow(rowIndex);
41036              this.fireEvent("afterselectionchange", this);
41037         }
41038     },
41039     
41040     /**
41041      * Selects multiple rows.
41042      * @param {Array} rows Array of the indexes of the row to select
41043      * @param {Boolean} keepExisting (optional) True to keep existing selections
41044      */
41045     selectRows : function(rows, keepExisting){
41046         if(!keepExisting){
41047             this.clearSelections();
41048         }
41049         for(var i = 0, len = rows.length; i < len; i++){
41050             this.selectRow(rows[i], true);
41051         }
41052     },
41053
41054     /**
41055      * Selects a range of rows. All rows in between startRow and endRow are also selected.
41056      * @param {Number} startRow The index of the first row in the range
41057      * @param {Number} endRow The index of the last row in the range
41058      * @param {Boolean} keepExisting (optional) True to retain existing selections
41059      */
41060     selectRange : function(startRow, endRow, keepExisting){
41061         if(this.locked) {
41062             return;
41063         }
41064         if(!keepExisting){
41065             this.clearSelections();
41066         }
41067         if(startRow <= endRow){
41068             for(var i = startRow; i <= endRow; i++){
41069                 this.selectRow(i, true);
41070             }
41071         }else{
41072             for(var i = startRow; i >= endRow; i--){
41073                 this.selectRow(i, true);
41074             }
41075         }
41076     },
41077
41078     /**
41079      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
41080      * @param {Number} startRow The index of the first row in the range
41081      * @param {Number} endRow The index of the last row in the range
41082      */
41083     deselectRange : function(startRow, endRow, preventViewNotify){
41084         if(this.locked) {
41085             return;
41086         }
41087         for(var i = startRow; i <= endRow; i++){
41088             this.deselectRow(i, preventViewNotify);
41089         }
41090     },
41091
41092     /**
41093      * Selects a row.
41094      * @param {Number} row The index of the row to select
41095      * @param {Boolean} keepExisting (optional) True to keep existing selections
41096      */
41097     selectRow : function(index, keepExisting, preventViewNotify){
41098         if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
41099             return;
41100         }
41101         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
41102             if(!keepExisting || this.singleSelect){
41103                 this.clearSelections();
41104             }
41105             var r = this.grid.ds.getAt(index);
41106             this.selections.add(r);
41107             this.last = this.lastActive = index;
41108             if(!preventViewNotify){
41109                 var view = this.grid.view ? this.grid.view : this.grid;
41110                 view.onRowSelect(index);
41111             }
41112             this.fireEvent("rowselect", this, index, r);
41113             this.fireEvent("selectionchange", this);
41114         }
41115     },
41116
41117     /**
41118      * Deselects a row.
41119      * @param {Number} row The index of the row to deselect
41120      */
41121     deselectRow : function(index, preventViewNotify){
41122         if(this.locked) {
41123             return;
41124         }
41125         if(this.last == index){
41126             this.last = false;
41127         }
41128         if(this.lastActive == index){
41129             this.lastActive = false;
41130         }
41131         var r = this.grid.ds.getAt(index);
41132         this.selections.remove(r);
41133         if(!preventViewNotify){
41134             var view = this.grid.view ? this.grid.view : this.grid;
41135             view.onRowDeselect(index);
41136         }
41137         this.fireEvent("rowdeselect", this, index);
41138         this.fireEvent("selectionchange", this);
41139     },
41140
41141     // private
41142     restoreLast : function(){
41143         if(this._last){
41144             this.last = this._last;
41145         }
41146     },
41147
41148     // private
41149     acceptsNav : function(row, col, cm){
41150         return !cm.isHidden(col) && cm.isCellEditable(col, row);
41151     },
41152
41153     // private
41154     onEditorKey : function(field, e){
41155         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
41156         if(k == e.TAB){
41157             e.stopEvent();
41158             ed.completeEdit();
41159             if(e.shiftKey){
41160                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
41161             }else{
41162                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
41163             }
41164         }else if(k == e.ENTER && !e.ctrlKey){
41165             e.stopEvent();
41166             ed.completeEdit();
41167             if(e.shiftKey){
41168                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
41169             }else{
41170                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
41171             }
41172         }else if(k == e.ESC){
41173             ed.cancelEdit();
41174         }
41175         if(newCell){
41176             g.startEditing(newCell[0], newCell[1]);
41177         }
41178     }
41179 });/*
41180  * Based on:
41181  * Ext JS Library 1.1.1
41182  * Copyright(c) 2006-2007, Ext JS, LLC.
41183  *
41184  * Originally Released Under LGPL - original licence link has changed is not relivant.
41185  *
41186  * Fork - LGPL
41187  * <script type="text/javascript">
41188  */
41189 /**
41190  * @class Roo.grid.CellSelectionModel
41191  * @extends Roo.grid.AbstractSelectionModel
41192  * This class provides the basic implementation for cell selection in a grid.
41193  * @constructor
41194  * @param {Object} config The object containing the configuration of this model.
41195  * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
41196  */
41197 Roo.grid.CellSelectionModel = function(config){
41198     Roo.apply(this, config);
41199
41200     this.selection = null;
41201
41202     this.addEvents({
41203         /**
41204              * @event beforerowselect
41205              * Fires before a cell is selected.
41206              * @param {SelectionModel} this
41207              * @param {Number} rowIndex The selected row index
41208              * @param {Number} colIndex The selected cell index
41209              */
41210             "beforecellselect" : true,
41211         /**
41212              * @event cellselect
41213              * Fires when a cell is selected.
41214              * @param {SelectionModel} this
41215              * @param {Number} rowIndex The selected row index
41216              * @param {Number} colIndex The selected cell index
41217              */
41218             "cellselect" : true,
41219         /**
41220              * @event selectionchange
41221              * Fires when the active selection changes.
41222              * @param {SelectionModel} this
41223              * @param {Object} selection null for no selection or an object (o) with two properties
41224                 <ul>
41225                 <li>o.record: the record object for the row the selection is in</li>
41226                 <li>o.cell: An array of [rowIndex, columnIndex]</li>
41227                 </ul>
41228              */
41229             "selectionchange" : true,
41230         /**
41231              * @event tabend
41232              * Fires when the tab (or enter) was pressed on the last editable cell
41233              * You can use this to trigger add new row.
41234              * @param {SelectionModel} this
41235              */
41236             "tabend" : true,
41237          /**
41238              * @event beforeeditnext
41239              * Fires before the next editable sell is made active
41240              * You can use this to skip to another cell or fire the tabend
41241              *    if you set cell to false
41242              * @param {Object} eventdata object : { cell : [ row, col ] } 
41243              */
41244             "beforeeditnext" : true
41245     });
41246     Roo.grid.CellSelectionModel.superclass.constructor.call(this);
41247 };
41248
41249 Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
41250     
41251     enter_is_tab: false,
41252
41253     /** @ignore */
41254     initEvents : function(){
41255         this.grid.on("mousedown", this.handleMouseDown, this);
41256         this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
41257         var view = this.grid.view;
41258         view.on("refresh", this.onViewChange, this);
41259         view.on("rowupdated", this.onRowUpdated, this);
41260         view.on("beforerowremoved", this.clearSelections, this);
41261         view.on("beforerowsinserted", this.clearSelections, this);
41262         if(this.grid.isEditor){
41263             this.grid.on("beforeedit", this.beforeEdit,  this);
41264         }
41265     },
41266
41267         //private
41268     beforeEdit : function(e){
41269         this.select(e.row, e.column, false, true, e.record);
41270     },
41271
41272         //private
41273     onRowUpdated : function(v, index, r){
41274         if(this.selection && this.selection.record == r){
41275             v.onCellSelect(index, this.selection.cell[1]);
41276         }
41277     },
41278
41279         //private
41280     onViewChange : function(){
41281         this.clearSelections(true);
41282     },
41283
41284         /**
41285          * Returns the currently selected cell,.
41286          * @return {Array} The selected cell (row, column) or null if none selected.
41287          */
41288     getSelectedCell : function(){
41289         return this.selection ? this.selection.cell : null;
41290     },
41291
41292     /**
41293      * Clears all selections.
41294      * @param {Boolean} true to prevent the gridview from being notified about the change.
41295      */
41296     clearSelections : function(preventNotify){
41297         var s = this.selection;
41298         if(s){
41299             if(preventNotify !== true){
41300                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
41301             }
41302             this.selection = null;
41303             this.fireEvent("selectionchange", this, null);
41304         }
41305     },
41306
41307     /**
41308      * Returns true if there is a selection.
41309      * @return {Boolean}
41310      */
41311     hasSelection : function(){
41312         return this.selection ? true : false;
41313     },
41314
41315     /** @ignore */
41316     handleMouseDown : function(e, t){
41317         var v = this.grid.getView();
41318         if(this.isLocked()){
41319             return;
41320         };
41321         var row = v.findRowIndex(t);
41322         var cell = v.findCellIndex(t);
41323         if(row !== false && cell !== false){
41324             this.select(row, cell);
41325         }
41326     },
41327
41328     /**
41329      * Selects a cell.
41330      * @param {Number} rowIndex
41331      * @param {Number} collIndex
41332      */
41333     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
41334         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
41335             this.clearSelections();
41336             r = r || this.grid.dataSource.getAt(rowIndex);
41337             this.selection = {
41338                 record : r,
41339                 cell : [rowIndex, colIndex]
41340             };
41341             if(!preventViewNotify){
41342                 var v = this.grid.getView();
41343                 v.onCellSelect(rowIndex, colIndex);
41344                 if(preventFocus !== true){
41345                     v.focusCell(rowIndex, colIndex);
41346                 }
41347             }
41348             this.fireEvent("cellselect", this, rowIndex, colIndex);
41349             this.fireEvent("selectionchange", this, this.selection);
41350         }
41351     },
41352
41353         //private
41354     isSelectable : function(rowIndex, colIndex, cm){
41355         return !cm.isHidden(colIndex);
41356     },
41357
41358     /** @ignore */
41359     handleKeyDown : function(e){
41360         //Roo.log('Cell Sel Model handleKeyDown');
41361         if(!e.isNavKeyPress()){
41362             return;
41363         }
41364         var g = this.grid, s = this.selection;
41365         if(!s){
41366             e.stopEvent();
41367             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
41368             if(cell){
41369                 this.select(cell[0], cell[1]);
41370             }
41371             return;
41372         }
41373         var sm = this;
41374         var walk = function(row, col, step){
41375             return g.walkCells(row, col, step, sm.isSelectable,  sm);
41376         };
41377         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
41378         var newCell;
41379
41380       
41381
41382         switch(k){
41383             case e.TAB:
41384                 // handled by onEditorKey
41385                 if (g.isEditor && g.editing) {
41386                     return;
41387                 }
41388                 if(e.shiftKey) {
41389                     newCell = walk(r, c-1, -1);
41390                 } else {
41391                     newCell = walk(r, c+1, 1);
41392                 }
41393                 break;
41394             
41395             case e.DOWN:
41396                newCell = walk(r+1, c, 1);
41397                 break;
41398             
41399             case e.UP:
41400                 newCell = walk(r-1, c, -1);
41401                 break;
41402             
41403             case e.RIGHT:
41404                 newCell = walk(r, c+1, 1);
41405                 break;
41406             
41407             case e.LEFT:
41408                 newCell = walk(r, c-1, -1);
41409                 break;
41410             
41411             case e.ENTER:
41412                 
41413                 if(g.isEditor && !g.editing){
41414                    g.startEditing(r, c);
41415                    e.stopEvent();
41416                    return;
41417                 }
41418                 
41419                 
41420              break;
41421         };
41422         if(newCell){
41423             this.select(newCell[0], newCell[1]);
41424             e.stopEvent();
41425             
41426         }
41427     },
41428
41429     acceptsNav : function(row, col, cm){
41430         return !cm.isHidden(col) && cm.isCellEditable(col, row);
41431     },
41432     /**
41433      * Selects a cell.
41434      * @param {Number} field (not used) - as it's normally used as a listener
41435      * @param {Number} e - event - fake it by using
41436      *
41437      * var e = Roo.EventObjectImpl.prototype;
41438      * e.keyCode = e.TAB
41439      *
41440      * 
41441      */
41442     onEditorKey : function(field, e){
41443         
41444         var k = e.getKey(),
41445             newCell,
41446             g = this.grid,
41447             ed = g.activeEditor,
41448             forward = false;
41449         ///Roo.log('onEditorKey' + k);
41450         
41451         
41452         if (this.enter_is_tab && k == e.ENTER) {
41453             k = e.TAB;
41454         }
41455         
41456         if(k == e.TAB){
41457             if(e.shiftKey){
41458                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
41459             }else{
41460                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
41461                 forward = true;
41462             }
41463             
41464             e.stopEvent();
41465             
41466         } else if(k == e.ENTER &&  !e.ctrlKey){
41467             ed.completeEdit();
41468             e.stopEvent();
41469             newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
41470         
41471                 } else if(k == e.ESC){
41472             ed.cancelEdit();
41473         }
41474                 
41475         if (newCell) {
41476             var ecall = { cell : newCell, forward : forward };
41477             this.fireEvent('beforeeditnext', ecall );
41478             newCell = ecall.cell;
41479                         forward = ecall.forward;
41480         }
41481                 
41482         if(newCell){
41483             //Roo.log('next cell after edit');
41484             g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
41485         } else if (forward) {
41486             // tabbed past last
41487             this.fireEvent.defer(100, this, ['tabend',this]);
41488         }
41489     }
41490 });/*
41491  * Based on:
41492  * Ext JS Library 1.1.1
41493  * Copyright(c) 2006-2007, Ext JS, LLC.
41494  *
41495  * Originally Released Under LGPL - original licence link has changed is not relivant.
41496  *
41497  * Fork - LGPL
41498  * <script type="text/javascript">
41499  */
41500  
41501 /**
41502  * @class Roo.grid.EditorGrid
41503  * @extends Roo.grid.Grid
41504  * Class for creating and editable grid.
41505  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
41506  * The container MUST have some type of size defined for the grid to fill. The container will be 
41507  * automatically set to position relative if it isn't already.
41508  * @param {Object} dataSource The data model to bind to
41509  * @param {Object} colModel The column model with info about this grid's columns
41510  */
41511 Roo.grid.EditorGrid = function(container, config){
41512     Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
41513     this.getGridEl().addClass("xedit-grid");
41514
41515     if(!this.selModel){
41516         this.selModel = new Roo.grid.CellSelectionModel();
41517     }
41518
41519     this.activeEditor = null;
41520
41521         this.addEvents({
41522             /**
41523              * @event beforeedit
41524              * Fires before cell editing is triggered. The edit event object has the following properties <br />
41525              * <ul style="padding:5px;padding-left:16px;">
41526              * <li>grid - This grid</li>
41527              * <li>record - The record being edited</li>
41528              * <li>field - The field name being edited</li>
41529              * <li>value - The value for the field being edited.</li>
41530              * <li>row - The grid row index</li>
41531              * <li>column - The grid column index</li>
41532              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
41533              * </ul>
41534              * @param {Object} e An edit event (see above for description)
41535              */
41536             "beforeedit" : true,
41537             /**
41538              * @event afteredit
41539              * Fires after a cell is edited. <br />
41540              * <ul style="padding:5px;padding-left:16px;">
41541              * <li>grid - This grid</li>
41542              * <li>record - The record being edited</li>
41543              * <li>field - The field name being edited</li>
41544              * <li>value - The value being set</li>
41545              * <li>originalValue - The original value for the field, before the edit.</li>
41546              * <li>row - The grid row index</li>
41547              * <li>column - The grid column index</li>
41548              * </ul>
41549              * @param {Object} e An edit event (see above for description)
41550              */
41551             "afteredit" : true,
41552             /**
41553              * @event validateedit
41554              * Fires after a cell is edited, but before the value is set in the record. 
41555          * You can use this to modify the value being set in the field, Return false
41556              * to cancel the change. The edit event object has the following properties <br />
41557              * <ul style="padding:5px;padding-left:16px;">
41558          * <li>editor - This editor</li>
41559              * <li>grid - This grid</li>
41560              * <li>record - The record being edited</li>
41561              * <li>field - The field name being edited</li>
41562              * <li>value - The value being set</li>
41563              * <li>originalValue - The original value for the field, before the edit.</li>
41564              * <li>row - The grid row index</li>
41565              * <li>column - The grid column index</li>
41566              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
41567              * </ul>
41568              * @param {Object} e An edit event (see above for description)
41569              */
41570             "validateedit" : true
41571         });
41572     this.on("bodyscroll", this.stopEditing,  this);
41573     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
41574 };
41575
41576 Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
41577     /**
41578      * @cfg {Number} clicksToEdit
41579      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
41580      */
41581     clicksToEdit: 2,
41582
41583     // private
41584     isEditor : true,
41585     // private
41586     trackMouseOver: false, // causes very odd FF errors
41587
41588     onCellDblClick : function(g, row, col){
41589         this.startEditing(row, col);
41590     },
41591
41592     onEditComplete : function(ed, value, startValue){
41593         this.editing = false;
41594         this.activeEditor = null;
41595         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
41596         var r = ed.record;
41597         var field = this.colModel.getDataIndex(ed.col);
41598         var e = {
41599             grid: this,
41600             record: r,
41601             field: field,
41602             originalValue: startValue,
41603             value: value,
41604             row: ed.row,
41605             column: ed.col,
41606             cancel:false,
41607             editor: ed
41608         };
41609         var cell = Roo.get(this.view.getCell(ed.row,ed.col));
41610         cell.show();
41611           
41612         if(String(value) !== String(startValue)){
41613             
41614             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
41615                 r.set(field, e.value);
41616                 // if we are dealing with a combo box..
41617                 // then we also set the 'name' colum to be the displayField
41618                 if (ed.field.displayField && ed.field.name) {
41619                     r.set(ed.field.name, ed.field.el.dom.value);
41620                 }
41621                 
41622                 delete e.cancel; //?? why!!!
41623                 this.fireEvent("afteredit", e);
41624             }
41625         } else {
41626             this.fireEvent("afteredit", e); // always fire it!
41627         }
41628         this.view.focusCell(ed.row, ed.col);
41629     },
41630
41631     /**
41632      * Starts editing the specified for the specified row/column
41633      * @param {Number} rowIndex
41634      * @param {Number} colIndex
41635      */
41636     startEditing : function(row, col){
41637         this.stopEditing();
41638         if(this.colModel.isCellEditable(col, row)){
41639             this.view.ensureVisible(row, col, true);
41640           
41641             var r = this.dataSource.getAt(row);
41642             var field = this.colModel.getDataIndex(col);
41643             var cell = Roo.get(this.view.getCell(row,col));
41644             var e = {
41645                 grid: this,
41646                 record: r,
41647                 field: field,
41648                 value: r.data[field],
41649                 row: row,
41650                 column: col,
41651                 cancel:false 
41652             };
41653             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
41654                 this.editing = true;
41655                 var ed = this.colModel.getCellEditor(col, row);
41656                 
41657                 if (!ed) {
41658                     return;
41659                 }
41660                 if(!ed.rendered){
41661                     ed.render(ed.parentEl || document.body);
41662                 }
41663                 ed.field.reset();
41664                
41665                 cell.hide();
41666                 
41667                 (function(){ // complex but required for focus issues in safari, ie and opera
41668                     ed.row = row;
41669                     ed.col = col;
41670                     ed.record = r;
41671                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
41672                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
41673                     this.activeEditor = ed;
41674                     var v = r.data[field];
41675                     ed.startEdit(this.view.getCell(row, col), v);
41676                     // combo's with 'displayField and name set
41677                     if (ed.field.displayField && ed.field.name) {
41678                         ed.field.el.dom.value = r.data[ed.field.name];
41679                     }
41680                     
41681                     
41682                 }).defer(50, this);
41683             }
41684         }
41685     },
41686         
41687     /**
41688      * Stops any active editing
41689      */
41690     stopEditing : function(){
41691         if(this.activeEditor){
41692             this.activeEditor.completeEdit();
41693         }
41694         this.activeEditor = null;
41695     },
41696         
41697          /**
41698      * Called to get grid's drag proxy text, by default returns this.ddText.
41699      * @return {String}
41700      */
41701     getDragDropText : function(){
41702         var count = this.selModel.getSelectedCell() ? 1 : 0;
41703         return String.format(this.ddText, count, count == 1 ? '' : 's');
41704     }
41705         
41706 });/*
41707  * Based on:
41708  * Ext JS Library 1.1.1
41709  * Copyright(c) 2006-2007, Ext JS, LLC.
41710  *
41711  * Originally Released Under LGPL - original licence link has changed is not relivant.
41712  *
41713  * Fork - LGPL
41714  * <script type="text/javascript">
41715  */
41716
41717 // private - not really -- you end up using it !
41718 // This is a support class used internally by the Grid components
41719
41720 /**
41721  * @class Roo.grid.GridEditor
41722  * @extends Roo.Editor
41723  * Class for creating and editable grid elements.
41724  * @param {Object} config any settings (must include field)
41725  */
41726 Roo.grid.GridEditor = function(field, config){
41727     if (!config && field.field) {
41728         config = field;
41729         field = Roo.factory(config.field, Roo.form);
41730     }
41731     Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
41732     field.monitorTab = false;
41733 };
41734
41735 Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
41736     
41737     /**
41738      * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
41739      */
41740     
41741     alignment: "tl-tl",
41742     autoSize: "width",
41743     hideEl : false,
41744     cls: "x-small-editor x-grid-editor",
41745     shim:false,
41746     shadow:"frame"
41747 });/*
41748  * Based on:
41749  * Ext JS Library 1.1.1
41750  * Copyright(c) 2006-2007, Ext JS, LLC.
41751  *
41752  * Originally Released Under LGPL - original licence link has changed is not relivant.
41753  *
41754  * Fork - LGPL
41755  * <script type="text/javascript">
41756  */
41757   
41758
41759   
41760 Roo.grid.PropertyRecord = Roo.data.Record.create([
41761     {name:'name',type:'string'},  'value'
41762 ]);
41763
41764
41765 Roo.grid.PropertyStore = function(grid, source){
41766     this.grid = grid;
41767     this.store = new Roo.data.Store({
41768         recordType : Roo.grid.PropertyRecord
41769     });
41770     this.store.on('update', this.onUpdate,  this);
41771     if(source){
41772         this.setSource(source);
41773     }
41774     Roo.grid.PropertyStore.superclass.constructor.call(this);
41775 };
41776
41777
41778
41779 Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
41780     setSource : function(o){
41781         this.source = o;
41782         this.store.removeAll();
41783         var data = [];
41784         for(var k in o){
41785             if(this.isEditableValue(o[k])){
41786                 data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
41787             }
41788         }
41789         this.store.loadRecords({records: data}, {}, true);
41790     },
41791
41792     onUpdate : function(ds, record, type){
41793         if(type == Roo.data.Record.EDIT){
41794             var v = record.data['value'];
41795             var oldValue = record.modified['value'];
41796             if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
41797                 this.source[record.id] = v;
41798                 record.commit();
41799                 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
41800             }else{
41801                 record.reject();
41802             }
41803         }
41804     },
41805
41806     getProperty : function(row){
41807        return this.store.getAt(row);
41808     },
41809
41810     isEditableValue: function(val){
41811         if(val && val instanceof Date){
41812             return true;
41813         }else if(typeof val == 'object' || typeof val == 'function'){
41814             return false;
41815         }
41816         return true;
41817     },
41818
41819     setValue : function(prop, value){
41820         this.source[prop] = value;
41821         this.store.getById(prop).set('value', value);
41822     },
41823
41824     getSource : function(){
41825         return this.source;
41826     }
41827 });
41828
41829 Roo.grid.PropertyColumnModel = function(grid, store){
41830     this.grid = grid;
41831     var g = Roo.grid;
41832     g.PropertyColumnModel.superclass.constructor.call(this, [
41833         {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
41834         {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
41835     ]);
41836     this.store = store;
41837     this.bselect = Roo.DomHelper.append(document.body, {
41838         tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
41839             {tag: 'option', value: 'true', html: 'true'},
41840             {tag: 'option', value: 'false', html: 'false'}
41841         ]
41842     });
41843     Roo.id(this.bselect);
41844     var f = Roo.form;
41845     this.editors = {
41846         'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
41847         'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
41848         'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
41849         'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
41850         'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
41851     };
41852     this.renderCellDelegate = this.renderCell.createDelegate(this);
41853     this.renderPropDelegate = this.renderProp.createDelegate(this);
41854 };
41855
41856 Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
41857     
41858     
41859     nameText : 'Name',
41860     valueText : 'Value',
41861     
41862     dateFormat : 'm/j/Y',
41863     
41864     
41865     renderDate : function(dateVal){
41866         return dateVal.dateFormat(this.dateFormat);
41867     },
41868
41869     renderBool : function(bVal){
41870         return bVal ? 'true' : 'false';
41871     },
41872
41873     isCellEditable : function(colIndex, rowIndex){
41874         return colIndex == 1;
41875     },
41876
41877     getRenderer : function(col){
41878         return col == 1 ?
41879             this.renderCellDelegate : this.renderPropDelegate;
41880     },
41881
41882     renderProp : function(v){
41883         return this.getPropertyName(v);
41884     },
41885
41886     renderCell : function(val){
41887         var rv = val;
41888         if(val instanceof Date){
41889             rv = this.renderDate(val);
41890         }else if(typeof val == 'boolean'){
41891             rv = this.renderBool(val);
41892         }
41893         return Roo.util.Format.htmlEncode(rv);
41894     },
41895
41896     getPropertyName : function(name){
41897         var pn = this.grid.propertyNames;
41898         return pn && pn[name] ? pn[name] : name;
41899     },
41900
41901     getCellEditor : function(colIndex, rowIndex){
41902         var p = this.store.getProperty(rowIndex);
41903         var n = p.data['name'], val = p.data['value'];
41904         
41905         if(typeof(this.grid.customEditors[n]) == 'string'){
41906             return this.editors[this.grid.customEditors[n]];
41907         }
41908         if(typeof(this.grid.customEditors[n]) != 'undefined'){
41909             return this.grid.customEditors[n];
41910         }
41911         if(val instanceof Date){
41912             return this.editors['date'];
41913         }else if(typeof val == 'number'){
41914             return this.editors['number'];
41915         }else if(typeof val == 'boolean'){
41916             return this.editors['boolean'];
41917         }else{
41918             return this.editors['string'];
41919         }
41920     }
41921 });
41922
41923 /**
41924  * @class Roo.grid.PropertyGrid
41925  * @extends Roo.grid.EditorGrid
41926  * This class represents the  interface of a component based property grid control.
41927  * <br><br>Usage:<pre><code>
41928  var grid = new Roo.grid.PropertyGrid("my-container-id", {
41929       
41930  });
41931  // set any options
41932  grid.render();
41933  * </code></pre>
41934   
41935  * @constructor
41936  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
41937  * The container MUST have some type of size defined for the grid to fill. The container will be
41938  * automatically set to position relative if it isn't already.
41939  * @param {Object} config A config object that sets properties on this grid.
41940  */
41941 Roo.grid.PropertyGrid = function(container, config){
41942     config = config || {};
41943     var store = new Roo.grid.PropertyStore(this);
41944     this.store = store;
41945     var cm = new Roo.grid.PropertyColumnModel(this, store);
41946     store.store.sort('name', 'ASC');
41947     Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
41948         ds: store.store,
41949         cm: cm,
41950         enableColLock:false,
41951         enableColumnMove:false,
41952         stripeRows:false,
41953         trackMouseOver: false,
41954         clicksToEdit:1
41955     }, config));
41956     this.getGridEl().addClass('x-props-grid');
41957     this.lastEditRow = null;
41958     this.on('columnresize', this.onColumnResize, this);
41959     this.addEvents({
41960          /**
41961              * @event beforepropertychange
41962              * Fires before a property changes (return false to stop?)
41963              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
41964              * @param {String} id Record Id
41965              * @param {String} newval New Value
41966          * @param {String} oldval Old Value
41967              */
41968         "beforepropertychange": true,
41969         /**
41970              * @event propertychange
41971              * Fires after a property changes
41972              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
41973              * @param {String} id Record Id
41974              * @param {String} newval New Value
41975          * @param {String} oldval Old Value
41976              */
41977         "propertychange": true
41978     });
41979     this.customEditors = this.customEditors || {};
41980 };
41981 Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
41982     
41983      /**
41984      * @cfg {Object} customEditors map of colnames=> custom editors.
41985      * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
41986      * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
41987      * false disables editing of the field.
41988          */
41989     
41990       /**
41991      * @cfg {Object} propertyNames map of property Names to their displayed value
41992          */
41993     
41994     render : function(){
41995         Roo.grid.PropertyGrid.superclass.render.call(this);
41996         this.autoSize.defer(100, this);
41997     },
41998
41999     autoSize : function(){
42000         Roo.grid.PropertyGrid.superclass.autoSize.call(this);
42001         if(this.view){
42002             this.view.fitColumns();
42003         }
42004     },
42005
42006     onColumnResize : function(){
42007         this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
42008         this.autoSize();
42009     },
42010     /**
42011      * Sets the data for the Grid
42012      * accepts a Key => Value object of all the elements avaiable.
42013      * @param {Object} data  to appear in grid.
42014      */
42015     setSource : function(source){
42016         this.store.setSource(source);
42017         //this.autoSize();
42018     },
42019     /**
42020      * Gets all the data from the grid.
42021      * @return {Object} data  data stored in grid
42022      */
42023     getSource : function(){
42024         return this.store.getSource();
42025     }
42026 });/*
42027   
42028  * Licence LGPL
42029  
42030  */
42031  
42032 /**
42033  * @class Roo.grid.Calendar
42034  * @extends Roo.grid.Grid
42035  * This class extends the Grid to provide a calendar widget
42036  * <br><br>Usage:<pre><code>
42037  var grid = new Roo.grid.Calendar("my-container-id", {
42038      ds: myDataStore,
42039      cm: myColModel,
42040      selModel: mySelectionModel,
42041      autoSizeColumns: true,
42042      monitorWindowResize: false,
42043      trackMouseOver: true
42044      eventstore : real data store..
42045  });
42046  // set any options
42047  grid.render();
42048   
42049   * @constructor
42050  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
42051  * The container MUST have some type of size defined for the grid to fill. The container will be
42052  * automatically set to position relative if it isn't already.
42053  * @param {Object} config A config object that sets properties on this grid.
42054  */
42055 Roo.grid.Calendar = function(container, config){
42056         // initialize the container
42057         this.container = Roo.get(container);
42058         this.container.update("");
42059         this.container.setStyle("overflow", "hidden");
42060     this.container.addClass('x-grid-container');
42061
42062     this.id = this.container.id;
42063
42064     Roo.apply(this, config);
42065     // check and correct shorthanded configs
42066     
42067     var rows = [];
42068     var d =1;
42069     for (var r = 0;r < 6;r++) {
42070         
42071         rows[r]=[];
42072         for (var c =0;c < 7;c++) {
42073             rows[r][c]= '';
42074         }
42075     }
42076     if (this.eventStore) {
42077         this.eventStore= Roo.factory(this.eventStore, Roo.data);
42078         this.eventStore.on('load',this.onLoad, this);
42079         this.eventStore.on('beforeload',this.clearEvents, this);
42080          
42081     }
42082     
42083     this.dataSource = new Roo.data.Store({
42084             proxy: new Roo.data.MemoryProxy(rows),
42085             reader: new Roo.data.ArrayReader({}, [
42086                    'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
42087     });
42088
42089     this.dataSource.load();
42090     this.ds = this.dataSource;
42091     this.ds.xmodule = this.xmodule || false;
42092     
42093     
42094     var cellRender = function(v,x,r)
42095     {
42096         return String.format(
42097             '<div class="fc-day  fc-widget-content"><div>' +
42098                 '<div class="fc-event-container"></div>' +
42099                 '<div class="fc-day-number">{0}</div>'+
42100                 
42101                 '<div class="fc-day-content"><div style="position:relative"></div></div>' +
42102             '</div></div>', v);
42103     
42104     }
42105     
42106     
42107     this.colModel = new Roo.grid.ColumnModel( [
42108         {
42109             xtype: 'ColumnModel',
42110             xns: Roo.grid,
42111             dataIndex : 'weekday0',
42112             header : 'Sunday',
42113             renderer : cellRender
42114         },
42115         {
42116             xtype: 'ColumnModel',
42117             xns: Roo.grid,
42118             dataIndex : 'weekday1',
42119             header : 'Monday',
42120             renderer : cellRender
42121         },
42122         {
42123             xtype: 'ColumnModel',
42124             xns: Roo.grid,
42125             dataIndex : 'weekday2',
42126             header : 'Tuesday',
42127             renderer : cellRender
42128         },
42129         {
42130             xtype: 'ColumnModel',
42131             xns: Roo.grid,
42132             dataIndex : 'weekday3',
42133             header : 'Wednesday',
42134             renderer : cellRender
42135         },
42136         {
42137             xtype: 'ColumnModel',
42138             xns: Roo.grid,
42139             dataIndex : 'weekday4',
42140             header : 'Thursday',
42141             renderer : cellRender
42142         },
42143         {
42144             xtype: 'ColumnModel',
42145             xns: Roo.grid,
42146             dataIndex : 'weekday5',
42147             header : 'Friday',
42148             renderer : cellRender
42149         },
42150         {
42151             xtype: 'ColumnModel',
42152             xns: Roo.grid,
42153             dataIndex : 'weekday6',
42154             header : 'Saturday',
42155             renderer : cellRender
42156         }
42157     ]);
42158     this.cm = this.colModel;
42159     this.cm.xmodule = this.xmodule || false;
42160  
42161         
42162           
42163     //this.selModel = new Roo.grid.CellSelectionModel();
42164     //this.sm = this.selModel;
42165     //this.selModel.init(this);
42166     
42167     
42168     if(this.width){
42169         this.container.setWidth(this.width);
42170     }
42171
42172     if(this.height){
42173         this.container.setHeight(this.height);
42174     }
42175     /** @private */
42176         this.addEvents({
42177         // raw events
42178         /**
42179          * @event click
42180          * The raw click event for the entire grid.
42181          * @param {Roo.EventObject} e
42182          */
42183         "click" : true,
42184         /**
42185          * @event dblclick
42186          * The raw dblclick event for the entire grid.
42187          * @param {Roo.EventObject} e
42188          */
42189         "dblclick" : true,
42190         /**
42191          * @event contextmenu
42192          * The raw contextmenu event for the entire grid.
42193          * @param {Roo.EventObject} e
42194          */
42195         "contextmenu" : true,
42196         /**
42197          * @event mousedown
42198          * The raw mousedown event for the entire grid.
42199          * @param {Roo.EventObject} e
42200          */
42201         "mousedown" : true,
42202         /**
42203          * @event mouseup
42204          * The raw mouseup event for the entire grid.
42205          * @param {Roo.EventObject} e
42206          */
42207         "mouseup" : true,
42208         /**
42209          * @event mouseover
42210          * The raw mouseover event for the entire grid.
42211          * @param {Roo.EventObject} e
42212          */
42213         "mouseover" : true,
42214         /**
42215          * @event mouseout
42216          * The raw mouseout event for the entire grid.
42217          * @param {Roo.EventObject} e
42218          */
42219         "mouseout" : true,
42220         /**
42221          * @event keypress
42222          * The raw keypress event for the entire grid.
42223          * @param {Roo.EventObject} e
42224          */
42225         "keypress" : true,
42226         /**
42227          * @event keydown
42228          * The raw keydown event for the entire grid.
42229          * @param {Roo.EventObject} e
42230          */
42231         "keydown" : true,
42232
42233         // custom events
42234
42235         /**
42236          * @event cellclick
42237          * Fires when a cell is clicked
42238          * @param {Grid} this
42239          * @param {Number} rowIndex
42240          * @param {Number} columnIndex
42241          * @param {Roo.EventObject} e
42242          */
42243         "cellclick" : true,
42244         /**
42245          * @event celldblclick
42246          * Fires when a cell is double clicked
42247          * @param {Grid} this
42248          * @param {Number} rowIndex
42249          * @param {Number} columnIndex
42250          * @param {Roo.EventObject} e
42251          */
42252         "celldblclick" : true,
42253         /**
42254          * @event rowclick
42255          * Fires when a row is clicked
42256          * @param {Grid} this
42257          * @param {Number} rowIndex
42258          * @param {Roo.EventObject} e
42259          */
42260         "rowclick" : true,
42261         /**
42262          * @event rowdblclick
42263          * Fires when a row is double clicked
42264          * @param {Grid} this
42265          * @param {Number} rowIndex
42266          * @param {Roo.EventObject} e
42267          */
42268         "rowdblclick" : true,
42269         /**
42270          * @event headerclick
42271          * Fires when a header is clicked
42272          * @param {Grid} this
42273          * @param {Number} columnIndex
42274          * @param {Roo.EventObject} e
42275          */
42276         "headerclick" : true,
42277         /**
42278          * @event headerdblclick
42279          * Fires when a header cell is double clicked
42280          * @param {Grid} this
42281          * @param {Number} columnIndex
42282          * @param {Roo.EventObject} e
42283          */
42284         "headerdblclick" : true,
42285         /**
42286          * @event rowcontextmenu
42287          * Fires when a row is right clicked
42288          * @param {Grid} this
42289          * @param {Number} rowIndex
42290          * @param {Roo.EventObject} e
42291          */
42292         "rowcontextmenu" : true,
42293         /**
42294          * @event cellcontextmenu
42295          * Fires when a cell is right clicked
42296          * @param {Grid} this
42297          * @param {Number} rowIndex
42298          * @param {Number} cellIndex
42299          * @param {Roo.EventObject} e
42300          */
42301          "cellcontextmenu" : true,
42302         /**
42303          * @event headercontextmenu
42304          * Fires when a header is right clicked
42305          * @param {Grid} this
42306          * @param {Number} columnIndex
42307          * @param {Roo.EventObject} e
42308          */
42309         "headercontextmenu" : true,
42310         /**
42311          * @event bodyscroll
42312          * Fires when the body element is scrolled
42313          * @param {Number} scrollLeft
42314          * @param {Number} scrollTop
42315          */
42316         "bodyscroll" : true,
42317         /**
42318          * @event columnresize
42319          * Fires when the user resizes a column
42320          * @param {Number} columnIndex
42321          * @param {Number} newSize
42322          */
42323         "columnresize" : true,
42324         /**
42325          * @event columnmove
42326          * Fires when the user moves a column
42327          * @param {Number} oldIndex
42328          * @param {Number} newIndex
42329          */
42330         "columnmove" : true,
42331         /**
42332          * @event startdrag
42333          * Fires when row(s) start being dragged
42334          * @param {Grid} this
42335          * @param {Roo.GridDD} dd The drag drop object
42336          * @param {event} e The raw browser event
42337          */
42338         "startdrag" : true,
42339         /**
42340          * @event enddrag
42341          * Fires when a drag operation is complete
42342          * @param {Grid} this
42343          * @param {Roo.GridDD} dd The drag drop object
42344          * @param {event} e The raw browser event
42345          */
42346         "enddrag" : true,
42347         /**
42348          * @event dragdrop
42349          * Fires when dragged row(s) are dropped on a valid DD target
42350          * @param {Grid} this
42351          * @param {Roo.GridDD} dd The drag drop object
42352          * @param {String} targetId The target drag drop object
42353          * @param {event} e The raw browser event
42354          */
42355         "dragdrop" : true,
42356         /**
42357          * @event dragover
42358          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
42359          * @param {Grid} this
42360          * @param {Roo.GridDD} dd The drag drop object
42361          * @param {String} targetId The target drag drop object
42362          * @param {event} e The raw browser event
42363          */
42364         "dragover" : true,
42365         /**
42366          * @event dragenter
42367          *  Fires when the dragged row(s) first cross another DD target while being dragged
42368          * @param {Grid} this
42369          * @param {Roo.GridDD} dd The drag drop object
42370          * @param {String} targetId The target drag drop object
42371          * @param {event} e The raw browser event
42372          */
42373         "dragenter" : true,
42374         /**
42375          * @event dragout
42376          * Fires when the dragged row(s) leave another DD target while being dragged
42377          * @param {Grid} this
42378          * @param {Roo.GridDD} dd The drag drop object
42379          * @param {String} targetId The target drag drop object
42380          * @param {event} e The raw browser event
42381          */
42382         "dragout" : true,
42383         /**
42384          * @event rowclass
42385          * Fires when a row is rendered, so you can change add a style to it.
42386          * @param {GridView} gridview   The grid view
42387          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
42388          */
42389         'rowclass' : true,
42390
42391         /**
42392          * @event render
42393          * Fires when the grid is rendered
42394          * @param {Grid} grid
42395          */
42396         'render' : true,
42397             /**
42398              * @event select
42399              * Fires when a date is selected
42400              * @param {DatePicker} this
42401              * @param {Date} date The selected date
42402              */
42403         'select': true,
42404         /**
42405              * @event monthchange
42406              * Fires when the displayed month changes 
42407              * @param {DatePicker} this
42408              * @param {Date} date The selected month
42409              */
42410         'monthchange': true,
42411         /**
42412              * @event evententer
42413              * Fires when mouse over an event
42414              * @param {Calendar} this
42415              * @param {event} Event
42416              */
42417         'evententer': true,
42418         /**
42419              * @event eventleave
42420              * Fires when the mouse leaves an
42421              * @param {Calendar} this
42422              * @param {event}
42423              */
42424         'eventleave': true,
42425         /**
42426              * @event eventclick
42427              * Fires when the mouse click an
42428              * @param {Calendar} this
42429              * @param {event}
42430              */
42431         'eventclick': true,
42432         /**
42433              * @event eventrender
42434              * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
42435              * @param {Calendar} this
42436              * @param {data} data to be modified
42437              */
42438         'eventrender': true
42439         
42440     });
42441
42442     Roo.grid.Grid.superclass.constructor.call(this);
42443     this.on('render', function() {
42444         this.view.el.addClass('x-grid-cal'); 
42445         
42446         (function() { this.setDate(new Date()); }).defer(100,this); //default today..
42447
42448     },this);
42449     
42450     if (!Roo.grid.Calendar.style) {
42451         Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
42452             
42453             
42454             '.x-grid-cal .x-grid-col' :  {
42455                 height: 'auto !important',
42456                 'vertical-align': 'top'
42457             },
42458             '.x-grid-cal  .fc-event-hori' : {
42459                 height: '14px'
42460             }
42461              
42462             
42463         }, Roo.id());
42464     }
42465
42466     
42467     
42468 };
42469 Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
42470     /**
42471      * @cfg {Store} eventStore The store that loads events.
42472      */
42473     eventStore : 25,
42474
42475      
42476     activeDate : false,
42477     startDay : 0,
42478     autoWidth : true,
42479     monitorWindowResize : false,
42480
42481     
42482     resizeColumns : function() {
42483         var col = (this.view.el.getWidth() / 7) - 3;
42484         // loop through cols, and setWidth
42485         for(var i =0 ; i < 7 ; i++){
42486             this.cm.setColumnWidth(i, col);
42487         }
42488     },
42489      setDate :function(date) {
42490         
42491         Roo.log('setDate?');
42492         
42493         this.resizeColumns();
42494         var vd = this.activeDate;
42495         this.activeDate = date;
42496 //        if(vd && this.el){
42497 //            var t = date.getTime();
42498 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
42499 //                Roo.log('using add remove');
42500 //                
42501 //                this.fireEvent('monthchange', this, date);
42502 //                
42503 //                this.cells.removeClass("fc-state-highlight");
42504 //                this.cells.each(function(c){
42505 //                   if(c.dateValue == t){
42506 //                       c.addClass("fc-state-highlight");
42507 //                       setTimeout(function(){
42508 //                            try{c.dom.firstChild.focus();}catch(e){}
42509 //                       }, 50);
42510 //                       return false;
42511 //                   }
42512 //                   return true;
42513 //                });
42514 //                return;
42515 //            }
42516 //        }
42517         
42518         var days = date.getDaysInMonth();
42519         
42520         var firstOfMonth = date.getFirstDateOfMonth();
42521         var startingPos = firstOfMonth.getDay()-this.startDay;
42522         
42523         if(startingPos < this.startDay){
42524             startingPos += 7;
42525         }
42526         
42527         var pm = date.add(Date.MONTH, -1);
42528         var prevStart = pm.getDaysInMonth()-startingPos;
42529 //        
42530         
42531         
42532         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
42533         
42534         this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
42535         //this.cells.addClassOnOver('fc-state-hover');
42536         
42537         var cells = this.cells.elements;
42538         var textEls = this.textNodes;
42539         
42540         //Roo.each(cells, function(cell){
42541         //    cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
42542         //});
42543         
42544         days += startingPos;
42545
42546         // convert everything to numbers so it's fast
42547         var day = 86400000;
42548         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
42549         //Roo.log(d);
42550         //Roo.log(pm);
42551         //Roo.log(prevStart);
42552         
42553         var today = new Date().clearTime().getTime();
42554         var sel = date.clearTime().getTime();
42555         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
42556         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
42557         var ddMatch = this.disabledDatesRE;
42558         var ddText = this.disabledDatesText;
42559         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
42560         var ddaysText = this.disabledDaysText;
42561         var format = this.format;
42562         
42563         var setCellClass = function(cal, cell){
42564             
42565             //Roo.log('set Cell Class');
42566             cell.title = "";
42567             var t = d.getTime();
42568             
42569             //Roo.log(d);
42570             
42571             
42572             cell.dateValue = t;
42573             if(t == today){
42574                 cell.className += " fc-today";
42575                 cell.className += " fc-state-highlight";
42576                 cell.title = cal.todayText;
42577             }
42578             if(t == sel){
42579                 // disable highlight in other month..
42580                 cell.className += " fc-state-highlight";
42581                 
42582             }
42583             // disabling
42584             if(t < min) {
42585                 //cell.className = " fc-state-disabled";
42586                 cell.title = cal.minText;
42587                 return;
42588             }
42589             if(t > max) {
42590                 //cell.className = " fc-state-disabled";
42591                 cell.title = cal.maxText;
42592                 return;
42593             }
42594             if(ddays){
42595                 if(ddays.indexOf(d.getDay()) != -1){
42596                     // cell.title = ddaysText;
42597                    // cell.className = " fc-state-disabled";
42598                 }
42599             }
42600             if(ddMatch && format){
42601                 var fvalue = d.dateFormat(format);
42602                 if(ddMatch.test(fvalue)){
42603                     cell.title = ddText.replace("%0", fvalue);
42604                    cell.className = " fc-state-disabled";
42605                 }
42606             }
42607             
42608             if (!cell.initialClassName) {
42609                 cell.initialClassName = cell.dom.className;
42610             }
42611             
42612             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
42613         };
42614
42615         var i = 0;
42616         
42617         for(; i < startingPos; i++) {
42618             cells[i].dayName =  (++prevStart);
42619             Roo.log(textEls[i]);
42620             d.setDate(d.getDate()+1);
42621             
42622             //cells[i].className = "fc-past fc-other-month";
42623             setCellClass(this, cells[i]);
42624         }
42625         
42626         var intDay = 0;
42627         
42628         for(; i < days; i++){
42629             intDay = i - startingPos + 1;
42630             cells[i].dayName =  (intDay);
42631             d.setDate(d.getDate()+1);
42632             
42633             cells[i].className = ''; // "x-date-active";
42634             setCellClass(this, cells[i]);
42635         }
42636         var extraDays = 0;
42637         
42638         for(; i < 42; i++) {
42639             //textEls[i].innerHTML = (++extraDays);
42640             
42641             d.setDate(d.getDate()+1);
42642             cells[i].dayName = (++extraDays);
42643             cells[i].className = "fc-future fc-other-month";
42644             setCellClass(this, cells[i]);
42645         }
42646         
42647         //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
42648         
42649         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
42650         
42651         // this will cause all the cells to mis
42652         var rows= [];
42653         var i =0;
42654         for (var r = 0;r < 6;r++) {
42655             for (var c =0;c < 7;c++) {
42656                 this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
42657             }    
42658         }
42659         
42660         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
42661         for(i=0;i<cells.length;i++) {
42662             
42663             this.cells.elements[i].dayName = cells[i].dayName ;
42664             this.cells.elements[i].className = cells[i].className;
42665             this.cells.elements[i].initialClassName = cells[i].initialClassName ;
42666             this.cells.elements[i].title = cells[i].title ;
42667             this.cells.elements[i].dateValue = cells[i].dateValue ;
42668         }
42669         
42670         
42671         
42672         
42673         //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
42674         //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
42675         
42676         ////if(totalRows != 6){
42677             //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
42678            // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
42679        // }
42680         
42681         this.fireEvent('monthchange', this, date);
42682         
42683         
42684     },
42685  /**
42686      * Returns the grid's SelectionModel.
42687      * @return {SelectionModel}
42688      */
42689     getSelectionModel : function(){
42690         if(!this.selModel){
42691             this.selModel = new Roo.grid.CellSelectionModel();
42692         }
42693         return this.selModel;
42694     },
42695
42696     load: function() {
42697         this.eventStore.load()
42698         
42699         
42700         
42701     },
42702     
42703     findCell : function(dt) {
42704         dt = dt.clearTime().getTime();
42705         var ret = false;
42706         this.cells.each(function(c){
42707             //Roo.log("check " +c.dateValue + '?=' + dt);
42708             if(c.dateValue == dt){
42709                 ret = c;
42710                 return false;
42711             }
42712             return true;
42713         });
42714         
42715         return ret;
42716     },
42717     
42718     findCells : function(rec) {
42719         var s = rec.data.start_dt.clone().clearTime().getTime();
42720        // Roo.log(s);
42721         var e= rec.data.end_dt.clone().clearTime().getTime();
42722        // Roo.log(e);
42723         var ret = [];
42724         this.cells.each(function(c){
42725              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
42726             
42727             if(c.dateValue > e){
42728                 return ;
42729             }
42730             if(c.dateValue < s){
42731                 return ;
42732             }
42733             ret.push(c);
42734         });
42735         
42736         return ret;    
42737     },
42738     
42739     findBestRow: function(cells)
42740     {
42741         var ret = 0;
42742         
42743         for (var i =0 ; i < cells.length;i++) {
42744             ret  = Math.max(cells[i].rows || 0,ret);
42745         }
42746         return ret;
42747         
42748     },
42749     
42750     
42751     addItem : function(rec)
42752     {
42753         // look for vertical location slot in
42754         var cells = this.findCells(rec);
42755         
42756         rec.row = this.findBestRow(cells);
42757         
42758         // work out the location.
42759         
42760         var crow = false;
42761         var rows = [];
42762         for(var i =0; i < cells.length; i++) {
42763             if (!crow) {
42764                 crow = {
42765                     start : cells[i],
42766                     end :  cells[i]
42767                 };
42768                 continue;
42769             }
42770             if (crow.start.getY() == cells[i].getY()) {
42771                 // on same row.
42772                 crow.end = cells[i];
42773                 continue;
42774             }
42775             // different row.
42776             rows.push(crow);
42777             crow = {
42778                 start: cells[i],
42779                 end : cells[i]
42780             };
42781             
42782         }
42783         
42784         rows.push(crow);
42785         rec.els = [];
42786         rec.rows = rows;
42787         rec.cells = cells;
42788         for (var i = 0; i < cells.length;i++) {
42789             cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
42790             
42791         }
42792         
42793         
42794     },
42795     
42796     clearEvents: function() {
42797         
42798         if (!this.eventStore.getCount()) {
42799             return;
42800         }
42801         // reset number of rows in cells.
42802         Roo.each(this.cells.elements, function(c){
42803             c.rows = 0;
42804         });
42805         
42806         this.eventStore.each(function(e) {
42807             this.clearEvent(e);
42808         },this);
42809         
42810     },
42811     
42812     clearEvent : function(ev)
42813     {
42814         if (ev.els) {
42815             Roo.each(ev.els, function(el) {
42816                 el.un('mouseenter' ,this.onEventEnter, this);
42817                 el.un('mouseleave' ,this.onEventLeave, this);
42818                 el.remove();
42819             },this);
42820             ev.els = [];
42821         }
42822     },
42823     
42824     
42825     renderEvent : function(ev,ctr) {
42826         if (!ctr) {
42827              ctr = this.view.el.select('.fc-event-container',true).first();
42828         }
42829         
42830          
42831         this.clearEvent(ev);
42832             //code
42833        
42834         
42835         
42836         ev.els = [];
42837         var cells = ev.cells;
42838         var rows = ev.rows;
42839         this.fireEvent('eventrender', this, ev);
42840         
42841         for(var i =0; i < rows.length; i++) {
42842             
42843             cls = '';
42844             if (i == 0) {
42845                 cls += ' fc-event-start';
42846             }
42847             if ((i+1) == rows.length) {
42848                 cls += ' fc-event-end';
42849             }
42850             
42851             //Roo.log(ev.data);
42852             // how many rows should it span..
42853             var cg = this.eventTmpl.append(ctr,Roo.apply({
42854                 fccls : cls
42855                 
42856             }, ev.data) , true);
42857             
42858             
42859             cg.on('mouseenter' ,this.onEventEnter, this, ev);
42860             cg.on('mouseleave' ,this.onEventLeave, this, ev);
42861             cg.on('click', this.onEventClick, this, ev);
42862             
42863             ev.els.push(cg);
42864             
42865             var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
42866             var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
42867             //Roo.log(cg);
42868              
42869             cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);    
42870             cg.setWidth(ebox.right - sbox.x -2);
42871         }
42872     },
42873     
42874     renderEvents: function()
42875     {   
42876         // first make sure there is enough space..
42877         
42878         if (!this.eventTmpl) {
42879             this.eventTmpl = new Roo.Template(
42880                 '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}"  style="position: absolute" unselectable="on">' +
42881                     '<div class="fc-event-inner">' +
42882                         '<span class="fc-event-time">{time}</span>' +
42883                         '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
42884                     '</div>' +
42885                     '<div class="ui-resizable-heandle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>' +
42886                 '</div>'
42887             );
42888                 
42889         }
42890                
42891         
42892         
42893         this.cells.each(function(c) {
42894             //Roo.log(c.select('.fc-day-content div',true).first());
42895             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
42896         });
42897         
42898         var ctr = this.view.el.select('.fc-event-container',true).first();
42899         
42900         var cls;
42901         this.eventStore.each(function(ev){
42902             
42903             this.renderEvent(ev);
42904              
42905              
42906         }, this);
42907         this.view.layout();
42908         
42909     },
42910     
42911     onEventEnter: function (e, el,event,d) {
42912         this.fireEvent('evententer', this, el, event);
42913     },
42914     
42915     onEventLeave: function (e, el,event,d) {
42916         this.fireEvent('eventleave', this, el, event);
42917     },
42918     
42919     onEventClick: function (e, el,event,d) {
42920         this.fireEvent('eventclick', this, el, event);
42921     },
42922     
42923     onMonthChange: function () {
42924         this.store.load();
42925     },
42926     
42927     onLoad: function () {
42928         
42929         //Roo.log('calendar onload');
42930 //         
42931         if(this.eventStore.getCount() > 0){
42932             
42933            
42934             
42935             this.eventStore.each(function(d){
42936                 
42937                 
42938                 // FIXME..
42939                 var add =   d.data;
42940                 if (typeof(add.end_dt) == 'undefined')  {
42941                     Roo.log("Missing End time in calendar data: ");
42942                     Roo.log(d);
42943                     return;
42944                 }
42945                 if (typeof(add.start_dt) == 'undefined')  {
42946                     Roo.log("Missing Start time in calendar data: ");
42947                     Roo.log(d);
42948                     return;
42949                 }
42950                 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
42951                 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
42952                 add.id = add.id || d.id;
42953                 add.title = add.title || '??';
42954                 
42955                 this.addItem(d);
42956                 
42957              
42958             },this);
42959         }
42960         
42961         this.renderEvents();
42962     }
42963     
42964
42965 });
42966 /*
42967  grid : {
42968                 xtype: 'Grid',
42969                 xns: Roo.grid,
42970                 listeners : {
42971                     render : function ()
42972                     {
42973                         _this.grid = this;
42974                         
42975                         if (!this.view.el.hasClass('course-timesheet')) {
42976                             this.view.el.addClass('course-timesheet');
42977                         }
42978                         if (this.tsStyle) {
42979                             this.ds.load({});
42980                             return; 
42981                         }
42982                         Roo.log('width');
42983                         Roo.log(_this.grid.view.el.getWidth());
42984                         
42985                         
42986                         this.tsStyle =  Roo.util.CSS.createStyleSheet({
42987                             '.course-timesheet .x-grid-row' : {
42988                                 height: '80px'
42989                             },
42990                             '.x-grid-row td' : {
42991                                 'vertical-align' : 0
42992                             },
42993                             '.course-edit-link' : {
42994                                 'color' : 'blue',
42995                                 'text-overflow' : 'ellipsis',
42996                                 'overflow' : 'hidden',
42997                                 'white-space' : 'nowrap',
42998                                 'cursor' : 'pointer'
42999                             },
43000                             '.sub-link' : {
43001                                 'color' : 'green'
43002                             },
43003                             '.de-act-sup-link' : {
43004                                 'color' : 'purple',
43005                                 'text-decoration' : 'line-through'
43006                             },
43007                             '.de-act-link' : {
43008                                 'color' : 'red',
43009                                 'text-decoration' : 'line-through'
43010                             },
43011                             '.course-timesheet .course-highlight' : {
43012                                 'border-top-style': 'dashed !important',
43013                                 'border-bottom-bottom': 'dashed !important'
43014                             },
43015                             '.course-timesheet .course-item' : {
43016                                 'font-family'   : 'tahoma, arial, helvetica',
43017                                 'font-size'     : '11px',
43018                                 'overflow'      : 'hidden',
43019                                 'padding-left'  : '10px',
43020                                 'padding-right' : '10px',
43021                                 'padding-top' : '10px' 
43022                             }
43023                             
43024                         }, Roo.id());
43025                                 this.ds.load({});
43026                     }
43027                 },
43028                 autoWidth : true,
43029                 monitorWindowResize : false,
43030                 cellrenderer : function(v,x,r)
43031                 {
43032                     return v;
43033                 },
43034                 sm : {
43035                     xtype: 'CellSelectionModel',
43036                     xns: Roo.grid
43037                 },
43038                 dataSource : {
43039                     xtype: 'Store',
43040                     xns: Roo.data,
43041                     listeners : {
43042                         beforeload : function (_self, options)
43043                         {
43044                             options.params = options.params || {};
43045                             options.params._month = _this.monthField.getValue();
43046                             options.params.limit = 9999;
43047                             options.params['sort'] = 'when_dt';    
43048                             options.params['dir'] = 'ASC';    
43049                             this.proxy.loadResponse = this.loadResponse;
43050                             Roo.log("load?");
43051                             //this.addColumns();
43052                         },
43053                         load : function (_self, records, options)
43054                         {
43055                             _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
43056                                 // if you click on the translation.. you can edit it...
43057                                 var el = Roo.get(this);
43058                                 var id = el.dom.getAttribute('data-id');
43059                                 var d = el.dom.getAttribute('data-date');
43060                                 var t = el.dom.getAttribute('data-time');
43061                                 //var id = this.child('span').dom.textContent;
43062                                 
43063                                 //Roo.log(this);
43064                                 Pman.Dialog.CourseCalendar.show({
43065                                     id : id,
43066                                     when_d : d,
43067                                     when_t : t,
43068                                     productitem_active : id ? 1 : 0
43069                                 }, function() {
43070                                     _this.grid.ds.load({});
43071                                 });
43072                            
43073                            });
43074                            
43075                            _this.panel.fireEvent('resize', [ '', '' ]);
43076                         }
43077                     },
43078                     loadResponse : function(o, success, response){
43079                             // this is overridden on before load..
43080                             
43081                             Roo.log("our code?");       
43082                             //Roo.log(success);
43083                             //Roo.log(response)
43084                             delete this.activeRequest;
43085                             if(!success){
43086                                 this.fireEvent("loadexception", this, o, response);
43087                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
43088                                 return;
43089                             }
43090                             var result;
43091                             try {
43092                                 result = o.reader.read(response);
43093                             }catch(e){
43094                                 Roo.log("load exception?");
43095                                 this.fireEvent("loadexception", this, o, response, e);
43096                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
43097                                 return;
43098                             }
43099                             Roo.log("ready...");        
43100                             // loop through result.records;
43101                             // and set this.tdate[date] = [] << array of records..
43102                             _this.tdata  = {};
43103                             Roo.each(result.records, function(r){
43104                                 //Roo.log(r.data);
43105                                 if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
43106                                     _this.tdata[r.data.when_dt.format('j')] = [];
43107                                 }
43108                                 _this.tdata[r.data.when_dt.format('j')].push(r.data);
43109                             });
43110                             
43111                             //Roo.log(_this.tdata);
43112                             
43113                             result.records = [];
43114                             result.totalRecords = 6;
43115                     
43116                             // let's generate some duumy records for the rows.
43117                             //var st = _this.dateField.getValue();
43118                             
43119                             // work out monday..
43120                             //st = st.add(Date.DAY, -1 * st.format('w'));
43121                             
43122                             var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
43123                             
43124                             var firstOfMonth = date.getFirstDayOfMonth();
43125                             var days = date.getDaysInMonth();
43126                             var d = 1;
43127                             var firstAdded = false;
43128                             for (var i = 0; i < result.totalRecords ; i++) {
43129                                 //var d= st.add(Date.DAY, i);
43130                                 var row = {};
43131                                 var added = 0;
43132                                 for(var w = 0 ; w < 7 ; w++){
43133                                     if(!firstAdded && firstOfMonth != w){
43134                                         continue;
43135                                     }
43136                                     if(d > days){
43137                                         continue;
43138                                     }
43139                                     firstAdded = true;
43140                                     var dd = (d > 0 && d < 10) ? "0"+d : d;
43141                                     row['weekday'+w] = String.format(
43142                                                     '<span style="font-size: 16px;"><b>{0}</b></span>'+
43143                                                     '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
43144                                                     d,
43145                                                     date.format('Y-m-')+dd
43146                                                 );
43147                                     added++;
43148                                     if(typeof(_this.tdata[d]) != 'undefined'){
43149                                         Roo.each(_this.tdata[d], function(r){
43150                                             var is_sub = '';
43151                                             var deactive = '';
43152                                             var id = r.id;
43153                                             var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
43154                                             if(r.parent_id*1>0){
43155                                                 is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
43156                                                 id = r.parent_id;
43157                                             }
43158                                             if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
43159                                                 deactive = 'de-act-link';
43160                                             }
43161                                             
43162                                             row['weekday'+w] += String.format(
43163                                                     '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
43164                                                     id, //0
43165                                                     r.product_id_name, //1
43166                                                     r.when_dt.format('h:ia'), //2
43167                                                     is_sub, //3
43168                                                     deactive, //4
43169                                                     desc // 5
43170                                             );
43171                                         });
43172                                     }
43173                                     d++;
43174                                 }
43175                                 
43176                                 // only do this if something added..
43177                                 if(added > 0){ 
43178                                     result.records.push(_this.grid.dataSource.reader.newRow(row));
43179                                 }
43180                                 
43181                                 
43182                                 // push it twice. (second one with an hour..
43183                                 
43184                             }
43185                             //Roo.log(result);
43186                             this.fireEvent("load", this, o, o.request.arg);
43187                             o.request.callback.call(o.request.scope, result, o.request.arg, true);
43188                         },
43189                     sortInfo : {field: 'when_dt', direction : 'ASC' },
43190                     proxy : {
43191                         xtype: 'HttpProxy',
43192                         xns: Roo.data,
43193                         method : 'GET',
43194                         url : baseURL + '/Roo/Shop_course.php'
43195                     },
43196                     reader : {
43197                         xtype: 'JsonReader',
43198                         xns: Roo.data,
43199                         id : 'id',
43200                         fields : [
43201                             {
43202                                 'name': 'id',
43203                                 'type': 'int'
43204                             },
43205                             {
43206                                 'name': 'when_dt',
43207                                 'type': 'string'
43208                             },
43209                             {
43210                                 'name': 'end_dt',
43211                                 'type': 'string'
43212                             },
43213                             {
43214                                 'name': 'parent_id',
43215                                 'type': 'int'
43216                             },
43217                             {
43218                                 'name': 'product_id',
43219                                 'type': 'int'
43220                             },
43221                             {
43222                                 'name': 'productitem_id',
43223                                 'type': 'int'
43224                             },
43225                             {
43226                                 'name': 'guid',
43227                                 'type': 'int'
43228                             }
43229                         ]
43230                     }
43231                 },
43232                 toolbar : {
43233                     xtype: 'Toolbar',
43234                     xns: Roo,
43235                     items : [
43236                         {
43237                             xtype: 'Button',
43238                             xns: Roo.Toolbar,
43239                             listeners : {
43240                                 click : function (_self, e)
43241                                 {
43242                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
43243                                     sd.setMonth(sd.getMonth()-1);
43244                                     _this.monthField.setValue(sd.format('Y-m-d'));
43245                                     _this.grid.ds.load({});
43246                                 }
43247                             },
43248                             text : "Back"
43249                         },
43250                         {
43251                             xtype: 'Separator',
43252                             xns: Roo.Toolbar
43253                         },
43254                         {
43255                             xtype: 'MonthField',
43256                             xns: Roo.form,
43257                             listeners : {
43258                                 render : function (_self)
43259                                 {
43260                                     _this.monthField = _self;
43261                                    // _this.monthField.set  today
43262                                 },
43263                                 select : function (combo, date)
43264                                 {
43265                                     _this.grid.ds.load({});
43266                                 }
43267                             },
43268                             value : (function() { return new Date(); })()
43269                         },
43270                         {
43271                             xtype: 'Separator',
43272                             xns: Roo.Toolbar
43273                         },
43274                         {
43275                             xtype: 'TextItem',
43276                             xns: Roo.Toolbar,
43277                             text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
43278                         },
43279                         {
43280                             xtype: 'Fill',
43281                             xns: Roo.Toolbar
43282                         },
43283                         {
43284                             xtype: 'Button',
43285                             xns: Roo.Toolbar,
43286                             listeners : {
43287                                 click : function (_self, e)
43288                                 {
43289                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
43290                                     sd.setMonth(sd.getMonth()+1);
43291                                     _this.monthField.setValue(sd.format('Y-m-d'));
43292                                     _this.grid.ds.load({});
43293                                 }
43294                             },
43295                             text : "Next"
43296                         }
43297                     ]
43298                 },
43299                  
43300             }
43301         };
43302         
43303         *//*
43304  * Based on:
43305  * Ext JS Library 1.1.1
43306  * Copyright(c) 2006-2007, Ext JS, LLC.
43307  *
43308  * Originally Released Under LGPL - original licence link has changed is not relivant.
43309  *
43310  * Fork - LGPL
43311  * <script type="text/javascript">
43312  */
43313  
43314 /**
43315  * @class Roo.LoadMask
43316  * A simple utility class for generically masking elements while loading data.  If the element being masked has
43317  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
43318  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
43319  * element's UpdateManager load indicator and will be destroyed after the initial load.
43320  * @constructor
43321  * Create a new LoadMask
43322  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
43323  * @param {Object} config The config object
43324  */
43325 Roo.LoadMask = function(el, config){
43326     this.el = Roo.get(el);
43327     Roo.apply(this, config);
43328     if(this.store){
43329         this.store.on('beforeload', this.onBeforeLoad, this);
43330         this.store.on('load', this.onLoad, this);
43331         this.store.on('loadexception', this.onLoadException, this);
43332         this.removeMask = false;
43333     }else{
43334         var um = this.el.getUpdateManager();
43335         um.showLoadIndicator = false; // disable the default indicator
43336         um.on('beforeupdate', this.onBeforeLoad, this);
43337         um.on('update', this.onLoad, this);
43338         um.on('failure', this.onLoad, this);
43339         this.removeMask = true;
43340     }
43341 };
43342
43343 Roo.LoadMask.prototype = {
43344     /**
43345      * @cfg {Boolean} removeMask
43346      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
43347      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
43348      */
43349     removeMask : false,
43350     /**
43351      * @cfg {String} msg
43352      * The text to display in a centered loading message box (defaults to 'Loading...')
43353      */
43354     msg : 'Loading...',
43355     /**
43356      * @cfg {String} msgCls
43357      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
43358      */
43359     msgCls : 'x-mask-loading',
43360
43361     /**
43362      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
43363      * @type Boolean
43364      */
43365     disabled: false,
43366
43367     /**
43368      * Disables the mask to prevent it from being displayed
43369      */
43370     disable : function(){
43371        this.disabled = true;
43372     },
43373
43374     /**
43375      * Enables the mask so that it can be displayed
43376      */
43377     enable : function(){
43378         this.disabled = false;
43379     },
43380     
43381     onLoadException : function()
43382     {
43383         Roo.log(arguments);
43384         
43385         if (typeof(arguments[3]) != 'undefined') {
43386             Roo.MessageBox.alert("Error loading",arguments[3]);
43387         } 
43388         /*
43389         try {
43390             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
43391                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
43392             }   
43393         } catch(e) {
43394             
43395         }
43396         */
43397     
43398         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
43399     },
43400     // private
43401     onLoad : function()
43402     {
43403         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
43404     },
43405
43406     // private
43407     onBeforeLoad : function(){
43408         if(!this.disabled){
43409             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
43410         }
43411     },
43412
43413     // private
43414     destroy : function(){
43415         if(this.store){
43416             this.store.un('beforeload', this.onBeforeLoad, this);
43417             this.store.un('load', this.onLoad, this);
43418             this.store.un('loadexception', this.onLoadException, this);
43419         }else{
43420             var um = this.el.getUpdateManager();
43421             um.un('beforeupdate', this.onBeforeLoad, this);
43422             um.un('update', this.onLoad, this);
43423             um.un('failure', this.onLoad, this);
43424         }
43425     }
43426 };/*
43427  * Based on:
43428  * Ext JS Library 1.1.1
43429  * Copyright(c) 2006-2007, Ext JS, LLC.
43430  *
43431  * Originally Released Under LGPL - original licence link has changed is not relivant.
43432  *
43433  * Fork - LGPL
43434  * <script type="text/javascript">
43435  */
43436
43437
43438 /**
43439  * @class Roo.XTemplate
43440  * @extends Roo.Template
43441  * Provides a template that can have nested templates for loops or conditionals. The syntax is:
43442 <pre><code>
43443 var t = new Roo.XTemplate(
43444         '&lt;select name="{name}"&gt;',
43445                 '&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
43446         '&lt;/select&gt;'
43447 );
43448  
43449 // then append, applying the master template values
43450  </code></pre>
43451  *
43452  * Supported features:
43453  *
43454  *  Tags:
43455
43456 <pre><code>
43457       {a_variable} - output encoded.
43458       {a_variable.format:("Y-m-d")} - call a method on the variable
43459       {a_variable:raw} - unencoded output
43460       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
43461       {a_variable:this.method_on_template(...)} - call a method on the template object.
43462  
43463 </code></pre>
43464  *  The tpl tag:
43465 <pre><code>
43466         &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
43467         &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
43468         &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
43469         &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
43470   
43471         &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
43472         &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
43473 </code></pre>
43474  *      
43475  */
43476 Roo.XTemplate = function()
43477 {
43478     Roo.XTemplate.superclass.constructor.apply(this, arguments);
43479     if (this.html) {
43480         this.compile();
43481     }
43482 };
43483
43484
43485 Roo.extend(Roo.XTemplate, Roo.Template, {
43486
43487     /**
43488      * The various sub templates
43489      */
43490     tpls : false,
43491     /**
43492      *
43493      * basic tag replacing syntax
43494      * WORD:WORD()
43495      *
43496      * // you can fake an object call by doing this
43497      *  x.t:(test,tesT) 
43498      * 
43499      */
43500     re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
43501
43502     /**
43503      * compile the template
43504      *
43505      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
43506      *
43507      */
43508     compile: function()
43509     {
43510         var s = this.html;
43511      
43512         s = ['<tpl>', s, '</tpl>'].join('');
43513     
43514         var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
43515             nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
43516             ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
43517             execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
43518             namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
43519             m,
43520             id     = 0,
43521             tpls   = [];
43522     
43523         while(true == !!(m = s.match(re))){
43524             var forMatch   = m[0].match(nameRe),
43525                 ifMatch   = m[0].match(ifRe),
43526                 execMatch   = m[0].match(execRe),
43527                 namedMatch   = m[0].match(namedRe),
43528                 
43529                 exp  = null, 
43530                 fn   = null,
43531                 exec = null,
43532                 name = forMatch && forMatch[1] ? forMatch[1] : '';
43533                 
43534             if (ifMatch) {
43535                 // if - puts fn into test..
43536                 exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
43537                 if(exp){
43538                    fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
43539                 }
43540             }
43541             
43542             if (execMatch) {
43543                 // exec - calls a function... returns empty if true is  returned.
43544                 exp = execMatch && execMatch[1] ? execMatch[1] : null;
43545                 if(exp){
43546                    exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
43547                 }
43548             }
43549             
43550             
43551             if (name) {
43552                 // for = 
43553                 switch(name){
43554                     case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
43555                     case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
43556                     default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
43557                 }
43558             }
43559             var uid = namedMatch ? namedMatch[1] : id;
43560             
43561             
43562             tpls.push({
43563                 id:     namedMatch ? namedMatch[1] : id,
43564                 target: name,
43565                 exec:   exec,
43566                 test:   fn,
43567                 body:   m[1] || ''
43568             });
43569             if (namedMatch) {
43570                 s = s.replace(m[0], '');
43571             } else { 
43572                 s = s.replace(m[0], '{xtpl'+ id + '}');
43573             }
43574             ++id;
43575         }
43576         this.tpls = [];
43577         for(var i = tpls.length-1; i >= 0; --i){
43578             this.compileTpl(tpls[i]);
43579             this.tpls[tpls[i].id] = tpls[i];
43580         }
43581         this.master = tpls[tpls.length-1];
43582         return this;
43583     },
43584     /**
43585      * same as applyTemplate, except it's done to one of the subTemplates
43586      * when using named templates, you can do:
43587      *
43588      * var str = pl.applySubTemplate('your-name', values);
43589      *
43590      * 
43591      * @param {Number} id of the template
43592      * @param {Object} values to apply to template
43593      * @param {Object} parent (normaly the instance of this object)
43594      */
43595     applySubTemplate : function(id, values, parent)
43596     {
43597         
43598         
43599         var t = this.tpls[id];
43600         
43601         
43602         try { 
43603             if(t.test && !t.test.call(this, values, parent)){
43604                 return '';
43605             }
43606         } catch(e) {
43607             Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
43608             Roo.log(e.toString());
43609             Roo.log(t.test);
43610             return ''
43611         }
43612         try { 
43613             
43614             if(t.exec && t.exec.call(this, values, parent)){
43615                 return '';
43616             }
43617         } catch(e) {
43618             Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
43619             Roo.log(e.toString());
43620             Roo.log(t.exec);
43621             return ''
43622         }
43623         try {
43624             var vs = t.target ? t.target.call(this, values, parent) : values;
43625             parent = t.target ? values : parent;
43626             if(t.target && vs instanceof Array){
43627                 var buf = [];
43628                 for(var i = 0, len = vs.length; i < len; i++){
43629                     buf[buf.length] = t.compiled.call(this, vs[i], parent);
43630                 }
43631                 return buf.join('');
43632             }
43633             return t.compiled.call(this, vs, parent);
43634         } catch (e) {
43635             Roo.log("Xtemplate.applySubTemplate : Exception thrown");
43636             Roo.log(e.toString());
43637             Roo.log(t.compiled);
43638             return '';
43639         }
43640     },
43641
43642     compileTpl : function(tpl)
43643     {
43644         var fm = Roo.util.Format;
43645         var useF = this.disableFormats !== true;
43646         var sep = Roo.isGecko ? "+" : ",";
43647         var undef = function(str) {
43648             Roo.log("Property not found :"  + str);
43649             return '';
43650         };
43651         
43652         var fn = function(m, name, format, args)
43653         {
43654             //Roo.log(arguments);
43655             args = args ? args.replace(/\\'/g,"'") : args;
43656             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
43657             if (typeof(format) == 'undefined') {
43658                 format= 'htmlEncode';
43659             }
43660             if (format == 'raw' ) {
43661                 format = false;
43662             }
43663             
43664             if(name.substr(0, 4) == 'xtpl'){
43665                 return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
43666             }
43667             
43668             // build an array of options to determine if value is undefined..
43669             
43670             // basically get 'xxxx.yyyy' then do
43671             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
43672             //    (function () { Roo.log("Property not found"); return ''; })() :
43673             //    ......
43674             
43675             var udef_ar = [];
43676             var lookfor = '';
43677             Roo.each(name.split('.'), function(st) {
43678                 lookfor += (lookfor.length ? '.': '') + st;
43679                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
43680             });
43681             
43682             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
43683             
43684             
43685             if(format && useF){
43686                 
43687                 args = args ? ',' + args : "";
43688                  
43689                 if(format.substr(0, 5) != "this."){
43690                     format = "fm." + format + '(';
43691                 }else{
43692                     format = 'this.call("'+ format.substr(5) + '", ';
43693                     args = ", values";
43694                 }
43695                 
43696                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
43697             }
43698              
43699             if (args.length) {
43700                 // called with xxyx.yuu:(test,test)
43701                 // change to ()
43702                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
43703             }
43704             // raw.. - :raw modifier..
43705             return "'"+ sep + udef_st  + name + ")"+sep+"'";
43706             
43707         };
43708         var body;
43709         // branched to use + in gecko and [].join() in others
43710         if(Roo.isGecko){
43711             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
43712                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
43713                     "';};};";
43714         }else{
43715             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
43716             body.push(tpl.body.replace(/(\r\n|\n)/g,
43717                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
43718             body.push("'].join('');};};");
43719             body = body.join('');
43720         }
43721         
43722         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
43723        
43724         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
43725         eval(body);
43726         
43727         return this;
43728     },
43729
43730     applyTemplate : function(values){
43731         return this.master.compiled.call(this, values, {});
43732         //var s = this.subs;
43733     },
43734
43735     apply : function(){
43736         return this.applyTemplate.apply(this, arguments);
43737     }
43738
43739  });
43740
43741 Roo.XTemplate.from = function(el){
43742     el = Roo.getDom(el);
43743     return new Roo.XTemplate(el.value || el.innerHTML);
43744 };Roo.dialog = {};
43745 /*
43746 * Licence: LGPL
43747 */
43748
43749 /**
43750  * @class Roo.dialog.UploadCropbox
43751  * @extends Roo.BoxComponent
43752  * Dialog UploadCropbox class
43753  * @cfg {String} emptyText show when image has been loaded
43754  * @cfg {String} rotateNotify show when image too small to rotate
43755  * @cfg {Number} errorTimeout default 3000
43756  * @cfg {Number} minWidth default 300
43757  * @cfg {Number} minHeight default 300
43758  * @cfg {Number} outputMaxWidth default 1200
43759  * @cfg {Number} windowSize default 300
43760  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
43761  * @cfg {Boolean} isDocument (true|false) default false
43762  * @cfg {String} url action url
43763  * @cfg {String} paramName default 'imageUpload'
43764  * @cfg {String} method default POST
43765  * @cfg {Boolean} loadMask (true|false) default true
43766  * @cfg {Boolean} loadingText default 'Loading...'
43767  * 
43768  * @constructor
43769  * Create a new UploadCropbox
43770  * @param {Object} config The config object
43771  */
43772
43773  Roo.dialog.UploadCropbox = function(config){
43774     Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
43775     
43776     this.addEvents({
43777         /**
43778          * @event beforeselectfile
43779          * Fire before select file
43780          * @param {Roo.dialog.UploadCropbox} this
43781          */
43782         "beforeselectfile" : true,
43783         /**
43784          * @event initial
43785          * Fire after initEvent
43786          * @param {Roo.dialog.UploadCropbox} this
43787          */
43788         "initial" : true,
43789         /**
43790          * @event crop
43791          * Fire after initEvent
43792          * @param {Roo.dialog.UploadCropbox} this
43793          * @param {String} data
43794          */
43795         "crop" : true,
43796         /**
43797          * @event prepare
43798          * Fire when preparing the file data
43799          * @param {Roo.dialog.UploadCropbox} this
43800          * @param {Object} file
43801          */
43802         "prepare" : true,
43803         /**
43804          * @event exception
43805          * Fire when get exception
43806          * @param {Roo.dialog.UploadCropbox} this
43807          * @param {XMLHttpRequest} xhr
43808          */
43809         "exception" : true,
43810         /**
43811          * @event beforeloadcanvas
43812          * Fire before load the canvas
43813          * @param {Roo.dialog.UploadCropbox} this
43814          * @param {String} src
43815          */
43816         "beforeloadcanvas" : true,
43817         /**
43818          * @event trash
43819          * Fire when trash image
43820          * @param {Roo.dialog.UploadCropbox} this
43821          */
43822         "trash" : true,
43823         /**
43824          * @event download
43825          * Fire when download the image
43826          * @param {Roo.dialog.UploadCropbox} this
43827          */
43828         "download" : true,
43829         /**
43830          * @event footerbuttonclick
43831          * Fire when footerbuttonclick
43832          * @param {Roo.dialog.UploadCropbox} this
43833          * @param {String} type
43834          */
43835         "footerbuttonclick" : true,
43836         /**
43837          * @event resize
43838          * Fire when resize
43839          * @param {Roo.dialog.UploadCropbox} this
43840          */
43841         "resize" : true,
43842         /**
43843          * @event rotate
43844          * Fire when rotate the image
43845          * @param {Roo.dialog.UploadCropbox} this
43846          * @param {String} pos
43847          */
43848         "rotate" : true,
43849         /**
43850          * @event inspect
43851          * Fire when inspect the file
43852          * @param {Roo.dialog.UploadCropbox} this
43853          * @param {Object} file
43854          */
43855         "inspect" : true,
43856         /**
43857          * @event upload
43858          * Fire when xhr upload the file
43859          * @param {Roo.dialog.UploadCropbox} this
43860          * @param {Object} data
43861          */
43862         "upload" : true,
43863         /**
43864          * @event arrange
43865          * Fire when arrange the file data
43866          * @param {Roo.dialog.UploadCropbox} this
43867          * @param {Object} formData
43868          */
43869         "arrange" : true,
43870         /**
43871          * @event loadcanvas
43872          * Fire after load the canvas
43873          * @param {Roo.dialog.UploadCropbox}
43874          * @param {Object} imgEl
43875          */
43876         "loadcanvas" : true
43877     });
43878     
43879     this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
43880 };
43881
43882 Roo.extend(Roo.dialog.UploadCropbox, Roo.Component,  {
43883     
43884     emptyText : 'Click to upload image',
43885     rotateNotify : 'Image is too small to rotate',
43886     errorTimeout : 3000,
43887     scale : 0,
43888     baseScale : 1,
43889     rotate : 0,
43890     dragable : false,
43891     pinching : false,
43892     mouseX : 0,
43893     mouseY : 0,
43894     cropData : false,
43895     minWidth : 300,
43896     minHeight : 300,
43897     outputMaxWidth : 1200,
43898     windowSize : 300,
43899     file : false,
43900     exif : {},
43901     baseRotate : 1,
43902     cropType : 'image/jpeg',
43903     buttons : false,
43904     canvasLoaded : false,
43905     isDocument : false,
43906     method : 'POST',
43907     paramName : 'imageUpload',
43908     loadMask : true,
43909     loadingText : 'Loading...',
43910     maskEl : false,
43911     
43912     getAutoCreate : function()
43913     {
43914         var cfg = {
43915             tag : 'div',
43916             cls : 'roo-upload-cropbox',
43917             cn : [
43918                 {
43919                     tag : 'input',
43920                     cls : 'roo-upload-cropbox-selector',
43921                     type : 'file'
43922                 },
43923                 {
43924                     tag : 'div',
43925                     cls : 'roo-upload-cropbox-body',
43926                     style : 'cursor:pointer',
43927                     cn : [
43928                         {
43929                             tag : 'div',
43930                             cls : 'roo-upload-cropbox-preview'
43931                         },
43932                         {
43933                             tag : 'div',
43934                             cls : 'roo-upload-cropbox-thumb'
43935                         },
43936                         {
43937                             tag : 'div',
43938                             cls : 'roo-upload-cropbox-empty-notify',
43939                             html : this.emptyText
43940                         },
43941                         {
43942                             tag : 'div',
43943                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
43944                             html : this.rotateNotify
43945                         }
43946                     ]
43947                 },
43948                 {
43949                     tag : 'div',
43950                     cls : 'roo-upload-cropbox-footer',
43951                     cn : {
43952                         tag : 'div',
43953                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
43954                         cn : []
43955                     }
43956                 }
43957             ]
43958         };
43959         
43960         return cfg;
43961     },
43962     
43963     onRender : function(ct, position)
43964     {
43965         Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
43966
43967         if(this.el){
43968             if (this.el.attr('xtype')) {
43969                 this.el.attr('xtypex', this.el.attr('xtype'));
43970                 this.el.dom.removeAttribute('xtype');
43971                 
43972                 this.initEvents();
43973             }
43974         }
43975         else {
43976             var cfg = Roo.apply({},  this.getAutoCreate());
43977         
43978             cfg.id = this.id || Roo.id();
43979             
43980             if (this.cls) {
43981                 cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
43982             }
43983             
43984             if (this.style) { // fixme needs to support more complex style data.
43985                 cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
43986             }
43987             
43988             this.el = ct.createChild(cfg, position);
43989             
43990             this.initEvents();
43991         }
43992         
43993         if (this.buttons.length) {
43994             
43995             Roo.each(this.buttons, function(bb) {
43996                 
43997                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
43998                 
43999                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
44000                 
44001             }, this);
44002         }
44003         
44004         if(this.loadMask){
44005             this.maskEl = this.el;
44006         }
44007     },
44008     
44009     initEvents : function()
44010     {
44011         this.urlAPI = (window.createObjectURL && window) || 
44012                                 (window.URL && URL.revokeObjectURL && URL) || 
44013                                 (window.webkitURL && webkitURL);
44014                         
44015         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
44016         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44017         
44018         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
44019         this.selectorEl.hide();
44020         
44021         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
44022         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44023         
44024         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
44025         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44026         this.thumbEl.hide();
44027         
44028         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
44029         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44030         
44031         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
44032         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44033         this.errorEl.hide();
44034         
44035         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
44036         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
44037         this.footerEl.hide();
44038         
44039         this.setThumbBoxSize();
44040         
44041         this.bind();
44042         
44043         this.resize();
44044         
44045         this.fireEvent('initial', this);
44046     },
44047
44048     bind : function()
44049     {
44050         var _this = this;
44051         
44052         window.addEventListener("resize", function() { _this.resize(); } );
44053         
44054         this.bodyEl.on('click', this.beforeSelectFile, this);
44055         
44056         if(Roo.isTouch){
44057             this.bodyEl.on('touchstart', this.onTouchStart, this);
44058             this.bodyEl.on('touchmove', this.onTouchMove, this);
44059             this.bodyEl.on('touchend', this.onTouchEnd, this);
44060         }
44061         
44062         if(!Roo.isTouch){
44063             this.bodyEl.on('mousedown', this.onMouseDown, this);
44064             this.bodyEl.on('mousemove', this.onMouseMove, this);
44065             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
44066             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
44067             Roo.get(document).on('mouseup', this.onMouseUp, this);
44068         }
44069         
44070         this.selectorEl.on('change', this.onFileSelected, this);
44071     },
44072     
44073     reset : function()
44074     {    
44075         this.scale = 0;
44076         this.baseScale = 1;
44077         this.rotate = 0;
44078         this.baseRotate = 1;
44079         this.dragable = false;
44080         this.pinching = false;
44081         this.mouseX = 0;
44082         this.mouseY = 0;
44083         this.cropData = false;
44084         this.notifyEl.dom.innerHTML = this.emptyText;
44085         
44086         // this.selectorEl.dom.value = '';
44087         
44088     },
44089     
44090     resize : function()
44091     {
44092         if(this.fireEvent('resize', this) != false){
44093             this.setThumbBoxPosition();
44094             this.setCanvasPosition();
44095         }
44096     },
44097     
44098     onFooterButtonClick : function(e, el, o, type)
44099     {
44100         switch (type) {
44101             case 'rotate-left' :
44102                 this.onRotateLeft(e);
44103                 break;
44104             case 'rotate-right' :
44105                 this.onRotateRight(e);
44106                 break;
44107             case 'picture' :
44108                 this.beforeSelectFile(e);
44109                 break;
44110             case 'trash' :
44111                 this.trash(e);
44112                 break;
44113             case 'crop' :
44114                 this.crop(e);
44115                 break;
44116             case 'download' :
44117                 this.download(e);
44118                 break;
44119             default :
44120                 break;
44121         }
44122         
44123         this.fireEvent('footerbuttonclick', this, type);
44124     },
44125     
44126     beforeSelectFile : function(e)
44127     {
44128         e.preventDefault();
44129         
44130         if(this.fireEvent('beforeselectfile', this) != false){
44131             this.selectorEl.dom.click();
44132         }
44133     },
44134     
44135     onFileSelected : function(e)
44136     {
44137         e.preventDefault();
44138         
44139         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
44140             return;
44141         }
44142         
44143         var file = this.selectorEl.dom.files[0];
44144         
44145         if(this.fireEvent('inspect', this, file) != false){
44146             this.prepare(file);
44147         }
44148         
44149     },
44150     
44151     trash : function(e)
44152     {
44153         this.fireEvent('trash', this);
44154     },
44155     
44156     download : function(e)
44157     {
44158         this.fireEvent('download', this);
44159     },
44160     
44161     loadCanvas : function(src)
44162     {   
44163         if(this.fireEvent('beforeloadcanvas', this, src) != false){
44164             
44165             this.reset();
44166             
44167             this.imageEl = document.createElement('img');
44168             
44169             var _this = this;
44170             
44171             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
44172             
44173             this.imageEl.src = src;
44174         }
44175     },
44176     
44177     onLoadCanvas : function()
44178     {   
44179         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
44180         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
44181
44182         if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
44183         
44184             this.bodyEl.un('click', this.beforeSelectFile, this);
44185             
44186             this.notifyEl.hide();
44187             this.thumbEl.show();
44188             this.footerEl.show();
44189             
44190             this.baseRotateLevel();
44191             
44192             if(this.isDocument){
44193                 this.setThumbBoxSize();
44194             }
44195             
44196             this.setThumbBoxPosition();
44197             
44198             this.baseScaleLevel();
44199             
44200             this.draw();
44201             
44202             this.resize();
44203             
44204             this.canvasLoaded = true;
44205         
44206         }
44207         
44208         if(this.loadMask){
44209             this.maskEl.unmask();
44210         }
44211         
44212     },
44213     
44214     setCanvasPosition : function()
44215     {   
44216         if(!this.canvasEl){
44217             return;
44218         }
44219         
44220         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
44221         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
44222         
44223         this.previewEl.setLeft(pw);
44224         this.previewEl.setTop(ph);
44225         
44226     },
44227     
44228     onMouseDown : function(e)
44229     {   
44230         e.stopEvent();
44231         
44232         this.dragable = true;
44233         this.pinching = false;
44234         
44235         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
44236             this.dragable = false;
44237             return;
44238         }
44239         
44240         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
44241         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
44242         
44243     },
44244     
44245     onMouseMove : function(e)
44246     {   
44247         e.stopEvent();
44248         
44249         if(!this.canvasLoaded){
44250             return;
44251         }
44252         
44253         if (!this.dragable){
44254             return;
44255         }
44256         
44257         var minX = Math.ceil(this.thumbEl.getLeft(true));
44258         var minY = Math.ceil(this.thumbEl.getTop(true));
44259         
44260         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
44261         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
44262
44263         if(minX > maxX) {
44264             var tempX = minX;
44265             minX = maxX;
44266             maxX = tempX;
44267         }
44268
44269         if(minY > maxY) {
44270             var tempY = minY;
44271             minY = maxY;
44272             maxY = tempY;
44273         }
44274
44275         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
44276         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
44277         
44278         x = x - this.mouseX;
44279         y = y - this.mouseY;
44280
44281         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
44282         var bgY = Math.ceil(y + this.previewEl.getTop(true));
44283         
44284         bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
44285         bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
44286         
44287         this.previewEl.setLeft(bgX);
44288         this.previewEl.setTop(bgY);
44289         
44290         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
44291         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
44292     },
44293     
44294     onMouseUp : function(e)
44295     {   
44296         e.stopEvent();
44297         
44298         this.dragable = false;
44299     },
44300     
44301     onMouseWheel : function(e)
44302     {   
44303         e.stopEvent();
44304         
44305         this.startScale = this.scale;
44306         this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
44307         
44308         if(!this.zoomable()){
44309             this.scale = this.startScale;
44310             return;
44311         }
44312
44313         
44314         this.draw();
44315         
44316         return;
44317     },
44318     
44319     zoomable : function()
44320     {
44321         var minScale = this.thumbEl.getWidth() / this.minWidth;
44322         
44323         if(this.minWidth < this.minHeight){
44324             minScale = this.thumbEl.getHeight() / this.minHeight;
44325         }
44326         
44327         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
44328         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
44329  
44330         var maxWidth = this.imageEl.OriginWidth;
44331         var maxHeight = this.imageEl.OriginHeight;
44332         
44333         if(
44334                 this.isDocument &&
44335                 (this.rotate == 0 || this.rotate == 180) && 
44336                 (
44337                     width > this.imageEl.OriginWidth || 
44338                     height > this.imageEl.OriginHeight ||
44339                     (width < this.minWidth && height < this.minHeight)
44340                 )
44341         ){
44342             return false;
44343         }
44344         
44345         if(
44346                 this.isDocument &&
44347                 (this.rotate == 90 || this.rotate == 270) && 
44348                 (
44349                     width > this.imageEl.OriginWidth || 
44350                     height > this.imageEl.OriginHeight ||
44351                     (width < this.minHeight && height < this.minWidth)
44352                 )
44353         ){
44354             return false;
44355         }
44356         
44357         if(
44358                 !this.isDocument &&
44359                 (this.rotate == 0 || this.rotate == 180) && 
44360                 (
44361                     (this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight) && width < this.minWidth ||
44362                     (this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight) && height < this.minHeight ||
44363                     width > maxWidth ||
44364                     height > maxHeight
44365                 )
44366         ){
44367             return false;
44368         }
44369         
44370         if(
44371                 !this.isDocument &&
44372                 (this.rotate == 90 || this.rotate == 270) && 
44373                 (
44374                     width < this.minHeight || 
44375                     width > this.imageEl.OriginWidth || 
44376                     height < this.minWidth || 
44377                     height > this.imageEl.OriginHeight
44378                 )
44379         ){
44380             return false;
44381         }
44382         
44383         return true;
44384         
44385     },
44386     
44387     onRotateLeft : function(e)
44388     {   
44389         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
44390             
44391             var minScale = this.thumbEl.getWidth() / this.minWidth;
44392             
44393             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
44394             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
44395             
44396             this.startScale = this.scale;
44397             
44398             while (this.getScaleLevel() < minScale){
44399             
44400                 this.scale = this.scale + 1;
44401                 
44402                 if(!this.zoomable()){
44403                     break;
44404                 }
44405                 
44406                 if(
44407                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
44408                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
44409                 ){
44410                     continue;
44411                 }
44412                 
44413                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
44414
44415                 this.draw();
44416                 
44417                 return;
44418             }
44419             
44420             this.scale = this.startScale;
44421             
44422             this.onRotateFail();
44423             
44424             return false;
44425         }
44426         
44427         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
44428
44429         if(this.isDocument){
44430             this.setThumbBoxSize();
44431             this.setThumbBoxPosition();
44432             this.setCanvasPosition();
44433         }
44434         
44435         this.draw();
44436         
44437         this.fireEvent('rotate', this, 'left');
44438         
44439     },
44440     
44441     onRotateRight : function(e)
44442     {
44443         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
44444             
44445             var minScale = this.thumbEl.getWidth() / this.minWidth;
44446         
44447             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
44448             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
44449             
44450             this.startScale = this.scale;
44451             
44452             while (this.getScaleLevel() < minScale){
44453             
44454                 this.scale = this.scale + 1;
44455                 
44456                 if(!this.zoomable()){
44457                     break;
44458                 }
44459                 
44460                 if(
44461                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
44462                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
44463                 ){
44464                     continue;
44465                 }
44466                 
44467                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
44468
44469                 this.draw();
44470                 
44471                 return;
44472             }
44473             
44474             this.scale = this.startScale;
44475             
44476             this.onRotateFail();
44477             
44478             return false;
44479         }
44480         
44481         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
44482
44483         if(this.isDocument){
44484             this.setThumbBoxSize();
44485             this.setThumbBoxPosition();
44486             this.setCanvasPosition();
44487         }
44488         
44489         this.draw();
44490         
44491         this.fireEvent('rotate', this, 'right');
44492     },
44493     
44494     onRotateFail : function()
44495     {
44496         this.errorEl.show(true);
44497         
44498         var _this = this;
44499         
44500         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
44501     },
44502     
44503     draw : function()
44504     {
44505         this.previewEl.dom.innerHTML = '';
44506         
44507         var canvasEl = document.createElement("canvas");
44508         
44509         var contextEl = canvasEl.getContext("2d");
44510         
44511         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
44512         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
44513         var center = this.imageEl.OriginWidth / 2;
44514         
44515         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
44516             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
44517             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
44518             center = this.imageEl.OriginHeight / 2;
44519         }
44520         
44521         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
44522         
44523         contextEl.translate(center, center);
44524         contextEl.rotate(this.rotate * Math.PI / 180);
44525
44526         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
44527         
44528         this.canvasEl = document.createElement("canvas");
44529         
44530         this.contextEl = this.canvasEl.getContext("2d");
44531         
44532         switch (this.rotate) {
44533             case 0 :
44534                 
44535                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
44536                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
44537                 
44538                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44539                 
44540                 break;
44541             case 90 : 
44542                 
44543                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
44544                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
44545                 
44546                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
44547                     this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44548                     break;
44549                 }
44550                 
44551                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44552                 
44553                 break;
44554             case 180 :
44555                 
44556                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
44557                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
44558                 
44559                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
44560                     this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44561                     break;
44562                 }
44563                 
44564                 this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44565                 
44566                 break;
44567             case 270 :
44568                 
44569                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
44570                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
44571         
44572                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
44573                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44574                     break;
44575                 }
44576                 
44577                 this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
44578                 
44579                 break;
44580             default : 
44581                 break;
44582         }
44583         
44584         this.previewEl.appendChild(this.canvasEl);
44585         
44586         this.setCanvasPosition();
44587     },
44588     
44589     crop : function()
44590     {
44591         if(!this.canvasLoaded){
44592             return;
44593         }
44594         
44595         var imageCanvas = document.createElement("canvas");
44596         
44597         var imageContext = imageCanvas.getContext("2d");
44598         
44599         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
44600         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
44601         
44602         var center = imageCanvas.width / 2;
44603         
44604         imageContext.translate(center, center);
44605         
44606         imageContext.rotate(this.rotate * Math.PI / 180);
44607         
44608         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
44609         
44610         var canvas = document.createElement("canvas");
44611         
44612         var context = canvas.getContext("2d");
44613
44614         canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
44615         
44616         canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
44617
44618         switch (this.rotate) {
44619             case 0 :
44620                 
44621                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
44622                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
44623                 
44624                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
44625                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
44626                 
44627                 var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
44628                 var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
44629
44630                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
44631                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
44632
44633                 if(canvas.width > this.outputMaxWidth) {
44634                     var scale = this.outputMaxWidth / canvas.width;
44635                     canvas.width = canvas.width * scale;
44636                     canvas.height = canvas.height * scale;
44637                     context.scale(scale, scale);
44638                 }
44639
44640                 context.fillStyle = 'white';
44641                 context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
44642
44643
44644                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
44645                 
44646                 break;
44647             case 90 : 
44648                 
44649                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
44650                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
44651                 
44652                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
44653                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
44654                 
44655                 var targetWidth = this.minWidth - 2 * x;
44656                 var targetHeight = this.minHeight - 2 * y;
44657                 
44658                 var scale = 1;
44659                 
44660                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
44661                     scale = targetWidth / width;
44662                 }
44663                 
44664                 if(x > 0 && y == 0){
44665                     scale = targetHeight / height;
44666                 }
44667                 
44668                 if(x > 0 && y > 0){
44669                     scale = targetWidth / width;
44670                     
44671                     if(width < height){
44672                         scale = targetHeight / height;
44673                     }
44674                 }
44675                 
44676                 context.scale(scale, scale);
44677                 
44678                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
44679                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
44680
44681                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
44682                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
44683                 
44684                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
44685                 
44686                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
44687                 
44688                 break;
44689             case 180 :
44690                 
44691                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
44692                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
44693                 
44694                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
44695                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
44696                 
44697                 var targetWidth = this.minWidth - 2 * x;
44698                 var targetHeight = this.minHeight - 2 * y;
44699                 
44700                 var scale = 1;
44701                 
44702                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
44703                     scale = targetWidth / width;
44704                 }
44705                 
44706                 if(x > 0 && y == 0){
44707                     scale = targetHeight / height;
44708                 }
44709                 
44710                 if(x > 0 && y > 0){
44711                     scale = targetWidth / width;
44712                     
44713                     if(width < height){
44714                         scale = targetHeight / height;
44715                     }
44716                 }
44717                 
44718                 context.scale(scale, scale);
44719                 
44720                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
44721                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
44722
44723                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
44724                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
44725
44726                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
44727                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
44728                 
44729                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
44730                 
44731                 break;
44732             case 270 :
44733                 
44734                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
44735                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
44736                 
44737                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
44738                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
44739                 
44740                 var targetWidth = this.minWidth - 2 * x;
44741                 var targetHeight = this.minHeight - 2 * y;
44742                 
44743                 var scale = 1;
44744                 
44745                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
44746                     scale = targetWidth / width;
44747                 }
44748                 
44749                 if(x > 0 && y == 0){
44750                     scale = targetHeight / height;
44751                 }
44752                 
44753                 if(x > 0 && y > 0){
44754                     scale = targetWidth / width;
44755                     
44756                     if(width < height){
44757                         scale = targetHeight / height;
44758                     }
44759                 }
44760                 
44761                 context.scale(scale, scale);
44762                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
44763                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
44764
44765                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
44766                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
44767                 
44768                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
44769                 
44770                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
44771                 
44772                 break;
44773             default : 
44774                 break;
44775         }
44776         
44777         this.cropData = canvas.toDataURL(this.cropType);
44778         
44779         if(this.fireEvent('crop', this, this.cropData) !== false){
44780             this.process(this.file, this.cropData);
44781         }
44782         
44783         return;
44784         
44785     },
44786     
44787     setThumbBoxSize : function()
44788     {
44789         var width, height;
44790         
44791         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
44792             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
44793             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
44794             
44795             this.minWidth = width;
44796             this.minHeight = height;
44797             
44798             if(this.rotate == 90 || this.rotate == 270){
44799                 this.minWidth = height;
44800                 this.minHeight = width;
44801             }
44802         }
44803         
44804         height = this.windowSize;
44805         width = Math.ceil(this.minWidth * height / this.minHeight);
44806         
44807         if(this.minWidth > this.minHeight){
44808             width = this.windowSize;
44809             height = Math.ceil(this.minHeight * width / this.minWidth);
44810         }
44811         
44812         this.thumbEl.setStyle({
44813             width : width + 'px',
44814             height : height + 'px'
44815         });
44816
44817         return;
44818             
44819     },
44820     
44821     setThumbBoxPosition : function()
44822     {
44823         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
44824         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
44825         
44826         this.thumbEl.setLeft(x);
44827         this.thumbEl.setTop(y);
44828         
44829     },
44830     
44831     baseRotateLevel : function()
44832     {
44833         this.baseRotate = 1;
44834         
44835         if(
44836                 typeof(this.exif) != 'undefined' &&
44837                 typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
44838                 [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
44839         ){
44840             this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
44841         }
44842         
44843         this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
44844         
44845     },
44846     
44847     baseScaleLevel : function()
44848     {
44849         var width, height;
44850         
44851         if(this.isDocument){
44852             
44853             if(this.baseRotate == 6 || this.baseRotate == 8){
44854             
44855                 height = this.thumbEl.getHeight();
44856                 this.baseScale = height / this.imageEl.OriginWidth;
44857
44858                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
44859                     width = this.thumbEl.getWidth();
44860                     this.baseScale = width / this.imageEl.OriginHeight;
44861                 }
44862
44863                 return;
44864             }
44865
44866             height = this.thumbEl.getHeight();
44867             this.baseScale = height / this.imageEl.OriginHeight;
44868
44869             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
44870                 width = this.thumbEl.getWidth();
44871                 this.baseScale = width / this.imageEl.OriginWidth;
44872             }
44873
44874             return;
44875         }
44876         
44877         if(this.baseRotate == 6 || this.baseRotate == 8){
44878             
44879             width = this.thumbEl.getHeight();
44880             this.baseScale = width / this.imageEl.OriginHeight;
44881             
44882             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
44883                 height = this.thumbEl.getWidth();
44884                 this.baseScale = height / this.imageEl.OriginHeight;
44885             }
44886             
44887             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
44888                 height = this.thumbEl.getWidth();
44889                 this.baseScale = height / this.imageEl.OriginHeight;
44890                 
44891                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
44892                     width = this.thumbEl.getHeight();
44893                     this.baseScale = width / this.imageEl.OriginWidth;
44894                 }
44895             }
44896             
44897             return;
44898         }
44899         
44900         width = this.thumbEl.getWidth();
44901         this.baseScale = width / this.imageEl.OriginWidth;
44902         
44903         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
44904             height = this.thumbEl.getHeight();
44905             this.baseScale = height / this.imageEl.OriginHeight;
44906         }
44907         
44908         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
44909             
44910             height = this.thumbEl.getHeight();
44911             this.baseScale = height / this.imageEl.OriginHeight;
44912             
44913             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
44914                 width = this.thumbEl.getWidth();
44915                 this.baseScale = width / this.imageEl.OriginWidth;
44916             }
44917             
44918         }
44919
44920         if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
44921             this.baseScale = width / this.minWidth;
44922         }
44923
44924         return;
44925     },
44926     
44927     getScaleLevel : function()
44928     {
44929         return this.baseScale * Math.pow(1.02, this.scale);
44930     },
44931     
44932     onTouchStart : function(e)
44933     {
44934         if(!this.canvasLoaded){
44935             this.beforeSelectFile(e);
44936             return;
44937         }
44938         
44939         var touches = e.browserEvent.touches;
44940         
44941         if(!touches){
44942             return;
44943         }
44944         
44945         if(touches.length == 1){
44946             this.onMouseDown(e);
44947             return;
44948         }
44949         
44950         if(touches.length != 2){
44951             return;
44952         }
44953         
44954         var coords = [];
44955         
44956         for(var i = 0, finger; finger = touches[i]; i++){
44957             coords.push(finger.pageX, finger.pageY);
44958         }
44959         
44960         var x = Math.pow(coords[0] - coords[2], 2);
44961         var y = Math.pow(coords[1] - coords[3], 2);
44962         
44963         this.startDistance = Math.sqrt(x + y);
44964         
44965         this.startScale = this.scale;
44966         
44967         this.pinching = true;
44968         this.dragable = false;
44969         
44970     },
44971     
44972     onTouchMove : function(e)
44973     {
44974         if(!this.pinching && !this.dragable){
44975             return;
44976         }
44977         
44978         var touches = e.browserEvent.touches;
44979         
44980         if(!touches){
44981             return;
44982         }
44983         
44984         if(this.dragable){
44985             this.onMouseMove(e);
44986             return;
44987         }
44988         
44989         var coords = [];
44990         
44991         for(var i = 0, finger; finger = touches[i]; i++){
44992             coords.push(finger.pageX, finger.pageY);
44993         }
44994         
44995         var x = Math.pow(coords[0] - coords[2], 2);
44996         var y = Math.pow(coords[1] - coords[3], 2);
44997         
44998         this.endDistance = Math.sqrt(x + y);
44999         
45000         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
45001         
45002         if(!this.zoomable()){
45003             this.scale = this.startScale;
45004             return;
45005         }
45006         
45007         this.draw();
45008         
45009     },
45010     
45011     onTouchEnd : function(e)
45012     {
45013         this.pinching = false;
45014         this.dragable = false;
45015         
45016     },
45017     
45018     process : function(file, crop)
45019     {
45020         if(this.loadMask){
45021             this.maskEl.mask(this.loadingText);
45022         }
45023         
45024         this.xhr = new XMLHttpRequest();
45025         
45026         file.xhr = this.xhr;
45027
45028         this.xhr.open(this.method, this.url, true);
45029         
45030         var headers = {
45031             "Accept": "application/json",
45032             "Cache-Control": "no-cache",
45033             "X-Requested-With": "XMLHttpRequest"
45034         };
45035         
45036         for (var headerName in headers) {
45037             var headerValue = headers[headerName];
45038             if (headerValue) {
45039                 this.xhr.setRequestHeader(headerName, headerValue);
45040             }
45041         }
45042         
45043         var _this = this;
45044         
45045         this.xhr.onload = function()
45046         {
45047             _this.xhrOnLoad(_this.xhr);
45048         }
45049         
45050         this.xhr.onerror = function()
45051         {
45052             _this.xhrOnError(_this.xhr);
45053         }
45054         
45055         var formData = new FormData();
45056
45057         formData.append('returnHTML', 'NO');
45058
45059         if(crop){
45060             formData.append('crop', crop);
45061             var blobBin = atob(crop.split(',')[1]);
45062             var array = [];
45063             for(var i = 0; i < blobBin.length; i++) {
45064                 array.push(blobBin.charCodeAt(i));
45065             }
45066             var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
45067             formData.append(this.paramName, croppedFile, file.name);
45068         }
45069         
45070         if(typeof(file.filename) != 'undefined'){
45071             formData.append('filename', file.filename);
45072         }
45073         
45074         if(typeof(file.mimetype) != 'undefined'){
45075             formData.append('mimetype', file.mimetype);
45076         }
45077
45078         if(this.fireEvent('arrange', this, formData) != false){
45079             this.xhr.send(formData);
45080         };
45081     },
45082     
45083     xhrOnLoad : function(xhr)
45084     {
45085         if(this.loadMask){
45086             this.maskEl.unmask();
45087         }
45088         
45089         if (xhr.readyState !== 4) {
45090             this.fireEvent('exception', this, xhr);
45091             return;
45092         }
45093
45094         var response = Roo.decode(xhr.responseText);
45095         
45096         if(!response.success){
45097             this.fireEvent('exception', this, xhr);
45098             return;
45099         }
45100         
45101         var response = Roo.decode(xhr.responseText);
45102         
45103         this.fireEvent('upload', this, response);
45104         
45105     },
45106     
45107     xhrOnError : function()
45108     {
45109         if(this.loadMask){
45110             this.maskEl.unmask();
45111         }
45112         
45113         Roo.log('xhr on error');
45114         
45115         var response = Roo.decode(xhr.responseText);
45116           
45117         Roo.log(response);
45118         
45119     },
45120     
45121     prepare : function(file)
45122     {   
45123         if(this.loadMask){
45124             this.maskEl.mask(this.loadingText);
45125         }
45126         
45127         this.file = false;
45128         this.exif = {};
45129         
45130         if(typeof(file) === 'string'){
45131             this.loadCanvas(file);
45132             return;
45133         }
45134         
45135         if(!file || !this.urlAPI){
45136             return;
45137         }
45138         
45139         this.file = file;
45140         if(typeof(file.type) != 'undefined' && file.type.length != 0) {
45141             this.cropType = file.type;
45142         }
45143         
45144         var _this = this;
45145         
45146         if(this.fireEvent('prepare', this, this.file) != false){
45147             
45148             var reader = new FileReader();
45149             
45150             reader.onload = function (e) {
45151                 if (e.target.error) {
45152                     Roo.log(e.target.error);
45153                     return;
45154                 }
45155                 
45156                 var buffer = e.target.result,
45157                     dataView = new DataView(buffer),
45158                     offset = 2,
45159                     maxOffset = dataView.byteLength - 4,
45160                     markerBytes,
45161                     markerLength;
45162                 
45163                 if (dataView.getUint16(0) === 0xffd8) {
45164                     while (offset < maxOffset) {
45165                         markerBytes = dataView.getUint16(offset);
45166                         
45167                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
45168                             markerLength = dataView.getUint16(offset + 2) + 2;
45169                             if (offset + markerLength > dataView.byteLength) {
45170                                 Roo.log('Invalid meta data: Invalid segment size.');
45171                                 break;
45172                             }
45173                             
45174                             if(markerBytes == 0xffe1){
45175                                 _this.parseExifData(
45176                                     dataView,
45177                                     offset,
45178                                     markerLength
45179                                 );
45180                             }
45181                             
45182                             offset += markerLength;
45183                             
45184                             continue;
45185                         }
45186                         
45187                         break;
45188                     }
45189                     
45190                 }
45191                 
45192                 var url = _this.urlAPI.createObjectURL(_this.file);
45193                 
45194                 _this.loadCanvas(url);
45195                 
45196                 return;
45197             }
45198             
45199             reader.readAsArrayBuffer(this.file);
45200             
45201         }
45202         
45203     },
45204     
45205     parseExifData : function(dataView, offset, length)
45206     {
45207         var tiffOffset = offset + 10,
45208             littleEndian,
45209             dirOffset;
45210     
45211         if (dataView.getUint32(offset + 4) !== 0x45786966) {
45212             // No Exif data, might be XMP data instead
45213             return;
45214         }
45215         
45216         // Check for the ASCII code for "Exif" (0x45786966):
45217         if (dataView.getUint32(offset + 4) !== 0x45786966) {
45218             // No Exif data, might be XMP data instead
45219             return;
45220         }
45221         if (tiffOffset + 8 > dataView.byteLength) {
45222             Roo.log('Invalid Exif data: Invalid segment size.');
45223             return;
45224         }
45225         // Check for the two null bytes:
45226         if (dataView.getUint16(offset + 8) !== 0x0000) {
45227             Roo.log('Invalid Exif data: Missing byte alignment offset.');
45228             return;
45229         }
45230         // Check the byte alignment:
45231         switch (dataView.getUint16(tiffOffset)) {
45232         case 0x4949:
45233             littleEndian = true;
45234             break;
45235         case 0x4D4D:
45236             littleEndian = false;
45237             break;
45238         default:
45239             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
45240             return;
45241         }
45242         // Check for the TIFF tag marker (0x002A):
45243         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
45244             Roo.log('Invalid Exif data: Missing TIFF marker.');
45245             return;
45246         }
45247         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
45248         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
45249         
45250         this.parseExifTags(
45251             dataView,
45252             tiffOffset,
45253             tiffOffset + dirOffset,
45254             littleEndian
45255         );
45256     },
45257     
45258     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
45259     {
45260         var tagsNumber,
45261             dirEndOffset,
45262             i;
45263         if (dirOffset + 6 > dataView.byteLength) {
45264             Roo.log('Invalid Exif data: Invalid directory offset.');
45265             return;
45266         }
45267         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
45268         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
45269         if (dirEndOffset + 4 > dataView.byteLength) {
45270             Roo.log('Invalid Exif data: Invalid directory size.');
45271             return;
45272         }
45273         for (i = 0; i < tagsNumber; i += 1) {
45274             this.parseExifTag(
45275                 dataView,
45276                 tiffOffset,
45277                 dirOffset + 2 + 12 * i, // tag offset
45278                 littleEndian
45279             );
45280         }
45281         // Return the offset to the next directory:
45282         return dataView.getUint32(dirEndOffset, littleEndian);
45283     },
45284     
45285     parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
45286     {
45287         var tag = dataView.getUint16(offset, littleEndian);
45288         
45289         this.exif[tag] = this.getExifValue(
45290             dataView,
45291             tiffOffset,
45292             offset,
45293             dataView.getUint16(offset + 2, littleEndian), // tag type
45294             dataView.getUint32(offset + 4, littleEndian), // tag length
45295             littleEndian
45296         );
45297     },
45298     
45299     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
45300     {
45301         var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
45302             tagSize,
45303             dataOffset,
45304             values,
45305             i,
45306             str,
45307             c;
45308     
45309         if (!tagType) {
45310             Roo.log('Invalid Exif data: Invalid tag type.');
45311             return;
45312         }
45313         
45314         tagSize = tagType.size * length;
45315         // Determine if the value is contained in the dataOffset bytes,
45316         // or if the value at the dataOffset is a pointer to the actual data:
45317         dataOffset = tagSize > 4 ?
45318                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
45319         if (dataOffset + tagSize > dataView.byteLength) {
45320             Roo.log('Invalid Exif data: Invalid data offset.');
45321             return;
45322         }
45323         if (length === 1) {
45324             return tagType.getValue(dataView, dataOffset, littleEndian);
45325         }
45326         values = [];
45327         for (i = 0; i < length; i += 1) {
45328             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
45329         }
45330         
45331         if (tagType.ascii) {
45332             str = '';
45333             // Concatenate the chars:
45334             for (i = 0; i < values.length; i += 1) {
45335                 c = values[i];
45336                 // Ignore the terminating NULL byte(s):
45337                 if (c === '\u0000') {
45338                     break;
45339                 }
45340                 str += c;
45341             }
45342             return str;
45343         }
45344         return values;
45345     }
45346     
45347 });
45348
45349 Roo.apply(Roo.dialog.UploadCropbox, {
45350     tags : {
45351         'Orientation': 0x0112
45352     },
45353     
45354     Orientation: {
45355             1: 0, //'top-left',
45356 //            2: 'top-right',
45357             3: 180, //'bottom-right',
45358 //            4: 'bottom-left',
45359 //            5: 'left-top',
45360             6: 90, //'right-top',
45361 //            7: 'right-bottom',
45362             8: 270 //'left-bottom'
45363     },
45364     
45365     exifTagTypes : {
45366         // byte, 8-bit unsigned int:
45367         1: {
45368             getValue: function (dataView, dataOffset) {
45369                 return dataView.getUint8(dataOffset);
45370             },
45371             size: 1
45372         },
45373         // ascii, 8-bit byte:
45374         2: {
45375             getValue: function (dataView, dataOffset) {
45376                 return String.fromCharCode(dataView.getUint8(dataOffset));
45377             },
45378             size: 1,
45379             ascii: true
45380         },
45381         // short, 16 bit int:
45382         3: {
45383             getValue: function (dataView, dataOffset, littleEndian) {
45384                 return dataView.getUint16(dataOffset, littleEndian);
45385             },
45386             size: 2
45387         },
45388         // long, 32 bit int:
45389         4: {
45390             getValue: function (dataView, dataOffset, littleEndian) {
45391                 return dataView.getUint32(dataOffset, littleEndian);
45392             },
45393             size: 4
45394         },
45395         // rational = two long values, first is numerator, second is denominator:
45396         5: {
45397             getValue: function (dataView, dataOffset, littleEndian) {
45398                 return dataView.getUint32(dataOffset, littleEndian) /
45399                     dataView.getUint32(dataOffset + 4, littleEndian);
45400             },
45401             size: 8
45402         },
45403         // slong, 32 bit signed int:
45404         9: {
45405             getValue: function (dataView, dataOffset, littleEndian) {
45406                 return dataView.getInt32(dataOffset, littleEndian);
45407             },
45408             size: 4
45409         },
45410         // srational, two slongs, first is numerator, second is denominator:
45411         10: {
45412             getValue: function (dataView, dataOffset, littleEndian) {
45413                 return dataView.getInt32(dataOffset, littleEndian) /
45414                     dataView.getInt32(dataOffset + 4, littleEndian);
45415             },
45416             size: 8
45417         }
45418     },
45419     
45420     footer : {
45421         STANDARD : [
45422             {
45423                 tag : 'div',
45424                 cls : 'btn-group roo-upload-cropbox-rotate-left',
45425                 action : 'rotate-left',
45426                 cn : [
45427                     {
45428                         tag : 'button',
45429                         cls : 'btn btn-default',
45430                         html : '<i class="fa fa-undo"></i>'
45431                     }
45432                 ]
45433             },
45434             {
45435                 tag : 'div',
45436                 cls : 'btn-group roo-upload-cropbox-picture',
45437                 action : 'picture',
45438                 cn : [
45439                     {
45440                         tag : 'button',
45441                         cls : 'btn btn-default',
45442                         html : '<i class="fa fa-picture-o"></i>'
45443                     }
45444                 ]
45445             },
45446             {
45447                 tag : 'div',
45448                 cls : 'btn-group roo-upload-cropbox-rotate-right',
45449                 action : 'rotate-right',
45450                 cn : [
45451                     {
45452                         tag : 'button',
45453                         cls : 'btn btn-default',
45454                         html : '<i class="fa fa-repeat"></i>'
45455                     }
45456                 ]
45457             }
45458         ],
45459         DOCUMENT : [
45460             {
45461                 tag : 'div',
45462                 cls : 'btn-group roo-upload-cropbox-rotate-left',
45463                 action : 'rotate-left',
45464                 cn : [
45465                     {
45466                         tag : 'button',
45467                         cls : 'btn btn-default',
45468                         html : '<i class="fa fa-undo"></i>'
45469                     }
45470                 ]
45471             },
45472             {
45473                 tag : 'div',
45474                 cls : 'btn-group roo-upload-cropbox-download',
45475                 action : 'download',
45476                 cn : [
45477                     {
45478                         tag : 'button',
45479                         cls : 'btn btn-default',
45480                         html : '<i class="fa fa-download"></i>'
45481                     }
45482                 ]
45483             },
45484             {
45485                 tag : 'div',
45486                 cls : 'btn-group roo-upload-cropbox-crop',
45487                 action : 'crop',
45488                 cn : [
45489                     {
45490                         tag : 'button',
45491                         cls : 'btn btn-default',
45492                         html : '<i class="fa fa-crop"></i>'
45493                     }
45494                 ]
45495             },
45496             {
45497                 tag : 'div',
45498                 cls : 'btn-group roo-upload-cropbox-trash',
45499                 action : 'trash',
45500                 cn : [
45501                     {
45502                         tag : 'button',
45503                         cls : 'btn btn-default',
45504                         html : '<i class="fa fa-trash"></i>'
45505                     }
45506                 ]
45507             },
45508             {
45509                 tag : 'div',
45510                 cls : 'btn-group roo-upload-cropbox-rotate-right',
45511                 action : 'rotate-right',
45512                 cn : [
45513                     {
45514                         tag : 'button',
45515                         cls : 'btn btn-default',
45516                         html : '<i class="fa fa-repeat"></i>'
45517                     }
45518                 ]
45519             }
45520         ],
45521         ROTATOR : [
45522             {
45523                 tag : 'div',
45524                 cls : 'btn-group roo-upload-cropbox-rotate-left',
45525                 action : 'rotate-left',
45526                 cn : [
45527                     {
45528                         tag : 'button',
45529                         cls : 'btn btn-default',
45530                         html : '<i class="fa fa-undo"></i>'
45531                     }
45532                 ]
45533             },
45534             {
45535                 tag : 'div',
45536                 cls : 'btn-group roo-upload-cropbox-rotate-right',
45537                 action : 'rotate-right',
45538                 cn : [
45539                     {
45540                         tag : 'button',
45541                         cls : 'btn btn-default',
45542                         html : '<i class="fa fa-repeat"></i>'
45543                     }
45544                 ]
45545             }
45546         ]
45547     }
45548 });