Roo/bootstrap/form/Input.js
[roojs1] / roojs-bootstrap-debug.js
1 Roo.bootstrap = {};/**
2  * set the version of bootstrap based on the stylesheet...
3  *
4  */
5
6 Roo.bootstrap.version = ( function() {
7     var ret=3;
8     Roo.each(document.styleSheets, function(s) {
9         if ( s.href  && s.href.match(/css-bootstrap4/)) {
10             ret=4;
11         }
12     });
13     if (ret > 3) {
14          Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY;
15     }
16     return ret;
17 })(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
18 Roo.bootstrap.nav = {};
19
20 Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};
21 Roo.htmleditor = {};
22 Roo.namespace('Roo.bootstrap.form.HtmlEditorToolbar');
23 /*
24  * Based on:
25  * Ext JS Library 1.1.1
26  * Copyright(c) 2006-2007, Ext JS, LLC.
27  *
28  * Originally Released Under LGPL - original licence link has changed is not relivant.
29  *
30  * Fork - LGPL
31  * <script type="text/javascript">
32  */
33
34
35 /**
36  * @class Roo.Shadow
37  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
38  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
39  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
40  * @constructor
41  * Create a new Shadow
42  * @param {Object} config The config object
43  */
44 Roo.Shadow = function(config){
45     Roo.apply(this, config);
46     if(typeof this.mode != "string"){
47         this.mode = this.defaultMode;
48     }
49     var o = this.offset, a = {h: 0};
50     var rad = Math.floor(this.offset/2);
51     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
52         case "drop":
53             a.w = 0;
54             a.l = a.t = o;
55             a.t -= 1;
56             if(Roo.isIE){
57                 a.l -= this.offset + rad;
58                 a.t -= this.offset + rad;
59                 a.w -= rad;
60                 a.h -= rad;
61                 a.t += 1;
62             }
63         break;
64         case "sides":
65             a.w = (o*2);
66             a.l = -o;
67             a.t = o-1;
68             if(Roo.isIE){
69                 a.l -= (this.offset - rad);
70                 a.t -= this.offset + rad;
71                 a.l += 1;
72                 a.w -= (this.offset - rad)*2;
73                 a.w -= rad + 1;
74                 a.h -= 1;
75             }
76         break;
77         case "frame":
78             a.w = a.h = (o*2);
79             a.l = a.t = -o;
80             a.t += 1;
81             a.h -= 2;
82             if(Roo.isIE){
83                 a.l -= (this.offset - rad);
84                 a.t -= (this.offset - rad);
85                 a.l += 1;
86                 a.w -= (this.offset + rad + 1);
87                 a.h -= (this.offset + rad);
88                 a.h += 1;
89             }
90         break;
91     };
92
93     this.adjusts = a;
94 };
95
96 Roo.Shadow.prototype = {
97     /**
98      * @cfg {String} mode
99      * The shadow display mode.  Supports the following options:<br />
100      * sides: Shadow displays on both sides and bottom only<br />
101      * frame: Shadow displays equally on all four sides<br />
102      * drop: Traditional bottom-right drop shadow (default)
103      */
104     mode: false,
105     /**
106      * @cfg {String} offset
107      * The number of pixels to offset the shadow from the element (defaults to 4)
108      */
109     offset: 4,
110
111     // private
112     defaultMode: "drop",
113
114     /**
115      * Displays the shadow under the target element
116      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
117      */
118     show : function(target){
119         target = Roo.get(target);
120         if(!this.el){
121             this.el = Roo.Shadow.Pool.pull();
122             if(this.el.dom.nextSibling != target.dom){
123                 this.el.insertBefore(target);
124             }
125         }
126         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
127         if(Roo.isIE){
128             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
129         }
130         this.realign(
131             target.getLeft(true),
132             target.getTop(true),
133             target.getWidth(),
134             target.getHeight()
135         );
136         this.el.dom.style.display = "block";
137     },
138
139     /**
140      * Returns true if the shadow is visible, else false
141      */
142     isVisible : function(){
143         return this.el ? true : false;  
144     },
145
146     /**
147      * Direct alignment when values are already available. Show must be called at least once before
148      * calling this method to ensure it is initialized.
149      * @param {Number} left The target element left position
150      * @param {Number} top The target element top position
151      * @param {Number} width The target element width
152      * @param {Number} height The target element height
153      */
154     realign : function(l, t, w, h){
155         if(!this.el){
156             return;
157         }
158         var a = this.adjusts, d = this.el.dom, s = d.style;
159         var iea = 0;
160         s.left = (l+a.l)+"px";
161         s.top = (t+a.t)+"px";
162         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
163  
164         if(s.width != sws || s.height != shs){
165             s.width = sws;
166             s.height = shs;
167             if(!Roo.isIE){
168                 var cn = d.childNodes;
169                 var sww = Math.max(0, (sw-12))+"px";
170                 cn[0].childNodes[1].style.width = sww;
171                 cn[1].childNodes[1].style.width = sww;
172                 cn[2].childNodes[1].style.width = sww;
173                 cn[1].style.height = Math.max(0, (sh-12))+"px";
174             }
175         }
176     },
177
178     /**
179      * Hides this shadow
180      */
181     hide : function(){
182         if(this.el){
183             this.el.dom.style.display = "none";
184             Roo.Shadow.Pool.push(this.el);
185             delete this.el;
186         }
187     },
188
189     /**
190      * Adjust the z-index of this shadow
191      * @param {Number} zindex The new z-index
192      */
193     setZIndex : function(z){
194         this.zIndex = z;
195         if(this.el){
196             this.el.setStyle("z-index", z);
197         }
198     }
199 };
200
201 // Private utility class that manages the internal Shadow cache
202 Roo.Shadow.Pool = function(){
203     var p = [];
204     var markup = Roo.isIE ?
205                  '<div class="x-ie-shadow"></div>' :
206                  '<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>';
207     return {
208         pull : function(){
209             var sh = p.shift();
210             if(!sh){
211                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
212                 sh.autoBoxAdjust = false;
213             }
214             return sh;
215         },
216
217         push : function(sh){
218             p.push(sh);
219         }
220     };
221 }();/*
222  * - LGPL
223  *
224  * base class for bootstrap elements.
225  * 
226  */
227
228 Roo.bootstrap = Roo.bootstrap || {};
229 /**
230  * @class Roo.bootstrap.Component
231  * @extends Roo.Component
232  * @abstract
233  * @children Roo.bootstrap.Component
234  * Bootstrap Component base class
235  * @cfg {String} cls css class
236  * @cfg {String} style any extra css
237  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
238  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
239  * @cfg {string} dataId cutomer id
240  * @cfg {string} name Specifies name attribute
241  * @cfg {string} tooltip  Text for the tooltip
242  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
243  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
244  
245  * @constructor
246  * Do not use directly - it does not do anything..
247  * @param {Object} config The config object
248  */
249
250
251
252 Roo.bootstrap.Component = function(config){
253     Roo.bootstrap.Component.superclass.constructor.call(this, config);
254        
255     this.addEvents({
256         /**
257          * @event childrenrendered
258          * Fires when the children have been rendered..
259          * @param {Roo.bootstrap.Component} this
260          */
261         "childrenrendered" : true
262         
263         
264         
265     });
266     
267     
268 };
269
270 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
271     
272     
273     allowDomMove : false, // to stop relocations in parent onRender...
274     
275     cls : false,
276     
277     style : false,
278     
279     autoCreate : false,
280     
281     tooltip : null,
282     /**
283      * Initialize Events for the element
284      */
285     initEvents : function() { },
286     
287     xattr : false,
288     
289     parentId : false,
290     
291     can_build_overlaid : true,
292     
293     container_method : false,
294     
295     dataId : false,
296     
297     name : false,
298     
299     parent: function() {
300         // returns the parent component..
301         return Roo.ComponentMgr.get(this.parentId)
302         
303         
304     },
305     
306     // private
307     onRender : function(ct, position)
308     {
309        // Roo.log("Call onRender: " + this.xtype);
310         
311         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
312         
313         if(this.el){
314             if (this.el.attr('xtype')) {
315                 this.el.attr('xtypex', this.el.attr('xtype'));
316                 this.el.dom.removeAttribute('xtype');
317                 
318                 this.initEvents();
319             }
320             
321             return;
322         }
323         
324          
325         
326         var cfg = Roo.apply({},  this.getAutoCreate());
327         
328         cfg.id = this.id || Roo.id();
329         
330         // fill in the extra attributes 
331         if (this.xattr && typeof(this.xattr) =='object') {
332             for (var i in this.xattr) {
333                 cfg[i] = this.xattr[i];
334             }
335         }
336         
337         if(this.dataId){
338             cfg.dataId = this.dataId;
339         }
340         
341         if (this.cls) {
342             cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
343         }
344         
345         if (this.style) { // fixme needs to support more complex style data.
346             cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
347         }
348         
349         if(this.name){
350             cfg.name = this.name;
351         }
352         
353         this.el = ct.createChild(cfg, position);
354         
355         if (this.tooltip) {
356             this.tooltipEl().attr('tooltip', this.tooltip);
357         }
358         
359         if(this.tabIndex !== undefined){
360             this.el.dom.setAttribute('tabIndex', this.tabIndex);
361         }
362         
363         this.initEvents();
364         
365     },
366     /**
367      * Fetch the element to add children to
368      * @return {Roo.Element} defaults to this.el
369      */
370     getChildContainer : function()
371     {
372         return this.el;
373     },
374     getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
375     {
376         return Roo.get(document.body);
377     },
378     
379     /**
380      * Fetch the element to display the tooltip on.
381      * @return {Roo.Element} defaults to this.el
382      */
383     tooltipEl : function()
384     {
385         return this.el;
386     },
387         
388     addxtype  : function(tree,cntr)
389     {
390         var cn = this;
391         
392         cn = Roo.factory(tree);
393         //Roo.log(['addxtype', cn]);
394            
395         cn.parentType = this.xtype; //??
396         cn.parentId = this.id;
397         
398         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
399         if (typeof(cn.container_method) == 'string') {
400             cntr = cn.container_method;
401         }
402         
403         
404         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
405         
406         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
407         
408         var build_from_html =  Roo.XComponent.build_from_html;
409           
410         var is_body  = (tree.xtype == 'Body') ;
411           
412         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
413           
414         var self_cntr_el = Roo.get(this[cntr](false));
415         
416         // do not try and build conditional elements 
417         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
418             return false;
419         }
420         
421         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
422             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
423                 return this.addxtypeChild(tree,cntr, is_body);
424             }
425             
426             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
427                 
428             if(echild){
429                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
430             }
431             
432             Roo.log('skipping render');
433             return cn;
434             
435         }
436         
437         var ret = false;
438         if (!build_from_html) {
439             return false;
440         }
441         
442         // this i think handles overlaying multiple children of the same type
443         // with the sam eelement.. - which might be buggy..
444         while (true) {
445             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
446             
447             if (!echild) {
448                 break;
449             }
450             
451             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
452                 break;
453             }
454             
455             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
456         }
457        
458         return ret;
459     },
460     
461     
462     addxtypeChild : function (tree, cntr, is_body)
463     {
464         Roo.debug && Roo.log('addxtypeChild:' + cntr);
465         var cn = this;
466         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
467         
468         
469         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
470                     (typeof(tree['flexy:foreach']) != 'undefined');
471           
472     
473         
474         skip_children = false;
475         // render the element if it's not BODY.
476         if (!is_body) {
477             
478             // if parent was disabled, then do not try and create the children..
479             if(!this[cntr](true)){
480                 tree.items = [];
481                 return tree;
482             }
483            
484             cn = Roo.factory(tree);
485            
486             cn.parentType = this.xtype; //??
487             cn.parentId = this.id;
488             
489             var build_from_html =  Roo.XComponent.build_from_html;
490             
491             
492             // does the container contain child eleemnts with 'xtype' attributes.
493             // that match this xtype..
494             // note - when we render we create these as well..
495             // so we should check to see if body has xtype set.
496             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
497                
498                 var self_cntr_el = Roo.get(this[cntr](false));
499                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
500                 if (echild) { 
501                     //Roo.log(Roo.XComponent.build_from_html);
502                     //Roo.log("got echild:");
503                     //Roo.log(echild);
504                 }
505                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
506                 // and are not displayed -this causes this to use up the wrong element when matching.
507                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
508                 
509                 
510                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
511                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
512                   
513                   
514                   
515                     cn.el = echild;
516                   //  Roo.log("GOT");
517                     //echild.dom.removeAttribute('xtype');
518                 } else {
519                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
520                     Roo.debug && Roo.log(self_cntr_el);
521                     Roo.debug && Roo.log(echild);
522                     Roo.debug && Roo.log(cn);
523                 }
524             }
525            
526             
527            
528             // if object has flexy:if - then it may or may not be rendered.
529             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
530                 // skip a flexy if element.
531                 Roo.debug && Roo.log('skipping render');
532                 Roo.debug && Roo.log(tree);
533                 if (!cn.el) {
534                     Roo.debug && Roo.log('skipping all children');
535                     skip_children = true;
536                 }
537                 
538              } else {
539                  
540                 // actually if flexy:foreach is found, we really want to create 
541                 // multiple copies here...
542                 //Roo.log('render');
543                 //Roo.log(this[cntr]());
544                 // some elements do not have render methods.. like the layouts...
545                 /*
546                 if(this[cntr](true) === false){
547                     cn.items = [];
548                     return cn;
549                 }
550                 */
551                 cn.render && cn.render(this[cntr](true));
552                 
553              }
554             // then add the element..
555         }
556          
557         // handle the kids..
558         
559         var nitems = [];
560         /*
561         if (typeof (tree.menu) != 'undefined') {
562             tree.menu.parentType = cn.xtype;
563             tree.menu.triggerEl = cn.el;
564             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
565             
566         }
567         */
568         if (!tree.items || !tree.items.length) {
569             cn.items = nitems;
570             //Roo.log(["no children", this]);
571             
572             return cn;
573         }
574          
575         var items = tree.items;
576         delete tree.items;
577         
578         //Roo.log(items.length);
579             // add the items..
580         if (!skip_children) {    
581             for(var i =0;i < items.length;i++) {
582               //  Roo.log(['add child', items[i]]);
583                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
584             }
585         }
586         
587         cn.items = nitems;
588         
589         //Roo.log("fire childrenrendered");
590         
591         cn.fireEvent('childrenrendered', this);
592         
593         return cn;
594     },
595     
596     /**
597      * Set the element that will be used to show or hide
598      */
599     setVisibilityEl : function(el)
600     {
601         this.visibilityEl = el;
602     },
603     
604      /**
605      * Get the element that will be used to show or hide
606      */
607     getVisibilityEl : function()
608     {
609         if (typeof(this.visibilityEl) == 'object') {
610             return this.visibilityEl;
611         }
612         
613         if (typeof(this.visibilityEl) == 'string') {
614             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
615         }
616         
617         return this.getEl();
618     },
619     
620     /**
621      * Show a component - removes 'hidden' class
622      */
623     show : function()
624     {
625         if(!this.getVisibilityEl()){
626             return;
627         }
628          
629         this.getVisibilityEl().removeClass(['hidden','d-none']);
630         
631         this.fireEvent('show', this);
632         
633         
634     },
635     /**
636      * Hide a component - adds 'hidden' class
637      */
638     hide: function()
639     {
640         if(!this.getVisibilityEl()){
641             return;
642         }
643         
644         this.getVisibilityEl().addClass(['hidden','d-none']);
645         
646         this.fireEvent('hide', this);
647         
648     }
649 });
650
651  /*
652  * - LGPL
653  *
654  * element
655  * 
656  */
657
658 /**
659  * @class Roo.bootstrap.Element
660  * @extends Roo.bootstrap.Component
661  * @children Roo.bootstrap.Component
662  * Bootstrap Element class (basically a DIV used to make random stuff )
663  * 
664  * @cfg {String} html contents of the element
665  * @cfg {String} tag tag of the element
666  * @cfg {String} cls class of the element
667  * @cfg {Boolean} preventDefault (true|false) default false
668  * @cfg {Boolean} clickable (true|false) default false
669  * @cfg {String} role default blank - set to button to force cursor pointer
670  
671  * 
672  * @constructor
673  * Create a new Element
674  * @param {Object} config The config object
675  */
676
677 Roo.bootstrap.Element = function(config){
678     Roo.bootstrap.Element.superclass.constructor.call(this, config);
679     
680     this.addEvents({
681         // raw events
682         /**
683          * @event click
684          * When a element is chick
685          * @param {Roo.bootstrap.Element} this
686          * @param {Roo.EventObject} e
687          */
688         "click" : true 
689         
690       
691     });
692 };
693
694 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
695     
696     tag: 'div',
697     cls: '',
698     html: '',
699     preventDefault: false, 
700     clickable: false,
701     tapedTwice : false,
702     role : false,
703     
704     getAutoCreate : function(){
705         
706         var cfg = {
707             tag: this.tag,
708             // cls: this.cls, double assign in parent class Component.js :: onRender
709             html: this.html
710         };
711         if (this.role !== false) {
712             cfg.role = this.role;
713         }
714         
715         return cfg;
716     },
717     
718     initEvents: function() 
719     {
720         Roo.bootstrap.Element.superclass.initEvents.call(this);
721         
722         if(this.clickable){
723             this.el.on('click', this.onClick, this);
724         }
725         
726         
727     },
728     
729     onClick : function(e)
730     {
731         if(this.preventDefault){
732             e.preventDefault();
733         }
734         
735         this.fireEvent('click', this, e); // why was this double click before?
736     },
737     
738     
739     
740
741     
742     
743     getValue : function()
744     {
745         return this.el.dom.innerHTML;
746     },
747     
748     setValue : function(value)
749     {
750         this.el.dom.innerHTML = value;
751     }
752    
753 });
754
755  
756
757  /*
758  * - LGPL
759  *
760  * dropable area
761  * 
762  */
763
764 /**
765  * @class Roo.bootstrap.DropTarget
766  * @extends Roo.bootstrap.Element
767  * Bootstrap DropTarget class
768  
769  * @cfg {string} name dropable name
770  * 
771  * @constructor
772  * Create a new Dropable Area
773  * @param {Object} config The config object
774  */
775
776 Roo.bootstrap.DropTarget = function(config){
777     Roo.bootstrap.DropTarget.superclass.constructor.call(this, config);
778     
779     this.addEvents({
780         // raw events
781         /**
782          * @event click
783          * When a element is chick
784          * @param {Roo.bootstrap.Element} this
785          * @param {Roo.EventObject} e
786          */
787         "drop" : true
788     });
789 };
790
791 Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element,  {
792     
793     
794     getAutoCreate : function(){
795         
796          
797     },
798     
799     initEvents: function() 
800     {
801         Roo.bootstrap.DropTarget.superclass.initEvents.call(this);
802         this.dropZone = new Roo.dd.DropTarget(this.getEl(), {
803             ddGroup: this.name,
804             listeners : {
805                 drop : this.dragDrop.createDelegate(this),
806                 enter : this.dragEnter.createDelegate(this),
807                 out : this.dragOut.createDelegate(this),
808                 over : this.dragOver.createDelegate(this)
809             }
810             
811         });
812         this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff
813     },
814     
815     dragDrop : function(source,e,data)
816     {
817         // user has to decide how to impliment this.
818         Roo.log('drop');
819         Roo.log(this);
820         //this.fireEvent('drop', this, source, e ,data);
821         return false;
822     },
823     
824     dragEnter : function(n, dd, e, data)
825     {
826         // probably want to resize the element to match the dropped element..
827         Roo.log("enter");
828         this.originalSize = this.el.getSize();
829         this.el.setSize( n.el.getSize());
830         this.dropZone.DDM.refreshCache(this.name);
831         Roo.log([n, dd, e, data]);
832     },
833     
834     dragOut : function(value)
835     {
836         // resize back to normal
837         Roo.log("out");
838         this.el.setSize(this.originalSize);
839         this.dropZone.resetConstraints();
840     },
841     
842     dragOver : function()
843     {
844         // ??? do nothing?
845     }
846    
847 });
848
849  
850
851  /*
852  * - LGPL
853  *
854  * Body
855  *
856  */
857
858 /**
859  * @class Roo.bootstrap.Body
860  * @extends Roo.bootstrap.Component
861  * @children Roo.bootstrap.Component 
862  * @parent none builder
863  * Bootstrap Body class
864  *
865  * @constructor
866  * Create a new body
867  * @param {Object} config The config object
868  */
869
870 Roo.bootstrap.Body = function(config){
871
872     config = config || {};
873
874     Roo.bootstrap.Body.superclass.constructor.call(this, config);
875     this.el = Roo.get(config.el ? config.el : document.body );
876     if (this.cls && this.cls.length) {
877         Roo.get(document.body).addClass(this.cls);
878     }
879 };
880
881 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component,  {
882
883     is_body : true,// just to make sure it's constructed?
884
885         autoCreate : {
886         cls: 'container'
887     },
888     onRender : function(ct, position)
889     {
890        /* Roo.log("Roo.bootstrap.Body - onRender");
891         if (this.cls && this.cls.length) {
892             Roo.get(document.body).addClass(this.cls);
893         }
894         // style??? xttr???
895         */
896     }
897
898
899
900
901 });
902 /*
903  * - LGPL
904  *
905  * button group
906  * 
907  */
908
909
910 /**
911  * @class Roo.bootstrap.ButtonGroup
912  * @extends Roo.bootstrap.Component
913  * Bootstrap ButtonGroup class
914  * @children Roo.bootstrap.Button Roo.bootstrap.form.Form
915  * 
916  * @cfg {String} size lg | sm | xs (default empty normal)
917  * @cfg {String} align vertical | justified  (default none)
918  * @cfg {String} direction up | down (default down)
919  * @cfg {Boolean} toolbar false | true
920  * @cfg {Boolean} btn true | false
921  * 
922  * 
923  * @constructor
924  * Create a new Input
925  * @param {Object} config The config object
926  */
927
928 Roo.bootstrap.ButtonGroup = function(config){
929     Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
930 };
931
932 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
933     
934     size: '',
935     align: '',
936     direction: '',
937     toolbar: false,
938     btn: true,
939
940     getAutoCreate : function(){
941         var cfg = {
942             cls: 'btn-group',
943             html : null
944         };
945         
946         cfg.html = this.html || cfg.html;
947         
948         if (this.toolbar) {
949             cfg = {
950                 cls: 'btn-toolbar',
951                 html: null
952             };
953             
954             return cfg;
955         }
956         
957         if (['vertical','justified'].indexOf(this.align)!==-1) {
958             cfg.cls = 'btn-group-' + this.align;
959             
960             if (this.align == 'justified') {
961                 console.log(this.items);
962             }
963         }
964         
965         if (['lg','sm','xs'].indexOf(this.size)!==-1) {
966             cfg.cls += ' btn-group-' + this.size;
967         }
968         
969         if (this.direction == 'up') {
970             cfg.cls += ' dropup' ;
971         }
972         
973         return cfg;
974     },
975     /**
976      * Add a button to the group (similar to NavItem API.)
977      */
978     addItem : function(cfg)
979     {
980         var cn = new Roo.bootstrap.Button(cfg);
981         //this.register(cn);
982         cn.parentId = this.id;
983         cn.onRender(this.el, null);
984         return cn;
985     }
986    
987 });
988
989  /*
990  * - LGPL
991  *
992  * button
993  * 
994  */
995
996 /**
997  * @class Roo.bootstrap.Button
998  * @extends Roo.bootstrap.Component
999  * Bootstrap Button class
1000  * @cfg {String} html The button content
1001  * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
1002  * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button)
1003  * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
1004  * @cfg {String} size (lg|sm|xs)
1005  * @cfg {String} tag (a|input|submit)
1006  * @cfg {String} href empty or href
1007  * @cfg {Boolean} disabled default false;
1008  * @cfg {Boolean} isClose default false;
1009  * @cfg {String} glyphicon depricated - use fa
1010  * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
1011  * @cfg {String} badge text for badge
1012  * @cfg {String} theme (default|glow)  
1013  * @cfg {Boolean} inverse dark themed version
1014  * @cfg {Boolean} toggle is it a slidy toggle button
1015  * @cfg {Boolean} pressed   default null - if the button ahs active state
1016  * @cfg {String} ontext text for on slidy toggle state
1017  * @cfg {String} offtext text for off slidy toggle state
1018  * @cfg {Boolean} preventDefault  default true (stop click event triggering the URL if it's a link.)
1019  * @cfg {Boolean} removeClass remove the standard class..
1020  * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. 
1021  * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
1022  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
1023
1024  * @constructor
1025  * Create a new button
1026  * @param {Object} config The config object
1027  */
1028
1029
1030 Roo.bootstrap.Button = function(config){
1031     Roo.bootstrap.Button.superclass.constructor.call(this, config);
1032     
1033     this.addEvents({
1034         // raw events
1035         /**
1036          * @event click
1037          * When a button is pressed
1038          * @param {Roo.bootstrap.Button} btn
1039          * @param {Roo.EventObject} e
1040          */
1041         "click" : true,
1042         /**
1043          * @event dblclick
1044          * When a button is double clicked
1045          * @param {Roo.bootstrap.Button} btn
1046          * @param {Roo.EventObject} e
1047          */
1048         "dblclick" : true,
1049          /**
1050          * @event toggle
1051          * After the button has been toggles
1052          * @param {Roo.bootstrap.Button} btn
1053          * @param {Roo.EventObject} e
1054          * @param {boolean} pressed (also available as button.pressed)
1055          */
1056         "toggle" : true
1057     });
1058 };
1059
1060 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
1061     html: false,
1062     active: false,
1063     weight: '',
1064     badge_weight: '',
1065     outline : false,
1066     size: '',
1067     tag: 'button',
1068     href: '',
1069     disabled: false,
1070     isClose: false,
1071     glyphicon: '',
1072     fa: '',
1073     badge: '',
1074     theme: 'default',
1075     inverse: false,
1076     
1077     toggle: false,
1078     ontext: 'ON',
1079     offtext: 'OFF',
1080     defaulton: true,
1081     preventDefault: true,
1082     removeClass: false,
1083     name: false,
1084     target: false,
1085     group : false,
1086      
1087     pressed : null,
1088      
1089     
1090     getAutoCreate : function(){
1091         
1092         var cfg = {
1093             tag : 'button',
1094             cls : 'roo-button',
1095             html: ''
1096         };
1097         
1098         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
1099             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
1100             this.tag = 'button';
1101         } else {
1102             cfg.tag = this.tag;
1103         }
1104         cfg.html = '<span class="roo-button-text">' + (this.html || cfg.html) + '</span>';
1105         
1106         if (this.toggle == true) {
1107             cfg={
1108                 tag: 'div',
1109                 cls: 'slider-frame roo-button',
1110                 cn: [
1111                     {
1112                         tag: 'span',
1113                         'data-on-text':'ON',
1114                         'data-off-text':'OFF',
1115                         cls: 'slider-button',
1116                         html: this.offtext
1117                     }
1118                 ]
1119             };
1120             // why are we validating the weights?
1121             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1122                 cfg.cls +=  ' ' + this.weight;
1123             }
1124             
1125             return cfg;
1126         }
1127         
1128         if (this.isClose) {
1129             cfg.cls += ' close';
1130             
1131             cfg["aria-hidden"] = true;
1132             
1133             cfg.html = "&times;";
1134             
1135             return cfg;
1136         }
1137              
1138         
1139         if (this.theme==='default') {
1140             cfg.cls = 'btn roo-button';
1141             
1142             //if (this.parentType != 'Navbar') {
1143             this.weight = this.weight.length ?  this.weight : 'default';
1144             //}
1145             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1146                 
1147                 var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
1148                 var weight = this.weight == 'default' ? 'secondary' : this.weight;
1149                 cfg.cls += ' btn-' + outline + weight;
1150                 if (this.weight == 'default') {
1151                     // BC
1152                     cfg.cls += ' btn-' + this.weight;
1153                 }
1154             }
1155         } else if (this.theme==='glow') {
1156             
1157             cfg.tag = 'a';
1158             cfg.cls = 'btn-glow roo-button';
1159             
1160             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1161                 
1162                 cfg.cls += ' ' + this.weight;
1163             }
1164         }
1165    
1166         
1167         if (this.inverse) {
1168             this.cls += ' inverse';
1169         }
1170         
1171         
1172         if (this.active || this.pressed === true) {
1173             cfg.cls += ' active';
1174         }
1175         
1176         if (this.disabled) {
1177             cfg.disabled = 'disabled';
1178         }
1179         
1180         if (this.items) {
1181             Roo.log('changing to ul' );
1182             cfg.tag = 'ul';
1183             this.glyphicon = 'caret';
1184             if (Roo.bootstrap.version == 4) {
1185                 this.fa = 'caret-down';
1186             }
1187             
1188         }
1189         
1190         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
1191          
1192         //gsRoo.log(this.parentType);
1193         if (this.parentType === 'Navbar' && !this.parent().bar) {
1194             Roo.log('changing to li?');
1195             
1196             cfg.tag = 'li';
1197             
1198             cfg.cls = '';
1199             cfg.cn =  [{
1200                 tag : 'a',
1201                 cls : 'roo-button',
1202                 html : this.html,
1203                 href : this.href || '#'
1204             }];
1205             if (this.menu) {
1206                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
1207                 cfg.cls += ' dropdown';
1208             }   
1209             
1210             delete cfg.html;
1211             
1212         }
1213         
1214        cfg.cls += this.parentType === 'Navbar' ?  ' navbar-btn' : '';
1215         
1216         if (this.glyphicon) {
1217             cfg.html = ' ' + cfg.html;
1218             
1219             cfg.cn = [
1220                 {
1221                     tag: 'span',
1222                     cls: 'glyphicon glyphicon-' + this.glyphicon
1223                 }
1224             ];
1225         }
1226         if (this.fa) {
1227             cfg.html = ' ' + cfg.html;
1228             
1229             cfg.cn = [
1230                 {
1231                     tag: 'i',
1232                     cls: 'fa fas fa-' + this.fa
1233                 }
1234             ];
1235         }
1236         
1237         if (this.badge) {
1238             cfg.html += ' ';
1239             
1240             cfg.tag = 'a';
1241             
1242 //            cfg.cls='btn roo-button';
1243             
1244             cfg.href=this.href;
1245             
1246             var value = cfg.html;
1247             
1248             if(this.glyphicon){
1249                 value = {
1250                     tag: 'span',
1251                     cls: 'glyphicon glyphicon-' + this.glyphicon,
1252                     html: this.html
1253                 };
1254             }
1255             if(this.fa){
1256                 value = {
1257                     tag: 'i',
1258                     cls: 'fa fas fa-' + this.fa,
1259                     html: this.html
1260                 };
1261             }
1262             
1263             var bw = this.badge_weight.length ? this.badge_weight :
1264                 (this.weight.length ? this.weight : 'secondary');
1265             bw = bw == 'default' ? 'secondary' : bw;
1266             
1267             cfg.cn = [
1268                 value,
1269                 {
1270                     tag: 'span',
1271                     cls: 'badge badge-' + bw,
1272                     html: this.badge
1273                 }
1274             ];
1275             
1276             cfg.html='';
1277         }
1278         
1279         if (this.menu) {
1280             cfg.cls += ' dropdown';
1281             cfg.html = typeof(cfg.html) != 'undefined' ?
1282                     cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
1283         }
1284         
1285         if (cfg.tag !== 'a' && this.href !== '') {
1286             throw "Tag must be a to set href.";
1287         } else if (this.href.length > 0) {
1288             cfg.href = this.href;
1289         }
1290         
1291         if(this.removeClass){
1292             cfg.cls = '';
1293         }
1294         
1295         if(this.target){
1296             cfg.target = this.target;
1297         }
1298         
1299         return cfg;
1300     },
1301     initEvents: function() {
1302        // Roo.log('init events?');
1303 //        Roo.log(this.el.dom);
1304         // add the menu...
1305         
1306         if (typeof (this.menu) != 'undefined') {
1307             this.menu.parentType = this.xtype;
1308             this.menu.triggerEl = this.el;
1309             this.addxtype(Roo.apply({}, this.menu));
1310         }
1311
1312
1313         if (this.el.hasClass('roo-button')) {
1314              this.el.on('click', this.onClick, this);
1315              this.el.on('dblclick', this.onDblClick, this);
1316         } else {
1317              this.el.select('.roo-button').on('click', this.onClick, this);
1318              this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
1319              
1320         }
1321         // why?
1322         if(this.removeClass){
1323             this.el.on('click', this.onClick, this);
1324         }
1325         
1326         if (this.group === true) {
1327              if (this.pressed === false || this.pressed === true) {
1328                 // nothing
1329             } else {
1330                 this.pressed = false;
1331                 this.setActive(this.pressed);
1332             }
1333             
1334         }
1335         
1336         this.el.enableDisplayMode();
1337         
1338     },
1339     onClick : function(e)
1340     {
1341         if (this.disabled) {
1342             return;
1343         }
1344         
1345         Roo.log('button on click ');
1346         if(this.href === '' || this.preventDefault){
1347             e.preventDefault();
1348         }
1349         
1350         if (this.group) {
1351             if (this.pressed) {
1352                 // do nothing -
1353                 return;
1354             }
1355             this.setActive(true);
1356             var pi = this.parent().items;
1357             for (var i = 0;i < pi.length;i++) {
1358                 if (this == pi[i]) {
1359                     continue;
1360                 }
1361                 if (pi[i].el.hasClass('roo-button')) {
1362                     pi[i].setActive(false);
1363                 }
1364             }
1365             this.fireEvent('click', this, e);            
1366             return;
1367         }
1368         
1369         if (this.pressed === true || this.pressed === false) {
1370             this.toggleActive(e);
1371         }
1372         
1373         
1374         this.fireEvent('click', this, e);
1375     },
1376     onDblClick: function(e)
1377     {
1378         if (this.disabled) {
1379             return;
1380         }
1381         if(this.preventDefault){
1382             e.preventDefault();
1383         }
1384         this.fireEvent('dblclick', this, e);
1385     },
1386     /**
1387      * Enables this button
1388      */
1389     enable : function()
1390     {
1391         this.disabled = false;
1392         this.el.removeClass('disabled');
1393         this.el.dom.removeAttribute("disabled");
1394     },
1395     
1396     /**
1397      * Disable this button
1398      */
1399     disable : function()
1400     {
1401         this.disabled = true;
1402         this.el.addClass('disabled');
1403         this.el.attr("disabled", "disabled")
1404     },
1405      /**
1406      * sets the active state on/off, 
1407      * @param {Boolean} state (optional) Force a particular state
1408      */
1409     setActive : function(v) {
1410         
1411         this.el[v ? 'addClass' : 'removeClass']('active');
1412         this.pressed = v;
1413     },
1414      /**
1415      * toggles the current active state 
1416      */
1417     toggleActive : function(e)
1418     {
1419         this.setActive(!this.pressed); // this modifies pressed...
1420         this.fireEvent('toggle', this, e, this.pressed);
1421     },
1422      /**
1423      * get the current active state
1424      * @return {boolean} true if it's active
1425      */
1426     isActive : function()
1427     {
1428         return this.el.hasClass('active');
1429     },
1430     /**
1431      * set the text of the first selected button
1432      */
1433     setText : function(str)
1434     {
1435         this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
1436     },
1437     /**
1438      * get the text of the first selected button
1439      */
1440     getText : function()
1441     {
1442         return this.el.select('.roo-button-text',true).first().dom.innerHTML;
1443     },
1444     
1445     setWeight : function(str)
1446     {
1447         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
1448         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
1449         this.weight = str;
1450         var outline = this.outline ? 'outline-' : '';
1451         if (str == 'default') {
1452             this.el.addClass('btn-default btn-outline-secondary');        
1453             return;
1454         }
1455         this.el.addClass('btn-' + outline + str);        
1456     }
1457     
1458     
1459 });
1460 // fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
1461
1462 Roo.bootstrap.Button.weights = [
1463     'default',
1464     'secondary' ,
1465     'primary',
1466     'success',
1467     'info',
1468     'warning',
1469     'danger',
1470     'link',
1471     'light',
1472     'dark'              
1473    
1474 ];/*
1475  * - LGPL
1476  *
1477  * column
1478  * 
1479  */
1480
1481 /**
1482  * @class Roo.bootstrap.Column
1483  * @extends Roo.bootstrap.Component
1484  * @children Roo.bootstrap.Component
1485  * Bootstrap Column class
1486  * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
1487  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
1488  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
1489  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
1490  * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
1491  * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
1492  * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
1493  * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
1494  *
1495  * 
1496  * @cfg {Boolean} hidden (true|false) hide the element
1497  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1498  * @cfg {String} fa (ban|check|...) font awesome icon
1499  * @cfg {Number} fasize (1|2|....) font awsome size
1500
1501  * @cfg {String} icon (info-sign|check|...) glyphicon name
1502
1503  * @cfg {String} html content of column.
1504  * 
1505  * @constructor
1506  * Create a new Column
1507  * @param {Object} config The config object
1508  */
1509
1510 Roo.bootstrap.Column = function(config){
1511     Roo.bootstrap.Column.superclass.constructor.call(this, config);
1512 };
1513
1514 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
1515     
1516     xs: false,
1517     sm: false,
1518     md: false,
1519     lg: false,
1520     xsoff: false,
1521     smoff: false,
1522     mdoff: false,
1523     lgoff: false,
1524     html: '',
1525     offset: 0,
1526     alert: false,
1527     fa: false,
1528     icon : false,
1529     hidden : false,
1530     fasize : 1,
1531     
1532     getAutoCreate : function(){
1533         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
1534         
1535         cfg = {
1536             tag: 'div',
1537             cls: 'column'
1538         };
1539         
1540         var settings=this;
1541         var sizes =   ['xs','sm','md','lg'];
1542         sizes.map(function(size ,ix){
1543             //Roo.log( size + ':' + settings[size]);
1544             
1545             if (settings[size+'off'] !== false) {
1546                 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
1547             }
1548             
1549             if (settings[size] === false) {
1550                 return;
1551             }
1552             
1553             if (!settings[size]) { // 0 = hidden
1554                 cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
1555                 // bootsrap4
1556                 for (var i = ix; i > -1; i--) {
1557                     cfg.cls +=  ' d-' + sizes[i] + '-none'; 
1558                 }
1559                 
1560                 
1561                 return;
1562             }
1563             cfg.cls += ' col-' + size + '-' + settings[size] + (
1564                 size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
1565             );
1566             
1567         });
1568         
1569         if (this.hidden) {
1570             cfg.cls += ' hidden';
1571         }
1572         
1573         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1574             cfg.cls +=' alert alert-' + this.alert;
1575         }
1576         
1577         
1578         if (this.html.length) {
1579             cfg.html = this.html;
1580         }
1581         if (this.fa) {
1582             var fasize = '';
1583             if (this.fasize > 1) {
1584                 fasize = ' fa-' + this.fasize + 'x';
1585             }
1586             cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
1587             
1588             
1589         }
1590         if (this.icon) {
1591             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
1592         }
1593         
1594         return cfg;
1595     }
1596    
1597 });
1598
1599  
1600
1601  /*
1602  * - LGPL
1603  *
1604  * page container.
1605  * 
1606  */
1607
1608
1609 /**
1610  * @class Roo.bootstrap.Container
1611  * @extends Roo.bootstrap.Component
1612  * @children Roo.bootstrap.Component
1613  * @parent builder
1614  * Bootstrap Container class
1615  * @cfg {Boolean} jumbotron is it a jumbotron element
1616  * @cfg {String} html content of element
1617  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
1618  * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel  - type - primary/success.....
1619  * @cfg {String} header content of header (for panel)
1620  * @cfg {String} footer content of footer (for panel)
1621  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
1622  * @cfg {String} tag (header|aside|section) type of HTML tag.
1623  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1624  * @cfg {String} fa font awesome icon
1625  * @cfg {String} icon (info-sign|check|...) glyphicon name
1626  * @cfg {Boolean} hidden (true|false) hide the element
1627  * @cfg {Boolean} expandable (true|false) default false
1628  * @cfg {Boolean} expanded (true|false) default true
1629  * @cfg {String} rheader contet on the right of header
1630  * @cfg {Boolean} clickable (true|false) default false
1631
1632  *     
1633  * @constructor
1634  * Create a new Container
1635  * @param {Object} config The config object
1636  */
1637
1638 Roo.bootstrap.Container = function(config){
1639     Roo.bootstrap.Container.superclass.constructor.call(this, config);
1640     
1641     this.addEvents({
1642         // raw events
1643          /**
1644          * @event expand
1645          * After the panel has been expand
1646          * 
1647          * @param {Roo.bootstrap.Container} this
1648          */
1649         "expand" : true,
1650         /**
1651          * @event collapse
1652          * After the panel has been collapsed
1653          * 
1654          * @param {Roo.bootstrap.Container} this
1655          */
1656         "collapse" : true,
1657         /**
1658          * @event click
1659          * When a element is chick
1660          * @param {Roo.bootstrap.Container} this
1661          * @param {Roo.EventObject} e
1662          */
1663         "click" : true
1664     });
1665 };
1666
1667 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
1668     
1669     jumbotron : false,
1670     well: '',
1671     panel : '',
1672     header: '',
1673     footer : '',
1674     sticky: '',
1675     tag : false,
1676     alert : false,
1677     fa: false,
1678     icon : false,
1679     expandable : false,
1680     rheader : '',
1681     expanded : true,
1682     clickable: false,
1683   
1684      
1685     getChildContainer : function() {
1686         
1687         if(!this.el){
1688             return false;
1689         }
1690         
1691         if (this.panel.length) {
1692             return this.el.select('.panel-body',true).first();
1693         }
1694         
1695         return this.el;
1696     },
1697     
1698     
1699     getAutoCreate : function(){
1700         
1701         var cfg = {
1702             tag : this.tag || 'div',
1703             html : '',
1704             cls : ''
1705         };
1706         if (this.jumbotron) {
1707             cfg.cls = 'jumbotron';
1708         }
1709         
1710         
1711         
1712         // - this is applied by the parent..
1713         //if (this.cls) {
1714         //    cfg.cls = this.cls + '';
1715         //}
1716         
1717         if (this.sticky.length) {
1718             
1719             var bd = Roo.get(document.body);
1720             if (!bd.hasClass('bootstrap-sticky')) {
1721                 bd.addClass('bootstrap-sticky');
1722                 Roo.select('html',true).setStyle('height', '100%');
1723             }
1724              
1725             cfg.cls += 'bootstrap-sticky-' + this.sticky;
1726         }
1727         
1728         
1729         if (this.well.length) {
1730             switch (this.well) {
1731                 case 'lg':
1732                 case 'sm':
1733                     cfg.cls +=' well well-' +this.well;
1734                     break;
1735                 default:
1736                     cfg.cls +=' well';
1737                     break;
1738             }
1739         }
1740         
1741         if (this.hidden) {
1742             cfg.cls += ' hidden';
1743         }
1744         
1745         
1746         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1747             cfg.cls +=' alert alert-' + this.alert;
1748         }
1749         
1750         var body = cfg;
1751         
1752         if (this.panel.length) {
1753             cfg.cls += ' panel panel-' + this.panel;
1754             cfg.cn = [];
1755             if (this.header.length) {
1756                 
1757                 var h = [];
1758                 
1759                 if(this.expandable){
1760                     
1761                     cfg.cls = cfg.cls + ' expandable';
1762                     
1763                     h.push({
1764                         tag: 'i',
1765                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus') 
1766                     });
1767                     
1768                 }
1769                 
1770                 h.push(
1771                     {
1772                         tag: 'span',
1773                         cls : 'panel-title',
1774                         html : (this.expandable ? '&nbsp;' : '') + this.header
1775                     },
1776                     {
1777                         tag: 'span',
1778                         cls: 'panel-header-right',
1779                         html: this.rheader
1780                     }
1781                 );
1782                 
1783                 cfg.cn.push({
1784                     cls : 'panel-heading',
1785                     style : this.expandable ? 'cursor: pointer' : '',
1786                     cn : h
1787                 });
1788                 
1789             }
1790             
1791             body = false;
1792             cfg.cn.push({
1793                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
1794                 html : this.html
1795             });
1796             
1797             
1798             if (this.footer.length) {
1799                 cfg.cn.push({
1800                     cls : 'panel-footer',
1801                     html : this.footer
1802                     
1803                 });
1804             }
1805             
1806         }
1807         
1808         if (body) {
1809             body.html = this.html || cfg.html;
1810             // prefix with the icons..
1811             if (this.fa) {
1812                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
1813             }
1814             if (this.icon) {
1815                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
1816             }
1817             
1818             
1819         }
1820         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
1821             cfg.cls =  'container';
1822         }
1823         
1824         return cfg;
1825     },
1826     
1827     initEvents: function() 
1828     {
1829         if(this.expandable){
1830             var headerEl = this.headerEl();
1831         
1832             if(headerEl){
1833                 headerEl.on('click', this.onToggleClick, this);
1834             }
1835         }
1836         
1837         if(this.clickable){
1838             this.el.on('click', this.onClick, this);
1839         }
1840         
1841     },
1842     
1843     onToggleClick : function()
1844     {
1845         var headerEl = this.headerEl();
1846         
1847         if(!headerEl){
1848             return;
1849         }
1850         
1851         if(this.expanded){
1852             this.collapse();
1853             return;
1854         }
1855         
1856         this.expand();
1857     },
1858     
1859     expand : function()
1860     {
1861         if(this.fireEvent('expand', this)) {
1862             
1863             this.expanded = true;
1864             
1865             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
1866             
1867             this.el.select('.panel-body',true).first().removeClass('hide');
1868             
1869             var toggleEl = this.toggleEl();
1870
1871             if(!toggleEl){
1872                 return;
1873             }
1874
1875             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-minus']);
1876         }
1877         
1878     },
1879     
1880     collapse : function()
1881     {
1882         if(this.fireEvent('collapse', this)) {
1883             
1884             this.expanded = false;
1885             
1886             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
1887             this.el.select('.panel-body',true).first().addClass('hide');
1888         
1889             var toggleEl = this.toggleEl();
1890
1891             if(!toggleEl){
1892                 return;
1893             }
1894
1895             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-plus']);
1896         }
1897     },
1898     
1899     toggleEl : function()
1900     {
1901         if(!this.el || !this.panel.length || !this.header.length || !this.expandable){
1902             return;
1903         }
1904         
1905         return this.el.select('.panel-heading .fa',true).first();
1906     },
1907     
1908     headerEl : function()
1909     {
1910         if(!this.el || !this.panel.length || !this.header.length){
1911             return;
1912         }
1913         
1914         return this.el.select('.panel-heading',true).first()
1915     },
1916     
1917     bodyEl : function()
1918     {
1919         if(!this.el || !this.panel.length){
1920             return;
1921         }
1922         
1923         return this.el.select('.panel-body',true).first()
1924     },
1925     
1926     titleEl : function()
1927     {
1928         if(!this.el || !this.panel.length || !this.header.length){
1929             return;
1930         }
1931         
1932         return this.el.select('.panel-title',true).first();
1933     },
1934     
1935     setTitle : function(v)
1936     {
1937         var titleEl = this.titleEl();
1938         
1939         if(!titleEl){
1940             return;
1941         }
1942         
1943         titleEl.dom.innerHTML = v;
1944     },
1945     
1946     getTitle : function()
1947     {
1948         
1949         var titleEl = this.titleEl();
1950         
1951         if(!titleEl){
1952             return '';
1953         }
1954         
1955         return titleEl.dom.innerHTML;
1956     },
1957     
1958     setRightTitle : function(v)
1959     {
1960         var t = this.el.select('.panel-header-right',true).first();
1961         
1962         if(!t){
1963             return;
1964         }
1965         
1966         t.dom.innerHTML = v;
1967     },
1968     
1969     onClick : function(e)
1970     {
1971         e.preventDefault();
1972         
1973         this.fireEvent('click', this, e);
1974     }
1975 });
1976
1977  /**
1978  * @class Roo.bootstrap.Card
1979  * @extends Roo.bootstrap.Component
1980  * @children Roo.bootstrap.Component
1981  * @licence LGPL
1982  * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
1983  *
1984  *
1985  * possible... may not be implemented..
1986  * @cfg {String} header_image  src url of image.
1987  * @cfg {String|Object} header
1988  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
1989  * @cfg {Number} header_weight  (primary|secondary|success|info|warning|danger|light|dark)
1990  * 
1991  * @cfg {String} title
1992  * @cfg {String} subtitle
1993  * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
1994  * @cfg {String} footer
1995  
1996  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
1997  * 
1998  * @cfg {String} margin (0|1|2|3|4|5|auto)
1999  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
2000  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
2001  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
2002  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
2003  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
2004  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
2005  *
2006  * @cfg {String} padding (0|1|2|3|4|5)
2007  * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card
2008  * @cfg {String} padding_bottom (0|1|2|3|4|5)
2009  * @cfg {String} padding_left (0|1|2|3|4|5)
2010  * @cfg {String} padding_right (0|1|2|3|4|5)
2011  * @cfg {String} padding_x (0|1|2|3|4|5)
2012  * @cfg {String} padding_y (0|1|2|3|4|5)
2013  *
2014  * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2015  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2016  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2017  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2018  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2019  
2020  * @config {Boolean} dragable  if this card can be dragged.
2021  * @config {String} drag_group  group for drag
2022  * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
2023  * @config {String} drop_group  group for drag
2024  * 
2025  * @config {Boolean} collapsable can the body be collapsed.
2026  * @config {Boolean} collapsed is the body collapsed when rendered...
2027  * @config {Boolean} rotateable can the body be rotated by clicking on it..
2028  * @config {Boolean} rotated is the body rotated when rendered...
2029  * 
2030  * @constructor
2031  * Create a new Container
2032  * @param {Object} config The config object
2033  */
2034
2035 Roo.bootstrap.Card = function(config){
2036     Roo.bootstrap.Card.superclass.constructor.call(this, config);
2037     
2038     this.addEvents({
2039          // raw events
2040         /**
2041          * @event drop
2042          * When a element a card is dropped
2043          * @param {Roo.bootstrap.Card} this
2044          *
2045          * 
2046          * @param {Roo.bootstrap.Card} move_card the card being dropped?
2047          * @param {String} position 'above' or 'below'
2048          * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list.
2049         
2050          */
2051         'drop' : true,
2052          /**
2053          * @event rotate
2054          * When a element a card is rotate
2055          * @param {Roo.bootstrap.Card} this
2056          * @param {Roo.Element} n the node being dropped?
2057          * @param {Boolean} rotate status
2058          */
2059         'rotate' : true,
2060         /**
2061          * @event cardover
2062          * When a card element is dragged over ready to drop (return false to block dropable)
2063          * @param {Roo.bootstrap.Card} this
2064          * @param {Object} data from dragdrop 
2065          */
2066          'cardover' : true
2067          
2068     });
2069 };
2070
2071
2072 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
2073     
2074     
2075     weight : '',
2076     
2077     margin: '', /// may be better in component?
2078     margin_top: '', 
2079     margin_bottom: '', 
2080     margin_left: '',
2081     margin_right: '',
2082     margin_x: '',
2083     margin_y: '',
2084     
2085     padding : '',
2086     padding_top: '', 
2087     padding_bottom: '', 
2088     padding_left: '',
2089     padding_right: '',
2090     padding_x: '',
2091     padding_y: '',
2092     
2093     display: '', 
2094     display_xs: '', 
2095     display_sm: '', 
2096     display_lg: '',
2097     display_xl: '',
2098  
2099     header_image  : '',
2100     header : '',
2101     header_size : 0,
2102     title : '',
2103     subtitle : '',
2104     html : '',
2105     footer: '',
2106
2107     collapsable : false,
2108     collapsed : false,
2109     rotateable : false,
2110     rotated : false,
2111     
2112     dragable : false,
2113     drag_group : false,
2114     dropable : false,
2115     drop_group : false,
2116     childContainer : false,
2117     dropEl : false, /// the dom placeholde element that indicates drop location.
2118     containerEl: false, // body container
2119     bodyEl: false, // card-body
2120     headerContainerEl : false, //
2121     headerEl : false,
2122     header_imageEl : false,
2123     
2124     
2125     layoutCls : function()
2126     {
2127         var cls = '';
2128         var t = this;
2129         Roo.log(this.margin_bottom.length);
2130         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
2131             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
2132             
2133             if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
2134                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
2135             }
2136             if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
2137                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
2138             }
2139         });
2140         
2141         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
2142             if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
2143                 cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
2144             }
2145         });
2146         
2147         // more generic support?
2148         if (this.hidden) {
2149             cls += ' d-none';
2150         }
2151         
2152         return cls;
2153     },
2154  
2155        // Roo.log("Call onRender: " + this.xtype);
2156         /*  We are looking at something like this.
2157 <div class="card">
2158     <img src="..." class="card-img-top" alt="...">
2159     <div class="card-body">
2160         <h5 class="card-title">Card title</h5>
2161          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
2162
2163         >> this bit is really the body...
2164         <div> << we will ad dthis in hopefully it will not break shit.
2165         
2166         ** card text does not actually have any styling...
2167         
2168             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
2169         
2170         </div> <<
2171           <a href="#" class="card-link">Card link</a>
2172           
2173     </div>
2174     <div class="card-footer">
2175         <small class="text-muted">Last updated 3 mins ago</small>
2176     </div>
2177 </div>
2178          */
2179     getAutoCreate : function(){
2180         
2181         var cfg = {
2182             tag : 'div',
2183             cls : 'card',
2184             cn : [ ]
2185         };
2186         
2187         if (this.weight.length && this.weight != 'light') {
2188             cfg.cls += ' text-white';
2189         } else {
2190             cfg.cls += ' text-dark'; // need as it's nested..
2191         }
2192         if (this.weight.length) {
2193             cfg.cls += ' bg-' + this.weight;
2194         }
2195         
2196         cfg.cls += ' ' + this.layoutCls(); 
2197         
2198         var hdr = false;
2199         var hdr_ctr = false;
2200         if (this.header.length) {
2201             hdr = {
2202                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
2203                 cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2204                 cn : []
2205             };
2206             cfg.cn.push(hdr);
2207             hdr_ctr = hdr;
2208         } else {
2209             hdr = {
2210                 tag : 'div',
2211                 cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2212                 cn : []
2213             };
2214             cfg.cn.push(hdr);
2215             hdr_ctr = hdr;
2216         }
2217         if (this.collapsable) {
2218             hdr_ctr = {
2219             tag : 'a',
2220             cls : 'd-block user-select-none',
2221             cn: [
2222                     {
2223                         tag: 'i',
2224                         cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
2225                     }
2226                    
2227                 ]
2228             };
2229             hdr.cn.push(hdr_ctr);
2230         }
2231         
2232         hdr_ctr.cn.push(        {
2233             tag: 'span',
2234             cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
2235             html : this.header
2236         });
2237         
2238         
2239         if (this.header_image.length) {
2240             cfg.cn.push({
2241                 tag : 'img',
2242                 cls : 'card-img-top',
2243                 src: this.header_image // escape?
2244             });
2245         } else {
2246             cfg.cn.push({
2247                     tag : 'div',
2248                     cls : 'card-img-top d-none' 
2249                 });
2250         }
2251             
2252         var body = {
2253             tag : 'div',
2254             cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
2255             cn : []
2256         };
2257         var obody = body;
2258         if (this.collapsable || this.rotateable) {
2259             obody = {
2260                 tag: 'div',
2261                 cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
2262                 cn : [  body ]
2263             };
2264         }
2265         
2266         cfg.cn.push(obody);
2267         
2268         if (this.title.length) {
2269             body.cn.push({
2270                 tag : 'div',
2271                 cls : 'card-title',
2272                 src: this.title // escape?
2273             });
2274         }  
2275         
2276         if (this.subtitle.length) {
2277             body.cn.push({
2278                 tag : 'div',
2279                 cls : 'card-title',
2280                 src: this.subtitle // escape?
2281             });
2282         }
2283         
2284         body.cn.push({
2285             tag : 'div',
2286             cls : 'roo-card-body-ctr'
2287         });
2288         
2289         if (this.html.length) {
2290             body.cn.push({
2291                 tag: 'div',
2292                 html : this.html
2293             });
2294         }
2295         // fixme ? handle objects?
2296         
2297         if (this.footer.length) {
2298            
2299             cfg.cn.push({
2300                 cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
2301                 html : this.footer
2302             });
2303             
2304         } else {
2305             cfg.cn.push({cls : 'card-footer d-none'});
2306         }
2307         
2308         // footer...
2309         
2310         return cfg;
2311     },
2312     
2313     
2314     getCardHeader : function()
2315     {
2316         var  ret = this.el.select('.card-header',true).first();
2317         if (ret.hasClass('d-none')) {
2318             ret.removeClass('d-none');
2319         }
2320         
2321         return ret;
2322     },
2323     getCardFooter : function()
2324     {
2325         var  ret = this.el.select('.card-footer',true).first();
2326         if (ret.hasClass('d-none')) {
2327             ret.removeClass('d-none');
2328         }
2329         
2330         return ret;
2331     },
2332     getCardImageTop : function()
2333     {
2334         var  ret = this.header_imageEl;
2335         if (ret.hasClass('d-none')) {
2336             ret.removeClass('d-none');
2337         }
2338             
2339         return ret;
2340     },
2341     
2342     getChildContainer : function()
2343     {
2344         
2345         if(!this.el){
2346             return false;
2347         }
2348         return this.el.select('.roo-card-body-ctr',true).first();    
2349     },
2350     
2351     initEvents: function() 
2352     {
2353         this.bodyEl = this.el.select('.card-body',true).first(); 
2354         this.containerEl = this.getChildContainer();
2355         if(this.dragable){
2356             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
2357                     containerScroll: true,
2358                     ddGroup: this.drag_group || 'default_card_drag_group'
2359             });
2360             this.dragZone.getDragData = this.getDragData.createDelegate(this);
2361         }
2362         if (this.dropable) {
2363             this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
2364                 containerScroll: true,
2365                 ddGroup: this.drop_group || 'default_card_drag_group'
2366             });
2367             this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
2368             this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
2369             this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
2370             this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
2371             this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
2372         }
2373         
2374         if (this.collapsable) {
2375             this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
2376         }
2377         if (this.rotateable) {
2378             this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
2379         }
2380         this.collapsableEl = this.el.select('.roo-collapsable',true).first();
2381          
2382         this.footerEl = this.el.select('.card-footer',true).first();
2383         this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first();
2384         this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first();
2385         this.headerEl = this.el.select('.card-header',true).first();
2386         
2387         if (this.rotated) {
2388             this.el.addClass('roo-card-rotated');
2389             this.fireEvent('rotate', this, true);
2390         }
2391         this.header_imageEl = this.el.select('.card-img-top',true).first(); 
2392         this.header_imageEl.on('load', this.onHeaderImageLoad, this );
2393         
2394     },
2395     getDragData : function(e)
2396     {
2397         var target = this.getEl();
2398         if (target) {
2399             //this.handleSelection(e);
2400             
2401             var dragData = {
2402                 source: this,
2403                 copy: false,
2404                 nodes: this.getEl(),
2405                 records: []
2406             };
2407             
2408             
2409             dragData.ddel = target.dom ;    // the div element
2410             Roo.log(target.getWidth( ));
2411             dragData.ddel.style.width = target.getWidth() + 'px';
2412             
2413             return dragData;
2414         }
2415         return false;
2416     },
2417     /**
2418     *    Part of the Roo.dd.DropZone interface. If no target node is found, the
2419     *    whole Element becomes the target, and this causes the drop gesture to append.
2420     *
2421     *    Returns an object:
2422     *     {
2423            
2424            position : 'below' or 'above'
2425            card  : relateive to card OBJECT (or true for no cards listed)
2426            items_n : relative to nth item in list
2427            card_n : relative to  nth card in list
2428     }
2429     *
2430     *    
2431     */
2432     getTargetFromEvent : function(e, dragged_card_el)
2433     {
2434         var target = e.getTarget();
2435         while ((target !== null) && (target.parentNode != this.containerEl.dom)) {
2436             target = target.parentNode;
2437         }
2438         
2439         var ret = {
2440             position: '',
2441             cards : [],
2442             card_n : -1,
2443             items_n : -1,
2444             card : false 
2445         };
2446         
2447         //Roo.log([ 'target' , target ? target.id : '--nothing--']);
2448         // see if target is one of the 'cards'...
2449         
2450         
2451         //Roo.log(this.items.length);
2452         var pos = false;
2453         
2454         var last_card_n = 0;
2455         var cards_len  = 0;
2456         for (var i = 0;i< this.items.length;i++) {
2457             
2458             if (!this.items[i].el.hasClass('card')) {
2459                  continue;
2460             }
2461             pos = this.getDropPoint(e, this.items[i].el.dom);
2462             
2463             cards_len = ret.cards.length;
2464             //Roo.log(this.items[i].el.dom.id);
2465             ret.cards.push(this.items[i]);
2466             last_card_n  = i;
2467             if (ret.card_n < 0 && pos == 'above') {
2468                 ret.position = cards_len > 0 ? 'below' : pos;
2469                 ret.items_n = i > 0 ? i - 1 : 0;
2470                 ret.card_n  = cards_len  > 0 ? cards_len - 1 : 0;
2471                 ret.card = ret.cards[ret.card_n];
2472             }
2473         }
2474         if (!ret.cards.length) {
2475             ret.card = true;
2476             ret.position = 'below';
2477             ret.items_n;
2478             return ret;
2479         }
2480         // could not find a card.. stick it at the end..
2481         if (ret.card_n < 0) {
2482             ret.card_n = last_card_n;
2483             ret.card = ret.cards[last_card_n];
2484             ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
2485             ret.position = 'below';
2486         }
2487         
2488         if (this.items[ret.items_n].el == dragged_card_el) {
2489             return false;
2490         }
2491         
2492         if (ret.position == 'below') {
2493             var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
2494             
2495             if (card_after  && card_after.el == dragged_card_el) {
2496                 return false;
2497             }
2498             return ret;
2499         }
2500         
2501         // its's after ..
2502         var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
2503         
2504         if (card_before  && card_before.el == dragged_card_el) {
2505             return false;
2506         }
2507         
2508         return ret;
2509     },
2510     
2511     onNodeEnter : function(n, dd, e, data){
2512         return false;
2513     },
2514     onNodeOver : function(n, dd, e, data)
2515     {
2516        
2517         var target_info = this.getTargetFromEvent(e,data.source.el);
2518         if (target_info === false) {
2519             this.dropPlaceHolder('hide');
2520             return false;
2521         }
2522         Roo.log(['getTargetFromEvent', target_info ]);
2523         
2524         
2525         if (this.fireEvent('cardover', this, [ data ]) === false) {
2526             return false;
2527         }
2528         
2529         this.dropPlaceHolder('show', target_info,data);
2530         
2531         return false; 
2532     },
2533     onNodeOut : function(n, dd, e, data){
2534         this.dropPlaceHolder('hide');
2535      
2536     },
2537     onNodeDrop : function(n, dd, e, data)
2538     {
2539         
2540         // call drop - return false if
2541         
2542         // this could actually fail - if the Network drops..
2543         // we will ignore this at present..- client should probably reload
2544         // the whole set of cards if stuff like that fails.
2545         
2546         
2547         var info = this.getTargetFromEvent(e,data.source.el);
2548         if (info === false) {
2549             return false;
2550         }
2551         this.dropPlaceHolder('hide');
2552   
2553           
2554     
2555         this.acceptCard(data.source, info.position, info.card, info.items_n);
2556         return true;
2557          
2558     },
2559     firstChildCard : function()
2560     {
2561         for (var i = 0;i< this.items.length;i++) {
2562             
2563             if (!this.items[i].el.hasClass('card')) {
2564                  continue;
2565             }
2566             return this.items[i];
2567         }
2568         return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards...
2569     },
2570     /**
2571      * accept card
2572      *
2573      * -        card.acceptCard(move_card, info.position, info.card, info.items_n);
2574      */
2575     acceptCard : function(move_card,  position, next_to_card )
2576     {
2577         if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) {
2578             return false;
2579         }
2580         
2581         var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
2582         
2583         move_card.parent().removeCard(move_card);
2584         
2585         
2586         var dom = move_card.el.dom;
2587         dom.style.width = ''; // clear with - which is set by drag.
2588         
2589         if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
2590             var cardel = next_to_card.el.dom;
2591             
2592             if (position == 'above' ) {
2593                 cardel.parentNode.insertBefore(dom, cardel);
2594             } else if (cardel.nextSibling) {
2595                 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
2596             } else {
2597                 cardel.parentNode.append(dom);
2598             }
2599         } else {
2600             // card container???
2601             this.containerEl.dom.append(dom);
2602         }
2603         
2604         //FIXME HANDLE card = true 
2605         
2606         // add this to the correct place in items.
2607         
2608         // remove Card from items.
2609         
2610        
2611         if (this.items.length) {
2612             var nitems = [];
2613             //Roo.log([info.items_n, info.position, this.items.length]);
2614             for (var i =0; i < this.items.length; i++) {
2615                 if (i == to_items_n && position == 'above') {
2616                     nitems.push(move_card);
2617                 }
2618                 nitems.push(this.items[i]);
2619                 if (i == to_items_n && position == 'below') {
2620                     nitems.push(move_card);
2621                 }
2622             }
2623             this.items = nitems;
2624             Roo.log(this.items);
2625         } else {
2626             this.items.push(move_card);
2627         }
2628         
2629         move_card.parentId = this.id;
2630         
2631         return true;
2632         
2633         
2634     },
2635     removeCard : function(c)
2636     {
2637         this.items = this.items.filter(function(e) { return e != c });
2638  
2639         var dom = c.el.dom;
2640         dom.parentNode.removeChild(dom);
2641         dom.style.width = ''; // clear with - which is set by drag.
2642         c.parentId = false;
2643         
2644     },
2645     
2646     /**    Decide whether to drop above or below a View node. */
2647     getDropPoint : function(e, n, dd)
2648     {
2649         if (dd) {
2650              return false;
2651         }
2652         if (n == this.containerEl.dom) {
2653             return "above";
2654         }
2655         var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
2656         var c = t + (b - t) / 2;
2657         var y = Roo.lib.Event.getPageY(e);
2658         if(y <= c) {
2659             return "above";
2660         }else{
2661             return "below";
2662         }
2663     },
2664     onToggleCollapse : function(e)
2665         {
2666         if (this.collapsed) {
2667             this.el.select('.roo-collapse-toggle').removeClass('collapsed');
2668             this.collapsableEl.addClass('show');
2669             this.collapsed = false;
2670             return;
2671         }
2672         this.el.select('.roo-collapse-toggle').addClass('collapsed');
2673         this.collapsableEl.removeClass('show');
2674         this.collapsed = true;
2675         
2676     
2677     },
2678     
2679     onToggleRotate : function(e)
2680     {
2681         this.collapsableEl.removeClass('show');
2682         this.footerEl.removeClass('d-none');
2683         this.el.removeClass('roo-card-rotated');
2684         this.el.removeClass('d-none');
2685         if (this.rotated) {
2686             
2687             this.collapsableEl.addClass('show');
2688             this.rotated = false;
2689             this.fireEvent('rotate', this, this.rotated);
2690             return;
2691         }
2692         this.el.addClass('roo-card-rotated');
2693         this.footerEl.addClass('d-none');
2694         this.el.select('.roo-collapsable').removeClass('show');
2695         
2696         this.rotated = true;
2697         this.fireEvent('rotate', this, this.rotated);
2698     
2699     },
2700     
2701     dropPlaceHolder: function (action, info, data)
2702     {
2703         if (this.dropEl === false) {
2704             this.dropEl = Roo.DomHelper.append(this.containerEl, {
2705             cls : 'd-none'
2706             },true);
2707         }
2708         this.dropEl.removeClass(['d-none', 'd-block']);        
2709         if (action == 'hide') {
2710             
2711             this.dropEl.addClass('d-none');
2712             return;
2713         }
2714         // FIXME - info.card == true!!!
2715         this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
2716         
2717         if (info.card !== true) {
2718             var cardel = info.card.el.dom;
2719             
2720             if (info.position == 'above') {
2721                 cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
2722             } else if (cardel.nextSibling) {
2723                 cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
2724             } else {
2725                 cardel.parentNode.append(this.dropEl.dom);
2726             }
2727         } else {
2728             // card container???
2729             this.containerEl.dom.append(this.dropEl.dom);
2730         }
2731         
2732         this.dropEl.addClass('d-block roo-card-dropzone');
2733         
2734         this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
2735         
2736         
2737     
2738     
2739     
2740     },
2741     setHeaderText: function(html)
2742     {
2743         this.header = html;
2744         if (this.headerContainerEl) {
2745             this.headerContainerEl.dom.innerHTML = html;
2746         }
2747     },
2748     onHeaderImageLoad : function(ev, he)
2749     {
2750         if (!this.header_image_fit_square) {
2751             return;
2752         }
2753         
2754         var hw = he.naturalHeight / he.naturalWidth;
2755         // wide image = < 0
2756         // tall image = > 1
2757         //var w = he.dom.naturalWidth;
2758         var ww = he.width;
2759         he.style.left =  0;
2760         he.style.position =  'relative';
2761         if (hw > 1) {
2762             var nw = (ww * (1/hw));
2763             Roo.get(he).setSize( ww * (1/hw),  ww);
2764             he.style.left =  ((ww - nw)/ 2) + 'px';
2765             he.style.position =  'relative';
2766         }
2767
2768     }
2769
2770     
2771 });
2772
2773 /*
2774  * - LGPL
2775  *
2776  * Card header - holder for the card header elements.
2777  * 
2778  */
2779
2780 /**
2781  * @class Roo.bootstrap.CardHeader
2782  * @extends Roo.bootstrap.Element
2783  * @parent Roo.bootstrap.Card
2784  * @children Roo.bootstrap.Component
2785  * Bootstrap CardHeader class
2786  * @constructor
2787  * Create a new Card Header - that you can embed children into
2788  * @param {Object} config The config object
2789  */
2790
2791 Roo.bootstrap.CardHeader = function(config){
2792     Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
2793 };
2794
2795 Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element,  {
2796     
2797     
2798     container_method : 'getCardHeader' 
2799     
2800      
2801     
2802     
2803    
2804 });
2805
2806  
2807
2808  /*
2809  * - LGPL
2810  *
2811  * Card footer - holder for the card footer elements.
2812  * 
2813  */
2814
2815 /**
2816  * @class Roo.bootstrap.CardFooter
2817  * @extends Roo.bootstrap.Element
2818  * @parent Roo.bootstrap.Card
2819  * @children Roo.bootstrap.Component
2820  * Bootstrap CardFooter class
2821  * 
2822  * @constructor
2823  * Create a new Card Footer - that you can embed children into
2824  * @param {Object} config The config object
2825  */
2826
2827 Roo.bootstrap.CardFooter = function(config){
2828     Roo.bootstrap.CardFooter.superclass.constructor.call(this, config);
2829 };
2830
2831 Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element,  {
2832     
2833     
2834     container_method : 'getCardFooter' 
2835     
2836      
2837     
2838     
2839    
2840 });
2841
2842  
2843
2844  /*
2845  * - LGPL
2846  *
2847  * Card header - holder for the card header elements.
2848  * 
2849  */
2850
2851 /**
2852  * @class Roo.bootstrap.CardImageTop
2853  * @extends Roo.bootstrap.Element
2854  * @parent Roo.bootstrap.Card
2855  * @children Roo.bootstrap.Component
2856  * Bootstrap CardImageTop class
2857  * 
2858  * @constructor
2859  * Create a new Card Image Top container
2860  * @param {Object} config The config object
2861  */
2862
2863 Roo.bootstrap.CardImageTop = function(config){
2864     Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
2865 };
2866
2867 Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
2868     
2869    
2870     container_method : 'getCardImageTop' 
2871     
2872      
2873     
2874    
2875 });
2876
2877  
2878
2879  
2880 /*
2881 * Licence: LGPL
2882 */
2883
2884 /**
2885  * @class Roo.bootstrap.ButtonUploader
2886  * @extends Roo.bootstrap.Button
2887  * Bootstrap Button Uploader class - it's a button which when you add files to it
2888  *
2889  * 
2890  * @cfg {Number} errorTimeout default 3000
2891  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
2892  * @cfg {Array}  html The button text.
2893  * @cfg {Boolean}  multiple (default true) Should the upload allow multiple files to be uploaded.
2894  *
2895  * @constructor
2896  * Create a new CardUploader
2897  * @param {Object} config The config object
2898  */
2899
2900 Roo.bootstrap.ButtonUploader = function(config){
2901     
2902  
2903     
2904     Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
2905     
2906      
2907      this.addEvents({
2908          // raw events
2909         /**
2910          * @event beforeselect
2911          * When button is pressed, before show upload files dialog is shown
2912          * @param {Roo.bootstrap.UploaderButton} this
2913          *
2914          */
2915         'beforeselect' : true,
2916          /**
2917          * @event fired when files have been selected, 
2918          * When a the download link is clicked
2919          * @param {Roo.bootstrap.UploaderButton} this
2920          * @param {Array} Array of files that have been uploaded
2921          */
2922         'uploaded' : true
2923         
2924     });
2925 };
2926  
2927 Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button,  {
2928     
2929      
2930     errorTimeout : 3000,
2931      
2932     images : false,
2933    
2934     fileCollection : false,
2935     allowBlank : true,
2936     
2937     multiple : true,
2938     
2939     getAutoCreate : function()
2940     {
2941        
2942         
2943         return  {
2944             cls :'div' ,
2945             cn : [
2946                 Roo.bootstrap.Button.prototype.getAutoCreate.call(this) 
2947             ]
2948         };
2949            
2950          
2951     },
2952      
2953    
2954     initEvents : function()
2955     {
2956         
2957         Roo.bootstrap.Button.prototype.initEvents.call(this);
2958         
2959         
2960         
2961         
2962         
2963         this.urlAPI = (window.createObjectURL && window) || 
2964                                 (window.URL && URL.revokeObjectURL && URL) || 
2965                                 (window.webkitURL && webkitURL);
2966                         
2967         var im = {
2968             tag: 'input',
2969             type : 'file',
2970             cls : 'd-none  roo-card-upload-selector' 
2971           
2972         };
2973         if (this.multiple) {
2974             im.multiple = 'multiple';
2975         }
2976         this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem.
2977        
2978         //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
2979         
2980         this.selectorEl.on('change', this.onFileSelected, this);
2981          
2982          
2983        
2984     },
2985     
2986    
2987     onClick : function(e)
2988     {
2989         e.preventDefault();
2990         
2991         if ( this.fireEvent('beforeselect', this) === false) {
2992             return;
2993         }
2994          
2995         this.selectorEl.dom.click();
2996          
2997     },
2998     
2999     onFileSelected : function(e)
3000     {
3001         e.preventDefault();
3002         
3003         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
3004             return;
3005         }
3006         var files = Array.prototype.slice.call(this.selectorEl.dom.files);
3007         this.selectorEl.dom.value  = '';// hopefully reset..
3008         
3009         this.fireEvent('uploaded', this,  files );
3010         
3011     },
3012     
3013        
3014    
3015     
3016     /**
3017      * addCard - add an Attachment to the uploader
3018      * @param data - the data about the image to upload
3019      *
3020      * {
3021           id : 123
3022           title : "Title of file",
3023           is_uploaded : false,
3024           src : "http://.....",
3025           srcfile : { the File upload object },
3026           mimetype : file.type,
3027           preview : false,
3028           is_deleted : 0
3029           .. any other data...
3030         }
3031      *
3032      * 
3033     */
3034      
3035     reset: function()
3036     {
3037          
3038          this.selectorEl
3039     } 
3040     
3041     
3042     
3043     
3044 });
3045  /*
3046  * - LGPL
3047  *
3048  * image
3049  * 
3050  */
3051
3052
3053 /**
3054  * @class Roo.bootstrap.Img
3055  * @extends Roo.bootstrap.Component
3056  * Bootstrap Img class
3057  * @cfg {Boolean} imgResponsive false | true
3058  * @cfg {String} border rounded | circle | thumbnail
3059  * @cfg {String} src image source
3060  * @cfg {String} alt image alternative text
3061  * @cfg {String} href a tag href
3062  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
3063  * @cfg {String} xsUrl xs image source
3064  * @cfg {String} smUrl sm image source
3065  * @cfg {String} mdUrl md image source
3066  * @cfg {String} lgUrl lg image source
3067  * @cfg {Boolean} backgroundContain (use style background and contain image in content)
3068  * 
3069  * @constructor
3070  * Create a new Input
3071  * @param {Object} config The config object
3072  */
3073
3074 Roo.bootstrap.Img = function(config){
3075     Roo.bootstrap.Img.superclass.constructor.call(this, config);
3076     
3077     this.addEvents({
3078         // img events
3079         /**
3080          * @event click
3081          * The img click event for the img.
3082          * @param {Roo.EventObject} e
3083          */
3084         "click" : true,
3085         /**
3086          * @event load
3087          * The when any image loads
3088          * @param {Roo.EventObject} e
3089          */
3090         "load" : true
3091     });
3092 };
3093
3094 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
3095     
3096     imgResponsive: true,
3097     border: '',
3098     src: 'about:blank',
3099     href: false,
3100     target: false,
3101     xsUrl: '',
3102     smUrl: '',
3103     mdUrl: '',
3104     lgUrl: '',
3105     backgroundContain : false,
3106
3107     getAutoCreate : function()
3108     {   
3109         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3110             return this.createSingleImg();
3111         }
3112         
3113         var cfg = {
3114             tag: 'div',
3115             cls: 'roo-image-responsive-group',
3116             cn: []
3117         };
3118         var _this = this;
3119         
3120         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
3121             
3122             if(!_this[size + 'Url']){
3123                 return;
3124             }
3125             
3126             var img = {
3127                 tag: 'img',
3128                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
3129                 html: _this.html || cfg.html,
3130                 src: _this[size + 'Url']
3131             };
3132             
3133             img.cls += ' roo-image-responsive-' + size;
3134             
3135             var s = ['xs', 'sm', 'md', 'lg'];
3136             
3137             s.splice(s.indexOf(size), 1);
3138             
3139             Roo.each(s, function(ss){
3140                 img.cls += ' hidden-' + ss;
3141             });
3142             
3143             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
3144                 cfg.cls += ' img-' + _this.border;
3145             }
3146             
3147             if(_this.alt){
3148                 cfg.alt = _this.alt;
3149             }
3150             
3151             if(_this.href){
3152                 var a = {
3153                     tag: 'a',
3154                     href: _this.href,
3155                     cn: [
3156                         img
3157                     ]
3158                 };
3159
3160                 if(this.target){
3161                     a.target = _this.target;
3162                 }
3163             }
3164             
3165             cfg.cn.push((_this.href) ? a : img);
3166             
3167         });
3168         
3169         return cfg;
3170     },
3171     
3172     createSingleImg : function()
3173     {
3174         var cfg = {
3175             tag: 'img',
3176             cls: (this.imgResponsive) ? 'img-responsive' : '',
3177             html : null,
3178             src : Roo.BLANK_IMAGE_URL  // just incase src get's set to undefined?!?
3179         };
3180         
3181         if (this.backgroundContain) {
3182             cfg.cls += ' background-contain';
3183         }
3184         
3185         cfg.html = this.html || cfg.html;
3186         
3187         if (this.backgroundContain) {
3188             cfg.style="background-image: url(" + this.src + ')';
3189         } else {
3190             cfg.src = this.src || cfg.src;
3191         }
3192         
3193         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
3194             cfg.cls += ' img-' + this.border;
3195         }
3196         
3197         if(this.alt){
3198             cfg.alt = this.alt;
3199         }
3200         
3201         if(this.href){
3202             var a = {
3203                 tag: 'a',
3204                 href: this.href,
3205                 cn: [
3206                     cfg
3207                 ]
3208             };
3209             
3210             if(this.target){
3211                 a.target = this.target;
3212             }
3213             
3214         }
3215         
3216         return (this.href) ? a : cfg;
3217     },
3218     
3219     initEvents: function() 
3220     {
3221         if(!this.href){
3222             this.el.on('click', this.onClick, this);
3223         }
3224         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3225             this.el.on('load', this.onImageLoad, this);
3226         } else {
3227             // not sure if this works.. not tested
3228             this.el.select('img', true).on('load', this.onImageLoad, this);
3229         }
3230         
3231     },
3232     
3233     onClick : function(e)
3234     {
3235         Roo.log('img onclick');
3236         this.fireEvent('click', this, e);
3237     },
3238     onImageLoad: function(e)
3239     {
3240         Roo.log('img load');
3241         this.fireEvent('load', this, e);
3242     },
3243     
3244     /**
3245      * Sets the url of the image - used to update it
3246      * @param {String} url the url of the image
3247      */
3248     
3249     setSrc : function(url)
3250     {
3251         this.src =  url;
3252         
3253         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3254             if (this.backgroundContain) {
3255                 this.el.dom.style.backgroundImage =  'url(' + url + ')';
3256             } else {
3257                 this.el.dom.src =  url;
3258             }
3259             return;
3260         }
3261         
3262         this.el.select('img', true).first().dom.src =  url;
3263     }
3264     
3265     
3266    
3267 });
3268
3269  /*
3270  * - LGPL
3271  *
3272  * image
3273  * 
3274  */
3275
3276
3277 /**
3278  * @class Roo.bootstrap.Link
3279  * @extends Roo.bootstrap.Component
3280  * @children Roo.bootstrap.Component
3281  * Bootstrap Link Class (eg. '<a href>')
3282  
3283  * @cfg {String} alt image alternative text
3284  * @cfg {String} href a tag href
3285  * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
3286  * @cfg {String} html the content of the link.
3287  * @cfg {String} anchor name for the anchor link
3288  * @cfg {String} fa - favicon
3289
3290  * @cfg {Boolean} preventDefault (true | false) default false
3291
3292  * 
3293  * @constructor
3294  * Create a new Input
3295  * @param {Object} config The config object
3296  */
3297
3298 Roo.bootstrap.Link = function(config){
3299     Roo.bootstrap.Link.superclass.constructor.call(this, config);
3300     
3301     this.addEvents({
3302         // img events
3303         /**
3304          * @event click
3305          * The img click event for the img.
3306          * @param {Roo.EventObject} e
3307          */
3308         "click" : true
3309     });
3310 };
3311
3312 Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
3313     
3314     href: false,
3315     target: false,
3316     preventDefault: false,
3317     anchor : false,
3318     alt : false,
3319     fa: false,
3320
3321
3322     getAutoCreate : function()
3323     {
3324         var html = this.html || '';
3325         
3326         if (this.fa !== false) {
3327             html = '<i class="fa fa-' + this.fa + '"></i>';
3328         }
3329         var cfg = {
3330             tag: 'a'
3331         };
3332         // anchor's do not require html/href...
3333         if (this.anchor === false) {
3334             cfg.html = html;
3335             cfg.href = this.href || '#';
3336         } else {
3337             cfg.name = this.anchor;
3338             if (this.html !== false || this.fa !== false) {
3339                 cfg.html = html;
3340             }
3341             if (this.href !== false) {
3342                 cfg.href = this.href;
3343             }
3344         }
3345         
3346         if(this.alt !== false){
3347             cfg.alt = this.alt;
3348         }
3349         
3350         
3351         if(this.target !== false) {
3352             cfg.target = this.target;
3353         }
3354         
3355         return cfg;
3356     },
3357     
3358     initEvents: function() {
3359         
3360         if(!this.href || this.preventDefault){
3361             this.el.on('click', this.onClick, this);
3362         }
3363     },
3364     
3365     onClick : function(e)
3366     {
3367         if(this.preventDefault){
3368             e.preventDefault();
3369         }
3370         //Roo.log('img onclick');
3371         this.fireEvent('click', this, e);
3372     }
3373    
3374 });
3375
3376  /*
3377  * - LGPL
3378  *
3379  * header
3380  * 
3381  */
3382
3383 /**
3384  * @class Roo.bootstrap.Header
3385  * @extends Roo.bootstrap.Component
3386  * @children Roo.bootstrap.Component
3387  * Bootstrap Header class
3388  *
3389  * 
3390  * @cfg {String} html content of header
3391  * @cfg {Number} level (1|2|3|4|5|6) default 1
3392  * 
3393  * @constructor
3394  * Create a new Header
3395  * @param {Object} config The config object
3396  */
3397
3398
3399 Roo.bootstrap.Header  = function(config){
3400     Roo.bootstrap.Header.superclass.constructor.call(this, config);
3401 };
3402
3403 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
3404     
3405     //href : false,
3406     html : false,
3407     level : 1,
3408     
3409     
3410     
3411     getAutoCreate : function(){
3412         
3413         
3414         
3415         var cfg = {
3416             tag: 'h' + (1 *this.level),
3417             html: this.html || ''
3418         } ;
3419         
3420         return cfg;
3421     }
3422    
3423 });
3424
3425  
3426
3427  /**
3428  * @class Roo.bootstrap.MenuMgr
3429  * @licence LGPL
3430  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
3431  * @static
3432  */
3433 Roo.bootstrap.menu.Manager = function(){
3434    var menus, active, groups = {}, attached = false, lastShow = new Date();
3435
3436    // private - called when first menu is created
3437    function init(){
3438        menus = {};
3439        active = new Roo.util.MixedCollection();
3440        Roo.get(document).addKeyListener(27, function(){
3441            if(active.length > 0){
3442                hideAll();
3443            }
3444        });
3445    }
3446
3447    // private
3448    function hideAll(){
3449        if(active && active.length > 0){
3450            var c = active.clone();
3451            c.each(function(m){
3452                m.hide();
3453            });
3454        }
3455    }
3456
3457    // private
3458    function onHide(m){
3459        active.remove(m);
3460        if(active.length < 1){
3461            Roo.get(document).un("mouseup", onMouseDown);
3462             
3463            attached = false;
3464        }
3465    }
3466
3467    // private
3468    function onShow(m){
3469        var last = active.last();
3470        lastShow = new Date();
3471        active.add(m);
3472        if(!attached){
3473           Roo.get(document).on("mouseup", onMouseDown);
3474            
3475            attached = true;
3476        }
3477        if(m.parentMenu){
3478           //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
3479           m.parentMenu.activeChild = m;
3480        }else if(last && last.isVisible()){
3481           //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
3482        }
3483    }
3484
3485    // private
3486    function onBeforeHide(m){
3487        if(m.activeChild){
3488            m.activeChild.hide();
3489        }
3490        if(m.autoHideTimer){
3491            clearTimeout(m.autoHideTimer);
3492            delete m.autoHideTimer;
3493        }
3494    }
3495
3496    // private
3497    function onBeforeShow(m){
3498        var pm = m.parentMenu;
3499        if(!pm && !m.allowOtherMenus){
3500            hideAll();
3501        }else if(pm && pm.activeChild && active != m){
3502            pm.activeChild.hide();
3503        }
3504    }
3505
3506    // private this should really trigger on mouseup..
3507    function onMouseDown(e){
3508         Roo.log("on Mouse Up");
3509         
3510         if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".dropdown-menu") && !e.getTarget('.user-menu')){
3511             Roo.log("MenuManager hideAll");
3512             hideAll();
3513             e.stopEvent();
3514         }
3515         
3516         
3517    }
3518
3519    // private
3520    function onBeforeCheck(mi, state){
3521        if(state){
3522            var g = groups[mi.group];
3523            for(var i = 0, l = g.length; i < l; i++){
3524                if(g[i] != mi){
3525                    g[i].setChecked(false);
3526                }
3527            }
3528        }
3529    }
3530
3531    return {
3532
3533        /**
3534         * Hides all menus that are currently visible
3535         */
3536        hideAll : function(){
3537             hideAll();  
3538        },
3539
3540        // private
3541        register : function(menu){
3542            if(!menus){
3543                init();
3544            }
3545            menus[menu.id] = menu;
3546            menu.on("beforehide", onBeforeHide);
3547            menu.on("hide", onHide);
3548            menu.on("beforeshow", onBeforeShow);
3549            menu.on("show", onShow);
3550            var g = menu.group;
3551            if(g && menu.events["checkchange"]){
3552                if(!groups[g]){
3553                    groups[g] = [];
3554                }
3555                groups[g].push(menu);
3556                menu.on("checkchange", onCheck);
3557            }
3558        },
3559
3560         /**
3561          * Returns a {@link Roo.menu.Menu} object
3562          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
3563          * be used to generate and return a new Menu instance.
3564          */
3565        get : function(menu){
3566            if(typeof menu == "string"){ // menu id
3567                return menus[menu];
3568            }else if(menu.events){  // menu instance
3569                return menu;
3570            }
3571            /*else if(typeof menu.length == 'number'){ // array of menu items?
3572                return new Roo.bootstrap.Menu({items:menu});
3573            }else{ // otherwise, must be a config
3574                return new Roo.bootstrap.Menu(menu);
3575            }
3576            */
3577            return false;
3578        },
3579
3580        // private
3581        unregister : function(menu){
3582            delete menus[menu.id];
3583            menu.un("beforehide", onBeforeHide);
3584            menu.un("hide", onHide);
3585            menu.un("beforeshow", onBeforeShow);
3586            menu.un("show", onShow);
3587            var g = menu.group;
3588            if(g && menu.events["checkchange"]){
3589                groups[g].remove(menu);
3590                menu.un("checkchange", onCheck);
3591            }
3592        },
3593
3594        // private
3595        registerCheckable : function(menuItem){
3596            var g = menuItem.group;
3597            if(g){
3598                if(!groups[g]){
3599                    groups[g] = [];
3600                }
3601                groups[g].push(menuItem);
3602                menuItem.on("beforecheckchange", onBeforeCheck);
3603            }
3604        },
3605
3606        // private
3607        unregisterCheckable : function(menuItem){
3608            var g = menuItem.group;
3609            if(g){
3610                groups[g].remove(menuItem);
3611                menuItem.un("beforecheckchange", onBeforeCheck);
3612            }
3613        }
3614    };
3615 }(); 
3616 /**
3617  * @class Roo.bootstrap.menu.Menu
3618  * @extends Roo.bootstrap.Component
3619  * @licence LGPL
3620  * @children Roo.bootstrap.menu.Item Roo.bootstrap.menu.Separator
3621  * @parent none
3622  * Bootstrap Menu class - container for MenuItems - normally has to be added to a object that supports the menu property
3623  * 
3624  * @cfg {String} type (dropdown|treeview|submenu) type of menu
3625  * @cfg {bool} hidden  if the menu should be hidden when rendered.
3626  * @cfg {bool} stopEvent (true|false)  Stop event after trigger press (default true)
3627  * @cfg {bool} isLink (true|false)  the menu has link disable auto expand and collaspe (default false)
3628 * @cfg {bool} hideTrigger (true|false)  default false - hide the carret for trigger.
3629 * @cfg {String} align  default tl-bl? == below  - how the menu should be aligned. 
3630  
3631  * @constructor
3632  * Create a new Menu
3633  * @param {Object} config The config objectQ
3634  */
3635
3636
3637 Roo.bootstrap.menu.Menu = function(config){
3638     
3639     if (config.type == 'treeview') {
3640         // normally menu's are drawn attached to the document to handle layering etc..
3641         // however treeview (used by the docs menu is drawn into the parent element)
3642         this.container_method = 'getChildContainer'; 
3643     }
3644     
3645     Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
3646     if (this.registerMenu && this.type != 'treeview')  {
3647         Roo.bootstrap.menu.Manager.register(this);
3648     }
3649     
3650     
3651     this.addEvents({
3652         /**
3653          * @event beforeshow
3654          * Fires before this menu is displayed (return false to block)
3655          * @param {Roo.menu.Menu} this
3656          */
3657         beforeshow : true,
3658         /**
3659          * @event beforehide
3660          * Fires before this menu is hidden (return false to block)
3661          * @param {Roo.menu.Menu} this
3662          */
3663         beforehide : true,
3664         /**
3665          * @event show
3666          * Fires after this menu is displayed
3667          * @param {Roo.menu.Menu} this
3668          */
3669         show : true,
3670         /**
3671          * @event hide
3672          * Fires after this menu is hidden
3673          * @param {Roo.menu.Menu} this
3674          */
3675         hide : true,
3676         /**
3677          * @event click
3678          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
3679          * @param {Roo.menu.Menu} this
3680          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3681          * @param {Roo.EventObject} e
3682          */
3683         click : true,
3684         /**
3685          * @event mouseover
3686          * Fires when the mouse is hovering over this menu
3687          * @param {Roo.menu.Menu} this
3688          * @param {Roo.EventObject} e
3689          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3690          */
3691         mouseover : true,
3692         /**
3693          * @event mouseout
3694          * Fires when the mouse exits this menu
3695          * @param {Roo.menu.Menu} this
3696          * @param {Roo.EventObject} e
3697          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3698          */
3699         mouseout : true,
3700         /**
3701          * @event itemclick
3702          * Fires when a menu item contained in this menu is clicked
3703          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
3704          * @param {Roo.EventObject} e
3705          */
3706         itemclick: true
3707     });
3708     this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
3709 };
3710
3711 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
3712     
3713    /// html : false,
3714    
3715     triggerEl : false,  // is this set by component builder? -- it should really be fetched from parent()???
3716     type: false,
3717     /**
3718      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
3719      */
3720     registerMenu : true,
3721     
3722     menuItems :false, // stores the menu items..
3723     
3724     hidden:true,
3725         
3726     parentMenu : false,
3727     
3728     stopEvent : true,
3729     
3730     isLink : false,
3731     
3732     container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works.
3733     
3734     hideTrigger : false,
3735     
3736     align : 'tl-bl?',
3737     
3738     
3739     getChildContainer : function() {
3740         return this.el;  
3741     },
3742     
3743     getAutoCreate : function(){
3744          
3745         //if (['right'].indexOf(this.align)!==-1) {
3746         //    cfg.cn[1].cls += ' pull-right'
3747         //}
3748          
3749         var cfg = {
3750             tag : 'ul',
3751             cls : 'dropdown-menu shadow' ,
3752             style : 'z-index:1000'
3753             
3754         };
3755         
3756         if (this.type === 'submenu') {
3757             cfg.cls = 'submenu active';
3758         }
3759         if (this.type === 'treeview') {
3760             cfg.cls = 'treeview-menu';
3761         }
3762         
3763         return cfg;
3764     },
3765     initEvents : function() {
3766         
3767        // Roo.log("ADD event");
3768        // Roo.log(this.triggerEl.dom);
3769         if (this.triggerEl) {
3770             
3771             this.triggerEl.on('click', this.onTriggerClick, this);
3772             
3773             this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
3774             
3775             if (!this.hideTrigger) {
3776                 if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
3777                     // dropdown toggle on the 'a' in BS4?
3778                     this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
3779                 } else {
3780                     this.triggerEl.addClass('dropdown-toggle');
3781                 }
3782             }
3783         }
3784         
3785         if (Roo.isTouch) {
3786             this.el.on('touchstart'  , this.onTouch, this);
3787         }
3788         this.el.on('click' , this.onClick, this);
3789
3790         this.el.on("mouseover", this.onMouseOver, this);
3791         this.el.on("mouseout", this.onMouseOut, this);
3792         
3793     },
3794     
3795     findTargetItem : function(e)
3796     {
3797         var t = e.getTarget(".dropdown-menu-item", this.el,  true);
3798         if(!t){
3799             return false;
3800         }
3801         //Roo.log(t);         Roo.log(t.id);
3802         if(t && t.id){
3803             //Roo.log(this.menuitems);
3804             return this.menuitems.get(t.id);
3805             
3806             //return this.items.get(t.menuItemId);
3807         }
3808         
3809         return false;
3810     },
3811     
3812     onTouch : function(e) 
3813     {
3814         Roo.log("menu.onTouch");
3815         //e.stopEvent(); this make the user popdown broken
3816         this.onClick(e);
3817     },
3818     
3819     onClick : function(e)
3820     {
3821         Roo.log("menu.onClick");
3822         
3823         var t = this.findTargetItem(e);
3824         if(!t || t.isContainer){
3825             return;
3826         }
3827         Roo.log(e);
3828         /*
3829         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
3830             if(t == this.activeItem && t.shouldDeactivate(e)){
3831                 this.activeItem.deactivate();
3832                 delete this.activeItem;
3833                 return;
3834             }
3835             if(t.canActivate){
3836                 this.setActiveItem(t, true);
3837             }
3838             return;
3839             
3840             
3841         }
3842         */
3843        
3844         Roo.log('pass click event');
3845         
3846         t.onClick(e);
3847         
3848         this.fireEvent("click", this, t, e);
3849         
3850         var _this = this;
3851         
3852         if(!t.href.length || t.href == '#'){
3853             (function() { _this.hide(); }).defer(100);
3854         }
3855         
3856     },
3857     
3858     onMouseOver : function(e){
3859         var t  = this.findTargetItem(e);
3860         //Roo.log(t);
3861         //if(t){
3862         //    if(t.canActivate && !t.disabled){
3863         //        this.setActiveItem(t, true);
3864         //    }
3865         //}
3866         
3867         this.fireEvent("mouseover", this, e, t);
3868     },
3869     isVisible : function(){
3870         return !this.hidden;
3871     },
3872     onMouseOut : function(e){
3873         var t  = this.findTargetItem(e);
3874         
3875         //if(t ){
3876         //    if(t == this.activeItem && t.shouldDeactivate(e)){
3877         //        this.activeItem.deactivate();
3878         //        delete this.activeItem;
3879         //    }
3880         //}
3881         this.fireEvent("mouseout", this, e, t);
3882     },
3883     
3884     
3885     /**
3886      * Displays this menu relative to another element
3887      * @param {String/HTMLElement/Roo.Element} element The element to align to
3888      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
3889      * the element (defaults to this.defaultAlign)
3890      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3891      */
3892     show : function(el, pos, parentMenu)
3893     {
3894         if (false === this.fireEvent("beforeshow", this)) {
3895             Roo.log("show canceled");
3896             return;
3897         }
3898         this.parentMenu = parentMenu;
3899         if(!this.el){
3900             this.render();
3901         }
3902         this.el.addClass('show'); // show otherwise we do not know how big we are..
3903          
3904         var xy = this.el.getAlignToXY(el, pos);
3905         
3906         // bl-tl << left align  below
3907         // tl-bl << left align 
3908         
3909         if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
3910             // if it goes to far to the right.. -> align left.
3911             xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r'))
3912         }
3913         if(xy[0] < 0){
3914             // was left align - go right?
3915             xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l'))
3916         }
3917         
3918         // goes down the bottom
3919         if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() ||
3920            xy[1]  < 0 ){
3921             var a = this.align.replace('?', '').split('-');
3922             xy = this.el.getAlignToXY(el, a[1]  + '-' + a[0] + '?')
3923             
3924         }
3925         
3926         this.showAt(  xy , parentMenu, false);
3927     },
3928      /**
3929      * Displays this menu at a specific xy position
3930      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
3931      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3932      */
3933     showAt : function(xy, parentMenu, /* private: */_e){
3934         this.parentMenu = parentMenu;
3935         if(!this.el){
3936             this.render();
3937         }
3938         if(_e !== false){
3939             this.fireEvent("beforeshow", this);
3940             //xy = this.el.adjustForConstraints(xy);
3941         }
3942         
3943         //this.el.show();
3944         this.hideMenuItems();
3945         this.hidden = false;
3946         if (this.triggerEl) {
3947             this.triggerEl.addClass('open');
3948         }
3949         
3950         this.el.addClass('show');
3951         
3952         
3953         
3954         // reassign x when hitting right
3955         
3956         // reassign y when hitting bottom
3957         
3958         // but the list may align on trigger left or trigger top... should it be a properity?
3959         
3960         if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
3961             this.el.setXY(xy);
3962         }
3963         
3964         this.focus();
3965         this.fireEvent("show", this);
3966     },
3967     
3968     focus : function(){
3969         return;
3970         if(!this.hidden){
3971             this.doFocus.defer(50, this);
3972         }
3973     },
3974
3975     doFocus : function(){
3976         if(!this.hidden){
3977             this.focusEl.focus();
3978         }
3979     },
3980
3981     /**
3982      * Hides this menu and optionally all parent menus
3983      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
3984      */
3985     hide : function(deep)
3986     {
3987         if (false === this.fireEvent("beforehide", this)) {
3988             Roo.log("hide canceled");
3989             return;
3990         }
3991         this.hideMenuItems();
3992         if(this.el && this.isVisible()){
3993            
3994             if(this.activeItem){
3995                 this.activeItem.deactivate();
3996                 this.activeItem = null;
3997             }
3998             if (this.triggerEl) {
3999                 this.triggerEl.removeClass('open');
4000             }
4001             
4002             this.el.removeClass('show');
4003             this.hidden = true;
4004             this.fireEvent("hide", this);
4005         }
4006         if(deep === true && this.parentMenu){
4007             this.parentMenu.hide(true);
4008         }
4009     },
4010     
4011     onTriggerClick : function(e)
4012     {
4013         Roo.log('trigger click');
4014         
4015         var target = e.getTarget();
4016         
4017         Roo.log(target.nodeName.toLowerCase());
4018         
4019         if(target.nodeName.toLowerCase() === 'i'){
4020             e.preventDefault();
4021         }
4022         
4023     },
4024     
4025     onTriggerPress  : function(e)
4026     {
4027         Roo.log('trigger press');
4028         //Roo.log(e.getTarget());
4029        // Roo.log(this.triggerEl.dom);
4030        
4031         // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
4032         var pel = Roo.get(e.getTarget());
4033         if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
4034             Roo.log('is treeview or dropdown?');
4035             return;
4036         }
4037         
4038         if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
4039             return;
4040         }
4041         
4042         if (this.isVisible()) {
4043             Roo.log('hide');
4044             this.hide();
4045         } else {
4046             Roo.log('show');
4047             
4048             this.show(this.triggerEl, this.align, false);
4049         }
4050         
4051         if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
4052             e.stopEvent();
4053         }
4054         
4055     },
4056        
4057     
4058     hideMenuItems : function()
4059     {
4060         Roo.log("hide Menu Items");
4061         if (!this.el) { 
4062             return;
4063         }
4064         
4065         this.el.select('.open',true).each(function(aa) {
4066             
4067             aa.removeClass('open');
4068          
4069         });
4070     },
4071     addxtypeChild : function (tree, cntr) {
4072         var comp= Roo.bootstrap.menu.Menu.superclass.addxtypeChild.call(this, tree, cntr);
4073           
4074         this.menuitems.add(comp);
4075         return comp;
4076
4077     },
4078     getEl : function()
4079     {
4080         Roo.log(this.el);
4081         return this.el;
4082     },
4083     
4084     clear : function()
4085     {
4086         this.getEl().dom.innerHTML = '';
4087         this.menuitems.clear();
4088     }
4089 });
4090
4091  
4092  /**
4093  * @class Roo.bootstrap.menu.Item
4094  * @extends Roo.bootstrap.Component
4095  * @children  Roo.bootstrap.Button Roo.bootstrap.ButtonUploader Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Container
4096  * @parent Roo.bootstrap.menu.Menu
4097  * @licence LGPL
4098  * Bootstrap MenuItem class
4099  * 
4100  * @cfg {String} html the menu label
4101  * @cfg {String} href the link
4102  * @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
4103  * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
4104  * @cfg {Boolean} active  used on sidebars to highlight active itesm
4105  * @cfg {String} fa favicon to show on left of menu item.
4106  * @cfg {Roo.bootsrap.Menu} menu the child menu.
4107  * 
4108  * 
4109  * @constructor
4110  * Create a new MenuItem
4111  * @param {Object} config The config object
4112  */
4113
4114
4115 Roo.bootstrap.menu.Item = function(config){
4116     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
4117     this.addEvents({
4118         // raw events
4119         /**
4120          * @event click
4121          * The raw click event for the entire grid.
4122          * @param {Roo.bootstrap.menu.Item} this
4123          * @param {Roo.EventObject} e
4124          */
4125         "click" : true
4126     });
4127 };
4128
4129 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
4130     
4131     href : false,
4132     html : false,
4133     preventDefault: false,
4134     isContainer : false,
4135     active : false,
4136     fa: false,
4137     
4138     getAutoCreate : function(){
4139         
4140         if(this.isContainer){
4141             return {
4142                 tag: 'li',
4143                 cls: 'dropdown-menu-item '
4144             };
4145         }
4146         var ctag = {
4147             tag: 'span',
4148             html: 'Link'
4149         };
4150         
4151         var anc = {
4152             tag : 'a',
4153             cls : 'dropdown-item',
4154             href : '#',
4155             cn : [  ]
4156         };
4157         
4158         if (this.fa !== false) {
4159             anc.cn.push({
4160                 tag : 'i',
4161                 cls : 'fa fa-' + this.fa
4162             });
4163         }
4164         
4165         anc.cn.push(ctag);
4166         
4167         
4168         var cfg= {
4169             tag: 'li',
4170             cls: 'dropdown-menu-item',
4171             cn: [ anc ]
4172         };
4173         if (this.parent().type == 'treeview') {
4174             cfg.cls = 'treeview-menu';
4175         }
4176         if (this.active) {
4177             cfg.cls += ' active';
4178         }
4179         
4180         
4181         
4182         anc.href = this.href || cfg.cn[0].href ;
4183         ctag.html = this.html || cfg.cn[0].html ;
4184         return cfg;
4185     },
4186     
4187     initEvents: function()
4188     {
4189         if (this.parent().type == 'treeview') {
4190             this.el.select('a').on('click', this.onClick, this);
4191         }
4192         
4193         if (this.menu) {
4194             this.menu.parentType = this.xtype;
4195             this.menu.triggerEl = this.el;
4196             this.menu = this.addxtype(Roo.apply({}, this.menu));
4197         }
4198         
4199     },
4200     onClick : function(e)
4201     {
4202         //Roo.log('item on click ');
4203         
4204         if(this.href === false || this.preventDefault){
4205             e.preventDefault();
4206         }
4207         //this.parent().hideMenuItems();
4208         
4209         this.fireEvent('click', this, e);
4210     },
4211     getEl : function()
4212     {
4213         return this.el;
4214     } 
4215 });
4216
4217  
4218
4219  
4220
4221   
4222 /**
4223  * @class Roo.bootstrap.menu.Separator
4224  * @extends Roo.bootstrap.Component
4225  * @licence LGPL
4226  * @parent Roo.bootstrap.menu.Menu
4227  * Bootstrap Separator class
4228  * 
4229  * @constructor
4230  * Create a new Separator
4231  * @param {Object} config The config object
4232  */
4233
4234
4235 Roo.bootstrap.menu.Separator = function(config){
4236     Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
4237 };
4238
4239 Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component,  {
4240     
4241     getAutoCreate : function(){
4242         var cfg = {
4243             tag : 'li',
4244             cls: 'dropdown-divider divider'
4245         };
4246         
4247         return cfg;
4248     }
4249    
4250 });
4251
4252  
4253
4254  
4255 /*
4256 * Licence: LGPL
4257 */
4258
4259 /**
4260  * @class Roo.bootstrap.Modal
4261  * @extends Roo.bootstrap.Component
4262  * @parent none builder
4263  * @children Roo.bootstrap.Component
4264  * Bootstrap Modal class
4265  * @cfg {String} title Title of dialog
4266  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
4267  * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn
4268  * @cfg {Boolean} specificTitle default false
4269  * @cfg {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
4270  * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
4271  * @cfg {Boolean} animate default true
4272  * @cfg {Boolean} allow_close default true
4273  * @cfg {Boolean} fitwindow default false
4274  * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
4275  * @cfg {Number} width fixed width - usefull for chrome extension only really.
4276  * @cfg {Number} height fixed height - usefull for chrome extension only really.
4277  * @cfg {String} size (sm|lg|xl) default empty
4278  * @cfg {Number} max_width set the max width of modal
4279  * @cfg {Boolean} editableTitle can the title be edited
4280
4281  *
4282  *
4283  * @constructor
4284  * Create a new Modal Dialog
4285  * @param {Object} config The config object
4286  */
4287
4288 Roo.bootstrap.Modal = function(config){
4289     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
4290     this.addEvents({
4291         // raw events
4292         /**
4293          * @event btnclick
4294          * The raw btnclick event for the button
4295          * @param {Roo.EventObject} e
4296          */
4297         "btnclick" : true,
4298         /**
4299          * @event resize
4300          * Fire when dialog resize
4301          * @param {Roo.bootstrap.Modal} this
4302          * @param {Roo.EventObject} e
4303          */
4304         "resize" : true,
4305         /**
4306          * @event titlechanged
4307          * Fire when the editable title has been changed
4308          * @param {Roo.bootstrap.Modal} this
4309          * @param {Roo.EventObject} value
4310          */
4311         "titlechanged" : true 
4312         
4313     });
4314     this.buttons = this.buttons || [];
4315
4316     if (this.tmpl) {
4317         this.tmpl = Roo.factory(this.tmpl);
4318     }
4319
4320 };
4321
4322 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
4323
4324     title : 'test dialog',
4325
4326     buttons : false,
4327
4328     // set on load...
4329
4330     html: false,
4331
4332     tmp: false,
4333
4334     specificTitle: false,
4335
4336     buttonPosition: 'right',
4337
4338     allow_close : true,
4339
4340     animate : true,
4341
4342     fitwindow: false,
4343     
4344      // private
4345     dialogEl: false,
4346     bodyEl:  false,
4347     footerEl:  false,
4348     titleEl:  false,
4349     closeEl:  false,
4350
4351     size: '',
4352     
4353     max_width: 0,
4354     
4355     max_height: 0,
4356     
4357     fit_content: false,
4358     editableTitle  : false,
4359
4360     onRender : function(ct, position)
4361     {
4362         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
4363
4364         if(!this.el){
4365             var cfg = Roo.apply({},  this.getAutoCreate());
4366             cfg.id = Roo.id();
4367             //if(!cfg.name){
4368             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
4369             //}
4370             //if (!cfg.name.length) {
4371             //    delete cfg.name;
4372            // }
4373             if (this.cls) {
4374                 cfg.cls += ' ' + this.cls;
4375             }
4376             if (this.style) {
4377                 cfg.style = this.style;
4378             }
4379             this.el = Roo.get(document.body).createChild(cfg, position);
4380         }
4381         //var type = this.el.dom.type;
4382
4383
4384         if(this.tabIndex !== undefined){
4385             this.el.dom.setAttribute('tabIndex', this.tabIndex);
4386         }
4387
4388         this.dialogEl = this.el.select('.modal-dialog',true).first();
4389         this.bodyEl = this.el.select('.modal-body',true).first();
4390         this.closeEl = this.el.select('.modal-header .close', true).first();
4391         this.headerEl = this.el.select('.modal-header',true).first();
4392         this.titleEl = this.el.select('.modal-title',true).first();
4393         this.footerEl = this.el.select('.modal-footer',true).first();
4394
4395         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
4396         
4397         //this.el.addClass("x-dlg-modal");
4398
4399         if (this.buttons.length) {
4400             Roo.each(this.buttons, function(bb) {
4401                 var b = Roo.apply({}, bb);
4402                 b.xns = b.xns || Roo.bootstrap;
4403                 b.xtype = b.xtype || 'Button';
4404                 if (typeof(b.listeners) == 'undefined') {
4405                     b.listeners = { click : this.onButtonClick.createDelegate(this)  };
4406                 }
4407
4408                 var btn = Roo.factory(b);
4409
4410                 btn.render(this.getButtonContainer());
4411
4412             },this);
4413         }
4414         // render the children.
4415         var nitems = [];
4416
4417         if(typeof(this.items) != 'undefined'){
4418             var items = this.items;
4419             delete this.items;
4420
4421             for(var i =0;i < items.length;i++) {
4422                 // we force children not to montor widnow resize  - as we do that for them.
4423                 items[i].monitorWindowResize = false;
4424                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
4425             }
4426         }
4427
4428         this.items = nitems;
4429
4430         // where are these used - they used to be body/close/footer
4431
4432
4433         this.initEvents();
4434         //this.el.addClass([this.fieldClass, this.cls]);
4435
4436     },
4437
4438     getAutoCreate : function()
4439     {
4440         // we will default to modal-body-overflow - might need to remove or make optional later.
4441         var bdy = {
4442                 cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''), 
4443                 html : this.html || ''
4444         };
4445
4446         var title = {
4447             tag: 'h5',
4448             cls : 'modal-title',
4449             html : this.title
4450         };
4451
4452         if(this.specificTitle){ // WTF is this?
4453             title = this.title;
4454         }
4455
4456         var header = [];
4457         if (this.allow_close && Roo.bootstrap.version == 3) {
4458             header.push({
4459                 tag: 'button',
4460                 cls : 'close',
4461                 html : '&times'
4462             });
4463         }
4464
4465         header.push(title);
4466
4467         if (this.editableTitle) {
4468             header.push({
4469                 cls: 'form-control roo-editable-title d-none',
4470                 tag: 'input',
4471                 type: 'text'
4472             });
4473         }
4474         
4475         if (this.allow_close && Roo.bootstrap.version == 4) {
4476             header.push({
4477                 tag: 'button',
4478                 cls : 'close',
4479                 html : '&times'
4480             });
4481         }
4482         
4483         var size = '';
4484
4485         if(this.size.length){
4486             size = 'modal-' + this.size;
4487         }
4488         
4489         var footer = Roo.bootstrap.version == 3 ?
4490             {
4491                 cls : 'modal-footer',
4492                 cn : [
4493                     {
4494                         tag: 'div',
4495                         cls: 'btn-' + this.buttonPosition
4496                     }
4497                 ]
4498
4499             } :
4500             {  // BS4 uses mr-auto on left buttons....
4501                 cls : 'modal-footer'
4502             };
4503
4504             
4505
4506         
4507         
4508         var modal = {
4509             cls: "modal",
4510              cn : [
4511                 {
4512                     cls: "modal-dialog " + size,
4513                     cn : [
4514                         {
4515                             cls : "modal-content",
4516                             cn : [
4517                                 {
4518                                     cls : 'modal-header',
4519                                     cn : header
4520                                 },
4521                                 bdy,
4522                                 footer
4523                             ]
4524
4525                         }
4526                     ]
4527
4528                 }
4529             ]
4530         };
4531
4532         if(this.animate){
4533             modal.cls += ' fade';
4534         }
4535
4536         return modal;
4537
4538     },
4539     getChildContainer : function() {
4540
4541          return this.bodyEl;
4542
4543     },
4544     getButtonContainer : function() {
4545         
4546          return Roo.bootstrap.version == 4 ?
4547             this.el.select('.modal-footer',true).first()
4548             : this.el.select('.modal-footer div',true).first();
4549
4550     },
4551     
4552     closeClick : function()
4553     {
4554         this.hide();
4555     },
4556     
4557     initEvents : function()
4558     {
4559         if (this.allow_close) {
4560             this.closeEl.on('click', this.closeClick, this);
4561         }
4562         Roo.EventManager.onWindowResize(this.resize, this, true);
4563         if (this.editableTitle) {
4564             this.headerEditEl =  this.headerEl.select('.form-control',true).first();
4565             this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
4566             this.headerEditEl.on('keyup', function(e) {
4567                     if([  e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
4568                         this.toggleHeaderInput(false)
4569                     }
4570                 }, this);
4571             this.headerEditEl.on('blur', function(e) {
4572                 this.toggleHeaderInput(false)
4573             },this);
4574         }
4575
4576     },
4577   
4578
4579     resize : function()
4580     {
4581         this.maskEl.setSize(
4582             Roo.lib.Dom.getViewWidth(true),
4583             Roo.lib.Dom.getViewHeight(true)
4584         );
4585         
4586         if (this.fitwindow) {
4587             
4588            this.dialogEl.setStyle( { 'max-width' : '100%' });
4589             this.setSize(
4590                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
4591                 this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
4592             );
4593             return;
4594         }
4595         
4596         if(this.max_width !== 0) {
4597             
4598             var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
4599             
4600             if(this.height) {
4601                 this.setSize(w, this.height);
4602                 return;
4603             }
4604             
4605             if(this.max_height) {
4606                 this.setSize(w,Math.min(
4607                     this.max_height,
4608                     Roo.lib.Dom.getViewportHeight(true) - 60
4609                 ));
4610                 
4611                 return;
4612             }
4613             
4614             if(!this.fit_content) {
4615                 this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
4616                 return;
4617             }
4618             
4619             this.setSize(w, Math.min(
4620                 60 +
4621                 this.headerEl.getHeight() + 
4622                 this.footerEl.getHeight() + 
4623                 this.getChildHeight(this.bodyEl.dom.childNodes),
4624                 Roo.lib.Dom.getViewportHeight(true) - 60)
4625             );
4626         }
4627         
4628     },
4629
4630     setSize : function(w,h)
4631     {
4632         if (!w && !h) {
4633             return;
4634         }
4635         
4636         this.resizeTo(w,h);
4637         // any layout/border etc.. resize..
4638         (function () {
4639             this.items.forEach( function(e) {
4640                 e.layout ? e.layout() : false;
4641
4642             });
4643         }).defer(100,this);
4644         
4645     },
4646
4647     show : function() {
4648
4649         if (!this.rendered) {
4650             this.render();
4651         }
4652         this.toggleHeaderInput(false);
4653         //this.el.setStyle('display', 'block');
4654         this.el.removeClass('hideing');
4655         this.el.dom.style.display='block';
4656         
4657         Roo.get(document.body).addClass('modal-open');
4658  
4659         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
4660             
4661             (function(){
4662                 this.el.addClass('show');
4663                 this.el.addClass('in');
4664             }).defer(50, this);
4665         }else{
4666             this.el.addClass('show');
4667             this.el.addClass('in');
4668         }
4669
4670         // not sure how we can show data in here..
4671         //if (this.tmpl) {
4672         //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
4673         //}
4674
4675         Roo.get(document.body).addClass("x-body-masked");
4676         
4677         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
4678         this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4679         this.maskEl.dom.style.display = 'block';
4680         this.maskEl.addClass('show');
4681         
4682         
4683         this.resize();
4684         
4685         this.fireEvent('show', this);
4686
4687         // set zindex here - otherwise it appears to be ignored...
4688         this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4689         
4690         
4691         // this is for children that are... layout.Border 
4692         (function () {
4693             this.items.forEach( function(e) {
4694                 e.layout ? e.layout() : false;
4695
4696             });
4697         }).defer(100,this);
4698
4699     },
4700     hide : function()
4701     {
4702         if(this.fireEvent("beforehide", this) !== false){
4703             
4704             this.maskEl.removeClass('show');
4705             
4706             this.maskEl.dom.style.display = '';
4707             Roo.get(document.body).removeClass("x-body-masked");
4708             this.el.removeClass('in');
4709             this.el.select('.modal-dialog', true).first().setStyle('transform','');
4710
4711             if(this.animate){ // why
4712                 this.el.addClass('hideing');
4713                 this.el.removeClass('show');
4714                 (function(){
4715                     if (!this.el.hasClass('hideing')) {
4716                         return; // it's been shown again...
4717                     }
4718                     
4719                     this.el.dom.style.display='';
4720
4721                     Roo.get(document.body).removeClass('modal-open');
4722                     this.el.removeClass('hideing');
4723                 }).defer(150,this);
4724                 
4725             }else{
4726                 this.el.removeClass('show');
4727                 this.el.dom.style.display='';
4728                 Roo.get(document.body).removeClass('modal-open');
4729
4730             }
4731             this.fireEvent('hide', this);
4732         }
4733     },
4734     isVisible : function()
4735     {
4736         
4737         return this.el.hasClass('show') && !this.el.hasClass('hideing');
4738         
4739     },
4740
4741     addButton : function(str, cb)
4742     {
4743
4744
4745         var b = Roo.apply({}, { html : str } );
4746         b.xns = b.xns || Roo.bootstrap;
4747         b.xtype = b.xtype || 'Button';
4748         if (typeof(b.listeners) == 'undefined') {
4749             b.listeners = { click : cb.createDelegate(this)  };
4750         }
4751
4752         var btn = Roo.factory(b);
4753
4754         btn.render(this.getButtonContainer());
4755
4756         return btn;
4757
4758     },
4759
4760     setDefaultButton : function(btn)
4761     {
4762         //this.el.select('.modal-footer').()
4763     },
4764
4765     resizeTo: function(w,h)
4766     {
4767         this.dialogEl.setWidth(w);
4768         
4769         var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
4770
4771         this.bodyEl.setHeight(h - diff);
4772         
4773         this.fireEvent('resize', this);
4774     },
4775     
4776     setContentSize  : function(w, h)
4777     {
4778
4779     },
4780     onButtonClick: function(btn,e)
4781     {
4782         //Roo.log([a,b,c]);
4783         this.fireEvent('btnclick', btn.name, e);
4784     },
4785      /**
4786      * Set the title of the Dialog
4787      * @param {String} str new Title
4788      */
4789     setTitle: function(str) {
4790         this.titleEl.dom.innerHTML = str;
4791         this.title = str;
4792     },
4793     /**
4794      * Set the body of the Dialog
4795      * @param {String} str new Title
4796      */
4797     setBody: function(str) {
4798         this.bodyEl.dom.innerHTML = str;
4799     },
4800     /**
4801      * Set the body of the Dialog using the template
4802      * @param {Obj} data - apply this data to the template and replace the body contents.
4803      */
4804     applyBody: function(obj)
4805     {
4806         if (!this.tmpl) {
4807             Roo.log("Error - using apply Body without a template");
4808             //code
4809         }
4810         this.tmpl.overwrite(this.bodyEl, obj);
4811     },
4812     
4813     getChildHeight : function(child_nodes)
4814     {
4815         if(
4816             !child_nodes ||
4817             child_nodes.length == 0
4818         ) {
4819             return 0;
4820         }
4821         
4822         var child_height = 0;
4823         
4824         for(var i = 0; i < child_nodes.length; i++) {
4825             
4826             /*
4827             * for modal with tabs...
4828             if(child_nodes[i].classList.contains('roo-layout-panel')) {
4829                 
4830                 var layout_childs = child_nodes[i].childNodes;
4831                 
4832                 for(var j = 0; j < layout_childs.length; j++) {
4833                     
4834                     if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
4835                         
4836                         var layout_body_childs = layout_childs[j].childNodes;
4837                         
4838                         for(var k = 0; k < layout_body_childs.length; k++) {
4839                             
4840                             if(layout_body_childs[k].classList.contains('navbar')) {
4841                                 child_height += layout_body_childs[k].offsetHeight;
4842                                 continue;
4843                             }
4844                             
4845                             if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
4846                                 
4847                                 var layout_body_tab_childs = layout_body_childs[k].childNodes;
4848                                 
4849                                 for(var m = 0; m < layout_body_tab_childs.length; m++) {
4850                                     
4851                                     if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
4852                                         child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
4853                                         continue;
4854                                     }
4855                                     
4856                                 }
4857                                 
4858                             }
4859                             
4860                         }
4861                     }
4862                 }
4863                 continue;
4864             }
4865             */
4866             
4867             child_height += child_nodes[i].offsetHeight;
4868             // Roo.log(child_nodes[i].offsetHeight);
4869         }
4870         
4871         return child_height;
4872     },
4873     toggleHeaderInput : function(is_edit)
4874     {
4875         if (!this.editableTitle) {
4876             return; // not editable.
4877         }
4878         if (is_edit && this.is_header_editing) {
4879             return; // already editing..
4880         }
4881         if (is_edit) {
4882     
4883             this.headerEditEl.dom.value = this.title;
4884             this.headerEditEl.removeClass('d-none');
4885             this.headerEditEl.dom.focus();
4886             this.titleEl.addClass('d-none');
4887             
4888             this.is_header_editing = true;
4889             return
4890         }
4891         // flip back to not editing.
4892         this.title = this.headerEditEl.dom.value;
4893         this.headerEditEl.addClass('d-none');
4894         this.titleEl.removeClass('d-none');
4895         this.titleEl.dom.innerHTML = String.format('{0}', this.title);
4896         this.is_header_editing = false;
4897         this.fireEvent('titlechanged', this, this.title);
4898     
4899             
4900         
4901     }
4902
4903 });
4904
4905
4906 Roo.apply(Roo.bootstrap.Modal,  {
4907     /**
4908          * Button config that displays a single OK button
4909          * @type Object
4910          */
4911         OK :  [{
4912             name : 'ok',
4913             weight : 'primary',
4914             html : 'OK'
4915         }],
4916         /**
4917          * Button config that displays Yes and No buttons
4918          * @type Object
4919          */
4920         YESNO : [
4921             {
4922                 name  : 'no',
4923                 html : 'No'
4924             },
4925             {
4926                 name  :'yes',
4927                 weight : 'primary',
4928                 html : 'Yes'
4929             }
4930         ],
4931
4932         /**
4933          * Button config that displays OK and Cancel buttons
4934          * @type Object
4935          */
4936         OKCANCEL : [
4937             {
4938                name : 'cancel',
4939                 html : 'Cancel'
4940             },
4941             {
4942                 name : 'ok',
4943                 weight : 'primary',
4944                 html : 'OK'
4945             }
4946         ],
4947         /**
4948          * Button config that displays Yes, No and Cancel buttons
4949          * @type Object
4950          */
4951         YESNOCANCEL : [
4952             {
4953                 name : 'yes',
4954                 weight : 'primary',
4955                 html : 'Yes'
4956             },
4957             {
4958                 name : 'no',
4959                 html : 'No'
4960             },
4961             {
4962                 name : 'cancel',
4963                 html : 'Cancel'
4964             }
4965         ],
4966         
4967         zIndex : 10001
4968 });
4969
4970 /*
4971  * - LGPL
4972  *
4973  * messagebox - can be used as a replace
4974  * 
4975  */
4976 /**
4977  * @class Roo.MessageBox
4978  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
4979  * Example usage:
4980  *<pre><code>
4981 // Basic alert:
4982 Roo.Msg.alert('Status', 'Changes saved successfully.');
4983
4984 // Prompt for user data:
4985 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
4986     if (btn == 'ok'){
4987         // process text value...
4988     }
4989 });
4990
4991 // Show a dialog using config options:
4992 Roo.Msg.show({
4993    title:'Save Changes?',
4994    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
4995    buttons: Roo.Msg.YESNOCANCEL,
4996    fn: processResult,
4997    animEl: 'elId'
4998 });
4999 </code></pre>
5000  * @static
5001  */
5002 Roo.bootstrap.MessageBox = function(){
5003     var dlg, opt, mask, waitTimer;
5004     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
5005     var buttons, activeTextEl, bwidth;
5006
5007     
5008     // private
5009     var handleButton = function(button){
5010         dlg.hide();
5011         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
5012     };
5013
5014     // private
5015     var handleHide = function(){
5016         if(opt && opt.cls){
5017             dlg.el.removeClass(opt.cls);
5018         }
5019         //if(waitTimer){
5020         //    Roo.TaskMgr.stop(waitTimer);
5021         //    waitTimer = null;
5022         //}
5023     };
5024
5025     // private
5026     var updateButtons = function(b){
5027         var width = 0;
5028         if(!b){
5029             buttons["ok"].hide();
5030             buttons["cancel"].hide();
5031             buttons["yes"].hide();
5032             buttons["no"].hide();
5033             dlg.footerEl.hide();
5034             
5035             return width;
5036         }
5037         dlg.footerEl.show();
5038         for(var k in buttons){
5039             if(typeof buttons[k] != "function"){
5040                 if(b[k]){
5041                     buttons[k].show();
5042                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
5043                     width += buttons[k].el.getWidth()+15;
5044                 }else{
5045                     buttons[k].hide();
5046                 }
5047             }
5048         }
5049         return width;
5050     };
5051
5052     // private
5053     var handleEsc = function(d, k, e){
5054         if(opt && opt.closable !== false){
5055             dlg.hide();
5056         }
5057         if(e){
5058             e.stopEvent();
5059         }
5060     };
5061
5062     return {
5063         /**
5064          * Returns a reference to the underlying {@link Roo.BasicDialog} element
5065          * @return {Roo.BasicDialog} The BasicDialog element
5066          */
5067         getDialog : function(){
5068            if(!dlg){
5069                 dlg = new Roo.bootstrap.Modal( {
5070                     //draggable: true,
5071                     //resizable:false,
5072                     //constraintoviewport:false,
5073                     //fixedcenter:true,
5074                     //collapsible : false,
5075                     //shim:true,
5076                     //modal: true,
5077                 //    width: 'auto',
5078                   //  height:100,
5079                     //buttonAlign:"center",
5080                     closeClick : function(){
5081                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
5082                             handleButton("no");
5083                         }else{
5084                             handleButton("cancel");
5085                         }
5086                     }
5087                 });
5088                 dlg.render();
5089                 dlg.on("hide", handleHide);
5090                 mask = dlg.mask;
5091                 //dlg.addKeyListener(27, handleEsc);
5092                 buttons = {};
5093                 this.buttons = buttons;
5094                 var bt = this.buttonText;
5095                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
5096                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
5097                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
5098                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
5099                 //Roo.log(buttons);
5100                 bodyEl = dlg.bodyEl.createChild({
5101
5102                     html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
5103                         '<textarea class="roo-mb-textarea"></textarea>' +
5104                         '<div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
5105                 });
5106                 msgEl = bodyEl.dom.firstChild;
5107                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
5108                 textboxEl.enableDisplayMode();
5109                 textboxEl.addKeyListener([10,13], function(){
5110                     if(dlg.isVisible() && opt && opt.buttons){
5111                         if(opt.buttons.ok){
5112                             handleButton("ok");
5113                         }else if(opt.buttons.yes){
5114                             handleButton("yes");
5115                         }
5116                     }
5117                 });
5118                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
5119                 textareaEl.enableDisplayMode();
5120                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
5121                 progressEl.enableDisplayMode();
5122                 
5123                 // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
5124                 var pf = progressEl.dom.firstChild;
5125                 if (pf) {
5126                     pp = Roo.get(pf.firstChild);
5127                     pp.setHeight(pf.offsetHeight);
5128                 }
5129                 
5130             }
5131             return dlg;
5132         },
5133
5134         /**
5135          * Updates the message box body text
5136          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
5137          * the XHTML-compliant non-breaking space character '&amp;#160;')
5138          * @return {Roo.MessageBox} This message box
5139          */
5140         updateText : function(text)
5141         {
5142             if(!dlg.isVisible() && !opt.width){
5143                 dlg.dialogEl.setStyle({ 'max-width' : this.maxWidth});
5144                 // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
5145             }
5146             msgEl.innerHTML = text || '&#160;';
5147       
5148             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
5149             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
5150             var w = Math.max(
5151                     Math.min(opt.width || cw , this.maxWidth), 
5152                     Math.max(opt.minWidth || this.minWidth, bwidth)
5153             );
5154             if(opt.prompt){
5155                 activeTextEl.setWidth(w);
5156             }
5157             if(dlg.isVisible()){
5158                 dlg.fixedcenter = false;
5159             }
5160             // to big, make it scroll. = But as usual stupid IE does not support
5161             // !important..
5162             
5163             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
5164                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
5165                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
5166             } else {
5167                 bodyEl.dom.style.height = '';
5168                 bodyEl.dom.style.overflowY = '';
5169             }
5170             if (cw > w) {
5171                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
5172             } else {
5173                 bodyEl.dom.style.overflowX = '';
5174             }
5175             
5176             dlg.setContentSize(w, bodyEl.getHeight());
5177             if(dlg.isVisible()){
5178                 dlg.fixedcenter = true;
5179             }
5180             return this;
5181         },
5182
5183         /**
5184          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
5185          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
5186          * @param {Number} value Any number between 0 and 1 (e.g., .5)
5187          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
5188          * @return {Roo.MessageBox} This message box
5189          */
5190         updateProgress : function(value, text){
5191             if(text){
5192                 this.updateText(text);
5193             }
5194             
5195             if (pp) { // weird bug on my firefox - for some reason this is not defined
5196                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
5197                 pp.setHeight(Math.floor(progressEl.dom.firstChild.offsetHeight));
5198             }
5199             return this;
5200         },        
5201
5202         /**
5203          * Returns true if the message box is currently displayed
5204          * @return {Boolean} True if the message box is visible, else false
5205          */
5206         isVisible : function(){
5207             return dlg && dlg.isVisible();  
5208         },
5209
5210         /**
5211          * Hides the message box if it is displayed
5212          */
5213         hide : function(){
5214             if(this.isVisible()){
5215                 dlg.hide();
5216             }  
5217         },
5218
5219         /**
5220          * Displays a new message box, or reinitializes an existing message box, based on the config options
5221          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
5222          * The following config object properties are supported:
5223          * <pre>
5224 Property    Type             Description
5225 ----------  ---------------  ------------------------------------------------------------------------------------
5226 animEl            String/Element   An id or Element from which the message box should animate as it opens and
5227                                    closes (defaults to undefined)
5228 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
5229                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
5230 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
5231                                    progress and wait dialogs will ignore this property and always hide the
5232                                    close button as they can only be closed programmatically.
5233 cls               String           A custom CSS class to apply to the message box element
5234 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
5235                                    displayed (defaults to 75)
5236 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
5237                                    function will be btn (the name of the button that was clicked, if applicable,
5238                                    e.g. "ok"), and text (the value of the active text field, if applicable).
5239                                    Progress and wait dialogs will ignore this option since they do not respond to
5240                                    user actions and can only be closed programmatically, so any required function
5241                                    should be called by the same code after it closes the dialog.
5242 icon              String           A CSS class that provides a background image to be used as an icon for
5243                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
5244 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
5245 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
5246 modal             Boolean          False to allow user interaction with the page while the message box is
5247                                    displayed (defaults to true)
5248 msg               String           A string that will replace the existing message box body text (defaults
5249                                    to the XHTML-compliant non-breaking space character '&#160;')
5250 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
5251 progress          Boolean          True to display a progress bar (defaults to false)
5252 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
5253 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
5254 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
5255 title             String           The title text
5256 value             String           The string value to set into the active textbox element if displayed
5257 wait              Boolean          True to display a progress bar (defaults to false)
5258 width             Number           The width of the dialog in pixels
5259 </pre>
5260          *
5261          * Example usage:
5262          * <pre><code>
5263 Roo.Msg.show({
5264    title: 'Address',
5265    msg: 'Please enter your address:',
5266    width: 300,
5267    buttons: Roo.MessageBox.OKCANCEL,
5268    multiline: true,
5269    fn: saveAddress,
5270    animEl: 'addAddressBtn'
5271 });
5272 </code></pre>
5273          * @param {Object} config Configuration options
5274          * @return {Roo.MessageBox} This message box
5275          */
5276         show : function(options)
5277         {
5278             
5279             // this causes nightmares if you show one dialog after another
5280             // especially on callbacks..
5281              
5282             if(this.isVisible()){
5283                 
5284                 this.hide();
5285                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
5286                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
5287                 Roo.log("New Dialog Message:" +  options.msg )
5288                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
5289                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
5290                 
5291             }
5292             var d = this.getDialog();
5293             opt = options;
5294             d.setTitle(opt.title || "&#160;");
5295             d.closeEl.setDisplayed(opt.closable !== false);
5296             activeTextEl = textboxEl;
5297             opt.prompt = opt.prompt || (opt.multiline ? true : false);
5298             if(opt.prompt){
5299                 if(opt.multiline){
5300                     textboxEl.hide();
5301                     textareaEl.show();
5302                     textareaEl.setHeight(typeof opt.multiline == "number" ?
5303                         opt.multiline : this.defaultTextHeight);
5304                     activeTextEl = textareaEl;
5305                 }else{
5306                     textboxEl.show();
5307                     textareaEl.hide();
5308                 }
5309             }else{
5310                 textboxEl.hide();
5311                 textareaEl.hide();
5312             }
5313             progressEl.setDisplayed(opt.progress === true);
5314             if (opt.progress) {
5315                 d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
5316             }
5317             this.updateProgress(0);
5318             activeTextEl.dom.value = opt.value || "";
5319             if(opt.prompt){
5320                 dlg.setDefaultButton(activeTextEl);
5321             }else{
5322                 var bs = opt.buttons;
5323                 var db = null;
5324                 if(bs && bs.ok){
5325                     db = buttons["ok"];
5326                 }else if(bs && bs.yes){
5327                     db = buttons["yes"];
5328                 }
5329                 dlg.setDefaultButton(db);
5330             }
5331             bwidth = updateButtons(opt.buttons);
5332             this.updateText(opt.msg);
5333             if(opt.cls){
5334                 d.el.addClass(opt.cls);
5335             }
5336             d.proxyDrag = opt.proxyDrag === true;
5337             d.modal = opt.modal !== false;
5338             d.mask = opt.modal !== false ? mask : false;
5339             if(!d.isVisible()){
5340                 // force it to the end of the z-index stack so it gets a cursor in FF
5341                 document.body.appendChild(dlg.el.dom);
5342                 d.animateTarget = null;
5343                 d.show(options.animEl);
5344             }
5345             return this;
5346         },
5347
5348         /**
5349          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
5350          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
5351          * and closing the message box when the process is complete.
5352          * @param {String} title The title bar text
5353          * @param {String} msg The message box body text
5354          * @return {Roo.MessageBox} This message box
5355          */
5356         progress : function(title, msg){
5357             this.show({
5358                 title : title,
5359                 msg : msg,
5360                 buttons: false,
5361                 progress:true,
5362                 closable:false,
5363                 minWidth: this.minProgressWidth,
5364                 modal : true
5365             });
5366             return this;
5367         },
5368
5369         /**
5370          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
5371          * If a callback function is passed it will be called after the user clicks the button, and the
5372          * id of the button that was clicked will be passed as the only parameter to the callback
5373          * (could also be the top-right close button).
5374          * @param {String} title The title bar text
5375          * @param {String} msg The message box body text
5376          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5377          * @param {Object} scope (optional) The scope of the callback function
5378          * @return {Roo.MessageBox} This message box
5379          */
5380         alert : function(title, msg, fn, scope)
5381         {
5382             this.show({
5383                 title : title,
5384                 msg : msg,
5385                 buttons: this.OK,
5386                 fn: fn,
5387                 closable : false,
5388                 scope : scope,
5389                 modal : true
5390             });
5391             return this;
5392         },
5393
5394         /**
5395          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
5396          * interaction while waiting for a long-running process to complete that does not have defined intervals.
5397          * You are responsible for closing the message box when the process is complete.
5398          * @param {String} msg The message box body text
5399          * @param {String} title (optional) The title bar text
5400          * @return {Roo.MessageBox} This message box
5401          */
5402         wait : function(msg, title){
5403             this.show({
5404                 title : title,
5405                 msg : msg,
5406                 buttons: false,
5407                 closable:false,
5408                 progress:true,
5409                 modal:true,
5410                 width:300,
5411                 wait:true
5412             });
5413             waitTimer = Roo.TaskMgr.start({
5414                 run: function(i){
5415                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
5416                 },
5417                 interval: 1000
5418             });
5419             return this;
5420         },
5421
5422         /**
5423          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
5424          * If a callback function is passed it will be called after the user clicks either button, and the id of the
5425          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
5426          * @param {String} title The title bar text
5427          * @param {String} msg The message box body text
5428          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5429          * @param {Object} scope (optional) The scope of the callback function
5430          * @return {Roo.MessageBox} This message box
5431          */
5432         confirm : function(title, msg, fn, scope){
5433             this.show({
5434                 title : title,
5435                 msg : msg,
5436                 buttons: this.YESNO,
5437                 fn: fn,
5438                 scope : scope,
5439                 modal : true
5440             });
5441             return this;
5442         },
5443
5444         /**
5445          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
5446          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
5447          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
5448          * (could also be the top-right close button) and the text that was entered will be passed as the two
5449          * parameters to the callback.
5450          * @param {String} title The title bar text
5451          * @param {String} msg The message box body text
5452          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5453          * @param {Object} scope (optional) The scope of the callback function
5454          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
5455          * property, or the height in pixels to create the textbox (defaults to false / single-line)
5456          * @return {Roo.MessageBox} This message box
5457          */
5458         prompt : function(title, msg, fn, scope, multiline){
5459             this.show({
5460                 title : title,
5461                 msg : msg,
5462                 buttons: this.OKCANCEL,
5463                 fn: fn,
5464                 minWidth:250,
5465                 scope : scope,
5466                 prompt:true,
5467                 multiline: multiline,
5468                 modal : true
5469             });
5470             return this;
5471         },
5472
5473         /**
5474          * Button config that displays a single OK button
5475          * @type Object
5476          */
5477         OK : {ok:true},
5478         /**
5479          * Button config that displays Yes and No buttons
5480          * @type Object
5481          */
5482         YESNO : {yes:true, no:true},
5483         /**
5484          * Button config that displays OK and Cancel buttons
5485          * @type Object
5486          */
5487         OKCANCEL : {ok:true, cancel:true},
5488         /**
5489          * Button config that displays Yes, No and Cancel buttons
5490          * @type Object
5491          */
5492         YESNOCANCEL : {yes:true, no:true, cancel:true},
5493
5494         /**
5495          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
5496          * @type Number
5497          */
5498         defaultTextHeight : 75,
5499         /**
5500          * The maximum width in pixels of the message box (defaults to 600)
5501          * @type Number
5502          */
5503         maxWidth : 600,
5504         /**
5505          * The minimum width in pixels of the message box (defaults to 100)
5506          * @type Number
5507          */
5508         minWidth : 100,
5509         /**
5510          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
5511          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
5512          * @type Number
5513          */
5514         minProgressWidth : 250,
5515         /**
5516          * An object containing the default button text strings that can be overriden for localized language support.
5517          * Supported properties are: ok, cancel, yes and no.
5518          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
5519          * @type Object
5520          */
5521         buttonText : {
5522             ok : "OK",
5523             cancel : "Cancel",
5524             yes : "Yes",
5525             no : "No"
5526         }
5527     };
5528 }();
5529
5530 /**
5531  * Shorthand for {@link Roo.MessageBox}
5532  */
5533 Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
5534 Roo.Msg = Roo.Msg || Roo.MessageBox;
5535 /*
5536  * - LGPL
5537  *
5538  * navbar
5539  * 
5540  */
5541
5542 /**
5543  * @class Roo.bootstrap.nav.Bar
5544  * @extends Roo.bootstrap.Component
5545  * @abstract
5546  * Bootstrap Navbar class
5547
5548  * @constructor
5549  * Create a new Navbar
5550  * @param {Object} config The config object
5551  */
5552
5553
5554 Roo.bootstrap.nav.Bar = function(config){
5555     Roo.bootstrap.nav.Bar.superclass.constructor.call(this, config);
5556     this.addEvents({
5557         // raw events
5558         /**
5559          * @event beforetoggle
5560          * Fire before toggle the menu
5561          * @param {Roo.EventObject} e
5562          */
5563         "beforetoggle" : true
5564     });
5565 };
5566
5567 Roo.extend(Roo.bootstrap.nav.Bar, Roo.bootstrap.Component,  {
5568     
5569     
5570    
5571     // private
5572     navItems : false,
5573     loadMask : false,
5574     
5575     
5576     getAutoCreate : function(){
5577         
5578         
5579         throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
5580         
5581     },
5582     
5583     initEvents :function ()
5584     {
5585         //Roo.log(this.el.select('.navbar-toggle',true));
5586         this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
5587         
5588         var mark = {
5589             tag: "div",
5590             cls:"x-dlg-mask"
5591         };
5592         
5593         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
5594         
5595         var size = this.el.getSize();
5596         this.maskEl.setSize(size.width, size.height);
5597         this.maskEl.enableDisplayMode("block");
5598         this.maskEl.hide();
5599         
5600         if(this.loadMask){
5601             this.maskEl.show();
5602         }
5603     },
5604     
5605     
5606     getChildContainer : function()
5607     {
5608         if (this.el && this.el.select('.collapse').getCount()) {
5609             return this.el.select('.collapse',true).first();
5610         }
5611         
5612         return this.el;
5613     },
5614     
5615     mask : function()
5616     {
5617         this.maskEl.show();
5618     },
5619     
5620     unmask : function()
5621     {
5622         this.maskEl.hide();
5623     },
5624     onToggle : function()
5625     {
5626         
5627         if(this.fireEvent('beforetoggle', this) === false){
5628             return;
5629         }
5630         var ce = this.el.select('.navbar-collapse',true).first();
5631       
5632         if (!ce.hasClass('show')) {
5633            this.expand();
5634         } else {
5635             this.collapse();
5636         }
5637         
5638         
5639     
5640     },
5641     /**
5642      * Expand the navbar pulldown 
5643      */
5644     expand : function ()
5645     {
5646        
5647         var ce = this.el.select('.navbar-collapse',true).first();
5648         if (ce.hasClass('collapsing')) {
5649             return;
5650         }
5651         ce.dom.style.height = '';
5652                // show it...
5653         ce.addClass('in'); // old...
5654         ce.removeClass('collapse');
5655         ce.addClass('show');
5656         var h = ce.getHeight();
5657         Roo.log(h);
5658         ce.removeClass('show');
5659         // at this point we should be able to see it..
5660         ce.addClass('collapsing');
5661         
5662         ce.setHeight(0); // resize it ...
5663         ce.on('transitionend', function() {
5664             //Roo.log('done transition');
5665             ce.removeClass('collapsing');
5666             ce.addClass('show');
5667             ce.removeClass('collapse');
5668
5669             ce.dom.style.height = '';
5670         }, this, { single: true} );
5671         ce.setHeight(h);
5672         ce.dom.scrollTop = 0;
5673     },
5674     /**
5675      * Collapse the navbar pulldown 
5676      */
5677     collapse : function()
5678     {
5679          var ce = this.el.select('.navbar-collapse',true).first();
5680        
5681         if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
5682             // it's collapsed or collapsing..
5683             return;
5684         }
5685         ce.removeClass('in'); // old...
5686         ce.setHeight(ce.getHeight());
5687         ce.removeClass('show');
5688         ce.addClass('collapsing');
5689         
5690         ce.on('transitionend', function() {
5691             ce.dom.style.height = '';
5692             ce.removeClass('collapsing');
5693             ce.addClass('collapse');
5694         }, this, { single: true} );
5695         ce.setHeight(0);
5696     }
5697     
5698     
5699     
5700 });
5701
5702
5703
5704  
5705
5706  /*
5707  * - LGPL
5708  *
5709  * navbar
5710  * 
5711  */
5712
5713 /**
5714  * @class Roo.bootstrap.nav.Simplebar
5715  * @extends Roo.bootstrap.nav.Bar
5716  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5717  * Bootstrap Sidebar class
5718  *
5719  * @cfg {Boolean} inverse is inverted color
5720  * 
5721  * @cfg {String} type (nav | pills | tabs)
5722  * @cfg {Boolean} arrangement stacked | justified
5723  * @cfg {String} align (left | right) alignment
5724  * 
5725  * @cfg {Boolean} main (true|false) main nav bar? default false
5726  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
5727  * 
5728  * @cfg {String} tag (header|footer|nav|div) default is nav 
5729
5730  * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light.
5731  * 
5732  * 
5733  * @constructor
5734  * Create a new Sidebar
5735  * @param {Object} config The config object
5736  */
5737
5738
5739 Roo.bootstrap.nav.Simplebar = function(config){
5740     Roo.bootstrap.nav.Simplebar.superclass.constructor.call(this, config);
5741 };
5742
5743 Roo.extend(Roo.bootstrap.nav.Simplebar, Roo.bootstrap.nav.Bar,  {
5744     
5745     inverse: false,
5746     
5747     type: false,
5748     arrangement: '',
5749     align : false,
5750     
5751     weight : 'light',
5752     
5753     main : false,
5754     
5755     
5756     tag : false,
5757     
5758     
5759     getAutoCreate : function(){
5760         
5761         
5762         var cfg = {
5763             tag : this.tag || 'div',
5764             cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
5765         };
5766         if (['light','white'].indexOf(this.weight) > -1) {
5767             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5768         }
5769         cfg.cls += ' bg-' + this.weight;
5770         
5771         if (this.inverse) {
5772             cfg.cls += ' navbar-inverse';
5773             
5774         }
5775         
5776         // i'm not actually sure these are really used - normally we add a navGroup to a navbar
5777         
5778         if (Roo.bootstrap.version == 4 && this.xtype == 'NavSimplebar') {
5779             return cfg;
5780         }
5781         
5782         
5783     
5784         
5785         cfg.cn = [
5786             {
5787                 cls: 'nav nav-' + this.xtype,
5788                 tag : 'ul'
5789             }
5790         ];
5791         
5792          
5793         this.type = this.type || 'nav';
5794         if (['tabs','pills'].indexOf(this.type) != -1) {
5795             cfg.cn[0].cls += ' nav-' + this.type
5796         
5797         
5798         } else {
5799             if (this.type!=='nav') {
5800                 Roo.log('nav type must be nav/tabs/pills')
5801             }
5802             cfg.cn[0].cls += ' navbar-nav'
5803         }
5804         
5805         
5806         
5807         
5808         if (['stacked','justified'].indexOf(this.arrangement) != -1) {
5809             cfg.cn[0].cls += ' nav-' + this.arrangement;
5810         }
5811         
5812         
5813         if (this.align === 'right') {
5814             cfg.cn[0].cls += ' navbar-right';
5815         }
5816         
5817         
5818         
5819         
5820         return cfg;
5821     
5822         
5823     }
5824     
5825     
5826     
5827 });
5828
5829
5830
5831  
5832
5833  
5834        /*
5835  * - LGPL
5836  *
5837  * navbar
5838  * navbar-fixed-top
5839  * navbar-expand-md  fixed-top 
5840  */
5841
5842 /**
5843  * @class Roo.bootstrap.nav.Headerbar
5844  * @extends Roo.bootstrap.nav.Simplebar
5845  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5846  * Bootstrap Sidebar class
5847  *
5848  * @cfg {String} brand what is brand
5849  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
5850  * @cfg {String} brand_href href of the brand
5851  * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button   default true
5852  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
5853  * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
5854  * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
5855  * 
5856  * @constructor
5857  * Create a new Sidebar
5858  * @param {Object} config The config object
5859  */
5860
5861
5862 Roo.bootstrap.nav.Headerbar = function(config){
5863     Roo.bootstrap.nav.Headerbar.superclass.constructor.call(this, config);
5864       
5865 };
5866
5867 Roo.extend(Roo.bootstrap.nav.Headerbar, Roo.bootstrap.nav.Simplebar,  {
5868     
5869     position: '',
5870     brand: '',
5871     brand_href: false,
5872     srButton : true,
5873     autohide : false,
5874     desktopCenter : false,
5875    
5876     
5877     getAutoCreate : function(){
5878         
5879         var   cfg = {
5880             tag: this.nav || 'nav',
5881             cls: 'navbar navbar-expand-md',
5882             role: 'navigation',
5883             cn: []
5884         };
5885         
5886         var cn = cfg.cn;
5887         if (this.desktopCenter) {
5888             cn.push({cls : 'container', cn : []});
5889             cn = cn[0].cn;
5890         }
5891         
5892         if(this.srButton){
5893             var btn = {
5894                 tag: 'button',
5895                 type: 'button',
5896                 cls: 'navbar-toggle navbar-toggler',
5897                 'data-toggle': 'collapse',
5898                 cn: [
5899                     {
5900                         tag: 'span',
5901                         cls: 'sr-only',
5902                         html: 'Toggle navigation'
5903                     },
5904                     {
5905                         tag: 'span',
5906                         cls: 'icon-bar navbar-toggler-icon'
5907                     },
5908                     {
5909                         tag: 'span',
5910                         cls: 'icon-bar'
5911                     },
5912                     {
5913                         tag: 'span',
5914                         cls: 'icon-bar'
5915                     }
5916                 ]
5917             };
5918             
5919             cn.push( Roo.bootstrap.version == 4 ? btn : {
5920                 tag: 'div',
5921                 cls: 'navbar-header',
5922                 cn: [
5923                     btn
5924                 ]
5925             });
5926         }
5927         
5928         cn.push({
5929             tag: 'div',
5930             cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
5931             cn : []
5932         });
5933         
5934         cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
5935         
5936         if (['light','white'].indexOf(this.weight) > -1) {
5937             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5938         }
5939         cfg.cls += ' bg-' + this.weight;
5940         
5941         
5942         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
5943             cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
5944             
5945             // tag can override this..
5946             
5947             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
5948         }
5949         
5950         if (this.brand !== '') {
5951             var cp =  Roo.bootstrap.version == 4 ? cn : cn[0].cn;
5952             cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
5953                 tag: 'a',
5954                 href: this.brand_href ? this.brand_href : '#',
5955                 cls: 'navbar-brand',
5956                 cn: [
5957                 this.brand
5958                 ]
5959             });
5960         }
5961         
5962         if(this.main){
5963             cfg.cls += ' main-nav';
5964         }
5965         
5966         
5967         return cfg;
5968
5969         
5970     },
5971     getHeaderChildContainer : function()
5972     {
5973         if (this.srButton && this.el.select('.navbar-header').getCount()) {
5974             return this.el.select('.navbar-header',true).first();
5975         }
5976         
5977         return this.getChildContainer();
5978     },
5979     
5980     getChildContainer : function()
5981     {
5982          
5983         return this.el.select('.roo-navbar-collapse',true).first();
5984          
5985         
5986     },
5987     
5988     initEvents : function()
5989     {
5990         Roo.bootstrap.nav.Headerbar.superclass.initEvents.call(this);
5991         
5992         if (this.autohide) {
5993             
5994             var prevScroll = 0;
5995             var ft = this.el;
5996             
5997             Roo.get(document).on('scroll',function(e) {
5998                 var ns = Roo.get(document).getScroll().top;
5999                 var os = prevScroll;
6000                 prevScroll = ns;
6001                 
6002                 if(ns > os){
6003                     ft.removeClass('slideDown');
6004                     ft.addClass('slideUp');
6005                     return;
6006                 }
6007                 ft.removeClass('slideUp');
6008                 ft.addClass('slideDown');
6009                  
6010               
6011           },this);
6012         }
6013     }    
6014     
6015 });
6016
6017
6018
6019  
6020
6021  /*
6022  * - LGPL
6023  *
6024  * navbar
6025  * 
6026  */
6027
6028 /**
6029  * @class Roo.bootstrap.nav.Sidebar
6030  * @extends Roo.bootstrap.nav.Bar
6031  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
6032  * Bootstrap Sidebar class
6033  * 
6034  * @constructor
6035  * Create a new Sidebar
6036  * @param {Object} config The config object
6037  */
6038
6039
6040 Roo.bootstrap.nav.Sidebar = function(config){
6041     Roo.bootstrap.nav.Sidebar.superclass.constructor.call(this, config);
6042 };
6043
6044 Roo.extend(Roo.bootstrap.nav.Sidebar, Roo.bootstrap.nav.Bar,  {
6045     
6046     sidebar : true, // used by Navbar Item and NavbarGroup at present...
6047     
6048     getAutoCreate : function(){
6049         
6050         
6051         return  {
6052             tag: 'div',
6053             cls: 'sidebar sidebar-nav'
6054         };
6055     
6056         
6057     }
6058     
6059     
6060     
6061 });
6062
6063
6064
6065  
6066
6067  /*
6068  * - LGPL
6069  *
6070  * nav group
6071  * 
6072  */
6073
6074 /**
6075  * @class Roo.bootstrap.nav.Group
6076  * @extends Roo.bootstrap.Component
6077  * @children Roo.bootstrap.nav.Item
6078  * Bootstrap NavGroup class
6079  * @cfg {String} align (left|right)
6080  * @cfg {Boolean} inverse
6081  * @cfg {String} type (nav|pills|tab) default nav
6082  * @cfg {String} navId - reference Id for navbar.
6083  * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
6084  * 
6085  * @constructor
6086  * Create a new nav group
6087  * @param {Object} config The config object
6088  */
6089
6090 Roo.bootstrap.nav.Group = function(config){
6091     Roo.bootstrap.nav.Group.superclass.constructor.call(this, config);
6092     this.navItems = [];
6093    
6094     Roo.bootstrap.nav.Group.register(this);
6095      this.addEvents({
6096         /**
6097              * @event changed
6098              * Fires when the active item changes
6099              * @param {Roo.bootstrap.nav.Group} this
6100              * @param {Roo.bootstrap.Navbar.Item} selected The item selected
6101              * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item 
6102          */
6103         'changed': true
6104      });
6105     
6106 };
6107
6108 Roo.extend(Roo.bootstrap.nav.Group, Roo.bootstrap.Component,  {
6109     
6110     align: '',
6111     inverse: false,
6112     form: false,
6113     type: 'nav',
6114     navId : '',
6115     // private
6116     pilltype : true,
6117     
6118     navItems : false, 
6119     
6120     getAutoCreate : function()
6121     {
6122         var cfg = Roo.apply({}, Roo.bootstrap.nav.Group.superclass.getAutoCreate.call(this));
6123         
6124         cfg = {
6125             tag : 'ul',
6126             cls: 'nav' 
6127         };
6128         if (Roo.bootstrap.version == 4) {
6129             if (['tabs','pills'].indexOf(this.type) != -1) {
6130                 cfg.cls += ' nav-' + this.type; 
6131             } else {
6132                 // trying to remove so header bar can right align top?
6133                 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
6134                     // do not use on header bar... 
6135                     cfg.cls += ' navbar-nav';
6136                 }
6137             }
6138             
6139         } else {
6140             if (['tabs','pills'].indexOf(this.type) != -1) {
6141                 cfg.cls += ' nav-' + this.type
6142             } else {
6143                 if (this.type !== 'nav') {
6144                     Roo.log('nav type must be nav/tabs/pills')
6145                 }
6146                 cfg.cls += ' navbar-nav'
6147             }
6148         }
6149         
6150         if (this.parent() && this.parent().sidebar) {
6151             cfg = {
6152                 tag: 'ul',
6153                 cls: 'dashboard-menu sidebar-menu'
6154             };
6155             
6156             return cfg;
6157         }
6158         
6159         if (this.form === true) {
6160             cfg = {
6161                 tag: 'form',
6162                 cls: 'navbar-form form-inline'
6163             };
6164             //nav navbar-right ml-md-auto
6165             if (this.align === 'right') {
6166                 cfg.cls += ' navbar-right ml-md-auto';
6167             } else {
6168                 cfg.cls += ' navbar-left';
6169             }
6170         }
6171         
6172         if (this.align === 'right') {
6173             cfg.cls += ' navbar-right ml-md-auto';
6174         } else {
6175             cfg.cls += ' mr-auto';
6176         }
6177         
6178         if (this.inverse) {
6179             cfg.cls += ' navbar-inverse';
6180             
6181         }
6182         
6183         
6184         return cfg;
6185     },
6186     /**
6187     * sets the active Navigation item
6188     * @param {Roo.bootstrap.nav.Item} the new current navitem
6189     */
6190     setActiveItem : function(item)
6191     {
6192         var prev = false;
6193         Roo.each(this.navItems, function(v){
6194             if (v == item) {
6195                 return ;
6196             }
6197             if (v.isActive()) {
6198                 v.setActive(false, true);
6199                 prev = v;
6200                 
6201             }
6202             
6203         });
6204
6205         item.setActive(true, true);
6206         this.fireEvent('changed', this, item, prev);
6207         
6208         
6209     },
6210     /**
6211     * gets the active Navigation item
6212     * @return {Roo.bootstrap.nav.Item} the current navitem
6213     */
6214     getActive : function()
6215     {
6216         
6217         var prev = false;
6218         Roo.each(this.navItems, function(v){
6219             
6220             if (v.isActive()) {
6221                 prev = v;
6222                 
6223             }
6224             
6225         });
6226         return prev;
6227     },
6228     
6229     indexOfNav : function()
6230     {
6231         
6232         var prev = false;
6233         Roo.each(this.navItems, function(v,i){
6234             
6235             if (v.isActive()) {
6236                 prev = i;
6237                 
6238             }
6239             
6240         });
6241         return prev;
6242     },
6243     /**
6244     * adds a Navigation item
6245     * @param {Roo.bootstrap.nav.Item} the navitem to add
6246     */
6247     addItem : function(cfg)
6248     {
6249         if (this.form && Roo.bootstrap.version == 4) {
6250             cfg.tag = 'div';
6251         }
6252         var cn = new Roo.bootstrap.nav.Item(cfg);
6253         this.register(cn);
6254         cn.parentId = this.id;
6255         cn.onRender(this.el, null);
6256         return cn;
6257     },
6258     /**
6259     * register a Navigation item
6260     * @param {Roo.bootstrap.nav.Item} the navitem to add
6261     */
6262     register : function(item)
6263     {
6264         this.navItems.push( item);
6265         item.navId = this.navId;
6266     
6267     },
6268     
6269     /**
6270     * clear all the Navigation item
6271     */
6272    
6273     clearAll : function()
6274     {
6275         this.navItems = [];
6276         this.el.dom.innerHTML = '';
6277     },
6278     
6279     getNavItem: function(tabId)
6280     {
6281         var ret = false;
6282         Roo.each(this.navItems, function(e) {
6283             if (e.tabId == tabId) {
6284                ret =  e;
6285                return false;
6286             }
6287             return true;
6288             
6289         });
6290         return ret;
6291     },
6292     
6293     setActiveNext : function()
6294     {
6295         var i = this.indexOfNav(this.getActive());
6296         if (i > this.navItems.length) {
6297             return;
6298         }
6299         this.setActiveItem(this.navItems[i+1]);
6300     },
6301     setActivePrev : function()
6302     {
6303         var i = this.indexOfNav(this.getActive());
6304         if (i  < 1) {
6305             return;
6306         }
6307         this.setActiveItem(this.navItems[i-1]);
6308     },
6309     clearWasActive : function(except) {
6310         Roo.each(this.navItems, function(e) {
6311             if (e.tabId != except.tabId && e.was_active) {
6312                e.was_active = false;
6313                return false;
6314             }
6315             return true;
6316             
6317         });
6318     },
6319     getWasActive : function ()
6320     {
6321         var r = false;
6322         Roo.each(this.navItems, function(e) {
6323             if (e.was_active) {
6324                r = e;
6325                return false;
6326             }
6327             return true;
6328             
6329         });
6330         return r;
6331     }
6332     
6333     
6334 });
6335
6336  
6337 Roo.apply(Roo.bootstrap.nav.Group, {
6338     
6339     groups: {},
6340      /**
6341     * register a Navigation Group
6342     * @param {Roo.bootstrap.nav.Group} the navgroup to add
6343     */
6344     register : function(navgrp)
6345     {
6346         this.groups[navgrp.navId] = navgrp;
6347         
6348     },
6349     /**
6350     * fetch a Navigation Group based on the navigation ID
6351     * @param {string} the navgroup to add
6352     * @returns {Roo.bootstrap.nav.Group} the navgroup 
6353     */
6354     get: function(navId) {
6355         if (typeof(this.groups[navId]) == 'undefined') {
6356             return false;
6357             //this.register(new Roo.bootstrap.nav.Group({ navId : navId }));
6358         }
6359         return this.groups[navId] ;
6360     }
6361     
6362     
6363     
6364 });
6365
6366  /**
6367  * @class Roo.bootstrap.nav.Item
6368  * @extends Roo.bootstrap.Component
6369  * @children Roo.bootstrap.Container Roo.bootstrap.Button
6370  * @parent Roo.bootstrap.nav.Group
6371  * @licence LGPL
6372  * Bootstrap Navbar.NavItem class
6373  * 
6374  * @cfg {String} href  link to
6375  * @cfg {String} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none
6376  * @cfg {Boolean} button_outline show and outlined button
6377  * @cfg {String} html content of button
6378  * @cfg {String} badge text inside badge
6379  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
6380  * @cfg {String} glyphicon DEPRICATED - use fa
6381  * @cfg {String} icon DEPRICATED - use fa
6382  * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
6383  * @cfg {Boolean} active Is item active
6384  * @cfg {Boolean} disabled Is item disabled
6385  * @cfg {String} linkcls  Link Class
6386  * @cfg {Boolean} preventDefault (true | false) default false
6387  * @cfg {String} tabId the tab that this item activates.
6388  * @cfg {String} tagtype (a|span) render as a href or span?
6389  * @cfg {Boolean} animateRef (true|false) link to element default false  
6390  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
6391   
6392  * @constructor
6393  * Create a new Navbar Item
6394  * @param {Object} config The config object
6395  */
6396 Roo.bootstrap.nav.Item = function(config){
6397     Roo.bootstrap.nav.Item.superclass.constructor.call(this, config);
6398     this.addEvents({
6399         // raw events
6400         /**
6401          * @event click
6402          * The raw click event for the entire grid.
6403          * @param {Roo.EventObject} e
6404          */
6405         "click" : true,
6406          /**
6407             * @event changed
6408             * Fires when the active item active state changes
6409             * @param {Roo.bootstrap.nav.Item} this
6410             * @param {boolean} state the new state
6411              
6412          */
6413         'changed': true,
6414         /**
6415             * @event scrollto
6416             * Fires when scroll to element
6417             * @param {Roo.bootstrap.nav.Item} this
6418             * @param {Object} options
6419             * @param {Roo.EventObject} e
6420              
6421          */
6422         'scrollto': true
6423     });
6424    
6425 };
6426
6427 Roo.extend(Roo.bootstrap.nav.Item, Roo.bootstrap.Component,  {
6428     
6429     href: false,
6430     html: '',
6431     badge: '',
6432     icon: false,
6433     fa : false,
6434     glyphicon: false,
6435     active: false,
6436     preventDefault : false,
6437     tabId : false,
6438     tagtype : 'a',
6439     tag: 'li',
6440     disabled : false,
6441     animateRef : false,
6442     was_active : false,
6443     button_weight : '',
6444     button_outline : false,
6445     linkcls : '',
6446     navLink: false,
6447     
6448     getAutoCreate : function(){
6449          
6450         var cfg = {
6451             tag: this.tag,
6452             cls: 'nav-item'
6453         };
6454         
6455         cfg.cls =  typeof(cfg.cls) == 'undefined'  ? '' : cfg.cls;
6456         
6457         if (this.active) {
6458             cfg.cls +=  ' active' ;
6459         }
6460         if (this.disabled) {
6461             cfg.cls += ' disabled';
6462         }
6463         
6464         // BS4 only?
6465         if (this.button_weight.length) {
6466             cfg.tag = this.href ? 'a' : 'button';
6467             cfg.html = this.html || '';
6468             cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
6469             if (this.href) {
6470                 cfg.href = this.href;
6471             }
6472             if (this.fa) {
6473                 cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
6474             } else {
6475                 cfg.cls += " nav-html";
6476             }
6477             
6478             // menu .. should add dropdown-menu class - so no need for carat..
6479             
6480             if (this.badge !== '') {
6481                  
6482                 cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6483             }
6484             return cfg;
6485         }
6486         
6487         if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
6488             cfg.cn = [
6489                 {
6490                     tag: this.tagtype,
6491                     href : this.href || "#",
6492                     html: this.html || '',
6493                     cls : ''
6494                 }
6495             ];
6496             if (this.tagtype == 'a') {
6497                 cfg.cn[0].cls = 'nav-link' +  (this.active ?  ' active'  : '') + ' ' + this.linkcls;
6498         
6499             }
6500             if (this.icon) {
6501                 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6502             } else  if (this.fa) {
6503                 cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6504             } else if(this.glyphicon) {
6505                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
6506             } else {
6507                 cfg.cn[0].cls += " nav-html";
6508             }
6509             
6510             if (this.menu) {
6511                 cfg.cn[0].html += " <span class='caret'></span>";
6512              
6513             }
6514             
6515             if (this.badge !== '') {
6516                 cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6517             }
6518         }
6519         
6520         
6521         
6522         return cfg;
6523     },
6524     onRender : function(ct, position)
6525     {
6526        // Roo.log("Call onRender: " + this.xtype);
6527         if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
6528             this.tag = 'div';
6529         }
6530         
6531         var ret = Roo.bootstrap.nav.Item.superclass.onRender.call(this, ct, position);
6532         this.navLink = this.el.select('.nav-link',true).first();
6533         this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first();
6534         return ret;
6535     },
6536       
6537     
6538     initEvents: function() 
6539     {
6540         if (typeof (this.menu) != 'undefined') {
6541             this.menu.parentType = this.xtype;
6542             this.menu.triggerEl = this.el;
6543             this.menu = this.addxtype(Roo.apply({}, this.menu));
6544         }
6545         
6546         this.el.on('click', this.onClick, this);
6547         
6548         //if(this.tagtype == 'span'){
6549         //    this.el.select('span',true).on('click', this.onClick, this);
6550         //}
6551        
6552         // at this point parent should be available..
6553         this.parent().register(this);
6554     },
6555     
6556     onClick : function(e)
6557     {
6558         if (e.getTarget('.dropdown-menu-item')) {
6559             // did you click on a menu itemm.... - then don't trigger onclick..
6560             return;
6561         }
6562         
6563         if(
6564                 this.preventDefault ||
6565                                 this.href === false ||
6566                 this.href === '#' 
6567         ){
6568             //Roo.log("NavItem - prevent Default?");
6569             e.preventDefault();
6570         }
6571         
6572         if (this.disabled) {
6573             return;
6574         }
6575         
6576         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6577         if (tg && tg.transition) {
6578             Roo.log("waiting for the transitionend");
6579             return;
6580         }
6581         
6582         
6583         
6584         //Roo.log("fire event clicked");
6585         if(this.fireEvent('click', this, e) === false){
6586             return;
6587         };
6588         
6589         if(this.tagtype == 'span'){
6590             return;
6591         }
6592         
6593         //Roo.log(this.href);
6594         var ael = this.el.select('a',true).first();
6595         //Roo.log(ael);
6596         
6597         if(ael && this.animateRef && this.href.indexOf('#') > -1){
6598             //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
6599             if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
6600                 return; // ignore... - it's a 'hash' to another page.
6601             }
6602             Roo.log("NavItem - prevent Default?");
6603             e.preventDefault();
6604             this.scrollToElement(e);
6605         }
6606         
6607         
6608         var p =  this.parent();
6609    
6610         if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) {
6611             if (typeof(p.setActiveItem) !== 'undefined') {
6612                 p.setActiveItem(this);
6613             }
6614         }
6615         
6616         // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
6617         if (p.parentType == 'NavHeaderbar' && !this.menu) {
6618             // remove the collapsed menu expand...
6619             p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');  
6620         }
6621     },
6622     
6623     isActive: function () {
6624         return this.active
6625     },
6626     setActive : function(state, fire, is_was_active)
6627     {
6628         if (this.active && !state && this.navId) {
6629             this.was_active = true;
6630             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6631             if (nv) {
6632                 nv.clearWasActive(this);
6633             }
6634             
6635         }
6636         this.active = state;
6637         
6638         if (!state ) {
6639             this.el.removeClass('active');
6640             this.navLink ? this.navLink.removeClass('active') : false;
6641         } else if (!this.el.hasClass('active')) {
6642             
6643             this.el.addClass('active');
6644             if (Roo.bootstrap.version == 4 && this.navLink ) {
6645                 this.navLink.addClass('active');
6646             }
6647             
6648         }
6649         if (fire) {
6650             this.fireEvent('changed', this, state);
6651         }
6652         
6653         // show a panel if it's registered and related..
6654         
6655         if (!this.navId || !this.tabId || !state || is_was_active) {
6656             return;
6657         }
6658         
6659         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6660         if (!tg) {
6661             return;
6662         }
6663         var pan = tg.getPanelByName(this.tabId);
6664         if (!pan) {
6665             return;
6666         }
6667         // if we can not flip to new panel - go back to old nav highlight..
6668         if (false == tg.showPanel(pan)) {
6669             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6670             if (nv) {
6671                 var onav = nv.getWasActive();
6672                 if (onav) {
6673                     onav.setActive(true, false, true);
6674                 }
6675             }
6676             
6677         }
6678         
6679         
6680         
6681     },
6682      // this should not be here...
6683     setDisabled : function(state)
6684     {
6685         this.disabled = state;
6686         if (!state ) {
6687             this.el.removeClass('disabled');
6688         } else if (!this.el.hasClass('disabled')) {
6689             this.el.addClass('disabled');
6690         }
6691         
6692     },
6693     
6694     /**
6695      * Fetch the element to display the tooltip on.
6696      * @return {Roo.Element} defaults to this.el
6697      */
6698     tooltipEl : function()
6699     {
6700         return this.el; //this.tagtype  == 'a' ? this.el  : this.el.select('' + this.tagtype + '', true).first();
6701     },
6702     
6703     scrollToElement : function(e)
6704     {
6705         var c = document.body;
6706         
6707         /*
6708          * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
6709          */
6710         if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
6711             c = document.documentElement;
6712         }
6713         
6714         var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
6715         
6716         if(!target){
6717             return;
6718         }
6719
6720         var o = target.calcOffsetsTo(c);
6721         
6722         var options = {
6723             target : target,
6724             value : o[1]
6725         };
6726         
6727         this.fireEvent('scrollto', this, options, e);
6728         
6729         Roo.get(c).scrollTo('top', options.value, true);
6730         
6731         return;
6732     },
6733     /**
6734      * Set the HTML (text content) of the item
6735      * @param {string} html  content for the nav item
6736      */
6737     setHtml : function(html)
6738     {
6739         this.html = html;
6740         this.htmlEl.dom.innerHTML = html;
6741         
6742     } 
6743 });
6744  
6745
6746  /*
6747  * - LGPL
6748  *
6749  * sidebar item
6750  *
6751  *  li
6752  *    <span> icon </span>
6753  *    <span> text </span>
6754  *    <span>badge </span>
6755  */
6756
6757 /**
6758  * @class Roo.bootstrap.nav.SidebarItem
6759  * @extends Roo.bootstrap.nav.Item
6760  * Bootstrap Navbar.NavSidebarItem class
6761  * 
6762  * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
6763  * {Boolean} open is the menu open
6764  * {Boolean} buttonView use button as the tigger el rather that a (default false)
6765  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
6766  * {String} buttonSize (sm|md|lg)the extra classes for the button
6767  * {Boolean} showArrow show arrow next to the text (default true)
6768  * @constructor
6769  * Create a new Navbar Button
6770  * @param {Object} config The config object
6771  */
6772 Roo.bootstrap.nav.SidebarItem = function(config){
6773     Roo.bootstrap.nav.SidebarItem.superclass.constructor.call(this, config);
6774     this.addEvents({
6775         // raw events
6776         /**
6777          * @event click
6778          * The raw click event for the entire grid.
6779          * @param {Roo.EventObject} e
6780          */
6781         "click" : true,
6782          /**
6783             * @event changed
6784             * Fires when the active item active state changes
6785             * @param {Roo.bootstrap.nav.SidebarItem} this
6786             * @param {boolean} state the new state
6787              
6788          */
6789         'changed': true
6790     });
6791    
6792 };
6793
6794 Roo.extend(Roo.bootstrap.nav.SidebarItem, Roo.bootstrap.nav.Item,  {
6795     
6796     badgeWeight : 'default',
6797     
6798     open: false,
6799     
6800     buttonView : false,
6801     
6802     buttonWeight : 'default',
6803     
6804     buttonSize : 'md',
6805     
6806     showArrow : true,
6807     
6808     getAutoCreate : function(){
6809         
6810         
6811         var a = {
6812                 tag: 'a',
6813                 href : this.href || '#',
6814                 cls: '',
6815                 html : '',
6816                 cn : []
6817         };
6818         
6819         if(this.buttonView){
6820             a = {
6821                 tag: 'button',
6822                 href : this.href || '#',
6823                 cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
6824                 html : this.html,
6825                 cn : []
6826             };
6827         }
6828         
6829         var cfg = {
6830             tag: 'li',
6831             cls: '',
6832             cn: [ a ]
6833         };
6834         
6835         if (this.active) {
6836             cfg.cls += ' active';
6837         }
6838         
6839         if (this.disabled) {
6840             cfg.cls += ' disabled';
6841         }
6842         if (this.open) {
6843             cfg.cls += ' open x-open';
6844         }
6845         // left icon..
6846         if (this.glyphicon || this.icon) {
6847             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
6848             a.cn.push({ tag : 'i', cls : c }) ;
6849         }
6850         
6851         if(!this.buttonView){
6852             var span = {
6853                 tag: 'span',
6854                 html : this.html || ''
6855             };
6856
6857             a.cn.push(span);
6858             
6859         }
6860         
6861         if (this.badge !== '') {
6862             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge }); 
6863         }
6864         
6865         if (this.menu) {
6866             
6867             if(this.showArrow){
6868                 a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
6869             }
6870             
6871             a.cls += ' dropdown-toggle treeview' ;
6872         }
6873         
6874         return cfg;
6875     },
6876     
6877     initEvents : function()
6878     { 
6879         if (typeof (this.menu) != 'undefined') {
6880             this.menu.parentType = this.xtype;
6881             this.menu.triggerEl = this.el;
6882             this.menu = this.addxtype(Roo.apply({}, this.menu));
6883         }
6884         
6885         this.el.on('click', this.onClick, this);
6886         
6887         if(this.badge !== ''){
6888             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
6889         }
6890         
6891     },
6892     
6893     onClick : function(e)
6894     {
6895         if(this.disabled){
6896             e.preventDefault();
6897             return;
6898         }
6899         
6900         if(this.preventDefault){
6901             e.preventDefault();
6902         }
6903         
6904         this.fireEvent('click', this, e);
6905     },
6906     
6907     disable : function()
6908     {
6909         this.setDisabled(true);
6910     },
6911     
6912     enable : function()
6913     {
6914         this.setDisabled(false);
6915     },
6916     
6917     setDisabled : function(state)
6918     {
6919         if(this.disabled == state){
6920             return;
6921         }
6922         
6923         this.disabled = state;
6924         
6925         if (state) {
6926             this.el.addClass('disabled');
6927             return;
6928         }
6929         
6930         this.el.removeClass('disabled');
6931         
6932         return;
6933     },
6934     
6935     setActive : function(state)
6936     {
6937         if(this.active == state){
6938             return;
6939         }
6940         
6941         this.active = state;
6942         
6943         if (state) {
6944             this.el.addClass('active');
6945             return;
6946         }
6947         
6948         this.el.removeClass('active');
6949         
6950         return;
6951     },
6952     
6953     isActive: function () 
6954     {
6955         return this.active;
6956     },
6957     
6958     setBadge : function(str)
6959     {
6960         if(!this.badgeEl){
6961             return;
6962         }
6963         
6964         this.badgeEl.dom.innerHTML = str;
6965     }
6966     
6967    
6968      
6969  
6970 });
6971  
6972
6973  /*
6974  * - LGPL
6975  *
6976  * nav progress bar
6977  * 
6978  */
6979
6980 /**
6981  * @class Roo.bootstrap.nav.ProgressBar
6982  * @extends Roo.bootstrap.Component
6983  * @children Roo.bootstrap.nav.ProgressBarItem
6984  * Bootstrap NavProgressBar class
6985  * 
6986  * @constructor
6987  * Create a new nav progress bar - a bar indicating step along a process
6988  * @param {Object} config The config object
6989  */
6990
6991 Roo.bootstrap.nav.ProgressBar = function(config){
6992     Roo.bootstrap.nav.ProgressBar.superclass.constructor.call(this, config);
6993
6994     this.bullets = this.bullets || [];
6995    
6996 //    Roo.bootstrap.nav.ProgressBar.register(this);
6997      this.addEvents({
6998         /**
6999              * @event changed
7000              * Fires when the active item changes
7001              * @param {Roo.bootstrap.nav.ProgressBar} this
7002              * @param {Roo.bootstrap.nav.ProgressItem} selected The item selected
7003              * @param {Roo.bootstrap.nav.ProgressItem} prev The previously selected item 
7004          */
7005         'changed': true
7006      });
7007     
7008 };
7009
7010 Roo.extend(Roo.bootstrap.nav.ProgressBar, Roo.bootstrap.Component,  {
7011     /**
7012      * @cfg {Roo.bootstrap.nav.ProgressItem} NavProgressBar:bullets[]
7013      * Bullets for the Nav Progress bar for the toolbar
7014      */
7015     bullets : [],
7016     barItems : [],
7017     
7018     getAutoCreate : function()
7019     {
7020         var cfg = Roo.apply({}, Roo.bootstrap.nav.ProgressBar.superclass.getAutoCreate.call(this));
7021         
7022         cfg = {
7023             tag : 'div',
7024             cls : 'roo-navigation-bar-group',
7025             cn : [
7026                 {
7027                     tag : 'div',
7028                     cls : 'roo-navigation-top-bar'
7029                 },
7030                 {
7031                     tag : 'div',
7032                     cls : 'roo-navigation-bullets-bar',
7033                     cn : [
7034                         {
7035                             tag : 'ul',
7036                             cls : 'roo-navigation-bar'
7037                         }
7038                     ]
7039                 },
7040                 
7041                 {
7042                     tag : 'div',
7043                     cls : 'roo-navigation-bottom-bar'
7044                 }
7045             ]
7046             
7047         };
7048         
7049         return cfg;
7050         
7051     },
7052     
7053     initEvents: function() 
7054     {
7055         
7056     },
7057     
7058     onRender : function(ct, position) 
7059     {
7060         Roo.bootstrap.nav.ProgressBar.superclass.onRender.call(this, ct, position);
7061         
7062         if(this.bullets.length){
7063             Roo.each(this.bullets, function(b){
7064                this.addItem(b);
7065             }, this);
7066         }
7067         
7068         this.format();
7069         
7070     },
7071     
7072     addItem : function(cfg)
7073     {
7074         var item = new Roo.bootstrap.nav.ProgressItem(cfg);
7075         
7076         item.parentId = this.id;
7077         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
7078         
7079         if(cfg.html){
7080             var top = new Roo.bootstrap.Element({
7081                 tag : 'div',
7082                 cls : 'roo-navigation-bar-text'
7083             });
7084             
7085             var bottom = new Roo.bootstrap.Element({
7086                 tag : 'div',
7087                 cls : 'roo-navigation-bar-text'
7088             });
7089             
7090             top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
7091             bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
7092             
7093             var topText = new Roo.bootstrap.Element({
7094                 tag : 'span',
7095                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
7096             });
7097             
7098             var bottomText = new Roo.bootstrap.Element({
7099                 tag : 'span',
7100                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
7101             });
7102             
7103             topText.onRender(top.el, null);
7104             bottomText.onRender(bottom.el, null);
7105             
7106             item.topEl = top;
7107             item.bottomEl = bottom;
7108         }
7109         
7110         this.barItems.push(item);
7111         
7112         return item;
7113     },
7114     
7115     getActive : function()
7116     {
7117         var active = false;
7118         
7119         Roo.each(this.barItems, function(v){
7120             
7121             if (!v.isActive()) {
7122                 return;
7123             }
7124             
7125             active = v;
7126             return false;
7127             
7128         });
7129         
7130         return active;
7131     },
7132     
7133     setActiveItem : function(item)
7134     {
7135         var prev = false;
7136         
7137         Roo.each(this.barItems, function(v){
7138             if (v.rid == item.rid) {
7139                 return ;
7140             }
7141             
7142             if (v.isActive()) {
7143                 v.setActive(false);
7144                 prev = v;
7145             }
7146         });
7147
7148         item.setActive(true);
7149         
7150         this.fireEvent('changed', this, item, prev);
7151     },
7152     
7153     getBarItem: function(rid)
7154     {
7155         var ret = false;
7156         
7157         Roo.each(this.barItems, function(e) {
7158             if (e.rid != rid) {
7159                 return;
7160             }
7161             
7162             ret =  e;
7163             return false;
7164         });
7165         
7166         return ret;
7167     },
7168     
7169     indexOfItem : function(item)
7170     {
7171         var index = false;
7172         
7173         Roo.each(this.barItems, function(v, i){
7174             
7175             if (v.rid != item.rid) {
7176                 return;
7177             }
7178             
7179             index = i;
7180             return false
7181         });
7182         
7183         return index;
7184     },
7185     
7186     setActiveNext : function()
7187     {
7188         var i = this.indexOfItem(this.getActive());
7189         
7190         if (i > this.barItems.length) {
7191             return;
7192         }
7193         
7194         this.setActiveItem(this.barItems[i+1]);
7195     },
7196     
7197     setActivePrev : function()
7198     {
7199         var i = this.indexOfItem(this.getActive());
7200         
7201         if (i  < 1) {
7202             return;
7203         }
7204         
7205         this.setActiveItem(this.barItems[i-1]);
7206     },
7207     
7208     format : function()
7209     {
7210         if(!this.barItems.length){
7211             return;
7212         }
7213      
7214         var width = 100 / this.barItems.length;
7215         
7216         Roo.each(this.barItems, function(i){
7217             i.el.setStyle('width', width + '%');
7218             i.topEl.el.setStyle('width', width + '%');
7219             i.bottomEl.el.setStyle('width', width + '%');
7220         }, this);
7221         
7222     }
7223     
7224 });
7225 /*
7226  * - LGPL
7227  *
7228  * Nav Progress Item
7229  * 
7230  */
7231
7232 /**
7233  * @class Roo.bootstrap.nav.ProgressBarItem
7234  * @extends Roo.bootstrap.Component
7235  * Bootstrap NavProgressBarItem class
7236  * @cfg {String} rid the reference id
7237  * @cfg {Boolean} active (true|false) Is item active default false
7238  * @cfg {Boolean} disabled (true|false) Is item active default false
7239  * @cfg {String} html
7240  * @cfg {String} position (top|bottom) text position default bottom
7241  * @cfg {String} icon show icon instead of number
7242  * 
7243  * @constructor
7244  * Create a new NavProgressBarItem
7245  * @param {Object} config The config object
7246  */
7247 Roo.bootstrap.nav.ProgressBarItem = function(config){
7248     Roo.bootstrap.nav.ProgressBarItem.superclass.constructor.call(this, config);
7249     this.addEvents({
7250         // raw events
7251         /**
7252          * @event click
7253          * The raw click event for the entire grid.
7254          * @param {Roo.bootstrap.nav.ProgressBarItem} this
7255          * @param {Roo.EventObject} e
7256          */
7257         "click" : true
7258     });
7259    
7260 };
7261
7262 Roo.extend(Roo.bootstrap.nav.ProgressBarItem, Roo.bootstrap.Component,  {
7263     
7264     rid : '',
7265     active : false,
7266     disabled : false,
7267     html : '',
7268     position : 'bottom',
7269     icon : false,
7270     
7271     getAutoCreate : function()
7272     {
7273         var iconCls = 'roo-navigation-bar-item-icon';
7274         
7275         iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
7276         
7277         var cfg = {
7278             tag: 'li',
7279             cls: 'roo-navigation-bar-item',
7280             cn : [
7281                 {
7282                     tag : 'i',
7283                     cls : iconCls
7284                 }
7285             ]
7286         };
7287         
7288         if(this.active){
7289             cfg.cls += ' active';
7290         }
7291         if(this.disabled){
7292             cfg.cls += ' disabled';
7293         }
7294         
7295         return cfg;
7296     },
7297     
7298     disable : function()
7299     {
7300         this.setDisabled(true);
7301     },
7302     
7303     enable : function()
7304     {
7305         this.setDisabled(false);
7306     },
7307     
7308     initEvents: function() 
7309     {
7310         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
7311         
7312         this.iconEl.on('click', this.onClick, this);
7313     },
7314     
7315     onClick : function(e)
7316     {
7317         e.preventDefault();
7318         
7319         if(this.disabled){
7320             return;
7321         }
7322         
7323         if(this.fireEvent('click', this, e) === false){
7324             return;
7325         };
7326         
7327         this.parent().setActiveItem(this);
7328     },
7329     
7330     isActive: function () 
7331     {
7332         return this.active;
7333     },
7334     
7335     setActive : function(state)
7336     {
7337         if(this.active == state){
7338             return;
7339         }
7340         
7341         this.active = state;
7342         
7343         if (state) {
7344             this.el.addClass('active');
7345             return;
7346         }
7347         
7348         this.el.removeClass('active');
7349         
7350         return;
7351     },
7352     
7353     setDisabled : function(state)
7354     {
7355         if(this.disabled == state){
7356             return;
7357         }
7358         
7359         this.disabled = state;
7360         
7361         if (state) {
7362             this.el.addClass('disabled');
7363             return;
7364         }
7365         
7366         this.el.removeClass('disabled');
7367     },
7368     
7369     tooltipEl : function()
7370     {
7371         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
7372     }
7373 });
7374  
7375
7376  /*
7377  * - LGPL
7378  *
7379  *  Breadcrumb Nav
7380  * 
7381  */
7382 Roo.namespace('Roo.bootstrap.breadcrumb');
7383
7384
7385 /**
7386  * @class Roo.bootstrap.breadcrumb.Nav
7387  * @extends Roo.bootstrap.Component
7388  * Bootstrap Breadcrumb Nav Class
7389  *  
7390  * @children Roo.bootstrap.breadcrumb.Item
7391  * 
7392  * @constructor
7393  * Create a new breadcrumb.Nav
7394  * @param {Object} config The config object
7395  */
7396
7397
7398 Roo.bootstrap.breadcrumb.Nav = function(config){
7399     Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config);
7400     
7401     
7402 };
7403
7404 Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component,  {
7405     
7406     getAutoCreate : function()
7407     {
7408
7409         var cfg = {
7410             tag: 'nav',
7411             cn : [
7412                 {
7413                     tag : 'ol',
7414                     cls : 'breadcrumb'
7415                 }
7416             ]
7417             
7418         };
7419           
7420         return cfg;
7421     },
7422     
7423     initEvents: function()
7424     {
7425         this.olEl = this.el.select('ol',true).first();    
7426     },
7427     getChildContainer : function()
7428     {
7429         return this.olEl;  
7430     }
7431     
7432 });
7433
7434  /*
7435  * - LGPL
7436  *
7437  *  Breadcrumb Item
7438  * 
7439  */
7440
7441
7442 /**
7443  * @class Roo.bootstrap.breadcrumb.Nav
7444  * @extends Roo.bootstrap.Component
7445  * @children Roo.bootstrap.Component
7446  * @parent Roo.bootstrap.breadcrumb.Nav
7447  * Bootstrap Breadcrumb Nav Class
7448  *  
7449  * 
7450  * @cfg {String} html the content of the link.
7451  * @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
7452  * @cfg {Boolean} active is it active
7453
7454  * 
7455  * @constructor
7456  * Create a new breadcrumb.Nav
7457  * @param {Object} config The config object
7458  */
7459
7460 Roo.bootstrap.breadcrumb.Item = function(config){
7461     Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config);
7462     this.addEvents({
7463         // img events
7464         /**
7465          * @event click
7466          * The img click event for the img.
7467          * @param {Roo.EventObject} e
7468          */
7469         "click" : true
7470     });
7471     
7472 };
7473
7474 Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component,  {
7475     
7476     href: false,
7477     html : '',
7478     
7479     getAutoCreate : function()
7480     {
7481
7482         var cfg = {
7483             tag: 'li',
7484             cls : 'breadcrumb-item' + (this.active ? ' active' : '')
7485         };
7486         if (this.href !== false) {
7487             cfg.cn = [{
7488                 tag : 'a',
7489                 href : this.href,
7490                 html : this.html
7491             }];
7492         } else {
7493             cfg.html = this.html;
7494         }
7495         
7496         return cfg;
7497     },
7498     
7499     initEvents: function()
7500     {
7501         if (this.href) {
7502             this.el.select('a', true).first().on('click',this.onClick, this)
7503         }
7504         
7505     },
7506     onClick : function(e)
7507     {
7508         e.preventDefault();
7509         this.fireEvent('click',this,  e);
7510     }
7511     
7512 });
7513
7514  /*
7515  * - LGPL
7516  *
7517  * row
7518  * 
7519  */
7520
7521 /**
7522  * @class Roo.bootstrap.Row
7523  * @extends Roo.bootstrap.Component
7524  * @children Roo.bootstrap.Component
7525  * Bootstrap Row class (contains columns...)
7526  * 
7527  * @constructor
7528  * Create a new Row
7529  * @param {Object} config The config object
7530  */
7531
7532 Roo.bootstrap.Row = function(config){
7533     Roo.bootstrap.Row.superclass.constructor.call(this, config);
7534 };
7535
7536 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
7537     
7538     getAutoCreate : function(){
7539        return {
7540             cls: 'row clearfix'
7541        };
7542     }
7543     
7544     
7545 });
7546
7547  
7548
7549  /*
7550  * - LGPL
7551  *
7552  * pagination
7553  * 
7554  */
7555
7556 /**
7557  * @class Roo.bootstrap.Pagination
7558  * @extends Roo.bootstrap.Component
7559  * @children Roo.bootstrap.Pagination
7560  * Bootstrap Pagination class
7561  * 
7562  * @cfg {String} size (xs|sm|md|lg|xl)
7563  * @cfg {Boolean} inverse 
7564  * 
7565  * @constructor
7566  * Create a new Pagination
7567  * @param {Object} config The config object
7568  */
7569
7570 Roo.bootstrap.Pagination = function(config){
7571     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
7572 };
7573
7574 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
7575     
7576     cls: false,
7577     size: false,
7578     inverse: false,
7579     
7580     getAutoCreate : function(){
7581         var cfg = {
7582             tag: 'ul',
7583                 cls: 'pagination'
7584         };
7585         if (this.inverse) {
7586             cfg.cls += ' inverse';
7587         }
7588         if (this.html) {
7589             cfg.html=this.html;
7590         }
7591         if (this.cls) {
7592             cfg.cls += " " + this.cls;
7593         }
7594         return cfg;
7595     }
7596    
7597 });
7598
7599  
7600
7601  /*
7602  * - LGPL
7603  *
7604  * Pagination item
7605  * 
7606  */
7607
7608
7609 /**
7610  * @class Roo.bootstrap.PaginationItem
7611  * @extends Roo.bootstrap.Component
7612  * Bootstrap PaginationItem class
7613  * @cfg {String} html text
7614  * @cfg {String} href the link
7615  * @cfg {Boolean} preventDefault (true | false) default true
7616  * @cfg {Boolean} active (true | false) default false
7617  * @cfg {Boolean} disabled default false
7618  * 
7619  * 
7620  * @constructor
7621  * Create a new PaginationItem
7622  * @param {Object} config The config object
7623  */
7624
7625
7626 Roo.bootstrap.PaginationItem = function(config){
7627     Roo.bootstrap.PaginationItem.superclass.constructor.call(this, config);
7628     this.addEvents({
7629         // raw events
7630         /**
7631          * @event click
7632          * The raw click event for the entire grid.
7633          * @param {Roo.EventObject} e
7634          */
7635         "click" : true
7636     });
7637 };
7638
7639 Roo.extend(Roo.bootstrap.PaginationItem, Roo.bootstrap.Component,  {
7640     
7641     href : false,
7642     html : false,
7643     preventDefault: true,
7644     active : false,
7645     cls : false,
7646     disabled: false,
7647     
7648     getAutoCreate : function(){
7649         var cfg= {
7650             tag: 'li',
7651             cn: [
7652                 {
7653                     tag : 'a',
7654                     href : this.href ? this.href : '#',
7655                     html : this.html ? this.html : ''
7656                 }
7657             ]
7658         };
7659         
7660         if(this.cls){
7661             cfg.cls = this.cls;
7662         }
7663         
7664         if(this.disabled){
7665             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' disabled' : 'disabled';
7666         }
7667         
7668         if(this.active){
7669             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
7670         }
7671         
7672         return cfg;
7673     },
7674     
7675     initEvents: function() {
7676         
7677         this.el.on('click', this.onClick, this);
7678         
7679     },
7680     onClick : function(e)
7681     {
7682         Roo.log('PaginationItem on click ');
7683         if(this.preventDefault){
7684             e.preventDefault();
7685         }
7686         
7687         if(this.disabled){
7688             return;
7689         }
7690         
7691         this.fireEvent('click', this, e);
7692     }
7693    
7694 });
7695
7696  
7697
7698  /*
7699  * - LGPL
7700  *
7701  * slider
7702  * 
7703  */
7704
7705
7706 /**
7707  * @class Roo.bootstrap.Slider
7708  * @extends Roo.bootstrap.Component
7709  * Bootstrap Slider class
7710  *    
7711  * @constructor
7712  * Create a new Slider
7713  * @param {Object} config The config object
7714  */
7715
7716 Roo.bootstrap.Slider = function(config){
7717     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
7718 };
7719
7720 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
7721     
7722     getAutoCreate : function(){
7723         
7724         var cfg = {
7725             tag: 'div',
7726             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
7727             cn: [
7728                 {
7729                     tag: 'a',
7730                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
7731                 }
7732             ]
7733         };
7734         
7735         return cfg;
7736     }
7737    
7738 });
7739
7740  /*
7741  * Based on:
7742  * Ext JS Library 1.1.1
7743  * Copyright(c) 2006-2007, Ext JS, LLC.
7744  *
7745  * Originally Released Under LGPL - original licence link has changed is not relivant.
7746  *
7747  * Fork - LGPL
7748  * <script type="text/javascript">
7749  */
7750  /**
7751  * @extends Roo.dd.DDProxy
7752  * @class Roo.grid.SplitDragZone
7753  * Support for Column Header resizing
7754  * @constructor
7755  * @param {Object} config
7756  */
7757 // private
7758 // This is a support class used internally by the Grid components
7759 Roo.grid.SplitDragZone = function(grid, hd, hd2){
7760     this.grid = grid;
7761     this.view = grid.getView();
7762     this.proxy = this.view.resizeProxy;
7763     Roo.grid.SplitDragZone.superclass.constructor.call(
7764         this,
7765         hd, // ID
7766         "gridSplitters" + this.grid.getGridEl().id, // SGROUP
7767         {  // CONFIG
7768             dragElId : Roo.id(this.proxy.dom),
7769             resizeFrame:false
7770         }
7771     );
7772     
7773     this.setHandleElId(Roo.id(hd));
7774     if (hd2 !== false) {
7775         this.setOuterHandleElId(Roo.id(hd2));
7776     }
7777     
7778     this.scroll = false;
7779 };
7780 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
7781     fly: Roo.Element.fly,
7782
7783     b4StartDrag : function(x, y){
7784         this.view.headersDisabled = true;
7785         var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
7786                     this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
7787         );
7788         this.proxy.setHeight(h);
7789         
7790         // for old system colWidth really stored the actual width?
7791         // in bootstrap we tried using xs/ms/etc.. to do % sizing?
7792         // which in reality did not work.. - it worked only for fixed sizes
7793         // for resizable we need to use actual sizes.
7794         var w = this.cm.getColumnWidth(this.cellIndex);
7795         if (!this.view.mainWrap) {
7796             // bootstrap.
7797             w = this.view.getHeaderIndex(this.cellIndex).getWidth();
7798         }
7799         
7800         
7801         
7802         // this was w-this.grid.minColumnWidth;
7803         // doesnt really make sense? - w = thie curren width or the rendered one?
7804         var minw = Math.max(w-this.grid.minColumnWidth, 0);
7805         this.resetConstraints();
7806         this.setXConstraint(minw, 1000);
7807         this.setYConstraint(0, 0);
7808         this.minX = x - minw;
7809         this.maxX = x + 1000;
7810         this.startPos = x;
7811         if (!this.view.mainWrap) { // this is Bootstrap code..
7812             this.getDragEl().style.display='block';
7813         }
7814         
7815         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
7816     },
7817
7818
7819     handleMouseDown : function(e){
7820         ev = Roo.EventObject.setEvent(e);
7821         var t = this.fly(ev.getTarget());
7822         if(t.hasClass("x-grid-split")){
7823             this.cellIndex = this.view.getCellIndex(t.dom);
7824             this.split = t.dom;
7825             this.cm = this.grid.colModel;
7826             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
7827                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
7828             }
7829         }
7830     },
7831
7832     endDrag : function(e){
7833         this.view.headersDisabled = false;
7834         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
7835         var diff = endX - this.startPos;
7836         // 
7837         var w = this.cm.getColumnWidth(this.cellIndex);
7838         if (!this.view.mainWrap) {
7839             w = 0;
7840         }
7841         this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
7842     },
7843
7844     autoOffset : function(){
7845         this.setDelta(0,0);
7846     }
7847 });/*
7848  * Based on:
7849  * Ext JS Library 1.1.1
7850  * Copyright(c) 2006-2007, Ext JS, LLC.
7851  *
7852  * Originally Released Under LGPL - original licence link has changed is not relivant.
7853  *
7854  * Fork - LGPL
7855  * <script type="text/javascript">
7856  */
7857
7858 /**
7859  * @class Roo.grid.AbstractSelectionModel
7860  * @extends Roo.util.Observable
7861  * @abstract
7862  * Abstract base class for grid SelectionModels.  It provides the interface that should be
7863  * implemented by descendant classes.  This class should not be directly instantiated.
7864  * @constructor
7865  */
7866 Roo.grid.AbstractSelectionModel = function(){
7867     this.locked = false;
7868     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
7869 };
7870
7871 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
7872     /** @ignore Called by the grid automatically. Do not call directly. */
7873     init : function(grid){
7874         this.grid = grid;
7875         this.initEvents();
7876     },
7877
7878     /**
7879      * Locks the selections.
7880      */
7881     lock : function(){
7882         this.locked = true;
7883     },
7884
7885     /**
7886      * Unlocks the selections.
7887      */
7888     unlock : function(){
7889         this.locked = false;
7890     },
7891
7892     /**
7893      * Returns true if the selections are locked.
7894      * @return {Boolean}
7895      */
7896     isLocked : function(){
7897         return this.locked;
7898     }
7899 });/*
7900  * Based on:
7901  * Ext JS Library 1.1.1
7902  * Copyright(c) 2006-2007, Ext JS, LLC.
7903  *
7904  * Originally Released Under LGPL - original licence link has changed is not relivant.
7905  *
7906  * Fork - LGPL
7907  * <script type="text/javascript">
7908  */
7909 /**
7910  * @extends Roo.grid.AbstractSelectionModel
7911  * @class Roo.grid.RowSelectionModel
7912  * The default SelectionModel used by {@link Roo.grid.Grid}.
7913  * It supports multiple selections and keyboard selection/navigation. 
7914  * @constructor
7915  * @param {Object} config
7916  */
7917 Roo.grid.RowSelectionModel = function(config){
7918     Roo.apply(this, config);
7919     this.selections = new Roo.util.MixedCollection(false, function(o){
7920         return o.id;
7921     });
7922
7923     this.last = false;
7924     this.lastActive = false;
7925
7926     this.addEvents({
7927         /**
7928         * @event selectionchange
7929         * Fires when the selection changes
7930         * @param {SelectionModel} this
7931         */
7932        "selectionchange" : true,
7933        /**
7934         * @event afterselectionchange
7935         * Fires after the selection changes (eg. by key press or clicking)
7936         * @param {SelectionModel} this
7937         */
7938        "afterselectionchange" : true,
7939        /**
7940         * @event beforerowselect
7941         * Fires when a row is selected being selected, return false to cancel.
7942         * @param {SelectionModel} this
7943         * @param {Number} rowIndex The selected index
7944         * @param {Boolean} keepExisting False if other selections will be cleared
7945         */
7946        "beforerowselect" : true,
7947        /**
7948         * @event rowselect
7949         * Fires when a row is selected.
7950         * @param {SelectionModel} this
7951         * @param {Number} rowIndex The selected index
7952         * @param {Roo.data.Record} r The record
7953         */
7954        "rowselect" : true,
7955        /**
7956         * @event rowdeselect
7957         * Fires when a row is deselected.
7958         * @param {SelectionModel} this
7959         * @param {Number} rowIndex The selected index
7960         */
7961         "rowdeselect" : true
7962     });
7963     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
7964     this.locked = false;
7965 };
7966
7967 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
7968     /**
7969      * @cfg {Boolean} singleSelect
7970      * True to allow selection of only one row at a time (defaults to false)
7971      */
7972     singleSelect : false,
7973
7974     // private
7975     initEvents : function(){
7976
7977         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
7978             this.grid.on("mousedown", this.handleMouseDown, this);
7979         }else{ // allow click to work like normal
7980             this.grid.on("rowclick", this.handleDragableRowClick, this);
7981         }
7982         // bootstrap does not have a view..
7983         var view = this.grid.view ? this.grid.view : this.grid;
7984         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
7985             "up" : function(e){
7986                 if(!e.shiftKey){
7987                     this.selectPrevious(e.shiftKey);
7988                 }else if(this.last !== false && this.lastActive !== false){
7989                     var last = this.last;
7990                     this.selectRange(this.last,  this.lastActive-1);
7991                     view.focusRow(this.lastActive);
7992                     if(last !== false){
7993                         this.last = last;
7994                     }
7995                 }else{
7996                     this.selectFirstRow();
7997                 }
7998                 this.fireEvent("afterselectionchange", this);
7999             },
8000             "down" : function(e){
8001                 if(!e.shiftKey){
8002                     this.selectNext(e.shiftKey);
8003                 }else if(this.last !== false && this.lastActive !== false){
8004                     var last = this.last;
8005                     this.selectRange(this.last,  this.lastActive+1);
8006                     view.focusRow(this.lastActive);
8007                     if(last !== false){
8008                         this.last = last;
8009                     }
8010                 }else{
8011                     this.selectFirstRow();
8012                 }
8013                 this.fireEvent("afterselectionchange", this);
8014             },
8015             scope: this
8016         });
8017
8018          
8019         view.on("refresh", this.onRefresh, this);
8020         view.on("rowupdated", this.onRowUpdated, this);
8021         view.on("rowremoved", this.onRemove, this);
8022     },
8023
8024     // private
8025     onRefresh : function(){
8026         var ds = this.grid.ds, i, v = this.grid.view;
8027         var s = this.selections;
8028         s.each(function(r){
8029             if((i = ds.indexOfId(r.id)) != -1){
8030                 v.onRowSelect(i);
8031                 s.add(ds.getAt(i)); // updating the selection relate data
8032             }else{
8033                 s.remove(r);
8034             }
8035         });
8036     },
8037
8038     // private
8039     onRemove : function(v, index, r){
8040         this.selections.remove(r);
8041     },
8042
8043     // private
8044     onRowUpdated : function(v, index, r){
8045         if(this.isSelected(r)){
8046             v.onRowSelect(index);
8047         }
8048     },
8049
8050     /**
8051      * Select records.
8052      * @param {Array} records The records to select
8053      * @param {Boolean} keepExisting (optional) True to keep existing selections
8054      */
8055     selectRecords : function(records, keepExisting){
8056         if(!keepExisting){
8057             this.clearSelections();
8058         }
8059         var ds = this.grid.ds;
8060         for(var i = 0, len = records.length; i < len; i++){
8061             this.selectRow(ds.indexOf(records[i]), true);
8062         }
8063     },
8064
8065     /**
8066      * Gets the number of selected rows.
8067      * @return {Number}
8068      */
8069     getCount : function(){
8070         return this.selections.length;
8071     },
8072
8073     /**
8074      * Selects the first row in the grid.
8075      */
8076     selectFirstRow : function(){
8077         this.selectRow(0);
8078     },
8079
8080     /**
8081      * Select the last row.
8082      * @param {Boolean} keepExisting (optional) True to keep existing selections
8083      */
8084     selectLastRow : function(keepExisting){
8085         this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
8086     },
8087
8088     /**
8089      * Selects the row immediately following the last selected row.
8090      * @param {Boolean} keepExisting (optional) True to keep existing selections
8091      */
8092     selectNext : function(keepExisting){
8093         if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
8094             this.selectRow(this.last+1, keepExisting);
8095             var view = this.grid.view ? this.grid.view : this.grid;
8096             view.focusRow(this.last);
8097         }
8098     },
8099
8100     /**
8101      * Selects the row that precedes the last selected row.
8102      * @param {Boolean} keepExisting (optional) True to keep existing selections
8103      */
8104     selectPrevious : function(keepExisting){
8105         if(this.last){
8106             this.selectRow(this.last-1, keepExisting);
8107             var view = this.grid.view ? this.grid.view : this.grid;
8108             view.focusRow(this.last);
8109         }
8110     },
8111
8112     /**
8113      * Returns the selected records
8114      * @return {Array} Array of selected records
8115      */
8116     getSelections : function(){
8117         return [].concat(this.selections.items);
8118     },
8119
8120     /**
8121      * Returns the first selected record.
8122      * @return {Record}
8123      */
8124     getSelected : function(){
8125         return this.selections.itemAt(0);
8126     },
8127
8128
8129     /**
8130      * Clears all selections.
8131      */
8132     clearSelections : function(fast){
8133         if(this.locked) {
8134             return;
8135         }
8136         if(fast !== true){
8137             var ds = this.grid.ds;
8138             var s = this.selections;
8139             s.each(function(r){
8140                 this.deselectRow(ds.indexOfId(r.id));
8141             }, this);
8142             s.clear();
8143         }else{
8144             this.selections.clear();
8145         }
8146         this.last = false;
8147     },
8148
8149
8150     /**
8151      * Selects all rows.
8152      */
8153     selectAll : function(){
8154         if(this.locked) {
8155             return;
8156         }
8157         this.selections.clear();
8158         for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
8159             this.selectRow(i, true);
8160         }
8161     },
8162
8163     /**
8164      * Returns True if there is a selection.
8165      * @return {Boolean}
8166      */
8167     hasSelection : function(){
8168         return this.selections.length > 0;
8169     },
8170
8171     /**
8172      * Returns True if the specified row is selected.
8173      * @param {Number/Record} record The record or index of the record to check
8174      * @return {Boolean}
8175      */
8176     isSelected : function(index){
8177         var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
8178         return (r && this.selections.key(r.id) ? true : false);
8179     },
8180
8181     /**
8182      * Returns True if the specified record id is selected.
8183      * @param {String} id The id of record to check
8184      * @return {Boolean}
8185      */
8186     isIdSelected : function(id){
8187         return (this.selections.key(id) ? true : false);
8188     },
8189
8190     // private
8191     handleMouseDown : function(e, t)
8192     {
8193         var view = this.grid.view ? this.grid.view : this.grid;
8194         var rowIndex;
8195         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
8196             return;
8197         };
8198         if(e.shiftKey && this.last !== false){
8199             var last = this.last;
8200             this.selectRange(last, rowIndex, e.ctrlKey);
8201             this.last = last; // reset the last
8202             view.focusRow(rowIndex);
8203         }else{
8204             var isSelected = this.isSelected(rowIndex);
8205             if(e.button !== 0 && isSelected){
8206                 view.focusRow(rowIndex);
8207             }else if(e.ctrlKey && isSelected){
8208                 this.deselectRow(rowIndex);
8209             }else if(!isSelected){
8210                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
8211                 view.focusRow(rowIndex);
8212             }
8213         }
8214         this.fireEvent("afterselectionchange", this);
8215     },
8216     // private
8217     handleDragableRowClick :  function(grid, rowIndex, e) 
8218     {
8219         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
8220             this.selectRow(rowIndex, false);
8221             var view = this.grid.view ? this.grid.view : this.grid;
8222             view.focusRow(rowIndex);
8223              this.fireEvent("afterselectionchange", this);
8224         }
8225     },
8226     
8227     /**
8228      * Selects multiple rows.
8229      * @param {Array} rows Array of the indexes of the row to select
8230      * @param {Boolean} keepExisting (optional) True to keep existing selections
8231      */
8232     selectRows : function(rows, keepExisting){
8233         if(!keepExisting){
8234             this.clearSelections();
8235         }
8236         for(var i = 0, len = rows.length; i < len; i++){
8237             this.selectRow(rows[i], true);
8238         }
8239     },
8240
8241     /**
8242      * Selects a range of rows. All rows in between startRow and endRow are also selected.
8243      * @param {Number} startRow The index of the first row in the range
8244      * @param {Number} endRow The index of the last row in the range
8245      * @param {Boolean} keepExisting (optional) True to retain existing selections
8246      */
8247     selectRange : function(startRow, endRow, keepExisting){
8248         if(this.locked) {
8249             return;
8250         }
8251         if(!keepExisting){
8252             this.clearSelections();
8253         }
8254         if(startRow <= endRow){
8255             for(var i = startRow; i <= endRow; i++){
8256                 this.selectRow(i, true);
8257             }
8258         }else{
8259             for(var i = startRow; i >= endRow; i--){
8260                 this.selectRow(i, true);
8261             }
8262         }
8263     },
8264
8265     /**
8266      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
8267      * @param {Number} startRow The index of the first row in the range
8268      * @param {Number} endRow The index of the last row in the range
8269      */
8270     deselectRange : function(startRow, endRow, preventViewNotify){
8271         if(this.locked) {
8272             return;
8273         }
8274         for(var i = startRow; i <= endRow; i++){
8275             this.deselectRow(i, preventViewNotify);
8276         }
8277     },
8278
8279     /**
8280      * Selects a row.
8281      * @param {Number} row The index of the row to select
8282      * @param {Boolean} keepExisting (optional) True to keep existing selections
8283      */
8284     selectRow : function(index, keepExisting, preventViewNotify){
8285         if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
8286             return;
8287         }
8288         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
8289             if(!keepExisting || this.singleSelect){
8290                 this.clearSelections();
8291             }
8292             var r = this.grid.ds.getAt(index);
8293             this.selections.add(r);
8294             this.last = this.lastActive = index;
8295             if(!preventViewNotify){
8296                 var view = this.grid.view ? this.grid.view : this.grid;
8297                 view.onRowSelect(index);
8298             }
8299             this.fireEvent("rowselect", this, index, r);
8300             this.fireEvent("selectionchange", this);
8301         }
8302     },
8303
8304     /**
8305      * Deselects a row.
8306      * @param {Number} row The index of the row to deselect
8307      */
8308     deselectRow : function(index, preventViewNotify){
8309         if(this.locked) {
8310             return;
8311         }
8312         if(this.last == index){
8313             this.last = false;
8314         }
8315         if(this.lastActive == index){
8316             this.lastActive = false;
8317         }
8318         var r = this.grid.ds.getAt(index);
8319         this.selections.remove(r);
8320         if(!preventViewNotify){
8321             var view = this.grid.view ? this.grid.view : this.grid;
8322             view.onRowDeselect(index);
8323         }
8324         this.fireEvent("rowdeselect", this, index);
8325         this.fireEvent("selectionchange", this);
8326     },
8327
8328     // private
8329     restoreLast : function(){
8330         if(this._last){
8331             this.last = this._last;
8332         }
8333     },
8334
8335     // private
8336     acceptsNav : function(row, col, cm){
8337         return !cm.isHidden(col) && cm.isCellEditable(col, row);
8338     },
8339
8340     // private
8341     onEditorKey : function(field, e){
8342         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
8343         if(k == e.TAB){
8344             e.stopEvent();
8345             ed.completeEdit();
8346             if(e.shiftKey){
8347                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
8348             }else{
8349                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
8350             }
8351         }else if(k == e.ENTER && !e.ctrlKey){
8352             e.stopEvent();
8353             ed.completeEdit();
8354             if(e.shiftKey){
8355                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
8356             }else{
8357                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
8358             }
8359         }else if(k == e.ESC){
8360             ed.cancelEdit();
8361         }
8362         if(newCell){
8363             g.startEditing(newCell[0], newCell[1]);
8364         }
8365     }
8366 });/*
8367  * Based on:
8368  * Ext JS Library 1.1.1
8369  * Copyright(c) 2006-2007, Ext JS, LLC.
8370  *
8371  * Originally Released Under LGPL - original licence link has changed is not relivant.
8372  *
8373  * Fork - LGPL
8374  * <script type="text/javascript">
8375  */
8376  
8377
8378 /**
8379  * @class Roo.grid.ColumnModel
8380  * @extends Roo.util.Observable
8381  * This is the default implementation of a ColumnModel used by the Grid. It defines
8382  * the columns in the grid.
8383  * <br>Usage:<br>
8384  <pre><code>
8385  var colModel = new Roo.grid.ColumnModel([
8386         {header: "Ticker", width: 60, sortable: true, locked: true},
8387         {header: "Company Name", width: 150, sortable: true},
8388         {header: "Market Cap.", width: 100, sortable: true},
8389         {header: "$ Sales", width: 100, sortable: true, renderer: money},
8390         {header: "Employees", width: 100, sortable: true, resizable: false}
8391  ]);
8392  </code></pre>
8393  * <p>
8394  
8395  * The config options listed for this class are options which may appear in each
8396  * individual column definition.
8397  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
8398  * @constructor
8399  * @param {Object} config An Array of column config objects. See this class's
8400  * config objects for details.
8401 */
8402 Roo.grid.ColumnModel = function(config){
8403         /**
8404      * The config passed into the constructor
8405      */
8406     this.config = []; //config;
8407     this.lookup = {};
8408
8409     // if no id, create one
8410     // if the column does not have a dataIndex mapping,
8411     // map it to the order it is in the config
8412     for(var i = 0, len = config.length; i < len; i++){
8413         this.addColumn(config[i]);
8414         
8415     }
8416
8417     /**
8418      * The width of columns which have no width specified (defaults to 100)
8419      * @type Number
8420      */
8421     this.defaultWidth = 100;
8422
8423     /**
8424      * Default sortable of columns which have no sortable specified (defaults to false)
8425      * @type Boolean
8426      */
8427     this.defaultSortable = false;
8428
8429     this.addEvents({
8430         /**
8431              * @event widthchange
8432              * Fires when the width of a column changes.
8433              * @param {ColumnModel} this
8434              * @param {Number} columnIndex The column index
8435              * @param {Number} newWidth The new width
8436              */
8437             "widthchange": true,
8438         /**
8439              * @event headerchange
8440              * Fires when the text of a header changes.
8441              * @param {ColumnModel} this
8442              * @param {Number} columnIndex The column index
8443              * @param {Number} newText The new header text
8444              */
8445             "headerchange": true,
8446         /**
8447              * @event hiddenchange
8448              * Fires when a column is hidden or "unhidden".
8449              * @param {ColumnModel} this
8450              * @param {Number} columnIndex The column index
8451              * @param {Boolean} hidden true if hidden, false otherwise
8452              */
8453             "hiddenchange": true,
8454             /**
8455          * @event columnmoved
8456          * Fires when a column is moved.
8457          * @param {ColumnModel} this
8458          * @param {Number} oldIndex
8459          * @param {Number} newIndex
8460          */
8461         "columnmoved" : true,
8462         /**
8463          * @event columlockchange
8464          * Fires when a column's locked state is changed
8465          * @param {ColumnModel} this
8466          * @param {Number} colIndex
8467          * @param {Boolean} locked true if locked
8468          */
8469         "columnlockchange" : true
8470     });
8471     Roo.grid.ColumnModel.superclass.constructor.call(this);
8472 };
8473 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
8474     /**
8475      * @cfg {String} header [required] The header text to display in the Grid view.
8476      */
8477         /**
8478      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
8479      */
8480         /**
8481      * @cfg {String} smHeader Header at Bootsrap Small width
8482      */
8483         /**
8484      * @cfg {String} mdHeader Header at Bootsrap Medium width
8485      */
8486         /**
8487      * @cfg {String} lgHeader Header at Bootsrap Large width
8488      */
8489         /**
8490      * @cfg {String} xlHeader Header at Bootsrap extra Large width
8491      */
8492     /**
8493      * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
8494      * {@link Roo.data.Record} definition from which to draw the column's value. If not
8495      * specified, the column's index is used as an index into the Record's data Array.
8496      */
8497     /**
8498      * @cfg {Number} width  The initial width in pixels of the column. Using this
8499      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
8500      */
8501     /**
8502      * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
8503      * Defaults to the value of the {@link #defaultSortable} property.
8504      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
8505      */
8506     /**
8507      * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
8508      */
8509     /**
8510      * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
8511      */
8512     /**
8513      * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
8514      */
8515     /**
8516      * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
8517      */
8518     /**
8519      * @cfg {Function} renderer A function used to generate HTML markup for a cell
8520      * given the cell's data value. See {@link #setRenderer}. If not specified, the
8521      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
8522      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
8523      */
8524        /**
8525      * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
8526      */
8527     /**
8528      * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
8529      */
8530     /**
8531      * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
8532      */
8533     /**
8534      * @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)
8535      */
8536     /**
8537      * @cfg {String} tooltip mouse over tooltip text
8538      */
8539     /**
8540      * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
8541      */
8542     /**
8543      * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
8544      */
8545     /**
8546      * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
8547      */
8548     /**
8549      * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
8550      */
8551         /**
8552      * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
8553      */
8554     /**
8555      * Returns the id of the column at the specified index.
8556      * @param {Number} index The column index
8557      * @return {String} the id
8558      */
8559     getColumnId : function(index){
8560         return this.config[index].id;
8561     },
8562
8563     /**
8564      * Returns the column for a specified id.
8565      * @param {String} id The column id
8566      * @return {Object} the column
8567      */
8568     getColumnById : function(id){
8569         return this.lookup[id];
8570     },
8571
8572     
8573     /**
8574      * Returns the column Object for a specified dataIndex.
8575      * @param {String} dataIndex The column dataIndex
8576      * @return {Object|Boolean} the column or false if not found
8577      */
8578     getColumnByDataIndex: function(dataIndex){
8579         var index = this.findColumnIndex(dataIndex);
8580         return index > -1 ? this.config[index] : false;
8581     },
8582     
8583     /**
8584      * Returns the index for a specified column id.
8585      * @param {String} id The column id
8586      * @return {Number} the index, or -1 if not found
8587      */
8588     getIndexById : function(id){
8589         for(var i = 0, len = this.config.length; i < len; i++){
8590             if(this.config[i].id == id){
8591                 return i;
8592             }
8593         }
8594         return -1;
8595     },
8596     
8597     /**
8598      * Returns the index for a specified column dataIndex.
8599      * @param {String} dataIndex The column dataIndex
8600      * @return {Number} the index, or -1 if not found
8601      */
8602     
8603     findColumnIndex : function(dataIndex){
8604         for(var i = 0, len = this.config.length; i < len; i++){
8605             if(this.config[i].dataIndex == dataIndex){
8606                 return i;
8607             }
8608         }
8609         return -1;
8610     },
8611     
8612     
8613     moveColumn : function(oldIndex, newIndex){
8614         var c = this.config[oldIndex];
8615         this.config.splice(oldIndex, 1);
8616         this.config.splice(newIndex, 0, c);
8617         this.dataMap = null;
8618         this.fireEvent("columnmoved", this, oldIndex, newIndex);
8619     },
8620
8621     isLocked : function(colIndex){
8622         return this.config[colIndex].locked === true;
8623     },
8624
8625     setLocked : function(colIndex, value, suppressEvent){
8626         if(this.isLocked(colIndex) == value){
8627             return;
8628         }
8629         this.config[colIndex].locked = value;
8630         if(!suppressEvent){
8631             this.fireEvent("columnlockchange", this, colIndex, value);
8632         }
8633     },
8634
8635     getTotalLockedWidth : function(){
8636         var totalWidth = 0;
8637         for(var i = 0; i < this.config.length; i++){
8638             if(this.isLocked(i) && !this.isHidden(i)){
8639                 this.totalWidth += this.getColumnWidth(i);
8640             }
8641         }
8642         return totalWidth;
8643     },
8644
8645     getLockedCount : function(){
8646         for(var i = 0, len = this.config.length; i < len; i++){
8647             if(!this.isLocked(i)){
8648                 return i;
8649             }
8650         }
8651         
8652         return this.config.length;
8653     },
8654
8655     /**
8656      * Returns the number of columns.
8657      * @return {Number}
8658      */
8659     getColumnCount : function(visibleOnly){
8660         if(visibleOnly === true){
8661             var c = 0;
8662             for(var i = 0, len = this.config.length; i < len; i++){
8663                 if(!this.isHidden(i)){
8664                     c++;
8665                 }
8666             }
8667             return c;
8668         }
8669         return this.config.length;
8670     },
8671
8672     /**
8673      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
8674      * @param {Function} fn
8675      * @param {Object} scope (optional)
8676      * @return {Array} result
8677      */
8678     getColumnsBy : function(fn, scope){
8679         var r = [];
8680         for(var i = 0, len = this.config.length; i < len; i++){
8681             var c = this.config[i];
8682             if(fn.call(scope||this, c, i) === true){
8683                 r[r.length] = c;
8684             }
8685         }
8686         return r;
8687     },
8688
8689     /**
8690      * Returns true if the specified column is sortable.
8691      * @param {Number} col The column index
8692      * @return {Boolean}
8693      */
8694     isSortable : function(col){
8695         if(typeof this.config[col].sortable == "undefined"){
8696             return this.defaultSortable;
8697         }
8698         return this.config[col].sortable;
8699     },
8700
8701     /**
8702      * Returns the rendering (formatting) function defined for the column.
8703      * @param {Number} col The column index.
8704      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
8705      */
8706     getRenderer : function(col){
8707         if(!this.config[col].renderer){
8708             return Roo.grid.ColumnModel.defaultRenderer;
8709         }
8710         return this.config[col].renderer;
8711     },
8712
8713     /**
8714      * Sets the rendering (formatting) function for a column.
8715      * @param {Number} col The column index
8716      * @param {Function} fn The function to use to process the cell's raw data
8717      * to return HTML markup for the grid view. The render function is called with
8718      * the following parameters:<ul>
8719      * <li>Data value.</li>
8720      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
8721      * <li>css A CSS style string to apply to the table cell.</li>
8722      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
8723      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
8724      * <li>Row index</li>
8725      * <li>Column index</li>
8726      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
8727      */
8728     setRenderer : function(col, fn){
8729         this.config[col].renderer = fn;
8730     },
8731
8732     /**
8733      * Returns the width for the specified column.
8734      * @param {Number} col The column index
8735      * @param (optional) {String} gridSize bootstrap width size.
8736      * @return {Number}
8737      */
8738     getColumnWidth : function(col, gridSize)
8739         {
8740                 var cfg = this.config[col];
8741                 
8742                 if (typeof(gridSize) == 'undefined') {
8743                         return cfg.width * 1 || this.defaultWidth;
8744                 }
8745                 if (gridSize === false) { // if we set it..
8746                         return cfg.width || false;
8747                 }
8748                 var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
8749                 
8750                 for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
8751                         if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
8752                                 continue;
8753                         }
8754                         return cfg[ sizes[i] ];
8755                 }
8756                 return 1;
8757                 
8758     },
8759
8760     /**
8761      * Sets the width for a column.
8762      * @param {Number} col The column index
8763      * @param {Number} width The new width
8764      */
8765     setColumnWidth : function(col, width, suppressEvent){
8766         this.config[col].width = width;
8767         this.totalWidth = null;
8768         if(!suppressEvent){
8769              this.fireEvent("widthchange", this, col, width);
8770         }
8771     },
8772
8773     /**
8774      * Returns the total width of all columns.
8775      * @param {Boolean} includeHidden True to include hidden column widths
8776      * @return {Number}
8777      */
8778     getTotalWidth : function(includeHidden){
8779         if(!this.totalWidth){
8780             this.totalWidth = 0;
8781             for(var i = 0, len = this.config.length; i < len; i++){
8782                 if(includeHidden || !this.isHidden(i)){
8783                     this.totalWidth += this.getColumnWidth(i);
8784                 }
8785             }
8786         }
8787         return this.totalWidth;
8788     },
8789
8790     /**
8791      * Returns the header for the specified column.
8792      * @param {Number} col The column index
8793      * @return {String}
8794      */
8795     getColumnHeader : function(col){
8796         return this.config[col].header;
8797     },
8798
8799     /**
8800      * Sets the header for a column.
8801      * @param {Number} col The column index
8802      * @param {String} header The new header
8803      */
8804     setColumnHeader : function(col, header){
8805         this.config[col].header = header;
8806         this.fireEvent("headerchange", this, col, header);
8807     },
8808
8809     /**
8810      * Returns the tooltip for the specified column.
8811      * @param {Number} col The column index
8812      * @return {String}
8813      */
8814     getColumnTooltip : function(col){
8815             return this.config[col].tooltip;
8816     },
8817     /**
8818      * Sets the tooltip for a column.
8819      * @param {Number} col The column index
8820      * @param {String} tooltip The new tooltip
8821      */
8822     setColumnTooltip : function(col, tooltip){
8823             this.config[col].tooltip = tooltip;
8824     },
8825
8826     /**
8827      * Returns the dataIndex for the specified column.
8828      * @param {Number} col The column index
8829      * @return {Number}
8830      */
8831     getDataIndex : function(col){
8832         return this.config[col].dataIndex;
8833     },
8834
8835     /**
8836      * Sets the dataIndex for a column.
8837      * @param {Number} col The column index
8838      * @param {Number} dataIndex The new dataIndex
8839      */
8840     setDataIndex : function(col, dataIndex){
8841         this.config[col].dataIndex = dataIndex;
8842     },
8843
8844     
8845     
8846     /**
8847      * Returns true if the cell is editable.
8848      * @param {Number} colIndex The column index
8849      * @param {Number} rowIndex The row index - this is nto actually used..?
8850      * @return {Boolean}
8851      */
8852     isCellEditable : function(colIndex, rowIndex){
8853         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
8854     },
8855
8856     /**
8857      * Returns the editor defined for the cell/column.
8858      * return false or null to disable editing.
8859      * @param {Number} colIndex The column index
8860      * @param {Number} rowIndex The row index
8861      * @return {Object}
8862      */
8863     getCellEditor : function(colIndex, rowIndex){
8864         return this.config[colIndex].editor;
8865     },
8866
8867     /**
8868      * Sets if a column is editable.
8869      * @param {Number} col The column index
8870      * @param {Boolean} editable True if the column is editable
8871      */
8872     setEditable : function(col, editable){
8873         this.config[col].editable = editable;
8874     },
8875
8876
8877     /**
8878      * Returns true if the column is hidden.
8879      * @param {Number} colIndex The column index
8880      * @return {Boolean}
8881      */
8882     isHidden : function(colIndex){
8883         return this.config[colIndex].hidden;
8884     },
8885
8886
8887     /**
8888      * Returns true if the column width cannot be changed
8889      */
8890     isFixed : function(colIndex){
8891         return this.config[colIndex].fixed;
8892     },
8893
8894     /**
8895      * Returns true if the column can be resized
8896      * @return {Boolean}
8897      */
8898     isResizable : function(colIndex){
8899         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
8900     },
8901     /**
8902      * Sets if a column is hidden.
8903      * @param {Number} colIndex The column index
8904      * @param {Boolean} hidden True if the column is hidden
8905      */
8906     setHidden : function(colIndex, hidden){
8907         this.config[colIndex].hidden = hidden;
8908         this.totalWidth = null;
8909         this.fireEvent("hiddenchange", this, colIndex, hidden);
8910     },
8911
8912     /**
8913      * Sets the editor for a column.
8914      * @param {Number} col The column index
8915      * @param {Object} editor The editor object
8916      */
8917     setEditor : function(col, editor){
8918         this.config[col].editor = editor;
8919     },
8920     /**
8921      * Add a column (experimental...) - defaults to adding to the end..
8922      * @param {Object} config 
8923     */
8924     addColumn : function(c)
8925     {
8926     
8927         var i = this.config.length;
8928         this.config[i] = c;
8929         
8930         if(typeof c.dataIndex == "undefined"){
8931             c.dataIndex = i;
8932         }
8933         if(typeof c.renderer == "string"){
8934             c.renderer = Roo.util.Format[c.renderer];
8935         }
8936         if(typeof c.id == "undefined"){
8937             c.id = Roo.id();
8938         }
8939         if(c.editor && c.editor.xtype){
8940             c.editor  = Roo.factory(c.editor, Roo.grid);
8941         }
8942         if(c.editor && c.editor.isFormField){
8943             c.editor = new Roo.grid.GridEditor(c.editor);
8944         }
8945         this.lookup[c.id] = c;
8946     }
8947     
8948 });
8949
8950 Roo.grid.ColumnModel.defaultRenderer = function(value)
8951 {
8952     if(typeof value == "object") {
8953         return value;
8954     }
8955         if(typeof value == "string" && value.length < 1){
8956             return "&#160;";
8957         }
8958     
8959         return String.format("{0}", value);
8960 };
8961
8962 // Alias for backwards compatibility
8963 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
8964 /*
8965  * Based on:
8966  * Ext JS Library 1.1.1
8967  * Copyright(c) 2006-2007, Ext JS, LLC.
8968  *
8969  * Originally Released Under LGPL - original licence link has changed is not relivant.
8970  *
8971  * Fork - LGPL
8972  * <script type="text/javascript">
8973  */
8974  
8975 /**
8976  * @class Roo.LoadMask
8977  * A simple utility class for generically masking elements while loading data.  If the element being masked has
8978  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
8979  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
8980  * element's UpdateManager load indicator and will be destroyed after the initial load.
8981  * @constructor
8982  * Create a new LoadMask
8983  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
8984  * @param {Object} config The config object
8985  */
8986 Roo.LoadMask = function(el, config){
8987     this.el = Roo.get(el);
8988     Roo.apply(this, config);
8989     if(this.store){
8990         this.store.on('beforeload', this.onBeforeLoad, this);
8991         this.store.on('load', this.onLoad, this);
8992         this.store.on('loadexception', this.onLoadException, this);
8993         this.removeMask = false;
8994     }else{
8995         var um = this.el.getUpdateManager();
8996         um.showLoadIndicator = false; // disable the default indicator
8997         um.on('beforeupdate', this.onBeforeLoad, this);
8998         um.on('update', this.onLoad, this);
8999         um.on('failure', this.onLoad, this);
9000         this.removeMask = true;
9001     }
9002 };
9003
9004 Roo.LoadMask.prototype = {
9005     /**
9006      * @cfg {Boolean} removeMask
9007      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
9008      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
9009      */
9010     removeMask : false,
9011     /**
9012      * @cfg {String} msg
9013      * The text to display in a centered loading message box (defaults to 'Loading...')
9014      */
9015     msg : 'Loading...',
9016     /**
9017      * @cfg {String} msgCls
9018      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
9019      */
9020     msgCls : 'x-mask-loading',
9021
9022     /**
9023      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
9024      * @type Boolean
9025      */
9026     disabled: false,
9027
9028     /**
9029      * Disables the mask to prevent it from being displayed
9030      */
9031     disable : function(){
9032        this.disabled = true;
9033     },
9034
9035     /**
9036      * Enables the mask so that it can be displayed
9037      */
9038     enable : function(){
9039         this.disabled = false;
9040     },
9041     
9042     onLoadException : function()
9043     {
9044         Roo.log(arguments);
9045         
9046         if (typeof(arguments[3]) != 'undefined') {
9047             Roo.MessageBox.alert("Error loading",arguments[3]);
9048         } 
9049         /*
9050         try {
9051             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
9052                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
9053             }   
9054         } catch(e) {
9055             
9056         }
9057         */
9058     
9059         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9060     },
9061     // private
9062     onLoad : function()
9063     {
9064         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9065     },
9066
9067     // private
9068     onBeforeLoad : function(){
9069         if(!this.disabled){
9070             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
9071         }
9072     },
9073
9074     // private
9075     destroy : function(){
9076         if(this.store){
9077             this.store.un('beforeload', this.onBeforeLoad, this);
9078             this.store.un('load', this.onLoad, this);
9079             this.store.un('loadexception', this.onLoadException, this);
9080         }else{
9081             var um = this.el.getUpdateManager();
9082             um.un('beforeupdate', this.onBeforeLoad, this);
9083             um.un('update', this.onLoad, this);
9084             um.un('failure', this.onLoad, this);
9085         }
9086     }
9087 };/**
9088  * @class Roo.bootstrap.Table
9089  * @licence LGBL
9090  * @extends Roo.bootstrap.Component
9091  * @children Roo.bootstrap.TableBody
9092  * Bootstrap Table class.  This class represents the primary interface of a component based grid control.
9093  * Similar to Roo.grid.Grid
9094  * <pre><code>
9095  var table = Roo.factory({
9096     xtype : 'Table',
9097     xns : Roo.bootstrap,
9098     autoSizeColumns: true,
9099     
9100     
9101     store : {
9102         xtype : 'Store',
9103         xns : Roo.data,
9104         remoteSort : true,
9105         sortInfo : { direction : 'ASC', field: 'name' },
9106         proxy : {
9107            xtype : 'HttpProxy',
9108            xns : Roo.data,
9109            method : 'GET',
9110            url : 'https://example.com/some.data.url.json'
9111         },
9112         reader : {
9113            xtype : 'JsonReader',
9114            xns : Roo.data,
9115            fields : [ 'id', 'name', whatever' ],
9116            id : 'id',
9117            root : 'data'
9118         }
9119     },
9120     cm : [
9121         {
9122             xtype : 'ColumnModel',
9123             xns : Roo.grid,
9124             align : 'center',
9125             cursor : 'pointer',
9126             dataIndex : 'is_in_group',
9127             header : "Name",
9128             sortable : true,
9129             renderer : function(v, x , r) {  
9130             
9131                 return String.format("{0}", v)
9132             }
9133             width : 3
9134         } // more columns..
9135     ],
9136     selModel : {
9137         xtype : 'RowSelectionModel',
9138         xns : Roo.bootstrap.Table
9139         // you can add listeners to catch selection change here....
9140     }
9141      
9142
9143  });
9144  // set any options
9145  grid.render(Roo.get("some-div"));
9146 </code></pre>
9147
9148 Currently the Table  uses multiple headers to try and handle XL / Medium etc... styling
9149
9150
9151
9152  *
9153  * @cfg {Roo.grid.AbstractSelectionModel} sm The selection model to use (cell selection is not supported yet)
9154  * @cfg {Roo.data.Store} store The data store to use
9155  * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
9156  * 
9157  * @cfg {String} cls table class
9158  *
9159  *
9160  * @cfg {string} empty_results  Text to display for no results 
9161  * @cfg {boolean} striped Should the rows be alternative striped
9162  * @cfg {boolean} bordered Add borders to the table
9163  * @cfg {boolean} hover Add hover highlighting
9164  * @cfg {boolean} condensed Format condensed
9165  * @cfg {boolean} responsive default false - if this is on, columns are rendered with col-xs-4 etc. classes, otherwise columns will be sized by CSS,
9166  *                also adds table-responsive (see bootstrap docs for details)
9167  * @cfg {Boolean} loadMask (true|false) default false
9168  * @cfg {Boolean} footerShow (true|false) generate tfoot, default true
9169  * @cfg {Boolean} footerRow (true|false) generate tfoot with columns of values, default false
9170  * @cfg {Boolean} headerShow (true|false) generate thead, default true
9171  * @cfg {Boolean} rowSelection (true|false) default false
9172  * @cfg {Boolean} cellSelection (true|false) default false
9173  * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header (with resizable columns)
9174  * @cfg {Roo.bootstrap.PagingToolbar} footer  a paging toolbar
9175  * @cfg {Boolean} lazyLoad  auto load data while scrolling to the end (default false)
9176  * @cfg {Boolean} auto_hide_footer  auto hide footer if only one page (default false)
9177  * @cfg {Boolean} enableColumnResize default true if columns can be resized = needs scrollBody to be set to work (drag/drop)
9178  * @cfg {Boolean} disableAutoSize disable autoSize() and initCSS()
9179  *
9180  * 
9181  * @cfg {Number} minColumnWidth default 50 pixels minimum column width 
9182  * 
9183  * @constructor
9184  * Create a new Table
9185  * @param {Object} config The config object
9186  */
9187
9188 Roo.bootstrap.Table = function(config)
9189 {
9190     Roo.bootstrap.Table.superclass.constructor.call(this, config);
9191      
9192     // BC...
9193     this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
9194     this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
9195     this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
9196     this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
9197     
9198     this.view = this; // compat with grid.
9199     
9200     this.sm = this.sm || {xtype: 'RowSelectionModel'};
9201     if (this.sm) {
9202         this.sm.grid = this;
9203         this.selModel = Roo.factory(this.sm, Roo.grid);
9204         this.sm = this.selModel;
9205         this.sm.xmodule = this.xmodule || false;
9206     }
9207     
9208     if (this.cm && typeof(this.cm.config) == 'undefined') {
9209         this.colModel = new Roo.grid.ColumnModel(this.cm);
9210         this.cm = this.colModel;
9211         this.cm.xmodule = this.xmodule || false;
9212     }
9213     if (this.store) {
9214         this.store= Roo.factory(this.store, Roo.data);
9215         this.ds = this.store;
9216         this.ds.xmodule = this.xmodule || false;
9217          
9218     }
9219     if (this.footer && this.store) {
9220         this.footer.dataSource = this.ds;
9221         this.footer = Roo.factory(this.footer);
9222     }
9223     
9224     /** @private */
9225     this.addEvents({
9226         /**
9227          * @event cellclick
9228          * Fires when a cell is clicked
9229          * @param {Roo.bootstrap.Table} this
9230          * @param {Roo.Element} el
9231          * @param {Number} rowIndex
9232          * @param {Number} columnIndex
9233          * @param {Roo.EventObject} e
9234          */
9235         "cellclick" : true,
9236         /**
9237          * @event celldblclick
9238          * Fires when a cell is double clicked
9239          * @param {Roo.bootstrap.Table} this
9240          * @param {Roo.Element} el
9241          * @param {Number} rowIndex
9242          * @param {Number} columnIndex
9243          * @param {Roo.EventObject} e
9244          */
9245         "celldblclick" : true,
9246         /**
9247          * @event rowclick
9248          * Fires when a row is clicked
9249          * @param {Roo.bootstrap.Table} this
9250          * @param {Roo.Element} el
9251          * @param {Number} rowIndex
9252          * @param {Roo.EventObject} e
9253          */
9254         "rowclick" : true,
9255         /**
9256          * @event rowdblclick
9257          * Fires when a row is double clicked
9258          * @param {Roo.bootstrap.Table} this
9259          * @param {Roo.Element} el
9260          * @param {Number} rowIndex
9261          * @param {Roo.EventObject} e
9262          */
9263         "rowdblclick" : true,
9264         /**
9265          * @event mouseover
9266          * Fires when a mouseover occur
9267          * @param {Roo.bootstrap.Table} this
9268          * @param {Roo.Element} el
9269          * @param {Number} rowIndex
9270          * @param {Number} columnIndex
9271          * @param {Roo.EventObject} e
9272          */
9273         "mouseover" : true,
9274         /**
9275          * @event mouseout
9276          * Fires when a mouseout occur
9277          * @param {Roo.bootstrap.Table} this
9278          * @param {Roo.Element} el
9279          * @param {Number} rowIndex
9280          * @param {Number} columnIndex
9281          * @param {Roo.EventObject} e
9282          */
9283         "mouseout" : true,
9284         /**
9285          * @event rowclass
9286          * Fires when a row is rendered, so you can change add a style to it.
9287          * @param {Roo.bootstrap.Table} this
9288          * @param {Object} rowcfg   contains record  rowIndex colIndex and rowClass - set rowClass to add a style.
9289          */
9290         'rowclass' : true,
9291           /**
9292          * @event rowsrendered
9293          * Fires when all the  rows have been rendered
9294          * @param {Roo.bootstrap.Table} this
9295          */
9296         'rowsrendered' : true,
9297         /**
9298          * @event contextmenu
9299          * The raw contextmenu event for the entire grid.
9300          * @param {Roo.EventObject} e
9301          */
9302         "contextmenu" : true,
9303         /**
9304          * @event rowcontextmenu
9305          * Fires when a row is right clicked
9306          * @param {Roo.bootstrap.Table} this
9307          * @param {Number} rowIndex
9308          * @param {Roo.EventObject} e
9309          */
9310         "rowcontextmenu" : true,
9311         /**
9312          * @event cellcontextmenu
9313          * Fires when a cell is right clicked
9314          * @param {Roo.bootstrap.Table} this
9315          * @param {Number} rowIndex
9316          * @param {Number} cellIndex
9317          * @param {Roo.EventObject} e
9318          */
9319          "cellcontextmenu" : true,
9320          /**
9321          * @event headercontextmenu
9322          * Fires when a header is right clicked
9323          * @param {Roo.bootstrap.Table} this
9324          * @param {Number} columnIndex
9325          * @param {Roo.EventObject} e
9326          */
9327         "headercontextmenu" : true,
9328         /**
9329          * @event mousedown
9330          * The raw mousedown event for the entire grid.
9331          * @param {Roo.EventObject} e
9332          */
9333         "mousedown" : true
9334         
9335     });
9336 };
9337
9338 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
9339     
9340     cls: false,
9341     
9342     empty_results : '',
9343     striped : false,
9344     scrollBody : false,
9345     bordered: false,
9346     hover:  false,
9347     condensed : false,
9348     responsive : false,
9349     sm : false,
9350     cm : false,
9351     store : false,
9352     loadMask : false,
9353     footerShow : true,
9354     footerRow : false,
9355     headerShow : true,
9356     enableColumnResize: true,
9357     disableAutoSize: false,
9358   
9359     rowSelection : false,
9360     cellSelection : false,
9361     layout : false,
9362
9363     minColumnWidth : 50,
9364     
9365     // Roo.Element - the tbody
9366     bodyEl: false,  // <tbody> Roo.Element - thead element    
9367     headEl: false,  // <thead> Roo.Element - thead element
9368     resizeProxy : false, // proxy element for dragging?
9369
9370
9371     
9372     container: false, // used by gridpanel...
9373     
9374     lazyLoad : false,
9375     
9376     CSS : Roo.util.CSS,
9377     
9378     auto_hide_footer : false,
9379     
9380     view: false, // actually points to this..
9381     
9382     getAutoCreate : function()
9383     {
9384         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
9385         
9386         cfg = {
9387             tag: 'table',
9388             cls : 'table', 
9389             cn : []
9390         };
9391         // this get's auto added by panel.Grid
9392         if (this.scrollBody) {
9393             cfg.cls += ' table-body-fixed';
9394         }    
9395         if (this.striped) {
9396             cfg.cls += ' table-striped';
9397         }
9398         
9399         if (this.hover) {
9400             cfg.cls += ' table-hover';
9401         }
9402         if (this.bordered) {
9403             cfg.cls += ' table-bordered';
9404         }
9405         if (this.condensed) {
9406             cfg.cls += ' table-condensed';
9407         }
9408         
9409         if (this.responsive) {
9410             cfg.cls += ' table-responsive';
9411         }
9412         
9413         if (this.cls) {
9414             cfg.cls+=  ' ' +this.cls;
9415         }
9416         
9417         
9418         
9419         if (this.layout) {
9420             cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
9421         }
9422         
9423         if(this.store || this.cm){
9424             if(this.headerShow){
9425                 cfg.cn.push(this.renderHeader());
9426             }
9427             
9428             cfg.cn.push(this.renderBody());
9429             
9430             if(this.footerShow || this.footerRow){
9431                 cfg.cn.push(this.renderFooter());
9432             }
9433
9434             // where does this come from?
9435             //cfg.cls+=  ' TableGrid';
9436         }
9437         
9438         return { cn : [ cfg ] };
9439     },
9440     
9441     initEvents : function()
9442     {   
9443         if(!this.store || !this.cm){
9444             return;
9445         }
9446         if (this.selModel) {
9447             this.selModel.initEvents();
9448         }
9449         
9450         
9451         //Roo.log('initEvents with ds!!!!');
9452         
9453         this.bodyEl = this.el.select('tbody', true).first();
9454         this.headEl = this.el.select('thead', true).first();
9455         this.mainFoot = this.el.select('tfoot', true).first();
9456         
9457         
9458         
9459         
9460         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
9461             e.on('click', this.sort, this);
9462         }, this);
9463         
9464         
9465         // why is this done????? = it breaks dialogs??
9466         //this.parent().el.setStyle('position', 'relative');
9467         
9468         
9469         if (this.footer) {
9470             this.footer.parentId = this.id;
9471             this.footer.onRender(this.el.select('tfoot tr td').first(), null);
9472             
9473             if(this.lazyLoad){
9474                 this.el.select('tfoot tr td').first().addClass('hide');
9475             }
9476         } 
9477         
9478         if(this.loadMask) {
9479             this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
9480         }
9481         
9482         this.store.on('load', this.onLoad, this);
9483         this.store.on('beforeload', this.onBeforeLoad, this);
9484         this.store.on('update', this.onUpdate, this);
9485         this.store.on('add', this.onAdd, this);
9486         this.store.on("clear", this.clear, this);
9487         
9488         this.el.on("contextmenu", this.onContextMenu, this);
9489         
9490         
9491         this.cm.on("headerchange", this.onHeaderChange, this);
9492         this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
9493
9494  //?? does bodyEl get replaced on render?
9495         this.bodyEl.on("click", this.onClick, this);
9496         this.bodyEl.on("dblclick", this.onDblClick, this);        
9497         this.bodyEl.on('scroll', this.onBodyScroll, this);
9498
9499         // guessing mainbody will work - this relays usually caught by selmodel at present.
9500         this.relayEvents(this.bodyEl, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
9501   
9502   
9503         this.resizeProxy = Roo.get(document.body).createChild({ cls:"x-grid-resize-proxy", html: '&#160;' });
9504         
9505   
9506         if(this.headEl && this.enableColumnResize !== false && Roo.grid.SplitDragZone){
9507             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
9508         }
9509         
9510         this.initCSS();
9511     },
9512     // Compatibility with grid - we implement all the view features at present.
9513     getView : function()
9514     {
9515         return this;
9516     },
9517     
9518     initCSS : function()
9519     {
9520         if(this.disableAutoSize) {
9521             return;
9522         }
9523         
9524         var cm = this.cm, styles = [];
9525         this.CSS.removeStyleSheet(this.id + '-cssrules');
9526         var headHeight = this.headEl ? this.headEl.dom.clientHeight : 0;
9527         // we can honour xs/sm/md/xl  as widths...
9528         // we first have to decide what widht we are currently at...
9529         var sz = Roo.getGridSize();
9530         
9531         var total = 0;
9532         var last = -1;
9533         var cols = []; // visable cols.
9534         var total_abs = 0;
9535         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9536             var w = cm.getColumnWidth(i, false);
9537             if(cm.isHidden(i)){
9538                 cols.push( { rel : false, abs : 0 });
9539                 continue;
9540             }
9541             if (w !== false) {
9542                 cols.push( { rel : false, abs : w });
9543                 total_abs += w;
9544                 last = i; // not really..
9545                 continue;
9546             }
9547             var w = cm.getColumnWidth(i, sz);
9548             if (w > 0) {
9549                 last = i
9550             }
9551             total += w;
9552             cols.push( { rel : w, abs : false });
9553         }
9554         
9555         var avail = this.bodyEl.dom.clientWidth - total_abs;
9556         
9557         var unitWidth = Math.floor(avail / total);
9558         var rem = avail - (unitWidth * total);
9559         
9560         var hidden, width, pos = 0 , splithide , left;
9561         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9562             
9563             hidden = 'display:none;';
9564             left = '';
9565             width  = 'width:0px;';
9566             splithide = '';
9567             if(!cm.isHidden(i)){
9568                 hidden = '';
9569                 
9570                 
9571                 // we can honour xs/sm/md/xl ?
9572                 var w = cols[i].rel == false ? cols[i].abs : (cols[i].rel * unitWidth);
9573                 if (w===0) {
9574                     hidden = 'display:none;';
9575                 }
9576                 // width should return a small number...
9577                 if (i == last) {
9578                     w+=rem; // add the remaining with..
9579                 }
9580                 pos += w;
9581                 left = "left:" + (pos -4) + "px;";
9582                 width = "width:" + w+ "px;";
9583                 
9584             }
9585             if (this.responsive) {
9586                 width = '';
9587                 left = '';
9588                 hidden = cm.isHidden(i) ? 'display:none;' : '';
9589                 splithide = 'display: none;';
9590             }
9591             
9592             styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" );
9593             if (this.headEl) {
9594                 if (i == last) {
9595                     splithide = 'display:none;';
9596                 }
9597                 
9598                 styles.push('#' , this.id , ' .x-hcol-' , i, " { ", width, hidden," }\n",
9599                             '#' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', (headHeight - 4), "px;}\n",
9600                             // this is the popover version..
9601                             '.popover-inner #' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', 100, "%;}\n"
9602                 );
9603             }
9604             
9605         }
9606         //Roo.log(styles.join(''));
9607         this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
9608         
9609     },
9610     
9611     
9612     
9613     onContextMenu : function(e, t)
9614     {
9615         this.processEvent("contextmenu", e);
9616     },
9617     
9618     processEvent : function(name, e)
9619     {
9620         if (name != 'touchstart' ) {
9621             this.fireEvent(name, e);    
9622         }
9623         
9624         var t = e.getTarget();
9625         
9626         var cell = Roo.get(t);
9627         
9628         if(!cell){
9629             return;
9630         }
9631         
9632         if(cell.findParent('tfoot', false, true)){
9633             return;
9634         }
9635         
9636         if(cell.findParent('thead', false, true)){
9637             
9638             if(e.getTarget().nodeName.toLowerCase() != 'th'){
9639                 cell = Roo.get(t).findParent('th', false, true);
9640                 if (!cell) {
9641                     Roo.log("failed to find th in thead?");
9642                     Roo.log(e.getTarget());
9643                     return;
9644                 }
9645             }
9646             
9647             var cellIndex = cell.dom.cellIndex;
9648             
9649             var ename = name == 'touchstart' ? 'click' : name;
9650             this.fireEvent("header" + ename, this, cellIndex, e);
9651             
9652             return;
9653         }
9654         
9655         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9656             cell = Roo.get(t).findParent('td', false, true);
9657             if (!cell) {
9658                 Roo.log("failed to find th in tbody?");
9659                 Roo.log(e.getTarget());
9660                 return;
9661             }
9662         }
9663         
9664         var row = cell.findParent('tr', false, true);
9665         var cellIndex = cell.dom.cellIndex;
9666         var rowIndex = row.dom.rowIndex - 1;
9667         
9668         if(row !== false){
9669             
9670             this.fireEvent("row" + name, this, rowIndex, e);
9671             
9672             if(cell !== false){
9673             
9674                 this.fireEvent("cell" + name, this, rowIndex, cellIndex, e);
9675             }
9676         }
9677         
9678     },
9679     
9680     onMouseover : function(e, el)
9681     {
9682         var cell = Roo.get(el);
9683         
9684         if(!cell){
9685             return;
9686         }
9687         
9688         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9689             cell = cell.findParent('td', false, true);
9690         }
9691         
9692         var row = cell.findParent('tr', false, true);
9693         var cellIndex = cell.dom.cellIndex;
9694         var rowIndex = row.dom.rowIndex - 1; // start from 0
9695         
9696         this.fireEvent('mouseover', this, cell, rowIndex, cellIndex, e);
9697         
9698     },
9699     
9700     onMouseout : function(e, el)
9701     {
9702         var cell = Roo.get(el);
9703         
9704         if(!cell){
9705             return;
9706         }
9707         
9708         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9709             cell = cell.findParent('td', false, true);
9710         }
9711         
9712         var row = cell.findParent('tr', false, true);
9713         var cellIndex = cell.dom.cellIndex;
9714         var rowIndex = row.dom.rowIndex - 1; // start from 0
9715         
9716         this.fireEvent('mouseout', this, cell, rowIndex, cellIndex, e);
9717         
9718     },
9719     
9720     onClick : function(e, el)
9721     {
9722         var cell = Roo.get(el);
9723         
9724         if(!cell || (!this.cellSelection && !this.rowSelection)){
9725             return;
9726         }
9727         
9728         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9729             cell = cell.findParent('td', false, true);
9730         }
9731         
9732         if(!cell || typeof(cell) == 'undefined'){
9733             return;
9734         }
9735         
9736         var row = cell.findParent('tr', false, true);
9737         
9738         if(!row || typeof(row) == 'undefined'){
9739             return;
9740         }
9741         
9742         var cellIndex = cell.dom.cellIndex;
9743         var rowIndex = this.getRowIndex(row);
9744         
9745         // why??? - should these not be based on SelectionModel?
9746         //if(this.cellSelection){
9747             this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
9748         //}
9749         
9750         //if(this.rowSelection){
9751             this.fireEvent('rowclick', this, row, rowIndex, e);
9752         //}
9753          
9754     },
9755         
9756     onDblClick : function(e,el)
9757     {
9758         var cell = Roo.get(el);
9759         
9760         if(!cell || (!this.cellSelection && !this.rowSelection)){
9761             return;
9762         }
9763         
9764         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9765             cell = cell.findParent('td', false, true);
9766         }
9767         
9768         if(!cell || typeof(cell) == 'undefined'){
9769             return;
9770         }
9771         
9772         var row = cell.findParent('tr', false, true);
9773         
9774         if(!row || typeof(row) == 'undefined'){
9775             return;
9776         }
9777         
9778         var cellIndex = cell.dom.cellIndex;
9779         var rowIndex = this.getRowIndex(row);
9780         
9781         if(this.cellSelection){
9782             this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
9783         }
9784         
9785         if(this.rowSelection){
9786             this.fireEvent('rowdblclick', this, row, rowIndex, e);
9787         }
9788     },
9789     findRowIndex : function(el)
9790     {
9791         var cell = Roo.get(el);
9792         if(!cell) {
9793             return false;
9794         }
9795         var row = cell.findParent('tr', false, true);
9796         
9797         if(!row || typeof(row) == 'undefined'){
9798             return false;
9799         }
9800         return this.getRowIndex(row);
9801     },
9802     sort : function(e,el)
9803     {
9804         var col = Roo.get(el);
9805         
9806         if(!col.hasClass('sortable')){
9807             return;
9808         }
9809         
9810         var sort = col.attr('sort');
9811         var dir = 'ASC';
9812         
9813         if(col.select('i', true).first().hasClass('fa-arrow-up')){
9814             dir = 'DESC';
9815         }
9816         
9817         this.store.sortInfo = {field : sort, direction : dir};
9818         
9819         if (this.footer) {
9820             Roo.log("calling footer first");
9821             this.footer.onClick('first');
9822         } else {
9823         
9824             this.store.load({ params : { start : 0 } });
9825         }
9826     },
9827     
9828     renderHeader : function()
9829     {
9830         var header = {
9831             tag: 'thead',
9832             cn : []
9833         };
9834         
9835         var cm = this.cm;
9836         this.totalWidth = 0;
9837         
9838         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
9839             
9840             var config = cm.config[i];
9841             
9842             var c = {
9843                 tag: 'th',
9844                 cls : 'x-hcol-' + i,
9845                 style : '',
9846                 
9847                 html: cm.getColumnHeader(i)
9848             };
9849             
9850             var tooltip = cm.getColumnTooltip(i);
9851             if (tooltip) {
9852                 c.tooltip = tooltip;
9853             }
9854             
9855             
9856             var hh = '';
9857             
9858             if(typeof(config.sortable) != 'undefined' && config.sortable){
9859                 c.cls += ' sortable';
9860                 c.html = '<i class="fa"></i>' + c.html;
9861             }
9862             
9863             // could use BS4 hidden-..-down 
9864             
9865             if(typeof(config.lgHeader) != 'undefined'){
9866                 hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
9867             }
9868             
9869             if(typeof(config.mdHeader) != 'undefined'){
9870                 hh += '<span class="hidden-xs hidden-sm hidden-lg">' + config.mdHeader + '</span>';
9871             }
9872             
9873             if(typeof(config.smHeader) != 'undefined'){
9874                 hh += '<span class="hidden-xs hidden-md hidden-lg">' + config.smHeader + '</span>';
9875             }
9876             
9877             if(typeof(config.xsHeader) != 'undefined'){
9878                 hh += '<span class="hidden-sm hidden-md hidden-lg">' + config.xsHeader + '</span>';
9879             }
9880             
9881             if(hh.length){
9882                 c.html = hh;
9883             }
9884             
9885             if(typeof(config.tooltip) != 'undefined'){
9886                 c.tooltip = config.tooltip;
9887             }
9888             
9889             if(typeof(config.colspan) != 'undefined'){
9890                 c.colspan = config.colspan;
9891             }
9892             
9893             // hidden is handled by CSS now
9894             
9895             if(typeof(config.dataIndex) != 'undefined'){
9896                 c.sort = config.dataIndex;
9897             }
9898             
9899            
9900             
9901             if(typeof(config.align) != 'undefined' && config.align.length){
9902                 c.style += ' text-align:' + config.align + ';';
9903             }
9904             
9905             /* width is done in CSS
9906              *if(typeof(config.width) != 'undefined'){
9907                 c.style += ' width:' + config.width + 'px;';
9908                 this.totalWidth += config.width;
9909             } else {
9910                 this.totalWidth += 100; // assume minimum of 100 per column?
9911             }
9912             */
9913             
9914             if(typeof(config.cls) != 'undefined'){
9915                 c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
9916             }
9917             // this is the bit that doesnt reall work at all...
9918             
9919             if (this.responsive) {
9920                  
9921             
9922                 ['xs','sm','md','lg'].map(function(size){
9923                     
9924                     if(typeof(config[size]) == 'undefined'){
9925                         return;
9926                     }
9927                      
9928                     if (!config[size]) { // 0 = hidden
9929                         // BS 4 '0' is treated as hide that column and below.
9930                         c.cls += ' hidden-' + size + ' hidden' + size + '-down';
9931                         return;
9932                     }
9933                     
9934                     c.cls += ' col-' + size + '-' + config[size] + (
9935                         size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
9936                     );
9937                     
9938                     
9939                 });
9940             }
9941             // at the end?
9942             
9943             c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
9944             
9945             
9946             
9947             
9948             header.cn.push(c)
9949         }
9950         
9951         return header;
9952     },
9953     
9954     renderBody : function()
9955     {
9956         var body = {
9957             tag: 'tbody',
9958             cn : [
9959                 {
9960                     tag: 'tr',
9961                     cn : [
9962                         {
9963                             tag : 'td',
9964                             colspan :  this.cm.getColumnCount()
9965                         }
9966                     ]
9967                 }
9968             ]
9969         };
9970         
9971         return body;
9972     },
9973     
9974     renderFooter : function()
9975     {
9976         var footer = {
9977             tag: 'tfoot',
9978             cn : [
9979                 {
9980                     tag: 'tr',
9981                     cn : [
9982                         {
9983                             tag : 'td',
9984                             colspan :  this.cm.getColumnCount()
9985                         }
9986                     ]
9987                 }
9988             ]
9989         };
9990         
9991         return footer;
9992     },
9993     
9994     onLoad : function()
9995     {
9996 //        Roo.log('ds onload');
9997         this.clear();
9998         
9999         var _this = this;
10000         var cm = this.cm;
10001         var ds = this.store;
10002         
10003         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
10004             e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
10005             if (_this.store.sortInfo) {
10006                     
10007                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
10008                     e.select('i', true).addClass(['fa-arrow-up']);
10009                 }
10010                 
10011                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
10012                     e.select('i', true).addClass(['fa-arrow-down']);
10013                 }
10014             }
10015         });
10016         
10017         var tbody =  this.bodyEl;
10018               
10019         if(ds.getCount() > 0){
10020             ds.data.each(function(d,rowIndex){
10021                 var row =  this.renderRow(cm, ds, rowIndex);
10022                 
10023                 tbody.createChild(row);
10024                 
10025                 var _this = this;
10026                 
10027                 if(row.cellObjects.length){
10028                     Roo.each(row.cellObjects, function(r){
10029                         _this.renderCellObject(r);
10030                     })
10031                 }
10032                 
10033             }, this);
10034         } else if (this.empty_results.length) {
10035             this.el.mask(this.empty_results, 'no-spinner');
10036         }
10037         
10038         var tfoot = this.el.select('tfoot', true).first();
10039         
10040         if(this.footerShow && !this.footerRow && this.auto_hide_footer && this.mainFoot){
10041             
10042             this.mainFoot.setVisibilityMode(Roo.Element.DISPLAY).hide();
10043             
10044             var total = this.ds.getTotalCount();
10045             
10046             if(this.footer.pageSize < total){
10047                 this.mainFoot.show();
10048             }
10049         }
10050
10051         if(!this.footerShow && this.footerRow) {
10052
10053             var tr = {
10054                 tag : 'tr',
10055                 cn : []
10056             };
10057
10058             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
10059                 var footer = typeof(cm.config[i].footer) == "function" ? cm.config[i].footer(ds, cm.config[i]) : cm.config[i].footer;
10060                 var td = {
10061                     tag: 'td',
10062                     cls : ' x-fcol-' + i,
10063                     html: footer
10064                 };
10065
10066                 tr.cn.push(td);
10067                 
10068             }
10069             
10070             tfoot.dom.innerHTML = '';
10071
10072             tfoot.createChild(tr);
10073         }
10074         
10075         Roo.each(this.el.select('tbody td', true).elements, function(e){
10076             e.on('mouseover', _this.onMouseover, _this);
10077         });
10078         
10079         Roo.each(this.el.select('tbody td', true).elements, function(e){
10080             e.on('mouseout', _this.onMouseout, _this);
10081         });
10082         this.fireEvent('rowsrendered', this);
10083         
10084         this.autoSize();
10085         
10086         this.initCSS(); /// resize cols
10087
10088         
10089     },
10090     
10091     
10092     onUpdate : function(ds,record)
10093     {
10094         this.refreshRow(record);
10095         this.autoSize();
10096     },
10097     
10098     onRemove : function(ds, record, index, isUpdate){
10099         if(isUpdate !== true){
10100             this.fireEvent("beforerowremoved", this, index, record);
10101         }
10102         var bt = this.bodyEl.dom;
10103         
10104         var rows = this.el.select('tbody > tr', true).elements;
10105         
10106         if(typeof(rows[index]) != 'undefined'){
10107             bt.removeChild(rows[index].dom);
10108         }
10109         
10110 //        if(bt.rows[index]){
10111 //            bt.removeChild(bt.rows[index]);
10112 //        }
10113         
10114         if(isUpdate !== true){
10115             //this.stripeRows(index);
10116             //this.syncRowHeights(index, index);
10117             //this.layout();
10118             this.fireEvent("rowremoved", this, index, record);
10119         }
10120     },
10121     
10122     onAdd : function(ds, records, rowIndex)
10123     {
10124         //Roo.log('on Add called');
10125         // - note this does not handle multiple adding very well..
10126         var bt = this.bodyEl.dom;
10127         for (var i =0 ; i < records.length;i++) {
10128             //Roo.log('call insert row Add called on ' + rowIndex + ':' + i);
10129             //Roo.log(records[i]);
10130             //Roo.log(this.store.getAt(rowIndex+i));
10131             this.insertRow(this.store, rowIndex + i, false);
10132             return;
10133         }
10134         
10135     },
10136     
10137     
10138     refreshRow : function(record){
10139         var ds = this.store, index;
10140         if(typeof record == 'number'){
10141             index = record;
10142             record = ds.getAt(index);
10143         }else{
10144             index = ds.indexOf(record);
10145             if (index < 0) {
10146                 return; // should not happen - but seems to 
10147             }
10148         }
10149         this.insertRow(ds, index, true);
10150         this.autoSize();
10151         this.onRemove(ds, record, index+1, true);
10152         this.autoSize();
10153         //this.syncRowHeights(index, index);
10154         //this.layout();
10155         this.fireEvent("rowupdated", this, index, record);
10156     },
10157     // private - called by RowSelection
10158     onRowSelect : function(rowIndex){
10159         var row = this.getRowDom(rowIndex);
10160         row.addClass(['bg-info','info']);
10161     },
10162     // private - called by RowSelection
10163     onRowDeselect : function(rowIndex)
10164     {
10165         if (rowIndex < 0) {
10166             return;
10167         }
10168         var row = this.getRowDom(rowIndex);
10169         row.removeClass(['bg-info','info']);
10170     },
10171       /**
10172      * Focuses the specified row.
10173      * @param {Number} row The row index
10174      */
10175     focusRow : function(row)
10176     {
10177         //Roo.log('GridView.focusRow');
10178         var x = this.bodyEl.dom.scrollLeft;
10179         this.focusCell(row, 0, false);
10180         this.bodyEl.dom.scrollLeft = x;
10181
10182     },
10183      /**
10184      * Focuses the specified cell.
10185      * @param {Number} row The row index
10186      * @param {Number} col The column index
10187      * @param {Boolean} hscroll false to disable horizontal scrolling
10188      */
10189     focusCell : function(row, col, hscroll)
10190     {
10191         //Roo.log('GridView.focusCell');
10192         var el = this.ensureVisible(row, col, hscroll);
10193         // not sure what focusEL achives = it's a <a> pos relative 
10194         //this.focusEl.alignTo(el, "tl-tl");
10195         //if(Roo.isGecko){
10196         //    this.focusEl.focus();
10197         //}else{
10198         //    this.focusEl.focus.defer(1, this.focusEl);
10199         //}
10200     },
10201     
10202      /**
10203      * Scrolls the specified cell into view
10204      * @param {Number} row The row index
10205      * @param {Number} col The column index
10206      * @param {Boolean} hscroll false to disable horizontal scrolling
10207      */
10208     ensureVisible : function(row, col, hscroll)
10209     {
10210         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
10211         //return null; //disable for testing.
10212         if(typeof row != "number"){
10213             row = row.rowIndex;
10214         }
10215         if(row < 0 && row >= this.ds.getCount()){
10216             return  null;
10217         }
10218         col = (col !== undefined ? col : 0);
10219         var cm = this.cm;
10220         while(cm.isHidden(col)){
10221             col++;
10222         }
10223
10224         var el = this.getCellDom(row, col);
10225         if(!el){
10226             return null;
10227         }
10228         var c = this.bodyEl.dom;
10229
10230         var ctop = parseInt(el.offsetTop, 10);
10231         var cleft = parseInt(el.offsetLeft, 10);
10232         var cbot = ctop + el.offsetHeight;
10233         var cright = cleft + el.offsetWidth;
10234
10235         //var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
10236         var ch = 0; //?? header is not withing the area?
10237         var stop = parseInt(c.scrollTop, 10);
10238         var sleft = parseInt(c.scrollLeft, 10);
10239         var sbot = stop + ch;
10240         var sright = sleft + c.clientWidth;
10241         /*
10242         Roo.log('GridView.ensureVisible:' +
10243                 ' ctop:' + ctop +
10244                 ' c.clientHeight:' + c.clientHeight +
10245                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
10246                 ' stop:' + stop +
10247                 ' cbot:' + cbot +
10248                 ' sbot:' + sbot +
10249                 ' ch:' + ch  
10250                 );
10251         */
10252         if(ctop < stop){
10253             c.scrollTop = ctop;
10254             //Roo.log("set scrolltop to ctop DISABLE?");
10255         }else if(cbot > sbot){
10256             //Roo.log("set scrolltop to cbot-ch");
10257             c.scrollTop = cbot-ch;
10258         }
10259
10260         if(hscroll !== false){
10261             if(cleft < sleft){
10262                 c.scrollLeft = cleft;
10263             }else if(cright > sright){
10264                 c.scrollLeft = cright-c.clientWidth;
10265             }
10266         }
10267
10268         return el;
10269     },
10270     
10271     
10272     insertRow : function(dm, rowIndex, isUpdate){
10273         
10274         if(!isUpdate){
10275             this.fireEvent("beforerowsinserted", this, rowIndex);
10276         }
10277             //var s = this.getScrollState();
10278         var row = this.renderRow(this.cm, this.store, rowIndex);
10279         // insert before rowIndex..
10280         var e = this.bodyEl.createChild(row,this.getRowDom(rowIndex));
10281         
10282         var _this = this;
10283                 
10284         if(row.cellObjects.length){
10285             Roo.each(row.cellObjects, function(r){
10286                 _this.renderCellObject(r);
10287             })
10288         }
10289             
10290         if(!isUpdate){
10291             this.fireEvent("rowsinserted", this, rowIndex);
10292             //this.syncRowHeights(firstRow, lastRow);
10293             //this.stripeRows(firstRow);
10294             //this.layout();
10295         }
10296         
10297     },
10298     
10299     
10300     getRowDom : function(rowIndex)
10301     {
10302         var rows = this.el.select('tbody > tr', true).elements;
10303         
10304         return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
10305         
10306     },
10307     getCellDom : function(rowIndex, colIndex)
10308     {
10309         var row = this.getRowDom(rowIndex);
10310         if (row === false) {
10311             return false;
10312         }
10313         var cols = row.select('td', true).elements;
10314         return (typeof(cols[colIndex]) == 'undefined') ? false : cols[colIndex];
10315         
10316     },
10317     
10318     // returns the object tree for a tr..
10319   
10320     
10321     renderRow : function(cm, ds, rowIndex) 
10322     {
10323         var d = ds.getAt(rowIndex);
10324         
10325         var row = {
10326             tag : 'tr',
10327             cls : 'x-row-' + rowIndex,
10328             cn : []
10329         };
10330             
10331         var cellObjects = [];
10332         
10333         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
10334             var config = cm.config[i];
10335             
10336             var renderer = cm.getRenderer(i);
10337             var value = '';
10338             var id = false;
10339             
10340             if(typeof(renderer) !== 'undefined'){
10341                 value = renderer.call(config, d.data[cm.getDataIndex(i)], false, d);
10342             }
10343             // if object are returned, then they are expected to be Roo.bootstrap.Component instances
10344             // and are rendered into the cells after the row is rendered - using the id for the element.
10345             
10346             if(typeof(value) === 'object'){
10347                 id = Roo.id();
10348                 cellObjects.push({
10349                     container : id,
10350                     cfg : value 
10351                 })
10352             }
10353             
10354             var rowcfg = {
10355                 record: d,
10356                 rowIndex : rowIndex,
10357                 colIndex : i,
10358                 rowClass : ''
10359             };
10360
10361             this.fireEvent('rowclass', this, rowcfg);
10362             
10363             var td = {
10364                 tag: 'td',
10365                 // this might end up displaying HTML?
10366                 // this is too messy... - better to only do it on columsn you know are going to be too long
10367                 //tooltip : (typeof(value) === 'object') ? '' : value,
10368                 cls : rowcfg.rowClass + ' x-col-' + i,
10369                 style: '',
10370                 html: (typeof(value) === 'object') ? '' : value
10371             };
10372             
10373             if (id) {
10374                 td.id = id;
10375             }
10376             
10377             if(typeof(config.colspan) != 'undefined'){
10378                 td.colspan = config.colspan;
10379             }
10380             
10381             
10382             
10383             if(typeof(config.align) != 'undefined' && config.align.length){
10384                 td.style += ' text-align:' + config.align + ';';
10385             }
10386             if(typeof(config.valign) != 'undefined' && config.valign.length){
10387                 td.style += ' vertical-align:' + config.valign + ';';
10388             }
10389             /*
10390             if(typeof(config.width) != 'undefined'){
10391                 td.style += ' width:' +  config.width + 'px;';
10392             }
10393             */
10394             
10395             if(typeof(config.cursor) != 'undefined'){
10396                 td.style += ' cursor:' +  config.cursor + ';';
10397             }
10398             
10399             if(typeof(config.cls) != 'undefined'){
10400                 td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
10401             }
10402             if (this.responsive) {
10403                 ['xs','sm','md','lg'].map(function(size){
10404                     
10405                     if(typeof(config[size]) == 'undefined'){
10406                         return;
10407                     }
10408                     
10409                     
10410                       
10411                     if (!config[size]) { // 0 = hidden
10412                         // BS 4 '0' is treated as hide that column and below.
10413                         td.cls += ' hidden-' + size + ' hidden' + size + '-down';
10414                         return;
10415                     }
10416                     
10417                     td.cls += ' col-' + size + '-' + config[size] + (
10418                         size == 'xs' ? (' col-' +   config[size] ) : '' // bs4 col-{num} replaces col-xs
10419                     );
10420                      
10421     
10422                 });
10423             }
10424             row.cn.push(td);
10425            
10426         }
10427         
10428         row.cellObjects = cellObjects;
10429         
10430         return row;
10431           
10432     },
10433     
10434     
10435     
10436     onBeforeLoad : function()
10437     {
10438         this.el.unmask(); // if needed.
10439     },
10440      /**
10441      * Remove all rows
10442      */
10443     clear : function()
10444     {
10445         this.el.select('tbody', true).first().dom.innerHTML = '';
10446     },
10447     /**
10448      * Show or hide a row.
10449      * @param {Number} rowIndex to show or hide
10450      * @param {Boolean} state hide
10451      */
10452     setRowVisibility : function(rowIndex, state)
10453     {
10454         var bt = this.bodyEl.dom;
10455         
10456         var rows = this.el.select('tbody > tr', true).elements;
10457         
10458         if(typeof(rows[rowIndex]) == 'undefined'){
10459             return;
10460         }
10461         rows[rowIndex][ state ? 'removeClass' : 'addClass']('d-none');
10462         
10463     },
10464     
10465     
10466     getSelectionModel : function(){
10467         if(!this.selModel){
10468             this.selModel = new Roo.bootstrap.Table.RowSelectionModel({grid: this});
10469         }
10470         return this.selModel;
10471     },
10472     /*
10473      * Render the Roo.bootstrap object from renderder
10474      */
10475     renderCellObject : function(r)
10476     {
10477         var _this = this;
10478         
10479         r.cfg.parentId = (typeof(r.container) == 'string') ? r.container : r.container.id;
10480         
10481         var t = r.cfg.render(r.container);
10482         
10483         if(r.cfg.cn){
10484             Roo.each(r.cfg.cn, function(c){
10485                 var child = {
10486                     container: t.getChildContainer(),
10487                     cfg: c
10488                 };
10489                 _this.renderCellObject(child);
10490             })
10491         }
10492     },
10493     /**
10494      * get the Row Index from a dom element.
10495      * @param {Roo.Element} row The row to look for
10496      * @returns {Number} the row
10497      */
10498     getRowIndex : function(row)
10499     {
10500         var rowIndex = -1;
10501         
10502         Roo.each(this.el.select('tbody > tr', true).elements, function(el, index){
10503             if(el != row){
10504                 return;
10505             }
10506             
10507             rowIndex = index;
10508         });
10509         
10510         return rowIndex;
10511     },
10512     /**
10513      * get the header TH element for columnIndex
10514      * @param {Number} columnIndex
10515      * @returns {Roo.Element}
10516      */
10517     getHeaderIndex: function(colIndex)
10518     {
10519         var cols = this.headEl.select('th', true).elements;
10520         return cols[colIndex]; 
10521     },
10522     /**
10523      * get the Column Index from a dom element. (using regex on x-hcol-{colid})
10524      * @param {domElement} cell to look for
10525      * @returns {Number} the column
10526      */
10527     getCellIndex : function(cell)
10528     {
10529         var id = String(cell.className).match(Roo.bootstrap.Table.cellRE);
10530         if(id){
10531             return parseInt(id[1], 10);
10532         }
10533         return 0;
10534     },
10535      /**
10536      * Returns the grid's underlying element = used by panel.Grid
10537      * @return {Element} The element
10538      */
10539     getGridEl : function(){
10540         return this.el;
10541     },
10542      /**
10543      * Forces a resize - used by panel.Grid
10544      * @return {Element} The element
10545      */
10546     autoSize : function()
10547     {
10548         if(this.disableAutoSize) {
10549             return;
10550         }
10551         //var ctr = Roo.get(this.container.dom.parentElement);
10552         var ctr = Roo.get(this.el.dom);
10553         
10554         var thd = this.getGridEl().select('thead',true).first();
10555         var tbd = this.getGridEl().select('tbody', true).first();
10556         var tfd = this.getGridEl().select('tfoot', true).first();
10557         
10558         var cw = ctr.getWidth();
10559         this.getGridEl().select('tfoot tr, tfoot  td',true).setWidth(cw);
10560         
10561         if (tbd) {
10562             
10563             tbd.setWidth(ctr.getWidth());
10564             // if the body has a max height - and then scrolls - we should perhaps set up the height here
10565             // this needs fixing for various usage - currently only hydra job advers I think..
10566             //tdb.setHeight(
10567             //        ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
10568             //); 
10569             var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
10570             cw -= barsize;
10571         }
10572         cw = Math.max(cw, this.totalWidth);
10573         this.getGridEl().select('tbody tr',true).setWidth(cw);
10574         this.initCSS();
10575         
10576         // resize 'expandable coloumn?
10577         
10578         return; // we doe not have a view in this design..
10579         
10580     },
10581     onBodyScroll: function()
10582     {
10583         //Roo.log("body scrolled');" + this.bodyEl.dom.scrollLeft);
10584         if(this.headEl){
10585             this.headEl.setStyle({
10586                 'position' : 'relative',
10587                 'left': (-1* this.bodyEl.dom.scrollLeft) + 'px'
10588             });
10589         }
10590         
10591         if(this.lazyLoad){
10592             
10593             var scrollHeight = this.bodyEl.dom.scrollHeight;
10594             
10595             var scrollTop = Math.ceil(this.bodyEl.getScroll().top);
10596             
10597             var height = this.bodyEl.getHeight();
10598             
10599             if(scrollHeight - height == scrollTop) {
10600                 
10601                 var total = this.ds.getTotalCount();
10602                 
10603                 if(this.footer.cursor + this.footer.pageSize < total){
10604                     
10605                     this.footer.ds.load({
10606                         params : {
10607                             start : this.footer.cursor + this.footer.pageSize,
10608                             limit : this.footer.pageSize
10609                         },
10610                         add : true
10611                     });
10612                 }
10613             }
10614             
10615         }
10616     },
10617     onColumnSplitterMoved : function(i, diff)
10618     {
10619         this.userResized = true;
10620         
10621         var cm = this.colModel;
10622         
10623         var w = this.getHeaderIndex(i).getWidth() + diff;
10624         
10625         
10626         cm.setColumnWidth(i, w, true);
10627         this.initCSS();
10628         //var cid = cm.getColumnId(i); << not used in this version?
10629        /* Roo.log(['#' + this.id + ' .x-col-' + i, "width", w + "px"]);
10630         
10631         this.CSS.updateRule( '#' + this.id + ' .x-col-' + i, "width", w + "px");
10632         this.CSS.updateRule('#' + this.id + ' .x-hcol-' + i, "width", w + "px");
10633         this.CSS.updateRule('#' + this.id + ' .x-grid-split-' + i, "left", w + "px");
10634 */
10635         //this.updateSplitters();
10636         //this.layout(); << ??
10637         this.fireEvent("columnresize", i, w);
10638     },
10639     onHeaderChange : function()
10640     {
10641         var header = this.renderHeader();
10642         var table = this.el.select('table', true).first();
10643         
10644         this.headEl.remove();
10645         this.headEl = table.createChild(header, this.bodyEl, false);
10646         
10647         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
10648             e.on('click', this.sort, this);
10649         }, this);
10650         
10651         if(this.enableColumnResize !== false && Roo.grid.SplitDragZone){
10652             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
10653         }
10654         
10655     },
10656     
10657     onHiddenChange : function(colModel, colIndex, hidden)
10658     {
10659         /*
10660         this.cm.setHidden()
10661         var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
10662         var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
10663         
10664         this.CSS.updateRule(thSelector, "display", "");
10665         this.CSS.updateRule(tdSelector, "display", "");
10666         
10667         if(hidden){
10668             this.CSS.updateRule(thSelector, "display", "none");
10669             this.CSS.updateRule(tdSelector, "display", "none");
10670         }
10671         */
10672         // onload calls initCSS()
10673         this.onHeaderChange();
10674         this.onLoad();
10675     },
10676     
10677     setColumnWidth: function(col_index, width)
10678     {
10679         // width = "md-2 xs-2..."
10680         if(!this.colModel.config[col_index]) {
10681             return;
10682         }
10683         
10684         var w = width.split(" ");
10685         
10686         var rows = this.el.dom.getElementsByClassName("x-col-"+col_index);
10687         
10688         var h_row = this.el.dom.getElementsByClassName("x-hcol-"+col_index);
10689         
10690         
10691         for(var j = 0; j < w.length; j++) {
10692             
10693             if(!w[j]) {
10694                 continue;
10695             }
10696             
10697             var size_cls = w[j].split("-");
10698             
10699             if(!Number.isInteger(size_cls[1] * 1)) {
10700                 continue;
10701             }
10702             
10703             if(!this.colModel.config[col_index][size_cls[0]]) {
10704                 continue;
10705             }
10706             
10707             if(!h_row[0].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10708                 continue;
10709             }
10710             
10711             h_row[0].classList.replace(
10712                 "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10713                 "col-"+size_cls[0]+"-"+size_cls[1]
10714             );
10715             
10716             for(var i = 0; i < rows.length; i++) {
10717                 
10718                 var size_cls = w[j].split("-");
10719                 
10720                 if(!Number.isInteger(size_cls[1] * 1)) {
10721                     continue;
10722                 }
10723                 
10724                 if(!this.colModel.config[col_index][size_cls[0]]) {
10725                     continue;
10726                 }
10727                 
10728                 if(!rows[i].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10729                     continue;
10730                 }
10731                 
10732                 rows[i].classList.replace(
10733                     "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10734                     "col-"+size_cls[0]+"-"+size_cls[1]
10735                 );
10736             }
10737             
10738             this.colModel.config[col_index][size_cls[0]] = size_cls[1];
10739         }
10740     }
10741 });
10742
10743 // currently only used to find the split on drag.. 
10744 Roo.bootstrap.Table.cellRE = /(?:.*?)x-grid-(?:hd|cell|split)-([\d]+)(?:.*?)/;
10745
10746 /**
10747  * @depricated
10748 */
10749 Roo.bootstrap.Table.AbstractSelectionModel = Roo.grid.AbstractSelectionModel;
10750 Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
10751 /*
10752  * - LGPL
10753  *
10754  * table cell
10755  * 
10756  */
10757
10758 /**
10759  * @class Roo.bootstrap.TableCell
10760  * @extends Roo.bootstrap.Component
10761  * @children Roo.bootstrap.Component
10762  * @parent Roo.bootstrap.TableRow
10763  * Bootstrap TableCell class
10764  * 
10765  * @cfg {String} html cell contain text
10766  * @cfg {String} cls cell class
10767  * @cfg {String} tag cell tag (td|th) default td
10768  * @cfg {String} abbr Specifies an abbreviated version of the content in a cell
10769  * @cfg {String} align Aligns the content in a cell
10770  * @cfg {String} axis Categorizes cells
10771  * @cfg {String} bgcolor Specifies the background color of a cell
10772  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10773  * @cfg {Number} colspan Specifies the number of columns a cell should span
10774  * @cfg {String} headers Specifies one or more header cells a cell is related to
10775  * @cfg {Number} height Sets the height of a cell
10776  * @cfg {String} nowrap Specifies that the content inside a cell should not wrap
10777  * @cfg {Number} rowspan Sets the number of rows a cell should span
10778  * @cfg {String} scope Defines a way to associate header cells and data cells in a table
10779  * @cfg {String} valign Vertical aligns the content in a cell
10780  * @cfg {Number} width Specifies the width of a cell
10781  * 
10782  * @constructor
10783  * Create a new TableCell
10784  * @param {Object} config The config object
10785  */
10786
10787 Roo.bootstrap.TableCell = function(config){
10788     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
10789 };
10790
10791 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
10792     
10793     html: false,
10794     cls: false,
10795     tag: false,
10796     abbr: false,
10797     align: false,
10798     axis: false,
10799     bgcolor: false,
10800     charoff: false,
10801     colspan: false,
10802     headers: false,
10803     height: false,
10804     nowrap: false,
10805     rowspan: false,
10806     scope: false,
10807     valign: false,
10808     width: false,
10809     
10810     
10811     getAutoCreate : function(){
10812         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
10813         
10814         cfg = {
10815             tag: 'td'
10816         };
10817         
10818         if(this.tag){
10819             cfg.tag = this.tag;
10820         }
10821         
10822         if (this.html) {
10823             cfg.html=this.html
10824         }
10825         if (this.cls) {
10826             cfg.cls=this.cls
10827         }
10828         if (this.abbr) {
10829             cfg.abbr=this.abbr
10830         }
10831         if (this.align) {
10832             cfg.align=this.align
10833         }
10834         if (this.axis) {
10835             cfg.axis=this.axis
10836         }
10837         if (this.bgcolor) {
10838             cfg.bgcolor=this.bgcolor
10839         }
10840         if (this.charoff) {
10841             cfg.charoff=this.charoff
10842         }
10843         if (this.colspan) {
10844             cfg.colspan=this.colspan
10845         }
10846         if (this.headers) {
10847             cfg.headers=this.headers
10848         }
10849         if (this.height) {
10850             cfg.height=this.height
10851         }
10852         if (this.nowrap) {
10853             cfg.nowrap=this.nowrap
10854         }
10855         if (this.rowspan) {
10856             cfg.rowspan=this.rowspan
10857         }
10858         if (this.scope) {
10859             cfg.scope=this.scope
10860         }
10861         if (this.valign) {
10862             cfg.valign=this.valign
10863         }
10864         if (this.width) {
10865             cfg.width=this.width
10866         }
10867         
10868         
10869         return cfg;
10870     }
10871    
10872 });
10873
10874  
10875
10876  /*
10877  * - LGPL
10878  *
10879  * table row
10880  * 
10881  */
10882
10883 /**
10884  * @class Roo.bootstrap.TableRow
10885  * @extends Roo.bootstrap.Component
10886  * @children Roo.bootstrap.TableCell
10887  * @parent Roo.bootstrap.TableBody
10888  * Bootstrap TableRow class
10889  * @cfg {String} cls row class
10890  * @cfg {String} align Aligns the content in a table row
10891  * @cfg {String} bgcolor Specifies a background color for a table row
10892  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10893  * @cfg {String} valign Vertical aligns the content in a table row
10894  * 
10895  * @constructor
10896  * Create a new TableRow
10897  * @param {Object} config The config object
10898  */
10899
10900 Roo.bootstrap.TableRow = function(config){
10901     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
10902 };
10903
10904 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
10905     
10906     cls: false,
10907     align: false,
10908     bgcolor: false,
10909     charoff: false,
10910     valign: false,
10911     
10912     getAutoCreate : function(){
10913         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
10914         
10915         cfg = {
10916             tag: 'tr'
10917         };
10918             
10919         if(this.cls){
10920             cfg.cls = this.cls;
10921         }
10922         if(this.align){
10923             cfg.align = this.align;
10924         }
10925         if(this.bgcolor){
10926             cfg.bgcolor = this.bgcolor;
10927         }
10928         if(this.charoff){
10929             cfg.charoff = this.charoff;
10930         }
10931         if(this.valign){
10932             cfg.valign = this.valign;
10933         }
10934         
10935         return cfg;
10936     }
10937    
10938 });
10939
10940  
10941
10942  /*
10943  * - LGPL
10944  *
10945  * table body
10946  * 
10947  */
10948
10949 /**
10950  * @class Roo.bootstrap.TableBody
10951  * @extends Roo.bootstrap.Component
10952  * @children Roo.bootstrap.TableRow
10953  * @parent Roo.bootstrap.Table
10954  * Bootstrap TableBody class
10955  * @cfg {String} cls element class
10956  * @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
10957  * @cfg {String} align Aligns the content inside the element
10958  * @cfg {Number} charoff Sets the number of characters the content inside the element will be aligned from the character specified by the char attribute
10959  * @cfg {String} valign Vertical aligns the content inside the <tbody> element
10960  * 
10961  * @constructor
10962  * Create a new TableBody
10963  * @param {Object} config The config object
10964  */
10965
10966 Roo.bootstrap.TableBody = function(config){
10967     Roo.bootstrap.TableBody.superclass.constructor.call(this, config);
10968 };
10969
10970 Roo.extend(Roo.bootstrap.TableBody, Roo.bootstrap.Component,  {
10971     
10972     cls: false,
10973     tag: false,
10974     align: false,
10975     charoff: false,
10976     valign: false,
10977     
10978     getAutoCreate : function(){
10979         var cfg = Roo.apply({}, Roo.bootstrap.TableBody.superclass.getAutoCreate.call(this));
10980         
10981         cfg = {
10982             tag: 'tbody'
10983         };
10984             
10985         if (this.cls) {
10986             cfg.cls=this.cls
10987         }
10988         if(this.tag){
10989             cfg.tag = this.tag;
10990         }
10991         
10992         if(this.align){
10993             cfg.align = this.align;
10994         }
10995         if(this.charoff){
10996             cfg.charoff = this.charoff;
10997         }
10998         if(this.valign){
10999             cfg.valign = this.valign;
11000         }
11001         
11002         return cfg;
11003     }
11004     
11005     
11006 //    initEvents : function()
11007 //    {
11008 //        
11009 //        if(!this.store){
11010 //            return;
11011 //        }
11012 //        
11013 //        this.store = Roo.factory(this.store, Roo.data);
11014 //        this.store.on('load', this.onLoad, this);
11015 //        
11016 //        this.store.load();
11017 //        
11018 //    },
11019 //    
11020 //    onLoad: function () 
11021 //    {   
11022 //        this.fireEvent('load', this);
11023 //    }
11024 //    
11025 //   
11026 });
11027
11028  
11029
11030  /*
11031  * Based on:
11032  * Ext JS Library 1.1.1
11033  * Copyright(c) 2006-2007, Ext JS, LLC.
11034  *
11035  * Originally Released Under LGPL - original licence link has changed is not relivant.
11036  *
11037  * Fork - LGPL
11038  * <script type="text/javascript">
11039  */
11040
11041 // as we use this in bootstrap.
11042 Roo.namespace('Roo.form');
11043  /**
11044  * @class Roo.form.Action
11045  * Internal Class used to handle form actions
11046  * @constructor
11047  * @param {Roo.form.BasicForm} el The form element or its id
11048  * @param {Object} config Configuration options
11049  */
11050
11051  
11052  
11053 // define the action interface
11054 Roo.form.Action = function(form, options){
11055     this.form = form;
11056     this.options = options || {};
11057 };
11058 /**
11059  * Client Validation Failed
11060  * @const 
11061  */
11062 Roo.form.Action.CLIENT_INVALID = 'client';
11063 /**
11064  * Server Validation Failed
11065  * @const 
11066  */
11067 Roo.form.Action.SERVER_INVALID = 'server';
11068  /**
11069  * Connect to Server Failed
11070  * @const 
11071  */
11072 Roo.form.Action.CONNECT_FAILURE = 'connect';
11073 /**
11074  * Reading Data from Server Failed
11075  * @const 
11076  */
11077 Roo.form.Action.LOAD_FAILURE = 'load';
11078
11079 Roo.form.Action.prototype = {
11080     type : 'default',
11081     failureType : undefined,
11082     response : undefined,
11083     result : undefined,
11084
11085     // interface method
11086     run : function(options){
11087
11088     },
11089
11090     // interface method
11091     success : function(response){
11092
11093     },
11094
11095     // interface method
11096     handleResponse : function(response){
11097
11098     },
11099
11100     // default connection failure
11101     failure : function(response){
11102         
11103         this.response = response;
11104         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11105         this.form.afterAction(this, false);
11106     },
11107
11108     processResponse : function(response){
11109         this.response = response;
11110         if(!response.responseText){
11111             return true;
11112         }
11113         this.result = this.handleResponse(response);
11114         return this.result;
11115     },
11116
11117     // utility functions used internally
11118     getUrl : function(appendParams){
11119         var url = this.options.url || this.form.url || this.form.el.dom.action;
11120         if(appendParams){
11121             var p = this.getParams();
11122             if(p){
11123                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11124             }
11125         }
11126         return url;
11127     },
11128
11129     getMethod : function(){
11130         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
11131     },
11132
11133     getParams : function(){
11134         var bp = this.form.baseParams;
11135         var p = this.options.params;
11136         if(p){
11137             if(typeof p == "object"){
11138                 p = Roo.urlEncode(Roo.applyIf(p, bp));
11139             }else if(typeof p == 'string' && bp){
11140                 p += '&' + Roo.urlEncode(bp);
11141             }
11142         }else if(bp){
11143             p = Roo.urlEncode(bp);
11144         }
11145         return p;
11146     },
11147
11148     createCallback : function(){
11149         return {
11150             success: this.success,
11151             failure: this.failure,
11152             scope: this,
11153             timeout: (this.form.timeout*1000),
11154             upload: this.form.fileUpload ? this.success : undefined
11155         };
11156     }
11157 };
11158
11159 Roo.form.Action.Submit = function(form, options){
11160     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
11161 };
11162
11163 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
11164     type : 'submit',
11165
11166     haveProgress : false,
11167     uploadComplete : false,
11168     
11169     // uploadProgress indicator.
11170     uploadProgress : function()
11171     {
11172         if (!this.form.progressUrl) {
11173             return;
11174         }
11175         
11176         if (!this.haveProgress) {
11177             Roo.MessageBox.progress("Uploading", "Uploading");
11178         }
11179         if (this.uploadComplete) {
11180            Roo.MessageBox.hide();
11181            return;
11182         }
11183         
11184         this.haveProgress = true;
11185    
11186         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
11187         
11188         var c = new Roo.data.Connection();
11189         c.request({
11190             url : this.form.progressUrl,
11191             params: {
11192                 id : uid
11193             },
11194             method: 'GET',
11195             success : function(req){
11196                //console.log(data);
11197                 var rdata = false;
11198                 var edata;
11199                 try  {
11200                    rdata = Roo.decode(req.responseText)
11201                 } catch (e) {
11202                     Roo.log("Invalid data from server..");
11203                     Roo.log(edata);
11204                     return;
11205                 }
11206                 if (!rdata || !rdata.success) {
11207                     Roo.log(rdata);
11208                     Roo.MessageBox.alert(Roo.encode(rdata));
11209                     return;
11210                 }
11211                 var data = rdata.data;
11212                 
11213                 if (this.uploadComplete) {
11214                    Roo.MessageBox.hide();
11215                    return;
11216                 }
11217                    
11218                 if (data){
11219                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
11220                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
11221                     );
11222                 }
11223                 this.uploadProgress.defer(2000,this);
11224             },
11225        
11226             failure: function(data) {
11227                 Roo.log('progress url failed ');
11228                 Roo.log(data);
11229             },
11230             scope : this
11231         });
11232            
11233     },
11234     
11235     
11236     run : function()
11237     {
11238         // run get Values on the form, so it syncs any secondary forms.
11239         this.form.getValues();
11240         
11241         var o = this.options;
11242         var method = this.getMethod();
11243         var isPost = method == 'POST';
11244         if(o.clientValidation === false || this.form.isValid()){
11245             
11246             if (this.form.progressUrl) {
11247                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
11248                     (new Date() * 1) + '' + Math.random());
11249                     
11250             } 
11251             
11252             
11253             Roo.Ajax.request(Roo.apply(this.createCallback(), {
11254                 form:this.form.el.dom,
11255                 url:this.getUrl(!isPost),
11256                 method: method,
11257                 params:isPost ? this.getParams() : null,
11258                 isUpload: this.form.fileUpload,
11259                 formData : this.form.formData
11260             }));
11261             
11262             this.uploadProgress();
11263
11264         }else if (o.clientValidation !== false){ // client validation failed
11265             this.failureType = Roo.form.Action.CLIENT_INVALID;
11266             this.form.afterAction(this, false);
11267         }
11268     },
11269
11270     success : function(response)
11271     {
11272         this.uploadComplete= true;
11273         if (this.haveProgress) {
11274             Roo.MessageBox.hide();
11275         }
11276         
11277         
11278         var result = this.processResponse(response);
11279         if(result === true || result.success){
11280             this.form.afterAction(this, true);
11281             return;
11282         }
11283         if(result.errors){
11284             this.form.markInvalid(result.errors);
11285             this.failureType = Roo.form.Action.SERVER_INVALID;
11286         }
11287         this.form.afterAction(this, false);
11288     },
11289     failure : function(response)
11290     {
11291         this.uploadComplete= true;
11292         if (this.haveProgress) {
11293             Roo.MessageBox.hide();
11294         }
11295         
11296         this.response = response;
11297         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11298         this.form.afterAction(this, false);
11299     },
11300     
11301     handleResponse : function(response){
11302         if(this.form.errorReader){
11303             var rs = this.form.errorReader.read(response);
11304             var errors = [];
11305             if(rs.records){
11306                 for(var i = 0, len = rs.records.length; i < len; i++) {
11307                     var r = rs.records[i];
11308                     errors[i] = r.data;
11309                 }
11310             }
11311             if(errors.length < 1){
11312                 errors = null;
11313             }
11314             return {
11315                 success : rs.success,
11316                 errors : errors
11317             };
11318         }
11319         var ret = false;
11320         try {
11321             var rt = response.responseText;
11322             if (rt.match(/^\<!--\[CDATA\[/)) {
11323                 rt = rt.replace(/^\<!--\[CDATA\[/,'');
11324                 rt = rt.replace(/\]\]--\>$/,'');
11325             }
11326             
11327             ret = Roo.decode(rt);
11328         } catch (e) {
11329             ret = {
11330                 success: false,
11331                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
11332                 errors : []
11333             };
11334         }
11335         return ret;
11336         
11337     }
11338 });
11339
11340
11341 Roo.form.Action.Load = function(form, options){
11342     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
11343     this.reader = this.form.reader;
11344 };
11345
11346 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
11347     type : 'load',
11348
11349     run : function(){
11350         
11351         Roo.Ajax.request(Roo.apply(
11352                 this.createCallback(), {
11353                     method:this.getMethod(),
11354                     url:this.getUrl(false),
11355                     params:this.getParams()
11356         }));
11357     },
11358
11359     success : function(response){
11360         
11361         var result = this.processResponse(response);
11362         if(result === true || !result.success || !result.data){
11363             this.failureType = Roo.form.Action.LOAD_FAILURE;
11364             this.form.afterAction(this, false);
11365             return;
11366         }
11367         this.form.clearInvalid();
11368         this.form.setValues(result.data);
11369         this.form.afterAction(this, true);
11370     },
11371
11372     handleResponse : function(response){
11373         if(this.form.reader){
11374             var rs = this.form.reader.read(response);
11375             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
11376             return {
11377                 success : rs.success,
11378                 data : data
11379             };
11380         }
11381         return Roo.decode(response.responseText);
11382     }
11383 });
11384
11385 Roo.form.Action.ACTION_TYPES = {
11386     'load' : Roo.form.Action.Load,
11387     'submit' : Roo.form.Action.Submit
11388 };/*
11389  * - LGPL
11390  *
11391  * form
11392  *
11393  */
11394
11395 /**
11396  * @class Roo.bootstrap.form.Form
11397  * @extends Roo.bootstrap.Component
11398  * @children Roo.bootstrap.Component
11399  * Bootstrap Form class
11400  * @cfg {String} method  GET | POST (default POST)
11401  * @cfg {String} labelAlign top | left (default top)
11402  * @cfg {String} align left  | right - for navbars
11403  * @cfg {Boolean} loadMask load mask when submit (default true)
11404
11405  *
11406  * @constructor
11407  * Create a new Form
11408  * @param {Object} config The config object
11409  */
11410
11411
11412 Roo.bootstrap.form.Form = function(config){
11413     
11414     Roo.bootstrap.form.Form.superclass.constructor.call(this, config);
11415     
11416     Roo.bootstrap.form.Form.popover.apply();
11417     
11418     this.addEvents({
11419         /**
11420          * @event clientvalidation
11421          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
11422          * @param {Form} this
11423          * @param {Boolean} valid true if the form has passed client-side validation
11424          */
11425         clientvalidation: true,
11426         /**
11427          * @event beforeaction
11428          * Fires before any action is performed. Return false to cancel the action.
11429          * @param {Form} this
11430          * @param {Action} action The action to be performed
11431          */
11432         beforeaction: true,
11433         /**
11434          * @event actionfailed
11435          * Fires when an action fails.
11436          * @param {Form} this
11437          * @param {Action} action The action that failed
11438          */
11439         actionfailed : true,
11440         /**
11441          * @event actioncomplete
11442          * Fires when an action is completed.
11443          * @param {Form} this
11444          * @param {Action} action The action that completed
11445          */
11446         actioncomplete : true
11447     });
11448 };
11449
11450 Roo.extend(Roo.bootstrap.form.Form, Roo.bootstrap.Component,  {
11451
11452      /**
11453      * @cfg {String} method
11454      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
11455      */
11456     method : 'POST',
11457     /**
11458      * @cfg {String} url
11459      * The URL to use for form actions if one isn't supplied in the action options.
11460      */
11461     /**
11462      * @cfg {Boolean} fileUpload
11463      * Set to true if this form is a file upload.
11464      */
11465
11466     /**
11467      * @cfg {Object} baseParams
11468      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
11469      */
11470
11471     /**
11472      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
11473      */
11474     timeout: 30,
11475     /**
11476      * @cfg {Sting} align (left|right) for navbar forms
11477      */
11478     align : 'left',
11479
11480     // private
11481     activeAction : null,
11482
11483     /**
11484      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
11485      * element by passing it or its id or mask the form itself by passing in true.
11486      * @type Mixed
11487      */
11488     waitMsgTarget : false,
11489
11490     loadMask : true,
11491     
11492     /**
11493      * @cfg {Boolean} errorMask (true|false) default false
11494      */
11495     errorMask : false,
11496     
11497     /**
11498      * @cfg {Number} maskOffset Default 100
11499      */
11500     maskOffset : 100,
11501     
11502     /**
11503      * @cfg {Boolean} maskBody
11504      */
11505     maskBody : false,
11506
11507     getAutoCreate : function(){
11508
11509         var cfg = {
11510             tag: 'form',
11511             method : this.method || 'POST',
11512             id : this.id || Roo.id(),
11513             cls : ''
11514         };
11515         if (this.parent().xtype.match(/^Nav/)) {
11516             cfg.cls = 'navbar-form form-inline navbar-' + this.align;
11517
11518         }
11519
11520         if (this.labelAlign == 'left' ) {
11521             cfg.cls += ' form-horizontal';
11522         }
11523
11524
11525         return cfg;
11526     },
11527     initEvents : function()
11528     {
11529         this.el.on('submit', this.onSubmit, this);
11530         // this was added as random key presses on the form where triggering form submit.
11531         this.el.on('keypress', function(e) {
11532             if (e.getCharCode() != 13) {
11533                 return true;
11534             }
11535             // we might need to allow it for textareas.. and some other items.
11536             // check e.getTarget().
11537
11538             if(e.getTarget().nodeName.toLowerCase() === 'textarea'){
11539                 return true;
11540             }
11541
11542             Roo.log("keypress blocked");
11543
11544             e.preventDefault();
11545             return false;
11546         });
11547         
11548     },
11549     // private
11550     onSubmit : function(e){
11551         e.stopEvent();
11552     },
11553
11554      /**
11555      * Returns true if client-side validation on the form is successful.
11556      * @return Boolean
11557      */
11558     isValid : function(){
11559         var items = this.getItems();
11560         var valid = true;
11561         var target = false;
11562         
11563         items.each(function(f){
11564             
11565             if(f.validate()){
11566                 return;
11567             }
11568             
11569             Roo.log('invalid field: ' + f.name);
11570             
11571             valid = false;
11572
11573             if(!target && f.el.isVisible(true)){
11574                 target = f;
11575             }
11576            
11577         });
11578         
11579         if(this.errorMask && !valid){
11580             Roo.bootstrap.form.Form.popover.mask(this, target);
11581         }
11582         
11583         return valid;
11584     },
11585     
11586     /**
11587      * Returns true if any fields in this form have changed since their original load.
11588      * @return Boolean
11589      */
11590     isDirty : function(){
11591         var dirty = false;
11592         var items = this.getItems();
11593         items.each(function(f){
11594            if(f.isDirty()){
11595                dirty = true;
11596                return false;
11597            }
11598            return true;
11599         });
11600         return dirty;
11601     },
11602      /**
11603      * Performs a predefined action (submit or load) or custom actions you define on this form.
11604      * @param {String} actionName The name of the action type
11605      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
11606      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
11607      * accept other config options):
11608      * <pre>
11609 Property          Type             Description
11610 ----------------  ---------------  ----------------------------------------------------------------------------------
11611 url               String           The url for the action (defaults to the form's url)
11612 method            String           The form method to use (defaults to the form's method, or POST if not defined)
11613 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
11614 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
11615                                    validate the form on the client (defaults to false)
11616      * </pre>
11617      * @return {BasicForm} this
11618      */
11619     doAction : function(action, options){
11620         if(typeof action == 'string'){
11621             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
11622         }
11623         if(this.fireEvent('beforeaction', this, action) !== false){
11624             this.beforeAction(action);
11625             action.run.defer(100, action);
11626         }
11627         return this;
11628     },
11629
11630     // private
11631     beforeAction : function(action){
11632         var o = action.options;
11633         
11634         if(this.loadMask){
11635             
11636             if(this.maskBody){
11637                 Roo.get(document.body).mask(o.waitMsg || "Sending", 'x-mask-loading')
11638             } else {
11639                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11640             }
11641         }
11642         // not really supported yet.. ??
11643
11644         //if(this.waitMsgTarget === true){
11645         //  this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11646         //}else if(this.waitMsgTarget){
11647         //    this.waitMsgTarget = Roo.get(this.waitMsgTarget);
11648         //    this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
11649         //}else {
11650         //    Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
11651        // }
11652
11653     },
11654
11655     // private
11656     afterAction : function(action, success){
11657         this.activeAction = null;
11658         var o = action.options;
11659
11660         if(this.loadMask){
11661             
11662             if(this.maskBody){
11663                 Roo.get(document.body).unmask();
11664             } else {
11665                 this.el.unmask();
11666             }
11667         }
11668         
11669         //if(this.waitMsgTarget === true){
11670 //            this.el.unmask();
11671         //}else if(this.waitMsgTarget){
11672         //    this.waitMsgTarget.unmask();
11673         //}else{
11674         //    Roo.MessageBox.updateProgress(1);
11675         //    Roo.MessageBox.hide();
11676        // }
11677         //
11678         if(success){
11679             if(o.reset){
11680                 this.reset();
11681             }
11682             Roo.callback(o.success, o.scope, [this, action]);
11683             this.fireEvent('actioncomplete', this, action);
11684
11685         }else{
11686
11687             // failure condition..
11688             // we have a scenario where updates need confirming.
11689             // eg. if a locking scenario exists..
11690             // we look for { errors : { needs_confirm : true }} in the response.
11691             if (
11692                 (typeof(action.result) != 'undefined')  &&
11693                 (typeof(action.result.errors) != 'undefined')  &&
11694                 (typeof(action.result.errors.needs_confirm) != 'undefined')
11695            ){
11696                 var _t = this;
11697                 Roo.log("not supported yet");
11698                  /*
11699
11700                 Roo.MessageBox.confirm(
11701                     "Change requires confirmation",
11702                     action.result.errorMsg,
11703                     function(r) {
11704                         if (r != 'yes') {
11705                             return;
11706                         }
11707                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
11708                     }
11709
11710                 );
11711                 */
11712
11713
11714                 return;
11715             }
11716
11717             Roo.callback(o.failure, o.scope, [this, action]);
11718             // show an error message if no failed handler is set..
11719             if (!this.hasListener('actionfailed')) {
11720                 Roo.log("need to add dialog support");
11721                 /*
11722                 Roo.MessageBox.alert("Error",
11723                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
11724                         action.result.errorMsg :
11725                         "Saving Failed, please check your entries or try again"
11726                 );
11727                 */
11728             }
11729
11730             this.fireEvent('actionfailed', this, action);
11731         }
11732
11733     },
11734     /**
11735      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
11736      * @param {String} id The value to search for
11737      * @return Field
11738      */
11739     findField : function(id){
11740         var items = this.getItems();
11741         var field = items.get(id);
11742         if(!field){
11743              items.each(function(f){
11744                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
11745                     field = f;
11746                     return false;
11747                 }
11748                 return true;
11749             });
11750         }
11751         return field || null;
11752     },
11753      /**
11754      * Mark fields in this form invalid in bulk.
11755      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
11756      * @return {BasicForm} this
11757      */
11758     markInvalid : function(errors){
11759         if(errors instanceof Array){
11760             for(var i = 0, len = errors.length; i < len; i++){
11761                 var fieldError = errors[i];
11762                 var f = this.findField(fieldError.id);
11763                 if(f){
11764                     f.markInvalid(fieldError.msg);
11765                 }
11766             }
11767         }else{
11768             var field, id;
11769             for(id in errors){
11770                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
11771                     field.markInvalid(errors[id]);
11772                 }
11773             }
11774         }
11775         //Roo.each(this.childForms || [], function (f) {
11776         //    f.markInvalid(errors);
11777         //});
11778
11779         return this;
11780     },
11781
11782     /**
11783      * Set values for fields in this form in bulk.
11784      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
11785      * @return {BasicForm} this
11786      */
11787     setValues : function(values){
11788         if(values instanceof Array){ // array of objects
11789             for(var i = 0, len = values.length; i < len; i++){
11790                 var v = values[i];
11791                 var f = this.findField(v.id);
11792                 if(f){
11793                     f.setValue(v.value);
11794                     if(this.trackResetOnLoad){
11795                         f.originalValue = f.getValue();
11796                     }
11797                 }
11798             }
11799         }else{ // object hash
11800             var field, id;
11801             for(id in values){
11802                 if(typeof values[id] != 'function' && (field = this.findField(id))){
11803
11804                     if (field.setFromData &&
11805                         field.valueField &&
11806                         field.displayField &&
11807                         // combos' with local stores can
11808                         // be queried via setValue()
11809                         // to set their value..
11810                         (field.store && !field.store.isLocal)
11811                         ) {
11812                         // it's a combo
11813                         var sd = { };
11814                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
11815                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
11816                         field.setFromData(sd);
11817
11818                     } else if(field.setFromData && (field.store && !field.store.isLocal)) {
11819                         
11820                         field.setFromData(values);
11821                         
11822                     } else {
11823                         field.setValue(values[id]);
11824                     }
11825
11826
11827                     if(this.trackResetOnLoad){
11828                         field.originalValue = field.getValue();
11829                     }
11830                 }
11831             }
11832         }
11833
11834         //Roo.each(this.childForms || [], function (f) {
11835         //    f.setValues(values);
11836         //});
11837
11838         return this;
11839     },
11840
11841     /**
11842      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
11843      * they are returned as an array.
11844      * @param {Boolean} asString
11845      * @return {Object}
11846      */
11847     getValues : function(asString){
11848         //if (this.childForms) {
11849             // copy values from the child forms
11850         //    Roo.each(this.childForms, function (f) {
11851         //        this.setValues(f.getValues());
11852         //    }, this);
11853         //}
11854
11855
11856
11857         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
11858         if(asString === true){
11859             return fs;
11860         }
11861         return Roo.urlDecode(fs);
11862     },
11863
11864     /**
11865      * Returns the fields in this form as an object with key/value pairs.
11866      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
11867      * @return {Object}
11868      */
11869     getFieldValues : function(with_hidden)
11870     {
11871         var items = this.getItems();
11872         var ret = {};
11873         items.each(function(f){
11874             
11875             if (!f.getName()) {
11876                 return;
11877             }
11878             
11879             var v = f.getValue();
11880             
11881             if (f.inputType =='radio') {
11882                 if (typeof(ret[f.getName()]) == 'undefined') {
11883                     ret[f.getName()] = ''; // empty..
11884                 }
11885
11886                 if (!f.el.dom.checked) {
11887                     return;
11888
11889                 }
11890                 v = f.el.dom.value;
11891
11892             }
11893             
11894             if(f.xtype == 'MoneyField'){
11895                 ret[f.currencyName] = f.getCurrency();
11896             }
11897
11898             // not sure if this supported any more..
11899             if ((typeof(v) == 'object') && f.getRawValue) {
11900                 v = f.getRawValue() ; // dates..
11901             }
11902             // combo boxes where name != hiddenName...
11903             if (f.name !== false && f.name != '' && f.name != f.getName()) {
11904                 ret[f.name] = f.getRawValue();
11905             }
11906             ret[f.getName()] = v;
11907         });
11908
11909         return ret;
11910     },
11911
11912     /**
11913      * Clears all invalid messages in this form.
11914      * @return {BasicForm} this
11915      */
11916     clearInvalid : function(){
11917         var items = this.getItems();
11918
11919         items.each(function(f){
11920            f.clearInvalid();
11921         });
11922
11923         return this;
11924     },
11925
11926     /**
11927      * Resets this form.
11928      * @return {BasicForm} this
11929      */
11930     reset : function(){
11931         var items = this.getItems();
11932         items.each(function(f){
11933             f.reset();
11934         });
11935
11936         Roo.each(this.childForms || [], function (f) {
11937             f.reset();
11938         });
11939
11940
11941         return this;
11942     },
11943     
11944     getItems : function()
11945     {
11946         var r=new Roo.util.MixedCollection(false, function(o){
11947             return o.id || (o.id = Roo.id());
11948         });
11949         var iter = function(el) {
11950             if (el.inputEl) {
11951                 r.add(el);
11952             }
11953             if (!el.items) {
11954                 return;
11955             }
11956             Roo.each(el.items,function(e) {
11957                 iter(e);
11958             });
11959         };
11960
11961         iter(this);
11962         return r;
11963     },
11964     
11965     hideFields : function(items)
11966     {
11967         Roo.each(items, function(i){
11968             
11969             var f = this.findField(i);
11970             
11971             if(!f){
11972                 return;
11973             }
11974             
11975             f.hide();
11976             
11977         }, this);
11978     },
11979     
11980     showFields : function(items)
11981     {
11982         Roo.each(items, function(i){
11983             
11984             var f = this.findField(i);
11985             
11986             if(!f){
11987                 return;
11988             }
11989             
11990             f.show();
11991             
11992         }, this);
11993     }
11994
11995 });
11996
11997 Roo.apply(Roo.bootstrap.form.Form, {
11998     
11999     popover : {
12000         
12001         padding : 5,
12002         
12003         isApplied : false,
12004         
12005         isMasked : false,
12006         
12007         form : false,
12008         
12009         target : false,
12010         
12011         toolTip : false,
12012         
12013         intervalID : false,
12014         
12015         maskEl : false,
12016         
12017         apply : function()
12018         {
12019             if(this.isApplied){
12020                 return;
12021             }
12022             
12023             this.maskEl = {
12024                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
12025                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
12026                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
12027                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
12028             };
12029             
12030             this.maskEl.top.enableDisplayMode("block");
12031             this.maskEl.left.enableDisplayMode("block");
12032             this.maskEl.bottom.enableDisplayMode("block");
12033             this.maskEl.right.enableDisplayMode("block");
12034             
12035             this.toolTip = new Roo.bootstrap.Tooltip({
12036                 cls : 'roo-form-error-popover',
12037                 alignment : {
12038                     'left' : ['r-l', [-2,0], 'right'],
12039                     'right' : ['l-r', [2,0], 'left'],
12040                     'bottom' : ['tl-bl', [0,2], 'top'],
12041                     'top' : [ 'bl-tl', [0,-2], 'bottom']
12042                 }
12043             });
12044             
12045             this.toolTip.render(Roo.get(document.body));
12046
12047             this.toolTip.el.enableDisplayMode("block");
12048             
12049             Roo.get(document.body).on('click', function(){
12050                 this.unmask();
12051             }, this);
12052             
12053             Roo.get(document.body).on('touchstart', function(){
12054                 this.unmask();
12055             }, this);
12056             
12057             this.isApplied = true
12058         },
12059         
12060         mask : function(form, target)
12061         {
12062             this.form = form;
12063             
12064             this.target = target;
12065             
12066             if(!this.form.errorMask || !target.el){
12067                 return;
12068             }
12069             
12070             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
12071             
12072             Roo.log(scrollable);
12073             
12074             var ot = this.target.el.calcOffsetsTo(scrollable);
12075             
12076             var scrollTo = ot[1] - this.form.maskOffset;
12077             
12078             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
12079             
12080             scrollable.scrollTo('top', scrollTo);
12081             
12082             var box = this.target.el.getBox();
12083             Roo.log(box);
12084             var zIndex = Roo.bootstrap.Modal.zIndex++;
12085
12086             
12087             this.maskEl.top.setStyle('position', 'absolute');
12088             this.maskEl.top.setStyle('z-index', zIndex);
12089             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
12090             this.maskEl.top.setLeft(0);
12091             this.maskEl.top.setTop(0);
12092             this.maskEl.top.show();
12093             
12094             this.maskEl.left.setStyle('position', 'absolute');
12095             this.maskEl.left.setStyle('z-index', zIndex);
12096             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
12097             this.maskEl.left.setLeft(0);
12098             this.maskEl.left.setTop(box.y - this.padding);
12099             this.maskEl.left.show();
12100
12101             this.maskEl.bottom.setStyle('position', 'absolute');
12102             this.maskEl.bottom.setStyle('z-index', zIndex);
12103             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
12104             this.maskEl.bottom.setLeft(0);
12105             this.maskEl.bottom.setTop(box.bottom + this.padding);
12106             this.maskEl.bottom.show();
12107
12108             this.maskEl.right.setStyle('position', 'absolute');
12109             this.maskEl.right.setStyle('z-index', zIndex);
12110             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
12111             this.maskEl.right.setLeft(box.right + this.padding);
12112             this.maskEl.right.setTop(box.y - this.padding);
12113             this.maskEl.right.show();
12114
12115             this.toolTip.bindEl = this.target.el;
12116
12117             this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
12118
12119             var tip = this.target.blankText;
12120
12121             if(this.target.getValue() !== '' ) {
12122                 
12123                 if (this.target.invalidText.length) {
12124                     tip = this.target.invalidText;
12125                 } else if (this.target.regexText.length){
12126                     tip = this.target.regexText;
12127                 }
12128             }
12129
12130             this.toolTip.show(tip);
12131
12132             this.intervalID = window.setInterval(function() {
12133                 Roo.bootstrap.form.Form.popover.unmask();
12134             }, 10000);
12135
12136             window.onwheel = function(){ return false;};
12137             
12138             (function(){ this.isMasked = true; }).defer(500, this);
12139             
12140         },
12141         
12142         unmask : function()
12143         {
12144             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
12145                 return;
12146             }
12147             
12148             this.maskEl.top.setStyle('position', 'absolute');
12149             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
12150             this.maskEl.top.hide();
12151
12152             this.maskEl.left.setStyle('position', 'absolute');
12153             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
12154             this.maskEl.left.hide();
12155
12156             this.maskEl.bottom.setStyle('position', 'absolute');
12157             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
12158             this.maskEl.bottom.hide();
12159
12160             this.maskEl.right.setStyle('position', 'absolute');
12161             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
12162             this.maskEl.right.hide();
12163             
12164             this.toolTip.hide();
12165             
12166             this.toolTip.el.hide();
12167             
12168             window.onwheel = function(){ return true;};
12169             
12170             if(this.intervalID){
12171                 window.clearInterval(this.intervalID);
12172                 this.intervalID = false;
12173             }
12174             
12175             this.isMasked = false;
12176             
12177         }
12178         
12179     }
12180     
12181 });
12182
12183 /*
12184  * Based on:
12185  * Ext JS Library 1.1.1
12186  * Copyright(c) 2006-2007, Ext JS, LLC.
12187  *
12188  * Originally Released Under LGPL - original licence link has changed is not relivant.
12189  *
12190  * Fork - LGPL
12191  * <script type="text/javascript">
12192  */
12193 /**
12194  * @class Roo.form.VTypes
12195  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
12196  * @static
12197  */
12198 Roo.form.VTypes = function(){
12199     // closure these in so they are only created once.
12200     var alpha = /^[a-zA-Z_]+$/;
12201     var alphanum = /^[a-zA-Z0-9_]+$/;
12202     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
12203     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
12204
12205     // All these messages and functions are configurable
12206     return {
12207         /**
12208          * The function used to validate email addresses
12209          * @param {String} value The email address
12210          */
12211         email : function(v){
12212             return email.test(v);
12213         },
12214         /**
12215          * The error text to display when the email validation function returns false
12216          * @type String
12217          */
12218         emailText : 'This field should be an e-mail address in the format "user@domain.com"',
12219         /**
12220          * The keystroke filter mask to be applied on email input
12221          * @type RegExp
12222          */
12223         emailMask : /[a-z0-9_\.\-@]/i,
12224
12225         /**
12226          * The function used to validate URLs
12227          * @param {String} value The URL
12228          */
12229         url : function(v){
12230             return url.test(v);
12231         },
12232         /**
12233          * The error text to display when the url validation function returns false
12234          * @type String
12235          */
12236         urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
12237         
12238         /**
12239          * The function used to validate alpha values
12240          * @param {String} value The value
12241          */
12242         alpha : function(v){
12243             return alpha.test(v);
12244         },
12245         /**
12246          * The error text to display when the alpha validation function returns false
12247          * @type String
12248          */
12249         alphaText : 'This field should only contain letters and _',
12250         /**
12251          * The keystroke filter mask to be applied on alpha input
12252          * @type RegExp
12253          */
12254         alphaMask : /[a-z_]/i,
12255
12256         /**
12257          * The function used to validate alphanumeric values
12258          * @param {String} value The value
12259          */
12260         alphanum : function(v){
12261             return alphanum.test(v);
12262         },
12263         /**
12264          * The error text to display when the alphanumeric validation function returns false
12265          * @type String
12266          */
12267         alphanumText : 'This field should only contain letters, numbers and _',
12268         /**
12269          * The keystroke filter mask to be applied on alphanumeric input
12270          * @type RegExp
12271          */
12272         alphanumMask : /[a-z0-9_]/i
12273     };
12274 }();/*
12275  * - LGPL
12276  *
12277  * Input
12278  * 
12279  */
12280
12281 /**
12282  * @class Roo.bootstrap.form.Input
12283  * @extends Roo.bootstrap.Component
12284  * Bootstrap Input class
12285  * @cfg {Boolean} disabled is it disabled
12286  * @cfg {String} inputType (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text)  
12287  * @cfg {String} name name of the input
12288  * @cfg {string} fieldLabel - the label associated
12289  * @cfg {string} placeholder - placeholder to put in text.
12290  * @cfg {string} before - input group add on before
12291  * @cfg {string} after - input group add on after
12292  * @cfg {string} size - (lg|sm) or leave empty..
12293  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
12294  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
12295  * @cfg {Number} md colspan out of 12 for computer-sized screens
12296  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
12297  * @cfg {string} value default value of the input
12298  * @cfg {Number} labelWidth set the width of label 
12299  * @cfg {Number} labellg set the width of label (1-12)
12300  * @cfg {Number} labelmd set the width of label (1-12)
12301  * @cfg {Number} labelsm set the width of label (1-12)
12302  * @cfg {Number} labelxs set the width of label (1-12)
12303  * @cfg {String} labelAlign (top|left)
12304  * @cfg {Boolean} readOnly Specifies that the field should be read-only
12305  * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
12306  * @cfg {String} indicatorpos (left|right) default left
12307  * @cfg {String} capture (user|camera) use for file input only. (default empty)
12308  * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
12309  * @cfg {Boolean} preventMark Do not show tick or cross if error/success
12310  * @cfg {Roo.bootstrap.Button} before Button to show before
12311  * @cfg {Roo.bootstrap.Button} afterButton to show before
12312  * @cfg {String} align (left|center|right) Default left
12313  * @cfg {Boolean} forceFeedback (true|false) Default false
12314  * 
12315  * @constructor
12316  * Create a new Input
12317  * @param {Object} config The config object
12318  */
12319
12320 Roo.bootstrap.form.Input = function(config){
12321     
12322     Roo.bootstrap.form.Input.superclass.constructor.call(this, config);
12323     
12324     this.addEvents({
12325         /**
12326          * @event focus
12327          * Fires when this field receives input focus.
12328          * @param {Roo.form.Field} this
12329          */
12330         focus : true,
12331         /**
12332          * @event blur
12333          * Fires when this field loses input focus.
12334          * @param {Roo.form.Field} this
12335          */
12336         blur : true,
12337         /**
12338          * @event specialkey
12339          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
12340          * {@link Roo.EventObject#getKey} to determine which key was pressed.
12341          * @param {Roo.form.Field} this
12342          * @param {Roo.EventObject} e The event object
12343          */
12344         specialkey : true,
12345         /**
12346          * @event change
12347          * Fires just before the field blurs if the field value has changed.
12348          * @param {Roo.form.Field} this
12349          * @param {Mixed} newValue The new value
12350          * @param {Mixed} oldValue The original value
12351          */
12352         change : true,
12353         /**
12354          * @event invalid
12355          * Fires after the field has been marked as invalid.
12356          * @param {Roo.form.Field} this
12357          * @param {String} msg The validation message
12358          */
12359         invalid : true,
12360         /**
12361          * @event valid
12362          * Fires after the field has been validated with no errors.
12363          * @param {Roo.form.Field} this
12364          */
12365         valid : true,
12366          /**
12367          * @event keyup
12368          * Fires after the key up
12369          * @param {Roo.form.Field} this
12370          * @param {Roo.EventObject}  e The event Object
12371          */
12372         keyup : true,
12373         /**
12374          * @event paste
12375          * Fires after the user pastes into input
12376          * @param {Roo.form.Field} this
12377          * @param {Roo.EventObject}  e The event Object
12378          */
12379         paste : true
12380     });
12381 };
12382
12383 Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component,  {
12384      /**
12385      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
12386       automatic validation (defaults to "keyup").
12387      */
12388     validationEvent : "keyup",
12389      /**
12390      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
12391      */
12392     validateOnBlur : true,
12393     /**
12394      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
12395      */
12396     validationDelay : 250,
12397      /**
12398      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
12399      */
12400     focusClass : "x-form-focus",  // not needed???
12401     
12402        
12403     /**
12404      * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12405      */
12406     invalidClass : "has-warning",
12407     
12408     /**
12409      * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12410      */
12411     validClass : "has-success",
12412     
12413     /**
12414      * @cfg {Boolean} hasFeedback (true|false) default true
12415      */
12416     hasFeedback : true,
12417     
12418     /**
12419      * @cfg {String} invalidFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12420      */
12421     invalidFeedbackClass : "glyphicon-warning-sign",
12422     
12423     /**
12424      * @cfg {String} validFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12425      */
12426     validFeedbackClass : "glyphicon-ok",
12427     
12428     /**
12429      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
12430      */
12431     selectOnFocus : false,
12432     
12433      /**
12434      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
12435      */
12436     maskRe : null,
12437        /**
12438      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
12439      */
12440     vtype : null,
12441     
12442       /**
12443      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
12444      */
12445     disableKeyFilter : false,
12446     
12447        /**
12448      * @cfg {Boolean} disabled True to disable the field (defaults to false).
12449      */
12450     disabled : false,
12451      /**
12452      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
12453      */
12454     allowBlank : true,
12455     /**
12456      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
12457      */
12458     blankText : "Please complete this mandatory field",
12459     
12460      /**
12461      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
12462      */
12463     minLength : 0,
12464     /**
12465      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
12466      */
12467     maxLength : Number.MAX_VALUE,
12468     /**
12469      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
12470      */
12471     minLengthText : "The minimum length for this field is {0}",
12472     /**
12473      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
12474      */
12475     maxLengthText : "The maximum length for this field is {0}",
12476   
12477     
12478     /**
12479      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
12480      * If available, this function will be called only after the basic validators all return true, and will be passed the
12481      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
12482      */
12483     validator : null,
12484     /**
12485      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
12486      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
12487      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
12488      */
12489     regex : null,
12490     /**
12491      * @cfg {String} regexText -- Depricated - use Invalid Text
12492      */
12493     regexText : "",
12494     
12495     /**
12496      * @cfg {String} invalidText The error text to display if {@link #validator} test fails during validation (defaults to "")
12497      */
12498     invalidText : "",
12499     
12500     
12501     
12502     autocomplete: false,
12503     
12504     
12505     fieldLabel : '',
12506     inputType : 'text',
12507     
12508     name : false,
12509     placeholder: false,
12510     before : false,
12511     after : false,
12512     size : false,
12513     hasFocus : false,
12514     preventMark: false,
12515     isFormField : true,
12516     value : '',
12517     labelWidth : 2,
12518     labelAlign : false,
12519     readOnly : false,
12520     align : false,
12521     formatedValue : false,
12522     forceFeedback : false,
12523     
12524     indicatorpos : 'left',
12525     
12526     labellg : 0,
12527     labelmd : 0,
12528     labelsm : 0,
12529     labelxs : 0,
12530     
12531     capture : '',
12532     accept : '',
12533     
12534     parentLabelAlign : function()
12535     {
12536         var parent = this;
12537         while (parent.parent()) {
12538             parent = parent.parent();
12539             if (typeof(parent.labelAlign) !='undefined') {
12540                 return parent.labelAlign;
12541             }
12542         }
12543         return 'left';
12544         
12545     },
12546     
12547     getAutoCreate : function()
12548     {
12549         
12550         var id = Roo.id();
12551         
12552         var cfg = {};
12553         
12554         if(this.inputType != 'hidden'){
12555             cfg.cls = 'form-group' //input-group
12556         }
12557         
12558         var input =  {
12559             tag: 'input',
12560             id : id,
12561             type : this.inputType,
12562             value : this.value,
12563             cls : 'form-control',
12564             placeholder : this.placeholder || '',
12565             autocomplete : this.autocomplete || 'new-password'
12566         };
12567         if (this.inputType == 'file') {
12568             input.style = 'overflow:hidden'; // why not in CSS?
12569         }
12570         
12571         if(this.capture.length){
12572             input.capture = this.capture;
12573         }
12574         
12575         if(this.accept.length){
12576             input.accept = this.accept + "/*";
12577         }
12578         
12579         if(this.align){
12580             input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
12581         }
12582         
12583         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
12584             input.maxLength = this.maxLength;
12585         }
12586         
12587         if (this.disabled) {
12588             input.disabled=true;
12589         }
12590         
12591         if (this.readOnly) {
12592             input.readonly=true;
12593         }
12594         
12595         if (this.name) {
12596             input.name = this.name;
12597         }
12598         
12599         if (this.size) {
12600             input.cls += ' input-' + this.size;
12601         }
12602         
12603         var settings=this;
12604         ['xs','sm','md','lg'].map(function(size){
12605             if (settings[size]) {
12606                 cfg.cls += ' col-' + size + '-' + settings[size];
12607             }
12608         });
12609         
12610         var inputblock = input;
12611         
12612         var feedback = {
12613             tag: 'span',
12614             cls: 'glyphicon form-control-feedback'
12615         };
12616             
12617         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12618             
12619             inputblock = {
12620                 cls : 'has-feedback',
12621                 cn :  [
12622                     input,
12623                     feedback
12624                 ] 
12625             };  
12626         }
12627         
12628         if (this.before || this.after) {
12629             
12630             inputblock = {
12631                 cls : 'input-group',
12632                 cn :  [] 
12633             };
12634             
12635             if (this.before && typeof(this.before) == 'string') {
12636                 
12637                 inputblock.cn.push({
12638                     tag :'span',
12639                     cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
12640                     html : this.before
12641                 });
12642             }
12643             if (this.before && typeof(this.before) == 'object') {
12644                 this.before = Roo.factory(this.before);
12645                 
12646                 inputblock.cn.push({
12647                     tag :'span',
12648                     cls : 'roo-input-before input-group-prepend   input-group-' +
12649                         (this.before.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12650                 });
12651             }
12652             
12653             inputblock.cn.push(input);
12654             
12655             if (this.after && typeof(this.after) == 'string') {
12656                 inputblock.cn.push({
12657                     tag :'span',
12658                     cls : 'roo-input-after input-group-append input-group-text input-group-addon',
12659                     html : this.after
12660                 });
12661             }
12662             if (this.after && typeof(this.after) == 'object') {
12663                 this.after = Roo.factory(this.after);
12664                 
12665                 inputblock.cn.push({
12666                     tag :'span',
12667                     cls : 'roo-input-after input-group-append  input-group-' +
12668                         (this.after.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12669                 });
12670             }
12671             
12672             if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12673                 inputblock.cls += ' has-feedback';
12674                 inputblock.cn.push(feedback);
12675             }
12676         };
12677         
12678         
12679         
12680         cfg = this.getAutoCreateLabel( cfg, inputblock );
12681         
12682        
12683          
12684         
12685         if (this.parentType === 'Navbar' &&  this.parent().bar) {
12686            cfg.cls += ' navbar-form';
12687         }
12688         
12689         if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
12690             // on BS4 we do this only if not form 
12691             cfg.cls += ' navbar-form';
12692             cfg.tag = 'li';
12693         }
12694         
12695         return cfg;
12696         
12697     },
12698     /**
12699      * autocreate the label - also used by textara... ?? and others?
12700      */
12701     getAutoCreateLabel : function( cfg, inputblock )
12702     {
12703         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
12704        
12705         var indicator = {
12706             tag : 'i',
12707             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
12708             tooltip : 'This field is required'
12709         };
12710         if (this.allowBlank ) {
12711             indicator.style = this.allowBlank ? ' display:none' : '';
12712         }
12713         if (align ==='left' && this.fieldLabel.length) {
12714             
12715             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
12716             
12717             cfg.cn = [
12718                 indicator,
12719                 {
12720                     tag: 'label',
12721                     'for' :  id,
12722                     cls : 'control-label col-form-label',
12723                     html : this.fieldLabel
12724
12725                 },
12726                 {
12727                     cls : "", 
12728                     cn: [
12729                         inputblock
12730                     ]
12731                 }
12732             ];
12733             
12734             var labelCfg = cfg.cn[1];
12735             var contentCfg = cfg.cn[2];
12736             
12737             if(this.indicatorpos == 'right'){
12738                 cfg.cn = [
12739                     {
12740                         tag: 'label',
12741                         'for' :  id,
12742                         cls : 'control-label col-form-label',
12743                         cn : [
12744                             {
12745                                 tag : 'span',
12746                                 html : this.fieldLabel
12747                             },
12748                             indicator
12749                         ]
12750                     },
12751                     {
12752                         cls : "",
12753                         cn: [
12754                             inputblock
12755                         ]
12756                     }
12757
12758                 ];
12759                 
12760                 labelCfg = cfg.cn[0];
12761                 contentCfg = cfg.cn[1];
12762             
12763             }
12764             
12765             if(this.labelWidth > 12){
12766                 labelCfg.style = "width: " + this.labelWidth + 'px';
12767             }
12768             
12769             if(this.labelWidth < 13 && this.labelmd == 0){
12770                 this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth;
12771             }
12772             
12773             if(this.labellg > 0){
12774                 labelCfg.cls += ' col-lg-' + this.labellg;
12775                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
12776             }
12777             
12778             if(this.labelmd > 0){
12779                 labelCfg.cls += ' col-md-' + this.labelmd;
12780                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
12781             }
12782             
12783             if(this.labelsm > 0){
12784                 labelCfg.cls += ' col-sm-' + this.labelsm;
12785                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
12786             }
12787             
12788             if(this.labelxs > 0){
12789                 labelCfg.cls += ' col-xs-' + this.labelxs;
12790                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
12791             }
12792             
12793             
12794         } else if ( this.fieldLabel.length) {
12795                 
12796             
12797             
12798             cfg.cn = [
12799                 {
12800                     tag : 'i',
12801                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
12802                     tooltip : 'This field is required',
12803                     style : this.allowBlank ? ' display:none' : '' 
12804                 },
12805                 {
12806                     tag: 'label',
12807                    //cls : 'input-group-addon',
12808                     html : this.fieldLabel
12809
12810                 },
12811
12812                inputblock
12813
12814            ];
12815            
12816            if(this.indicatorpos == 'right'){
12817        
12818                 cfg.cn = [
12819                     {
12820                         tag: 'label',
12821                        //cls : 'input-group-addon',
12822                         html : this.fieldLabel
12823
12824                     },
12825                     {
12826                         tag : 'i',
12827                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
12828                         tooltip : 'This field is required',
12829                         style : this.allowBlank ? ' display:none' : '' 
12830                     },
12831
12832                    inputblock
12833
12834                ];
12835
12836             }
12837
12838         } else {
12839             
12840             cfg.cn = [
12841
12842                     inputblock
12843
12844             ];
12845                 
12846                 
12847         };
12848         return cfg;
12849     },
12850     
12851     
12852     /**
12853      * return the real input element.
12854      */
12855     inputEl: function ()
12856     {
12857         return this.el.select('input.form-control',true).first();
12858     },
12859     
12860     tooltipEl : function()
12861     {
12862         return this.inputEl();
12863     },
12864     
12865     indicatorEl : function()
12866     {
12867         if (Roo.bootstrap.version == 4) {
12868             return false; // not enabled in v4 yet.
12869         }
12870         
12871         var indicator = this.el.select('i.roo-required-indicator',true).first();
12872         
12873         if(!indicator){
12874             return false;
12875         }
12876         
12877         return indicator;
12878         
12879     },
12880     
12881     setDisabled : function(v)
12882     {
12883         var i  = this.inputEl().dom;
12884         if (!v) {
12885             i.removeAttribute('disabled');
12886             return;
12887             
12888         }
12889         i.setAttribute('disabled','true');
12890     },
12891     initEvents : function()
12892     {
12893           
12894         this.inputEl().on("keydown" , this.fireKey,  this);
12895         this.inputEl().on("focus", this.onFocus,  this);
12896         this.inputEl().on("blur", this.onBlur,  this);
12897         
12898         this.inputEl().relayEvent('keyup', this);
12899         this.inputEl().relayEvent('paste', this);
12900         
12901         this.indicator = this.indicatorEl();
12902         
12903         if(this.indicator){
12904             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? - 
12905         }
12906  
12907         // reference to original value for reset
12908         this.originalValue = this.getValue();
12909         //Roo.form.TextField.superclass.initEvents.call(this);
12910         if(this.validationEvent == 'keyup'){
12911             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
12912             this.inputEl().on('keyup', this.filterValidation, this);
12913         }
12914         else if(this.validationEvent !== false){
12915             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
12916         }
12917         
12918         if(this.selectOnFocus){
12919             this.on("focus", this.preFocus, this);
12920             
12921         }
12922         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
12923             this.inputEl().on("keypress", this.filterKeys, this);
12924         } else {
12925             this.inputEl().relayEvent('keypress', this);
12926         }
12927        /* if(this.grow){
12928             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
12929             this.el.on("click", this.autoSize,  this);
12930         }
12931         */
12932         if(this.inputEl().is('input[type=password]') && Roo.isSafari){
12933             this.inputEl().on('keydown', this.SafariOnKeyDown, this);
12934         }
12935         
12936         if (typeof(this.before) == 'object') {
12937             this.before.render(this.el.select('.roo-input-before',true).first());
12938         }
12939         if (typeof(this.after) == 'object') {
12940             this.after.render(this.el.select('.roo-input-after',true).first());
12941         }
12942         
12943         this.inputEl().on('change', this.onChange, this);
12944         
12945     },
12946     filterValidation : function(e){
12947         if(!e.isNavKeyPress()){
12948             this.validationTask.delay(this.validationDelay);
12949         }
12950     },
12951      /**
12952      * Validates the field value
12953      * @return {Boolean} True if the value is valid, else false
12954      */
12955     validate : function(){
12956         //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
12957         if(this.disabled || this.validateValue(this.getRawValue())){
12958             this.markValid();
12959             return true;
12960         }
12961         
12962         this.markInvalid();
12963         return false;
12964     },
12965     
12966     
12967     /**
12968      * Validates a value according to the field's validation rules and marks the field as invalid
12969      * if the validation fails
12970      * @param {Mixed} value The value to validate
12971      * @return {Boolean} True if the value is valid, else false
12972      */
12973     validateValue : function(value)
12974     {
12975         if(this.getVisibilityEl().hasClass('hidden')){
12976             return true;
12977         }
12978         
12979         if(value.length < 1)  { // if it's blank
12980             if(this.allowBlank){
12981                 return true;
12982             }
12983             return false;
12984         }
12985         
12986         if(value.length < this.minLength){
12987             return false;
12988         }
12989         if(value.length > this.maxLength){
12990             return false;
12991         }
12992         if(this.vtype){
12993             var vt = Roo.form.VTypes;
12994             if(!vt[this.vtype](value, this)){
12995                 return false;
12996             }
12997         }
12998         if(typeof this.validator == "function"){
12999             var msg = this.validator(value);
13000             if (typeof(msg) == 'string') {
13001                 this.invalidText = msg;
13002             }
13003             if(msg !== true){
13004                 return false;
13005             }
13006         }
13007         
13008         if(this.regex && !this.regex.test(value)){
13009             return false;
13010         }
13011         
13012         return true;
13013     },
13014     
13015      // private
13016     fireKey : function(e){
13017         //Roo.log('field ' + e.getKey());
13018         if(e.isNavKeyPress()){
13019             this.fireEvent("specialkey", this, e);
13020         }
13021     },
13022     focus : function (selectText){
13023         if(this.rendered){
13024             this.inputEl().focus();
13025             if(selectText === true){
13026                 this.inputEl().dom.select();
13027             }
13028         }
13029         return this;
13030     } ,
13031     
13032     onFocus : function(){
13033         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
13034            // this.el.addClass(this.focusClass);
13035         }
13036         if(!this.hasFocus){
13037             this.hasFocus = true;
13038             this.startValue = this.getValue();
13039             this.fireEvent("focus", this);
13040         }
13041     },
13042     
13043     beforeBlur : Roo.emptyFn,
13044
13045     
13046     // private
13047     onBlur : function(){
13048         this.beforeBlur();
13049         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
13050             //this.el.removeClass(this.focusClass);
13051         }
13052         this.hasFocus = false;
13053         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
13054             this.validate();
13055         }
13056         var v = this.getValue();
13057         if(String(v) !== String(this.startValue)){
13058             this.fireEvent('change', this, v, this.startValue);
13059         }
13060         this.fireEvent("blur", this);
13061     },
13062     
13063     onChange : function(e)
13064     {
13065         var v = this.getValue();
13066         if(String(v) !== String(this.startValue)){
13067             this.fireEvent('change', this, v, this.startValue);
13068         }
13069         
13070     },
13071     
13072     /**
13073      * Resets the current field value to the originally loaded value and clears any validation messages
13074      */
13075     reset : function(){
13076         this.setValue(this.originalValue);
13077         this.validate();
13078     },
13079      /**
13080      * Returns the name of the field
13081      * @return {Mixed} name The name field
13082      */
13083     getName: function(){
13084         return this.name;
13085     },
13086      /**
13087      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
13088      * @return {Mixed} value The field value
13089      */
13090     getValue : function(){
13091         
13092         var v = this.inputEl().getValue();
13093         
13094         return v;
13095     },
13096     /**
13097      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
13098      * @return {Mixed} value The field value
13099      */
13100     getRawValue : function(){
13101         var v = this.inputEl().getValue();
13102         
13103         return v;
13104     },
13105     
13106     /**
13107      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
13108      * @param {Mixed} value The value to set
13109      */
13110     setRawValue : function(v){
13111         return this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13112     },
13113     
13114     selectText : function(start, end){
13115         var v = this.getRawValue();
13116         if(v.length > 0){
13117             start = start === undefined ? 0 : start;
13118             end = end === undefined ? v.length : end;
13119             var d = this.inputEl().dom;
13120             if(d.setSelectionRange){
13121                 d.setSelectionRange(start, end);
13122             }else if(d.createTextRange){
13123                 var range = d.createTextRange();
13124                 range.moveStart("character", start);
13125                 range.moveEnd("character", v.length-end);
13126                 range.select();
13127             }
13128         }
13129     },
13130     
13131     /**
13132      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
13133      * @param {Mixed} value The value to set
13134      */
13135     setValue : function(v){
13136         this.value = v;
13137         if(this.rendered){
13138             Roo.log(this.name);
13139             Roo.log(v);
13140             Roo.log('adsad');
13141             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13142             this.validate();
13143         }
13144     },
13145     
13146     /*
13147     processValue : function(value){
13148         if(this.stripCharsRe){
13149             var newValue = value.replace(this.stripCharsRe, '');
13150             if(newValue !== value){
13151                 this.setRawValue(newValue);
13152                 return newValue;
13153             }
13154         }
13155         return value;
13156     },
13157   */
13158     preFocus : function(){
13159         
13160         if(this.selectOnFocus){
13161             this.inputEl().dom.select();
13162         }
13163     },
13164     filterKeys : function(e){
13165         var k = e.getKey();
13166         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
13167             return;
13168         }
13169         var c = e.getCharCode(), cc = String.fromCharCode(c);
13170         if(Roo.isIE && (e.isSpecialKey() || !cc)){
13171             return;
13172         }
13173         if(!this.maskRe.test(cc)){
13174             e.stopEvent();
13175         }
13176     },
13177      /**
13178      * Clear any invalid styles/messages for this field
13179      */
13180     clearInvalid : function(){
13181         
13182         if(!this.el || this.preventMark){ // not rendered
13183             return;
13184         }
13185         
13186         
13187         this.el.removeClass([this.invalidClass, 'is-invalid']);
13188         
13189         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13190             
13191             var feedback = this.el.select('.form-control-feedback', true).first();
13192             
13193             if(feedback){
13194                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13195             }
13196             
13197         }
13198         
13199         if(this.indicator){
13200             this.indicator.removeClass('visible');
13201             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13202         }
13203         
13204         this.fireEvent('valid', this);
13205     },
13206     
13207      /**
13208      * Mark this field as valid
13209      */
13210     markValid : function()
13211     {
13212         if(!this.el  || this.preventMark){ // not rendered...
13213             return;
13214         }
13215         
13216         this.el.removeClass([this.invalidClass, this.validClass]);
13217         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13218
13219         var feedback = this.el.select('.form-control-feedback', true).first();
13220             
13221         if(feedback){
13222             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13223         }
13224         
13225         if(this.indicator){
13226             this.indicator.removeClass('visible');
13227             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13228         }
13229         
13230         if(this.disabled){
13231             return;
13232         }
13233         
13234            
13235         if(this.allowBlank && !this.getRawValue().length){
13236             return;
13237         }
13238         if (Roo.bootstrap.version == 3) {
13239             this.el.addClass(this.validClass);
13240         } else {
13241             this.inputEl().addClass('is-valid');
13242         }
13243
13244         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13245             
13246             var feedback = this.el.select('.form-control-feedback', true).first();
13247             
13248             if(feedback){
13249                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13250                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13251             }
13252             
13253         }
13254         
13255         this.fireEvent('valid', this);
13256     },
13257     
13258      /**
13259      * Mark this field as invalid
13260      * @param {String} msg The validation message
13261      */
13262     markInvalid : function(msg)
13263     {
13264         if(!this.el  || this.preventMark){ // not rendered
13265             return;
13266         }
13267         
13268         this.el.removeClass([this.invalidClass, this.validClass]);
13269         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13270         
13271         var feedback = this.el.select('.form-control-feedback', true).first();
13272             
13273         if(feedback){
13274             this.el.select('.form-control-feedback', true).first().removeClass(
13275                     [this.invalidFeedbackClass, this.validFeedbackClass]);
13276         }
13277
13278         if(this.disabled){
13279             return;
13280         }
13281         
13282         if(this.allowBlank && !this.getRawValue().length){
13283             return;
13284         }
13285         
13286         if(this.indicator){
13287             this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13288             this.indicator.addClass('visible');
13289         }
13290         if (Roo.bootstrap.version == 3) {
13291             this.el.addClass(this.invalidClass);
13292         } else {
13293             this.inputEl().addClass('is-invalid');
13294         }
13295         
13296         
13297         
13298         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13299             
13300             var feedback = this.el.select('.form-control-feedback', true).first();
13301             
13302             if(feedback){
13303                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13304                 
13305                 if(this.getValue().length || this.forceFeedback){
13306                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13307                 }
13308                 
13309             }
13310             
13311         }
13312         
13313         this.fireEvent('invalid', this, msg);
13314     },
13315     // private
13316     SafariOnKeyDown : function(event)
13317     {
13318         // this is a workaround for a password hang bug on chrome/ webkit.
13319         if (this.inputEl().dom.type != 'password') {
13320             return;
13321         }
13322         
13323         var isSelectAll = false;
13324         
13325         if(this.inputEl().dom.selectionEnd > 0){
13326             isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false;
13327         }
13328         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
13329             event.preventDefault();
13330             this.setValue('');
13331             return;
13332         }
13333         
13334         if(isSelectAll  && event.getCharCode() > 31 && !event.ctrlKey) { // not backspace and delete key (or ctrl-v)
13335             
13336             event.preventDefault();
13337             // this is very hacky as keydown always get's upper case.
13338             //
13339             var cc = String.fromCharCode(event.getCharCode());
13340             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
13341             
13342         }
13343     },
13344     adjustWidth : function(tag, w){
13345         tag = tag.toLowerCase();
13346         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
13347             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
13348                 if(tag == 'input'){
13349                     return w + 2;
13350                 }
13351                 if(tag == 'textarea'){
13352                     return w-2;
13353                 }
13354             }else if(Roo.isOpera){
13355                 if(tag == 'input'){
13356                     return w + 2;
13357                 }
13358                 if(tag == 'textarea'){
13359                     return w-2;
13360                 }
13361             }
13362         }
13363         return w;
13364     },
13365     
13366     setFieldLabel : function(v)
13367     {
13368         if(!this.rendered){
13369             return;
13370         }
13371         
13372         if(this.indicatorEl()){
13373             var ar = this.el.select('label > span',true);
13374             
13375             if (ar.elements.length) {
13376                 this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13377                 this.fieldLabel = v;
13378                 return;
13379             }
13380             
13381             var br = this.el.select('label',true);
13382             
13383             if(br.elements.length) {
13384                 this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13385                 this.fieldLabel = v;
13386                 return;
13387             }
13388             
13389             Roo.log('Cannot Found any of label > span || label in input');
13390             return;
13391         }
13392         
13393         this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13394         this.fieldLabel = v;
13395         
13396         
13397     }
13398 });
13399
13400  
13401 /*
13402  * - LGPL
13403  *
13404  * Input
13405  * 
13406  */
13407
13408 /**
13409  * @class Roo.bootstrap.form.TextArea
13410  * @extends Roo.bootstrap.form.Input
13411  * Bootstrap TextArea class
13412  * @cfg {Number} cols Specifies the visible width of a text area
13413  * @cfg {Number} rows Specifies the visible number of lines in a text area
13414  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
13415  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
13416  * @cfg {string} html text
13417  * 
13418  * @constructor
13419  * Create a new TextArea
13420  * @param {Object} config The config object
13421  */
13422
13423 Roo.bootstrap.form.TextArea = function(config){
13424     Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config);
13425    
13426 };
13427
13428 Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input,  {
13429      
13430     cols : false,
13431     rows : 5,
13432     readOnly : false,
13433     warp : 'soft',
13434     resize : false,
13435     value: false,
13436     html: false,
13437     
13438     getAutoCreate : function(){
13439         
13440         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
13441         
13442         var id = Roo.id();
13443         
13444         var cfg = {};
13445         
13446         if(this.inputType != 'hidden'){
13447             cfg.cls = 'form-group' //input-group
13448         }
13449         
13450         var input =  {
13451             tag: 'textarea',
13452             id : id,
13453             warp : this.warp,
13454             rows : this.rows,
13455             value : this.value || '',
13456             html: this.html || '',
13457             cls : 'form-control',
13458             placeholder : this.placeholder || '' 
13459             
13460         };
13461         
13462         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
13463             input.maxLength = this.maxLength;
13464         }
13465         
13466         if(this.resize){
13467             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
13468         }
13469         
13470         if(this.cols){
13471             input.cols = this.cols;
13472         }
13473         
13474         if (this.readOnly) {
13475             input.readonly = true;
13476         }
13477         
13478         if (this.name) {
13479             input.name = this.name;
13480         }
13481         
13482         if (this.size) {
13483             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
13484         }
13485         
13486         var settings=this;
13487         ['xs','sm','md','lg'].map(function(size){
13488             if (settings[size]) {
13489                 cfg.cls += ' col-' + size + '-' + settings[size];
13490             }
13491         });
13492         
13493         var inputblock = input;
13494         
13495         if(this.hasFeedback && !this.allowBlank){
13496             
13497             var feedback = {
13498                 tag: 'span',
13499                 cls: 'glyphicon form-control-feedback'
13500             };
13501
13502             inputblock = {
13503                 cls : 'has-feedback',
13504                 cn :  [
13505                     input,
13506                     feedback
13507                 ] 
13508             };  
13509         }
13510         
13511         
13512         if (this.before || this.after) {
13513             
13514             inputblock = {
13515                 cls : 'input-group',
13516                 cn :  [] 
13517             };
13518             if (this.before) {
13519                 inputblock.cn.push({
13520                     tag :'span',
13521                     cls : 'input-group-addon',
13522                     html : this.before
13523                 });
13524             }
13525             
13526             inputblock.cn.push(input);
13527             
13528             if(this.hasFeedback && !this.allowBlank){
13529                 inputblock.cls += ' has-feedback';
13530                 inputblock.cn.push(feedback);
13531             }
13532             
13533             if (this.after) {
13534                 inputblock.cn.push({
13535                     tag :'span',
13536                     cls : 'input-group-addon',
13537                     html : this.after
13538                 });
13539             }
13540             
13541         }
13542         
13543         
13544         cfg = this.getAutoCreateLabel( cfg, inputblock );
13545
13546          
13547         
13548         if (this.disabled) {
13549             input.disabled=true;
13550         }
13551         
13552         return cfg;
13553         
13554     },
13555     /**
13556      * return the real textarea element.
13557      */
13558     inputEl: function ()
13559     {
13560         return this.el.select('textarea.form-control',true).first();
13561     },
13562     
13563     /**
13564      * Clear any invalid styles/messages for this field
13565      */
13566     clearInvalid : function()
13567     {
13568         
13569         if(!this.el || this.preventMark){ // not rendered
13570             return;
13571         }
13572         
13573         var label = this.el.select('label', true).first();
13574         //var icon = this.el.select('i.fa-star', true).first();
13575         
13576         //if(label && icon){
13577         //    icon.remove();
13578         //}
13579         this.el.removeClass( this.validClass);
13580         this.inputEl().removeClass('is-invalid');
13581          
13582         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13583             
13584             var feedback = this.el.select('.form-control-feedback', true).first();
13585             
13586             if(feedback){
13587                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13588             }
13589             
13590         }
13591         
13592         this.fireEvent('valid', this);
13593     },
13594     
13595      /**
13596      * Mark this field as valid
13597      */
13598     markValid : function()
13599     {
13600         if(!this.el  || this.preventMark){ // not rendered
13601             return;
13602         }
13603         
13604         this.el.removeClass([this.invalidClass, this.validClass]);
13605         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13606         
13607         var feedback = this.el.select('.form-control-feedback', true).first();
13608             
13609         if(feedback){
13610             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13611         }
13612
13613         if(this.disabled || this.allowBlank){
13614             return;
13615         }
13616         
13617         var label = this.el.select('label', true).first();
13618         var icon = this.el.select('i.fa-star', true).first();
13619         
13620         //if(label && icon){
13621         //    icon.remove();
13622         //}
13623         if (Roo.bootstrap.version == 3) {
13624             this.el.addClass(this.validClass);
13625         } else {
13626             this.inputEl().addClass('is-valid');
13627         }
13628         
13629         
13630         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13631             
13632             var feedback = this.el.select('.form-control-feedback', true).first();
13633             
13634             if(feedback){
13635                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13636                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13637             }
13638             
13639         }
13640         
13641         this.fireEvent('valid', this);
13642     },
13643     
13644      /**
13645      * Mark this field as invalid
13646      * @param {String} msg The validation message
13647      */
13648     markInvalid : function(msg)
13649     {
13650         if(!this.el  || this.preventMark){ // not rendered
13651             return;
13652         }
13653         
13654         this.el.removeClass([this.invalidClass, this.validClass]);
13655         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13656         
13657         var feedback = this.el.select('.form-control-feedback', true).first();
13658             
13659         if(feedback){
13660             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13661         }
13662
13663         if(this.disabled){
13664             return;
13665         }
13666         
13667         var label = this.el.select('label', true).first();
13668         //var icon = this.el.select('i.fa-star', true).first();
13669         
13670         //if(!this.getValue().length && label && !icon){
13671           /*  this.el.createChild({
13672                 tag : 'i',
13673                 cls : 'text-danger fa fa-lg fa-star',
13674                 tooltip : 'This field is required',
13675                 style : 'margin-right:5px;'
13676             }, label, true);
13677             */
13678         //}
13679         
13680         if (Roo.bootstrap.version == 3) {
13681             this.el.addClass(this.invalidClass);
13682         } else {
13683             this.inputEl().addClass('is-invalid');
13684         }
13685         
13686         // fixme ... this may be depricated need to test..
13687         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13688             
13689             var feedback = this.el.select('.form-control-feedback', true).first();
13690             
13691             if(feedback){
13692                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13693                 
13694                 if(this.getValue().length || this.forceFeedback){
13695                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13696                 }
13697                 
13698             }
13699             
13700         }
13701         
13702         this.fireEvent('invalid', this, msg);
13703     }
13704 });
13705
13706  
13707 /*
13708  * - LGPL
13709  *
13710  * trigger field - base class for combo..
13711  * 
13712  */
13713  
13714 /**
13715  * @class Roo.bootstrap.form.TriggerField
13716  * @extends Roo.bootstrap.form.Input
13717  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
13718  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
13719  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
13720  * for which you can provide a custom implementation.  For example:
13721  * <pre><code>
13722 var trigger = new Roo.bootstrap.form.TriggerField();
13723 trigger.onTriggerClick = myTriggerFn;
13724 trigger.applyTo('my-field');
13725 </code></pre>
13726  *
13727  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
13728  * {@link Roo.bootstrap.form.DateField} and {@link Roo.bootstrap.form.ComboBox} are perfect examples of this.
13729  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
13730  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
13731  * @cfg {String} caret (search|calendar) BS3 only - carat fa name
13732
13733  * @constructor
13734  * Create a new TriggerField.
13735  * @param {Object} config Configuration options (valid {@Roo.bootstrap.form.Input} config options will also be applied
13736  * to the base TextField)
13737  */
13738 Roo.bootstrap.form.TriggerField = function(config){
13739     this.mimicing = false;
13740     Roo.bootstrap.form.TriggerField.superclass.constructor.call(this, config);
13741 };
13742
13743 Roo.extend(Roo.bootstrap.form.TriggerField, Roo.bootstrap.form.Input,  {
13744     /**
13745      * @cfg {String} triggerClass A CSS class to apply to the trigger
13746      */
13747      /**
13748      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
13749      */
13750     hideTrigger:false,
13751
13752     /**
13753      * @cfg {Boolean} removable (true|false) special filter default false
13754      */
13755     removable : false,
13756     
13757     /** @cfg {Boolean} grow @hide */
13758     /** @cfg {Number} growMin @hide */
13759     /** @cfg {Number} growMax @hide */
13760
13761     /**
13762      * @hide 
13763      * @method
13764      */
13765     autoSize: Roo.emptyFn,
13766     // private
13767     monitorTab : true,
13768     // private
13769     deferHeight : true,
13770
13771     
13772     actionMode : 'wrap',
13773     
13774     caret : false,
13775     
13776     
13777     getAutoCreate : function(){
13778        
13779         var align = this.labelAlign || this.parentLabelAlign();
13780         
13781         var id = Roo.id();
13782         
13783         var cfg = {
13784             cls: 'form-group' //input-group
13785         };
13786         
13787         
13788         var input =  {
13789             tag: 'input',
13790             id : id,
13791             type : this.inputType,
13792             cls : 'form-control',
13793             autocomplete: 'new-password',
13794             placeholder : this.placeholder || '' 
13795             
13796         };
13797         if (this.name) {
13798             input.name = this.name;
13799         }
13800         if (this.size) {
13801             input.cls += ' input-' + this.size;
13802         }
13803         
13804         if (this.disabled) {
13805             input.disabled=true;
13806         }
13807         
13808         var inputblock = input;
13809         
13810         if(this.hasFeedback && !this.allowBlank){
13811             
13812             var feedback = {
13813                 tag: 'span',
13814                 cls: 'glyphicon form-control-feedback'
13815             };
13816             
13817             if(this.removable && !this.editable  ){
13818                 inputblock = {
13819                     cls : 'has-feedback',
13820                     cn :  [
13821                         inputblock,
13822                         {
13823                             tag: 'button',
13824                             html : 'x',
13825                             cls : 'roo-combo-removable-btn close'
13826                         },
13827                         feedback
13828                     ] 
13829                 };
13830             } else {
13831                 inputblock = {
13832                     cls : 'has-feedback',
13833                     cn :  [
13834                         inputblock,
13835                         feedback
13836                     ] 
13837                 };
13838             }
13839
13840         } else {
13841             if(this.removable && !this.editable ){
13842                 inputblock = {
13843                     cls : 'roo-removable',
13844                     cn :  [
13845                         inputblock,
13846                         {
13847                             tag: 'button',
13848                             html : 'x',
13849                             cls : 'roo-combo-removable-btn close'
13850                         }
13851                     ] 
13852                 };
13853             }
13854         }
13855         
13856         if (this.before || this.after) {
13857             
13858             inputblock = {
13859                 cls : 'input-group',
13860                 cn :  [] 
13861             };
13862             if (this.before) {
13863                 inputblock.cn.push({
13864                     tag :'span',
13865                     cls : 'input-group-addon input-group-prepend input-group-text',
13866                     html : this.before
13867                 });
13868             }
13869             
13870             inputblock.cn.push(input);
13871             
13872             if(this.hasFeedback && !this.allowBlank){
13873                 inputblock.cls += ' has-feedback';
13874                 inputblock.cn.push(feedback);
13875             }
13876             
13877             if (this.after) {
13878                 inputblock.cn.push({
13879                     tag :'span',
13880                     cls : 'input-group-addon input-group-append input-group-text',
13881                     html : this.after
13882                 });
13883             }
13884             
13885         };
13886         
13887       
13888         
13889         var ibwrap = inputblock;
13890         
13891         if(this.multiple){
13892             ibwrap = {
13893                 tag: 'ul',
13894                 cls: 'roo-select2-choices',
13895                 cn:[
13896                     {
13897                         tag: 'li',
13898                         cls: 'roo-select2-search-field',
13899                         cn: [
13900
13901                             inputblock
13902                         ]
13903                     }
13904                 ]
13905             };
13906                 
13907         }
13908         
13909         var combobox = {
13910             cls: 'roo-select2-container input-group',
13911             cn: [
13912                  {
13913                     tag: 'input',
13914                     type : 'hidden',
13915                     cls: 'form-hidden-field'
13916                 },
13917                 ibwrap
13918             ]
13919         };
13920         
13921         if(!this.multiple && this.showToggleBtn){
13922             
13923             var caret = {
13924                         tag: 'span',
13925                         cls: 'caret'
13926              };
13927             if (this.caret != false) {
13928                 caret = {
13929                      tag: 'i',
13930                      cls: 'fa fa-' + this.caret
13931                 };
13932                 
13933             }
13934             
13935             combobox.cn.push({
13936                 tag :'span',
13937                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
13938                 cn : [
13939                     Roo.bootstrap.version == 3 ? caret : '',
13940                     {
13941                         tag: 'span',
13942                         cls: 'combobox-clear',
13943                         cn  : [
13944                             {
13945                                 tag : 'i',
13946                                 cls: 'icon-remove'
13947                             }
13948                         ]
13949                     }
13950                 ]
13951
13952             })
13953         }
13954         
13955         if(this.multiple){
13956             combobox.cls += ' roo-select2-container-multi';
13957         }
13958          var indicator = {
13959             tag : 'i',
13960             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
13961             tooltip : 'This field is required'
13962         };
13963       
13964         if (this.allowBlank) {
13965             indicator = {
13966                 tag : 'i',
13967                 style : 'display:none'
13968             };
13969         }
13970          
13971         
13972         
13973         if (align ==='left' && this.fieldLabel.length) {
13974             
13975             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
13976
13977             cfg.cn = [
13978                 indicator,
13979                 {
13980                     tag: 'label',
13981                     'for' :  id,
13982                     cls : 'control-label',
13983                     html : this.fieldLabel
13984
13985                 },
13986                 {
13987                     cls : "", 
13988                     cn: [
13989                         combobox
13990                     ]
13991                 }
13992
13993             ];
13994             
13995             var labelCfg = cfg.cn[1];
13996             var contentCfg = cfg.cn[2];
13997             
13998             if(this.indicatorpos == 'right'){
13999                 cfg.cn = [
14000                     {
14001                         tag: 'label',
14002                         'for' :  id,
14003                         cls : 'control-label',
14004                         cn : [
14005                             {
14006                                 tag : 'span',
14007                                 html : this.fieldLabel
14008                             },
14009                             indicator
14010                         ]
14011                     },
14012                     {
14013                         cls : "", 
14014                         cn: [
14015                             combobox
14016                         ]
14017                     }
14018
14019                 ];
14020                 
14021                 labelCfg = cfg.cn[0];
14022                 contentCfg = cfg.cn[1];
14023             }
14024             
14025             if(this.labelWidth > 12){
14026                 labelCfg.style = "width: " + this.labelWidth + 'px';
14027             }
14028             
14029             if(this.labelWidth < 13 && this.labelmd == 0){
14030                 this.labelmd = this.labelWidth;
14031             }
14032             
14033             if(this.labellg > 0){
14034                 labelCfg.cls += ' col-lg-' + this.labellg;
14035                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
14036             }
14037             
14038             if(this.labelmd > 0){
14039                 labelCfg.cls += ' col-md-' + this.labelmd;
14040                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
14041             }
14042             
14043             if(this.labelsm > 0){
14044                 labelCfg.cls += ' col-sm-' + this.labelsm;
14045                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
14046             }
14047             
14048             if(this.labelxs > 0){
14049                 labelCfg.cls += ' col-xs-' + this.labelxs;
14050                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
14051             }
14052             
14053         } else if ( this.fieldLabel.length) {
14054 //                Roo.log(" label");
14055             cfg.cn = [
14056                 indicator,
14057                {
14058                    tag: 'label',
14059                    //cls : 'input-group-addon',
14060                    html : this.fieldLabel
14061
14062                },
14063
14064                combobox
14065
14066             ];
14067             
14068             if(this.indicatorpos == 'right'){
14069                 
14070                 cfg.cn = [
14071                     {
14072                        tag: 'label',
14073                        cn : [
14074                            {
14075                                tag : 'span',
14076                                html : this.fieldLabel
14077                            },
14078                            indicator
14079                        ]
14080
14081                     },
14082                     combobox
14083
14084                 ];
14085
14086             }
14087
14088         } else {
14089             
14090 //                Roo.log(" no label && no align");
14091                 cfg = combobox
14092                      
14093                 
14094         }
14095         
14096         var settings=this;
14097         ['xs','sm','md','lg'].map(function(size){
14098             if (settings[size]) {
14099                 cfg.cls += ' col-' + size + '-' + settings[size];
14100             }
14101         });
14102         
14103         return cfg;
14104         
14105     },
14106     
14107     
14108     
14109     // private
14110     onResize : function(w, h){
14111 //        Roo.bootstrap.form.TriggerField.superclass.onResize.apply(this, arguments);
14112 //        if(typeof w == 'number'){
14113 //            var x = w - this.trigger.getWidth();
14114 //            this.inputEl().setWidth(this.adjustWidth('input', x));
14115 //            this.trigger.setStyle('left', x+'px');
14116 //        }
14117     },
14118
14119     // private
14120     adjustSize : Roo.BoxComponent.prototype.adjustSize,
14121
14122     // private
14123     getResizeEl : function(){
14124         return this.inputEl();
14125     },
14126
14127     // private
14128     getPositionEl : function(){
14129         return this.inputEl();
14130     },
14131
14132     // private
14133     alignErrorIcon : function(){
14134         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
14135     },
14136
14137     // private
14138     initEvents : function(){
14139         
14140         this.createList();
14141         
14142         Roo.bootstrap.form.TriggerField.superclass.initEvents.call(this);
14143         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
14144         if(!this.multiple && this.showToggleBtn){
14145             this.trigger = this.el.select('span.dropdown-toggle',true).first();
14146             if(this.hideTrigger){
14147                 this.trigger.setDisplayed(false);
14148             }
14149             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
14150         }
14151         
14152         if(this.multiple){
14153             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
14154         }
14155         
14156         if(this.removable && !this.editable && !this.tickable){
14157             var close = this.closeTriggerEl();
14158             
14159             if(close){
14160                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
14161                 close.on('click', this.removeBtnClick, this, close);
14162             }
14163         }
14164         
14165         //this.trigger.addClassOnOver('x-form-trigger-over');
14166         //this.trigger.addClassOnClick('x-form-trigger-click');
14167         
14168         //if(!this.width){
14169         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
14170         //}
14171     },
14172     
14173     closeTriggerEl : function()
14174     {
14175         var close = this.el.select('.roo-combo-removable-btn', true).first();
14176         return close ? close : false;
14177     },
14178     
14179     removeBtnClick : function(e, h, el)
14180     {
14181         e.preventDefault();
14182         
14183         if(this.fireEvent("remove", this) !== false){
14184             this.reset();
14185             this.fireEvent("afterremove", this)
14186         }
14187     },
14188     
14189     createList : function()
14190     {
14191         this.list = Roo.get(document.body).createChild({
14192             tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
14193             cls: 'typeahead typeahead-long dropdown-menu shadow',
14194             style: 'display:none'
14195         });
14196         
14197         this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
14198         
14199     },
14200
14201     // private
14202     initTrigger : function(){
14203        
14204     },
14205
14206     // private
14207     onDestroy : function(){
14208         if(this.trigger){
14209             this.trigger.removeAllListeners();
14210           //  this.trigger.remove();
14211         }
14212         //if(this.wrap){
14213         //    this.wrap.remove();
14214         //}
14215         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
14216     },
14217
14218     // private
14219     onFocus : function(){
14220         Roo.bootstrap.form.TriggerField.superclass.onFocus.call(this);
14221         /*
14222         if(!this.mimicing){
14223             this.wrap.addClass('x-trigger-wrap-focus');
14224             this.mimicing = true;
14225             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
14226             if(this.monitorTab){
14227                 this.el.on("keydown", this.checkTab, this);
14228             }
14229         }
14230         */
14231     },
14232
14233     // private
14234     checkTab : function(e){
14235         if(e.getKey() == e.TAB){
14236             this.triggerBlur();
14237         }
14238     },
14239
14240     // private
14241     onBlur : function(){
14242         // do nothing
14243     },
14244
14245     // private
14246     mimicBlur : function(e, t){
14247         /*
14248         if(!this.wrap.contains(t) && this.validateBlur()){
14249             this.triggerBlur();
14250         }
14251         */
14252     },
14253
14254     // private
14255     triggerBlur : function(){
14256         this.mimicing = false;
14257         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
14258         if(this.monitorTab){
14259             this.el.un("keydown", this.checkTab, this);
14260         }
14261         //this.wrap.removeClass('x-trigger-wrap-focus');
14262         Roo.bootstrap.form.TriggerField.superclass.onBlur.call(this);
14263     },
14264
14265     // private
14266     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
14267     validateBlur : function(e, t){
14268         return true;
14269     },
14270
14271     // private
14272     onDisable : function(){
14273         this.inputEl().dom.disabled = true;
14274         //Roo.bootstrap.form.TriggerField.superclass.onDisable.call(this);
14275         //if(this.wrap){
14276         //    this.wrap.addClass('x-item-disabled');
14277         //}
14278     },
14279
14280     // private
14281     onEnable : function(){
14282         this.inputEl().dom.disabled = false;
14283         //Roo.bootstrap.form.TriggerField.superclass.onEnable.call(this);
14284         //if(this.wrap){
14285         //    this.el.removeClass('x-item-disabled');
14286         //}
14287     },
14288
14289     // private
14290     onShow : function(){
14291         var ae = this.getActionEl();
14292         
14293         if(ae){
14294             ae.dom.style.display = '';
14295             ae.dom.style.visibility = 'visible';
14296         }
14297     },
14298
14299     // private
14300     
14301     onHide : function(){
14302         var ae = this.getActionEl();
14303         ae.dom.style.display = 'none';
14304     },
14305
14306     /**
14307      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
14308      * by an implementing function.
14309      * @method
14310      * @param {EventObject} e
14311      */
14312     onTriggerClick : Roo.emptyFn
14313 });
14314  
14315 /*
14316 * Licence: LGPL
14317 */
14318
14319 /**
14320  * @class Roo.bootstrap.form.CardUploader
14321  * @extends Roo.bootstrap.Button
14322  * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
14323  * @cfg {Number} errorTimeout default 3000
14324  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
14325  * @cfg {Array}  html The button text.
14326
14327  *
14328  * @constructor
14329  * Create a new CardUploader
14330  * @param {Object} config The config object
14331  */
14332
14333 Roo.bootstrap.form.CardUploader = function(config){
14334     
14335  
14336     
14337     Roo.bootstrap.form.CardUploader.superclass.constructor.call(this, config);
14338     
14339     
14340     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
14341         return r.data.id
14342      });
14343     
14344      this.addEvents({
14345          // raw events
14346         /**
14347          * @event preview
14348          * When a image is clicked on - and needs to display a slideshow or similar..
14349          * @param {Roo.bootstrap.Card} this
14350          * @param {Object} The image information data 
14351          *
14352          */
14353         'preview' : true,
14354          /**
14355          * @event download
14356          * When a the download link is clicked
14357          * @param {Roo.bootstrap.Card} this
14358          * @param {Object} The image information data  contains 
14359          */
14360         'download' : true
14361         
14362     });
14363 };
14364  
14365 Roo.extend(Roo.bootstrap.form.CardUploader, Roo.bootstrap.form.Input,  {
14366     
14367      
14368     errorTimeout : 3000,
14369      
14370     images : false,
14371    
14372     fileCollection : false,
14373     allowBlank : true,
14374     
14375     getAutoCreate : function()
14376     {
14377         
14378         var cfg =  {
14379             cls :'form-group' ,
14380             cn : [
14381                
14382                 {
14383                     tag: 'label',
14384                    //cls : 'input-group-addon',
14385                     html : this.fieldLabel
14386
14387                 },
14388
14389                 {
14390                     tag: 'input',
14391                     type : 'hidden',
14392                     name : this.name,
14393                     value : this.value,
14394                     cls : 'd-none  form-control'
14395                 },
14396                 
14397                 {
14398                     tag: 'input',
14399                     multiple : 'multiple',
14400                     type : 'file',
14401                     cls : 'd-none  roo-card-upload-selector'
14402                 },
14403                 
14404                 {
14405                     cls : 'roo-card-uploader-button-container w-100 mb-2'
14406                 },
14407                 {
14408                     cls : 'card-columns roo-card-uploader-container'
14409                 }
14410
14411             ]
14412         };
14413            
14414          
14415         return cfg;
14416     },
14417     
14418     getChildContainer : function() /// what children are added to.
14419     {
14420         return this.containerEl;
14421     },
14422    
14423     getButtonContainer : function() /// what children are added to.
14424     {
14425         return this.el.select(".roo-card-uploader-button-container").first();
14426     },
14427    
14428     initEvents : function()
14429     {
14430         
14431         Roo.bootstrap.form.Input.prototype.initEvents.call(this);
14432         
14433         var t = this;
14434         this.addxtype({
14435             xns: Roo.bootstrap,
14436
14437             xtype : 'Button',
14438             container_method : 'getButtonContainer' ,            
14439             html :  this.html, // fix changable?
14440             cls : 'w-100 ',
14441             listeners : {
14442                 'click' : function(btn, e) {
14443                     t.onClick(e);
14444                 }
14445             }
14446         });
14447         
14448         
14449         
14450         
14451         this.urlAPI = (window.createObjectURL && window) || 
14452                                 (window.URL && URL.revokeObjectURL && URL) || 
14453                                 (window.webkitURL && webkitURL);
14454                         
14455          
14456          
14457          
14458         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
14459         
14460         this.selectorEl.on('change', this.onFileSelected, this);
14461         if (this.images) {
14462             var t = this;
14463             this.images.forEach(function(img) {
14464                 t.addCard(img)
14465             });
14466             this.images = false;
14467         }
14468         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
14469          
14470        
14471     },
14472     
14473    
14474     onClick : function(e)
14475     {
14476         e.preventDefault();
14477          
14478         this.selectorEl.dom.click();
14479          
14480     },
14481     
14482     onFileSelected : function(e)
14483     {
14484         e.preventDefault();
14485         
14486         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
14487             return;
14488         }
14489         
14490         Roo.each(this.selectorEl.dom.files, function(file){    
14491             this.addFile(file);
14492         }, this);
14493          
14494     },
14495     
14496       
14497     
14498       
14499     
14500     addFile : function(file)
14501     {
14502            
14503         if(typeof(file) === 'string'){
14504             throw "Add file by name?"; // should not happen
14505             return;
14506         }
14507         
14508         if(!file || !this.urlAPI){
14509             return;
14510         }
14511         
14512         // file;
14513         // file.type;
14514         
14515         var _this = this;
14516         
14517         
14518         var url = _this.urlAPI.createObjectURL( file);
14519            
14520         this.addCard({
14521             id : Roo.bootstrap.form.CardUploader.ID--,
14522             is_uploaded : false,
14523             src : url,
14524             srcfile : file,
14525             title : file.name,
14526             mimetype : file.type,
14527             preview : false,
14528             is_deleted : 0
14529         });
14530         
14531     },
14532     
14533     /**
14534      * addCard - add an Attachment to the uploader
14535      * @param data - the data about the image to upload
14536      *
14537      * {
14538           id : 123
14539           title : "Title of file",
14540           is_uploaded : false,
14541           src : "http://.....",
14542           srcfile : { the File upload object },
14543           mimetype : file.type,
14544           preview : false,
14545           is_deleted : 0
14546           .. any other data...
14547         }
14548      *
14549      * 
14550     */
14551     
14552     addCard : function (data)
14553     {
14554         // hidden input element?
14555         // if the file is not an image...
14556         //then we need to use something other that and header_image
14557         var t = this;
14558         //   remove.....
14559         var footer = [
14560             {
14561                 xns : Roo.bootstrap,
14562                 xtype : 'CardFooter',
14563                  items: [
14564                     {
14565                         xns : Roo.bootstrap,
14566                         xtype : 'Element',
14567                         cls : 'd-flex',
14568                         items : [
14569                             
14570                             {
14571                                 xns : Roo.bootstrap,
14572                                 xtype : 'Button',
14573                                 html : String.format("<small>{0}</small>", data.title),
14574                                 cls : 'col-10 text-left',
14575                                 size: 'sm',
14576                                 weight: 'link',
14577                                 fa : 'download',
14578                                 listeners : {
14579                                     click : function() {
14580                                      
14581                                         t.fireEvent( "download", t, data );
14582                                     }
14583                                 }
14584                             },
14585                           
14586                             {
14587                                 xns : Roo.bootstrap,
14588                                 xtype : 'Button',
14589                                 style: 'max-height: 28px; ',
14590                                 size : 'sm',
14591                                 weight: 'danger',
14592                                 cls : 'col-2',
14593                                 fa : 'times',
14594                                 listeners : {
14595                                     click : function() {
14596                                         t.removeCard(data.id)
14597                                     }
14598                                 }
14599                             }
14600                         ]
14601                     }
14602                     
14603                 ] 
14604             }
14605             
14606         ];
14607         
14608         var cn = this.addxtype(
14609             {
14610                  
14611                 xns : Roo.bootstrap,
14612                 xtype : 'Card',
14613                 closeable : true,
14614                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
14615                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
14616                 header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
14617                 data : data,
14618                 html : false,
14619                  
14620                 items : footer,
14621                 initEvents : function() {
14622                     Roo.bootstrap.Card.prototype.initEvents.call(this);
14623                     var card = this;
14624                     this.imgEl = this.el.select('.card-img-top').first();
14625                     if (this.imgEl) {
14626                         this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this);
14627                         this.imgEl.set({ 'pointer' : 'cursor' });
14628                                   
14629                     }
14630                     this.getCardFooter().addClass('p-1');
14631                     
14632                   
14633                 }
14634                 
14635             }
14636         );
14637         // dont' really need ot update items.
14638         // this.items.push(cn);
14639         this.fileCollection.add(cn);
14640         
14641         if (!data.srcfile) {
14642             this.updateInput();
14643             return;
14644         }
14645             
14646         var _t = this;
14647         var reader = new FileReader();
14648         reader.addEventListener("load", function() {  
14649             data.srcdata =  reader.result;
14650             _t.updateInput();
14651         });
14652         reader.readAsDataURL(data.srcfile);
14653         
14654         
14655         
14656     },
14657     removeCard : function(id)
14658     {
14659         
14660         var card  = this.fileCollection.get(id);
14661         card.data.is_deleted = 1;
14662         card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
14663         //this.fileCollection.remove(card);
14664         //this.items = this.items.filter(function(e) { return e != card });
14665         // dont' really need ot update items.
14666         card.el.dom.parentNode.removeChild(card.el.dom);
14667         this.updateInput();
14668
14669         
14670     },
14671     reset: function()
14672     {
14673         this.fileCollection.each(function(card) {
14674             if (card.el.dom && card.el.dom.parentNode) {
14675                 card.el.dom.parentNode.removeChild(card.el.dom);
14676             }
14677         });
14678         this.fileCollection.clear();
14679         this.updateInput();
14680     },
14681     
14682     updateInput : function()
14683     {
14684          var data = [];
14685         this.fileCollection.each(function(e) {
14686             data.push(e.data);
14687             
14688         });
14689         this.inputEl().dom.value = JSON.stringify(data);
14690         
14691         
14692         
14693     }
14694     
14695     
14696 });
14697
14698
14699 Roo.bootstrap.form.CardUploader.ID = -1;/*
14700  * Based on:
14701  * Ext JS Library 1.1.1
14702  * Copyright(c) 2006-2007, Ext JS, LLC.
14703  *
14704  * Originally Released Under LGPL - original licence link has changed is not relivant.
14705  *
14706  * Fork - LGPL
14707  * <script type="text/javascript">
14708  */
14709
14710
14711 /**
14712  * @class Roo.data.SortTypes
14713  * @static
14714  * Defines the default sorting (casting?) comparison functions used when sorting data.
14715  */
14716 Roo.data.SortTypes = {
14717     /**
14718      * Default sort that does nothing
14719      * @param {Mixed} s The value being converted
14720      * @return {Mixed} The comparison value
14721      */
14722     none : function(s){
14723         return s;
14724     },
14725     
14726     /**
14727      * The regular expression used to strip tags
14728      * @type {RegExp}
14729      * @property
14730      */
14731     stripTagsRE : /<\/?[^>]+>/gi,
14732     
14733     /**
14734      * Strips all HTML tags to sort on text only
14735      * @param {Mixed} s The value being converted
14736      * @return {String} The comparison value
14737      */
14738     asText : function(s){
14739         return String(s).replace(this.stripTagsRE, "");
14740     },
14741     
14742     /**
14743      * Strips all HTML tags to sort on text only - Case insensitive
14744      * @param {Mixed} s The value being converted
14745      * @return {String} The comparison value
14746      */
14747     asUCText : function(s){
14748         return String(s).toUpperCase().replace(this.stripTagsRE, "");
14749     },
14750     
14751     /**
14752      * Case insensitive string
14753      * @param {Mixed} s The value being converted
14754      * @return {String} The comparison value
14755      */
14756     asUCString : function(s) {
14757         return String(s).toUpperCase();
14758     },
14759     
14760     /**
14761      * Date sorting
14762      * @param {Mixed} s The value being converted
14763      * @return {Number} The comparison value
14764      */
14765     asDate : function(s) {
14766         if(!s){
14767             return 0;
14768         }
14769         if(s instanceof Date){
14770             return s.getTime();
14771         }
14772         return Date.parse(String(s));
14773     },
14774     
14775     /**
14776      * Float sorting
14777      * @param {Mixed} s The value being converted
14778      * @return {Float} The comparison value
14779      */
14780     asFloat : function(s) {
14781         var val = parseFloat(String(s).replace(/,/g, ""));
14782         if(isNaN(val)) {
14783             val = 0;
14784         }
14785         return val;
14786     },
14787     
14788     /**
14789      * Integer sorting
14790      * @param {Mixed} s The value being converted
14791      * @return {Number} The comparison value
14792      */
14793     asInt : function(s) {
14794         var val = parseInt(String(s).replace(/,/g, ""));
14795         if(isNaN(val)) {
14796             val = 0;
14797         }
14798         return val;
14799     }
14800 };/*
14801  * Based on:
14802  * Ext JS Library 1.1.1
14803  * Copyright(c) 2006-2007, Ext JS, LLC.
14804  *
14805  * Originally Released Under LGPL - original licence link has changed is not relivant.
14806  *
14807  * Fork - LGPL
14808  * <script type="text/javascript">
14809  */
14810
14811 /**
14812 * @class Roo.data.Record
14813  * Instances of this class encapsulate both record <em>definition</em> information, and record
14814  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
14815  * to access Records cached in an {@link Roo.data.Store} object.<br>
14816  * <p>
14817  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
14818  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
14819  * objects.<br>
14820  * <p>
14821  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
14822  * @constructor
14823  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
14824  * {@link #create}. The parameters are the same.
14825  * @param {Array} data An associative Array of data values keyed by the field name.
14826  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
14827  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
14828  * not specified an integer id is generated.
14829  */
14830 Roo.data.Record = function(data, id){
14831     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
14832     this.data = data;
14833 };
14834
14835 /**
14836  * Generate a constructor for a specific record layout.
14837  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
14838  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
14839  * Each field definition object may contain the following properties: <ul>
14840  * <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,
14841  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
14842  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
14843  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
14844  * is being used, then this is a string containing the javascript expression to reference the data relative to 
14845  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
14846  * to the data item relative to the record element. If the mapping expression is the same as the field name,
14847  * this may be omitted.</p></li>
14848  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
14849  * <ul><li>auto (Default, implies no conversion)</li>
14850  * <li>string</li>
14851  * <li>int</li>
14852  * <li>float</li>
14853  * <li>boolean</li>
14854  * <li>date</li></ul></p></li>
14855  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
14856  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
14857  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
14858  * by the Reader into an object that will be stored in the Record. It is passed the
14859  * following parameters:<ul>
14860  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
14861  * </ul></p></li>
14862  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
14863  * </ul>
14864  * <br>usage:<br><pre><code>
14865 var TopicRecord = Roo.data.Record.create(
14866     {name: 'title', mapping: 'topic_title'},
14867     {name: 'author', mapping: 'username'},
14868     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
14869     {name: 'lastPost', mapping: 'post_time', type: 'date'},
14870     {name: 'lastPoster', mapping: 'user2'},
14871     {name: 'excerpt', mapping: 'post_text'}
14872 );
14873
14874 var myNewRecord = new TopicRecord({
14875     title: 'Do my job please',
14876     author: 'noobie',
14877     totalPosts: 1,
14878     lastPost: new Date(),
14879     lastPoster: 'Animal',
14880     excerpt: 'No way dude!'
14881 });
14882 myStore.add(myNewRecord);
14883 </code></pre>
14884  * @method create
14885  * @static
14886  */
14887 Roo.data.Record.create = function(o){
14888     var f = function(){
14889         f.superclass.constructor.apply(this, arguments);
14890     };
14891     Roo.extend(f, Roo.data.Record);
14892     var p = f.prototype;
14893     p.fields = new Roo.util.MixedCollection(false, function(field){
14894         return field.name;
14895     });
14896     for(var i = 0, len = o.length; i < len; i++){
14897         p.fields.add(new Roo.data.Field(o[i]));
14898     }
14899     f.getField = function(name){
14900         return p.fields.get(name);  
14901     };
14902     return f;
14903 };
14904
14905 Roo.data.Record.AUTO_ID = 1000;
14906 Roo.data.Record.EDIT = 'edit';
14907 Roo.data.Record.REJECT = 'reject';
14908 Roo.data.Record.COMMIT = 'commit';
14909
14910 Roo.data.Record.prototype = {
14911     /**
14912      * Readonly flag - true if this record has been modified.
14913      * @type Boolean
14914      */
14915     dirty : false,
14916     editing : false,
14917     error: null,
14918     modified: null,
14919
14920     // private
14921     join : function(store){
14922         this.store = store;
14923     },
14924
14925     /**
14926      * Set the named field to the specified value.
14927      * @param {String} name The name of the field to set.
14928      * @param {Object} value The value to set the field to.
14929      */
14930     set : function(name, value){
14931         if(this.data[name] == value){
14932             return;
14933         }
14934         this.dirty = true;
14935         if(!this.modified){
14936             this.modified = {};
14937         }
14938         if(typeof this.modified[name] == 'undefined'){
14939             this.modified[name] = this.data[name];
14940         }
14941         this.data[name] = value;
14942         if(!this.editing && this.store){
14943             this.store.afterEdit(this);
14944         }       
14945     },
14946
14947     /**
14948      * Get the value of the named field.
14949      * @param {String} name The name of the field to get the value of.
14950      * @return {Object} The value of the field.
14951      */
14952     get : function(name){
14953         return this.data[name]; 
14954     },
14955
14956     // private
14957     beginEdit : function(){
14958         this.editing = true;
14959         this.modified = {}; 
14960     },
14961
14962     // private
14963     cancelEdit : function(){
14964         this.editing = false;
14965         delete this.modified;
14966     },
14967
14968     // private
14969     endEdit : function(){
14970         this.editing = false;
14971         if(this.dirty && this.store){
14972             this.store.afterEdit(this);
14973         }
14974     },
14975
14976     /**
14977      * Usually called by the {@link Roo.data.Store} which owns the Record.
14978      * Rejects all changes made to the Record since either creation, or the last commit operation.
14979      * Modified fields are reverted to their original values.
14980      * <p>
14981      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
14982      * of reject operations.
14983      */
14984     reject : function(){
14985         var m = this.modified;
14986         for(var n in m){
14987             if(typeof m[n] != "function"){
14988                 this.data[n] = m[n];
14989             }
14990         }
14991         this.dirty = false;
14992         delete this.modified;
14993         this.editing = false;
14994         if(this.store){
14995             this.store.afterReject(this);
14996         }
14997     },
14998
14999     /**
15000      * Usually called by the {@link Roo.data.Store} which owns the Record.
15001      * Commits all changes made to the Record since either creation, or the last commit operation.
15002      * <p>
15003      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
15004      * of commit operations.
15005      */
15006     commit : function(){
15007         this.dirty = false;
15008         delete this.modified;
15009         this.editing = false;
15010         if(this.store){
15011             this.store.afterCommit(this);
15012         }
15013     },
15014
15015     // private
15016     hasError : function(){
15017         return this.error != null;
15018     },
15019
15020     // private
15021     clearError : function(){
15022         this.error = null;
15023     },
15024
15025     /**
15026      * Creates a copy of this record.
15027      * @param {String} id (optional) A new record id if you don't want to use this record's id
15028      * @return {Record}
15029      */
15030     copy : function(newId) {
15031         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
15032     }
15033 };/*
15034  * Based on:
15035  * Ext JS Library 1.1.1
15036  * Copyright(c) 2006-2007, Ext JS, LLC.
15037  *
15038  * Originally Released Under LGPL - original licence link has changed is not relivant.
15039  *
15040  * Fork - LGPL
15041  * <script type="text/javascript">
15042  */
15043
15044
15045
15046 /**
15047  * @class Roo.data.Store
15048  * @extends Roo.util.Observable
15049  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
15050  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
15051  * <p>
15052  * 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
15053  * has no knowledge of the format of the data returned by the Proxy.<br>
15054  * <p>
15055  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
15056  * instances from the data object. These records are cached and made available through accessor functions.
15057  * @constructor
15058  * Creates a new Store.
15059  * @param {Object} config A config object containing the objects needed for the Store to access data,
15060  * and read the data into Records.
15061  */
15062 Roo.data.Store = function(config){
15063     this.data = new Roo.util.MixedCollection(false);
15064     this.data.getKey = function(o){
15065         return o.id;
15066     };
15067     this.baseParams = {};
15068     // private
15069     this.paramNames = {
15070         "start" : "start",
15071         "limit" : "limit",
15072         "sort" : "sort",
15073         "dir" : "dir",
15074         "multisort" : "_multisort"
15075     };
15076
15077     if(config && config.data){
15078         this.inlineData = config.data;
15079         delete config.data;
15080     }
15081
15082     Roo.apply(this, config);
15083     
15084     if(this.reader){ // reader passed
15085         this.reader = Roo.factory(this.reader, Roo.data);
15086         this.reader.xmodule = this.xmodule || false;
15087         if(!this.recordType){
15088             this.recordType = this.reader.recordType;
15089         }
15090         if(this.reader.onMetaChange){
15091             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
15092         }
15093     }
15094
15095     if(this.recordType){
15096         this.fields = this.recordType.prototype.fields;
15097     }
15098     this.modified = [];
15099
15100     this.addEvents({
15101         /**
15102          * @event datachanged
15103          * Fires when the data cache has changed, and a widget which is using this Store
15104          * as a Record cache should refresh its view.
15105          * @param {Store} this
15106          */
15107         datachanged : true,
15108         /**
15109          * @event metachange
15110          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
15111          * @param {Store} this
15112          * @param {Object} meta The JSON metadata
15113          */
15114         metachange : true,
15115         /**
15116          * @event add
15117          * Fires when Records have been added to the Store
15118          * @param {Store} this
15119          * @param {Roo.data.Record[]} records The array of Records added
15120          * @param {Number} index The index at which the record(s) were added
15121          */
15122         add : true,
15123         /**
15124          * @event remove
15125          * Fires when a Record has been removed from the Store
15126          * @param {Store} this
15127          * @param {Roo.data.Record} record The Record that was removed
15128          * @param {Number} index The index at which the record was removed
15129          */
15130         remove : true,
15131         /**
15132          * @event update
15133          * Fires when a Record has been updated
15134          * @param {Store} this
15135          * @param {Roo.data.Record} record The Record that was updated
15136          * @param {String} operation The update operation being performed.  Value may be one of:
15137          * <pre><code>
15138  Roo.data.Record.EDIT
15139  Roo.data.Record.REJECT
15140  Roo.data.Record.COMMIT
15141          * </code></pre>
15142          */
15143         update : true,
15144         /**
15145          * @event clear
15146          * Fires when the data cache has been cleared.
15147          * @param {Store} this
15148          */
15149         clear : true,
15150         /**
15151          * @event beforeload
15152          * Fires before a request is made for a new data object.  If the beforeload handler returns false
15153          * the load action will be canceled.
15154          * @param {Store} this
15155          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15156          */
15157         beforeload : true,
15158         /**
15159          * @event beforeloadadd
15160          * Fires after a new set of Records has been loaded.
15161          * @param {Store} this
15162          * @param {Roo.data.Record[]} records The Records that were loaded
15163          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15164          */
15165         beforeloadadd : true,
15166         /**
15167          * @event load
15168          * Fires after a new set of Records has been loaded, before they are added to the store.
15169          * @param {Store} this
15170          * @param {Roo.data.Record[]} records The Records that were loaded
15171          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15172          * @params {Object} return from reader
15173          */
15174         load : true,
15175         /**
15176          * @event loadexception
15177          * Fires if an exception occurs in the Proxy during loading.
15178          * Called with the signature of the Proxy's "loadexception" event.
15179          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
15180          * 
15181          * @param {Proxy} 
15182          * @param {Object} ret return data from JsonData.reader() - success, totalRecords, records
15183          * @param {Object} opts - load Options
15184          * @param {Object} jsonData from your request (normally this contains the Exception)
15185          */
15186         loadexception : true
15187     });
15188     
15189     if(this.proxy){
15190         this.proxy = Roo.factory(this.proxy, Roo.data);
15191         this.proxy.xmodule = this.xmodule || false;
15192         this.relayEvents(this.proxy,  ["loadexception"]);
15193     }
15194     this.sortToggle = {};
15195     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
15196
15197     Roo.data.Store.superclass.constructor.call(this);
15198
15199     if(this.inlineData){
15200         this.loadData(this.inlineData);
15201         delete this.inlineData;
15202     }
15203 };
15204
15205 Roo.extend(Roo.data.Store, Roo.util.Observable, {
15206      /**
15207     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
15208     * without a remote query - used by combo/forms at present.
15209     */
15210     
15211     /**
15212     * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
15213     */
15214     /**
15215     * @cfg {Array} data Inline data to be loaded when the store is initialized.
15216     */
15217     /**
15218     * @cfg {Roo.data.DataReader} reader [required]  The Reader object which processes the data object and returns
15219     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
15220     */
15221     /**
15222     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
15223     * on any HTTP request
15224     */
15225     /**
15226     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
15227     */
15228     /**
15229     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
15230     */
15231     multiSort: false,
15232     /**
15233     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
15234     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
15235     */
15236     remoteSort : false,
15237
15238     /**
15239     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
15240      * loaded or when a record is removed. (defaults to false).
15241     */
15242     pruneModifiedRecords : false,
15243
15244     // private
15245     lastOptions : null,
15246
15247     /**
15248      * Add Records to the Store and fires the add event.
15249      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15250      */
15251     add : function(records){
15252         records = [].concat(records);
15253         for(var i = 0, len = records.length; i < len; i++){
15254             records[i].join(this);
15255         }
15256         var index = this.data.length;
15257         this.data.addAll(records);
15258         this.fireEvent("add", this, records, index);
15259     },
15260
15261     /**
15262      * Remove a Record from the Store and fires the remove event.
15263      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
15264      */
15265     remove : function(record){
15266         var index = this.data.indexOf(record);
15267         this.data.removeAt(index);
15268  
15269         if(this.pruneModifiedRecords){
15270             this.modified.remove(record);
15271         }
15272         this.fireEvent("remove", this, record, index);
15273     },
15274
15275     /**
15276      * Remove all Records from the Store and fires the clear event.
15277      */
15278     removeAll : function(){
15279         this.data.clear();
15280         if(this.pruneModifiedRecords){
15281             this.modified = [];
15282         }
15283         this.fireEvent("clear", this);
15284     },
15285
15286     /**
15287      * Inserts Records to the Store at the given index and fires the add event.
15288      * @param {Number} index The start index at which to insert the passed Records.
15289      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15290      */
15291     insert : function(index, records){
15292         records = [].concat(records);
15293         for(var i = 0, len = records.length; i < len; i++){
15294             this.data.insert(index, records[i]);
15295             records[i].join(this);
15296         }
15297         this.fireEvent("add", this, records, index);
15298     },
15299
15300     /**
15301      * Get the index within the cache of the passed Record.
15302      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
15303      * @return {Number} The index of the passed Record. Returns -1 if not found.
15304      */
15305     indexOf : function(record){
15306         return this.data.indexOf(record);
15307     },
15308
15309     /**
15310      * Get the index within the cache of the Record with the passed id.
15311      * @param {String} id The id of the Record to find.
15312      * @return {Number} The index of the Record. Returns -1 if not found.
15313      */
15314     indexOfId : function(id){
15315         return this.data.indexOfKey(id);
15316     },
15317
15318     /**
15319      * Get the Record with the specified id.
15320      * @param {String} id The id of the Record to find.
15321      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
15322      */
15323     getById : function(id){
15324         return this.data.key(id);
15325     },
15326
15327     /**
15328      * Get the Record at the specified index.
15329      * @param {Number} index The index of the Record to find.
15330      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
15331      */
15332     getAt : function(index){
15333         return this.data.itemAt(index);
15334     },
15335
15336     /**
15337      * Returns a range of Records between specified indices.
15338      * @param {Number} startIndex (optional) The starting index (defaults to 0)
15339      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
15340      * @return {Roo.data.Record[]} An array of Records
15341      */
15342     getRange : function(start, end){
15343         return this.data.getRange(start, end);
15344     },
15345
15346     // private
15347     storeOptions : function(o){
15348         o = Roo.apply({}, o);
15349         delete o.callback;
15350         delete o.scope;
15351         this.lastOptions = o;
15352     },
15353
15354     /**
15355      * Loads the Record cache from the configured Proxy using the configured Reader.
15356      * <p>
15357      * If using remote paging, then the first load call must specify the <em>start</em>
15358      * and <em>limit</em> properties in the options.params property to establish the initial
15359      * position within the dataset, and the number of Records to cache on each read from the Proxy.
15360      * <p>
15361      * <strong>It is important to note that for remote data sources, loading is asynchronous,
15362      * and this call will return before the new data has been loaded. Perform any post-processing
15363      * in a callback function, or in a "load" event handler.</strong>
15364      * <p>
15365      * @param {Object} options An object containing properties which control loading options:<ul>
15366      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
15367      * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
15368      * <pre>
15369                 {
15370                     data : data,  // array of key=>value data like JsonReader
15371                     total : data.length,
15372                     success : true
15373                     
15374                 }
15375         </pre>
15376             }.</li>
15377      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
15378      * passed the following arguments:<ul>
15379      * <li>r : Roo.data.Record[]</li>
15380      * <li>options: Options object from the load call</li>
15381      * <li>success: Boolean success indicator</li></ul></li>
15382      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
15383      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
15384      * </ul>
15385      */
15386     load : function(options){
15387         options = options || {};
15388         if(this.fireEvent("beforeload", this, options) !== false){
15389             this.storeOptions(options);
15390             var p = Roo.apply(options.params || {}, this.baseParams);
15391             // if meta was not loaded from remote source.. try requesting it.
15392             if (!this.reader.metaFromRemote) {
15393                 p._requestMeta = 1;
15394             }
15395             if(this.sortInfo && this.remoteSort){
15396                 var pn = this.paramNames;
15397                 p[pn["sort"]] = this.sortInfo.field;
15398                 p[pn["dir"]] = this.sortInfo.direction;
15399             }
15400             if (this.multiSort) {
15401                 var pn = this.paramNames;
15402                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
15403             }
15404             
15405             this.proxy.load(p, this.reader, this.loadRecords, this, options);
15406         }
15407     },
15408
15409     /**
15410      * Reloads the Record cache from the configured Proxy using the configured Reader and
15411      * the options from the last load operation performed.
15412      * @param {Object} options (optional) An object containing properties which may override the options
15413      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
15414      * the most recently used options are reused).
15415      */
15416     reload : function(options){
15417         this.load(Roo.applyIf(options||{}, this.lastOptions));
15418     },
15419
15420     // private
15421     // Called as a callback by the Reader during a load operation.
15422     loadRecords : function(o, options, success){
15423          
15424         if(!o){
15425             if(success !== false){
15426                 this.fireEvent("load", this, [], options, o);
15427             }
15428             if(options.callback){
15429                 options.callback.call(options.scope || this, [], options, false);
15430             }
15431             return;
15432         }
15433         // if data returned failure - throw an exception.
15434         if (o.success === false) {
15435             // show a message if no listener is registered.
15436             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
15437                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
15438             }
15439             // loadmask wil be hooked into this..
15440             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
15441             return;
15442         }
15443         var r = o.records, t = o.totalRecords || r.length;
15444         
15445         this.fireEvent("beforeloadadd", this, r, options, o);
15446         
15447         if(!options || options.add !== true){
15448             if(this.pruneModifiedRecords){
15449                 this.modified = [];
15450             }
15451             for(var i = 0, len = r.length; i < len; i++){
15452                 r[i].join(this);
15453             }
15454             if(this.snapshot){
15455                 this.data = this.snapshot;
15456                 delete this.snapshot;
15457             }
15458             this.data.clear();
15459             this.data.addAll(r);
15460             this.totalLength = t;
15461             this.applySort();
15462             this.fireEvent("datachanged", this);
15463         }else{
15464             this.totalLength = Math.max(t, this.data.length+r.length);
15465             this.add(r);
15466         }
15467         
15468         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
15469                 
15470             var e = new Roo.data.Record({});
15471
15472             e.set(this.parent.displayField, this.parent.emptyTitle);
15473             e.set(this.parent.valueField, '');
15474
15475             this.insert(0, e);
15476         }
15477             
15478         this.fireEvent("load", this, r, options, o);
15479         if(options.callback){
15480             options.callback.call(options.scope || this, r, options, true);
15481         }
15482     },
15483
15484
15485     /**
15486      * Loads data from a passed data block. A Reader which understands the format of the data
15487      * must have been configured in the constructor.
15488      * @param {Object} data The data block from which to read the Records.  The format of the data expected
15489      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
15490      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
15491      */
15492     loadData : function(o, append){
15493         var r = this.reader.readRecords(o);
15494         this.loadRecords(r, {add: append}, true);
15495     },
15496     
15497      /**
15498      * using 'cn' the nested child reader read the child array into it's child stores.
15499      * @param {Object} rec The record with a 'children array
15500      */
15501     loadDataFromChildren : function(rec)
15502     {
15503         this.loadData(this.reader.toLoadData(rec));
15504     },
15505     
15506
15507     /**
15508      * Gets the number of cached records.
15509      * <p>
15510      * <em>If using paging, this may not be the total size of the dataset. If the data object
15511      * used by the Reader contains the dataset size, then the getTotalCount() function returns
15512      * the data set size</em>
15513      */
15514     getCount : function(){
15515         return this.data.length || 0;
15516     },
15517
15518     /**
15519      * Gets the total number of records in the dataset as returned by the server.
15520      * <p>
15521      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
15522      * the dataset size</em>
15523      */
15524     getTotalCount : function(){
15525         return this.totalLength || 0;
15526     },
15527
15528     /**
15529      * Returns the sort state of the Store as an object with two properties:
15530      * <pre><code>
15531  field {String} The name of the field by which the Records are sorted
15532  direction {String} The sort order, "ASC" or "DESC"
15533      * </code></pre>
15534      */
15535     getSortState : function(){
15536         return this.sortInfo;
15537     },
15538
15539     // private
15540     applySort : function(){
15541         if(this.sortInfo && !this.remoteSort){
15542             var s = this.sortInfo, f = s.field;
15543             var st = this.fields.get(f).sortType;
15544             var fn = function(r1, r2){
15545                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
15546                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
15547             };
15548             this.data.sort(s.direction, fn);
15549             if(this.snapshot && this.snapshot != this.data){
15550                 this.snapshot.sort(s.direction, fn);
15551             }
15552         }
15553     },
15554
15555     /**
15556      * Sets the default sort column and order to be used by the next load operation.
15557      * @param {String} fieldName The name of the field to sort by.
15558      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15559      */
15560     setDefaultSort : function(field, dir){
15561         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
15562     },
15563
15564     /**
15565      * Sort the Records.
15566      * If remote sorting is used, the sort is performed on the server, and the cache is
15567      * reloaded. If local sorting is used, the cache is sorted internally.
15568      * @param {String} fieldName The name of the field to sort by.
15569      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15570      */
15571     sort : function(fieldName, dir){
15572         var f = this.fields.get(fieldName);
15573         if(!dir){
15574             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
15575             
15576             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
15577                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
15578             }else{
15579                 dir = f.sortDir;
15580             }
15581         }
15582         this.sortToggle[f.name] = dir;
15583         this.sortInfo = {field: f.name, direction: dir};
15584         if(!this.remoteSort){
15585             this.applySort();
15586             this.fireEvent("datachanged", this);
15587         }else{
15588             this.load(this.lastOptions);
15589         }
15590     },
15591
15592     /**
15593      * Calls the specified function for each of the Records in the cache.
15594      * @param {Function} fn The function to call. The Record is passed as the first parameter.
15595      * Returning <em>false</em> aborts and exits the iteration.
15596      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
15597      */
15598     each : function(fn, scope){
15599         this.data.each(fn, scope);
15600     },
15601
15602     /**
15603      * Gets all records modified since the last commit.  Modified records are persisted across load operations
15604      * (e.g., during paging).
15605      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
15606      */
15607     getModifiedRecords : function(){
15608         return this.modified;
15609     },
15610
15611     // private
15612     createFilterFn : function(property, value, anyMatch){
15613         if(!value.exec){ // not a regex
15614             value = String(value);
15615             if(value.length == 0){
15616                 return false;
15617             }
15618             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
15619         }
15620         return function(r){
15621             return value.test(r.data[property]);
15622         };
15623     },
15624
15625     /**
15626      * Sums the value of <i>property</i> for each record between start and end and returns the result.
15627      * @param {String} property A field on your records
15628      * @param {Number} start The record index to start at (defaults to 0)
15629      * @param {Number} end The last record index to include (defaults to length - 1)
15630      * @return {Number} The sum
15631      */
15632     sum : function(property, start, end){
15633         var rs = this.data.items, v = 0;
15634         start = start || 0;
15635         end = (end || end === 0) ? end : rs.length-1;
15636
15637         for(var i = start; i <= end; i++){
15638             v += (rs[i].data[property] || 0);
15639         }
15640         return v;
15641     },
15642
15643     /**
15644      * Filter the records by a specified property.
15645      * @param {String} field A field on your records
15646      * @param {String/RegExp} value Either a string that the field
15647      * should start with or a RegExp to test against the field
15648      * @param {Boolean} anyMatch True to match any part not just the beginning
15649      */
15650     filter : function(property, value, anyMatch){
15651         var fn = this.createFilterFn(property, value, anyMatch);
15652         return fn ? this.filterBy(fn) : this.clearFilter();
15653     },
15654
15655     /**
15656      * Filter by a function. The specified function will be called with each
15657      * record in this data source. If the function returns true the record is included,
15658      * otherwise it is filtered.
15659      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15660      * @param {Object} scope (optional) The scope of the function (defaults to this)
15661      */
15662     filterBy : function(fn, scope){
15663         this.snapshot = this.snapshot || this.data;
15664         this.data = this.queryBy(fn, scope||this);
15665         this.fireEvent("datachanged", this);
15666     },
15667
15668     /**
15669      * Query the records by a specified property.
15670      * @param {String} field A field on your records
15671      * @param {String/RegExp} value Either a string that the field
15672      * should start with or a RegExp to test against the field
15673      * @param {Boolean} anyMatch True to match any part not just the beginning
15674      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15675      */
15676     query : function(property, value, anyMatch){
15677         var fn = this.createFilterFn(property, value, anyMatch);
15678         return fn ? this.queryBy(fn) : this.data.clone();
15679     },
15680
15681     /**
15682      * Query by a function. The specified function will be called with each
15683      * record in this data source. If the function returns true the record is included
15684      * in the results.
15685      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15686      * @param {Object} scope (optional) The scope of the function (defaults to this)
15687       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15688      **/
15689     queryBy : function(fn, scope){
15690         var data = this.snapshot || this.data;
15691         return data.filterBy(fn, scope||this);
15692     },
15693
15694     /**
15695      * Collects unique values for a particular dataIndex from this store.
15696      * @param {String} dataIndex The property to collect
15697      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
15698      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
15699      * @return {Array} An array of the unique values
15700      **/
15701     collect : function(dataIndex, allowNull, bypassFilter){
15702         var d = (bypassFilter === true && this.snapshot) ?
15703                 this.snapshot.items : this.data.items;
15704         var v, sv, r = [], l = {};
15705         for(var i = 0, len = d.length; i < len; i++){
15706             v = d[i].data[dataIndex];
15707             sv = String(v);
15708             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
15709                 l[sv] = true;
15710                 r[r.length] = v;
15711             }
15712         }
15713         return r;
15714     },
15715
15716     /**
15717      * Revert to a view of the Record cache with no filtering applied.
15718      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
15719      */
15720     clearFilter : function(suppressEvent){
15721         if(this.snapshot && this.snapshot != this.data){
15722             this.data = this.snapshot;
15723             delete this.snapshot;
15724             if(suppressEvent !== true){
15725                 this.fireEvent("datachanged", this);
15726             }
15727         }
15728     },
15729
15730     // private
15731     afterEdit : function(record){
15732         if(this.modified.indexOf(record) == -1){
15733             this.modified.push(record);
15734         }
15735         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
15736     },
15737     
15738     // private
15739     afterReject : function(record){
15740         this.modified.remove(record);
15741         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
15742     },
15743
15744     // private
15745     afterCommit : function(record){
15746         this.modified.remove(record);
15747         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
15748     },
15749
15750     /**
15751      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
15752      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
15753      */
15754     commitChanges : function(){
15755         var m = this.modified.slice(0);
15756         this.modified = [];
15757         for(var i = 0, len = m.length; i < len; i++){
15758             m[i].commit();
15759         }
15760     },
15761
15762     /**
15763      * Cancel outstanding changes on all changed records.
15764      */
15765     rejectChanges : function(){
15766         var m = this.modified.slice(0);
15767         this.modified = [];
15768         for(var i = 0, len = m.length; i < len; i++){
15769             m[i].reject();
15770         }
15771     },
15772
15773     onMetaChange : function(meta, rtype, o){
15774         this.recordType = rtype;
15775         this.fields = rtype.prototype.fields;
15776         delete this.snapshot;
15777         this.sortInfo = meta.sortInfo || this.sortInfo;
15778         this.modified = [];
15779         this.fireEvent('metachange', this, this.reader.meta);
15780     },
15781     
15782     moveIndex : function(data, type)
15783     {
15784         var index = this.indexOf(data);
15785         
15786         var newIndex = index + type;
15787         
15788         this.remove(data);
15789         
15790         this.insert(newIndex, data);
15791         
15792     }
15793 });/*
15794  * Based on:
15795  * Ext JS Library 1.1.1
15796  * Copyright(c) 2006-2007, Ext JS, LLC.
15797  *
15798  * Originally Released Under LGPL - original licence link has changed is not relivant.
15799  *
15800  * Fork - LGPL
15801  * <script type="text/javascript">
15802  */
15803
15804 /**
15805  * @class Roo.data.SimpleStore
15806  * @extends Roo.data.Store
15807  * Small helper class to make creating Stores from Array data easier.
15808  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
15809  * @cfg {Array} fields An array of field definition objects, or field name strings.
15810  * @cfg {Object} an existing reader (eg. copied from another store)
15811  * @cfg {Array} data The multi-dimensional array of data
15812  * @cfg {Roo.data.DataProxy} proxy [not-required]  
15813  * @cfg {Roo.data.Reader} reader  [not-required] 
15814  * @constructor
15815  * @param {Object} config
15816  */
15817 Roo.data.SimpleStore = function(config)
15818 {
15819     Roo.data.SimpleStore.superclass.constructor.call(this, {
15820         isLocal : true,
15821         reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
15822                 id: config.id
15823             },
15824             Roo.data.Record.create(config.fields)
15825         ),
15826         proxy : new Roo.data.MemoryProxy(config.data)
15827     });
15828     this.load();
15829 };
15830 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
15831  * Based on:
15832  * Ext JS Library 1.1.1
15833  * Copyright(c) 2006-2007, Ext JS, LLC.
15834  *
15835  * Originally Released Under LGPL - original licence link has changed is not relivant.
15836  *
15837  * Fork - LGPL
15838  * <script type="text/javascript">
15839  */
15840
15841 /**
15842 /**
15843  * @extends Roo.data.Store
15844  * @class Roo.data.JsonStore
15845  * Small helper class to make creating Stores for JSON data easier. <br/>
15846 <pre><code>
15847 var store = new Roo.data.JsonStore({
15848     url: 'get-images.php',
15849     root: 'images',
15850     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
15851 });
15852 </code></pre>
15853  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
15854  * JsonReader and HttpProxy (unless inline data is provided).</b>
15855  * @cfg {Array} fields An array of field definition objects, or field name strings.
15856  * @constructor
15857  * @param {Object} config
15858  */
15859 Roo.data.JsonStore = function(c){
15860     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
15861         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
15862         reader: new Roo.data.JsonReader(c, c.fields)
15863     }));
15864 };
15865 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
15866  * Based on:
15867  * Ext JS Library 1.1.1
15868  * Copyright(c) 2006-2007, Ext JS, LLC.
15869  *
15870  * Originally Released Under LGPL - original licence link has changed is not relivant.
15871  *
15872  * Fork - LGPL
15873  * <script type="text/javascript">
15874  */
15875
15876  
15877 Roo.data.Field = function(config){
15878     if(typeof config == "string"){
15879         config = {name: config};
15880     }
15881     Roo.apply(this, config);
15882     
15883     if(!this.type){
15884         this.type = "auto";
15885     }
15886     
15887     var st = Roo.data.SortTypes;
15888     // named sortTypes are supported, here we look them up
15889     if(typeof this.sortType == "string"){
15890         this.sortType = st[this.sortType];
15891     }
15892     
15893     // set default sortType for strings and dates
15894     if(!this.sortType){
15895         switch(this.type){
15896             case "string":
15897                 this.sortType = st.asUCString;
15898                 break;
15899             case "date":
15900                 this.sortType = st.asDate;
15901                 break;
15902             default:
15903                 this.sortType = st.none;
15904         }
15905     }
15906
15907     // define once
15908     var stripRe = /[\$,%]/g;
15909
15910     // prebuilt conversion function for this field, instead of
15911     // switching every time we're reading a value
15912     if(!this.convert){
15913         var cv, dateFormat = this.dateFormat;
15914         switch(this.type){
15915             case "":
15916             case "auto":
15917             case undefined:
15918                 cv = function(v){ return v; };
15919                 break;
15920             case "string":
15921                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
15922                 break;
15923             case "int":
15924                 cv = function(v){
15925                     return v !== undefined && v !== null && v !== '' ?
15926                            parseInt(String(v).replace(stripRe, ""), 10) : '';
15927                     };
15928                 break;
15929             case "float":
15930                 cv = function(v){
15931                     return v !== undefined && v !== null && v !== '' ?
15932                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
15933                     };
15934                 break;
15935             case "bool":
15936             case "boolean":
15937                 cv = function(v){ return v === true || v === "true" || v == 1; };
15938                 break;
15939             case "date":
15940                 cv = function(v){
15941                     if(!v){
15942                         return '';
15943                     }
15944                     if(v instanceof Date){
15945                         return v;
15946                     }
15947                     if(dateFormat){
15948                         if(dateFormat == "timestamp"){
15949                             return new Date(v*1000);
15950                         }
15951                         return Date.parseDate(v, dateFormat);
15952                     }
15953                     var parsed = Date.parse(v);
15954                     return parsed ? new Date(parsed) : null;
15955                 };
15956              break;
15957             
15958         }
15959         this.convert = cv;
15960     }
15961 };
15962
15963 Roo.data.Field.prototype = {
15964     dateFormat: null,
15965     defaultValue: "",
15966     mapping: null,
15967     sortType : null,
15968     sortDir : "ASC"
15969 };/*
15970  * Based on:
15971  * Ext JS Library 1.1.1
15972  * Copyright(c) 2006-2007, Ext JS, LLC.
15973  *
15974  * Originally Released Under LGPL - original licence link has changed is not relivant.
15975  *
15976  * Fork - LGPL
15977  * <script type="text/javascript">
15978  */
15979  
15980 // Base class for reading structured data from a data source.  This class is intended to be
15981 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
15982
15983 /**
15984  * @class Roo.data.DataReader
15985  * @abstract
15986  * Base class for reading structured data from a data source.  This class is intended to be
15987  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
15988  */
15989
15990 Roo.data.DataReader = function(meta, recordType){
15991     
15992     this.meta = meta;
15993     
15994     this.recordType = recordType instanceof Array ? 
15995         Roo.data.Record.create(recordType) : recordType;
15996 };
15997
15998 Roo.data.DataReader.prototype = {
15999     
16000     
16001     readerType : 'Data',
16002      /**
16003      * Create an empty record
16004      * @param {Object} data (optional) - overlay some values
16005      * @return {Roo.data.Record} record created.
16006      */
16007     newRow :  function(d) {
16008         var da =  {};
16009         this.recordType.prototype.fields.each(function(c) {
16010             switch( c.type) {
16011                 case 'int' : da[c.name] = 0; break;
16012                 case 'date' : da[c.name] = new Date(); break;
16013                 case 'float' : da[c.name] = 0.0; break;
16014                 case 'boolean' : da[c.name] = false; break;
16015                 default : da[c.name] = ""; break;
16016             }
16017             
16018         });
16019         return new this.recordType(Roo.apply(da, d));
16020     }
16021     
16022     
16023 };/*
16024  * Based on:
16025  * Ext JS Library 1.1.1
16026  * Copyright(c) 2006-2007, Ext JS, LLC.
16027  *
16028  * Originally Released Under LGPL - original licence link has changed is not relivant.
16029  *
16030  * Fork - LGPL
16031  * <script type="text/javascript">
16032  */
16033
16034 /**
16035  * @class Roo.data.DataProxy
16036  * @extends Roo.util.Observable
16037  * @abstract
16038  * This class is an abstract base class for implementations which provide retrieval of
16039  * unformatted data objects.<br>
16040  * <p>
16041  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
16042  * (of the appropriate type which knows how to parse the data object) to provide a block of
16043  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
16044  * <p>
16045  * Custom implementations must implement the load method as described in
16046  * {@link Roo.data.HttpProxy#load}.
16047  */
16048 Roo.data.DataProxy = function(){
16049     this.addEvents({
16050         /**
16051          * @event beforeload
16052          * Fires before a network request is made to retrieve a data object.
16053          * @param {Object} This DataProxy object.
16054          * @param {Object} params The params parameter to the load function.
16055          */
16056         beforeload : true,
16057         /**
16058          * @event load
16059          * Fires before the load method's callback is called.
16060          * @param {Object} This DataProxy object.
16061          * @param {Object} o The data object.
16062          * @param {Object} arg The callback argument object passed to the load function.
16063          */
16064         load : true,
16065         /**
16066          * @event loadexception
16067          * Fires if an Exception occurs during data retrieval.
16068          * @param {Object} This DataProxy object.
16069          * @param {Object} o The data object.
16070          * @param {Object} arg The callback argument object passed to the load function.
16071          * @param {Object} e The Exception.
16072          */
16073         loadexception : true
16074     });
16075     Roo.data.DataProxy.superclass.constructor.call(this);
16076 };
16077
16078 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
16079
16080     /**
16081      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
16082      */
16083 /*
16084  * Based on:
16085  * Ext JS Library 1.1.1
16086  * Copyright(c) 2006-2007, Ext JS, LLC.
16087  *
16088  * Originally Released Under LGPL - original licence link has changed is not relivant.
16089  *
16090  * Fork - LGPL
16091  * <script type="text/javascript">
16092  */
16093 /**
16094  * @class Roo.data.MemoryProxy
16095  * @extends Roo.data.DataProxy
16096  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
16097  * to the Reader when its load method is called.
16098  * @constructor
16099  * @param {Object} config  A config object containing the objects needed for the Store to access data,
16100  */
16101 Roo.data.MemoryProxy = function(config){
16102     var data = config;
16103     if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
16104         data = config.data;
16105     }
16106     Roo.data.MemoryProxy.superclass.constructor.call(this);
16107     this.data = data;
16108 };
16109
16110 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
16111     
16112     /**
16113      *  @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
16114      */
16115     /**
16116      * Load data from the requested source (in this case an in-memory
16117      * data object passed to the constructor), read the data object into
16118      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16119      * process that block using the passed callback.
16120      * @param {Object} params This parameter is not used by the MemoryProxy class.
16121      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16122      * object into a block of Roo.data.Records.
16123      * @param {Function} callback The function into which to pass the block of Roo.data.records.
16124      * The function must be passed <ul>
16125      * <li>The Record block object</li>
16126      * <li>The "arg" argument from the load function</li>
16127      * <li>A boolean success indicator</li>
16128      * </ul>
16129      * @param {Object} scope The scope in which to call the callback
16130      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16131      */
16132     load : function(params, reader, callback, scope, arg){
16133         params = params || {};
16134         var result;
16135         try {
16136             result = reader.readRecords(params.data ? params.data :this.data);
16137         }catch(e){
16138             this.fireEvent("loadexception", this, arg, null, e);
16139             callback.call(scope, null, arg, false);
16140             return;
16141         }
16142         callback.call(scope, result, arg, true);
16143     },
16144     
16145     // private
16146     update : function(params, records){
16147         
16148     }
16149 });/*
16150  * Based on:
16151  * Ext JS Library 1.1.1
16152  * Copyright(c) 2006-2007, Ext JS, LLC.
16153  *
16154  * Originally Released Under LGPL - original licence link has changed is not relivant.
16155  *
16156  * Fork - LGPL
16157  * <script type="text/javascript">
16158  */
16159 /**
16160  * @class Roo.data.HttpProxy
16161  * @extends Roo.data.DataProxy
16162  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
16163  * configured to reference a certain URL.<br><br>
16164  * <p>
16165  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
16166  * from which the running page was served.<br><br>
16167  * <p>
16168  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
16169  * <p>
16170  * Be aware that to enable the browser to parse an XML document, the server must set
16171  * the Content-Type header in the HTTP response to "text/xml".
16172  * @constructor
16173  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
16174  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
16175  * will be used to make the request.
16176  */
16177 Roo.data.HttpProxy = function(conn){
16178     Roo.data.HttpProxy.superclass.constructor.call(this);
16179     // is conn a conn config or a real conn?
16180     this.conn = conn;
16181     this.useAjax = !conn || !conn.events;
16182   
16183 };
16184
16185 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
16186     // thse are take from connection...
16187     
16188     /**
16189      * @cfg {String} url  The default URL to be used for requests to the server. (defaults to undefined)
16190      */
16191     /**
16192      * @cfg {Object} extraParams  An object containing properties which are used as
16193      * extra parameters to each request made by this object. (defaults to undefined)
16194      */
16195     /**
16196      * @cfg {Object} defaultHeaders   An object containing request headers which are added
16197      *  to each request made by this object. (defaults to undefined)
16198      */
16199     /**
16200      * @cfg {String} method (GET|POST)  The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
16201      */
16202     /**
16203      * @cfg {Number} timeout The timeout in milliseconds to be used for requests. (defaults to 30000)
16204      */
16205      /**
16206      * @cfg {Boolean} autoAbort Whether this request should abort any pending requests. (defaults to false)
16207      * @type Boolean
16208      */
16209   
16210
16211     /**
16212      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
16213      * @type Boolean
16214      */
16215     /**
16216      * Return the {@link Roo.data.Connection} object being used by this Proxy.
16217      * @return {Connection} The Connection object. This object may be used to subscribe to events on
16218      * a finer-grained basis than the DataProxy events.
16219      */
16220     getConnection : function(){
16221         return this.useAjax ? Roo.Ajax : this.conn;
16222     },
16223
16224     /**
16225      * Load data from the configured {@link Roo.data.Connection}, read the data object into
16226      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
16227      * process that block using the passed callback.
16228      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16229      * for the request to the remote server.
16230      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16231      * object into a block of Roo.data.Records.
16232      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16233      * The function must be passed <ul>
16234      * <li>The Record block object</li>
16235      * <li>The "arg" argument from the load function</li>
16236      * <li>A boolean success indicator</li>
16237      * </ul>
16238      * @param {Object} scope The scope in which to call the callback
16239      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16240      */
16241     load : function(params, reader, callback, scope, arg){
16242         if(this.fireEvent("beforeload", this, params) !== false){
16243             var  o = {
16244                 params : params || {},
16245                 request: {
16246                     callback : callback,
16247                     scope : scope,
16248                     arg : arg
16249                 },
16250                 reader: reader,
16251                 callback : this.loadResponse,
16252                 scope: this
16253             };
16254             if(this.useAjax){
16255                 Roo.applyIf(o, this.conn);
16256                 if(this.activeRequest){
16257                     Roo.Ajax.abort(this.activeRequest);
16258                 }
16259                 this.activeRequest = Roo.Ajax.request(o);
16260             }else{
16261                 this.conn.request(o);
16262             }
16263         }else{
16264             callback.call(scope||this, null, arg, false);
16265         }
16266     },
16267
16268     // private
16269     loadResponse : function(o, success, response){
16270         delete this.activeRequest;
16271         if(!success){
16272             this.fireEvent("loadexception", this, o, response);
16273             o.request.callback.call(o.request.scope, null, o.request.arg, false);
16274             return;
16275         }
16276         var result;
16277         try {
16278             result = o.reader.read(response);
16279         }catch(e){
16280             o.success = false;
16281             o.raw = { errorMsg : response.responseText };
16282             this.fireEvent("loadexception", this, o, response, e);
16283             o.request.callback.call(o.request.scope, o, o.request.arg, false);
16284             return;
16285         }
16286         
16287         this.fireEvent("load", this, o, o.request.arg);
16288         o.request.callback.call(o.request.scope, result, o.request.arg, true);
16289     },
16290
16291     // private
16292     update : function(dataSet){
16293
16294     },
16295
16296     // private
16297     updateResponse : function(dataSet){
16298
16299     }
16300 });/*
16301  * Based on:
16302  * Ext JS Library 1.1.1
16303  * Copyright(c) 2006-2007, Ext JS, LLC.
16304  *
16305  * Originally Released Under LGPL - original licence link has changed is not relivant.
16306  *
16307  * Fork - LGPL
16308  * <script type="text/javascript">
16309  */
16310
16311 /**
16312  * @class Roo.data.ScriptTagProxy
16313  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
16314  * other than the originating domain of the running page.<br><br>
16315  * <p>
16316  * <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
16317  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
16318  * <p>
16319  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
16320  * source code that is used as the source inside a &lt;script> tag.<br><br>
16321  * <p>
16322  * In order for the browser to process the returned data, the server must wrap the data object
16323  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
16324  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
16325  * depending on whether the callback name was passed:
16326  * <p>
16327  * <pre><code>
16328 boolean scriptTag = false;
16329 String cb = request.getParameter("callback");
16330 if (cb != null) {
16331     scriptTag = true;
16332     response.setContentType("text/javascript");
16333 } else {
16334     response.setContentType("application/x-json");
16335 }
16336 Writer out = response.getWriter();
16337 if (scriptTag) {
16338     out.write(cb + "(");
16339 }
16340 out.print(dataBlock.toJsonString());
16341 if (scriptTag) {
16342     out.write(");");
16343 }
16344 </pre></code>
16345  *
16346  * @constructor
16347  * @param {Object} config A configuration object.
16348  */
16349 Roo.data.ScriptTagProxy = function(config){
16350     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
16351     Roo.apply(this, config);
16352     this.head = document.getElementsByTagName("head")[0];
16353 };
16354
16355 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
16356
16357 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
16358     /**
16359      * @cfg {String} url The URL from which to request the data object.
16360      */
16361     /**
16362      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
16363      */
16364     timeout : 30000,
16365     /**
16366      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
16367      * the server the name of the callback function set up by the load call to process the returned data object.
16368      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
16369      * javascript output which calls this named function passing the data object as its only parameter.
16370      */
16371     callbackParam : "callback",
16372     /**
16373      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
16374      * name to the request.
16375      */
16376     nocache : true,
16377
16378     /**
16379      * Load data from the configured URL, read the data object into
16380      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16381      * process that block using the passed callback.
16382      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16383      * for the request to the remote server.
16384      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16385      * object into a block of Roo.data.Records.
16386      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16387      * The function must be passed <ul>
16388      * <li>The Record block object</li>
16389      * <li>The "arg" argument from the load function</li>
16390      * <li>A boolean success indicator</li>
16391      * </ul>
16392      * @param {Object} scope The scope in which to call the callback
16393      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16394      */
16395     load : function(params, reader, callback, scope, arg){
16396         if(this.fireEvent("beforeload", this, params) !== false){
16397
16398             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
16399
16400             var url = this.url;
16401             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
16402             if(this.nocache){
16403                 url += "&_dc=" + (new Date().getTime());
16404             }
16405             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
16406             var trans = {
16407                 id : transId,
16408                 cb : "stcCallback"+transId,
16409                 scriptId : "stcScript"+transId,
16410                 params : params,
16411                 arg : arg,
16412                 url : url,
16413                 callback : callback,
16414                 scope : scope,
16415                 reader : reader
16416             };
16417             var conn = this;
16418
16419             window[trans.cb] = function(o){
16420                 conn.handleResponse(o, trans);
16421             };
16422
16423             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
16424
16425             if(this.autoAbort !== false){
16426                 this.abort();
16427             }
16428
16429             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
16430
16431             var script = document.createElement("script");
16432             script.setAttribute("src", url);
16433             script.setAttribute("type", "text/javascript");
16434             script.setAttribute("id", trans.scriptId);
16435             this.head.appendChild(script);
16436
16437             this.trans = trans;
16438         }else{
16439             callback.call(scope||this, null, arg, false);
16440         }
16441     },
16442
16443     // private
16444     isLoading : function(){
16445         return this.trans ? true : false;
16446     },
16447
16448     /**
16449      * Abort the current server request.
16450      */
16451     abort : function(){
16452         if(this.isLoading()){
16453             this.destroyTrans(this.trans);
16454         }
16455     },
16456
16457     // private
16458     destroyTrans : function(trans, isLoaded){
16459         this.head.removeChild(document.getElementById(trans.scriptId));
16460         clearTimeout(trans.timeoutId);
16461         if(isLoaded){
16462             window[trans.cb] = undefined;
16463             try{
16464                 delete window[trans.cb];
16465             }catch(e){}
16466         }else{
16467             // if hasn't been loaded, wait for load to remove it to prevent script error
16468             window[trans.cb] = function(){
16469                 window[trans.cb] = undefined;
16470                 try{
16471                     delete window[trans.cb];
16472                 }catch(e){}
16473             };
16474         }
16475     },
16476
16477     // private
16478     handleResponse : function(o, trans){
16479         this.trans = false;
16480         this.destroyTrans(trans, true);
16481         var result;
16482         try {
16483             result = trans.reader.readRecords(o);
16484         }catch(e){
16485             this.fireEvent("loadexception", this, o, trans.arg, e);
16486             trans.callback.call(trans.scope||window, null, trans.arg, false);
16487             return;
16488         }
16489         this.fireEvent("load", this, o, trans.arg);
16490         trans.callback.call(trans.scope||window, result, trans.arg, true);
16491     },
16492
16493     // private
16494     handleFailure : function(trans){
16495         this.trans = false;
16496         this.destroyTrans(trans, false);
16497         this.fireEvent("loadexception", this, null, trans.arg);
16498         trans.callback.call(trans.scope||window, null, trans.arg, false);
16499     }
16500 });/*
16501  * Based on:
16502  * Ext JS Library 1.1.1
16503  * Copyright(c) 2006-2007, Ext JS, LLC.
16504  *
16505  * Originally Released Under LGPL - original licence link has changed is not relivant.
16506  *
16507  * Fork - LGPL
16508  * <script type="text/javascript">
16509  */
16510
16511 /**
16512  * @class Roo.data.JsonReader
16513  * @extends Roo.data.DataReader
16514  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
16515  * based on mappings in a provided Roo.data.Record constructor.
16516  * 
16517  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
16518  * in the reply previously. 
16519  * 
16520  * <p>
16521  * Example code:
16522  * <pre><code>
16523 var RecordDef = Roo.data.Record.create([
16524     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
16525     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
16526 ]);
16527 var myReader = new Roo.data.JsonReader({
16528     totalProperty: "results",    // The property which contains the total dataset size (optional)
16529     root: "rows",                // The property which contains an Array of row objects
16530     id: "id"                     // The property within each row object that provides an ID for the record (optional)
16531 }, RecordDef);
16532 </code></pre>
16533  * <p>
16534  * This would consume a JSON file like this:
16535  * <pre><code>
16536 { 'results': 2, 'rows': [
16537     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
16538     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
16539 }
16540 </code></pre>
16541  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
16542  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
16543  * paged from the remote server.
16544  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
16545  * @cfg {String} root name of the property which contains the Array of row objects.
16546  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16547  * @cfg {Array} fields Array of field definition objects
16548  * @constructor
16549  * Create a new JsonReader
16550  * @param {Object} meta Metadata configuration options
16551  * @param {Object} recordType Either an Array of field definition objects,
16552  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
16553  */
16554 Roo.data.JsonReader = function(meta, recordType){
16555     
16556     meta = meta || {};
16557     // set some defaults:
16558     Roo.applyIf(meta, {
16559         totalProperty: 'total',
16560         successProperty : 'success',
16561         root : 'data',
16562         id : 'id'
16563     });
16564     
16565     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16566 };
16567 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
16568     
16569     readerType : 'Json',
16570     
16571     /**
16572      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
16573      * Used by Store query builder to append _requestMeta to params.
16574      * 
16575      */
16576     metaFromRemote : false,
16577     /**
16578      * This method is only used by a DataProxy which has retrieved data from a remote server.
16579      * @param {Object} response The XHR object which contains the JSON data in its responseText.
16580      * @return {Object} data A data block which is used by an Roo.data.Store object as
16581      * a cache of Roo.data.Records.
16582      */
16583     read : function(response){
16584         var json = response.responseText;
16585        
16586         var o = /* eval:var:o */ eval("("+json+")");
16587         if(!o) {
16588             throw {message: "JsonReader.read: Json object not found"};
16589         }
16590         
16591         if(o.metaData){
16592             
16593             delete this.ef;
16594             this.metaFromRemote = true;
16595             this.meta = o.metaData;
16596             this.recordType = Roo.data.Record.create(o.metaData.fields);
16597             this.onMetaChange(this.meta, this.recordType, o);
16598         }
16599         return this.readRecords(o);
16600     },
16601
16602     // private function a store will implement
16603     onMetaChange : function(meta, recordType, o){
16604
16605     },
16606
16607     /**
16608          * @ignore
16609          */
16610     simpleAccess: function(obj, subsc) {
16611         return obj[subsc];
16612     },
16613
16614         /**
16615          * @ignore
16616          */
16617     getJsonAccessor: function(){
16618         var re = /[\[\.]/;
16619         return function(expr) {
16620             try {
16621                 return(re.test(expr))
16622                     ? new Function("obj", "return obj." + expr)
16623                     : function(obj){
16624                         return obj[expr];
16625                     };
16626             } catch(e){}
16627             return Roo.emptyFn;
16628         };
16629     }(),
16630
16631     /**
16632      * Create a data block containing Roo.data.Records from an XML document.
16633      * @param {Object} o An object which contains an Array of row objects in the property specified
16634      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
16635      * which contains the total size of the dataset.
16636      * @return {Object} data A data block which is used by an Roo.data.Store object as
16637      * a cache of Roo.data.Records.
16638      */
16639     readRecords : function(o){
16640         /**
16641          * After any data loads, the raw JSON data is available for further custom processing.
16642          * @type Object
16643          */
16644         this.o = o;
16645         var s = this.meta, Record = this.recordType,
16646             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
16647
16648 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
16649         if (!this.ef) {
16650             if(s.totalProperty) {
16651                     this.getTotal = this.getJsonAccessor(s.totalProperty);
16652                 }
16653                 if(s.successProperty) {
16654                     this.getSuccess = this.getJsonAccessor(s.successProperty);
16655                 }
16656                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
16657                 if (s.id) {
16658                         var g = this.getJsonAccessor(s.id);
16659                         this.getId = function(rec) {
16660                                 var r = g(rec);  
16661                                 return (r === undefined || r === "") ? null : r;
16662                         };
16663                 } else {
16664                         this.getId = function(){return null;};
16665                 }
16666             this.ef = [];
16667             for(var jj = 0; jj < fl; jj++){
16668                 f = fi[jj];
16669                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
16670                 this.ef[jj] = this.getJsonAccessor(map);
16671             }
16672         }
16673
16674         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
16675         if(s.totalProperty){
16676             var vt = parseInt(this.getTotal(o), 10);
16677             if(!isNaN(vt)){
16678                 totalRecords = vt;
16679             }
16680         }
16681         if(s.successProperty){
16682             var vs = this.getSuccess(o);
16683             if(vs === false || vs === 'false'){
16684                 success = false;
16685             }
16686         }
16687         var records = [];
16688         for(var i = 0; i < c; i++){
16689             var n = root[i];
16690             var values = {};
16691             var id = this.getId(n);
16692             for(var j = 0; j < fl; j++){
16693                 f = fi[j];
16694                                 var v = this.ef[j](n);
16695                                 if (!f.convert) {
16696                                         Roo.log('missing convert for ' + f.name);
16697                                         Roo.log(f);
16698                                         continue;
16699                                 }
16700                                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
16701             }
16702                         if (!Record) {
16703                                 return {
16704                                         raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
16705                                         success : false,
16706                                         records : [],
16707                                         totalRecords : 0
16708                                 };
16709                         }
16710             var record = new Record(values, id);
16711             record.json = n;
16712             records[i] = record;
16713         }
16714         return {
16715             raw : o,
16716             success : success,
16717             records : records,
16718             totalRecords : totalRecords
16719         };
16720     },
16721     // used when loading children.. @see loadDataFromChildren
16722     toLoadData: function(rec)
16723     {
16724         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16725         var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16726         return { data : data, total : data.length };
16727         
16728     }
16729 });/*
16730  * Based on:
16731  * Ext JS Library 1.1.1
16732  * Copyright(c) 2006-2007, Ext JS, LLC.
16733  *
16734  * Originally Released Under LGPL - original licence link has changed is not relivant.
16735  *
16736  * Fork - LGPL
16737  * <script type="text/javascript">
16738  */
16739
16740 /**
16741  * @class Roo.data.ArrayReader
16742  * @extends Roo.data.DataReader
16743  * Data reader class to create an Array of Roo.data.Record objects from an Array.
16744  * Each element of that Array represents a row of data fields. The
16745  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
16746  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
16747  * <p>
16748  * Example code:.
16749  * <pre><code>
16750 var RecordDef = Roo.data.Record.create([
16751     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
16752     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
16753 ]);
16754 var myReader = new Roo.data.ArrayReader({
16755     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
16756 }, RecordDef);
16757 </code></pre>
16758  * <p>
16759  * This would consume an Array like this:
16760  * <pre><code>
16761 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
16762   </code></pre>
16763  
16764  * @constructor
16765  * Create a new JsonReader
16766  * @param {Object} meta Metadata configuration options.
16767  * @param {Object|Array} recordType Either an Array of field definition objects
16768  * 
16769  * @cfg {Array} fields Array of field definition objects
16770  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16771  * as specified to {@link Roo.data.Record#create},
16772  * or an {@link Roo.data.Record} object
16773  *
16774  * 
16775  * created using {@link Roo.data.Record#create}.
16776  */
16777 Roo.data.ArrayReader = function(meta, recordType)
16778 {    
16779     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16780 };
16781
16782 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
16783     
16784       /**
16785      * Create a data block containing Roo.data.Records from an XML document.
16786      * @param {Object} o An Array of row objects which represents the dataset.
16787      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
16788      * a cache of Roo.data.Records.
16789      */
16790     readRecords : function(o)
16791     {
16792         var sid = this.meta ? this.meta.id : null;
16793         var recordType = this.recordType, fields = recordType.prototype.fields;
16794         var records = [];
16795         var root = o;
16796         for(var i = 0; i < root.length; i++){
16797             var n = root[i];
16798             var values = {};
16799             var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
16800             for(var j = 0, jlen = fields.length; j < jlen; j++){
16801                 var f = fields.items[j];
16802                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
16803                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
16804                 v = f.convert(v);
16805                 values[f.name] = v;
16806             }
16807             var record = new recordType(values, id);
16808             record.json = n;
16809             records[records.length] = record;
16810         }
16811         return {
16812             records : records,
16813             totalRecords : records.length
16814         };
16815     },
16816     // used when loading children.. @see loadDataFromChildren
16817     toLoadData: function(rec)
16818     {
16819         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16820         return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16821         
16822     }
16823     
16824     
16825 });/*
16826  * - LGPL
16827  * * 
16828  */
16829
16830 /**
16831  * @class Roo.bootstrap.form.ComboBox
16832  * @extends Roo.bootstrap.form.TriggerField
16833  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
16834  * @cfg {Boolean} append (true|false) default false
16835  * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
16836  * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
16837  * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
16838  * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
16839  * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
16840  * @cfg {Boolean} animate default true
16841  * @cfg {Boolean} emptyResultText only for touch device
16842  * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
16843  * @cfg {String} emptyTitle default ''
16844  * @cfg {Number} width fixed with? experimental
16845  * @constructor
16846  * Create a new ComboBox.
16847  * @param {Object} config Configuration options
16848  */
16849 Roo.bootstrap.form.ComboBox = function(config){
16850     Roo.bootstrap.form.ComboBox.superclass.constructor.call(this, config);
16851     this.addEvents({
16852         /**
16853          * @event expand
16854          * Fires when the dropdown list is expanded
16855         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16856         */
16857         'expand' : true,
16858         /**
16859          * @event collapse
16860          * Fires when the dropdown list is collapsed
16861         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16862         */
16863         'collapse' : true,
16864         /**
16865          * @event beforeselect
16866          * Fires before a list item is selected. Return false to cancel the selection.
16867         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16868         * @param {Roo.data.Record} record The data record returned from the underlying store
16869         * @param {Number} index The index of the selected item in the dropdown list
16870         */
16871         'beforeselect' : true,
16872         /**
16873          * @event select
16874          * Fires when a list item is selected
16875         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16876         * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
16877         * @param {Number} index The index of the selected item in the dropdown list
16878         */
16879         'select' : true,
16880         /**
16881          * @event beforequery
16882          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
16883          * The event object passed has these properties:
16884         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16885         * @param {String} query The query
16886         * @param {Boolean} forceAll true to force "all" query
16887         * @param {Boolean} cancel true to cancel the query
16888         * @param {Object} e The query event object
16889         */
16890         'beforequery': true,
16891          /**
16892          * @event add
16893          * Fires when the 'add' icon is pressed (add a listener to enable add button)
16894         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16895         */
16896         'add' : true,
16897         /**
16898          * @event edit
16899          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
16900         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16901         * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
16902         */
16903         'edit' : true,
16904         /**
16905          * @event remove
16906          * Fires when the remove value from the combobox array
16907         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16908         */
16909         'remove' : true,
16910         /**
16911          * @event afterremove
16912          * Fires when the remove value from the combobox array
16913         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16914         */
16915         'afterremove' : true,
16916         /**
16917          * @event specialfilter
16918          * Fires when specialfilter
16919             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16920             */
16921         'specialfilter' : true,
16922         /**
16923          * @event tick
16924          * Fires when tick the element
16925             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16926             */
16927         'tick' : true,
16928         /**
16929          * @event touchviewdisplay
16930          * Fires when touch view require special display (default is using displayField)
16931             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16932             * @param {Object} cfg set html .
16933             */
16934         'touchviewdisplay' : true
16935         
16936     });
16937     
16938     this.item = [];
16939     this.tickItems = [];
16940     
16941     this.selectedIndex = -1;
16942     if(this.mode == 'local'){
16943         if(config.queryDelay === undefined){
16944             this.queryDelay = 10;
16945         }
16946         if(config.minChars === undefined){
16947             this.minChars = 0;
16948         }
16949     }
16950 };
16951
16952 Roo.extend(Roo.bootstrap.form.ComboBox, Roo.bootstrap.form.TriggerField, {
16953      
16954     /**
16955      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
16956      * rendering into an Roo.Editor, defaults to false)
16957      */
16958     /**
16959      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
16960      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
16961      */
16962     /**
16963      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
16964      */
16965     /**
16966      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
16967      * the dropdown list (defaults to undefined, with no header element)
16968      */
16969
16970      /**
16971      * @cfg {String/Roo.Template} tpl The template to use to render the output default is  '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' 
16972      */
16973      
16974      /**
16975      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
16976      */
16977     listWidth: undefined,
16978     /**
16979      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
16980      * mode = 'remote' or 'text' if mode = 'local')
16981      */
16982     displayField: undefined,
16983     
16984     /**
16985      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
16986      * mode = 'remote' or 'value' if mode = 'local'). 
16987      * Note: use of a valueField requires the user make a selection
16988      * in order for a value to be mapped.
16989      */
16990     valueField: undefined,
16991     /**
16992      * @cfg {String} modalTitle The title of the dialog that pops up on mobile views.
16993      */
16994     modalTitle : '',
16995     
16996     /**
16997      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
16998      * field's data value (defaults to the underlying DOM element's name)
16999      */
17000     hiddenName: undefined,
17001     /**
17002      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
17003      */
17004     listClass: '',
17005     /**
17006      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
17007      */
17008     selectedClass: 'active',
17009     
17010     /**
17011      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
17012      */
17013     shadow:'sides',
17014     /**
17015      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
17016      * anchor positions (defaults to 'tl-bl')
17017      */
17018     listAlign: 'tl-bl?',
17019     /**
17020      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
17021      */
17022     maxHeight: 300,
17023     /**
17024      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
17025      * query specified by the allQuery config option (defaults to 'query')
17026      */
17027     triggerAction: 'query',
17028     /**
17029      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
17030      * (defaults to 4, does not apply if editable = false)
17031      */
17032     minChars : 4,
17033     /**
17034      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
17035      * delay (typeAheadDelay) if it matches a known value (defaults to false)
17036      */
17037     typeAhead: false,
17038     /**
17039      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
17040      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
17041      */
17042     queryDelay: 500,
17043     /**
17044      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
17045      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
17046      */
17047     pageSize: 0,
17048     /**
17049      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
17050      * when editable = true (defaults to false)
17051      */
17052     selectOnFocus:false,
17053     /**
17054      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
17055      */
17056     queryParam: 'query',
17057     /**
17058      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
17059      * when mode = 'remote' (defaults to 'Loading...')
17060      */
17061     loadingText: 'Loading...',
17062     /**
17063      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
17064      */
17065     resizable: false,
17066     /**
17067      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
17068      */
17069     handleHeight : 8,
17070     /**
17071      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
17072      * traditional select (defaults to true)
17073      */
17074     editable: true,
17075     /**
17076      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
17077      */
17078     allQuery: '',
17079     /**
17080      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
17081      */
17082     mode: 'remote',
17083     /**
17084      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
17085      * listWidth has a higher value)
17086      */
17087     minListWidth : 70,
17088     /**
17089      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
17090      * allow the user to set arbitrary text into the field (defaults to false)
17091      */
17092     forceSelection:false,
17093     /**
17094      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
17095      * if typeAhead = true (defaults to 250)
17096      */
17097     typeAheadDelay : 250,
17098     /**
17099      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
17100      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
17101      */
17102     valueNotFoundText : undefined,
17103     /**
17104      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
17105      */
17106     blockFocus : false,
17107     
17108     /**
17109      * @cfg {Boolean} disableClear Disable showing of clear button.
17110      */
17111     disableClear : false,
17112     /**
17113      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
17114      */
17115     alwaysQuery : false,
17116     
17117     /**
17118      * @cfg {Boolean} multiple  (true|false) ComboBobArray, default false
17119      */
17120     multiple : false,
17121     
17122     /**
17123      * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
17124      */
17125     invalidClass : "has-warning",
17126     
17127     /**
17128      * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
17129      */
17130     validClass : "has-success",
17131     
17132     /**
17133      * @cfg {Boolean} specialFilter (true|false) special filter default false
17134      */
17135     specialFilter : false,
17136     
17137     /**
17138      * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true
17139      */
17140     mobileTouchView : true,
17141     
17142     /**
17143      * @cfg {Boolean} useNativeIOS (true|false) render it as classic select for ios, not support dynamic load data (default false)
17144      */
17145     useNativeIOS : false,
17146     
17147     /**
17148      * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view
17149      */
17150     mobile_restrict_height : false,
17151     
17152     ios_options : false,
17153     
17154     //private
17155     addicon : false,
17156     editicon: false,
17157     
17158     page: 0,
17159     hasQuery: false,
17160     append: false,
17161     loadNext: false,
17162     autoFocus : true,
17163     tickable : false,
17164     btnPosition : 'right',
17165     triggerList : true,
17166     showToggleBtn : true,
17167     animate : true,
17168     emptyResultText: 'Empty',
17169     triggerText : 'Select',
17170     emptyTitle : '',
17171     width : false,
17172     
17173     // element that contains real text value.. (when hidden is used..)
17174     
17175     getAutoCreate : function()
17176     {   
17177         var cfg = false;
17178         //render
17179         /*
17180          * Render classic select for iso
17181          */
17182         
17183         if(Roo.isIOS && this.useNativeIOS){
17184             cfg = this.getAutoCreateNativeIOS();
17185             return cfg;
17186         }
17187         
17188         /*
17189          * Touch Devices
17190          */
17191         
17192         if(Roo.isTouch && this.mobileTouchView){
17193             cfg = this.getAutoCreateTouchView();
17194             return cfg;;
17195         }
17196         
17197         /*
17198          *  Normal ComboBox
17199          */
17200         if(!this.tickable){
17201             cfg = Roo.bootstrap.form.ComboBox.superclass.getAutoCreate.call(this);
17202             return cfg;
17203         }
17204         
17205         /*
17206          *  ComboBox with tickable selections
17207          */
17208              
17209         var align = this.labelAlign || this.parentLabelAlign();
17210         
17211         cfg = {
17212             cls : 'form-group roo-combobox-tickable' //input-group
17213         };
17214         
17215         var btn_text_select = '';
17216         var btn_text_done = '';
17217         var btn_text_cancel = '';
17218         
17219         if (this.btn_text_show) {
17220             btn_text_select = 'Select';
17221             btn_text_done = 'Done';
17222             btn_text_cancel = 'Cancel'; 
17223         }
17224         
17225         var buttons = {
17226             tag : 'div',
17227             cls : 'tickable-buttons',
17228             cn : [
17229                 {
17230                     tag : 'button',
17231                     type : 'button',
17232                     cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
17233                     //html : this.triggerText
17234                     html: btn_text_select
17235                 },
17236                 {
17237                     tag : 'button',
17238                     type : 'button',
17239                     name : 'ok',
17240                     cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
17241                     //html : 'Done'
17242                     html: btn_text_done
17243                 },
17244                 {
17245                     tag : 'button',
17246                     type : 'button',
17247                     name : 'cancel',
17248                     cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
17249                     //html : 'Cancel'
17250                     html: btn_text_cancel
17251                 }
17252             ]
17253         };
17254         
17255         if(this.editable){
17256             buttons.cn.unshift({
17257                 tag: 'input',
17258                 cls: 'roo-select2-search-field-input'
17259             });
17260         }
17261         
17262         var _this = this;
17263         
17264         Roo.each(buttons.cn, function(c){
17265             if (_this.size) {
17266                 c.cls += ' btn-' + _this.size;
17267             }
17268
17269             if (_this.disabled) {
17270                 c.disabled = true;
17271             }
17272         });
17273         
17274         var box = {
17275             tag: 'div',
17276             style : 'display: contents',
17277             cn: [
17278                 {
17279                     tag: 'input',
17280                     type : 'hidden',
17281                     cls: 'form-hidden-field'
17282                 },
17283                 {
17284                     tag: 'ul',
17285                     cls: 'roo-select2-choices',
17286                     cn:[
17287                         {
17288                             tag: 'li',
17289                             cls: 'roo-select2-search-field',
17290                             cn: [
17291                                 buttons
17292                             ]
17293                         }
17294                     ]
17295                 }
17296             ]
17297         };
17298         
17299         var combobox = {
17300             cls: 'roo-select2-container input-group roo-select2-container-multi',
17301             cn: [
17302                 
17303                 box
17304 //                {
17305 //                    tag: 'ul',
17306 //                    cls: 'typeahead typeahead-long dropdown-menu',
17307 //                    style: 'display:none; max-height:' + this.maxHeight + 'px;'
17308 //                }
17309             ]
17310         };
17311         
17312         if(this.hasFeedback && !this.allowBlank){
17313             
17314             var feedback = {
17315                 tag: 'span',
17316                 cls: 'glyphicon form-control-feedback'
17317             };
17318
17319             combobox.cn.push(feedback);
17320         }
17321         
17322         
17323         
17324         var indicator = {
17325             tag : 'i',
17326             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
17327             tooltip : 'This field is required'
17328         };
17329          
17330         if (this.allowBlank) {
17331             indicator = {
17332                 tag : 'i',
17333                 style : 'display:none'
17334             };
17335         } 
17336         if (align ==='left' && this.fieldLabel.length) {
17337             
17338             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
17339             
17340             cfg.cn = [
17341                 indicator,
17342                 {
17343                     tag: 'label',
17344                     'for' :  id,
17345                     cls : 'control-label col-form-label',
17346                     html : this.fieldLabel
17347
17348                 },
17349                 {
17350                     cls : "", 
17351                     cn: [
17352                         combobox
17353                     ]
17354                 }
17355
17356             ];
17357             
17358             var labelCfg = cfg.cn[1];
17359             var contentCfg = cfg.cn[2];
17360             
17361
17362             if(this.indicatorpos == 'right'){
17363                 
17364                 cfg.cn = [
17365                     {
17366                         tag: 'label',
17367                         'for' :  id,
17368                         cls : 'control-label col-form-label',
17369                         cn : [
17370                             {
17371                                 tag : 'span',
17372                                 html : this.fieldLabel
17373                             },
17374                             indicator
17375                         ]
17376                     },
17377                     {
17378                         cls : "",
17379                         cn: [
17380                             combobox
17381                         ]
17382                     }
17383
17384                 ];
17385                 
17386                 
17387                 
17388                 labelCfg = cfg.cn[0];
17389                 contentCfg = cfg.cn[1];
17390             
17391             }
17392             
17393             if(this.labelWidth > 12){
17394                 labelCfg.style = "width: " + this.labelWidth + 'px';
17395             }
17396             if(this.width * 1 > 0){
17397                 contentCfg.style = "width: " + this.width + 'px';
17398             }
17399             if(this.labelWidth < 13 && this.labelmd == 0){
17400                 this.labelmd = this.labelWidth;
17401             }
17402             
17403             if(this.labellg > 0){
17404                 labelCfg.cls += ' col-lg-' + this.labellg;
17405                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
17406             }
17407             
17408             if(this.labelmd > 0){
17409                 labelCfg.cls += ' col-md-' + this.labelmd;
17410                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
17411             }
17412             
17413             if(this.labelsm > 0){
17414                 labelCfg.cls += ' col-sm-' + this.labelsm;
17415                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
17416             }
17417             
17418             if(this.labelxs > 0){
17419                 labelCfg.cls += ' col-xs-' + this.labelxs;
17420                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
17421             }
17422                 
17423                 
17424         } else if ( this.fieldLabel.length) {
17425 //                Roo.log(" label");
17426                  cfg.cn = [
17427                    indicator,
17428                     {
17429                         tag: 'label',
17430                         //cls : 'input-group-addon',
17431                         html : this.fieldLabel
17432                     },
17433                     combobox
17434                 ];
17435                 
17436                 if(this.indicatorpos == 'right'){
17437                     cfg.cn = [
17438                         {
17439                             tag: 'label',
17440                             //cls : 'input-group-addon',
17441                             html : this.fieldLabel
17442                         },
17443                         indicator,
17444                         combobox
17445                     ];
17446                     
17447                 }
17448
17449         } else {
17450             
17451 //                Roo.log(" no label && no align");
17452                 cfg = combobox
17453                      
17454                 
17455         }
17456          
17457         var settings=this;
17458         ['xs','sm','md','lg'].map(function(size){
17459             if (settings[size]) {
17460                 cfg.cls += ' col-' + size + '-' + settings[size];
17461             }
17462         });
17463         
17464         return cfg;
17465         
17466     },
17467     
17468     _initEventsCalled : false,
17469     
17470     // private
17471     initEvents: function()
17472     {   
17473         if (this._initEventsCalled) { // as we call render... prevent looping...
17474             return;
17475         }
17476         this._initEventsCalled = true;
17477         
17478         if (!this.store) {
17479             throw "can not find store for combo";
17480         }
17481         
17482         this.indicator = this.indicatorEl();
17483         
17484         this.store = Roo.factory(this.store, Roo.data);
17485         this.store.parent = this;
17486         
17487         // if we are building from html. then this element is so complex, that we can not really
17488         // use the rendered HTML.
17489         // so we have to trash and replace the previous code.
17490         if (Roo.XComponent.build_from_html) {
17491             // remove this element....
17492             var e = this.el.dom, k=0;
17493             while (e ) { e = e.previousSibling;  ++k;}
17494
17495             this.el.remove();
17496             
17497             this.el=false;
17498             this.rendered = false;
17499             
17500             this.render(this.parent().getChildContainer(true), k);
17501         }
17502         
17503         if(Roo.isIOS && this.useNativeIOS){
17504             this.initIOSView();
17505             return;
17506         }
17507         
17508         /*
17509          * Touch Devices
17510          */
17511         
17512         if(Roo.isTouch && this.mobileTouchView){
17513             this.initTouchView();
17514             return;
17515         }
17516         
17517         if(this.tickable){
17518             this.initTickableEvents();
17519             return;
17520         }
17521         
17522         Roo.bootstrap.form.ComboBox.superclass.initEvents.call(this);
17523         
17524         if(this.hiddenName){
17525             
17526             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17527             
17528             this.hiddenField.dom.value =
17529                 this.hiddenValue !== undefined ? this.hiddenValue :
17530                 this.value !== undefined ? this.value : '';
17531
17532             // prevent input submission
17533             this.el.dom.removeAttribute('name');
17534             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17535              
17536              
17537         }
17538         //if(Roo.isGecko){
17539         //    this.el.dom.setAttribute('autocomplete', 'off');
17540         //}
17541         
17542         var cls = 'x-combo-list';
17543         
17544         //this.list = new Roo.Layer({
17545         //    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
17546         //});
17547         
17548         var _this = this;
17549         
17550         (function(){
17551             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17552             _this.list.setWidth(lw);
17553         }).defer(100);
17554         
17555         this.list.on('mouseover', this.onViewOver, this);
17556         this.list.on('mousemove', this.onViewMove, this);
17557         this.list.on('scroll', this.onViewScroll, this);
17558         
17559         /*
17560         this.list.swallowEvent('mousewheel');
17561         this.assetHeight = 0;
17562
17563         if(this.title){
17564             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
17565             this.assetHeight += this.header.getHeight();
17566         }
17567
17568         this.innerList = this.list.createChild({cls:cls+'-inner'});
17569         this.innerList.on('mouseover', this.onViewOver, this);
17570         this.innerList.on('mousemove', this.onViewMove, this);
17571         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17572         
17573         if(this.allowBlank && !this.pageSize && !this.disableClear){
17574             this.footer = this.list.createChild({cls:cls+'-ft'});
17575             this.pageTb = new Roo.Toolbar(this.footer);
17576            
17577         }
17578         if(this.pageSize){
17579             this.footer = this.list.createChild({cls:cls+'-ft'});
17580             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
17581                     {pageSize: this.pageSize});
17582             
17583         }
17584         
17585         if (this.pageTb && this.allowBlank && !this.disableClear) {
17586             var _this = this;
17587             this.pageTb.add(new Roo.Toolbar.Fill(), {
17588                 cls: 'x-btn-icon x-btn-clear',
17589                 text: '&#160;',
17590                 handler: function()
17591                 {
17592                     _this.collapse();
17593                     _this.clearValue();
17594                     _this.onSelect(false, -1);
17595                 }
17596             });
17597         }
17598         if (this.footer) {
17599             this.assetHeight += this.footer.getHeight();
17600         }
17601         */
17602             
17603         if(!this.tpl){
17604             this.tpl = Roo.bootstrap.version == 4 ?
17605                 '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' :  // 4 does not need <li> and it get's really confisued.
17606                 '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
17607         }
17608
17609         this.view = new Roo.View(this.list, this.tpl, {
17610             singleSelect:true, store: this.store, selectedClass: this.selectedClass
17611         });
17612         //this.view.wrapEl.setDisplayed(false);
17613         this.view.on('click', this.onViewClick, this);
17614         
17615         
17616         this.store.on('beforeload', this.onBeforeLoad, this);
17617         this.store.on('load', this.onLoad, this);
17618         this.store.on('loadexception', this.onLoadException, this);
17619         /*
17620         if(this.resizable){
17621             this.resizer = new Roo.Resizable(this.list,  {
17622                pinned:true, handles:'se'
17623             });
17624             this.resizer.on('resize', function(r, w, h){
17625                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
17626                 this.listWidth = w;
17627                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
17628                 this.restrictHeight();
17629             }, this);
17630             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
17631         }
17632         */
17633         if(!this.editable){
17634             this.editable = true;
17635             this.setEditable(false);
17636         }
17637         
17638         /*
17639         
17640         if (typeof(this.events.add.listeners) != 'undefined') {
17641             
17642             this.addicon = this.wrap.createChild(
17643                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
17644        
17645             this.addicon.on('click', function(e) {
17646                 this.fireEvent('add', this);
17647             }, this);
17648         }
17649         if (typeof(this.events.edit.listeners) != 'undefined') {
17650             
17651             this.editicon = this.wrap.createChild(
17652                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
17653             if (this.addicon) {
17654                 this.editicon.setStyle('margin-left', '40px');
17655             }
17656             this.editicon.on('click', function(e) {
17657                 
17658                 // we fire even  if inothing is selected..
17659                 this.fireEvent('edit', this, this.lastData );
17660                 
17661             }, this);
17662         }
17663         */
17664         
17665         this.keyNav = new Roo.KeyNav(this.inputEl(), {
17666             "up" : function(e){
17667                 this.inKeyMode = true;
17668                 this.selectPrev();
17669             },
17670
17671             "down" : function(e){
17672                 if(!this.isExpanded()){
17673                     this.onTriggerClick();
17674                 }else{
17675                     this.inKeyMode = true;
17676                     this.selectNext();
17677                 }
17678             },
17679
17680             "enter" : function(e){
17681 //                this.onViewClick();
17682                 //return true;
17683                 this.collapse();
17684                 
17685                 if(this.fireEvent("specialkey", this, e)){
17686                     this.onViewClick(false);
17687                 }
17688                 
17689                 return true;
17690             },
17691
17692             "esc" : function(e){
17693                 this.collapse();
17694             },
17695
17696             "tab" : function(e){
17697                 this.collapse();
17698                 
17699                 if(this.fireEvent("specialkey", this, e)){
17700                     this.onViewClick(false);
17701                 }
17702                 
17703                 return true;
17704             },
17705
17706             scope : this,
17707
17708             doRelay : function(foo, bar, hname){
17709                 if(hname == 'down' || this.scope.isExpanded()){
17710                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17711                 }
17712                 return true;
17713             },
17714
17715             forceKeyDown: true
17716         });
17717         
17718         
17719         this.queryDelay = Math.max(this.queryDelay || 10,
17720                 this.mode == 'local' ? 10 : 250);
17721         
17722         
17723         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17724         
17725         if(this.typeAhead){
17726             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17727         }
17728         if(this.editable !== false){
17729             this.inputEl().on("keyup", this.onKeyUp, this);
17730         }
17731         if(this.forceSelection){
17732             this.inputEl().on('blur', this.doForce, this);
17733         }
17734         
17735         if(this.multiple){
17736             this.choices = this.el.select('ul.roo-select2-choices', true).first();
17737             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17738         }
17739     },
17740     
17741     initTickableEvents: function()
17742     {   
17743         this.createList();
17744         
17745         if(this.hiddenName){
17746             
17747             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17748             
17749             this.hiddenField.dom.value =
17750                 this.hiddenValue !== undefined ? this.hiddenValue :
17751                 this.value !== undefined ? this.value : '';
17752
17753             // prevent input submission
17754             this.el.dom.removeAttribute('name');
17755             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17756              
17757              
17758         }
17759         
17760 //        this.list = this.el.select('ul.dropdown-menu',true).first();
17761         
17762         this.choices = this.el.select('ul.roo-select2-choices', true).first();
17763         this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17764         if(this.triggerList){
17765             this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
17766         }
17767          
17768         this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
17769         this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
17770         
17771         this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
17772         this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
17773         
17774         this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
17775         this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
17776         
17777         this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
17778         this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
17779         this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
17780         
17781         this.okBtn.hide();
17782         this.cancelBtn.hide();
17783         
17784         var _this = this;
17785         
17786         (function(){
17787             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17788             _this.list.setWidth(lw);
17789         }).defer(100);
17790         
17791         this.list.on('mouseover', this.onViewOver, this);
17792         this.list.on('mousemove', this.onViewMove, this);
17793         
17794         this.list.on('scroll', this.onViewScroll, this);
17795         
17796         if(!this.tpl){
17797             this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}"' + 
17798                 'type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
17799         }
17800
17801         this.view = new Roo.View(this.list, this.tpl, {
17802             singleSelect:true,
17803             tickable:true,
17804             parent:this,
17805             store: this.store,
17806             selectedClass: this.selectedClass
17807         });
17808         
17809         //this.view.wrapEl.setDisplayed(false);
17810         this.view.on('click', this.onViewClick, this);
17811         
17812         
17813         
17814         this.store.on('beforeload', this.onBeforeLoad, this);
17815         this.store.on('load', this.onLoad, this);
17816         this.store.on('loadexception', this.onLoadException, this);
17817         
17818         if(this.editable){
17819             this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
17820                 "up" : function(e){
17821                     this.inKeyMode = true;
17822                     this.selectPrev();
17823                 },
17824
17825                 "down" : function(e){
17826                     this.inKeyMode = true;
17827                     this.selectNext();
17828                 },
17829
17830                 "enter" : function(e){
17831                     if(this.fireEvent("specialkey", this, e)){
17832                         this.onViewClick(false);
17833                     }
17834                     
17835                     return true;
17836                 },
17837
17838                 "esc" : function(e){
17839                     this.onTickableFooterButtonClick(e, false, false);
17840                 },
17841
17842                 "tab" : function(e){
17843                     this.fireEvent("specialkey", this, e);
17844                     
17845                     this.onTickableFooterButtonClick(e, false, false);
17846                     
17847                     return true;
17848                 },
17849
17850                 scope : this,
17851
17852                 doRelay : function(e, fn, key){
17853                     if(this.scope.isExpanded()){
17854                        return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17855                     }
17856                     return true;
17857                 },
17858
17859                 forceKeyDown: true
17860             });
17861         }
17862         
17863         this.queryDelay = Math.max(this.queryDelay || 10,
17864                 this.mode == 'local' ? 10 : 250);
17865         
17866         
17867         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17868         
17869         if(this.typeAhead){
17870             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17871         }
17872         
17873         if(this.editable !== false){
17874             this.tickableInputEl().on("keyup", this.onKeyUp, this);
17875         }
17876         
17877         this.indicator = this.indicatorEl();
17878         
17879         if(this.indicator){
17880             this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
17881             this.indicator.hide();
17882         }
17883         
17884     },
17885
17886     onDestroy : function(){
17887         if(this.view){
17888             this.view.setStore(null);
17889             this.view.el.removeAllListeners();
17890             this.view.el.remove();
17891             this.view.purgeListeners();
17892         }
17893         if(this.list){
17894             this.list.dom.innerHTML  = '';
17895         }
17896         
17897         if(this.store){
17898             this.store.un('beforeload', this.onBeforeLoad, this);
17899             this.store.un('load', this.onLoad, this);
17900             this.store.un('loadexception', this.onLoadException, this);
17901         }
17902         Roo.bootstrap.form.ComboBox.superclass.onDestroy.call(this);
17903     },
17904
17905     // private
17906     fireKey : function(e){
17907         if(e.isNavKeyPress() && !this.list.isVisible()){
17908             this.fireEvent("specialkey", this, e);
17909         }
17910     },
17911
17912     // private
17913     onResize: function(w, h)
17914     {
17915         
17916         
17917 //        Roo.bootstrap.form.ComboBox.superclass.onResize.apply(this, arguments);
17918 //        
17919 //        if(typeof w != 'number'){
17920 //            // we do not handle it!?!?
17921 //            return;
17922 //        }
17923 //        var tw = this.trigger.getWidth();
17924 //       // tw += this.addicon ? this.addicon.getWidth() : 0;
17925 //       // tw += this.editicon ? this.editicon.getWidth() : 0;
17926 //        var x = w - tw;
17927 //        this.inputEl().setWidth( this.adjustWidth('input', x));
17928 //            
17929 //        //this.trigger.setStyle('left', x+'px');
17930 //        
17931 //        if(this.list && this.listWidth === undefined){
17932 //            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
17933 //            this.list.setWidth(lw);
17934 //            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17935 //        }
17936         
17937     
17938         
17939     },
17940
17941     /**
17942      * Allow or prevent the user from directly editing the field text.  If false is passed,
17943      * the user will only be able to select from the items defined in the dropdown list.  This method
17944      * is the runtime equivalent of setting the 'editable' config option at config time.
17945      * @param {Boolean} value True to allow the user to directly edit the field text
17946      */
17947     setEditable : function(value){
17948         if(value == this.editable){
17949             return;
17950         }
17951         this.editable = value;
17952         if(!value){
17953             this.inputEl().dom.setAttribute('readOnly', true);
17954             this.inputEl().on('mousedown', this.onTriggerClick,  this);
17955             this.inputEl().addClass('x-combo-noedit');
17956         }else{
17957             this.inputEl().dom.removeAttribute('readOnly');
17958             this.inputEl().un('mousedown', this.onTriggerClick,  this);
17959             this.inputEl().removeClass('x-combo-noedit');
17960         }
17961     },
17962
17963     // private
17964     
17965     onBeforeLoad : function(combo,opts){
17966         if(!this.hasFocus){
17967             return;
17968         }
17969          if (!opts.add) {
17970             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
17971          }
17972         this.restrictHeight();
17973         this.selectedIndex = -1;
17974     },
17975
17976     // private
17977     onLoad : function(){
17978         
17979         this.hasQuery = false;
17980         
17981         if(!this.hasFocus){
17982             return;
17983         }
17984         
17985         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
17986             this.loading.hide();
17987         }
17988         
17989         if(this.store.getCount() > 0){
17990             
17991             this.expand();
17992             this.restrictHeight();
17993             if(this.lastQuery == this.allQuery){
17994                 if(this.editable && !this.tickable){
17995                     this.inputEl().dom.select();
17996                 }
17997                 
17998                 if(
17999                     !this.selectByValue(this.value, true) &&
18000                     this.autoFocus && 
18001                     (
18002                         !this.store.lastOptions ||
18003                         typeof(this.store.lastOptions.add) == 'undefined' || 
18004                         this.store.lastOptions.add != true
18005                     )
18006                 ){
18007                     this.select(0, true);
18008                 }
18009             }else{
18010                 if(this.autoFocus){
18011                     this.selectNext();
18012                 }
18013                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
18014                     this.taTask.delay(this.typeAheadDelay);
18015                 }
18016             }
18017         }else{
18018             this.onEmptyResults();
18019         }
18020         
18021         //this.el.focus();
18022     },
18023     // private
18024     onLoadException : function()
18025     {
18026         this.hasQuery = false;
18027         
18028         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
18029             this.loading.hide();
18030         }
18031         
18032         if(this.tickable && this.editable){
18033             return;
18034         }
18035         
18036         this.collapse();
18037         // only causes errors at present
18038         //Roo.log(this.store.reader.jsonData);
18039         //if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
18040             // fixme
18041             //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
18042         //}
18043         
18044         
18045     },
18046     // private
18047     onTypeAhead : function(){
18048         if(this.store.getCount() > 0){
18049             var r = this.store.getAt(0);
18050             var newValue = r.data[this.displayField];
18051             var len = newValue.length;
18052             var selStart = this.getRawValue().length;
18053             
18054             if(selStart != len){
18055                 this.setRawValue(newValue);
18056                 this.selectText(selStart, newValue.length);
18057             }
18058         }
18059     },
18060
18061     // private
18062     onSelect : function(record, index){
18063         
18064         if(this.fireEvent('beforeselect', this, record, index) !== false){
18065         
18066             this.setFromData(index > -1 ? record.data : false);
18067             
18068             this.collapse();
18069             this.fireEvent('select', this, record, index);
18070         }
18071     },
18072
18073     /**
18074      * Returns the currently selected field value or empty string if no value is set.
18075      * @return {String} value The selected value
18076      */
18077     getValue : function()
18078     {
18079         if(Roo.isIOS && this.useNativeIOS){
18080             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.valueField];
18081         }
18082         
18083         if(this.multiple){
18084             return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
18085         }
18086         
18087         if(this.valueField){
18088             return typeof this.value != 'undefined' ? this.value : '';
18089         }else{
18090             return Roo.bootstrap.form.ComboBox.superclass.getValue.call(this);
18091         }
18092     },
18093     
18094     getRawValue : function()
18095     {
18096         if(Roo.isIOS && this.useNativeIOS){
18097             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.displayField];
18098         }
18099         
18100         var v = this.inputEl().getValue();
18101         
18102         return v;
18103     },
18104
18105     /**
18106      * Clears any text/value currently set in the field
18107      */
18108     clearValue : function(){
18109         
18110         if(this.hiddenField){
18111             this.hiddenField.dom.value = '';
18112         }
18113         this.value = '';
18114         this.setRawValue('');
18115         this.lastSelectionText = '';
18116         this.lastData = false;
18117         
18118         var close = this.closeTriggerEl();
18119         
18120         if(close){
18121             close.hide();
18122         }
18123         
18124         this.validate();
18125         
18126     },
18127
18128     /**
18129      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
18130      * will be displayed in the field.  If the value does not match the data value of an existing item,
18131      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
18132      * Otherwise the field will be blank (although the value will still be set).
18133      * @param {String} value The value to match
18134      */
18135     setValue : function(v)
18136     {
18137         if(Roo.isIOS && this.useNativeIOS){
18138             this.setIOSValue(v);
18139             return;
18140         }
18141         
18142         if(this.multiple){
18143             this.syncValue();
18144             return;
18145         }
18146         
18147         var text = v;
18148         if(this.valueField){
18149             var r = this.findRecord(this.valueField, v);
18150             if(r){
18151                 text = r.data[this.displayField];
18152             }else if(this.valueNotFoundText !== undefined){
18153                 text = this.valueNotFoundText;
18154             }
18155         }
18156         this.lastSelectionText = text;
18157         if(this.hiddenField){
18158             this.hiddenField.dom.value = v;
18159         }
18160         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, text);
18161         this.value = v;
18162         
18163         var close = this.closeTriggerEl();
18164         
18165         if(close){
18166             (v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
18167         }
18168         
18169         this.validate();
18170     },
18171     /**
18172      * @property {Object} the last set data for the element
18173      */
18174     
18175     lastData : false,
18176     /**
18177      * Sets the value of the field based on a object which is related to the record format for the store.
18178      * @param {Object} value the value to set as. or false on reset?
18179      */
18180     setFromData : function(o){
18181         
18182         if(this.multiple){
18183             this.addItem(o);
18184             return;
18185         }
18186             
18187         var dv = ''; // display value
18188         var vv = ''; // value value..
18189         this.lastData = o;
18190         if (this.displayField) {
18191             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18192         } else {
18193             // this is an error condition!!!
18194             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18195         }
18196         
18197         if(this.valueField){
18198             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
18199         }
18200         
18201         var close = this.closeTriggerEl();
18202         
18203         if(close){
18204             if(dv.length || vv * 1 > 0){
18205                 close.show() ;
18206                 this.blockFocus=true;
18207             } else {
18208                 close.hide();
18209             }             
18210         }
18211         
18212         if(this.hiddenField){
18213             this.hiddenField.dom.value = vv;
18214             
18215             this.lastSelectionText = dv;
18216             Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18217             this.value = vv;
18218             return;
18219         }
18220         // no hidden field.. - we store the value in 'value', but still display
18221         // display field!!!!
18222         this.lastSelectionText = dv;
18223         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18224         this.value = vv;
18225         
18226         
18227         
18228     },
18229     // private
18230     reset : function(){
18231         // overridden so that last data is reset..
18232         
18233         if(this.multiple){
18234             this.clearItem();
18235             return;
18236         }
18237         
18238         this.setValue(this.originalValue);
18239         //this.clearInvalid();
18240         this.lastData = false;
18241         if (this.view) {
18242             this.view.clearSelections();
18243         }
18244         
18245         this.validate();
18246     },
18247     // private
18248     findRecord : function(prop, value){
18249         var record;
18250         if(this.store.getCount() > 0){
18251             this.store.each(function(r){
18252                 if(r.data[prop] == value){
18253                     record = r;
18254                     return false;
18255                 }
18256                 return true;
18257             });
18258         }
18259         return record;
18260     },
18261     
18262     getName: function()
18263     {
18264         // returns hidden if it's set..
18265         if (!this.rendered) {return ''};
18266         return !this.hiddenName && this.inputEl().dom.name  ? this.inputEl().dom.name : (this.hiddenName || '');
18267         
18268     },
18269     // private
18270     onViewMove : function(e, t){
18271         this.inKeyMode = false;
18272     },
18273
18274     // private
18275     onViewOver : function(e, t){
18276         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
18277             return;
18278         }
18279         var item = this.view.findItemFromChild(t);
18280         
18281         if(item){
18282             var index = this.view.indexOf(item);
18283             this.select(index, false);
18284         }
18285     },
18286
18287     // private
18288     onViewClick : function(view, doFocus, el, e)
18289     {
18290         var index = this.view.getSelectedIndexes()[0];
18291         
18292         var r = this.store.getAt(index);
18293         
18294         if(this.tickable){
18295             
18296             if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
18297                 return;
18298             }
18299             
18300             var rm = false;
18301             var _this = this;
18302             
18303             Roo.each(this.tickItems, function(v,k){
18304                 
18305                 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
18306                     Roo.log(v);
18307                     _this.tickItems.splice(k, 1);
18308                     
18309                     if(typeof(e) == 'undefined' && view == false){
18310                         Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
18311                     }
18312                     
18313                     rm = true;
18314                     return;
18315                 }
18316             });
18317             
18318             if(rm){
18319                 return;
18320             }
18321             
18322             if(this.fireEvent('tick', this, r, index, Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked) !== false){
18323                 this.tickItems.push(r.data);
18324             }
18325             
18326             if(typeof(e) == 'undefined' && view == false){
18327                 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
18328             }
18329                     
18330             return;
18331         }
18332         
18333         if(r){
18334             this.onSelect(r, index);
18335         }
18336         if(doFocus !== false && !this.blockFocus){
18337             this.inputEl().focus();
18338         }
18339     },
18340
18341     // private
18342     restrictHeight : function(){
18343         //this.innerList.dom.style.height = '';
18344         //var inner = this.innerList.dom;
18345         //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
18346         //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
18347         //this.list.beginUpdate();
18348         //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
18349         this.list.alignTo(this.inputEl(), this.listAlign);
18350         this.list.alignTo(this.inputEl(), this.listAlign);
18351         //this.list.endUpdate();
18352     },
18353
18354     // private
18355     onEmptyResults : function(){
18356         
18357         if(this.tickable && this.editable){
18358             this.hasFocus = false;
18359             this.restrictHeight();
18360             return;
18361         }
18362         
18363         this.collapse();
18364     },
18365
18366     /**
18367      * Returns true if the dropdown list is expanded, else false.
18368      */
18369     isExpanded : function(){
18370         return this.list.isVisible();
18371     },
18372
18373     /**
18374      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
18375      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18376      * @param {String} value The data value of the item to select
18377      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18378      * selected item if it is not currently in view (defaults to true)
18379      * @return {Boolean} True if the value matched an item in the list, else false
18380      */
18381     selectByValue : function(v, scrollIntoView){
18382         if(v !== undefined && v !== null){
18383             var r = this.findRecord(this.valueField || this.displayField, v);
18384             if(r){
18385                 this.select(this.store.indexOf(r), scrollIntoView);
18386                 return true;
18387             }
18388         }
18389         return false;
18390     },
18391
18392     /**
18393      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
18394      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18395      * @param {Number} index The zero-based index of the list item to select
18396      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18397      * selected item if it is not currently in view (defaults to true)
18398      */
18399     select : function(index, scrollIntoView){
18400         this.selectedIndex = index;
18401         this.view.select(index);
18402         if(scrollIntoView !== false){
18403             var el = this.view.getNode(index);
18404             /*
18405              * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
18406              */
18407             if(el){
18408                 this.list.scrollChildIntoView(el, false);
18409             }
18410         }
18411     },
18412
18413     // private
18414     selectNext : function(){
18415         var ct = this.store.getCount();
18416         if(ct > 0){
18417             if(this.selectedIndex == -1){
18418                 this.select(0);
18419             }else if(this.selectedIndex < ct-1){
18420                 this.select(this.selectedIndex+1);
18421             }
18422         }
18423     },
18424
18425     // private
18426     selectPrev : function(){
18427         var ct = this.store.getCount();
18428         if(ct > 0){
18429             if(this.selectedIndex == -1){
18430                 this.select(0);
18431             }else if(this.selectedIndex != 0){
18432                 this.select(this.selectedIndex-1);
18433             }
18434         }
18435     },
18436
18437     // private
18438     onKeyUp : function(e){
18439         if(this.editable !== false && !e.isSpecialKey()){
18440             this.lastKey = e.getKey();
18441             this.dqTask.delay(this.queryDelay);
18442         }
18443     },
18444
18445     // private
18446     validateBlur : function(){
18447         return !this.list || !this.list.isVisible();   
18448     },
18449
18450     // private
18451     initQuery : function(){
18452         
18453         var v = this.getRawValue();
18454         
18455         if(this.tickable && this.editable){
18456             v = this.tickableInputEl().getValue();
18457         }
18458         
18459         this.doQuery(v);
18460     },
18461
18462     // private
18463     doForce : function(){
18464         if(this.inputEl().dom.value.length > 0){
18465             this.inputEl().dom.value =
18466                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
18467              
18468         }
18469     },
18470
18471     /**
18472      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
18473      * query allowing the query action to be canceled if needed.
18474      * @param {String} query The SQL query to execute
18475      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
18476      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
18477      * saved in the current store (defaults to false)
18478      */
18479     doQuery : function(q, forceAll){
18480         
18481         if(q === undefined || q === null){
18482             q = '';
18483         }
18484         var qe = {
18485             query: q,
18486             forceAll: forceAll,
18487             combo: this,
18488             cancel:false
18489         };
18490         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
18491             return false;
18492         }
18493         q = qe.query;
18494         
18495         forceAll = qe.forceAll;
18496         if(forceAll === true || (q.length >= this.minChars)){
18497             
18498             this.hasQuery = true;
18499             
18500             if(this.lastQuery != q || this.alwaysQuery){
18501                 this.lastQuery = q;
18502                 if(this.mode == 'local'){
18503                     this.selectedIndex = -1;
18504                     if(forceAll){
18505                         this.store.clearFilter();
18506                     }else{
18507                         
18508                         if(this.specialFilter){
18509                             this.fireEvent('specialfilter', this);
18510                             this.onLoad();
18511                             return;
18512                         }
18513                         
18514                         this.store.filter(this.displayField, q);
18515                     }
18516                     
18517                     this.store.fireEvent("datachanged", this.store);
18518                     
18519                     this.onLoad();
18520                     
18521                     
18522                 }else{
18523                     
18524                     this.store.baseParams[this.queryParam] = q;
18525                     
18526                     var options = {params : this.getParams(q)};
18527                     
18528                     if(this.loadNext){
18529                         options.add = true;
18530                         options.params.start = this.page * this.pageSize;
18531                     }
18532                     
18533                     this.store.load(options);
18534                     
18535                     /*
18536                      *  this code will make the page width larger, at the beginning, the list not align correctly, 
18537                      *  we should expand the list on onLoad
18538                      *  so command out it
18539                      */
18540 //                    this.expand();
18541                 }
18542             }else{
18543                 this.selectedIndex = -1;
18544                 this.onLoad();   
18545             }
18546         }
18547         
18548         this.loadNext = false;
18549     },
18550     
18551     // private
18552     getParams : function(q){
18553         var p = {};
18554         //p[this.queryParam] = q;
18555         
18556         if(this.pageSize){
18557             p.start = 0;
18558             p.limit = this.pageSize;
18559         }
18560         return p;
18561     },
18562
18563     /**
18564      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
18565      */
18566     collapse : function(){
18567         if(!this.isExpanded()){
18568             return;
18569         }
18570         
18571         this.list.hide();
18572         
18573         this.hasFocus = false;
18574         
18575         if(this.tickable){
18576             this.okBtn.hide();
18577             this.cancelBtn.hide();
18578             this.trigger.show();
18579             
18580             if(this.editable){
18581                 this.tickableInputEl().dom.value = '';
18582                 this.tickableInputEl().blur();
18583             }
18584             
18585         }
18586         
18587         Roo.get(document).un('mousedown', this.collapseIf, this);
18588         Roo.get(document).un('mousewheel', this.collapseIf, this);
18589         if (!this.editable) {
18590             Roo.get(document).un('keydown', this.listKeyPress, this);
18591         }
18592         this.fireEvent('collapse', this);
18593         
18594         this.validate();
18595     },
18596
18597     // private
18598     collapseIf : function(e){
18599         var in_combo  = e.within(this.el);
18600         var in_list =  e.within(this.list);
18601         var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
18602         
18603         if (in_combo || in_list || is_list) {
18604             //e.stopPropagation();
18605             return;
18606         }
18607         
18608         if(this.tickable){
18609             this.onTickableFooterButtonClick(e, false, false);
18610         }
18611
18612         this.collapse();
18613         
18614     },
18615
18616     /**
18617      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
18618      */
18619     expand : function(){
18620        
18621         if(this.isExpanded() || !this.hasFocus){
18622             return;
18623         }
18624         
18625         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
18626         this.list.setWidth(lw);
18627         
18628         Roo.log('expand');
18629         
18630         this.list.show();
18631         
18632         this.restrictHeight();
18633         
18634         if(this.tickable){
18635             
18636             this.tickItems = Roo.apply([], this.item);
18637             
18638             this.okBtn.show();
18639             this.cancelBtn.show();
18640             this.trigger.hide();
18641             
18642             if(this.editable){
18643                 this.tickableInputEl().focus();
18644             }
18645             
18646         }
18647         
18648         Roo.get(document).on('mousedown', this.collapseIf, this);
18649         Roo.get(document).on('mousewheel', this.collapseIf, this);
18650         if (!this.editable) {
18651             Roo.get(document).on('keydown', this.listKeyPress, this);
18652         }
18653         
18654         this.fireEvent('expand', this);
18655     },
18656
18657     // private
18658     // Implements the default empty TriggerField.onTriggerClick function
18659     onTriggerClick : function(e)
18660     {
18661         Roo.log('trigger click');
18662         
18663         if(this.disabled || !this.triggerList){
18664             return;
18665         }
18666         
18667         this.page = 0;
18668         this.loadNext = false;
18669         
18670         if(this.isExpanded()){
18671             this.collapse();
18672             if (!this.blockFocus) {
18673                 this.inputEl().focus();
18674             }
18675             
18676         }else {
18677             this.hasFocus = true;
18678             if(this.triggerAction == 'all') {
18679                 this.doQuery(this.allQuery, true);
18680             } else {
18681                 this.doQuery(this.getRawValue());
18682             }
18683             if (!this.blockFocus) {
18684                 this.inputEl().focus();
18685             }
18686         }
18687     },
18688     
18689     onTickableTriggerClick : function(e)
18690     {
18691         if(this.disabled){
18692             return;
18693         }
18694         
18695         this.page = 0;
18696         this.loadNext = false;
18697         this.hasFocus = true;
18698         
18699         if(this.triggerAction == 'all') {
18700             this.doQuery(this.allQuery, true);
18701         } else {
18702             this.doQuery(this.getRawValue());
18703         }
18704     },
18705     
18706     onSearchFieldClick : function(e)
18707     {
18708         if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
18709             this.onTickableFooterButtonClick(e, false, false);
18710             return;
18711         }
18712         
18713         if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
18714             return;
18715         }
18716         
18717         this.page = 0;
18718         this.loadNext = false;
18719         this.hasFocus = true;
18720         
18721         if(this.triggerAction == 'all') {
18722             this.doQuery(this.allQuery, true);
18723         } else {
18724             this.doQuery(this.getRawValue());
18725         }
18726     },
18727     
18728     listKeyPress : function(e)
18729     {
18730         //Roo.log('listkeypress');
18731         // scroll to first matching element based on key pres..
18732         if (e.isSpecialKey()) {
18733             return false;
18734         }
18735         var k = String.fromCharCode(e.getKey()).toUpperCase();
18736         //Roo.log(k);
18737         var match  = false;
18738         var csel = this.view.getSelectedNodes();
18739         var cselitem = false;
18740         if (csel.length) {
18741             var ix = this.view.indexOf(csel[0]);
18742             cselitem  = this.store.getAt(ix);
18743             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
18744                 cselitem = false;
18745             }
18746             
18747         }
18748         
18749         this.store.each(function(v) { 
18750             if (cselitem) {
18751                 // start at existing selection.
18752                 if (cselitem.id == v.id) {
18753                     cselitem = false;
18754                 }
18755                 return true;
18756             }
18757                 
18758             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
18759                 match = this.store.indexOf(v);
18760                 return false;
18761             }
18762             return true;
18763         }, this);
18764         
18765         if (match === false) {
18766             return true; // no more action?
18767         }
18768         // scroll to?
18769         this.view.select(match);
18770         var sn = Roo.get(this.view.getSelectedNodes()[0]);
18771         sn.scrollIntoView(sn.dom.parentNode, false);
18772     },
18773     
18774     onViewScroll : function(e, t){
18775         
18776         if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
18777             return;
18778         }
18779         
18780         this.hasQuery = true;
18781         
18782         this.loading = this.list.select('.loading', true).first();
18783         
18784         if(this.loading === null){
18785             this.list.createChild({
18786                 tag: 'div',
18787                 cls: 'loading roo-select2-more-results roo-select2-active',
18788                 html: 'Loading more results...'
18789             });
18790             
18791             this.loading = this.list.select('.loading', true).first();
18792             
18793             this.loading.setVisibilityMode(Roo.Element.DISPLAY);
18794             
18795             this.loading.hide();
18796         }
18797         
18798         this.loading.show();
18799         
18800         var _combo = this;
18801         
18802         this.page++;
18803         this.loadNext = true;
18804         
18805         (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
18806         
18807         return;
18808     },
18809     
18810     addItem : function(o)
18811     {   
18812         var dv = ''; // display value
18813         
18814         if (this.displayField) {
18815             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18816         } else {
18817             // this is an error condition!!!
18818             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18819         }
18820         
18821         if(!dv.length){
18822             return;
18823         }
18824         
18825         var choice = this.choices.createChild({
18826             tag: 'li',
18827             cls: 'roo-select2-search-choice',
18828             cn: [
18829                 {
18830                     tag: 'div',
18831                     html: dv
18832                 },
18833                 {
18834                     tag: 'a',
18835                     href: '#',
18836                     cls: 'roo-select2-search-choice-close fa fa-times',
18837                     tabindex: '-1'
18838                 }
18839             ]
18840             
18841         }, this.searchField);
18842         
18843         var close = choice.select('a.roo-select2-search-choice-close', true).first();
18844         
18845         close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
18846         
18847         this.item.push(o);
18848         
18849         this.lastData = o;
18850         
18851         this.syncValue();
18852         
18853         this.inputEl().dom.value = '';
18854         
18855         this.validate();
18856     },
18857     
18858     onRemoveItem : function(e, _self, o)
18859     {
18860         e.preventDefault();
18861         
18862         this.lastItem = Roo.apply([], this.item);
18863         
18864         var index = this.item.indexOf(o.data) * 1;
18865         
18866         if( index < 0){
18867             Roo.log('not this item?!');
18868             return;
18869         }
18870         
18871         this.item.splice(index, 1);
18872         o.item.remove();
18873         
18874         this.syncValue();
18875         
18876         this.fireEvent('remove', this, e);
18877         
18878         this.validate();
18879         
18880     },
18881     
18882     syncValue : function()
18883     {
18884         if(!this.item.length){
18885             this.clearValue();
18886             return;
18887         }
18888             
18889         var value = [];
18890         var _this = this;
18891         Roo.each(this.item, function(i){
18892             if(_this.valueField){
18893                 value.push(i[_this.valueField]);
18894                 return;
18895             }
18896
18897             value.push(i);
18898         });
18899
18900         this.value = value.join(',');
18901
18902         if(this.hiddenField){
18903             this.hiddenField.dom.value = this.value;
18904         }
18905         
18906         this.store.fireEvent("datachanged", this.store);
18907         
18908         this.validate();
18909     },
18910     
18911     clearItem : function()
18912     {
18913         if(!this.multiple){
18914             return;
18915         }
18916         
18917         this.item = [];
18918         
18919         Roo.each(this.choices.select('>li.roo-select2-search-choice', true).elements, function(c){
18920            c.remove();
18921         });
18922         
18923         this.syncValue();
18924         
18925         this.validate();
18926         
18927         if(this.tickable && !Roo.isTouch){
18928             this.view.refresh();
18929         }
18930     },
18931     
18932     inputEl: function ()
18933     {
18934         if(Roo.isIOS && this.useNativeIOS){
18935             return this.el.select('select.roo-ios-select', true).first();
18936         }
18937         
18938         if(Roo.isTouch && this.mobileTouchView){
18939             return this.el.select('input.form-control',true).first();
18940         }
18941         
18942         if(this.tickable){
18943             return this.searchField;
18944         }
18945         
18946         return this.el.select('input.form-control',true).first();
18947     },
18948     
18949     onTickableFooterButtonClick : function(e, btn, el)
18950     {
18951         e.preventDefault();
18952         
18953         this.lastItem = Roo.apply([], this.item);
18954         
18955         if(btn && btn.name == 'cancel'){
18956             this.tickItems = Roo.apply([], this.item);
18957             this.collapse();
18958             return;
18959         }
18960         
18961         this.clearItem();
18962         
18963         var _this = this;
18964         
18965         Roo.each(this.tickItems, function(o){
18966             _this.addItem(o);
18967         });
18968         
18969         this.collapse();
18970         
18971     },
18972     
18973     validate : function()
18974     {
18975         if(this.getVisibilityEl().hasClass('hidden')){
18976             return true;
18977         }
18978         
18979         var v = this.getRawValue();
18980         
18981         if(this.multiple){
18982             v = this.getValue();
18983         }
18984         
18985         if(this.disabled || this.allowBlank || v.length){
18986             this.markValid();
18987             return true;
18988         }
18989         
18990         this.markInvalid();
18991         return false;
18992     },
18993     
18994     tickableInputEl : function()
18995     {
18996         if(!this.tickable || !this.editable){
18997             return this.inputEl();
18998         }
18999         
19000         return this.inputEl().select('.roo-select2-search-field-input', true).first();
19001     },
19002     
19003     
19004     getAutoCreateTouchView : function()
19005     {
19006         var id = Roo.id();
19007         
19008         var cfg = {
19009             cls: 'form-group' //input-group
19010         };
19011         
19012         var input =  {
19013             tag: 'input',
19014             id : id,
19015             type : this.inputType,
19016             cls : 'form-control x-combo-noedit',
19017             autocomplete: 'new-password',
19018             placeholder : this.placeholder || '',
19019             readonly : true
19020         };
19021         
19022         if (this.name) {
19023             input.name = this.name;
19024         }
19025         
19026         if (this.size) {
19027             input.cls += ' input-' + this.size;
19028         }
19029         
19030         if (this.disabled) {
19031             input.disabled = true;
19032         }
19033         
19034         var inputblock = {
19035             cls : 'roo-combobox-wrap',
19036             cn : [
19037                 input
19038             ]
19039         };
19040         
19041         if(this.before){
19042             inputblock.cls += ' input-group';
19043             
19044             inputblock.cn.unshift({
19045                 tag :'span',
19046                 cls : 'input-group-addon input-group-prepend input-group-text',
19047                 html : this.before
19048             });
19049         }
19050         
19051         if(this.removable && !this.multiple){
19052             inputblock.cls += ' roo-removable';
19053             
19054             inputblock.cn.push({
19055                 tag: 'button',
19056                 html : 'x',
19057                 cls : 'roo-combo-removable-btn close'
19058             });
19059         }
19060
19061         if(this.hasFeedback && !this.allowBlank){
19062             
19063             inputblock.cls += ' has-feedback';
19064             
19065             inputblock.cn.push({
19066                 tag: 'span',
19067                 cls: 'glyphicon form-control-feedback'
19068             });
19069             
19070         }
19071         
19072         if (this.after) {
19073             
19074             inputblock.cls += (this.before) ? '' : ' input-group';
19075             
19076             inputblock.cn.push({
19077                 tag :'span',
19078                 cls : 'input-group-addon input-group-append input-group-text',
19079                 html : this.after
19080             });
19081         }
19082
19083         
19084         var ibwrap = inputblock;
19085         
19086         if(this.multiple){
19087             ibwrap = {
19088                 tag: 'ul',
19089                 cls: 'roo-select2-choices',
19090                 cn:[
19091                     {
19092                         tag: 'li',
19093                         cls: 'roo-select2-search-field',
19094                         cn: [
19095
19096                             inputblock
19097                         ]
19098                     }
19099                 ]
19100             };
19101         
19102             
19103         }
19104         
19105         var combobox = {
19106             cls: 'roo-select2-container input-group roo-touchview-combobox ',
19107             cn: [
19108                 {
19109                     tag: 'input',
19110                     type : 'hidden',
19111                     cls: 'form-hidden-field'
19112                 },
19113                 ibwrap
19114             ]
19115         };
19116         
19117         if(!this.multiple && this.showToggleBtn){
19118             
19119             var caret = {
19120                 cls: 'caret'
19121             };
19122             
19123             if (this.caret != false) {
19124                 caret = {
19125                      tag: 'i',
19126                      cls: 'fa fa-' + this.caret
19127                 };
19128                 
19129             }
19130             
19131             combobox.cn.push({
19132                 tag :'span',
19133                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
19134                 cn : [
19135                     Roo.bootstrap.version == 3 ? caret : '',
19136                     {
19137                         tag: 'span',
19138                         cls: 'combobox-clear',
19139                         cn  : [
19140                             {
19141                                 tag : 'i',
19142                                 cls: 'icon-remove'
19143                             }
19144                         ]
19145                     }
19146                 ]
19147
19148             })
19149         }
19150         
19151         if(this.multiple){
19152             combobox.cls += ' roo-select2-container-multi';
19153         }
19154         
19155         var required =  this.allowBlank ?  {
19156                     tag : 'i',
19157                     style: 'display: none'
19158                 } : {
19159                    tag : 'i',
19160                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
19161                    tooltip : 'This field is required'
19162                 };
19163         
19164         var align = this.labelAlign || this.parentLabelAlign();
19165         
19166         if (align ==='left' && this.fieldLabel.length) {
19167
19168             cfg.cn = [
19169                 required,
19170                 {
19171                     tag: 'label',
19172                     cls : 'control-label col-form-label',
19173                     html : this.fieldLabel
19174
19175                 },
19176                 {
19177                     cls : 'roo-combobox-wrap ', 
19178                     cn: [
19179                         combobox
19180                     ]
19181                 }
19182             ];
19183             
19184             var labelCfg = cfg.cn[1];
19185             var contentCfg = cfg.cn[2];
19186             
19187
19188             if(this.indicatorpos == 'right'){
19189                 cfg.cn = [
19190                     {
19191                         tag: 'label',
19192                         'for' :  id,
19193                         cls : 'control-label col-form-label',
19194                         cn : [
19195                             {
19196                                 tag : 'span',
19197                                 html : this.fieldLabel
19198                             },
19199                             required
19200                         ]
19201                     },
19202                     {
19203                         cls : "roo-combobox-wrap ",
19204                         cn: [
19205                             combobox
19206                         ]
19207                     }
19208
19209                 ];
19210                 
19211                 labelCfg = cfg.cn[0];
19212                 contentCfg = cfg.cn[1];
19213             }
19214             
19215            
19216             
19217             if(this.labelWidth > 12){
19218                 labelCfg.style = "width: " + this.labelWidth + 'px';
19219             }
19220            
19221             if(this.labelWidth < 13 && this.labelmd == 0){
19222                 this.labelmd = this.labelWidth;
19223             }
19224             
19225             if(this.labellg > 0){
19226                 labelCfg.cls += ' col-lg-' + this.labellg;
19227                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
19228             }
19229             
19230             if(this.labelmd > 0){
19231                 labelCfg.cls += ' col-md-' + this.labelmd;
19232                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
19233             }
19234             
19235             if(this.labelsm > 0){
19236                 labelCfg.cls += ' col-sm-' + this.labelsm;
19237                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
19238             }
19239             
19240             if(this.labelxs > 0){
19241                 labelCfg.cls += ' col-xs-' + this.labelxs;
19242                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
19243             }
19244                 
19245                 
19246         } else if ( this.fieldLabel.length) {
19247             cfg.cn = [
19248                required,
19249                 {
19250                     tag: 'label',
19251                     cls : 'control-label',
19252                     html : this.fieldLabel
19253
19254                 },
19255                 {
19256                     cls : '', 
19257                     cn: [
19258                         combobox
19259                     ]
19260                 }
19261             ];
19262             
19263             if(this.indicatorpos == 'right'){
19264                 cfg.cn = [
19265                     {
19266                         tag: 'label',
19267                         cls : 'control-label',
19268                         html : this.fieldLabel,
19269                         cn : [
19270                             required
19271                         ]
19272                     },
19273                     {
19274                         cls : '', 
19275                         cn: [
19276                             combobox
19277                         ]
19278                     }
19279                 ];
19280             }
19281         } else {
19282             cfg.cn = combobox;    
19283         }
19284         
19285         
19286         var settings = this;
19287         
19288         ['xs','sm','md','lg'].map(function(size){
19289             if (settings[size]) {
19290                 cfg.cls += ' col-' + size + '-' + settings[size];
19291             }
19292         });
19293         
19294         return cfg;
19295     },
19296     
19297     initTouchView : function()
19298     {
19299         this.renderTouchView();
19300         
19301         this.touchViewEl.on('scroll', function(){
19302             this.el.dom.scrollTop = 0;
19303         }, this);
19304         
19305         this.originalValue = this.getValue();
19306         
19307         this.triggerEl = this.el.select('span.dropdown-toggle',true).first();
19308         
19309         this.inputEl().on("click", this.showTouchView, this);
19310         if (this.triggerEl) {
19311             this.triggerEl.on("click", this.showTouchView, this);
19312         }
19313         
19314         
19315         this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
19316         this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
19317         
19318         this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' });
19319         
19320         this.store.on('beforeload', this.onTouchViewBeforeLoad, this);
19321         this.store.on('load', this.onTouchViewLoad, this);
19322         this.store.on('loadexception', this.onTouchViewLoadException, this);
19323         
19324         if(this.hiddenName){
19325             
19326             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
19327             
19328             this.hiddenField.dom.value =
19329                 this.hiddenValue !== undefined ? this.hiddenValue :
19330                 this.value !== undefined ? this.value : '';
19331         
19332             this.el.dom.removeAttribute('name');
19333             this.hiddenField.dom.setAttribute('name', this.hiddenName);
19334         }
19335         
19336         if(this.multiple){
19337             this.choices = this.el.select('ul.roo-select2-choices', true).first();
19338             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
19339         }
19340         
19341         if(this.removable && !this.multiple){
19342             var close = this.closeTriggerEl();
19343             if(close){
19344                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
19345                 close.on('click', this.removeBtnClick, this, close);
19346             }
19347         }
19348         /*
19349          * fix the bug in Safari iOS8
19350          */
19351         this.inputEl().on("focus", function(e){
19352             document.activeElement.blur();
19353         }, this);
19354         
19355         this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
19356         
19357         return;
19358         
19359         
19360     },
19361     
19362     renderTouchView : function()
19363     {
19364         this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.form.ComboBox.touchViewTemplate);
19365         this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19366         
19367         this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
19368         this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19369         
19370         this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first();
19371         this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19372         this.touchViewBodyEl.setStyle('overflow', 'auto');
19373         
19374         this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first();
19375         this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19376         
19377         this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first();
19378         this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19379         
19380     },
19381     
19382     showTouchView : function()
19383     {
19384         if(this.disabled){
19385             return;
19386         }
19387         
19388         this.touchViewHeaderEl.hide();
19389
19390         if(this.modalTitle.length){
19391             this.touchViewHeaderEl.dom.innerHTML = this.modalTitle;
19392             this.touchViewHeaderEl.show();
19393         }
19394
19395         this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
19396         this.touchViewEl.show();
19397
19398         this.touchViewEl.select('.modal-dialog', true).first().setStyle({ margin : '0px', width : '100%'});
19399         
19400         //this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(
19401         //        Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
19402
19403         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19404
19405         if(this.modalTitle.length){
19406             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19407         }
19408         
19409         this.touchViewBodyEl.setHeight(bodyHeight);
19410
19411         if(this.animate){
19412             var _this = this;
19413             (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
19414         }else{
19415             this.touchViewEl.addClass(['in','show']);
19416         }
19417         
19418         if(this._touchViewMask){
19419             Roo.get(document.body).addClass("x-body-masked");
19420             this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
19421             this._touchViewMask.setStyle('z-index', 10000);
19422             this._touchViewMask.addClass('show');
19423         }
19424         
19425         this.doTouchViewQuery();
19426         
19427     },
19428     
19429     hideTouchView : function()
19430     {
19431         this.touchViewEl.removeClass(['in','show']);
19432
19433         if(this.animate){
19434             var _this = this;
19435             (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150);
19436         }else{
19437             this.touchViewEl.setStyle('display', 'none');
19438         }
19439         
19440         if(this._touchViewMask){
19441             this._touchViewMask.removeClass('show');
19442             Roo.get(document.body).removeClass("x-body-masked");
19443         }
19444     },
19445     
19446     setTouchViewValue : function()
19447     {
19448         if(this.multiple){
19449             this.clearItem();
19450         
19451             var _this = this;
19452
19453             Roo.each(this.tickItems, function(o){
19454                 this.addItem(o);
19455             }, this);
19456         }
19457         
19458         this.hideTouchView();
19459     },
19460     
19461     doTouchViewQuery : function()
19462     {
19463         var qe = {
19464             query: '',
19465             forceAll: true,
19466             combo: this,
19467             cancel:false
19468         };
19469         
19470         if(this.fireEvent('beforequery', qe) ===false || qe.cancel){
19471             return false;
19472         }
19473         
19474         if(!this.alwaysQuery || this.mode == 'local'){
19475             this.onTouchViewLoad();
19476             return;
19477         }
19478         
19479         this.store.load();
19480     },
19481     
19482     onTouchViewBeforeLoad : function(combo,opts)
19483     {
19484         return;
19485     },
19486
19487     // private
19488     onTouchViewLoad : function()
19489     {
19490         if(this.store.getCount() < 1){
19491             this.onTouchViewEmptyResults();
19492             return;
19493         }
19494         
19495         this.clearTouchView();
19496         
19497         var rawValue = this.getRawValue();
19498         
19499         var template = (this.multiple) ? Roo.bootstrap.form.ComboBox.listItemCheckbox : Roo.bootstrap.form.ComboBox.listItemRadio;
19500         
19501         this.tickItems = [];
19502         
19503         this.store.data.each(function(d, rowIndex){
19504             var row = this.touchViewListGroup.createChild(template);
19505             
19506             if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){
19507                 row.addClass(d.data.cls);
19508             }
19509             
19510             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19511                 var cfg = {
19512                     data : d.data,
19513                     html : d.data[this.displayField]
19514                 };
19515                 
19516                 if(this.fireEvent('touchviewdisplay', this, cfg) !== false){
19517                     row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html;
19518                 }
19519             }
19520             row.removeClass('selected');
19521             if(!this.multiple && this.valueField &&
19522                     typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue())
19523             {
19524                 // radio buttons..
19525                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19526                 row.addClass('selected');
19527             }
19528             
19529             if(this.multiple && this.valueField &&
19530                     typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1)
19531             {
19532                 
19533                 // checkboxes...
19534                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19535                 this.tickItems.push(d.data);
19536             }
19537             
19538             row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex});
19539             
19540         }, this);
19541         
19542         var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first();
19543         
19544         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19545
19546         if(this.modalTitle.length){
19547             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19548         }
19549
19550         var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2;
19551         
19552         if(this.mobile_restrict_height && listHeight < bodyHeight){
19553             this.touchViewBodyEl.setHeight(listHeight);
19554         }
19555         
19556         var _this = this;
19557         
19558         if(firstChecked && listHeight > bodyHeight){
19559             (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500);
19560         }
19561         
19562     },
19563     
19564     onTouchViewLoadException : function()
19565     {
19566         this.hideTouchView();
19567     },
19568     
19569     onTouchViewEmptyResults : function()
19570     {
19571         this.clearTouchView();
19572         
19573         this.touchViewListGroup.createChild(Roo.bootstrap.form.ComboBox.emptyResult);
19574         
19575         this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
19576         
19577     },
19578     
19579     clearTouchView : function()
19580     {
19581         this.touchViewListGroup.dom.innerHTML = '';
19582     },
19583     
19584     onTouchViewClick : function(e, el, o)
19585     {
19586         e.preventDefault();
19587         
19588         var row = o.row;
19589         var rowIndex = o.rowIndex;
19590         
19591         var r = this.store.getAt(rowIndex);
19592         
19593         if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){
19594             
19595             if(!this.multiple){
19596                 Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
19597                     c.dom.removeAttribute('checked');
19598                 }, this);
19599
19600                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19601
19602                 this.setFromData(r.data);
19603
19604                 var close = this.closeTriggerEl();
19605
19606                 if(close){
19607                     close.show();
19608                 }
19609
19610                 this.hideTouchView();
19611
19612                 this.fireEvent('select', this, r, rowIndex);
19613
19614                 return;
19615             }
19616
19617             if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
19618                 row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
19619                 this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
19620                 return;
19621             }
19622
19623             row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19624             this.addItem(r.data);
19625             this.tickItems.push(r.data);
19626         }
19627     },
19628     
19629     getAutoCreateNativeIOS : function()
19630     {
19631         var cfg = {
19632             cls: 'form-group' //input-group,
19633         };
19634         
19635         var combobox =  {
19636             tag: 'select',
19637             cls : 'roo-ios-select'
19638         };
19639         
19640         if (this.name) {
19641             combobox.name = this.name;
19642         }
19643         
19644         if (this.disabled) {
19645             combobox.disabled = true;
19646         }
19647         
19648         var settings = this;
19649         
19650         ['xs','sm','md','lg'].map(function(size){
19651             if (settings[size]) {
19652                 cfg.cls += ' col-' + size + '-' + settings[size];
19653             }
19654         });
19655         
19656         cfg.cn = combobox;
19657         
19658         return cfg;
19659         
19660     },
19661     
19662     initIOSView : function()
19663     {
19664         this.store.on('load', this.onIOSViewLoad, this);
19665         
19666         return;
19667     },
19668     
19669     onIOSViewLoad : function()
19670     {
19671         if(this.store.getCount() < 1){
19672             return;
19673         }
19674         
19675         this.clearIOSView();
19676         
19677         if(this.allowBlank) {
19678             
19679             var default_text = '-- SELECT --';
19680             
19681             if(this.placeholder.length){
19682                 default_text = this.placeholder;
19683             }
19684             
19685             if(this.emptyTitle.length){
19686                 default_text += ' - ' + this.emptyTitle + ' -';
19687             }
19688             
19689             var opt = this.inputEl().createChild({
19690                 tag: 'option',
19691                 value : 0,
19692                 html : default_text
19693             });
19694             
19695             var o = {};
19696             o[this.valueField] = 0;
19697             o[this.displayField] = default_text;
19698             
19699             this.ios_options.push({
19700                 data : o,
19701                 el : opt
19702             });
19703             
19704         }
19705         
19706         this.store.data.each(function(d, rowIndex){
19707             
19708             var html = '';
19709             
19710             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19711                 html = d.data[this.displayField];
19712             }
19713             
19714             var value = '';
19715             
19716             if(this.valueField && typeof(d.data[this.valueField]) != 'undefined'){
19717                 value = d.data[this.valueField];
19718             }
19719             
19720             var option = {
19721                 tag: 'option',
19722                 value : value,
19723                 html : html
19724             };
19725             
19726             if(this.value == d.data[this.valueField]){
19727                 option['selected'] = true;
19728             }
19729             
19730             var opt = this.inputEl().createChild(option);
19731             
19732             this.ios_options.push({
19733                 data : d.data,
19734                 el : opt
19735             });
19736             
19737         }, this);
19738         
19739         this.inputEl().on('change', function(){
19740            this.fireEvent('select', this);
19741         }, this);
19742         
19743     },
19744     
19745     clearIOSView: function()
19746     {
19747         this.inputEl().dom.innerHTML = '';
19748         
19749         this.ios_options = [];
19750     },
19751     
19752     setIOSValue: function(v)
19753     {
19754         this.value = v;
19755         
19756         if(!this.ios_options){
19757             return;
19758         }
19759         
19760         Roo.each(this.ios_options, function(opts){
19761            
19762            opts.el.dom.removeAttribute('selected');
19763            
19764            if(opts.data[this.valueField] != v){
19765                return;
19766            }
19767            
19768            opts.el.dom.setAttribute('selected', true);
19769            
19770         }, this);
19771     }
19772
19773     /** 
19774     * @cfg {Boolean} grow 
19775     * @hide 
19776     */
19777     /** 
19778     * @cfg {Number} growMin 
19779     * @hide 
19780     */
19781     /** 
19782     * @cfg {Number} growMax 
19783     * @hide 
19784     */
19785     /**
19786      * @hide
19787      * @method autoSize
19788      */
19789 });
19790
19791 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19792     
19793     header : {
19794         tag: 'div',
19795         cls: 'modal-header',
19796         cn: [
19797             {
19798                 tag: 'h4',
19799                 cls: 'modal-title'
19800             }
19801         ]
19802     },
19803     
19804     body : {
19805         tag: 'div',
19806         cls: 'modal-body',
19807         cn: [
19808             {
19809                 tag: 'ul',
19810                 cls: 'list-group'
19811             }
19812         ]
19813     },
19814     
19815     listItemRadio : {
19816         tag: 'li',
19817         cls: 'list-group-item',
19818         cn: [
19819             {
19820                 tag: 'span',
19821                 cls: 'roo-combobox-list-group-item-value'
19822             },
19823             {
19824                 tag: 'div',
19825                 cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',
19826                 cn: [
19827                     {
19828                         tag: 'input',
19829                         type: 'radio'
19830                     },
19831                     {
19832                         tag: 'label'
19833                     }
19834                 ]
19835             }
19836         ]
19837     },
19838     
19839     listItemCheckbox : {
19840         tag: 'li',
19841         cls: 'list-group-item',
19842         cn: [
19843             {
19844                 tag: 'span',
19845                 cls: 'roo-combobox-list-group-item-value'
19846             },
19847             {
19848                 tag: 'div',
19849                 cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',
19850                 cn: [
19851                     {
19852                         tag: 'input',
19853                         type: 'checkbox'
19854                     },
19855                     {
19856                         tag: 'label'
19857                     }
19858                 ]
19859             }
19860         ]
19861     },
19862     
19863     emptyResult : {
19864         tag: 'div',
19865         cls: 'alert alert-danger roo-combobox-touch-view-empty-result'
19866     },
19867     
19868     footer : {
19869         tag: 'div',
19870         cls: 'modal-footer',
19871         cn: [
19872             {
19873                 tag: 'div',
19874                 cls: 'row',
19875                 cn: [
19876                     {
19877                         tag: 'div',
19878                         cls: 'col-xs-6 text-left',
19879                         cn: {
19880                             tag: 'button',
19881                             cls: 'btn btn-danger roo-touch-view-cancel',
19882                             html: 'Cancel'
19883                         }
19884                     },
19885                     {
19886                         tag: 'div',
19887                         cls: 'col-xs-6 text-right',
19888                         cn: {
19889                             tag: 'button',
19890                             cls: 'btn btn-success roo-touch-view-ok',
19891                             html: 'OK'
19892                         }
19893                     }
19894                 ]
19895             }
19896         ]
19897         
19898     }
19899 });
19900
19901 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19902     
19903     touchViewTemplate : {
19904         tag: 'div',
19905         cls: 'modal fade roo-combobox-touch-view',
19906         cn: [
19907             {
19908                 tag: 'div',
19909                 cls: 'modal-dialog',
19910                 style : 'position:fixed', // we have to fix position....
19911                 cn: [
19912                     {
19913                         tag: 'div',
19914                         cls: 'modal-content',
19915                         cn: [
19916                             Roo.bootstrap.form.ComboBox.header,
19917                             Roo.bootstrap.form.ComboBox.body,
19918                             Roo.bootstrap.form.ComboBox.footer
19919                         ]
19920                     }
19921                 ]
19922             }
19923         ]
19924     }
19925 });/*
19926  * Based on:
19927  * Ext JS Library 1.1.1
19928  * Copyright(c) 2006-2007, Ext JS, LLC.
19929  *
19930  * Originally Released Under LGPL - original licence link has changed is not relivant.
19931  *
19932  * Fork - LGPL
19933  * <script type="text/javascript">
19934  */
19935
19936 /**
19937  * @class Roo.View
19938  * @extends Roo.util.Observable
19939  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
19940  * This class also supports single and multi selection modes. <br>
19941  * Create a data model bound view:
19942  <pre><code>
19943  var store = new Roo.data.Store(...);
19944
19945  var view = new Roo.View({
19946     el : "my-element",
19947     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
19948  
19949     singleSelect: true,
19950     selectedClass: "ydataview-selected",
19951     store: store
19952  });
19953
19954  // listen for node click?
19955  view.on("click", function(vw, index, node, e){
19956  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
19957  });
19958
19959  // load XML data
19960  dataModel.load("foobar.xml");
19961  </code></pre>
19962  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
19963  * <br><br>
19964  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
19965  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
19966  * 
19967  * Note: old style constructor is still suported (container, template, config)
19968  * 
19969  * @constructor
19970  * Create a new View
19971  * @param {Object} config The config object
19972  * 
19973  */
19974 Roo.View = function(config, depreciated_tpl, depreciated_config){
19975     
19976     this.parent = false;
19977     
19978     if (typeof(depreciated_tpl) == 'undefined') {
19979         // new way.. - universal constructor.
19980         Roo.apply(this, config);
19981         this.el  = Roo.get(this.el);
19982     } else {
19983         // old format..
19984         this.el  = Roo.get(config);
19985         this.tpl = depreciated_tpl;
19986         Roo.apply(this, depreciated_config);
19987     }
19988     this.wrapEl  = this.el.wrap().wrap();
19989     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
19990     
19991     
19992     if(typeof(this.tpl) == "string"){
19993         this.tpl = new Roo.Template(this.tpl);
19994     } else {
19995         // support xtype ctors..
19996         this.tpl = new Roo.factory(this.tpl, Roo);
19997     }
19998     
19999     
20000     this.tpl.compile();
20001     
20002     /** @private */
20003     this.addEvents({
20004         /**
20005          * @event beforeclick
20006          * Fires before a click is processed. Returns false to cancel the default action.
20007          * @param {Roo.View} this
20008          * @param {Number} index The index of the target node
20009          * @param {HTMLElement} node The target node
20010          * @param {Roo.EventObject} e The raw event object
20011          */
20012             "beforeclick" : true,
20013         /**
20014          * @event click
20015          * Fires when a template node is clicked.
20016          * @param {Roo.View} this
20017          * @param {Number} index The index of the target node
20018          * @param {HTMLElement} node The target node
20019          * @param {Roo.EventObject} e The raw event object
20020          */
20021             "click" : true,
20022         /**
20023          * @event dblclick
20024          * Fires when a template node is double clicked.
20025          * @param {Roo.View} this
20026          * @param {Number} index The index of the target node
20027          * @param {HTMLElement} node The target node
20028          * @param {Roo.EventObject} e The raw event object
20029          */
20030             "dblclick" : true,
20031         /**
20032          * @event contextmenu
20033          * Fires when a template node is right clicked.
20034          * @param {Roo.View} this
20035          * @param {Number} index The index of the target node
20036          * @param {HTMLElement} node The target node
20037          * @param {Roo.EventObject} e The raw event object
20038          */
20039             "contextmenu" : true,
20040         /**
20041          * @event selectionchange
20042          * Fires when the selected nodes change.
20043          * @param {Roo.View} this
20044          * @param {Array} selections Array of the selected nodes
20045          */
20046             "selectionchange" : true,
20047     
20048         /**
20049          * @event beforeselect
20050          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
20051          * @param {Roo.View} this
20052          * @param {HTMLElement} node The node to be selected
20053          * @param {Array} selections Array of currently selected nodes
20054          */
20055             "beforeselect" : true,
20056         /**
20057          * @event preparedata
20058          * Fires on every row to render, to allow you to change the data.
20059          * @param {Roo.View} this
20060          * @param {Object} data to be rendered (change this)
20061          */
20062           "preparedata" : true
20063           
20064           
20065         });
20066
20067
20068
20069     this.el.on({
20070         "click": this.onClick,
20071         "dblclick": this.onDblClick,
20072         "contextmenu": this.onContextMenu,
20073         scope:this
20074     });
20075
20076     this.selections = [];
20077     this.nodes = [];
20078     this.cmp = new Roo.CompositeElementLite([]);
20079     if(this.store){
20080         this.store = Roo.factory(this.store, Roo.data);
20081         this.setStore(this.store, true);
20082     }
20083     
20084     if ( this.footer && this.footer.xtype) {
20085            
20086          var fctr = this.wrapEl.appendChild(document.createElement("div"));
20087         
20088         this.footer.dataSource = this.store;
20089         this.footer.container = fctr;
20090         this.footer = Roo.factory(this.footer, Roo);
20091         fctr.insertFirst(this.el);
20092         
20093         // this is a bit insane - as the paging toolbar seems to detach the el..
20094 //        dom.parentNode.parentNode.parentNode
20095          // they get detached?
20096     }
20097     
20098     
20099     Roo.View.superclass.constructor.call(this);
20100     
20101     
20102 };
20103
20104 Roo.extend(Roo.View, Roo.util.Observable, {
20105     
20106      /**
20107      * @cfg {Roo.data.Store} store Data store to load data from.
20108      */
20109     store : false,
20110     
20111     /**
20112      * @cfg {String|Roo.Element} el The container element.
20113      */
20114     el : '',
20115     
20116     /**
20117      * @cfg {String|Roo.Template} tpl The template used by this View 
20118      */
20119     tpl : false,
20120     /**
20121      * @cfg {String} dataName the named area of the template to use as the data area
20122      *                          Works with domtemplates roo-name="name"
20123      */
20124     dataName: false,
20125     /**
20126      * @cfg {String} selectedClass The css class to add to selected nodes
20127      */
20128     selectedClass : "x-view-selected",
20129      /**
20130      * @cfg {String} emptyText The empty text to show when nothing is loaded.
20131      */
20132     emptyText : "",
20133     
20134     /**
20135      * @cfg {String} text to display on mask (default Loading)
20136      */
20137     mask : false,
20138     /**
20139      * @cfg {Boolean} multiSelect Allow multiple selection
20140      */
20141     multiSelect : false,
20142     /**
20143      * @cfg {Boolean} singleSelect Allow single selection
20144      */
20145     singleSelect:  false,
20146     
20147     /**
20148      * @cfg {Boolean} toggleSelect - selecting 
20149      */
20150     toggleSelect : false,
20151     
20152     /**
20153      * @cfg {Boolean} tickable - selecting 
20154      */
20155     tickable : false,
20156     
20157     /**
20158      * Returns the element this view is bound to.
20159      * @return {Roo.Element}
20160      */
20161     getEl : function(){
20162         return this.wrapEl;
20163     },
20164     
20165     
20166
20167     /**
20168      * Refreshes the view. - called by datachanged on the store. - do not call directly.
20169      */
20170     refresh : function(){
20171         //Roo.log('refresh');
20172         var t = this.tpl;
20173         
20174         // if we are using something like 'domtemplate', then
20175         // the what gets used is:
20176         // t.applySubtemplate(NAME, data, wrapping data..)
20177         // the outer template then get' applied with
20178         //     the store 'extra data'
20179         // and the body get's added to the
20180         //      roo-name="data" node?
20181         //      <span class='roo-tpl-{name}'></span> ?????
20182         
20183         
20184         
20185         this.clearSelections();
20186         this.el.update("");
20187         var html = [];
20188         var records = this.store.getRange();
20189         if(records.length < 1) {
20190             
20191             // is this valid??  = should it render a template??
20192             
20193             this.el.update(this.emptyText);
20194             return;
20195         }
20196         var el = this.el;
20197         if (this.dataName) {
20198             this.el.update(t.apply(this.store.meta)); //????
20199             el = this.el.child('.roo-tpl-' + this.dataName);
20200         }
20201         
20202         for(var i = 0, len = records.length; i < len; i++){
20203             var data = this.prepareData(records[i].data, i, records[i]);
20204             this.fireEvent("preparedata", this, data, i, records[i]);
20205             
20206             var d = Roo.apply({}, data);
20207             
20208             if(this.tickable){
20209                 Roo.apply(d, {'roo-id' : Roo.id()});
20210                 
20211                 var _this = this;
20212             
20213                 Roo.each(this.parent.item, function(item){
20214                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
20215                         return;
20216                     }
20217                     Roo.apply(d, {'roo-data-checked' : 'checked'});
20218                 });
20219             }
20220             
20221             html[html.length] = Roo.util.Format.trim(
20222                 this.dataName ?
20223                     t.applySubtemplate(this.dataName, d, this.store.meta) :
20224                     t.apply(d)
20225             );
20226         }
20227         
20228         
20229         
20230         el.update(html.join(""));
20231         this.nodes = el.dom.childNodes;
20232         this.updateIndexes(0);
20233     },
20234     
20235
20236     /**
20237      * Function to override to reformat the data that is sent to
20238      * the template for each node.
20239      * DEPRICATED - use the preparedata event handler.
20240      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
20241      * a JSON object for an UpdateManager bound view).
20242      */
20243     prepareData : function(data, index, record)
20244     {
20245         this.fireEvent("preparedata", this, data, index, record);
20246         return data;
20247     },
20248
20249     onUpdate : function(ds, record){
20250         // Roo.log('on update');   
20251         this.clearSelections();
20252         var index = this.store.indexOf(record);
20253         var n = this.nodes[index];
20254         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
20255         n.parentNode.removeChild(n);
20256         this.updateIndexes(index, index);
20257     },
20258
20259     
20260     
20261 // --------- FIXME     
20262     onAdd : function(ds, records, index)
20263     {
20264         //Roo.log(['on Add', ds, records, index] );        
20265         this.clearSelections();
20266         if(this.nodes.length == 0){
20267             this.refresh();
20268             return;
20269         }
20270         var n = this.nodes[index];
20271         for(var i = 0, len = records.length; i < len; i++){
20272             var d = this.prepareData(records[i].data, i, records[i]);
20273             if(n){
20274                 this.tpl.insertBefore(n, d);
20275             }else{
20276                 
20277                 this.tpl.append(this.el, d);
20278             }
20279         }
20280         this.updateIndexes(index);
20281     },
20282
20283     onRemove : function(ds, record, index){
20284        // Roo.log('onRemove');
20285         this.clearSelections();
20286         var el = this.dataName  ?
20287             this.el.child('.roo-tpl-' + this.dataName) :
20288             this.el; 
20289         
20290         el.dom.removeChild(this.nodes[index]);
20291         this.updateIndexes(index);
20292     },
20293
20294     /**
20295      * Refresh an individual node.
20296      * @param {Number} index
20297      */
20298     refreshNode : function(index){
20299         this.onUpdate(this.store, this.store.getAt(index));
20300     },
20301
20302     updateIndexes : function(startIndex, endIndex){
20303         var ns = this.nodes;
20304         startIndex = startIndex || 0;
20305         endIndex = endIndex || ns.length - 1;
20306         for(var i = startIndex; i <= endIndex; i++){
20307             ns[i].nodeIndex = i;
20308         }
20309     },
20310
20311     /**
20312      * Changes the data store this view uses and refresh the view.
20313      * @param {Store} store
20314      */
20315     setStore : function(store, initial){
20316         if(!initial && this.store){
20317             this.store.un("datachanged", this.refresh);
20318             this.store.un("add", this.onAdd);
20319             this.store.un("remove", this.onRemove);
20320             this.store.un("update", this.onUpdate);
20321             this.store.un("clear", this.refresh);
20322             this.store.un("beforeload", this.onBeforeLoad);
20323             this.store.un("load", this.onLoad);
20324             this.store.un("loadexception", this.onLoad);
20325         }
20326         if(store){
20327           
20328             store.on("datachanged", this.refresh, this);
20329             store.on("add", this.onAdd, this);
20330             store.on("remove", this.onRemove, this);
20331             store.on("update", this.onUpdate, this);
20332             store.on("clear", this.refresh, this);
20333             store.on("beforeload", this.onBeforeLoad, this);
20334             store.on("load", this.onLoad, this);
20335             store.on("loadexception", this.onLoad, this);
20336         }
20337         
20338         if(store){
20339             this.refresh();
20340         }
20341     },
20342     /**
20343      * onbeforeLoad - masks the loading area.
20344      *
20345      */
20346     onBeforeLoad : function(store,opts)
20347     {
20348          //Roo.log('onBeforeLoad');   
20349         if (!opts.add) {
20350             this.el.update("");
20351         }
20352         this.el.mask(this.mask ? this.mask : "Loading" ); 
20353     },
20354     onLoad : function ()
20355     {
20356         this.el.unmask();
20357     },
20358     
20359
20360     /**
20361      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
20362      * @param {HTMLElement} node
20363      * @return {HTMLElement} The template node
20364      */
20365     findItemFromChild : function(node){
20366         var el = this.dataName  ?
20367             this.el.child('.roo-tpl-' + this.dataName,true) :
20368             this.el.dom; 
20369         
20370         if(!node || node.parentNode == el){
20371                     return node;
20372             }
20373             var p = node.parentNode;
20374             while(p && p != el){
20375             if(p.parentNode == el){
20376                 return p;
20377             }
20378             p = p.parentNode;
20379         }
20380             return null;
20381     },
20382
20383     /** @ignore */
20384     onClick : function(e){
20385         var item = this.findItemFromChild(e.getTarget());
20386         if(item){
20387             var index = this.indexOf(item);
20388             if(this.onItemClick(item, index, e) !== false){
20389                 this.fireEvent("click", this, index, item, e);
20390             }
20391         }else{
20392             this.clearSelections();
20393         }
20394     },
20395
20396     /** @ignore */
20397     onContextMenu : function(e){
20398         var item = this.findItemFromChild(e.getTarget());
20399         if(item){
20400             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
20401         }
20402     },
20403
20404     /** @ignore */
20405     onDblClick : function(e){
20406         var item = this.findItemFromChild(e.getTarget());
20407         if(item){
20408             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
20409         }
20410     },
20411
20412     onItemClick : function(item, index, e)
20413     {
20414         if(this.fireEvent("beforeclick", this, index, item, e) === false){
20415             return false;
20416         }
20417         if (this.toggleSelect) {
20418             var m = this.isSelected(item) ? 'unselect' : 'select';
20419             //Roo.log(m);
20420             var _t = this;
20421             _t[m](item, true, false);
20422             return true;
20423         }
20424         if(this.multiSelect || this.singleSelect){
20425             if(this.multiSelect && e.shiftKey && this.lastSelection){
20426                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
20427             }else{
20428                 this.select(item, this.multiSelect && e.ctrlKey);
20429                 this.lastSelection = item;
20430             }
20431             
20432             if(!this.tickable){
20433                 e.preventDefault();
20434             }
20435             
20436         }
20437         return true;
20438     },
20439
20440     /**
20441      * Get the number of selected nodes.
20442      * @return {Number}
20443      */
20444     getSelectionCount : function(){
20445         return this.selections.length;
20446     },
20447
20448     /**
20449      * Get the currently selected nodes.
20450      * @return {Array} An array of HTMLElements
20451      */
20452     getSelectedNodes : function(){
20453         return this.selections;
20454     },
20455
20456     /**
20457      * Get the indexes of the selected nodes.
20458      * @return {Array}
20459      */
20460     getSelectedIndexes : function(){
20461         var indexes = [], s = this.selections;
20462         for(var i = 0, len = s.length; i < len; i++){
20463             indexes.push(s[i].nodeIndex);
20464         }
20465         return indexes;
20466     },
20467
20468     /**
20469      * Clear all selections
20470      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
20471      */
20472     clearSelections : function(suppressEvent){
20473         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
20474             this.cmp.elements = this.selections;
20475             this.cmp.removeClass(this.selectedClass);
20476             this.selections = [];
20477             if(!suppressEvent){
20478                 this.fireEvent("selectionchange", this, this.selections);
20479             }
20480         }
20481     },
20482
20483     /**
20484      * Returns true if the passed node is selected
20485      * @param {HTMLElement/Number} node The node or node index
20486      * @return {Boolean}
20487      */
20488     isSelected : function(node){
20489         var s = this.selections;
20490         if(s.length < 1){
20491             return false;
20492         }
20493         node = this.getNode(node);
20494         return s.indexOf(node) !== -1;
20495     },
20496
20497     /**
20498      * Selects nodes.
20499      * @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
20500      * @param {Boolean} keepExisting (optional) true to keep existing selections
20501      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20502      */
20503     select : function(nodeInfo, keepExisting, suppressEvent){
20504         if(nodeInfo instanceof Array){
20505             if(!keepExisting){
20506                 this.clearSelections(true);
20507             }
20508             for(var i = 0, len = nodeInfo.length; i < len; i++){
20509                 this.select(nodeInfo[i], true, true);
20510             }
20511             return;
20512         } 
20513         var node = this.getNode(nodeInfo);
20514         if(!node || this.isSelected(node)){
20515             return; // already selected.
20516         }
20517         if(!keepExisting){
20518             this.clearSelections(true);
20519         }
20520         
20521         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
20522             Roo.fly(node).addClass(this.selectedClass);
20523             this.selections.push(node);
20524             if(!suppressEvent){
20525                 this.fireEvent("selectionchange", this, this.selections);
20526             }
20527         }
20528         
20529         
20530     },
20531       /**
20532      * Unselects nodes.
20533      * @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
20534      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
20535      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20536      */
20537     unselect : function(nodeInfo, keepExisting, suppressEvent)
20538     {
20539         if(nodeInfo instanceof Array){
20540             Roo.each(this.selections, function(s) {
20541                 this.unselect(s, nodeInfo);
20542             }, this);
20543             return;
20544         }
20545         var node = this.getNode(nodeInfo);
20546         if(!node || !this.isSelected(node)){
20547             //Roo.log("not selected");
20548             return; // not selected.
20549         }
20550         // fireevent???
20551         var ns = [];
20552         Roo.each(this.selections, function(s) {
20553             if (s == node ) {
20554                 Roo.fly(node).removeClass(this.selectedClass);
20555
20556                 return;
20557             }
20558             ns.push(s);
20559         },this);
20560         
20561         this.selections= ns;
20562         this.fireEvent("selectionchange", this, this.selections);
20563     },
20564
20565     /**
20566      * Gets a template node.
20567      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20568      * @return {HTMLElement} The node or null if it wasn't found
20569      */
20570     getNode : function(nodeInfo){
20571         if(typeof nodeInfo == "string"){
20572             return document.getElementById(nodeInfo);
20573         }else if(typeof nodeInfo == "number"){
20574             return this.nodes[nodeInfo];
20575         }
20576         return nodeInfo;
20577     },
20578
20579     /**
20580      * Gets a range template nodes.
20581      * @param {Number} startIndex
20582      * @param {Number} endIndex
20583      * @return {Array} An array of nodes
20584      */
20585     getNodes : function(start, end){
20586         var ns = this.nodes;
20587         start = start || 0;
20588         end = typeof end == "undefined" ? ns.length - 1 : end;
20589         var nodes = [];
20590         if(start <= end){
20591             for(var i = start; i <= end; i++){
20592                 nodes.push(ns[i]);
20593             }
20594         } else{
20595             for(var i = start; i >= end; i--){
20596                 nodes.push(ns[i]);
20597             }
20598         }
20599         return nodes;
20600     },
20601
20602     /**
20603      * Finds the index of the passed node
20604      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20605      * @return {Number} The index of the node or -1
20606      */
20607     indexOf : function(node){
20608         node = this.getNode(node);
20609         if(typeof node.nodeIndex == "number"){
20610             return node.nodeIndex;
20611         }
20612         var ns = this.nodes;
20613         for(var i = 0, len = ns.length; i < len; i++){
20614             if(ns[i] == node){
20615                 return i;
20616             }
20617         }
20618         return -1;
20619     }
20620 });
20621 /*
20622  * - LGPL
20623  *
20624  * based on jquery fullcalendar
20625  * 
20626  */
20627
20628 Roo.bootstrap = Roo.bootstrap || {};
20629 /**
20630  * @class Roo.bootstrap.Calendar
20631  * @extends Roo.bootstrap.Component
20632  * Bootstrap Calendar class
20633  * @cfg {Boolean} loadMask (true|false) default false
20634  * @cfg {Object} header generate the user specific header of the calendar, default false
20635
20636  * @constructor
20637  * Create a new Container
20638  * @param {Object} config The config object
20639  */
20640
20641
20642
20643 Roo.bootstrap.Calendar = function(config){
20644     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
20645      this.addEvents({
20646         /**
20647              * @event select
20648              * Fires when a date is selected
20649              * @param {DatePicker} this
20650              * @param {Date} date The selected date
20651              */
20652         'select': true,
20653         /**
20654              * @event monthchange
20655              * Fires when the displayed month changes 
20656              * @param {DatePicker} this
20657              * @param {Date} date The selected month
20658              */
20659         'monthchange': true,
20660         /**
20661              * @event evententer
20662              * Fires when mouse over an event
20663              * @param {Calendar} this
20664              * @param {event} Event
20665              */
20666         'evententer': true,
20667         /**
20668              * @event eventleave
20669              * Fires when the mouse leaves an
20670              * @param {Calendar} this
20671              * @param {event}
20672              */
20673         'eventleave': true,
20674         /**
20675              * @event eventclick
20676              * Fires when the mouse click an
20677              * @param {Calendar} this
20678              * @param {event}
20679              */
20680         'eventclick': true
20681         
20682     });
20683
20684 };
20685
20686 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
20687     
20688           /**
20689      * @cfg {Roo.data.Store} store
20690      * The data source for the calendar
20691      */
20692         store : false,
20693      /**
20694      * @cfg {Number} startDay
20695      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
20696      */
20697     startDay : 0,
20698     
20699     loadMask : false,
20700     
20701     header : false,
20702       
20703     getAutoCreate : function(){
20704         
20705         
20706         var fc_button = function(name, corner, style, content ) {
20707             return Roo.apply({},{
20708                 tag : 'span',
20709                 cls : 'fc-button fc-button-'+name+' fc-state-default ' + 
20710                          (corner.length ?
20711                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
20712                             ''
20713                         ),
20714                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
20715                 unselectable: 'on'
20716             });
20717         };
20718         
20719         var header = {};
20720         
20721         if(!this.header){
20722             header = {
20723                 tag : 'table',
20724                 cls : 'fc-header',
20725                 style : 'width:100%',
20726                 cn : [
20727                     {
20728                         tag: 'tr',
20729                         cn : [
20730                             {
20731                                 tag : 'td',
20732                                 cls : 'fc-header-left',
20733                                 cn : [
20734                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
20735                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
20736                                     { tag: 'span', cls: 'fc-header-space' },
20737                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
20738
20739
20740                                 ]
20741                             },
20742
20743                             {
20744                                 tag : 'td',
20745                                 cls : 'fc-header-center',
20746                                 cn : [
20747                                     {
20748                                         tag: 'span',
20749                                         cls: 'fc-header-title',
20750                                         cn : {
20751                                             tag: 'H2',
20752                                             html : 'month / year'
20753                                         }
20754                                     }
20755
20756                                 ]
20757                             },
20758                             {
20759                                 tag : 'td',
20760                                 cls : 'fc-header-right',
20761                                 cn : [
20762                               /*      fc_button('month', 'left', '', 'month' ),
20763                                     fc_button('week', '', '', 'week' ),
20764                                     fc_button('day', 'right', '', 'day' )
20765                                 */    
20766
20767                                 ]
20768                             }
20769
20770                         ]
20771                     }
20772                 ]
20773             };
20774         }
20775         
20776         header = this.header;
20777         
20778        
20779         var cal_heads = function() {
20780             var ret = [];
20781             // fixme - handle this.
20782             
20783             for (var i =0; i < Date.dayNames.length; i++) {
20784                 var d = Date.dayNames[i];
20785                 ret.push({
20786                     tag: 'th',
20787                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
20788                     html : d.substring(0,3)
20789                 });
20790                 
20791             }
20792             ret[0].cls += ' fc-first';
20793             ret[6].cls += ' fc-last';
20794             return ret;
20795         };
20796         var cal_cell = function(n) {
20797             return  {
20798                 tag: 'td',
20799                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
20800                 cn : [
20801                     {
20802                         cn : [
20803                             {
20804                                 cls: 'fc-day-number',
20805                                 html: 'D'
20806                             },
20807                             {
20808                                 cls: 'fc-day-content',
20809                              
20810                                 cn : [
20811                                      {
20812                                         style: 'position: relative;' // height: 17px;
20813                                     }
20814                                 ]
20815                             }
20816                             
20817                             
20818                         ]
20819                     }
20820                 ]
20821                 
20822             }
20823         };
20824         var cal_rows = function() {
20825             
20826             var ret = [];
20827             for (var r = 0; r < 6; r++) {
20828                 var row= {
20829                     tag : 'tr',
20830                     cls : 'fc-week',
20831                     cn : []
20832                 };
20833                 
20834                 for (var i =0; i < Date.dayNames.length; i++) {
20835                     var d = Date.dayNames[i];
20836                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
20837
20838                 }
20839                 row.cn[0].cls+=' fc-first';
20840                 row.cn[0].cn[0].style = 'min-height:90px';
20841                 row.cn[6].cls+=' fc-last';
20842                 ret.push(row);
20843                 
20844             }
20845             ret[0].cls += ' fc-first';
20846             ret[4].cls += ' fc-prev-last';
20847             ret[5].cls += ' fc-last';
20848             return ret;
20849             
20850         };
20851         
20852         var cal_table = {
20853             tag: 'table',
20854             cls: 'fc-border-separate',
20855             style : 'width:100%',
20856             cellspacing  : 0,
20857             cn : [
20858                 { 
20859                     tag: 'thead',
20860                     cn : [
20861                         { 
20862                             tag: 'tr',
20863                             cls : 'fc-first fc-last',
20864                             cn : cal_heads()
20865                         }
20866                     ]
20867                 },
20868                 { 
20869                     tag: 'tbody',
20870                     cn : cal_rows()
20871                 }
20872                   
20873             ]
20874         };
20875          
20876          var cfg = {
20877             cls : 'fc fc-ltr',
20878             cn : [
20879                 header,
20880                 {
20881                     cls : 'fc-content',
20882                     style : "position: relative;",
20883                     cn : [
20884                         {
20885                             cls : 'fc-view fc-view-month fc-grid',
20886                             style : 'position: relative',
20887                             unselectable : 'on',
20888                             cn : [
20889                                 {
20890                                     cls : 'fc-event-container',
20891                                     style : 'position:absolute;z-index:8;top:0;left:0;'
20892                                 },
20893                                 cal_table
20894                             ]
20895                         }
20896                     ]
20897     
20898                 }
20899            ] 
20900             
20901         };
20902         
20903          
20904         
20905         return cfg;
20906     },
20907     
20908     
20909     initEvents : function()
20910     {
20911         if(!this.store){
20912             throw "can not find store for calendar";
20913         }
20914         
20915         var mark = {
20916             tag: "div",
20917             cls:"x-dlg-mask",
20918             style: "text-align:center",
20919             cn: [
20920                 {
20921                     tag: "div",
20922                     style: "background-color:white;width:50%;margin:250 auto",
20923                     cn: [
20924                         {
20925                             tag: "img",
20926                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif' 
20927                         },
20928                         {
20929                             tag: "span",
20930                             html: "Loading"
20931                         }
20932                         
20933                     ]
20934                 }
20935             ]
20936         };
20937         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
20938         
20939         var size = this.el.select('.fc-content', true).first().getSize();
20940         this.maskEl.setSize(size.width, size.height);
20941         this.maskEl.enableDisplayMode("block");
20942         if(!this.loadMask){
20943             this.maskEl.hide();
20944         }
20945         
20946         this.store = Roo.factory(this.store, Roo.data);
20947         this.store.on('load', this.onLoad, this);
20948         this.store.on('beforeload', this.onBeforeLoad, this);
20949         
20950         this.resize();
20951         
20952         this.cells = this.el.select('.fc-day',true);
20953         //Roo.log(this.cells);
20954         this.textNodes = this.el.query('.fc-day-number');
20955         this.cells.addClassOnOver('fc-state-hover');
20956         
20957         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
20958         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
20959         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
20960         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
20961         
20962         this.on('monthchange', this.onMonthChange, this);
20963         
20964         this.update(new Date().clearTime());
20965     },
20966     
20967     resize : function() {
20968         var sz  = this.el.getSize();
20969         
20970         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
20971         this.el.select('.fc-day-content div',true).setHeight(34);
20972     },
20973     
20974     
20975     // private
20976     showPrevMonth : function(e){
20977         this.update(this.activeDate.add("mo", -1));
20978     },
20979     showToday : function(e){
20980         this.update(new Date().clearTime());
20981     },
20982     // private
20983     showNextMonth : function(e){
20984         this.update(this.activeDate.add("mo", 1));
20985     },
20986
20987     // private
20988     showPrevYear : function(){
20989         this.update(this.activeDate.add("y", -1));
20990     },
20991
20992     // private
20993     showNextYear : function(){
20994         this.update(this.activeDate.add("y", 1));
20995     },
20996
20997     
20998    // private
20999     update : function(date)
21000     {
21001         var vd = this.activeDate;
21002         this.activeDate = date;
21003 //        if(vd && this.el){
21004 //            var t = date.getTime();
21005 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
21006 //                Roo.log('using add remove');
21007 //                
21008 //                this.fireEvent('monthchange', this, date);
21009 //                
21010 //                this.cells.removeClass("fc-state-highlight");
21011 //                this.cells.each(function(c){
21012 //                   if(c.dateValue == t){
21013 //                       c.addClass("fc-state-highlight");
21014 //                       setTimeout(function(){
21015 //                            try{c.dom.firstChild.focus();}catch(e){}
21016 //                       }, 50);
21017 //                       return false;
21018 //                   }
21019 //                   return true;
21020 //                });
21021 //                return;
21022 //            }
21023 //        }
21024         
21025         var days = date.getDaysInMonth();
21026         
21027         var firstOfMonth = date.getFirstDateOfMonth();
21028         var startingPos = firstOfMonth.getDay()-this.startDay;
21029         
21030         if(startingPos < this.startDay){
21031             startingPos += 7;
21032         }
21033         
21034         var pm = date.add(Date.MONTH, -1);
21035         var prevStart = pm.getDaysInMonth()-startingPos;
21036 //        
21037         this.cells = this.el.select('.fc-day',true);
21038         this.textNodes = this.el.query('.fc-day-number');
21039         this.cells.addClassOnOver('fc-state-hover');
21040         
21041         var cells = this.cells.elements;
21042         var textEls = this.textNodes;
21043         
21044         Roo.each(cells, function(cell){
21045             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
21046         });
21047         
21048         days += startingPos;
21049
21050         // convert everything to numbers so it's fast
21051         var day = 86400000;
21052         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
21053         //Roo.log(d);
21054         //Roo.log(pm);
21055         //Roo.log(prevStart);
21056         
21057         var today = new Date().clearTime().getTime();
21058         var sel = date.clearTime().getTime();
21059         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
21060         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
21061         var ddMatch = this.disabledDatesRE;
21062         var ddText = this.disabledDatesText;
21063         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
21064         var ddaysText = this.disabledDaysText;
21065         var format = this.format;
21066         
21067         var setCellClass = function(cal, cell){
21068             cell.row = 0;
21069             cell.events = [];
21070             cell.more = [];
21071             //Roo.log('set Cell Class');
21072             cell.title = "";
21073             var t = d.getTime();
21074             
21075             //Roo.log(d);
21076             
21077             cell.dateValue = t;
21078             if(t == today){
21079                 cell.className += " fc-today";
21080                 cell.className += " fc-state-highlight";
21081                 cell.title = cal.todayText;
21082             }
21083             if(t == sel){
21084                 // disable highlight in other month..
21085                 //cell.className += " fc-state-highlight";
21086                 
21087             }
21088             // disabling
21089             if(t < min) {
21090                 cell.className = " fc-state-disabled";
21091                 cell.title = cal.minText;
21092                 return;
21093             }
21094             if(t > max) {
21095                 cell.className = " fc-state-disabled";
21096                 cell.title = cal.maxText;
21097                 return;
21098             }
21099             if(ddays){
21100                 if(ddays.indexOf(d.getDay()) != -1){
21101                     cell.title = ddaysText;
21102                     cell.className = " fc-state-disabled";
21103                 }
21104             }
21105             if(ddMatch && format){
21106                 var fvalue = d.dateFormat(format);
21107                 if(ddMatch.test(fvalue)){
21108                     cell.title = ddText.replace("%0", fvalue);
21109                     cell.className = " fc-state-disabled";
21110                 }
21111             }
21112             
21113             if (!cell.initialClassName) {
21114                 cell.initialClassName = cell.dom.className;
21115             }
21116             
21117             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
21118         };
21119
21120         var i = 0;
21121         
21122         for(; i < startingPos; i++) {
21123             textEls[i].innerHTML = (++prevStart);
21124             d.setDate(d.getDate()+1);
21125             
21126             cells[i].className = "fc-past fc-other-month";
21127             setCellClass(this, cells[i]);
21128         }
21129         
21130         var intDay = 0;
21131         
21132         for(; i < days; i++){
21133             intDay = i - startingPos + 1;
21134             textEls[i].innerHTML = (intDay);
21135             d.setDate(d.getDate()+1);
21136             
21137             cells[i].className = ''; // "x-date-active";
21138             setCellClass(this, cells[i]);
21139         }
21140         var extraDays = 0;
21141         
21142         for(; i < 42; i++) {
21143             textEls[i].innerHTML = (++extraDays);
21144             d.setDate(d.getDate()+1);
21145             
21146             cells[i].className = "fc-future fc-other-month";
21147             setCellClass(this, cells[i]);
21148         }
21149         
21150         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
21151         
21152         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
21153         
21154         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
21155         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
21156         
21157         if(totalRows != 6){
21158             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
21159             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
21160         }
21161         
21162         this.fireEvent('monthchange', this, date);
21163         
21164         
21165         /*
21166         if(!this.internalRender){
21167             var main = this.el.dom.firstChild;
21168             var w = main.offsetWidth;
21169             this.el.setWidth(w + this.el.getBorderWidth("lr"));
21170             Roo.fly(main).setWidth(w);
21171             this.internalRender = true;
21172             // opera does not respect the auto grow header center column
21173             // then, after it gets a width opera refuses to recalculate
21174             // without a second pass
21175             if(Roo.isOpera && !this.secondPass){
21176                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
21177                 this.secondPass = true;
21178                 this.update.defer(10, this, [date]);
21179             }
21180         }
21181         */
21182         
21183     },
21184     
21185     findCell : function(dt) {
21186         dt = dt.clearTime().getTime();
21187         var ret = false;
21188         this.cells.each(function(c){
21189             //Roo.log("check " +c.dateValue + '?=' + dt);
21190             if(c.dateValue == dt){
21191                 ret = c;
21192                 return false;
21193             }
21194             return true;
21195         });
21196         
21197         return ret;
21198     },
21199     
21200     findCells : function(ev) {
21201         var s = ev.start.clone().clearTime().getTime();
21202        // Roo.log(s);
21203         var e= ev.end.clone().clearTime().getTime();
21204        // Roo.log(e);
21205         var ret = [];
21206         this.cells.each(function(c){
21207              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
21208             
21209             if(c.dateValue > e){
21210                 return ;
21211             }
21212             if(c.dateValue < s){
21213                 return ;
21214             }
21215             ret.push(c);
21216         });
21217         
21218         return ret;    
21219     },
21220     
21221 //    findBestRow: function(cells)
21222 //    {
21223 //        var ret = 0;
21224 //        
21225 //        for (var i =0 ; i < cells.length;i++) {
21226 //            ret  = Math.max(cells[i].rows || 0,ret);
21227 //        }
21228 //        return ret;
21229 //        
21230 //    },
21231     
21232     
21233     addItem : function(ev)
21234     {
21235         // look for vertical location slot in
21236         var cells = this.findCells(ev);
21237         
21238 //        ev.row = this.findBestRow(cells);
21239         
21240         // work out the location.
21241         
21242         var crow = false;
21243         var rows = [];
21244         for(var i =0; i < cells.length; i++) {
21245             
21246             cells[i].row = cells[0].row;
21247             
21248             if(i == 0){
21249                 cells[i].row = cells[i].row + 1;
21250             }
21251             
21252             if (!crow) {
21253                 crow = {
21254                     start : cells[i],
21255                     end :  cells[i]
21256                 };
21257                 continue;
21258             }
21259             if (crow.start.getY() == cells[i].getY()) {
21260                 // on same row.
21261                 crow.end = cells[i];
21262                 continue;
21263             }
21264             // different row.
21265             rows.push(crow);
21266             crow = {
21267                 start: cells[i],
21268                 end : cells[i]
21269             };
21270             
21271         }
21272         
21273         rows.push(crow);
21274         ev.els = [];
21275         ev.rows = rows;
21276         ev.cells = cells;
21277         
21278         cells[0].events.push(ev);
21279         
21280         this.calevents.push(ev);
21281     },
21282     
21283     clearEvents: function() {
21284         
21285         if(!this.calevents){
21286             return;
21287         }
21288         
21289         Roo.each(this.cells.elements, function(c){
21290             c.row = 0;
21291             c.events = [];
21292             c.more = [];
21293         });
21294         
21295         Roo.each(this.calevents, function(e) {
21296             Roo.each(e.els, function(el) {
21297                 el.un('mouseenter' ,this.onEventEnter, this);
21298                 el.un('mouseleave' ,this.onEventLeave, this);
21299                 el.remove();
21300             },this);
21301         },this);
21302         
21303         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
21304             e.remove();
21305         });
21306         
21307     },
21308     
21309     renderEvents: function()
21310     {   
21311         var _this = this;
21312         
21313         this.cells.each(function(c) {
21314             
21315             if(c.row < 5){
21316                 return;
21317             }
21318             
21319             var ev = c.events;
21320             
21321             var r = 4;
21322             if(c.row != c.events.length){
21323                 r = 4 - (4 - (c.row - c.events.length));
21324             }
21325             
21326             c.events = ev.slice(0, r);
21327             c.more = ev.slice(r);
21328             
21329             if(c.more.length && c.more.length == 1){
21330                 c.events.push(c.more.pop());
21331             }
21332             
21333             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
21334             
21335         });
21336             
21337         this.cells.each(function(c) {
21338             
21339             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
21340             
21341             
21342             for (var e = 0; e < c.events.length; e++){
21343                 var ev = c.events[e];
21344                 var rows = ev.rows;
21345                 
21346                 for(var i = 0; i < rows.length; i++) {
21347                 
21348                     // how many rows should it span..
21349
21350                     var  cfg = {
21351                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
21352                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
21353
21354                         unselectable : "on",
21355                         cn : [
21356                             {
21357                                 cls: 'fc-event-inner',
21358                                 cn : [
21359     //                                {
21360     //                                  tag:'span',
21361     //                                  cls: 'fc-event-time',
21362     //                                  html : cells.length > 1 ? '' : ev.time
21363     //                                },
21364                                     {
21365                                       tag:'span',
21366                                       cls: 'fc-event-title',
21367                                       html : String.format('{0}', ev.title)
21368                                     }
21369
21370
21371                                 ]
21372                             },
21373                             {
21374                                 cls: 'ui-resizable-handle ui-resizable-e',
21375                                 html : '&nbsp;&nbsp;&nbsp'
21376                             }
21377
21378                         ]
21379                     };
21380
21381                     if (i == 0) {
21382                         cfg.cls += ' fc-event-start';
21383                     }
21384                     if ((i+1) == rows.length) {
21385                         cfg.cls += ' fc-event-end';
21386                     }
21387
21388                     var ctr = _this.el.select('.fc-event-container',true).first();
21389                     var cg = ctr.createChild(cfg);
21390
21391                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
21392                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
21393
21394                     var r = (c.more.length) ? 1 : 0;
21395                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);    
21396                     cg.setWidth(ebox.right - sbox.x -2);
21397
21398                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
21399                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
21400                     cg.on('click', _this.onEventClick, _this, ev);
21401
21402                     ev.els.push(cg);
21403                     
21404                 }
21405                 
21406             }
21407             
21408             
21409             if(c.more.length){
21410                 var  cfg = {
21411                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
21412                     style : 'position: absolute',
21413                     unselectable : "on",
21414                     cn : [
21415                         {
21416                             cls: 'fc-event-inner',
21417                             cn : [
21418                                 {
21419                                   tag:'span',
21420                                   cls: 'fc-event-title',
21421                                   html : 'More'
21422                                 }
21423
21424
21425                             ]
21426                         },
21427                         {
21428                             cls: 'ui-resizable-handle ui-resizable-e',
21429                             html : '&nbsp;&nbsp;&nbsp'
21430                         }
21431
21432                     ]
21433                 };
21434
21435                 var ctr = _this.el.select('.fc-event-container',true).first();
21436                 var cg = ctr.createChild(cfg);
21437
21438                 var sbox = c.select('.fc-day-content',true).first().getBox();
21439                 var ebox = c.select('.fc-day-content',true).first().getBox();
21440                 //Roo.log(cg);
21441                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);    
21442                 cg.setWidth(ebox.right - sbox.x -2);
21443
21444                 cg.on('click', _this.onMoreEventClick, _this, c.more);
21445                 
21446             }
21447             
21448         });
21449         
21450         
21451         
21452     },
21453     
21454     onEventEnter: function (e, el,event,d) {
21455         this.fireEvent('evententer', this, el, event);
21456     },
21457     
21458     onEventLeave: function (e, el,event,d) {
21459         this.fireEvent('eventleave', this, el, event);
21460     },
21461     
21462     onEventClick: function (e, el,event,d) {
21463         this.fireEvent('eventclick', this, el, event);
21464     },
21465     
21466     onMonthChange: function () {
21467         this.store.load();
21468     },
21469     
21470     onMoreEventClick: function(e, el, more)
21471     {
21472         var _this = this;
21473         
21474         this.calpopover.placement = 'right';
21475         this.calpopover.setTitle('More');
21476         
21477         this.calpopover.setContent('');
21478         
21479         var ctr = this.calpopover.el.select('.popover-content', true).first();
21480         
21481         Roo.each(more, function(m){
21482             var cfg = {
21483                 cls : 'fc-event-hori fc-event-draggable',
21484                 html : m.title
21485             };
21486             var cg = ctr.createChild(cfg);
21487             
21488             cg.on('click', _this.onEventClick, _this, m);
21489         });
21490         
21491         this.calpopover.show(el);
21492         
21493         
21494     },
21495     
21496     onLoad: function () 
21497     {   
21498         this.calevents = [];
21499         var cal = this;
21500         
21501         if(this.store.getCount() > 0){
21502             this.store.data.each(function(d){
21503                cal.addItem({
21504                     id : d.data.id,
21505                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
21506                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
21507                     time : d.data.start_time,
21508                     title : d.data.title,
21509                     description : d.data.description,
21510                     venue : d.data.venue
21511                 });
21512             });
21513         }
21514         
21515         this.renderEvents();
21516         
21517         if(this.calevents.length && this.loadMask){
21518             this.maskEl.hide();
21519         }
21520     },
21521     
21522     onBeforeLoad: function()
21523     {
21524         this.clearEvents();
21525         if(this.loadMask){
21526             this.maskEl.show();
21527         }
21528     }
21529 });
21530
21531  
21532  /*
21533  * - LGPL
21534  *
21535  * element
21536  * 
21537  */
21538
21539 /**
21540  * @class Roo.bootstrap.Popover
21541  * @extends Roo.bootstrap.Component
21542  * @parent none builder
21543  * @children Roo.bootstrap.Component
21544  * Bootstrap Popover class
21545  * @cfg {String} html contents of the popover   (or false to use children..)
21546  * @cfg {String} title of popover (or false to hide)
21547  * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed
21548  * @cfg {String} trigger click || hover (or false to trigger manually)
21549  * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event.
21550  * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element
21551  *      - if false and it has a 'parent' then it will be automatically added to that element
21552  *      - if string - Roo.get  will be called 
21553  * @cfg {Number} delay - delay before showing
21554  
21555  * @constructor
21556  * Create a new Popover
21557  * @param {Object} config The config object
21558  */
21559
21560 Roo.bootstrap.Popover = function(config){
21561     Roo.bootstrap.Popover.superclass.constructor.call(this, config);
21562     
21563     this.addEvents({
21564         // raw events
21565          /**
21566          * @event show
21567          * After the popover show
21568          * 
21569          * @param {Roo.bootstrap.Popover} this
21570          */
21571         "show" : true,
21572         /**
21573          * @event hide
21574          * After the popover hide
21575          * 
21576          * @param {Roo.bootstrap.Popover} this
21577          */
21578         "hide" : true
21579     });
21580 };
21581
21582 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
21583     
21584     title: false,
21585     html: false,
21586     
21587     placement : 'right',
21588     trigger : 'hover', // hover
21589     modal : false,
21590     delay : 0,
21591     
21592     over: false,
21593     
21594     can_build_overlaid : false,
21595     
21596     maskEl : false, // the mask element
21597     headerEl : false,
21598     contentEl : false,
21599     alignEl : false, // when show is called with an element - this get's stored.
21600     
21601     getChildContainer : function()
21602     {
21603         return this.contentEl;
21604         
21605     },
21606     getPopoverHeader : function()
21607     {
21608         this.title = true; // flag not to hide it..
21609         this.headerEl.addClass('p-0');
21610         return this.headerEl
21611     },
21612     
21613     
21614     getAutoCreate : function(){
21615          
21616         var cfg = {
21617            cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''),
21618            style: 'display:block',
21619            cn : [
21620                 {
21621                     cls : 'arrow'
21622                 },
21623                 {
21624                     cls : 'popover-inner ',
21625                     cn : [
21626                         {
21627                             tag: 'h3',
21628                             cls: 'popover-title popover-header',
21629                             html : this.title === false ? '' : this.title
21630                         },
21631                         {
21632                             cls : 'popover-content popover-body '  + (this.cls || ''),
21633                             html : this.html || ''
21634                         }
21635                     ]
21636                     
21637                 }
21638            ]
21639         };
21640         
21641         return cfg;
21642     },
21643     /**
21644      * @param {string} the title
21645      */
21646     setTitle: function(str)
21647     {
21648         this.title = str;
21649         if (this.el) {
21650             this.headerEl.dom.innerHTML = str;
21651         }
21652         
21653     },
21654     /**
21655      * @param {string} the body content
21656      */
21657     setContent: function(str)
21658     {
21659         this.html = str;
21660         if (this.contentEl) {
21661             this.contentEl.dom.innerHTML = str;
21662         }
21663         
21664     },
21665     // as it get's added to the bottom of the page.
21666     onRender : function(ct, position)
21667     {
21668         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
21669         
21670         
21671         
21672         if(!this.el){
21673             var cfg = Roo.apply({},  this.getAutoCreate());
21674             cfg.id = Roo.id();
21675             
21676             if (this.cls) {
21677                 cfg.cls += ' ' + this.cls;
21678             }
21679             if (this.style) {
21680                 cfg.style = this.style;
21681             }
21682             //Roo.log("adding to ");
21683             this.el = Roo.get(document.body).createChild(cfg, position);
21684 //            Roo.log(this.el);
21685         }
21686         
21687         this.contentEl = this.el.select('.popover-content',true).first();
21688         this.headerEl =  this.el.select('.popover-title',true).first();
21689         
21690         var nitems = [];
21691         if(typeof(this.items) != 'undefined'){
21692             var items = this.items;
21693             delete this.items;
21694
21695             for(var i =0;i < items.length;i++) {
21696                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
21697             }
21698         }
21699
21700         this.items = nitems;
21701         
21702         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
21703         Roo.EventManager.onWindowResize(this.resizeMask, this, true);
21704         
21705         
21706         
21707         this.initEvents();
21708     },
21709     
21710     resizeMask : function()
21711     {
21712         this.maskEl.setSize(
21713             Roo.lib.Dom.getViewWidth(true),
21714             Roo.lib.Dom.getViewHeight(true)
21715         );
21716     },
21717     
21718     initEvents : function()
21719     {
21720         
21721         if (!this.modal) { 
21722             Roo.bootstrap.Popover.register(this);
21723         }
21724          
21725         this.arrowEl = this.el.select('.arrow',true).first();
21726         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
21727         this.el.enableDisplayMode('block');
21728         this.el.hide();
21729  
21730         
21731         if (this.over === false && !this.parent()) {
21732             return; 
21733         }
21734         if (this.triggers === false) {
21735             return;
21736         }
21737          
21738         // support parent
21739         var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over);
21740         var triggers = this.trigger ? this.trigger.split(' ') : [];
21741         Roo.each(triggers, function(trigger) {
21742         
21743             if (trigger == 'click') {
21744                 on_el.on('click', this.toggle, this);
21745             } else if (trigger != 'manual') {
21746                 var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin';
21747                 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
21748       
21749                 on_el.on(eventIn  ,this.enter, this);
21750                 on_el.on(eventOut, this.leave, this);
21751             }
21752         }, this);
21753     },
21754     
21755     
21756     // private
21757     timeout : null,
21758     hoverState : null,
21759     
21760     toggle : function () {
21761         this.hoverState == 'in' ? this.leave() : this.enter();
21762     },
21763     
21764     enter : function () {
21765         
21766         clearTimeout(this.timeout);
21767     
21768         this.hoverState = 'in';
21769     
21770         if (!this.delay || !this.delay.show) {
21771             this.show();
21772             return;
21773         }
21774         var _t = this;
21775         this.timeout = setTimeout(function () {
21776             if (_t.hoverState == 'in') {
21777                 _t.show();
21778             }
21779         }, this.delay.show)
21780     },
21781     
21782     leave : function() {
21783         clearTimeout(this.timeout);
21784     
21785         this.hoverState = 'out';
21786     
21787         if (!this.delay || !this.delay.hide) {
21788             this.hide();
21789             return;
21790         }
21791         var _t = this;
21792         this.timeout = setTimeout(function () {
21793             if (_t.hoverState == 'out') {
21794                 _t.hide();
21795             }
21796         }, this.delay.hide)
21797     },
21798     
21799     /**
21800      * update the position of the dialog
21801      * normally this is needed if the popover get's bigger - due to a Table reload etc..
21802      * 
21803      *
21804      */
21805     
21806     doAlign : function()
21807     {
21808         
21809         if (this.alignEl) {
21810             this.updatePosition(this.placement, true);
21811              
21812         } else {
21813             // this is usually just done by the builder = to show the popoup in the middle of the scren.
21814             var es = this.el.getSize();
21815             var x = Roo.lib.Dom.getViewWidth()/2;
21816             var y = Roo.lib.Dom.getViewHeight()/2;
21817             this.el.setXY([ x-(es.width/2),  y-(es.height/2)] );
21818             
21819         }
21820
21821          
21822          
21823         
21824         
21825     },
21826     
21827     /**
21828      * Show the popover
21829      * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
21830      * @param {string} (left|right|top|bottom) position
21831      */
21832     show : function (on_el, placement)
21833     {
21834         this.placement = typeof(placement) == 'undefined' ?  this.placement   : placement;
21835         on_el = on_el || false; // default to false
21836          
21837         if (!on_el) {
21838             if (this.parent() && (this.over == 'parent' || (this.over === false))) {
21839                 on_el = this.parent().el;
21840             } else if (this.over) {
21841                 on_el = Roo.get(this.over);
21842             }
21843             
21844         }
21845         
21846         this.alignEl = Roo.get( on_el );
21847
21848         if (!this.el) {
21849             this.render(document.body);
21850         }
21851         
21852         
21853          
21854         
21855         if (this.title === false) {
21856             this.headerEl.hide();
21857         }
21858         
21859        
21860         this.el.show();
21861         this.el.dom.style.display = 'block';
21862          
21863         this.doAlign();
21864         
21865         //var arrow = this.el.select('.arrow',true).first();
21866         //arrow.set(align[2], 
21867         
21868         this.el.addClass('in');
21869         
21870          
21871         
21872         this.hoverState = 'in';
21873         
21874         if (this.modal) {
21875             this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
21876             this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21877             this.maskEl.dom.style.display = 'block';
21878             this.maskEl.addClass('show');
21879         }
21880         this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21881  
21882         this.fireEvent('show', this);
21883         
21884     },
21885     /**
21886      * fire this manually after loading a grid in the table for example
21887      * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one)
21888      * @param {Boolean} try and move it if we cant get right position.
21889      */
21890     updatePosition : function(placement, try_move)
21891     {
21892         // allow for calling with no parameters
21893         placement = placement   ? placement :  this.placement;
21894         try_move = typeof(try_move) == 'undefined' ? true : try_move;
21895         
21896         this.el.removeClass([
21897             'fade','top','bottom', 'left', 'right','in',
21898             'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right'
21899         ]);
21900         this.el.addClass(placement + ' bs-popover-' + placement);
21901         
21902         if (!this.alignEl ) {
21903             return false;
21904         }
21905         
21906         switch (placement) {
21907             case 'right':
21908                 var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]);
21909                 var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]);
21910                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21911                     //normal display... or moved up/down.
21912                     this.el.setXY(offset);
21913                     var xy = this.alignEl.getAnchorXY('tr', false);
21914                     xy[0]+=2;xy[1]+=5;
21915                     this.arrowEl.setXY(xy);
21916                     return true;
21917                 }
21918                 // continue through...
21919                 return this.updatePosition('left', false);
21920                 
21921             
21922             case 'left':
21923                 var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]);
21924                 var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]);
21925                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21926                     //normal display... or moved up/down.
21927                     this.el.setXY(offset);
21928                     var xy = this.alignEl.getAnchorXY('tl', false);
21929                     xy[0]-=10;xy[1]+=5; // << fix me
21930                     this.arrowEl.setXY(xy);
21931                     return true;
21932                 }
21933                 // call self...
21934                 return this.updatePosition('right', false);
21935             
21936             case 'top':
21937                 var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,-10]);
21938                 var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,-10]);
21939                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21940                     //normal display... or moved up/down.
21941                     this.el.setXY(offset);
21942                     var xy = this.alignEl.getAnchorXY('t', false);
21943                     xy[1]-=10; // << fix me
21944                     this.arrowEl.setXY(xy);
21945                     return true;
21946                 }
21947                 // fall through
21948                return this.updatePosition('bottom', false);
21949             
21950             case 'bottom':
21951                  var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,10]);
21952                 var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,10]);
21953                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21954                     //normal display... or moved up/down.
21955                     this.el.setXY(offset);
21956                     var xy = this.alignEl.getAnchorXY('b', false);
21957                      xy[1]+=2; // << fix me
21958                     this.arrowEl.setXY(xy);
21959                     return true;
21960                 }
21961                 // fall through
21962                 return this.updatePosition('top', false);
21963                 
21964             
21965         }
21966         
21967         
21968         return false;
21969     },
21970     
21971     hide : function()
21972     {
21973         this.el.setXY([0,0]);
21974         this.el.removeClass('in');
21975         this.el.hide();
21976         this.hoverState = null;
21977         this.maskEl.hide(); // always..
21978         this.fireEvent('hide', this);
21979     }
21980     
21981 });
21982
21983
21984 Roo.apply(Roo.bootstrap.Popover, {
21985
21986     alignment : {
21987         'left' : ['r-l', [-10,0], 'left bs-popover-left'],
21988         'right' : ['l-br', [10,0], 'right bs-popover-right'],
21989         'bottom' : ['t-b', [0,10], 'top bs-popover-top'],
21990         'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom']
21991     },
21992     
21993     zIndex : 20001,
21994
21995     clickHander : false,
21996     
21997     
21998
21999     onMouseDown : function(e)
22000     {
22001         if (this.popups.length &&  !e.getTarget(".roo-popover")) {
22002             /// what is nothing is showing..
22003             this.hideAll();
22004         }
22005          
22006     },
22007     
22008     
22009     popups : [],
22010     
22011     register : function(popup)
22012     {
22013         if (!Roo.bootstrap.Popover.clickHandler) {
22014             Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
22015         }
22016         // hide other popups.
22017         popup.on('show', Roo.bootstrap.Popover.onShow,  popup);
22018         popup.on('hide', Roo.bootstrap.Popover.onHide,  popup);
22019         this.hideAll(); //<< why?
22020         //this.popups.push(popup);
22021     },
22022     hideAll : function()
22023     {
22024         this.popups.forEach(function(p) {
22025             p.hide();
22026         });
22027     },
22028     onShow : function() {
22029         Roo.bootstrap.Popover.popups.push(this);
22030     },
22031     onHide : function() {
22032         Roo.bootstrap.Popover.popups.remove(this);
22033     } 
22034
22035 });
22036 /**
22037  * @class Roo.bootstrap.PopoverNav
22038  * @extends Roo.bootstrap.nav.Simplebar
22039  * @parent Roo.bootstrap.Popover
22040  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container
22041  * @licence LGPL
22042  * Bootstrap Popover header navigation class
22043  * FIXME? should this go under nav?
22044  *
22045  * 
22046  * @constructor
22047  * Create a new Popover Header Navigation 
22048  * @param {Object} config The config object
22049  */
22050
22051 Roo.bootstrap.PopoverNav = function(config){
22052     Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config);
22053 };
22054
22055 Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.nav.Simplebar,  {
22056     
22057     
22058     container_method : 'getPopoverHeader' 
22059     
22060      
22061     
22062     
22063    
22064 });
22065
22066  
22067
22068  /*
22069  * - LGPL
22070  *
22071  * Progress
22072  * 
22073  */
22074
22075 /**
22076  * @class Roo.bootstrap.Progress
22077  * @extends Roo.bootstrap.Component
22078  * @children Roo.bootstrap.ProgressBar
22079  * Bootstrap Progress class
22080  * @cfg {Boolean} striped striped of the progress bar
22081  * @cfg {Boolean} active animated of the progress bar
22082  * 
22083  * 
22084  * @constructor
22085  * Create a new Progress
22086  * @param {Object} config The config object
22087  */
22088
22089 Roo.bootstrap.Progress = function(config){
22090     Roo.bootstrap.Progress.superclass.constructor.call(this, config);
22091 };
22092
22093 Roo.extend(Roo.bootstrap.Progress, Roo.bootstrap.Component,  {
22094     
22095     striped : false,
22096     active: false,
22097     
22098     getAutoCreate : function(){
22099         var cfg = {
22100             tag: 'div',
22101             cls: 'progress'
22102         };
22103         
22104         
22105         if(this.striped){
22106             cfg.cls += ' progress-striped';
22107         }
22108       
22109         if(this.active){
22110             cfg.cls += ' active';
22111         }
22112         
22113         
22114         return cfg;
22115     }
22116    
22117 });
22118
22119  
22120
22121  /*
22122  * - LGPL
22123  *
22124  * ProgressBar
22125  * 
22126  */
22127
22128 /**
22129  * @class Roo.bootstrap.ProgressBar
22130  * @extends Roo.bootstrap.Component
22131  * Bootstrap ProgressBar class
22132  * @cfg {Number} aria_valuenow aria-value now
22133  * @cfg {Number} aria_valuemin aria-value min
22134  * @cfg {Number} aria_valuemax aria-value max
22135  * @cfg {String} label label for the progress bar
22136  * @cfg {String} panel (success | info | warning | danger )
22137  * @cfg {String} role role of the progress bar
22138  * @cfg {String} sr_only text
22139  * 
22140  * 
22141  * @constructor
22142  * Create a new ProgressBar
22143  * @param {Object} config The config object
22144  */
22145
22146 Roo.bootstrap.ProgressBar = function(config){
22147     Roo.bootstrap.ProgressBar.superclass.constructor.call(this, config);
22148 };
22149
22150 Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component,  {
22151     
22152     aria_valuenow : 0,
22153     aria_valuemin : 0,
22154     aria_valuemax : 100,
22155     label : false,
22156     panel : false,
22157     role : false,
22158     sr_only: false,
22159     
22160     getAutoCreate : function()
22161     {
22162         
22163         var cfg = {
22164             tag: 'div',
22165             cls: 'progress-bar',
22166             style: 'width:' + Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%'
22167         };
22168         
22169         if(this.sr_only){
22170             cfg.cn = {
22171                 tag: 'span',
22172                 cls: 'sr-only',
22173                 html: this.sr_only
22174             }
22175         }
22176         
22177         if(this.role){
22178             cfg.role = this.role;
22179         }
22180         
22181         if(this.aria_valuenow){
22182             cfg['aria-valuenow'] = this.aria_valuenow;
22183         }
22184         
22185         if(this.aria_valuemin){
22186             cfg['aria-valuemin'] = this.aria_valuemin;
22187         }
22188         
22189         if(this.aria_valuemax){
22190             cfg['aria-valuemax'] = this.aria_valuemax;
22191         }
22192         
22193         if(this.label && !this.sr_only){
22194             cfg.html = this.label;
22195         }
22196         
22197         if(this.panel){
22198             cfg.cls += ' progress-bar-' + this.panel;
22199         }
22200         
22201         return cfg;
22202     },
22203     
22204     update : function(aria_valuenow)
22205     {
22206         this.aria_valuenow = aria_valuenow;
22207         
22208         this.el.setStyle('width', Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%');
22209     }
22210    
22211 });
22212
22213  
22214
22215  /**
22216  * @class Roo.bootstrap.TabGroup
22217  * @extends Roo.bootstrap.Column
22218  * @children Roo.bootstrap.TabPanel
22219  * Bootstrap Column class
22220  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
22221  * @cfg {Boolean} carousel true to make the group behave like a carousel
22222  * @cfg {Boolean} bullets show bullets for the panels
22223  * @cfg {Boolean} autoslide (true|false) auto slide .. default false
22224  * @cfg {Number} timer auto slide timer .. default 0 millisecond
22225  * @cfg {Boolean} showarrow (true|false) show arrow default true
22226  * 
22227  * @constructor
22228  * Create a new TabGroup
22229  * @param {Object} config The config object
22230  */
22231
22232 Roo.bootstrap.TabGroup = function(config){
22233     Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
22234     if (!this.navId) {
22235         this.navId = Roo.id();
22236     }
22237     this.tabs = [];
22238     Roo.bootstrap.TabGroup.register(this);
22239     
22240 };
22241
22242 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
22243     
22244     carousel : false,
22245     transition : false,
22246     bullets : 0,
22247     timer : 0,
22248     autoslide : false,
22249     slideFn : false,
22250     slideOnTouch : false,
22251     showarrow : true,
22252     
22253     getAutoCreate : function()
22254     {
22255         var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
22256         
22257         cfg.cls += ' tab-content';
22258         
22259         if (this.carousel) {
22260             cfg.cls += ' carousel slide';
22261             
22262             cfg.cn = [{
22263                cls : 'carousel-inner',
22264                cn : []
22265             }];
22266         
22267             if(this.bullets  && !Roo.isTouch){
22268                 
22269                 var bullets = {
22270                     cls : 'carousel-bullets',
22271                     cn : []
22272                 };
22273                
22274                 if(this.bullets_cls){
22275                     bullets.cls = bullets.cls + ' ' + this.bullets_cls;
22276                 }
22277                 
22278                 bullets.cn.push({
22279                     cls : 'clear'
22280                 });
22281                 
22282                 cfg.cn[0].cn.push(bullets);
22283             }
22284             
22285             if(this.showarrow){
22286                 cfg.cn[0].cn.push({
22287                     tag : 'div',
22288                     class : 'carousel-arrow',
22289                     cn : [
22290                         {
22291                             tag : 'div',
22292                             class : 'carousel-prev',
22293                             cn : [
22294                                 {
22295                                     tag : 'i',
22296                                     class : 'fa fa-chevron-left'
22297                                 }
22298                             ]
22299                         },
22300                         {
22301                             tag : 'div',
22302                             class : 'carousel-next',
22303                             cn : [
22304                                 {
22305                                     tag : 'i',
22306                                     class : 'fa fa-chevron-right'
22307                                 }
22308                             ]
22309                         }
22310                     ]
22311                 });
22312             }
22313             
22314         }
22315         
22316         return cfg;
22317     },
22318     
22319     initEvents:  function()
22320     {
22321 //        if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
22322 //            this.el.on("touchstart", this.onTouchStart, this);
22323 //        }
22324         
22325         if(this.autoslide){
22326             var _this = this;
22327             
22328             this.slideFn = window.setInterval(function() {
22329                 _this.showPanelNext();
22330             }, this.timer);
22331         }
22332         
22333         if(this.showarrow){
22334             this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
22335             this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
22336         }
22337         
22338         
22339     },
22340     
22341 //    onTouchStart : function(e, el, o)
22342 //    {
22343 //        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
22344 //            return;
22345 //        }
22346 //        
22347 //        this.showPanelNext();
22348 //    },
22349     
22350     
22351     getChildContainer : function()
22352     {
22353         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
22354     },
22355     
22356     /**
22357     * register a Navigation item
22358     * @param {Roo.bootstrap.nav.Item} the navitem to add
22359     */
22360     register : function(item)
22361     {
22362         this.tabs.push( item);
22363         item.navId = this.navId; // not really needed..
22364         this.addBullet();
22365     
22366     },
22367     
22368     getActivePanel : function()
22369     {
22370         var r = false;
22371         Roo.each(this.tabs, function(t) {
22372             if (t.active) {
22373                 r = t;
22374                 return false;
22375             }
22376             return null;
22377         });
22378         return r;
22379         
22380     },
22381     getPanelByName : function(n)
22382     {
22383         var r = false;
22384         Roo.each(this.tabs, function(t) {
22385             if (t.tabId == n) {
22386                 r = t;
22387                 return false;
22388             }
22389             return null;
22390         });
22391         return r;
22392     },
22393     indexOfPanel : function(p)
22394     {
22395         var r = false;
22396         Roo.each(this.tabs, function(t,i) {
22397             if (t.tabId == p.tabId) {
22398                 r = i;
22399                 return false;
22400             }
22401             return null;
22402         });
22403         return r;
22404     },
22405     /**
22406      * show a specific panel
22407      * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
22408      * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
22409      */
22410     showPanel : function (pan)
22411     {
22412         if(this.transition || typeof(pan) == 'undefined'){
22413             Roo.log("waiting for the transitionend");
22414             return false;
22415         }
22416         
22417         if (typeof(pan) == 'number') {
22418             pan = this.tabs[pan];
22419         }
22420         
22421         if (typeof(pan) == 'string') {
22422             pan = this.getPanelByName(pan);
22423         }
22424         
22425         var cur = this.getActivePanel();
22426         
22427         if(!pan || !cur){
22428             Roo.log('pan or acitve pan is undefined');
22429             return false;
22430         }
22431         
22432         if (pan.tabId == this.getActivePanel().tabId) {
22433             return true;
22434         }
22435         
22436         if (false === cur.fireEvent('beforedeactivate')) {
22437             return false;
22438         }
22439         
22440         if(this.bullets > 0 && !Roo.isTouch){
22441             this.setActiveBullet(this.indexOfPanel(pan));
22442         }
22443         
22444         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
22445             
22446             //class="carousel-item carousel-item-next carousel-item-left"
22447             
22448             this.transition = true;
22449             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
22450             var lr = dir == 'next' ? 'left' : 'right';
22451             pan.el.addClass(dir); // or prev
22452             pan.el.addClass('carousel-item-' + dir); // or prev
22453             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
22454             cur.el.addClass(lr); // or right
22455             pan.el.addClass(lr);
22456             cur.el.addClass('carousel-item-' +lr); // or right
22457             pan.el.addClass('carousel-item-' +lr);
22458             
22459             
22460             var _this = this;
22461             cur.el.on('transitionend', function() {
22462                 Roo.log("trans end?");
22463                 
22464                 pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
22465                 pan.setActive(true);
22466                 
22467                 cur.el.removeClass([lr, 'carousel-item-' + lr]);
22468                 cur.setActive(false);
22469                 
22470                 _this.transition = false;
22471                 
22472             }, this, { single:  true } );
22473             
22474             return true;
22475         }
22476         
22477         cur.setActive(false);
22478         pan.setActive(true);
22479         
22480         return true;
22481         
22482     },
22483     showPanelNext : function()
22484     {
22485         var i = this.indexOfPanel(this.getActivePanel());
22486         
22487         if (i >= this.tabs.length - 1 && !this.autoslide) {
22488             return;
22489         }
22490         
22491         if (i >= this.tabs.length - 1 && this.autoslide) {
22492             i = -1;
22493         }
22494         
22495         this.showPanel(this.tabs[i+1]);
22496     },
22497     
22498     showPanelPrev : function()
22499     {
22500         var i = this.indexOfPanel(this.getActivePanel());
22501         
22502         if (i  < 1 && !this.autoslide) {
22503             return;
22504         }
22505         
22506         if (i < 1 && this.autoslide) {
22507             i = this.tabs.length;
22508         }
22509         
22510         this.showPanel(this.tabs[i-1]);
22511     },
22512     
22513     
22514     addBullet: function()
22515     {
22516         if(!this.bullets || Roo.isTouch){
22517             return;
22518         }
22519         var ctr = this.el.select('.carousel-bullets',true).first();
22520         var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
22521         var bullet = ctr.createChild({
22522             cls : 'bullet bullet-' + i
22523         },ctr.dom.lastChild);
22524         
22525         
22526         var _this = this;
22527         
22528         bullet.on('click', (function(e, el, o, ii, t){
22529
22530             e.preventDefault();
22531
22532             this.showPanel(ii);
22533
22534             if(this.autoslide && this.slideFn){
22535                 clearInterval(this.slideFn);
22536                 this.slideFn = window.setInterval(function() {
22537                     _this.showPanelNext();
22538                 }, this.timer);
22539             }
22540
22541         }).createDelegate(this, [i, bullet], true));
22542                 
22543         
22544     },
22545      
22546     setActiveBullet : function(i)
22547     {
22548         if(Roo.isTouch){
22549             return;
22550         }
22551         
22552         Roo.each(this.el.select('.bullet', true).elements, function(el){
22553             el.removeClass('selected');
22554         });
22555
22556         var bullet = this.el.select('.bullet-' + i, true).first();
22557         
22558         if(!bullet){
22559             return;
22560         }
22561         
22562         bullet.addClass('selected');
22563     }
22564     
22565     
22566   
22567 });
22568
22569  
22570
22571  
22572  
22573 Roo.apply(Roo.bootstrap.TabGroup, {
22574     
22575     groups: {},
22576      /**
22577     * register a Navigation Group
22578     * @param {Roo.bootstrap.nav.Group} the navgroup to add
22579     */
22580     register : function(navgrp)
22581     {
22582         this.groups[navgrp.navId] = navgrp;
22583         
22584     },
22585     /**
22586     * fetch a Navigation Group based on the navigation ID
22587     * if one does not exist , it will get created.
22588     * @param {string} the navgroup to add
22589     * @returns {Roo.bootstrap.nav.Group} the navgroup 
22590     */
22591     get: function(navId) {
22592         if (typeof(this.groups[navId]) == 'undefined') {
22593             this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
22594         }
22595         return this.groups[navId] ;
22596     }
22597     
22598     
22599     
22600 });
22601
22602  /*
22603  * - LGPL
22604  *
22605  * TabPanel
22606  * 
22607  */
22608
22609 /**
22610  * @class Roo.bootstrap.TabPanel
22611  * @extends Roo.bootstrap.Component
22612  * @children Roo.bootstrap.Component
22613  * Bootstrap TabPanel class
22614  * @cfg {Boolean} active panel active
22615  * @cfg {String} html panel content
22616  * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
22617  * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
22618  * @cfg {String} href click to link..
22619  * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
22620  * 
22621  * 
22622  * @constructor
22623  * Create a new TabPanel
22624  * @param {Object} config The config object
22625  */
22626
22627 Roo.bootstrap.TabPanel = function(config){
22628     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
22629     this.addEvents({
22630         /**
22631              * @event changed
22632              * Fires when the active status changes
22633              * @param {Roo.bootstrap.TabPanel} this
22634              * @param {Boolean} state the new state
22635             
22636          */
22637         'changed': true,
22638         /**
22639              * @event beforedeactivate
22640              * Fires before a tab is de-activated - can be used to do validation on a form.
22641              * @param {Roo.bootstrap.TabPanel} this
22642              * @return {Boolean} false if there is an error
22643             
22644          */
22645         'beforedeactivate': true
22646      });
22647     
22648     this.tabId = this.tabId || Roo.id();
22649   
22650 };
22651
22652 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
22653     
22654     active: false,
22655     html: false,
22656     tabId: false,
22657     navId : false,
22658     href : '',
22659     touchSlide : false,
22660     getAutoCreate : function(){
22661         
22662         
22663         var cfg = {
22664             tag: 'div',
22665             // item is needed for carousel - not sure if it has any effect otherwise
22666             cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
22667             html: this.html || ''
22668         };
22669         
22670         if(this.active){
22671             cfg.cls += ' active';
22672         }
22673         
22674         if(this.tabId){
22675             cfg.tabId = this.tabId;
22676         }
22677         
22678         
22679         
22680         return cfg;
22681     },
22682     
22683     initEvents:  function()
22684     {
22685         var p = this.parent();
22686         
22687         this.navId = this.navId || p.navId;
22688         
22689         if (typeof(this.navId) != 'undefined') {
22690             // not really needed.. but just in case.. parent should be a NavGroup.
22691             var tg = Roo.bootstrap.TabGroup.get(this.navId);
22692             
22693             tg.register(this);
22694             
22695             var i = tg.tabs.length - 1;
22696             
22697             if(this.active && tg.bullets > 0 && i < tg.bullets){
22698                 tg.setActiveBullet(i);
22699             }
22700         }
22701         
22702         this.el.on('click', this.onClick, this);
22703         
22704         if(Roo.isTouch && this.touchSlide){
22705             this.el.on("touchstart", this.onTouchStart, this);
22706             this.el.on("touchmove", this.onTouchMove, this);
22707             this.el.on("touchend", this.onTouchEnd, this);
22708         }
22709         
22710     },
22711     
22712     onRender : function(ct, position)
22713     {
22714         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
22715     },
22716     
22717     setActive : function(state)
22718     {
22719         Roo.log("panel - set active " + this.tabId + "=" + state);
22720         
22721         this.active = state;
22722         if (!state) {
22723             this.el.removeClass('active');
22724             
22725         } else  if (!this.el.hasClass('active')) {
22726             this.el.addClass('active');
22727         }
22728         
22729         this.fireEvent('changed', this, state);
22730     },
22731     
22732     onClick : function(e)
22733     {
22734         e.preventDefault();
22735         
22736         if(!this.href.length){
22737             return;
22738         }
22739         
22740         window.location.href = this.href;
22741     },
22742     
22743     startX : 0,
22744     startY : 0,
22745     endX : 0,
22746     endY : 0,
22747     swiping : false,
22748     
22749     onTouchStart : function(e)
22750     {
22751         this.swiping = false;
22752         
22753         this.startX = e.browserEvent.touches[0].clientX;
22754         this.startY = e.browserEvent.touches[0].clientY;
22755     },
22756     
22757     onTouchMove : function(e)
22758     {
22759         this.swiping = true;
22760         
22761         this.endX = e.browserEvent.touches[0].clientX;
22762         this.endY = e.browserEvent.touches[0].clientY;
22763     },
22764     
22765     onTouchEnd : function(e)
22766     {
22767         if(!this.swiping){
22768             this.onClick(e);
22769             return;
22770         }
22771         
22772         var tabGroup = this.parent();
22773         
22774         if(this.endX > this.startX){ // swiping right
22775             tabGroup.showPanelPrev();
22776             return;
22777         }
22778         
22779         if(this.startX > this.endX){ // swiping left
22780             tabGroup.showPanelNext();
22781             return;
22782         }
22783     }
22784     
22785     
22786 });
22787  
22788
22789  
22790
22791  /*
22792  * - LGPL
22793  *
22794  * DateField
22795  * 
22796  */
22797
22798 /**
22799  * @class Roo.bootstrap.form.DateField
22800  * @extends Roo.bootstrap.form.Input
22801  * Bootstrap DateField class
22802  * @cfg {Number} weekStart default 0
22803  * @cfg {String} viewMode default empty, (months|years)
22804  * @cfg {String} minViewMode default empty, (months|years)
22805  * @cfg {Number} startDate default -Infinity
22806  * @cfg {Number} endDate default Infinity
22807  * @cfg {Boolean} todayHighlight default false
22808  * @cfg {Boolean} todayBtn default false
22809  * @cfg {Boolean} calendarWeeks default false
22810  * @cfg {Object} daysOfWeekDisabled default empty
22811  * @cfg {Boolean} singleMode default false (true | false)
22812  * 
22813  * @cfg {Boolean} keyboardNavigation default true
22814  * @cfg {String} language default en
22815  * 
22816  * @constructor
22817  * Create a new DateField
22818  * @param {Object} config The config object
22819  */
22820
22821 Roo.bootstrap.form.DateField = function(config){
22822     Roo.bootstrap.form.DateField.superclass.constructor.call(this, config);
22823      this.addEvents({
22824             /**
22825              * @event show
22826              * Fires when this field show.
22827              * @param {Roo.bootstrap.form.DateField} this
22828              * @param {Mixed} date The date value
22829              */
22830             show : true,
22831             /**
22832              * @event show
22833              * Fires when this field hide.
22834              * @param {Roo.bootstrap.form.DateField} this
22835              * @param {Mixed} date The date value
22836              */
22837             hide : true,
22838             /**
22839              * @event select
22840              * Fires when select a date.
22841              * @param {Roo.bootstrap.form.DateField} this
22842              * @param {Mixed} date The date value
22843              */
22844             select : true,
22845             /**
22846              * @event beforeselect
22847              * Fires when before select a date.
22848              * @param {Roo.bootstrap.form.DateField} this
22849              * @param {Mixed} date The date value
22850              */
22851             beforeselect : true
22852         });
22853 };
22854
22855 Roo.extend(Roo.bootstrap.form.DateField, Roo.bootstrap.form.Input,  {
22856     
22857     /**
22858      * @cfg {String} format
22859      * The default date format string which can be overriden for localization support.  The format must be
22860      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
22861      */
22862     format : "m/d/y",
22863     /**
22864      * @cfg {String} altFormats
22865      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
22866      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
22867      */
22868     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
22869     
22870     weekStart : 0,
22871     
22872     viewMode : '',
22873     
22874     minViewMode : '',
22875     
22876     todayHighlight : false,
22877     
22878     todayBtn: false,
22879     
22880     language: 'en',
22881     
22882     keyboardNavigation: true,
22883     
22884     calendarWeeks: false,
22885     
22886     startDate: -Infinity,
22887     
22888     endDate: Infinity,
22889     
22890     daysOfWeekDisabled: [],
22891     
22892     _events: [],
22893     
22894     singleMode : false,
22895     
22896     UTCDate: function()
22897     {
22898         return new Date(Date.UTC.apply(Date, arguments));
22899     },
22900     
22901     UTCToday: function()
22902     {
22903         var today = new Date();
22904         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
22905     },
22906     
22907     getDate: function() {
22908             var d = this.getUTCDate();
22909             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
22910     },
22911     
22912     getUTCDate: function() {
22913             return this.date;
22914     },
22915     
22916     setDate: function(d) {
22917             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
22918     },
22919     
22920     setUTCDate: function(d) {
22921             this.date = d;
22922             this.setValue(this.formatDate(this.date));
22923     },
22924         
22925     onRender: function(ct, position)
22926     {
22927         
22928         Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position);
22929         
22930         this.language = this.language || 'en';
22931         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0];
22932         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en";
22933         
22934         this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false;
22935         this.format = this.format || 'm/d/y';
22936         this.isInline = false;
22937         this.isInput = true;
22938         this.component = this.el.select('.add-on', true).first() || false;
22939         this.component = (this.component && this.component.length === 0) ? false : this.component;
22940         this.hasInput = this.component && this.inputEl().length;
22941         
22942         if (typeof(this.minViewMode === 'string')) {
22943             switch (this.minViewMode) {
22944                 case 'months':
22945                     this.minViewMode = 1;
22946                     break;
22947                 case 'years':
22948                     this.minViewMode = 2;
22949                     break;
22950                 default:
22951                     this.minViewMode = 0;
22952                     break;
22953             }
22954         }
22955         
22956         if (typeof(this.viewMode === 'string')) {
22957             switch (this.viewMode) {
22958                 case 'months':
22959                     this.viewMode = 1;
22960                     break;
22961                 case 'years':
22962                     this.viewMode = 2;
22963                     break;
22964                 default:
22965                     this.viewMode = 0;
22966                     break;
22967             }
22968         }
22969                 
22970         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.DateField.template);
22971         
22972 //        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.form.DateField.template);
22973         
22974         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
22975         
22976         this.picker().on('mousedown', this.onMousedown, this);
22977         this.picker().on('click', this.onClick, this);
22978         
22979         this.picker().addClass('datepicker-dropdown');
22980         
22981         this.startViewMode = this.viewMode;
22982         
22983         if(this.singleMode){
22984             Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
22985                 v.setVisibilityMode(Roo.Element.DISPLAY);
22986                 v.hide();
22987             });
22988             
22989             Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
22990                 v.setStyle('width', '189px');
22991             });
22992         }
22993         
22994         Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
22995             if(!this.calendarWeeks){
22996                 v.remove();
22997                 return;
22998             }
22999             
23000             v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
23001             v.attr('colspan', function(i, val){
23002                 return parseInt(val) + 1;
23003             });
23004         });
23005                         
23006         
23007         this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
23008         
23009         this.setStartDate(this.startDate);
23010         this.setEndDate(this.endDate);
23011         
23012         this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
23013         
23014         this.fillDow();
23015         this.fillMonths();
23016         this.update();
23017         this.showMode();
23018         
23019         if(this.isInline) {
23020             this.showPopup();
23021         }
23022     },
23023     
23024     picker : function()
23025     {
23026         return this.pickerEl;
23027 //        return this.el.select('.datepicker', true).first();
23028     },
23029     
23030     fillDow: function()
23031     {
23032         var dowCnt = this.weekStart;
23033         
23034         var dow = {
23035             tag: 'tr',
23036             cn: [
23037                 
23038             ]
23039         };
23040         
23041         if(this.calendarWeeks){
23042             dow.cn.push({
23043                 tag: 'th',
23044                 cls: 'cw',
23045                 html: '&nbsp;'
23046             })
23047         }
23048         
23049         while (dowCnt < this.weekStart + 7) {
23050             dow.cn.push({
23051                 tag: 'th',
23052                 cls: 'dow',
23053                 html: Roo.bootstrap.form.DateField.dates[this.language].daysMin[(dowCnt++)%7]
23054             });
23055         }
23056         
23057         this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
23058     },
23059     
23060     fillMonths: function()
23061     {    
23062         var i = 0;
23063         var months = this.picker().select('>.datepicker-months td', true).first();
23064         
23065         months.dom.innerHTML = '';
23066         
23067         while (i < 12) {
23068             var month = {
23069                 tag: 'span',
23070                 cls: 'month',
23071                 html: Roo.bootstrap.form.DateField.dates[this.language].monthsShort[i++]
23072             };
23073             
23074             months.createChild(month);
23075         }
23076         
23077     },
23078     
23079     update: function()
23080     {
23081         this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
23082         
23083         if (this.date < this.startDate) {
23084             this.viewDate = new Date(this.startDate);
23085         } else if (this.date > this.endDate) {
23086             this.viewDate = new Date(this.endDate);
23087         } else {
23088             this.viewDate = new Date(this.date);
23089         }
23090         
23091         this.fill();
23092     },
23093     
23094     fill: function() 
23095     {
23096         var d = new Date(this.viewDate),
23097                 year = d.getUTCFullYear(),
23098                 month = d.getUTCMonth(),
23099                 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
23100                 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
23101                 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
23102                 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
23103                 currentDate = this.date && this.date.valueOf(),
23104                 today = this.UTCToday();
23105         
23106         this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year;
23107         
23108 //        this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
23109         
23110 //        this.picker.select('>tfoot th.today').
23111 //                                              .text(dates[this.language].today)
23112 //                                              .toggle(this.todayBtn !== false);
23113     
23114         this.updateNavArrows();
23115         this.fillMonths();
23116                                                 
23117         var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
23118         
23119         day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
23120          
23121         prevMonth.setUTCDate(day);
23122         
23123         prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
23124         
23125         var nextMonth = new Date(prevMonth);
23126         
23127         nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
23128         
23129         nextMonth = nextMonth.valueOf();
23130         
23131         var fillMonths = false;
23132         
23133         this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
23134         
23135         while(prevMonth.valueOf() <= nextMonth) {
23136             var clsName = '';
23137             
23138             if (prevMonth.getUTCDay() === this.weekStart) {
23139                 if(fillMonths){
23140                     this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
23141                 }
23142                     
23143                 fillMonths = {
23144                     tag: 'tr',
23145                     cn: []
23146                 };
23147                 
23148                 if(this.calendarWeeks){
23149                     // ISO 8601: First week contains first thursday.
23150                     // ISO also states week starts on Monday, but we can be more abstract here.
23151                     var
23152                     // Start of current week: based on weekstart/current date
23153                     ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
23154                     // Thursday of this week
23155                     th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
23156                     // First Thursday of year, year from thursday
23157                     yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
23158                     // Calendar week: ms between thursdays, div ms per day, div 7 days
23159                     calWeek =  (th - yth) / 864e5 / 7 + 1;
23160                     
23161                     fillMonths.cn.push({
23162                         tag: 'td',
23163                         cls: 'cw',
23164                         html: calWeek
23165                     });
23166                 }
23167             }
23168             
23169             if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
23170                 clsName += ' old';
23171             } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
23172                 clsName += ' new';
23173             }
23174             if (this.todayHighlight &&
23175                 prevMonth.getUTCFullYear() == today.getFullYear() &&
23176                 prevMonth.getUTCMonth() == today.getMonth() &&
23177                 prevMonth.getUTCDate() == today.getDate()) {
23178                 clsName += ' today';
23179             }
23180             
23181             if (currentDate && prevMonth.valueOf() === currentDate) {
23182                 clsName += ' active';
23183             }
23184             
23185             if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
23186                     this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
23187                     clsName += ' disabled';
23188             }
23189             
23190             fillMonths.cn.push({
23191                 tag: 'td',
23192                 cls: 'day ' + clsName,
23193                 html: prevMonth.getDate()
23194             });
23195             
23196             prevMonth.setDate(prevMonth.getDate()+1);
23197         }
23198           
23199         var currentYear = this.date && this.date.getUTCFullYear();
23200         var currentMonth = this.date && this.date.getUTCMonth();
23201         
23202         this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
23203         
23204         Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
23205             v.removeClass('active');
23206             
23207             if(currentYear === year && k === currentMonth){
23208                 v.addClass('active');
23209             }
23210             
23211             if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
23212                 v.addClass('disabled');
23213             }
23214             
23215         });
23216         
23217         
23218         year = parseInt(year/10, 10) * 10;
23219         
23220         this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
23221         
23222         this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
23223         
23224         year -= 1;
23225         for (var i = -1; i < 11; i++) {
23226             this.picker().select('>.datepicker-years tbody td',true).first().createChild({
23227                 tag: 'span',
23228                 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
23229                 html: year
23230             });
23231             
23232             year += 1;
23233         }
23234     },
23235     
23236     showMode: function(dir) 
23237     {
23238         if (dir) {
23239             this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
23240         }
23241         
23242         Roo.each(this.picker().select('>div',true).elements, function(v){
23243             v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23244             v.hide();
23245         });
23246         this.picker().select('>.datepicker-'+Roo.bootstrap.form.DateField.modes[this.viewMode].clsName, true).first().show();
23247     },
23248     
23249     place: function()
23250     {
23251         if(this.isInline) {
23252             return;
23253         }
23254         
23255         this.picker().removeClass(['bottom', 'top']);
23256         
23257         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
23258             /*
23259              * place to the top of element!
23260              *
23261              */
23262             
23263             this.picker().addClass('top');
23264             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
23265             
23266             return;
23267         }
23268         
23269         this.picker().addClass('bottom');
23270         
23271         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
23272     },
23273     
23274     parseDate : function(value)
23275     {
23276         if(!value || value instanceof Date){
23277             return value;
23278         }
23279         var v = Date.parseDate(value, this.format);
23280         if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
23281             v = Date.parseDate(value, 'Y-m-d');
23282         }
23283         if(!v && this.altFormats){
23284             if(!this.altFormatsArray){
23285                 this.altFormatsArray = this.altFormats.split("|");
23286             }
23287             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
23288                 v = Date.parseDate(value, this.altFormatsArray[i]);
23289             }
23290         }
23291         return v;
23292     },
23293     
23294     formatDate : function(date, fmt)
23295     {   
23296         return (!date || !(date instanceof Date)) ?
23297         date : date.dateFormat(fmt || this.format);
23298     },
23299     
23300     onFocus : function()
23301     {
23302         Roo.bootstrap.form.DateField.superclass.onFocus.call(this);
23303         this.showPopup();
23304     },
23305     
23306     onBlur : function()
23307     {
23308         Roo.bootstrap.form.DateField.superclass.onBlur.call(this);
23309         
23310         var d = this.inputEl().getValue();
23311         
23312         this.setValue(d);
23313                 
23314         this.hidePopup();
23315     },
23316     
23317     showPopup : function()
23318     {
23319         this.picker().show();
23320         this.update();
23321         this.place();
23322         
23323         this.fireEvent('showpopup', this, this.date);
23324     },
23325     
23326     hidePopup : function()
23327     {
23328         if(this.isInline) {
23329             return;
23330         }
23331         this.picker().hide();
23332         this.viewMode = this.startViewMode;
23333         this.showMode();
23334         
23335         this.fireEvent('hidepopup', this, this.date);
23336         
23337     },
23338     
23339     onMousedown: function(e)
23340     {
23341         e.stopPropagation();
23342         e.preventDefault();
23343     },
23344     
23345     keyup: function(e)
23346     {
23347         Roo.bootstrap.form.DateField.superclass.keyup.call(this);
23348         this.update();
23349     },
23350
23351     setValue: function(v)
23352     {
23353         if(this.fireEvent('beforeselect', this, v) !== false){
23354             var d = new Date(this.parseDate(v) ).clearTime();
23355         
23356             if(isNaN(d.getTime())){
23357                 this.date = this.viewDate = '';
23358                 Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23359                 return;
23360             }
23361
23362             v = this.formatDate(d);
23363
23364             Roo.bootstrap.form.DateField.superclass.setValue.call(this, v);
23365
23366             this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
23367
23368             this.update();
23369
23370             this.fireEvent('select', this, this.date);
23371         }
23372     },
23373     
23374     getValue: function()
23375     {
23376         return this.formatDate(this.date);
23377     },
23378     
23379     fireKey: function(e)
23380     {
23381         if (!this.picker().isVisible()){
23382             if (e.keyCode == 27) { // allow escape to hide and re-show picker
23383                 this.showPopup();
23384             }
23385             return;
23386         }
23387         
23388         var dateChanged = false,
23389         dir, day, month,
23390         newDate, newViewDate;
23391         
23392         switch(e.keyCode){
23393             case 27: // escape
23394                 this.hidePopup();
23395                 e.preventDefault();
23396                 break;
23397             case 37: // left
23398             case 39: // right
23399                 if (!this.keyboardNavigation) {
23400                     break;
23401                 }
23402                 dir = e.keyCode == 37 ? -1 : 1;
23403                 
23404                 if (e.ctrlKey){
23405                     newDate = this.moveYear(this.date, dir);
23406                     newViewDate = this.moveYear(this.viewDate, dir);
23407                 } else if (e.shiftKey){
23408                     newDate = this.moveMonth(this.date, dir);
23409                     newViewDate = this.moveMonth(this.viewDate, dir);
23410                 } else {
23411                     newDate = new Date(this.date);
23412                     newDate.setUTCDate(this.date.getUTCDate() + dir);
23413                     newViewDate = new Date(this.viewDate);
23414                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
23415                 }
23416                 if (this.dateWithinRange(newDate)){
23417                     this.date = newDate;
23418                     this.viewDate = newViewDate;
23419                     this.setValue(this.formatDate(this.date));
23420 //                    this.update();
23421                     e.preventDefault();
23422                     dateChanged = true;
23423                 }
23424                 break;
23425             case 38: // up
23426             case 40: // down
23427                 if (!this.keyboardNavigation) {
23428                     break;
23429                 }
23430                 dir = e.keyCode == 38 ? -1 : 1;
23431                 if (e.ctrlKey){
23432                     newDate = this.moveYear(this.date, dir);
23433                     newViewDate = this.moveYear(this.viewDate, dir);
23434                 } else if (e.shiftKey){
23435                     newDate = this.moveMonth(this.date, dir);
23436                     newViewDate = this.moveMonth(this.viewDate, dir);
23437                 } else {
23438                     newDate = new Date(this.date);
23439                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
23440                     newViewDate = new Date(this.viewDate);
23441                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
23442                 }
23443                 if (this.dateWithinRange(newDate)){
23444                     this.date = newDate;
23445                     this.viewDate = newViewDate;
23446                     this.setValue(this.formatDate(this.date));
23447 //                    this.update();
23448                     e.preventDefault();
23449                     dateChanged = true;
23450                 }
23451                 break;
23452             case 13: // enter
23453                 this.setValue(this.formatDate(this.date));
23454                 this.hidePopup();
23455                 e.preventDefault();
23456                 break;
23457             case 9: // tab
23458                 this.setValue(this.formatDate(this.date));
23459                 this.hidePopup();
23460                 break;
23461             case 16: // shift
23462             case 17: // ctrl
23463             case 18: // alt
23464                 break;
23465             default :
23466                 this.hidePopup();
23467                 
23468         }
23469     },
23470     
23471     
23472     onClick: function(e) 
23473     {
23474         e.stopPropagation();
23475         e.preventDefault();
23476         
23477         var target = e.getTarget();
23478         
23479         if(target.nodeName.toLowerCase() === 'i'){
23480             target = Roo.get(target).dom.parentNode;
23481         }
23482         
23483         var nodeName = target.nodeName;
23484         var className = target.className;
23485         var html = target.innerHTML;
23486         //Roo.log(nodeName);
23487         
23488         switch(nodeName.toLowerCase()) {
23489             case 'th':
23490                 switch(className) {
23491                     case 'switch':
23492                         this.showMode(1);
23493                         break;
23494                     case 'prev':
23495                     case 'next':
23496                         var dir = Roo.bootstrap.form.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
23497                         switch(this.viewMode){
23498                                 case 0:
23499                                         this.viewDate = this.moveMonth(this.viewDate, dir);
23500                                         break;
23501                                 case 1:
23502                                 case 2:
23503                                         this.viewDate = this.moveYear(this.viewDate, dir);
23504                                         break;
23505                         }
23506                         this.fill();
23507                         break;
23508                     case 'today':
23509                         var date = new Date();
23510                         this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
23511 //                        this.fill()
23512                         this.setValue(this.formatDate(this.date));
23513                         
23514                         this.hidePopup();
23515                         break;
23516                 }
23517                 break;
23518             case 'span':
23519                 if (className.indexOf('disabled') < 0) {
23520                 if (!this.viewDate) {
23521                     this.viewDate = new Date();
23522                 }
23523                 this.viewDate.setUTCDate(1);
23524                     if (className.indexOf('month') > -1) {
23525                         this.viewDate.setUTCMonth(Roo.bootstrap.form.DateField.dates[this.language].monthsShort.indexOf(html));
23526                     } else {
23527                         var year = parseInt(html, 10) || 0;
23528                         this.viewDate.setUTCFullYear(year);
23529                         
23530                     }
23531                     
23532                     if(this.singleMode){
23533                         this.setValue(this.formatDate(this.viewDate));
23534                         this.hidePopup();
23535                         return;
23536                     }
23537                     
23538                     this.showMode(-1);
23539                     this.fill();
23540                 }
23541                 break;
23542                 
23543             case 'td':
23544                 //Roo.log(className);
23545                 if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
23546                     var day = parseInt(html, 10) || 1;
23547                     var year =  (this.viewDate || new Date()).getUTCFullYear(),
23548                         month = (this.viewDate || new Date()).getUTCMonth();
23549
23550                     if (className.indexOf('old') > -1) {
23551                         if(month === 0 ){
23552                             month = 11;
23553                             year -= 1;
23554                         }else{
23555                             month -= 1;
23556                         }
23557                     } else if (className.indexOf('new') > -1) {
23558                         if (month == 11) {
23559                             month = 0;
23560                             year += 1;
23561                         } else {
23562                             month += 1;
23563                         }
23564                     }
23565                     //Roo.log([year,month,day]);
23566                     this.date = this.UTCDate(year, month, day,0,0,0,0);
23567                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
23568 //                    this.fill();
23569                     //Roo.log(this.formatDate(this.date));
23570                     this.setValue(this.formatDate(this.date));
23571                     this.hidePopup();
23572                 }
23573                 break;
23574         }
23575     },
23576     
23577     setStartDate: function(startDate)
23578     {
23579         this.startDate = startDate || -Infinity;
23580         if (this.startDate !== -Infinity) {
23581             this.startDate = this.parseDate(this.startDate);
23582         }
23583         this.update();
23584         this.updateNavArrows();
23585     },
23586
23587     setEndDate: function(endDate)
23588     {
23589         this.endDate = endDate || Infinity;
23590         if (this.endDate !== Infinity) {
23591             this.endDate = this.parseDate(this.endDate);
23592         }
23593         this.update();
23594         this.updateNavArrows();
23595     },
23596     
23597     setDaysOfWeekDisabled: function(daysOfWeekDisabled)
23598     {
23599         this.daysOfWeekDisabled = daysOfWeekDisabled || [];
23600         if (typeof(this.daysOfWeekDisabled) !== 'object') {
23601             this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
23602         }
23603         this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
23604             return parseInt(d, 10);
23605         });
23606         this.update();
23607         this.updateNavArrows();
23608     },
23609     
23610     updateNavArrows: function() 
23611     {
23612         if(this.singleMode){
23613             return;
23614         }
23615         
23616         var d = new Date(this.viewDate),
23617         year = d.getUTCFullYear(),
23618         month = d.getUTCMonth();
23619         
23620         Roo.each(this.picker().select('.prev', true).elements, function(v){
23621             v.show();
23622             switch (this.viewMode) {
23623                 case 0:
23624
23625                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
23626                         v.hide();
23627                     }
23628                     break;
23629                 case 1:
23630                 case 2:
23631                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
23632                         v.hide();
23633                     }
23634                     break;
23635             }
23636         });
23637         
23638         Roo.each(this.picker().select('.next', true).elements, function(v){
23639             v.show();
23640             switch (this.viewMode) {
23641                 case 0:
23642
23643                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
23644                         v.hide();
23645                     }
23646                     break;
23647                 case 1:
23648                 case 2:
23649                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
23650                         v.hide();
23651                     }
23652                     break;
23653             }
23654         })
23655     },
23656     
23657     moveMonth: function(date, dir)
23658     {
23659         if (!dir) {
23660             return date;
23661         }
23662         var new_date = new Date(date.valueOf()),
23663         day = new_date.getUTCDate(),
23664         month = new_date.getUTCMonth(),
23665         mag = Math.abs(dir),
23666         new_month, test;
23667         dir = dir > 0 ? 1 : -1;
23668         if (mag == 1){
23669             test = dir == -1
23670             // If going back one month, make sure month is not current month
23671             // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
23672             ? function(){
23673                 return new_date.getUTCMonth() == month;
23674             }
23675             // If going forward one month, make sure month is as expected
23676             // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
23677             : function(){
23678                 return new_date.getUTCMonth() != new_month;
23679             };
23680             new_month = month + dir;
23681             new_date.setUTCMonth(new_month);
23682             // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
23683             if (new_month < 0 || new_month > 11) {
23684                 new_month = (new_month + 12) % 12;
23685             }
23686         } else {
23687             // For magnitudes >1, move one month at a time...
23688             for (var i=0; i<mag; i++) {
23689                 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
23690                 new_date = this.moveMonth(new_date, dir);
23691             }
23692             // ...then reset the day, keeping it in the new month
23693             new_month = new_date.getUTCMonth();
23694             new_date.setUTCDate(day);
23695             test = function(){
23696                 return new_month != new_date.getUTCMonth();
23697             };
23698         }
23699         // Common date-resetting loop -- if date is beyond end of month, make it
23700         // end of month
23701         while (test()){
23702             new_date.setUTCDate(--day);
23703             new_date.setUTCMonth(new_month);
23704         }
23705         return new_date;
23706     },
23707
23708     moveYear: function(date, dir)
23709     {
23710         return this.moveMonth(date, dir*12);
23711     },
23712
23713     dateWithinRange: function(date)
23714     {
23715         return date >= this.startDate && date <= this.endDate;
23716     },
23717
23718     
23719     remove: function() 
23720     {
23721         this.picker().remove();
23722     },
23723     
23724     validateValue : function(value)
23725     {
23726         if(this.getVisibilityEl().hasClass('hidden')){
23727             return true;
23728         }
23729         
23730         if(value.length < 1)  {
23731             if(this.allowBlank){
23732                 return true;
23733             }
23734             return false;
23735         }
23736         
23737         if(value.length < this.minLength){
23738             return false;
23739         }
23740         if(value.length > this.maxLength){
23741             return false;
23742         }
23743         if(this.vtype){
23744             var vt = Roo.form.VTypes;
23745             if(!vt[this.vtype](value, this)){
23746                 return false;
23747             }
23748         }
23749         if(typeof this.validator == "function"){
23750             var msg = this.validator(value);
23751             if(msg !== true){
23752                 return false;
23753             }
23754         }
23755         
23756         if(this.regex && !this.regex.test(value)){
23757             return false;
23758         }
23759         
23760         if(typeof(this.parseDate(value)) == 'undefined'){
23761             return false;
23762         }
23763         
23764         if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) {
23765             return false;
23766         }      
23767         
23768         if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) {
23769             return false;
23770         } 
23771         
23772         
23773         return true;
23774     },
23775     
23776     reset : function()
23777     {
23778         this.date = this.viewDate = '';
23779         
23780         Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23781     }
23782    
23783 });
23784
23785 Roo.apply(Roo.bootstrap.form.DateField,  {
23786     
23787     head : {
23788         tag: 'thead',
23789         cn: [
23790         {
23791             tag: 'tr',
23792             cn: [
23793             {
23794                 tag: 'th',
23795                 cls: 'prev',
23796                 html: '<i class="fa fa-arrow-left"/>'
23797             },
23798             {
23799                 tag: 'th',
23800                 cls: 'switch',
23801                 colspan: '5'
23802             },
23803             {
23804                 tag: 'th',
23805                 cls: 'next',
23806                 html: '<i class="fa fa-arrow-right"/>'
23807             }
23808
23809             ]
23810         }
23811         ]
23812     },
23813     
23814     content : {
23815         tag: 'tbody',
23816         cn: [
23817         {
23818             tag: 'tr',
23819             cn: [
23820             {
23821                 tag: 'td',
23822                 colspan: '7'
23823             }
23824             ]
23825         }
23826         ]
23827     },
23828     
23829     footer : {
23830         tag: 'tfoot',
23831         cn: [
23832         {
23833             tag: 'tr',
23834             cn: [
23835             {
23836                 tag: 'th',
23837                 colspan: '7',
23838                 cls: 'today'
23839             }
23840                     
23841             ]
23842         }
23843         ]
23844     },
23845     
23846     dates:{
23847         en: {
23848             days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
23849             daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
23850             daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
23851             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
23852             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
23853             today: "Today"
23854         }
23855     },
23856     
23857     modes: [
23858     {
23859         clsName: 'days',
23860         navFnc: 'Month',
23861         navStep: 1
23862     },
23863     {
23864         clsName: 'months',
23865         navFnc: 'FullYear',
23866         navStep: 1
23867     },
23868     {
23869         clsName: 'years',
23870         navFnc: 'FullYear',
23871         navStep: 10
23872     }]
23873 });
23874
23875 Roo.apply(Roo.bootstrap.form.DateField,  {
23876   
23877     template : {
23878         tag: 'div',
23879         cls: 'datepicker dropdown-menu roo-dynamic shadow',
23880         cn: [
23881         {
23882             tag: 'div',
23883             cls: 'datepicker-days',
23884             cn: [
23885             {
23886                 tag: 'table',
23887                 cls: 'table-condensed',
23888                 cn:[
23889                 Roo.bootstrap.form.DateField.head,
23890                 {
23891                     tag: 'tbody'
23892                 },
23893                 Roo.bootstrap.form.DateField.footer
23894                 ]
23895             }
23896             ]
23897         },
23898         {
23899             tag: 'div',
23900             cls: 'datepicker-months',
23901             cn: [
23902             {
23903                 tag: 'table',
23904                 cls: 'table-condensed',
23905                 cn:[
23906                 Roo.bootstrap.form.DateField.head,
23907                 Roo.bootstrap.form.DateField.content,
23908                 Roo.bootstrap.form.DateField.footer
23909                 ]
23910             }
23911             ]
23912         },
23913         {
23914             tag: 'div',
23915             cls: 'datepicker-years',
23916             cn: [
23917             {
23918                 tag: 'table',
23919                 cls: 'table-condensed',
23920                 cn:[
23921                 Roo.bootstrap.form.DateField.head,
23922                 Roo.bootstrap.form.DateField.content,
23923                 Roo.bootstrap.form.DateField.footer
23924                 ]
23925             }
23926             ]
23927         }
23928         ]
23929     }
23930 });
23931
23932  
23933
23934  /*
23935  * - LGPL
23936  *
23937  * TimeField
23938  * 
23939  */
23940
23941 /**
23942  * @class Roo.bootstrap.form.TimeField
23943  * @extends Roo.bootstrap.form.Input
23944  * Bootstrap DateField class
23945  * @cfg {Number} minuteStep the minutes is always the multiple of a fixed number, default 1
23946  * 
23947  * 
23948  * @constructor
23949  * Create a new TimeField
23950  * @param {Object} config The config object
23951  */
23952
23953 Roo.bootstrap.form.TimeField = function(config){
23954     Roo.bootstrap.form.TimeField.superclass.constructor.call(this, config);
23955     this.addEvents({
23956             /**
23957              * @event show
23958              * Fires when this field show.
23959              * @param {Roo.bootstrap.form.DateField} thisthis
23960              * @param {Mixed} date The date value
23961              */
23962             show : true,
23963             /**
23964              * @event show
23965              * Fires when this field hide.
23966              * @param {Roo.bootstrap.form.DateField} this
23967              * @param {Mixed} date The date value
23968              */
23969             hide : true,
23970             /**
23971              * @event select
23972              * Fires when select a date.
23973              * @param {Roo.bootstrap.form.DateField} this
23974              * @param {Mixed} date The date value
23975              */
23976             select : true
23977         });
23978 };
23979
23980 Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input,  {
23981     
23982     /**
23983      * @cfg {String} format
23984      * The default time format string which can be overriden for localization support.  The format must be
23985      * valid according to {@link Date#parseDate} (defaults to 'H:i').
23986      */
23987     format : "H:i",
23988     minuteStep : 1,
23989
23990     getAutoCreate : function()
23991     {
23992         this.after = '<i class="fa far fa-clock"></i>';
23993         return Roo.bootstrap.form.TimeField.superclass.getAutoCreate.call(this);
23994         
23995          
23996     },
23997     onRender: function(ct, position)
23998     {
23999         
24000         Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position);
24001                 
24002         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template);
24003         
24004         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24005         
24006         this.pop = this.picker().select('>.datepicker-time',true).first();
24007         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24008         
24009         this.picker().on('mousedown', this.onMousedown, this);
24010         this.picker().on('click', this.onClick, this);
24011         
24012         this.picker().addClass('datepicker-dropdown');
24013     
24014         this.fillTime();
24015         this.update();
24016             
24017         this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this);
24018         this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this);
24019         this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
24020         this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
24021         this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
24022         this.pop.select('button.ok', true).first().on('click', this.setTime, this);
24023
24024     },
24025     
24026     fireKey: function(e){
24027         if (!this.picker().isVisible()){
24028             if (e.keyCode == 27) { // allow escape to hide and re-show picker
24029                 this.show();
24030             }
24031             return;
24032         }
24033
24034         e.preventDefault();
24035         
24036         switch(e.keyCode){
24037             case 27: // escape
24038                 this.hide();
24039                 break;
24040             case 37: // left
24041             case 39: // right
24042                 this.onTogglePeriod();
24043                 break;
24044             case 38: // up
24045                 this.onIncrementMinutes();
24046                 break;
24047             case 40: // down
24048                 this.onDecrementMinutes();
24049                 break;
24050             case 13: // enter
24051             case 9: // tab
24052                 this.setTime();
24053                 break;
24054         }
24055     },
24056     
24057     onClick: function(e) {
24058         e.stopPropagation();
24059         e.preventDefault();
24060     },
24061     
24062     picker : function()
24063     {
24064         return this.pickerEl;
24065     },
24066     
24067     fillTime: function()
24068     {    
24069         var time = this.pop.select('tbody', true).first();
24070         
24071         time.dom.innerHTML = '';
24072         
24073         time.createChild({
24074             tag: 'tr',
24075             cn: [
24076                 {
24077                     tag: 'td',
24078                     cn: [
24079                         {
24080                             tag: 'a',
24081                             href: '#',
24082                             cls: 'btn',
24083                             cn: [
24084                                 {
24085                                     tag: 'i',
24086                                     cls: 'hours-up fa fas fa-chevron-up'
24087                                 }
24088                             ]
24089                         } 
24090                     ]
24091                 },
24092                 {
24093                     tag: 'td',
24094                     cls: 'separator'
24095                 },
24096                 {
24097                     tag: 'td',
24098                     cn: [
24099                         {
24100                             tag: 'a',
24101                             href: '#',
24102                             cls: 'btn',
24103                             cn: [
24104                                 {
24105                                     tag: 'i',
24106                                     cls: 'minutes-up fa fas fa-chevron-up'
24107                                 }
24108                             ]
24109                         }
24110                     ]
24111                 },
24112                 {
24113                     tag: 'td',
24114                     cls: 'separator'
24115                 }
24116             ]
24117         });
24118         
24119         time.createChild({
24120             tag: 'tr',
24121             cn: [
24122                 {
24123                     tag: 'td',
24124                     cn: [
24125                         {
24126                             tag: 'span',
24127                             cls: 'timepicker-hour',
24128                             html: '00'
24129                         }  
24130                     ]
24131                 },
24132                 {
24133                     tag: 'td',
24134                     cls: 'separator',
24135                     html: ':'
24136                 },
24137                 {
24138                     tag: 'td',
24139                     cn: [
24140                         {
24141                             tag: 'span',
24142                             cls: 'timepicker-minute',
24143                             html: '00'
24144                         }  
24145                     ]
24146                 },
24147                 {
24148                     tag: 'td',
24149                     cls: 'separator'
24150                 },
24151                 {
24152                     tag: 'td',
24153                     cn: [
24154                         {
24155                             tag: 'button',
24156                             type: 'button',
24157                             cls: 'btn btn-primary period',
24158                             html: 'AM'
24159                             
24160                         }
24161                     ]
24162                 }
24163             ]
24164         });
24165         
24166         time.createChild({
24167             tag: 'tr',
24168             cn: [
24169                 {
24170                     tag: 'td',
24171                     cn: [
24172                         {
24173                             tag: 'a',
24174                             href: '#',
24175                             cls: 'btn',
24176                             cn: [
24177                                 {
24178                                     tag: 'span',
24179                                     cls: 'hours-down fa fas fa-chevron-down'
24180                                 }
24181                             ]
24182                         }
24183                     ]
24184                 },
24185                 {
24186                     tag: 'td',
24187                     cls: 'separator'
24188                 },
24189                 {
24190                     tag: 'td',
24191                     cn: [
24192                         {
24193                             tag: 'a',
24194                             href: '#',
24195                             cls: 'btn',
24196                             cn: [
24197                                 {
24198                                     tag: 'span',
24199                                     cls: 'minutes-down fa fas fa-chevron-down'
24200                                 }
24201                             ]
24202                         }
24203                     ]
24204                 },
24205                 {
24206                     tag: 'td',
24207                     cls: 'separator'
24208                 }
24209             ]
24210         });
24211         
24212     },
24213     
24214     update: function()
24215     {
24216         // default minute is a multiple of minuteStep
24217         if(typeof(this.time) === 'undefined') {
24218             this.time = new Date();
24219             this.time = this.time.add(Date.MINUTE, Math.round(parseInt(this.time.format('i')) / this.minuteStep) * this.minuteStep - parseInt(this.time.format('i')));
24220         }
24221         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
24222         
24223         this.fill();
24224     },
24225     
24226     fill: function() 
24227     {
24228         var hours = this.time.getHours();
24229         var minutes = this.time.getMinutes();
24230         var period = 'AM';
24231         
24232         if(hours > 11){
24233             period = 'PM';
24234         }
24235         
24236         if(hours == 0){
24237             hours = 12;
24238         }
24239         
24240         
24241         if(hours > 12){
24242             hours = hours - 12;
24243         }
24244         
24245         if(hours < 10){
24246             hours = '0' + hours;
24247         }
24248         
24249         if(minutes < 10){
24250             minutes = '0' + minutes;
24251         }
24252         
24253         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
24254         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
24255         this.pop.select('button', true).first().dom.innerHTML = period;
24256         
24257     },
24258     
24259     place: function()
24260     {   
24261         this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
24262         
24263         var cls = ['bottom'];
24264         
24265         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
24266             cls.pop();
24267             cls.push('top');
24268         }
24269         
24270         cls.push('right');
24271         
24272         if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
24273             cls.pop();
24274             cls.push('left');
24275         }
24276         //this.picker().setXY(20000,20000);
24277         this.picker().addClass(cls.join('-'));
24278         
24279         var _this = this;
24280         
24281         Roo.each(cls, function(c){
24282             if(c == 'bottom'){
24283                 (function() {
24284                  //  
24285                 }).defer(200);
24286                  _this.picker().alignTo(_this.inputEl(),   "tr-br", [0, 10], false);
24287                 //_this.picker().setTop(_this.inputEl().getHeight());
24288                 return;
24289             }
24290             if(c == 'top'){
24291                  _this.picker().alignTo(_this.inputEl(),   "br-tr", [0, 10], false);
24292                 
24293                 //_this.picker().setTop(0 - _this.picker().getHeight());
24294                 return;
24295             }
24296             /*
24297             if(c == 'left'){
24298                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
24299                 return;
24300             }
24301             if(c == 'right'){
24302                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
24303                 return;
24304             }
24305             */
24306         });
24307         
24308     },
24309   
24310     onFocus : function()
24311     {
24312         Roo.bootstrap.form.TimeField.superclass.onFocus.call(this);
24313         this.show();
24314     },
24315     
24316     onBlur : function()
24317     {
24318         Roo.bootstrap.form.TimeField.superclass.onBlur.call(this);
24319         this.hide();
24320     },
24321     
24322     show : function()
24323     {
24324         this.picker().show();
24325         this.pop.show();
24326         this.update();
24327         this.place();
24328         
24329         this.fireEvent('show', this, this.date);
24330     },
24331     
24332     hide : function()
24333     {
24334         this.picker().hide();
24335         this.pop.hide();
24336         
24337         this.fireEvent('hide', this, this.date);
24338     },
24339     
24340     setTime : function()
24341     {
24342         this.hide();
24343         this.setValue(this.time.format(this.format));
24344         
24345         this.fireEvent('select', this, this.date);
24346         
24347         
24348     },
24349     
24350     onMousedown: function(e){
24351         e.stopPropagation();
24352         e.preventDefault();
24353     },
24354     
24355     onIncrementHours: function()
24356     {
24357         Roo.log('onIncrementHours');
24358         this.time = this.time.add(Date.HOUR, 1);
24359         this.update();
24360         
24361     },
24362     
24363     onDecrementHours: function()
24364     {
24365         Roo.log('onDecrementHours');
24366         this.time = this.time.add(Date.HOUR, -1);
24367         this.update();
24368     },
24369     
24370     onIncrementMinutes: function()
24371     {
24372         Roo.log('onIncrementMinutes');
24373         var minutesToAdd = Math.round((parseInt(this.time.format('i')) + this.minuteStep) / this.minuteStep) * this.minuteStep - parseInt(this.time.format('i'));
24374         this.time = this.time.add(Date.MINUTE, minutesToAdd);
24375         this.update();
24376     },
24377     
24378     onDecrementMinutes: function()
24379     {
24380         Roo.log('onDecrementMinutes');
24381         var minutesToSubtract = parseInt(this.time.format('i')) - Math.round((parseInt(this.time.format('i')) - this.minuteStep) / this.minuteStep) * this.minuteStep;
24382         this.time = this.time.add(Date.MINUTE, -1 * minutesToSubtract);
24383         this.update();
24384     },
24385     
24386     onTogglePeriod: function()
24387     {
24388         Roo.log('onTogglePeriod');
24389         this.time = this.time.add(Date.HOUR, 12);
24390         this.update();
24391     }
24392     
24393    
24394 });
24395  
24396
24397 Roo.apply(Roo.bootstrap.form.TimeField,  {
24398   
24399     template : {
24400         tag: 'div',
24401         cls: 'datepicker dropdown-menu',
24402         cn: [
24403             {
24404                 tag: 'div',
24405                 cls: 'datepicker-time',
24406                 cn: [
24407                 {
24408                     tag: 'table',
24409                     cls: 'table-condensed',
24410                     cn:[
24411                         {
24412                             tag: 'tbody',
24413                             cn: [
24414                                 {
24415                                     tag: 'tr',
24416                                     cn: [
24417                                     {
24418                                         tag: 'td',
24419                                         colspan: '7'
24420                                     }
24421                                     ]
24422                                 }
24423                             ]
24424                         },
24425                         {
24426                             tag: 'tfoot',
24427                             cn: [
24428                                 {
24429                                     tag: 'tr',
24430                                     cn: [
24431                                     {
24432                                         tag: 'th',
24433                                         colspan: '7',
24434                                         cls: '',
24435                                         cn: [
24436                                             {
24437                                                 tag: 'button',
24438                                                 cls: 'btn btn-info ok',
24439                                                 html: 'OK'
24440                                             }
24441                                         ]
24442                                     }
24443                     
24444                                     ]
24445                                 }
24446                             ]
24447                         }
24448                     ]
24449                 }
24450                 ]
24451             }
24452         ]
24453     }
24454 });
24455
24456  
24457
24458  /*
24459  * - LGPL
24460  *
24461  * MonthField
24462  * 
24463  */
24464
24465 /**
24466  * @class Roo.bootstrap.form.MonthField
24467  * @extends Roo.bootstrap.form.Input
24468  * Bootstrap MonthField class
24469  * 
24470  * @cfg {String} language default en
24471  * 
24472  * @constructor
24473  * Create a new MonthField
24474  * @param {Object} config The config object
24475  */
24476
24477 Roo.bootstrap.form.MonthField = function(config){
24478     Roo.bootstrap.form.MonthField.superclass.constructor.call(this, config);
24479     
24480     this.addEvents({
24481         /**
24482          * @event show
24483          * Fires when this field show.
24484          * @param {Roo.bootstrap.form.MonthField} this
24485          * @param {Mixed} date The date value
24486          */
24487         show : true,
24488         /**
24489          * @event show
24490          * Fires when this field hide.
24491          * @param {Roo.bootstrap.form.MonthField} this
24492          * @param {Mixed} date The date value
24493          */
24494         hide : true,
24495         /**
24496          * @event select
24497          * Fires when select a date.
24498          * @param {Roo.bootstrap.form.MonthField} this
24499          * @param {String} oldvalue The old value
24500          * @param {String} newvalue The new value
24501          */
24502         select : true
24503     });
24504 };
24505
24506 Roo.extend(Roo.bootstrap.form.MonthField, Roo.bootstrap.form.Input,  {
24507     
24508     onRender: function(ct, position)
24509     {
24510         
24511         Roo.bootstrap.form.MonthField.superclass.onRender.call(this, ct, position);
24512         
24513         this.language = this.language || 'en';
24514         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : this.language.split('-')[0];
24515         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : "en";
24516         
24517         this.isRTL = Roo.bootstrap.form.MonthField.dates[this.language].rtl || false;
24518         this.isInline = false;
24519         this.isInput = true;
24520         this.component = this.el.select('.add-on', true).first() || false;
24521         this.component = (this.component && this.component.length === 0) ? false : this.component;
24522         this.hasInput = this.component && this.inputEL().length;
24523         
24524         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.MonthField.template);
24525         
24526         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24527         
24528         this.picker().on('mousedown', this.onMousedown, this);
24529         this.picker().on('click', this.onClick, this);
24530         
24531         this.picker().addClass('datepicker-dropdown');
24532         
24533         Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
24534             v.setStyle('width', '189px');
24535         });
24536         
24537         this.fillMonths();
24538         
24539         this.update();
24540         
24541         if(this.isInline) {
24542             this.show();
24543         }
24544         
24545     },
24546     
24547     setValue: function(v, suppressEvent)
24548     {   
24549         var o = this.getValue();
24550         
24551         Roo.bootstrap.form.MonthField.superclass.setValue.call(this, v);
24552         
24553         this.update();
24554
24555         if(suppressEvent !== true){
24556             this.fireEvent('select', this, o, v);
24557         }
24558         
24559     },
24560     
24561     getValue: function()
24562     {
24563         return this.value;
24564     },
24565     
24566     onClick: function(e) 
24567     {
24568         e.stopPropagation();
24569         e.preventDefault();
24570         
24571         var target = e.getTarget();
24572         
24573         if(target.nodeName.toLowerCase() === 'i'){
24574             target = Roo.get(target).dom.parentNode;
24575         }
24576         
24577         var nodeName = target.nodeName;
24578         var className = target.className;
24579         var html = target.innerHTML;
24580         
24581         if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
24582             return;
24583         }
24584         
24585         this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].monthsShort.indexOf(html);
24586         
24587         this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24588         
24589         this.hide();
24590                         
24591     },
24592     
24593     picker : function()
24594     {
24595         return this.pickerEl;
24596     },
24597     
24598     fillMonths: function()
24599     {    
24600         var i = 0;
24601         var months = this.picker().select('>.datepicker-months td', true).first();
24602         
24603         months.dom.innerHTML = '';
24604         
24605         while (i < 12) {
24606             var month = {
24607                 tag: 'span',
24608                 cls: 'month',
24609                 html: Roo.bootstrap.form.MonthField.dates[this.language].monthsShort[i++]
24610             };
24611             
24612             months.createChild(month);
24613         }
24614         
24615     },
24616     
24617     update: function()
24618     {
24619         var _this = this;
24620         
24621         if(typeof(this.vIndex) == 'undefined' && this.value.length){
24622             this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].months.indexOf(this.value);
24623         }
24624         
24625         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
24626             e.removeClass('active');
24627             
24628             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
24629                 e.addClass('active');
24630             }
24631         })
24632     },
24633     
24634     place: function()
24635     {
24636         if(this.isInline) {
24637             return;
24638         }
24639         
24640         this.picker().removeClass(['bottom', 'top']);
24641         
24642         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
24643             /*
24644              * place to the top of element!
24645              *
24646              */
24647             
24648             this.picker().addClass('top');
24649             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
24650             
24651             return;
24652         }
24653         
24654         this.picker().addClass('bottom');
24655         
24656         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
24657     },
24658     
24659     onFocus : function()
24660     {
24661         Roo.bootstrap.form.MonthField.superclass.onFocus.call(this);
24662         this.show();
24663     },
24664     
24665     onBlur : function()
24666     {
24667         Roo.bootstrap.form.MonthField.superclass.onBlur.call(this);
24668         
24669         var d = this.inputEl().getValue();
24670         
24671         this.setValue(d);
24672                 
24673         this.hide();
24674     },
24675     
24676     show : function()
24677     {
24678         this.picker().show();
24679         this.picker().select('>.datepicker-months', true).first().show();
24680         this.update();
24681         this.place();
24682         
24683         this.fireEvent('show', this, this.date);
24684     },
24685     
24686     hide : function()
24687     {
24688         if(this.isInline) {
24689             return;
24690         }
24691         this.picker().hide();
24692         this.fireEvent('hide', this, this.date);
24693         
24694     },
24695     
24696     onMousedown: function(e)
24697     {
24698         e.stopPropagation();
24699         e.preventDefault();
24700     },
24701     
24702     keyup: function(e)
24703     {
24704         Roo.bootstrap.form.MonthField.superclass.keyup.call(this);
24705         this.update();
24706     },
24707
24708     fireKey: function(e)
24709     {
24710         if (!this.picker().isVisible()){
24711             if (e.keyCode == 27)   {// allow escape to hide and re-show picker
24712                 this.show();
24713             }
24714             return;
24715         }
24716         
24717         var dir;
24718         
24719         switch(e.keyCode){
24720             case 27: // escape
24721                 this.hide();
24722                 e.preventDefault();
24723                 break;
24724             case 37: // left
24725             case 39: // right
24726                 dir = e.keyCode == 37 ? -1 : 1;
24727                 
24728                 this.vIndex = this.vIndex + dir;
24729                 
24730                 if(this.vIndex < 0){
24731                     this.vIndex = 0;
24732                 }
24733                 
24734                 if(this.vIndex > 11){
24735                     this.vIndex = 11;
24736                 }
24737                 
24738                 if(isNaN(this.vIndex)){
24739                     this.vIndex = 0;
24740                 }
24741                 
24742                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24743                 
24744                 break;
24745             case 38: // up
24746             case 40: // down
24747                 
24748                 dir = e.keyCode == 38 ? -1 : 1;
24749                 
24750                 this.vIndex = this.vIndex + dir * 4;
24751                 
24752                 if(this.vIndex < 0){
24753                     this.vIndex = 0;
24754                 }
24755                 
24756                 if(this.vIndex > 11){
24757                     this.vIndex = 11;
24758                 }
24759                 
24760                 if(isNaN(this.vIndex)){
24761                     this.vIndex = 0;
24762                 }
24763                 
24764                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24765                 break;
24766                 
24767             case 13: // enter
24768                 
24769                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24770                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24771                 }
24772                 
24773                 this.hide();
24774                 e.preventDefault();
24775                 break;
24776             case 9: // tab
24777                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24778                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24779                 }
24780                 this.hide();
24781                 break;
24782             case 16: // shift
24783             case 17: // ctrl
24784             case 18: // alt
24785                 break;
24786             default :
24787                 this.hide();
24788                 
24789         }
24790     },
24791     
24792     remove: function() 
24793     {
24794         this.picker().remove();
24795     }
24796    
24797 });
24798
24799 Roo.apply(Roo.bootstrap.form.MonthField,  {
24800     
24801     content : {
24802         tag: 'tbody',
24803         cn: [
24804         {
24805             tag: 'tr',
24806             cn: [
24807             {
24808                 tag: 'td',
24809                 colspan: '7'
24810             }
24811             ]
24812         }
24813         ]
24814     },
24815     
24816     dates:{
24817         en: {
24818             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
24819             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
24820         }
24821     }
24822 });
24823
24824 Roo.apply(Roo.bootstrap.form.MonthField,  {
24825   
24826     template : {
24827         tag: 'div',
24828         cls: 'datepicker dropdown-menu roo-dynamic',
24829         cn: [
24830             {
24831                 tag: 'div',
24832                 cls: 'datepicker-months',
24833                 cn: [
24834                 {
24835                     tag: 'table',
24836                     cls: 'table-condensed',
24837                     cn:[
24838                         Roo.bootstrap.form.DateField.content
24839                     ]
24840                 }
24841                 ]
24842             }
24843         ]
24844     }
24845 });
24846
24847  
24848
24849  
24850  /*
24851  * - LGPL
24852  *
24853  * CheckBox
24854  * 
24855  */
24856
24857 /**
24858  * @class Roo.bootstrap.form.CheckBox
24859  * @extends Roo.bootstrap.form.Input
24860  * Bootstrap CheckBox class
24861  * 
24862  * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
24863  * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
24864  * @cfg {String} boxLabel The text that appears beside the checkbox
24865  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
24866  * @cfg {Boolean} checked initnal the element
24867  * @cfg {Boolean} inline inline the element (default false)
24868  * @cfg {String} groupId the checkbox group id // normal just use for checkbox
24869  * @cfg {String} tooltip label tooltip
24870  * 
24871  * @constructor
24872  * Create a new CheckBox
24873  * @param {Object} config The config object
24874  */
24875
24876 Roo.bootstrap.form.CheckBox = function(config){
24877     Roo.bootstrap.form.CheckBox.superclass.constructor.call(this, config);
24878    
24879     this.addEvents({
24880         /**
24881         * @event check
24882         * Fires when the element is checked or unchecked.
24883         * @param {Roo.bootstrap.form.CheckBox} this This input
24884         * @param {Boolean} checked The new checked value
24885         */
24886        check : true,
24887        /**
24888         * @event click
24889         * Fires when the element is click.
24890         * @param {Roo.bootstrap.form.CheckBox} this This input
24891         */
24892        click : true
24893     });
24894     
24895 };
24896
24897 Roo.extend(Roo.bootstrap.form.CheckBox, Roo.bootstrap.form.Input,  {
24898   
24899     inputType: 'checkbox',
24900     inputValue: 1,
24901     valueOff: 0,
24902     boxLabel: false,
24903     checked: false,
24904     weight : false,
24905     inline: false,
24906     tooltip : '',
24907     
24908     // checkbox success does not make any sense really.. 
24909     invalidClass : "",
24910     validClass : "",
24911     
24912     
24913     getAutoCreate : function()
24914     {
24915         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
24916         
24917         var id = Roo.id();
24918         
24919         var cfg = {};
24920         
24921         cfg.cls = 'form-group form-check ' + this.inputType; //input-group
24922         
24923         if(this.inline){
24924             cfg.cls += ' ' + this.inputType + '-inline  form-check-inline';
24925         }
24926         
24927         var input =  {
24928             tag: 'input',
24929             id : id,
24930             type : this.inputType,
24931             value : this.inputValue,
24932             cls : 'roo-' + this.inputType, //'form-box',
24933             placeholder : this.placeholder || ''
24934             
24935         };
24936         
24937         if(this.inputType != 'radio'){
24938             var hidden =  {
24939                 tag: 'input',
24940                 type : 'hidden',
24941                 cls : 'roo-hidden-value',
24942                 value : this.checked ? this.inputValue : this.valueOff
24943             };
24944         }
24945         
24946             
24947         if (this.weight) { // Validity check?
24948             cfg.cls += " " + this.inputType + "-" + this.weight;
24949         }
24950         
24951         if (this.disabled) {
24952             input.disabled=true;
24953         }
24954         
24955         if(this.checked){
24956             input.checked = this.checked;
24957         }
24958         
24959         if (this.name) {
24960             
24961             input.name = this.name;
24962             
24963             if(this.inputType != 'radio'){
24964                 hidden.name = this.name;
24965                 input.name = '_hidden_' + this.name;
24966             }
24967         }
24968         
24969         if (this.size) {
24970             input.cls += ' input-' + this.size;
24971         }
24972         
24973         var settings=this;
24974         
24975         ['xs','sm','md','lg'].map(function(size){
24976             if (settings[size]) {
24977                 cfg.cls += ' col-' + size + '-' + settings[size];
24978             }
24979         });
24980         
24981         var inputblock = input;
24982          
24983         if (this.before || this.after) {
24984             
24985             inputblock = {
24986                 cls : 'input-group',
24987                 cn :  [] 
24988             };
24989             
24990             if (this.before) {
24991                 inputblock.cn.push({
24992                     tag :'span',
24993                     cls : 'input-group-addon',
24994                     html : this.before
24995                 });
24996             }
24997             
24998             inputblock.cn.push(input);
24999             
25000             if(this.inputType != 'radio'){
25001                 inputblock.cn.push(hidden);
25002             }
25003             
25004             if (this.after) {
25005                 inputblock.cn.push({
25006                     tag :'span',
25007                     cls : 'input-group-addon',
25008                     html : this.after
25009                 });
25010             }
25011             
25012         }
25013         var boxLabelCfg = false;
25014         
25015         if(this.boxLabel){
25016            
25017             boxLabelCfg = {
25018                 tag: 'label',
25019                 //'for': id, // box label is handled by onclick - so no for...
25020                 cls: 'box-label',
25021                 html: this.boxLabel
25022             };
25023             if(this.tooltip){
25024                 boxLabelCfg.tooltip = this.tooltip;
25025             }
25026              
25027         }
25028         
25029         
25030         if (align ==='left' && this.fieldLabel.length) {
25031 //                Roo.log("left and has label");
25032             cfg.cn = [
25033                 {
25034                     tag: 'label',
25035                     'for' :  id,
25036                     cls : 'control-label',
25037                     html : this.fieldLabel
25038                 },
25039                 {
25040                     cls : "", 
25041                     cn: [
25042                         inputblock
25043                     ]
25044                 }
25045             ];
25046             
25047             if (boxLabelCfg) {
25048                 cfg.cn[1].cn.push(boxLabelCfg);
25049             }
25050             
25051             if(this.labelWidth > 12){
25052                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
25053             }
25054             
25055             if(this.labelWidth < 13 && this.labelmd == 0){
25056                 this.labelmd = this.labelWidth;
25057             }
25058             
25059             if(this.labellg > 0){
25060                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
25061                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
25062             }
25063             
25064             if(this.labelmd > 0){
25065                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
25066                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
25067             }
25068             
25069             if(this.labelsm > 0){
25070                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
25071                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
25072             }
25073             
25074             if(this.labelxs > 0){
25075                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
25076                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
25077             }
25078             
25079         } else if ( this.fieldLabel.length) {
25080 //                Roo.log(" label");
25081                 cfg.cn = [
25082                    
25083                     {
25084                         tag: this.boxLabel ? 'span' : 'label',
25085                         'for': id,
25086                         cls: 'control-label box-input-label',
25087                         //cls : 'input-group-addon',
25088                         html : this.fieldLabel
25089                     },
25090                     
25091                     inputblock
25092                     
25093                 ];
25094                 if (boxLabelCfg) {
25095                     cfg.cn.push(boxLabelCfg);
25096                 }
25097
25098         } else {
25099             
25100 //                Roo.log(" no label && no align");
25101                 cfg.cn = [  inputblock ] ;
25102                 if (boxLabelCfg) {
25103                     cfg.cn.push(boxLabelCfg);
25104                 }
25105
25106                 
25107         }
25108         
25109        
25110         
25111         if(this.inputType != 'radio'){
25112             cfg.cn.push(hidden);
25113         }
25114         
25115         return cfg;
25116         
25117     },
25118     
25119     /**
25120      * return the real input element.
25121      */
25122     inputEl: function ()
25123     {
25124         return this.el.select('input.roo-' + this.inputType,true).first();
25125     },
25126     hiddenEl: function ()
25127     {
25128         return this.el.select('input.roo-hidden-value',true).first();
25129     },
25130     
25131     labelEl: function()
25132     {
25133         return this.el.select('label.control-label',true).first();
25134     },
25135     /* depricated... */
25136     
25137     label: function()
25138     {
25139         return this.labelEl();
25140     },
25141     
25142     boxLabelEl: function()
25143     {
25144         return this.el.select('label.box-label',true).first();
25145     },
25146     
25147     initEvents : function()
25148     {
25149 //        Roo.bootstrap.form.CheckBox.superclass.initEvents.call(this);
25150         
25151         this.inputEl().on('click', this.onClick,  this);
25152         
25153         if (this.boxLabel) { 
25154             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
25155         }
25156         
25157         this.startValue = this.getValue();
25158         
25159         if(this.groupId){
25160             Roo.bootstrap.form.CheckBox.register(this);
25161         }
25162     },
25163     
25164     onClick : function(e)
25165     {   
25166         if(this.fireEvent('click', this, e) !== false){
25167             this.setChecked(!this.checked);
25168         }
25169         
25170     },
25171     
25172     setChecked : function(state,suppressEvent)
25173     {
25174         this.startValue = this.getValue();
25175
25176         if(this.inputType == 'radio'){
25177             
25178             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25179                 e.dom.checked = false;
25180             });
25181             
25182             this.inputEl().dom.checked = true;
25183             
25184             this.inputEl().dom.value = this.inputValue;
25185             
25186             if(suppressEvent !== true){
25187                 this.fireEvent('check', this, true);
25188             }
25189             
25190             this.validate();
25191             
25192             return;
25193         }
25194         
25195         this.checked = state;
25196         
25197         this.inputEl().dom.checked = state;
25198         
25199         
25200         this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
25201         
25202         if(suppressEvent !== true){
25203             this.fireEvent('check', this, state);
25204         }
25205         
25206         this.validate();
25207     },
25208     
25209     getValue : function()
25210     {
25211         if(this.inputType == 'radio'){
25212             return this.getGroupValue();
25213         }
25214         
25215         return this.hiddenEl().dom.value;
25216         
25217     },
25218     
25219     getGroupValue : function()
25220     {
25221         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
25222             return '';
25223         }
25224         
25225         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
25226     },
25227     
25228     setValue : function(v,suppressEvent)
25229     {
25230         if(this.inputType == 'radio'){
25231             this.setGroupValue(v, suppressEvent);
25232             return;
25233         }
25234         
25235         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
25236         
25237         this.validate();
25238     },
25239     
25240     setGroupValue : function(v, suppressEvent)
25241     {
25242         this.startValue = this.getValue();
25243         
25244         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25245             e.dom.checked = false;
25246             
25247             if(e.dom.value == v){
25248                 e.dom.checked = true;
25249             }
25250         });
25251         
25252         if(suppressEvent !== true){
25253             this.fireEvent('check', this, true);
25254         }
25255
25256         this.validate();
25257         
25258         return;
25259     },
25260     
25261     validate : function()
25262     {
25263         if(this.getVisibilityEl().hasClass('hidden')){
25264             return true;
25265         }
25266         
25267         if(
25268                 this.disabled || 
25269                 (this.inputType == 'radio' && this.validateRadio()) ||
25270                 (this.inputType == 'checkbox' && this.validateCheckbox())
25271         ){
25272             this.markValid();
25273             return true;
25274         }
25275         
25276         this.markInvalid();
25277         return false;
25278     },
25279     
25280     validateRadio : function()
25281     {
25282         if(this.getVisibilityEl().hasClass('hidden')){
25283             return true;
25284         }
25285         
25286         if(this.allowBlank){
25287             return true;
25288         }
25289         
25290         var valid = false;
25291         
25292         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25293             if(!e.dom.checked){
25294                 return;
25295             }
25296             
25297             valid = true;
25298             
25299             return false;
25300         });
25301         
25302         return valid;
25303     },
25304     
25305     validateCheckbox : function()
25306     {
25307         if(!this.groupId){
25308             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
25309             //return (this.getValue() == this.inputValue) ? true : false;
25310         }
25311         
25312         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25313         
25314         if(!group){
25315             return false;
25316         }
25317         
25318         var r = false;
25319         
25320         for(var i in group){
25321             if(group[i].el.isVisible(true)){
25322                 r = false;
25323                 break;
25324             }
25325             
25326             r = true;
25327         }
25328         
25329         for(var i in group){
25330             if(r){
25331                 break;
25332             }
25333             
25334             r = (group[i].getValue() == group[i].inputValue) ? true : false;
25335         }
25336         
25337         return r;
25338     },
25339     
25340     /**
25341      * Mark this field as valid
25342      */
25343     markValid : function()
25344     {
25345         var _this = this;
25346         
25347         this.fireEvent('valid', this);
25348         
25349         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25350         
25351         if(this.groupId){
25352             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25353         }
25354         
25355         if(label){
25356             label.markValid();
25357         }
25358
25359         if(this.inputType == 'radio'){
25360             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25361                 var fg = e.findParent('.form-group', false, true);
25362                 if (Roo.bootstrap.version == 3) {
25363                     fg.removeClass([_this.invalidClass, _this.validClass]);
25364                     fg.addClass(_this.validClass);
25365                 } else {
25366                     fg.removeClass(['is-valid', 'is-invalid']);
25367                     fg.addClass('is-valid');
25368                 }
25369             });
25370             
25371             return;
25372         }
25373
25374         if(!this.groupId){
25375             var fg = this.el.findParent('.form-group', false, true);
25376             if (Roo.bootstrap.version == 3) {
25377                 fg.removeClass([this.invalidClass, this.validClass]);
25378                 fg.addClass(this.validClass);
25379             } else {
25380                 fg.removeClass(['is-valid', 'is-invalid']);
25381                 fg.addClass('is-valid');
25382             }
25383             return;
25384         }
25385         
25386         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25387         
25388         if(!group){
25389             return;
25390         }
25391         
25392         for(var i in group){
25393             var fg = group[i].el.findParent('.form-group', false, true);
25394             if (Roo.bootstrap.version == 3) {
25395                 fg.removeClass([this.invalidClass, this.validClass]);
25396                 fg.addClass(this.validClass);
25397             } else {
25398                 fg.removeClass(['is-valid', 'is-invalid']);
25399                 fg.addClass('is-valid');
25400             }
25401         }
25402     },
25403     
25404      /**
25405      * Mark this field as invalid
25406      * @param {String} msg The validation message
25407      */
25408     markInvalid : function(msg)
25409     {
25410         if(this.allowBlank){
25411             return;
25412         }
25413         
25414         var _this = this;
25415         
25416         this.fireEvent('invalid', this, msg);
25417         
25418         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25419         
25420         if(this.groupId){
25421             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25422         }
25423         
25424         if(label){
25425             label.markInvalid();
25426         }
25427             
25428         if(this.inputType == 'radio'){
25429             
25430             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25431                 var fg = e.findParent('.form-group', false, true);
25432                 if (Roo.bootstrap.version == 3) {
25433                     fg.removeClass([_this.invalidClass, _this.validClass]);
25434                     fg.addClass(_this.invalidClass);
25435                 } else {
25436                     fg.removeClass(['is-invalid', 'is-valid']);
25437                     fg.addClass('is-invalid');
25438                 }
25439             });
25440             
25441             return;
25442         }
25443         
25444         if(!this.groupId){
25445             var fg = this.el.findParent('.form-group', false, true);
25446             if (Roo.bootstrap.version == 3) {
25447                 fg.removeClass([_this.invalidClass, _this.validClass]);
25448                 fg.addClass(_this.invalidClass);
25449             } else {
25450                 fg.removeClass(['is-invalid', 'is-valid']);
25451                 fg.addClass('is-invalid');
25452             }
25453             return;
25454         }
25455         
25456         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25457         
25458         if(!group){
25459             return;
25460         }
25461         
25462         for(var i in group){
25463             var fg = group[i].el.findParent('.form-group', false, true);
25464             if (Roo.bootstrap.version == 3) {
25465                 fg.removeClass([_this.invalidClass, _this.validClass]);
25466                 fg.addClass(_this.invalidClass);
25467             } else {
25468                 fg.removeClass(['is-invalid', 'is-valid']);
25469                 fg.addClass('is-invalid');
25470             }
25471         }
25472         
25473     },
25474     
25475     clearInvalid : function()
25476     {
25477         Roo.bootstrap.form.Input.prototype.clearInvalid.call(this);
25478         
25479         // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
25480         
25481         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25482         
25483         if (label && label.iconEl) {
25484             label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
25485             label.iconEl.removeClass(['is-invalid', 'is-valid']);
25486         }
25487     },
25488     
25489     disable : function()
25490     {
25491         if(this.inputType != 'radio'){
25492             Roo.bootstrap.form.CheckBox.superclass.disable.call(this);
25493             return;
25494         }
25495         
25496         var _this = this;
25497         
25498         if(this.rendered){
25499             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25500                 _this.getActionEl().addClass(this.disabledClass);
25501                 e.dom.disabled = true;
25502             });
25503         }
25504         
25505         this.disabled = true;
25506         this.fireEvent("disable", this);
25507         return this;
25508     },
25509
25510     enable : function()
25511     {
25512         if(this.inputType != 'radio'){
25513             Roo.bootstrap.form.CheckBox.superclass.enable.call(this);
25514             return;
25515         }
25516         
25517         var _this = this;
25518         
25519         if(this.rendered){
25520             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25521                 _this.getActionEl().removeClass(this.disabledClass);
25522                 e.dom.disabled = false;
25523             });
25524         }
25525         
25526         this.disabled = false;
25527         this.fireEvent("enable", this);
25528         return this;
25529     },
25530     
25531     setBoxLabel : function(v)
25532     {
25533         this.boxLabel = v;
25534         
25535         if(this.rendered){
25536             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25537         }
25538     }
25539
25540 });
25541
25542 Roo.apply(Roo.bootstrap.form.CheckBox, {
25543     
25544     groups: {},
25545     
25546      /**
25547     * register a CheckBox Group
25548     * @param {Roo.bootstrap.form.CheckBox} the CheckBox to add
25549     */
25550     register : function(checkbox)
25551     {
25552         if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
25553             this.groups[checkbox.groupId] = {};
25554         }
25555         
25556         if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
25557             return;
25558         }
25559         
25560         this.groups[checkbox.groupId][checkbox.name] = checkbox;
25561         
25562     },
25563     /**
25564     * fetch a CheckBox Group based on the group ID
25565     * @param {string} the group ID
25566     * @returns {Roo.bootstrap.form.CheckBox} the CheckBox group
25567     */
25568     get: function(groupId) {
25569         if (typeof(this.groups[groupId]) == 'undefined') {
25570             return false;
25571         }
25572         
25573         return this.groups[groupId] ;
25574     }
25575     
25576     
25577 });
25578 /*
25579  * - LGPL
25580  *
25581  * RadioItem
25582  * 
25583  */
25584
25585 /**
25586  * @class Roo.bootstrap.form.Radio
25587  * @extends Roo.bootstrap.Component
25588  * Bootstrap Radio class
25589  * @cfg {String} boxLabel - the label associated
25590  * @cfg {String} value - the value of radio
25591  * 
25592  * @constructor
25593  * Create a new Radio
25594  * @param {Object} config The config object
25595  */
25596 Roo.bootstrap.form.Radio = function(config){
25597     Roo.bootstrap.form.Radio.superclass.constructor.call(this, config);
25598     
25599 };
25600
25601 Roo.extend(Roo.bootstrap.form.Radio, Roo.bootstrap.Component, {
25602     
25603     boxLabel : '',
25604     
25605     value : '',
25606     
25607     getAutoCreate : function()
25608     {
25609         var cfg = {
25610             tag : 'div',
25611             cls : 'form-group radio',
25612             cn : [
25613                 {
25614                     tag : 'label',
25615                     cls : 'box-label',
25616                     html : this.boxLabel
25617                 }
25618             ]
25619         };
25620         
25621         return cfg;
25622     },
25623     
25624     initEvents : function() 
25625     {
25626         this.parent().register(this);
25627         
25628         this.el.on('click', this.onClick, this);
25629         
25630     },
25631     
25632     onClick : function(e)
25633     {
25634         if(this.parent().fireEvent('click', this.parent(), this, e) !== false){
25635             this.setChecked(true);
25636         }
25637     },
25638     
25639     setChecked : function(state, suppressEvent)
25640     {
25641         this.parent().setValue(this.value, suppressEvent);
25642         
25643     },
25644     
25645     setBoxLabel : function(v)
25646     {
25647         this.boxLabel = v;
25648         
25649         if(this.rendered){
25650             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25651         }
25652     }
25653     
25654 });
25655  
25656
25657  /*
25658  * - LGPL
25659  *
25660  * Input
25661  * 
25662  */
25663
25664 /**
25665  * @class Roo.bootstrap.form.SecurePass
25666  * @extends Roo.bootstrap.form.Input
25667  * Bootstrap SecurePass class
25668  *
25669  * 
25670  * @constructor
25671  * Create a new SecurePass
25672  * @param {Object} config The config object
25673  */
25674  
25675 Roo.bootstrap.form.SecurePass = function (config) {
25676     // these go here, so the translation tool can replace them..
25677     this.errors = {
25678         PwdEmpty: "Please type a password, and then retype it to confirm.",
25679         PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25680         PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25681         PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25682         IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25683         FNInPwd: "Your password can't contain your first name. Please type a different password.",
25684         LNInPwd: "Your password can't contain your last name. Please type a different password.",
25685         TooWeak: "Your password is Too Weak."
25686     },
25687     this.meterLabel = "Password strength:";
25688     this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
25689     this.meterClass = [
25690         "roo-password-meter-tooweak", 
25691         "roo-password-meter-weak", 
25692         "roo-password-meter-medium", 
25693         "roo-password-meter-strong", 
25694         "roo-password-meter-grey"
25695     ];
25696     
25697     this.errors = {};
25698     
25699     Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config);
25700 }
25701
25702 Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, {
25703     /**
25704      * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
25705      * {
25706      *  PwdEmpty: "Please type a password, and then retype it to confirm.",
25707      *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25708      *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25709      *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25710      *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25711      *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
25712      *  LNInPwd: "Your password can't contain your last name. Please type a different password."
25713      * })
25714      */
25715     // private
25716     
25717     meterWidth: 300,
25718     errorMsg :'',    
25719     errors: false,
25720     imageRoot: '/',
25721     /**
25722      * @cfg {String/Object} Label for the strength meter (defaults to
25723      * 'Password strength:')
25724      */
25725     // private
25726     meterLabel: '',
25727     /**
25728      * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
25729      * ['Weak', 'Medium', 'Strong'])
25730      */
25731     // private    
25732     pwdStrengths: false,    
25733     // private
25734     strength: 0,
25735     // private
25736     _lastPwd: null,
25737     // private
25738     kCapitalLetter: 0,
25739     kSmallLetter: 1,
25740     kDigit: 2,
25741     kPunctuation: 3,
25742     
25743     insecure: false,
25744     // private
25745     initEvents: function ()
25746     {
25747         Roo.bootstrap.form.SecurePass.superclass.initEvents.call(this);
25748
25749         if (this.el.is('input[type=password]') && Roo.isSafari) {
25750             this.el.on('keydown', this.SafariOnKeyDown, this);
25751         }
25752
25753         this.el.on('keyup', this.checkStrength, this, {buffer: 50});
25754     },
25755     // private
25756     onRender: function (ct, position)
25757     {
25758         Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position);
25759         this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
25760         this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
25761
25762         this.trigger.createChild({
25763                    cn: [
25764                     {
25765                     //id: 'PwdMeter',
25766                     tag: 'div',
25767                     cls: 'roo-password-meter-grey col-xs-12',
25768                     style: {
25769                         //width: 0,
25770                         //width: this.meterWidth + 'px'                                                
25771                         }
25772                     },
25773                     {                            
25774                          cls: 'roo-password-meter-text'                          
25775                     }
25776                 ]            
25777         });
25778
25779          
25780         if (this.hideTrigger) {
25781             this.trigger.setDisplayed(false);
25782         }
25783         this.setSize(this.width || '', this.height || '');
25784     },
25785     // private
25786     onDestroy: function ()
25787     {
25788         if (this.trigger) {
25789             this.trigger.removeAllListeners();
25790             this.trigger.remove();
25791         }
25792         if (this.wrap) {
25793             this.wrap.remove();
25794         }
25795         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
25796     },
25797     // private
25798     checkStrength: function ()
25799     {
25800         var pwd = this.inputEl().getValue();
25801         if (pwd == this._lastPwd) {
25802             return;
25803         }
25804
25805         var strength;
25806         if (this.ClientSideStrongPassword(pwd)) {
25807             strength = 3;
25808         } else if (this.ClientSideMediumPassword(pwd)) {
25809             strength = 2;
25810         } else if (this.ClientSideWeakPassword(pwd)) {
25811             strength = 1;
25812         } else {
25813             strength = 0;
25814         }
25815         
25816         Roo.log('strength1: ' + strength);
25817         
25818         //var pm = this.trigger.child('div/div/div').dom;
25819         var pm = this.trigger.child('div/div');
25820         pm.removeClass(this.meterClass);
25821         pm.addClass(this.meterClass[strength]);
25822                 
25823         
25824         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25825                 
25826         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25827         
25828         this._lastPwd = pwd;
25829     },
25830     reset: function ()
25831     {
25832         Roo.bootstrap.form.SecurePass.superclass.reset.call(this);
25833         
25834         this._lastPwd = '';
25835         
25836         var pm = this.trigger.child('div/div');
25837         pm.removeClass(this.meterClass);
25838         pm.addClass('roo-password-meter-grey');        
25839         
25840         
25841         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25842         
25843         pt.innerHTML = '';
25844         this.inputEl().dom.type='password';
25845     },
25846     // private
25847     validateValue: function (value)
25848     {
25849         if (!Roo.bootstrap.form.SecurePass.superclass.validateValue.call(this, value)) {
25850             return false;
25851         }
25852         if (value.length == 0) {
25853             if (this.allowBlank) {
25854                 this.clearInvalid();
25855                 return true;
25856             }
25857
25858             this.markInvalid(this.errors.PwdEmpty);
25859             this.errorMsg = this.errors.PwdEmpty;
25860             return false;
25861         }
25862         
25863         if(this.insecure){
25864             return true;
25865         }
25866         
25867         if (!value.match(/[\x21-\x7e]+/)) {
25868             this.markInvalid(this.errors.PwdBadChar);
25869             this.errorMsg = this.errors.PwdBadChar;
25870             return false;
25871         }
25872         if (value.length < 6) {
25873             this.markInvalid(this.errors.PwdShort);
25874             this.errorMsg = this.errors.PwdShort;
25875             return false;
25876         }
25877         if (value.length > 16) {
25878             this.markInvalid(this.errors.PwdLong);
25879             this.errorMsg = this.errors.PwdLong;
25880             return false;
25881         }
25882         var strength;
25883         if (this.ClientSideStrongPassword(value)) {
25884             strength = 3;
25885         } else if (this.ClientSideMediumPassword(value)) {
25886             strength = 2;
25887         } else if (this.ClientSideWeakPassword(value)) {
25888             strength = 1;
25889         } else {
25890             strength = 0;
25891         }
25892
25893         
25894         if (strength < 2) {
25895             //this.markInvalid(this.errors.TooWeak);
25896             this.errorMsg = this.errors.TooWeak;
25897             //return false;
25898         }
25899         
25900         
25901         console.log('strength2: ' + strength);
25902         
25903         //var pm = this.trigger.child('div/div/div').dom;
25904         
25905         var pm = this.trigger.child('div/div');
25906         pm.removeClass(this.meterClass);
25907         pm.addClass(this.meterClass[strength]);
25908                 
25909         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25910                 
25911         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25912         
25913         this.errorMsg = ''; 
25914         return true;
25915     },
25916     // private
25917     CharacterSetChecks: function (type)
25918     {
25919         this.type = type;
25920         this.fResult = false;
25921     },
25922     // private
25923     isctype: function (character, type)
25924     {
25925         switch (type) {  
25926             case this.kCapitalLetter:
25927                 if (character >= 'A' && character <= 'Z') {
25928                     return true;
25929                 }
25930                 break;
25931             
25932             case this.kSmallLetter:
25933                 if (character >= 'a' && character <= 'z') {
25934                     return true;
25935                 }
25936                 break;
25937             
25938             case this.kDigit:
25939                 if (character >= '0' && character <= '9') {
25940                     return true;
25941                 }
25942                 break;
25943             
25944             case this.kPunctuation:
25945                 if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
25946                     return true;
25947                 }
25948                 break;
25949             
25950             default:
25951                 return false;
25952         }
25953
25954     },
25955     // private
25956     IsLongEnough: function (pwd, size)
25957     {
25958         return !(pwd == null || isNaN(size) || pwd.length < size);
25959     },
25960     // private
25961     SpansEnoughCharacterSets: function (word, nb)
25962     {
25963         if (!this.IsLongEnough(word, nb))
25964         {
25965             return false;
25966         }
25967
25968         var characterSetChecks = new Array(
25969             new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
25970             new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation)
25971         );
25972         
25973         for (var index = 0; index < word.length; ++index) {
25974             for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
25975                 if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
25976                     characterSetChecks[nCharSet].fResult = true;
25977                     break;
25978                 }
25979             }
25980         }
25981
25982         var nCharSets = 0;
25983         for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
25984             if (characterSetChecks[nCharSet].fResult) {
25985                 ++nCharSets;
25986             }
25987         }
25988
25989         if (nCharSets < nb) {
25990             return false;
25991         }
25992         return true;
25993     },
25994     // private
25995     ClientSideStrongPassword: function (pwd)
25996     {
25997         return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
25998     },
25999     // private
26000     ClientSideMediumPassword: function (pwd)
26001     {
26002         return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
26003     },
26004     // private
26005     ClientSideWeakPassword: function (pwd)
26006     {
26007         return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
26008     }
26009           
26010 });Roo.rtf = {}; // namespace
26011 Roo.rtf.Hex = function(hex)
26012 {
26013     this.hexstr = hex;
26014 };
26015 Roo.rtf.Paragraph = function(opts)
26016 {
26017     this.content = []; ///??? is that used?
26018 };Roo.rtf.Span = function(opts)
26019 {
26020     this.value = opts.value;
26021 };
26022
26023 Roo.rtf.Group = function(parent)
26024 {
26025     // we dont want to acutally store parent - it will make debug a nightmare..
26026     this.content = [];
26027     this.cn  = [];
26028      
26029        
26030     
26031 };
26032
26033 Roo.rtf.Group.prototype = {
26034     ignorable : false,
26035     content: false,
26036     cn: false,
26037     addContent : function(node) {
26038         // could set styles...
26039         this.content.push(node);
26040     },
26041     addChild : function(cn)
26042     {
26043         this.cn.push(cn);
26044     },
26045     // only for images really...
26046     toDataURL : function()
26047     {
26048         var mimetype = false;
26049         switch(true) {
26050             case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
26051                 mimetype = "image/png";
26052                 break;
26053              case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
26054                 mimetype = "image/jpeg";
26055                 break;
26056             default :
26057                 return 'about:blank'; // ?? error?
26058         }
26059         
26060         
26061         var hexstring = this.content[this.content.length-1].value;
26062         
26063         return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
26064             return String.fromCharCode(parseInt(a, 16));
26065         }).join(""));
26066     }
26067     
26068 };
26069 // this looks like it's normally the {rtf{ .... }}
26070 Roo.rtf.Document = function()
26071 {
26072     // we dont want to acutally store parent - it will make debug a nightmare..
26073     this.rtlch  = [];
26074     this.content = [];
26075     this.cn = [];
26076     
26077 };
26078 Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
26079     addChild : function(cn)
26080     {
26081         this.cn.push(cn);
26082         switch(cn.type) {
26083             case 'rtlch': // most content seems to be inside this??
26084             case 'listtext':
26085             case 'shpinst':
26086                 this.rtlch.push(cn);
26087                 return;
26088             default:
26089                 this[cn.type] = cn;
26090         }
26091         
26092     },
26093     
26094     getElementsByType : function(type)
26095     {
26096         var ret =  [];
26097         this._getElementsByType(type, ret, this.cn, 'rtf');
26098         return ret;
26099     },
26100     _getElementsByType : function (type, ret, search_array, path)
26101     {
26102         search_array.forEach(function(n,i) {
26103             if (n.type == type) {
26104                 n.path = path + '/' + n.type + ':' + i;
26105                 ret.push(n);
26106             }
26107             if (n.cn.length > 0) {
26108                 this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
26109             }
26110         },this);
26111     }
26112     
26113 });
26114  
26115 Roo.rtf.Ctrl = function(opts)
26116 {
26117     this.value = opts.value;
26118     this.param = opts.param;
26119 };
26120 /**
26121  *
26122  *
26123  * based on this https://github.com/iarna/rtf-parser
26124  * it's really only designed to extract pict from pasted RTF 
26125  *
26126  * usage:
26127  *
26128  *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
26129  *  
26130  *
26131  */
26132
26133  
26134
26135
26136
26137 Roo.rtf.Parser = function(text) {
26138     //super({objectMode: true})
26139     this.text = '';
26140     this.parserState = this.parseText;
26141     
26142     // these are for interpeter...
26143     this.doc = {};
26144     ///this.parserState = this.parseTop
26145     this.groupStack = [];
26146     this.hexStore = [];
26147     this.doc = false;
26148     
26149     this.groups = []; // where we put the return.
26150     
26151     for (var ii = 0; ii < text.length; ++ii) {
26152         ++this.cpos;
26153         
26154         if (text[ii] === '\n') {
26155             ++this.row;
26156             this.col = 1;
26157         } else {
26158             ++this.col;
26159         }
26160         this.parserState(text[ii]);
26161     }
26162     
26163     
26164     
26165 };
26166 Roo.rtf.Parser.prototype = {
26167     text : '', // string being parsed..
26168     controlWord : '',
26169     controlWordParam :  '',
26170     hexChar : '',
26171     doc : false,
26172     group: false,
26173     groupStack : false,
26174     hexStore : false,
26175     
26176     
26177     cpos : 0, 
26178     row : 1, // reportin?
26179     col : 1, //
26180
26181      
26182     push : function (el)
26183     {
26184         var m = 'cmd'+ el.type;
26185         if (typeof(this[m]) == 'undefined') {
26186             Roo.log('invalid cmd:' + el.type);
26187             return;
26188         }
26189         this[m](el);
26190         //Roo.log(el);
26191     },
26192     flushHexStore : function()
26193     {
26194         if (this.hexStore.length < 1) {
26195             return;
26196         }
26197         var hexstr = this.hexStore.map(
26198             function(cmd) {
26199                 return cmd.value;
26200         }).join('');
26201         
26202         this.group.addContent( new Roo.rtf.Hex( hexstr ));
26203               
26204             
26205         this.hexStore.splice(0)
26206         
26207     },
26208     
26209     cmdgroupstart : function()
26210     {
26211         this.flushHexStore();
26212         if (this.group) {
26213             this.groupStack.push(this.group);
26214         }
26215          // parent..
26216         if (this.doc === false) {
26217             this.group = this.doc = new Roo.rtf.Document();
26218             return;
26219             
26220         }
26221         this.group = new Roo.rtf.Group(this.group);
26222     },
26223     cmdignorable : function()
26224     {
26225         this.flushHexStore();
26226         this.group.ignorable = true;
26227     },
26228     cmdendparagraph : function()
26229     {
26230         this.flushHexStore();
26231         this.group.addContent(new Roo.rtf.Paragraph());
26232     },
26233     cmdgroupend : function ()
26234     {
26235         this.flushHexStore();
26236         var endingGroup = this.group;
26237         
26238         
26239         this.group = this.groupStack.pop();
26240         if (this.group) {
26241             this.group.addChild(endingGroup);
26242         }
26243         
26244         
26245         
26246         var doc = this.group || this.doc;
26247         //if (endingGroup instanceof FontTable) {
26248         //  doc.fonts = endingGroup.table
26249         //} else if (endingGroup instanceof ColorTable) {
26250         //  doc.colors = endingGroup.table
26251         //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
26252         if (endingGroup.ignorable === false) {
26253             //code
26254             this.groups.push(endingGroup);
26255            // Roo.log( endingGroup );
26256         }
26257             //Roo.each(endingGroup.content, function(item)) {
26258             //    doc.addContent(item);
26259             //}
26260             //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
26261         //}
26262     },
26263     cmdtext : function (cmd)
26264     {
26265         this.flushHexStore();
26266         if (!this.group) { // an RTF fragment, missing the {\rtf1 header
26267             //this.group = this.doc
26268             return;  // we really don't care about stray text...
26269         }
26270         this.group.addContent(new Roo.rtf.Span(cmd));
26271     },
26272     cmdcontrolword : function (cmd)
26273     {
26274         this.flushHexStore();
26275         if (!this.group.type) {
26276             this.group.type = cmd.value;
26277             return;
26278         }
26279         this.group.addContent(new Roo.rtf.Ctrl(cmd));
26280         // we actually don't care about ctrl words...
26281         return ;
26282         /*
26283         var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
26284         if (this[method]) {
26285             this[method](cmd.param)
26286         } else {
26287             if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
26288         }
26289         */
26290     },
26291     cmdhexchar : function(cmd) {
26292         this.hexStore.push(cmd);
26293     },
26294     cmderror : function(cmd) {
26295         throw cmd.value;
26296     },
26297     
26298     /*
26299       _flush (done) {
26300         if (this.text !== '\u0000') this.emitText()
26301         done()
26302       }
26303       */
26304       
26305       
26306     parseText : function(c)
26307     {
26308         if (c === '\\') {
26309             this.parserState = this.parseEscapes;
26310         } else if (c === '{') {
26311             this.emitStartGroup();
26312         } else if (c === '}') {
26313             this.emitEndGroup();
26314         } else if (c === '\x0A' || c === '\x0D') {
26315             // cr/lf are noise chars
26316         } else {
26317             this.text += c;
26318         }
26319     },
26320     
26321     parseEscapes: function (c)
26322     {
26323         if (c === '\\' || c === '{' || c === '}') {
26324             this.text += c;
26325             this.parserState = this.parseText;
26326         } else {
26327             this.parserState = this.parseControlSymbol;
26328             this.parseControlSymbol(c);
26329         }
26330     },
26331     parseControlSymbol: function(c)
26332     {
26333         if (c === '~') {
26334             this.text += '\u00a0'; // nbsp
26335             this.parserState = this.parseText
26336         } else if (c === '-') {
26337              this.text += '\u00ad'; // soft hyphen
26338         } else if (c === '_') {
26339             this.text += '\u2011'; // non-breaking hyphen
26340         } else if (c === '*') {
26341             this.emitIgnorable();
26342             this.parserState = this.parseText;
26343         } else if (c === "'") {
26344             this.parserState = this.parseHexChar;
26345         } else if (c === '|') { // formula cacter
26346             this.emitFormula();
26347             this.parserState = this.parseText;
26348         } else if (c === ':') { // subentry in an index entry
26349             this.emitIndexSubEntry();
26350             this.parserState = this.parseText;
26351         } else if (c === '\x0a') {
26352             this.emitEndParagraph();
26353             this.parserState = this.parseText;
26354         } else if (c === '\x0d') {
26355             this.emitEndParagraph();
26356             this.parserState = this.parseText;
26357         } else {
26358             this.parserState = this.parseControlWord;
26359             this.parseControlWord(c);
26360         }
26361     },
26362     parseHexChar: function (c)
26363     {
26364         if (/^[A-Fa-f0-9]$/.test(c)) {
26365             this.hexChar += c;
26366             if (this.hexChar.length >= 2) {
26367               this.emitHexChar();
26368               this.parserState = this.parseText;
26369             }
26370             return;
26371         }
26372         this.emitError("Invalid character \"" + c + "\" in hex literal.");
26373         this.parserState = this.parseText;
26374         
26375     },
26376     parseControlWord : function(c)
26377     {
26378         if (c === ' ') {
26379             this.emitControlWord();
26380             this.parserState = this.parseText;
26381         } else if (/^[-\d]$/.test(c)) {
26382             this.parserState = this.parseControlWordParam;
26383             this.controlWordParam += c;
26384         } else if (/^[A-Za-z]$/.test(c)) {
26385           this.controlWord += c;
26386         } else {
26387           this.emitControlWord();
26388           this.parserState = this.parseText;
26389           this.parseText(c);
26390         }
26391     },
26392     parseControlWordParam : function (c) {
26393         if (/^\d$/.test(c)) {
26394           this.controlWordParam += c;
26395         } else if (c === ' ') {
26396           this.emitControlWord();
26397           this.parserState = this.parseText;
26398         } else {
26399           this.emitControlWord();
26400           this.parserState = this.parseText;
26401           this.parseText(c);
26402         }
26403     },
26404     
26405     
26406     
26407     
26408     emitText : function () {
26409         if (this.text === '') {
26410             return;
26411         }
26412         this.push({
26413             type: 'text',
26414             value: this.text,
26415             pos: this.cpos,
26416             row: this.row,
26417             col: this.col
26418         });
26419         this.text = ''
26420     },
26421     emitControlWord : function ()
26422     {
26423         this.emitText();
26424         if (this.controlWord === '') {
26425             // do we want to track this - it seems just to cause problems.
26426             //this.emitError('empty control word');
26427         } else {
26428             this.push({
26429                   type: 'controlword',
26430                   value: this.controlWord,
26431                   param: this.controlWordParam !== '' && Number(this.controlWordParam),
26432                   pos: this.cpos,
26433                   row: this.row,
26434                   col: this.col
26435             });
26436         }
26437         this.controlWord = '';
26438         this.controlWordParam = '';
26439     },
26440     emitStartGroup : function ()
26441     {
26442         this.emitText();
26443         this.push({
26444             type: 'groupstart',
26445             pos: this.cpos,
26446             row: this.row,
26447             col: this.col
26448         });
26449     },
26450     emitEndGroup : function ()
26451     {
26452         this.emitText();
26453         this.push({
26454             type: 'groupend',
26455             pos: this.cpos,
26456             row: this.row,
26457             col: this.col
26458         });
26459     },
26460     emitIgnorable : function ()
26461     {
26462         this.emitText();
26463         this.push({
26464             type: 'ignorable',
26465             pos: this.cpos,
26466             row: this.row,
26467             col: this.col
26468         });
26469     },
26470     emitHexChar : function ()
26471     {
26472         this.emitText();
26473         this.push({
26474             type: 'hexchar',
26475             value: this.hexChar,
26476             pos: this.cpos,
26477             row: this.row,
26478             col: this.col
26479         });
26480         this.hexChar = ''
26481     },
26482     emitError : function (message)
26483     {
26484       this.emitText();
26485       this.push({
26486             type: 'error',
26487             value: message,
26488             row: this.row,
26489             col: this.col,
26490             char: this.cpos //,
26491             //stack: new Error().stack
26492         });
26493     },
26494     emitEndParagraph : function () {
26495         this.emitText();
26496         this.push({
26497             type: 'endparagraph',
26498             pos: this.cpos,
26499             row: this.row,
26500             col: this.col
26501         });
26502     }
26503      
26504 } ; 
26505 /**
26506  * @class Roo.htmleditor.Filter
26507  * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
26508  * @cfg {DomElement} node The node to iterate and filter
26509  * @cfg {boolean|String|Array} tag Tags to replace 
26510  * @constructor
26511  * Create a new Filter.
26512  * @param {Object} config Configuration options
26513  */
26514
26515
26516
26517 Roo.htmleditor.Filter = function(cfg) {
26518     Roo.apply(this.cfg);
26519     // this does not actually call walk as it's really just a abstract class
26520 }
26521
26522
26523 Roo.htmleditor.Filter.prototype = {
26524     
26525     node: false,
26526     
26527     tag: false,
26528
26529     // overrride to do replace comments.
26530     replaceComment : false,
26531     
26532     // overrride to do replace or do stuff with tags..
26533     replaceTag : false,
26534     
26535     walk : function(dom)
26536     {
26537         Roo.each( Array.from(dom.childNodes), function( e ) {
26538             switch(true) {
26539                 
26540                 case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
26541                     this.replaceComment(e);
26542                     return;
26543                 
26544                 case e.nodeType != 1: //not a node.
26545                     return;
26546                 
26547                 case this.tag === true: // everything
26548                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
26549                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
26550                 case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
26551                 case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
26552                     if (this.replaceTag && false === this.replaceTag(e)) {
26553                         return;
26554                     }
26555                     if (e.hasChildNodes()) {
26556                         this.walk(e);
26557                     }
26558                     return;
26559                 
26560                 default:    // tags .. that do not match.
26561                     if (e.hasChildNodes()) {
26562                         this.walk(e);
26563                     }
26564             }
26565             
26566         }, this);
26567         
26568     },
26569     
26570     
26571     removeNodeKeepChildren : function( node)
26572     {
26573     
26574         ar = Array.from(node.childNodes);
26575         for (var i = 0; i < ar.length; i++) {
26576          
26577             node.removeChild(ar[i]);
26578             // what if we need to walk these???
26579             node.parentNode.insertBefore(ar[i], node);
26580            
26581         }
26582         node.parentNode.removeChild(node);
26583     }
26584 }; 
26585
26586 /**
26587  * @class Roo.htmleditor.FilterAttributes
26588  * clean attributes and  styles including http:// etc.. in attribute
26589  * @constructor
26590 * Run a new Attribute Filter
26591 * @param {Object} config Configuration options
26592  */
26593 Roo.htmleditor.FilterAttributes = function(cfg)
26594 {
26595     Roo.apply(this, cfg);
26596     this.attrib_black = this.attrib_black || [];
26597     this.attrib_white = this.attrib_white || [];
26598
26599     this.attrib_clean = this.attrib_clean || [];
26600     this.style_white = this.style_white || [];
26601     this.style_black = this.style_black || [];
26602     this.walk(cfg.node);
26603 }
26604
26605 Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
26606 {
26607     tag: true, // all tags
26608     
26609     attrib_black : false, // array
26610     attrib_clean : false,
26611     attrib_white : false,
26612
26613     style_white : false,
26614     style_black : false,
26615      
26616      
26617     replaceTag : function(node)
26618     {
26619         if (!node.attributes || !node.attributes.length) {
26620             return true;
26621         }
26622         
26623         for (var i = node.attributes.length-1; i > -1 ; i--) {
26624             var a = node.attributes[i];
26625             //console.log(a);
26626             if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
26627                 node.removeAttribute(a.name);
26628                 continue;
26629             }
26630             
26631             
26632             
26633             if (a.name.toLowerCase().substr(0,2)=='on')  {
26634                 node.removeAttribute(a.name);
26635                 continue;
26636             }
26637             
26638             
26639             if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
26640                 node.removeAttribute(a.name);
26641                 continue;
26642             }
26643             if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
26644                 this.cleanAttr(node,a.name,a.value); // fixme..
26645                 continue;
26646             }
26647             if (a.name == 'style') {
26648                 this.cleanStyle(node,a.name,a.value);
26649                 continue;
26650             }
26651             /// clean up MS crap..
26652             // tecnically this should be a list of valid class'es..
26653             
26654             
26655             if (a.name == 'class') {
26656                 if (a.value.match(/^Mso/)) {
26657                     node.removeAttribute('class');
26658                 }
26659                 
26660                 if (a.value.match(/^body$/)) {
26661                     node.removeAttribute('class');
26662                 }
26663                 continue;
26664             }
26665             
26666             
26667             // style cleanup!?
26668             // class cleanup?
26669             
26670         }
26671         return true; // clean children
26672     },
26673         
26674     cleanAttr: function(node, n,v)
26675     {
26676         
26677         if (v.match(/^\./) || v.match(/^\//)) {
26678             return;
26679         }
26680         if (v.match(/^(http|https):\/\//)
26681             || v.match(/^mailto:/) 
26682             || v.match(/^ftp:/)
26683             || v.match(/^data:/)
26684             ) {
26685             return;
26686         }
26687         if (v.match(/^#/)) {
26688             return;
26689         }
26690         if (v.match(/^\{/)) { // allow template editing.
26691             return;
26692         }
26693 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
26694         node.removeAttribute(n);
26695         
26696     },
26697     cleanStyle : function(node,  n,v)
26698     {
26699         if (v.match(/expression/)) { //XSS?? should we even bother..
26700             node.removeAttribute(n);
26701             return;
26702         }
26703         
26704         var parts = v.split(/;/);
26705         var clean = [];
26706         
26707         Roo.each(parts, function(p) {
26708             p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
26709             if (!p.length) {
26710                 return true;
26711             }
26712             var l = p.split(':').shift().replace(/\s+/g,'');
26713             l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
26714             
26715             if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
26716                 return true;
26717             }
26718             //Roo.log()
26719             // only allow 'c whitelisted system attributes'
26720             if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
26721                 return true;
26722             }
26723             
26724             
26725             clean.push(p);
26726             return true;
26727         },this);
26728         if (clean.length) { 
26729             node.setAttribute(n, clean.join(';'));
26730         } else {
26731             node.removeAttribute(n);
26732         }
26733         
26734     }
26735         
26736         
26737         
26738     
26739 });/**
26740  * @class Roo.htmleditor.FilterBlack
26741  * remove blacklisted elements.
26742  * @constructor
26743  * Run a new Blacklisted Filter
26744  * @param {Object} config Configuration options
26745  */
26746
26747 Roo.htmleditor.FilterBlack = function(cfg)
26748 {
26749     Roo.apply(this, cfg);
26750     this.walk(cfg.node);
26751 }
26752
26753 Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
26754 {
26755     tag : true, // all elements.
26756    
26757     replaceTag : function(n)
26758     {
26759         n.parentNode.removeChild(n);
26760     }
26761 });
26762 /**
26763  * @class Roo.htmleditor.FilterComment
26764  * remove comments.
26765  * @constructor
26766 * Run a new Comments Filter
26767 * @param {Object} config Configuration options
26768  */
26769 Roo.htmleditor.FilterComment = function(cfg)
26770 {
26771     this.walk(cfg.node);
26772 }
26773
26774 Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
26775 {
26776   
26777     replaceComment : function(n)
26778     {
26779         n.parentNode.removeChild(n);
26780     }
26781 });/**
26782  * @class Roo.htmleditor.FilterKeepChildren
26783  * remove tags but keep children
26784  * @constructor
26785  * Run a new Keep Children Filter
26786  * @param {Object} config Configuration options
26787  */
26788
26789 Roo.htmleditor.FilterKeepChildren = function(cfg)
26790 {
26791     Roo.apply(this, cfg);
26792     if (this.tag === false) {
26793         return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
26794     }
26795     // hacky?
26796     if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
26797         this.cleanNamespace = true;
26798     }
26799         
26800     this.walk(cfg.node);
26801 }
26802
26803 Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
26804 {
26805     cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
26806   
26807     replaceTag : function(node)
26808     {
26809         // walk children...
26810         //Roo.log(node.tagName);
26811         var ar = Array.from(node.childNodes);
26812         //remove first..
26813         
26814         for (var i = 0; i < ar.length; i++) {
26815             var e = ar[i];
26816             if (e.nodeType == 1) {
26817                 if (
26818                     (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
26819                     || // array and it matches
26820                     (typeof(this.tag) == 'string' && this.tag == e.tagName)
26821                     ||
26822                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
26823                     ||
26824                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
26825                 ) {
26826                     this.replaceTag(ar[i]); // child is blacklisted as well...
26827                     continue;
26828                 }
26829             }
26830         }  
26831         ar = Array.from(node.childNodes);
26832         for (var i = 0; i < ar.length; i++) {
26833          
26834             node.removeChild(ar[i]);
26835             // what if we need to walk these???
26836             node.parentNode.insertBefore(ar[i], node);
26837             if (this.tag !== false) {
26838                 this.walk(ar[i]);
26839                 
26840             }
26841         }
26842         //Roo.log("REMOVE:" + node.tagName);
26843         node.parentNode.removeChild(node);
26844         return false; // don't walk children
26845         
26846         
26847     }
26848 });/**
26849  * @class Roo.htmleditor.FilterParagraph
26850  * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
26851  * like on 'push' to remove the <p> tags and replace them with line breaks.
26852  * @constructor
26853  * Run a new Paragraph Filter
26854  * @param {Object} config Configuration options
26855  */
26856
26857 Roo.htmleditor.FilterParagraph = function(cfg)
26858 {
26859     // no need to apply config.
26860     this.walk(cfg.node);
26861 }
26862
26863 Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
26864 {
26865     
26866      
26867     tag : 'P',
26868     
26869      
26870     replaceTag : function(node)
26871     {
26872         
26873         if (node.childNodes.length == 1 &&
26874             node.childNodes[0].nodeType == 3 &&
26875             node.childNodes[0].textContent.trim().length < 1
26876             ) {
26877             // remove and replace with '<BR>';
26878             node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
26879             return false; // no need to walk..
26880         }
26881         var ar = Array.from(node.childNodes);
26882         for (var i = 0; i < ar.length; i++) {
26883             node.removeChild(ar[i]);
26884             // what if we need to walk these???
26885             node.parentNode.insertBefore(ar[i], node);
26886         }
26887         // now what about this?
26888         // <p> &nbsp; </p>
26889         
26890         // double BR.
26891         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26892         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26893         node.parentNode.removeChild(node);
26894         
26895         return false;
26896
26897     }
26898     
26899 });/**
26900  * @class Roo.htmleditor.FilterSpan
26901  * filter span's with no attributes out..
26902  * @constructor
26903  * Run a new Span Filter
26904  * @param {Object} config Configuration options
26905  */
26906
26907 Roo.htmleditor.FilterSpan = function(cfg)
26908 {
26909     // no need to apply config.
26910     this.walk(cfg.node);
26911 }
26912
26913 Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
26914 {
26915      
26916     tag : 'SPAN',
26917      
26918  
26919     replaceTag : function(node)
26920     {
26921         if (node.attributes && node.attributes.length > 0) {
26922             return true; // walk if there are any.
26923         }
26924         Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
26925         return false;
26926      
26927     }
26928     
26929 });/**
26930  * @class Roo.htmleditor.FilterTableWidth
26931   try and remove table width data - as that frequently messes up other stuff.
26932  * 
26933  *      was cleanTableWidths.
26934  *
26935  * Quite often pasting from word etc.. results in tables with column and widths.
26936  * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
26937  *
26938  * @constructor
26939  * Run a new Table Filter
26940  * @param {Object} config Configuration options
26941  */
26942
26943 Roo.htmleditor.FilterTableWidth = function(cfg)
26944 {
26945     // no need to apply config.
26946     this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
26947     this.walk(cfg.node);
26948 }
26949
26950 Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
26951 {
26952      
26953      
26954     
26955     replaceTag: function(node) {
26956         
26957         
26958       
26959         if (node.hasAttribute('width')) {
26960             node.removeAttribute('width');
26961         }
26962         
26963          
26964         if (node.hasAttribute("style")) {
26965             // pretty basic...
26966             
26967             var styles = node.getAttribute("style").split(";");
26968             var nstyle = [];
26969             Roo.each(styles, function(s) {
26970                 if (!s.match(/:/)) {
26971                     return;
26972                 }
26973                 var kv = s.split(":");
26974                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
26975                     return;
26976                 }
26977                 // what ever is left... we allow.
26978                 nstyle.push(s);
26979             });
26980             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
26981             if (!nstyle.length) {
26982                 node.removeAttribute('style');
26983             }
26984         }
26985         
26986         return true; // continue doing children..
26987     }
26988 });/**
26989  * @class Roo.htmleditor.FilterWord
26990  * try and clean up all the mess that Word generates.
26991  * 
26992  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
26993  
26994  * @constructor
26995  * Run a new Span Filter
26996  * @param {Object} config Configuration options
26997  */
26998
26999 Roo.htmleditor.FilterWord = function(cfg)
27000 {
27001     // no need to apply config.
27002     this.replaceDocBullets(cfg.node);
27003     
27004     this.replaceAname(cfg.node);
27005     // this is disabled as the removal is done by other filters;
27006    // this.walk(cfg.node);
27007     this.replaceImageTable(cfg.node);
27008     
27009 }
27010
27011 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
27012 {
27013     tag: true,
27014      
27015     
27016     /**
27017      * Clean up MS wordisms...
27018      */
27019     replaceTag : function(node)
27020     {
27021          
27022         // no idea what this does - span with text, replaceds with just text.
27023         if(
27024                 node.nodeName == 'SPAN' &&
27025                 !node.hasAttributes() &&
27026                 node.childNodes.length == 1 &&
27027                 node.firstChild.nodeName == "#text"  
27028         ) {
27029             var textNode = node.firstChild;
27030             node.removeChild(textNode);
27031             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
27032                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
27033             }
27034             node.parentNode.insertBefore(textNode, node);
27035             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
27036                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
27037             }
27038             
27039             node.parentNode.removeChild(node);
27040             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
27041         }
27042         
27043    
27044         
27045         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
27046             node.parentNode.removeChild(node);
27047             return false; // dont do chidlren
27048         }
27049         //Roo.log(node.tagName);
27050         // remove - but keep children..
27051         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
27052             //Roo.log('-- removed');
27053             while (node.childNodes.length) {
27054                 var cn = node.childNodes[0];
27055                 node.removeChild(cn);
27056                 node.parentNode.insertBefore(cn, node);
27057                 // move node to parent - and clean it..
27058                 if (cn.nodeType == 1) {
27059                     this.replaceTag(cn);
27060                 }
27061                 
27062             }
27063             node.parentNode.removeChild(node);
27064             /// no need to iterate chidlren = it's got none..
27065             //this.iterateChildren(node, this.cleanWord);
27066             return false; // no need to iterate children.
27067         }
27068         // clean styles
27069         if (node.className.length) {
27070             
27071             var cn = node.className.split(/\W+/);
27072             var cna = [];
27073             Roo.each(cn, function(cls) {
27074                 if (cls.match(/Mso[a-zA-Z]+/)) {
27075                     return;
27076                 }
27077                 cna.push(cls);
27078             });
27079             node.className = cna.length ? cna.join(' ') : '';
27080             if (!cna.length) {
27081                 node.removeAttribute("class");
27082             }
27083         }
27084         
27085         if (node.hasAttribute("lang")) {
27086             node.removeAttribute("lang");
27087         }
27088         
27089         if (node.hasAttribute("style")) {
27090             
27091             var styles = node.getAttribute("style").split(";");
27092             var nstyle = [];
27093             Roo.each(styles, function(s) {
27094                 if (!s.match(/:/)) {
27095                     return;
27096                 }
27097                 var kv = s.split(":");
27098                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
27099                     return;
27100                 }
27101                 // what ever is left... we allow.
27102                 nstyle.push(s);
27103             });
27104             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
27105             if (!nstyle.length) {
27106                 node.removeAttribute('style');
27107             }
27108         }
27109         return true; // do children
27110         
27111         
27112         
27113     },
27114     
27115     styleToObject: function(node)
27116     {
27117         var styles = (node.getAttribute("style") || '').split(";");
27118         var ret = {};
27119         Roo.each(styles, function(s) {
27120             if (!s.match(/:/)) {
27121                 return;
27122             }
27123             var kv = s.split(":");
27124              
27125             // what ever is left... we allow.
27126             ret[kv[0].trim()] = kv[1];
27127         });
27128         return ret;
27129     },
27130     
27131     
27132     replaceAname : function (doc)
27133     {
27134         // replace all the a/name without..
27135         var aa = Array.from(doc.getElementsByTagName('a'));
27136         for (var i = 0; i  < aa.length; i++) {
27137             var a = aa[i];
27138             if (a.hasAttribute("name")) {
27139                 a.removeAttribute("name");
27140             }
27141             if (a.hasAttribute("href")) {
27142                 continue;
27143             }
27144             // reparent children.
27145             this.removeNodeKeepChildren(a);
27146             
27147         }
27148         
27149         
27150         
27151     },
27152
27153     
27154     
27155     replaceDocBullets : function(doc)
27156     {
27157         // this is a bit odd - but it appears some indents use ql-indent-1
27158          //Roo.log(doc.innerHTML);
27159         
27160         var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
27161         for( var i = 0; i < listpara.length; i ++) {
27162             listpara[i].className = "MsoListParagraph";
27163         }
27164         
27165         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
27166         for( var i = 0; i < listpara.length; i ++) {
27167             listpara[i].className = "MsoListParagraph";
27168         }
27169         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
27170         for( var i = 0; i < listpara.length; i ++) {
27171             listpara[i].className = "MsoListParagraph";
27172         }
27173         listpara =  Array.from(doc.getElementsByClassName('ql-indent-1'));
27174         for( var i = 0; i < listpara.length; i ++) {
27175             listpara[i].className = "MsoListParagraph";
27176         }
27177         
27178         // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
27179         var htwo =  Array.from(doc.getElementsByTagName('h2'));
27180         for( var i = 0; i < htwo.length; i ++) {
27181             if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
27182                 htwo[i].className = "MsoListParagraph";
27183             }
27184         }
27185         listpara =  Array.from(doc.getElementsByClassName('MsoNormal'));
27186         for( var i = 0; i < listpara.length; i ++) {
27187             if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
27188                 listpara[i].className = "MsoListParagraph";
27189             } else {
27190                 listpara[i].className = "MsoNormalx";
27191             }
27192         }
27193        
27194         listpara = doc.getElementsByClassName('MsoListParagraph');
27195         // Roo.log(doc.innerHTML);
27196         
27197         
27198         
27199         while(listpara.length) {
27200             
27201             this.replaceDocBullet(listpara.item(0));
27202         }
27203       
27204     },
27205     
27206      
27207     
27208     replaceDocBullet : function(p)
27209     {
27210         // gather all the siblings.
27211         var ns = p,
27212             parent = p.parentNode,
27213             doc = parent.ownerDocument,
27214             items = [];
27215          
27216         //Roo.log("Parsing: " + p.innerText)    ;
27217         var listtype = 'ul';   
27218         while (ns) {
27219             if (ns.nodeType != 1) {
27220                 ns = ns.nextSibling;
27221                 continue;
27222             }
27223             if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
27224                 //Roo.log("Missing para r q1indent - got:" + ns.className);
27225                 break;
27226             }
27227             var spans = ns.getElementsByTagName('span');
27228             
27229             if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
27230                 items.push(ns);
27231                 ns = ns.nextSibling;
27232                 has_list = true;
27233                 if (!spans.length) {
27234                     continue;
27235                 }
27236                 var ff = '';
27237                 var se = spans[0];
27238                 for (var i = 0; i < spans.length;i++) {
27239                     se = spans[i];
27240                     if (se.hasAttribute('style')  && se.hasAttribute('style') && se.style.fontFamily != '') {
27241                         ff = se.style.fontFamily;
27242                         break;
27243                     }
27244                 }
27245                  
27246                     
27247                 //Roo.log("got font family: " + ff);
27248                 if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
27249                     listtype = 'ol';
27250                 }
27251                 
27252                 continue;
27253             }
27254             //Roo.log("no mso-list?");
27255             
27256             var spans = ns.getElementsByTagName('span');
27257             if (!spans.length) {
27258                 break;
27259             }
27260             var has_list  = false;
27261             for(var i = 0; i < spans.length; i++) {
27262                 if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
27263                     has_list = true;
27264                     break;
27265                 }
27266             }
27267             if (!has_list) {
27268                 break;
27269             }
27270             items.push(ns);
27271             ns = ns.nextSibling;
27272             
27273             
27274         }
27275         if (!items.length) {
27276             ns.className = "";
27277             return;
27278         }
27279         
27280         var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
27281         parent.insertBefore(ul, p);
27282         var lvl = 0;
27283         var stack = [ ul ];
27284         var last_li = false;
27285         
27286         var margin_to_depth = {};
27287         max_margins = -1;
27288         
27289         items.forEach(function(n, ipos) {
27290             //Roo.log("got innertHMLT=" + n.innerHTML);
27291             
27292             var spans = n.getElementsByTagName('span');
27293             if (!spans.length) {
27294                 //Roo.log("No spans found");
27295                  
27296                 parent.removeChild(n);
27297                 
27298                 
27299                 return; // skip it...
27300             }
27301            
27302                 
27303             var num = 1;
27304             var style = {};
27305             for(var i = 0; i < spans.length; i++) {
27306             
27307                 style = this.styleToObject(spans[i]);
27308                 if (typeof(style['mso-list']) == 'undefined') {
27309                     continue;
27310                 }
27311                 if (listtype == 'ol') {
27312                    num = spans[i].innerText.replace(/[^0-9]+]/g,'')  * 1;
27313                 }
27314                 spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
27315                 break;
27316             }
27317             //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
27318             style = this.styleToObject(n); // mo-list is from the parent node.
27319             if (typeof(style['mso-list']) == 'undefined') {
27320                 //Roo.log("parent is missing level");
27321                   
27322                 parent.removeChild(n);
27323                  
27324                 return;
27325             }
27326             
27327             var margin = style['margin-left'];
27328             if (typeof(margin_to_depth[margin]) == 'undefined') {
27329                 max_margins++;
27330                 margin_to_depth[margin] = max_margins;
27331             }
27332             nlvl = margin_to_depth[margin] ;
27333              
27334             if (nlvl > lvl) {
27335                 //new indent
27336                 var nul = doc.createElement(listtype); // what about number lists...
27337                 if (!last_li) {
27338                     last_li = doc.createElement('li');
27339                     stack[lvl].appendChild(last_li);
27340                 }
27341                 last_li.appendChild(nul);
27342                 stack[nlvl] = nul;
27343                 
27344             }
27345             lvl = nlvl;
27346             
27347             // not starting at 1..
27348             if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
27349                 stack[nlvl].setAttribute("start", num);
27350             }
27351             
27352             var nli = stack[nlvl].appendChild(doc.createElement('li'));
27353             last_li = nli;
27354             nli.innerHTML = n.innerHTML;
27355             //Roo.log("innerHTML = " + n.innerHTML);
27356             parent.removeChild(n);
27357             
27358              
27359              
27360             
27361         },this);
27362         
27363         
27364         
27365         
27366     },
27367     
27368     replaceImageTable : function(doc)
27369     {
27370          /*
27371           <table cellpadding=0 cellspacing=0 align=left>
27372   <tr>
27373    <td width=423 height=0></td>
27374   </tr>
27375   <tr>
27376    <td></td>
27377    <td><img width=601 height=401
27378    src="file:///C:/Users/Alan/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg"
27379    v:shapes="Picture_x0020_2"></td>
27380   </tr>
27381  </table>
27382  */
27383         var imgs = Array.from(doc.getElementsByTagName('img'));
27384         Roo.each(imgs, function(img) {
27385             var td = img.parentNode;
27386             if (td.nodeName !=  'TD') {
27387                 return;
27388             }
27389             var tr = td.parentNode;
27390             if (tr.nodeName !=  'TR') {
27391                 return;
27392             }
27393             var tbody = tr.parentNode;
27394             if (tbody.nodeName !=  'TBODY') {
27395                 return;
27396             }
27397             var table = tbody.parentNode;
27398             if (table.nodeName !=  'TABLE') {
27399                 return;
27400             }
27401             // first row..
27402             
27403             if (table.getElementsByTagName('tr').length != 2) {
27404                 return;
27405             }
27406             if (table.getElementsByTagName('td').length != 3) {
27407                 return;
27408             }
27409             if (table.innerText.trim() != '') {
27410                 return;
27411             }
27412             var p = table.parentNode;
27413             img.parentNode.removeChild(img);
27414             p.insertBefore(img, table);
27415             p.removeChild(table);
27416             
27417             
27418             
27419         });
27420         
27421       
27422     }
27423     
27424 });
27425 /**
27426  * @class Roo.htmleditor.FilterStyleToTag
27427  * part of the word stuff... - certain 'styles' should be converted to tags.
27428  * eg.
27429  *   font-weight: bold -> bold
27430  *   ?? super / subscrit etc..
27431  * 
27432  * @constructor
27433 * Run a new style to tag filter.
27434 * @param {Object} config Configuration options
27435  */
27436 Roo.htmleditor.FilterStyleToTag = function(cfg)
27437 {
27438     
27439     this.tags = {
27440         B  : [ 'fontWeight' , 'bold'],
27441         I :  [ 'fontStyle' , 'italic'],
27442         //pre :  [ 'font-style' , 'italic'],
27443         // h1.. h6 ?? font-size?
27444         SUP : [ 'verticalAlign' , 'super' ],
27445         SUB : [ 'verticalAlign' , 'sub' ]
27446         
27447         
27448     };
27449     
27450     Roo.apply(this, cfg);
27451      
27452     
27453     this.walk(cfg.node);
27454     
27455     
27456     
27457 }
27458
27459
27460 Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
27461 {
27462     tag: true, // all tags
27463     
27464     tags : false,
27465     
27466     
27467     replaceTag : function(node)
27468     {
27469         
27470         
27471         if (node.getAttribute("style") === null) {
27472             return true;
27473         }
27474         var inject = [];
27475         for (var k in this.tags) {
27476             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
27477                 inject.push(k);
27478                 node.style.removeProperty(this.tags[k][0]);
27479             }
27480         }
27481         if (!inject.length) {
27482             return true; 
27483         }
27484         var cn = Array.from(node.childNodes);
27485         var nn = node;
27486         Roo.each(inject, function(t) {
27487             var nc = node.ownerDocument.createElement(t);
27488             nn.appendChild(nc);
27489             nn = nc;
27490         });
27491         for(var i = 0;i < cn.length;cn++) {
27492             node.removeChild(cn[i]);
27493             nn.appendChild(cn[i]);
27494         }
27495         return true /// iterate thru
27496     }
27497     
27498 })/**
27499  * @class Roo.htmleditor.FilterLongBr
27500  * BR/BR/BR - keep a maximum of 2...
27501  * @constructor
27502  * Run a new Long BR Filter
27503  * @param {Object} config Configuration options
27504  */
27505
27506 Roo.htmleditor.FilterLongBr = function(cfg)
27507 {
27508     // no need to apply config.
27509     this.walk(cfg.node);
27510 }
27511
27512 Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
27513 {
27514     
27515      
27516     tag : 'BR',
27517     
27518      
27519     replaceTag : function(node)
27520     {
27521         
27522         var ps = node.nextSibling;
27523         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
27524             ps = ps.nextSibling;
27525         }
27526         
27527         if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
27528             node.parentNode.removeChild(node); // remove last BR inside one fo these tags
27529             return false;
27530         }
27531         
27532         if (!ps || ps.nodeType != 1) {
27533             return false;
27534         }
27535         
27536         if (!ps || ps.tagName != 'BR') {
27537            
27538             return false;
27539         }
27540         
27541         
27542         
27543         
27544         
27545         if (!node.previousSibling) {
27546             return false;
27547         }
27548         var ps = node.previousSibling;
27549         
27550         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
27551             ps = ps.previousSibling;
27552         }
27553         if (!ps || ps.nodeType != 1) {
27554             return false;
27555         }
27556         // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
27557         if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
27558             return false;
27559         }
27560         
27561         node.parentNode.removeChild(node); // remove me...
27562         
27563         return false; // no need to do children
27564
27565     }
27566     
27567 }); 
27568
27569 /**
27570  * @class Roo.htmleditor.FilterBlock
27571  * removes id / data-block and contenteditable that are associated with blocks
27572  * usage should be done on a cloned copy of the dom
27573  * @constructor
27574 * Run a new Attribute Filter { node : xxxx }}
27575 * @param {Object} config Configuration options
27576  */
27577 Roo.htmleditor.FilterBlock = function(cfg)
27578 {
27579     Roo.apply(this, cfg);
27580     var qa = cfg.node.querySelectorAll;
27581     this.removeAttributes('data-block');
27582     this.removeAttributes('contenteditable');
27583     this.removeAttributes('id');
27584     
27585 }
27586
27587 Roo.apply(Roo.htmleditor.FilterBlock.prototype,
27588 {
27589     node: true, // all tags
27590      
27591      
27592     removeAttributes : function(attr)
27593     {
27594         var ar = this.node.querySelectorAll('*[' + attr + ']');
27595         for (var i =0;i<ar.length;i++) {
27596             ar[i].removeAttribute(attr);
27597         }
27598     }
27599         
27600         
27601         
27602     
27603 });
27604 /***
27605  * This is based loosely on tinymce 
27606  * @class Roo.htmleditor.TidySerializer
27607  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
27608  * @constructor
27609  * @method Serializer
27610  * @param {Object} settings Name/value settings object.
27611  */
27612
27613
27614 Roo.htmleditor.TidySerializer = function(settings)
27615 {
27616     Roo.apply(this, settings);
27617     
27618     this.writer = new Roo.htmleditor.TidyWriter(settings);
27619     
27620     
27621
27622 };
27623 Roo.htmleditor.TidySerializer.prototype = {
27624     
27625     /**
27626      * @param {boolean} inner do the inner of the node.
27627      */
27628     inner : false,
27629     
27630     writer : false,
27631     
27632     /**
27633     * Serializes the specified node into a string.
27634     *
27635     * @example
27636     * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
27637     * @method serialize
27638     * @param {DomElement} node Node instance to serialize.
27639     * @return {String} String with HTML based on DOM tree.
27640     */
27641     serialize : function(node) {
27642         
27643         // = settings.validate;
27644         var writer = this.writer;
27645         var self  = this;
27646         this.handlers = {
27647             // #text
27648             3: function(node) {
27649                 
27650                 writer.text(node.nodeValue, node);
27651             },
27652             // #comment
27653             8: function(node) {
27654                 writer.comment(node.nodeValue);
27655             },
27656             // Processing instruction
27657             7: function(node) {
27658                 writer.pi(node.name, node.nodeValue);
27659             },
27660             // Doctype
27661             10: function(node) {
27662                 writer.doctype(node.nodeValue);
27663             },
27664             // CDATA
27665             4: function(node) {
27666                 writer.cdata(node.nodeValue);
27667             },
27668             // Document fragment
27669             11: function(node) {
27670                 node = node.firstChild;
27671                 if (!node) {
27672                     return;
27673                 }
27674                 while(node) {
27675                     self.walk(node);
27676                     node = node.nextSibling
27677                 }
27678             }
27679         };
27680         writer.reset();
27681         1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
27682         return writer.getContent();
27683     },
27684
27685     walk: function(node)
27686     {
27687         var attrName, attrValue, sortedAttrs, i, l, elementRule,
27688             handler = this.handlers[node.nodeType];
27689             
27690         if (handler) {
27691             handler(node);
27692             return;
27693         }
27694     
27695         var name = node.nodeName;
27696         var isEmpty = node.childNodes.length < 1;
27697       
27698         var writer = this.writer;
27699         var attrs = node.attributes;
27700         // Sort attributes
27701         
27702         writer.start(node.nodeName, attrs, isEmpty, node);
27703         if (isEmpty) {
27704             return;
27705         }
27706         node = node.firstChild;
27707         if (!node) {
27708             writer.end(name);
27709             return;
27710         }
27711         while (node) {
27712             this.walk(node);
27713             node = node.nextSibling;
27714         }
27715         writer.end(name);
27716         
27717     
27718     }
27719     // Serialize element and treat all non elements as fragments
27720    
27721 }; 
27722
27723 /***
27724  * This is based loosely on tinymce 
27725  * @class Roo.htmleditor.TidyWriter
27726  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
27727  *
27728  * Known issues?
27729  * - not tested much with 'PRE' formated elements.
27730  * 
27731  *
27732  *
27733  */
27734
27735 Roo.htmleditor.TidyWriter = function(settings)
27736 {
27737     
27738     // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
27739     Roo.apply(this, settings);
27740     this.html = [];
27741     this.state = [];
27742      
27743     this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
27744   
27745 }
27746 Roo.htmleditor.TidyWriter.prototype = {
27747
27748  
27749     state : false,
27750     
27751     indent :  '  ',
27752     
27753     // part of state...
27754     indentstr : '',
27755     in_pre: false,
27756     in_inline : false,
27757     last_inline : false,
27758     encode : false,
27759      
27760     
27761             /**
27762     * Writes the a start element such as <p id="a">.
27763     *
27764     * @method start
27765     * @param {String} name Name of the element.
27766     * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
27767     * @param {Boolean} empty Optional empty state if the tag should end like <br />.
27768     */
27769     start: function(name, attrs, empty, node)
27770     {
27771         var i, l, attr, value;
27772         
27773         // there are some situations where adding line break && indentation will not work. will not work.
27774         // <span / b / i ... formating?
27775         
27776         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
27777         var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
27778         
27779         var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
27780         
27781         var add_lb = name == 'BR' ? false : in_inline;
27782         
27783         if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
27784             i_inline = false;
27785         }
27786
27787         var indentstr =  this.indentstr;
27788         
27789         // e_inline = elements that can be inline, but still allow \n before and after?
27790         // only 'BR' ??? any others?
27791         
27792         // ADD LINE BEFORE tage
27793         if (!this.in_pre) {
27794             if (in_inline) {
27795                 //code
27796                 if (name == 'BR') {
27797                     this.addLine();
27798                 } else if (this.lastElementEndsWS()) {
27799                     this.addLine();
27800                 } else{
27801                     // otherwise - no new line. (and dont indent.)
27802                     indentstr = '';
27803                 }
27804                 
27805             } else {
27806                 this.addLine();
27807             }
27808         } else {
27809             indentstr = '';
27810         }
27811         
27812         this.html.push(indentstr + '<', name.toLowerCase());
27813         
27814         if (attrs) {
27815             for (i = 0, l = attrs.length; i < l; i++) {
27816                 attr = attrs[i];
27817                 this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
27818             }
27819         }
27820      
27821         if (empty) {
27822             if (is_short) {
27823                 this.html[this.html.length] = '/>';
27824             } else {
27825                 this.html[this.html.length] = '></' + name.toLowerCase() + '>';
27826             }
27827             var e_inline = name == 'BR' ? false : this.in_inline;
27828             
27829             if (!e_inline && !this.in_pre) {
27830                 this.addLine();
27831             }
27832             return;
27833         
27834         }
27835         // not empty..
27836         this.html[this.html.length] = '>';
27837         
27838         // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
27839         /*
27840         if (!in_inline && !in_pre) {
27841             var cn = node.firstChild;
27842             while(cn) {
27843                 if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
27844                     in_inline = true
27845                     break;
27846                 }
27847                 cn = cn.nextSibling;
27848             }
27849              
27850         }
27851         */
27852         
27853         
27854         this.pushState({
27855             indentstr : in_pre   ? '' : (this.indentstr + this.indent),
27856             in_pre : in_pre,
27857             in_inline :  in_inline
27858         });
27859         // add a line after if we are not in a
27860         
27861         if (!in_inline && !in_pre) {
27862             this.addLine();
27863         }
27864         
27865             
27866          
27867         
27868     },
27869     
27870     lastElementEndsWS : function()
27871     {
27872         var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
27873         if (value === false) {
27874             return true;
27875         }
27876         return value.match(/\s+$/);
27877         
27878     },
27879     
27880     /**
27881      * Writes the a end element such as </p>.
27882      *
27883      * @method end
27884      * @param {String} name Name of the element.
27885      */
27886     end: function(name) {
27887         var value;
27888         this.popState();
27889         var indentstr = '';
27890         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
27891         
27892         if (!this.in_pre && !in_inline) {
27893             this.addLine();
27894             indentstr  = this.indentstr;
27895         }
27896         this.html.push(indentstr + '</', name.toLowerCase(), '>');
27897         this.last_inline = in_inline;
27898         
27899         // pop the indent state..
27900     },
27901     /**
27902      * Writes a text node.
27903      *
27904      * In pre - we should not mess with the contents.
27905      * 
27906      *
27907      * @method text
27908      * @param {String} text String to write out.
27909      * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
27910      */
27911     text: function(in_text, node)
27912     {
27913         // if not in whitespace critical
27914         if (in_text.length < 1) {
27915             return;
27916         }
27917         var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
27918         
27919         if (this.in_pre) {
27920             this.html[this.html.length] =  text;
27921             return;   
27922         }
27923         
27924         if (this.in_inline) {
27925             text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
27926             if (text != ' ') {
27927                 text = text.replace(/\s+/,' ');  // all white space to single white space
27928                 
27929                     
27930                 // if next tag is '<BR>', then we can trim right..
27931                 if (node.nextSibling &&
27932                     node.nextSibling.nodeType == 1 &&
27933                     node.nextSibling.nodeName == 'BR' )
27934                 {
27935                     text = text.replace(/\s+$/g,'');
27936                 }
27937                 // if previous tag was a BR, we can also trim..
27938                 if (node.previousSibling &&
27939                     node.previousSibling.nodeType == 1 &&
27940                     node.previousSibling.nodeName == 'BR' )
27941                 {
27942                     text = this.indentstr +  text.replace(/^\s+/g,'');
27943                 }
27944                 if (text.match(/\n/)) {
27945                     text = text.replace(
27946                         /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
27947                     );
27948                     // remoeve the last whitespace / line break.
27949                     text = text.replace(/\n\s+$/,'');
27950                 }
27951                 // repace long lines
27952                 
27953             }
27954              
27955             this.html[this.html.length] =  text;
27956             return;   
27957         }
27958         // see if previous element was a inline element.
27959         var indentstr = this.indentstr;
27960    
27961         text = text.replace(/\s+/g," "); // all whitespace into single white space.
27962         
27963         // should trim left?
27964         if (node.previousSibling &&
27965             node.previousSibling.nodeType == 1 &&
27966             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
27967         {
27968             indentstr = '';
27969             
27970         } else {
27971             this.addLine();
27972             text = text.replace(/^\s+/,''); // trim left
27973           
27974         }
27975         // should trim right?
27976         if (node.nextSibling &&
27977             node.nextSibling.nodeType == 1 &&
27978             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
27979         {
27980           // noop
27981             
27982         }  else {
27983             text = text.replace(/\s+$/,''); // trim right
27984         }
27985          
27986               
27987         
27988         
27989         
27990         if (text.length < 1) {
27991             return;
27992         }
27993         if (!text.match(/\n/)) {
27994             this.html.push(indentstr + text);
27995             return;
27996         }
27997         
27998         text = this.indentstr + text.replace(
27999             /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
28000         );
28001         // remoeve the last whitespace / line break.
28002         text = text.replace(/\s+$/,''); 
28003         
28004         this.html.push(text);
28005         
28006         // split and indent..
28007         
28008         
28009     },
28010     /**
28011      * Writes a cdata node such as <![CDATA[data]]>.
28012      *
28013      * @method cdata
28014      * @param {String} text String to write out inside the cdata.
28015      */
28016     cdata: function(text) {
28017         this.html.push('<![CDATA[', text, ']]>');
28018     },
28019     /**
28020     * Writes a comment node such as <!-- Comment -->.
28021     *
28022     * @method cdata
28023     * @param {String} text String to write out inside the comment.
28024     */
28025    comment: function(text) {
28026        this.html.push('<!--', text, '-->');
28027    },
28028     /**
28029      * Writes a PI node such as <?xml attr="value" ?>.
28030      *
28031      * @method pi
28032      * @param {String} name Name of the pi.
28033      * @param {String} text String to write out inside the pi.
28034      */
28035     pi: function(name, text) {
28036         text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
28037         this.indent != '' && this.html.push('\n');
28038     },
28039     /**
28040      * Writes a doctype node such as <!DOCTYPE data>.
28041      *
28042      * @method doctype
28043      * @param {String} text String to write out inside the doctype.
28044      */
28045     doctype: function(text) {
28046         this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
28047     },
28048     /**
28049      * Resets the internal buffer if one wants to reuse the writer.
28050      *
28051      * @method reset
28052      */
28053     reset: function() {
28054         this.html.length = 0;
28055         this.state = [];
28056         this.pushState({
28057             indentstr : '',
28058             in_pre : false, 
28059             in_inline : false
28060         })
28061     },
28062     /**
28063      * Returns the contents that got serialized.
28064      *
28065      * @method getContent
28066      * @return {String} HTML contents that got written down.
28067      */
28068     getContent: function() {
28069         return this.html.join('').replace(/\n$/, '');
28070     },
28071     
28072     pushState : function(cfg)
28073     {
28074         this.state.push(cfg);
28075         Roo.apply(this, cfg);
28076     },
28077     
28078     popState : function()
28079     {
28080         if (this.state.length < 1) {
28081             return; // nothing to push
28082         }
28083         var cfg = {
28084             in_pre: false,
28085             indentstr : ''
28086         };
28087         this.state.pop();
28088         if (this.state.length > 0) {
28089             cfg = this.state[this.state.length-1]; 
28090         }
28091         Roo.apply(this, cfg);
28092     },
28093     
28094     addLine: function()
28095     {
28096         if (this.html.length < 1) {
28097             return;
28098         }
28099         
28100         
28101         var value = this.html[this.html.length - 1];
28102         if (value.length > 0 && '\n' !== value) {
28103             this.html.push('\n');
28104         }
28105     }
28106     
28107     
28108 //'pre script noscript style textarea video audio iframe object code'
28109 // shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
28110 // inline 
28111 };
28112
28113 Roo.htmleditor.TidyWriter.inline_elements = [
28114         'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
28115         'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
28116 ];
28117 Roo.htmleditor.TidyWriter.shortend_elements = [
28118     'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
28119     'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
28120 ];
28121
28122 Roo.htmleditor.TidyWriter.whitespace_elements = [
28123     'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
28124 ];/***
28125  * This is based loosely on tinymce 
28126  * @class Roo.htmleditor.TidyEntities
28127  * @static
28128  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
28129  *
28130  * Not 100% sure this is actually used or needed.
28131  */
28132
28133 Roo.htmleditor.TidyEntities = {
28134     
28135     /**
28136      * initialize data..
28137      */
28138     init : function (){
28139      
28140         this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
28141        
28142     },
28143
28144
28145     buildEntitiesLookup: function(items, radix) {
28146         var i, chr, entity, lookup = {};
28147         if (!items) {
28148             return {};
28149         }
28150         items = typeof(items) == 'string' ? items.split(',') : items;
28151         radix = radix || 10;
28152         // Build entities lookup table
28153         for (i = 0; i < items.length; i += 2) {
28154             chr = String.fromCharCode(parseInt(items[i], radix));
28155             // Only add non base entities
28156             if (!this.baseEntities[chr]) {
28157                 entity = '&' + items[i + 1] + ';';
28158                 lookup[chr] = entity;
28159                 lookup[entity] = chr;
28160             }
28161         }
28162         return lookup;
28163         
28164     },
28165     
28166     asciiMap : {
28167             128: '€',
28168             130: '‚',
28169             131: 'ƒ',
28170             132: '„',
28171             133: '…',
28172             134: '†',
28173             135: '‡',
28174             136: 'ˆ',
28175             137: '‰',
28176             138: 'Š',
28177             139: '‹',
28178             140: 'Œ',
28179             142: 'Ž',
28180             145: '‘',
28181             146: '’',
28182             147: '“',
28183             148: '”',
28184             149: '•',
28185             150: '–',
28186             151: '—',
28187             152: '˜',
28188             153: '™',
28189             154: 'š',
28190             155: '›',
28191             156: 'œ',
28192             158: 'ž',
28193             159: 'Ÿ'
28194     },
28195     // Raw entities
28196     baseEntities : {
28197         '"': '&quot;',
28198         // Needs to be escaped since the YUI compressor would otherwise break the code
28199         '\'': '&#39;',
28200         '<': '&lt;',
28201         '>': '&gt;',
28202         '&': '&amp;',
28203         '`': '&#96;'
28204     },
28205     // Reverse lookup table for raw entities
28206     reverseEntities : {
28207         '&lt;': '<',
28208         '&gt;': '>',
28209         '&amp;': '&',
28210         '&quot;': '"',
28211         '&apos;': '\''
28212     },
28213     
28214     attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
28215     textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
28216     rawCharsRegExp : /[<>&\"\']/g,
28217     entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
28218     namedEntities  : false,
28219     namedEntitiesData : [ 
28220         '50',
28221         'nbsp',
28222         '51',
28223         'iexcl',
28224         '52',
28225         'cent',
28226         '53',
28227         'pound',
28228         '54',
28229         'curren',
28230         '55',
28231         'yen',
28232         '56',
28233         'brvbar',
28234         '57',
28235         'sect',
28236         '58',
28237         'uml',
28238         '59',
28239         'copy',
28240         '5a',
28241         'ordf',
28242         '5b',
28243         'laquo',
28244         '5c',
28245         'not',
28246         '5d',
28247         'shy',
28248         '5e',
28249         'reg',
28250         '5f',
28251         'macr',
28252         '5g',
28253         'deg',
28254         '5h',
28255         'plusmn',
28256         '5i',
28257         'sup2',
28258         '5j',
28259         'sup3',
28260         '5k',
28261         'acute',
28262         '5l',
28263         'micro',
28264         '5m',
28265         'para',
28266         '5n',
28267         'middot',
28268         '5o',
28269         'cedil',
28270         '5p',
28271         'sup1',
28272         '5q',
28273         'ordm',
28274         '5r',
28275         'raquo',
28276         '5s',
28277         'frac14',
28278         '5t',
28279         'frac12',
28280         '5u',
28281         'frac34',
28282         '5v',
28283         'iquest',
28284         '60',
28285         'Agrave',
28286         '61',
28287         'Aacute',
28288         '62',
28289         'Acirc',
28290         '63',
28291         'Atilde',
28292         '64',
28293         'Auml',
28294         '65',
28295         'Aring',
28296         '66',
28297         'AElig',
28298         '67',
28299         'Ccedil',
28300         '68',
28301         'Egrave',
28302         '69',
28303         'Eacute',
28304         '6a',
28305         'Ecirc',
28306         '6b',
28307         'Euml',
28308         '6c',
28309         'Igrave',
28310         '6d',
28311         'Iacute',
28312         '6e',
28313         'Icirc',
28314         '6f',
28315         'Iuml',
28316         '6g',
28317         'ETH',
28318         '6h',
28319         'Ntilde',
28320         '6i',
28321         'Ograve',
28322         '6j',
28323         'Oacute',
28324         '6k',
28325         'Ocirc',
28326         '6l',
28327         'Otilde',
28328         '6m',
28329         'Ouml',
28330         '6n',
28331         'times',
28332         '6o',
28333         'Oslash',
28334         '6p',
28335         'Ugrave',
28336         '6q',
28337         'Uacute',
28338         '6r',
28339         'Ucirc',
28340         '6s',
28341         'Uuml',
28342         '6t',
28343         'Yacute',
28344         '6u',
28345         'THORN',
28346         '6v',
28347         'szlig',
28348         '70',
28349         'agrave',
28350         '71',
28351         'aacute',
28352         '72',
28353         'acirc',
28354         '73',
28355         'atilde',
28356         '74',
28357         'auml',
28358         '75',
28359         'aring',
28360         '76',
28361         'aelig',
28362         '77',
28363         'ccedil',
28364         '78',
28365         'egrave',
28366         '79',
28367         'eacute',
28368         '7a',
28369         'ecirc',
28370         '7b',
28371         'euml',
28372         '7c',
28373         'igrave',
28374         '7d',
28375         'iacute',
28376         '7e',
28377         'icirc',
28378         '7f',
28379         'iuml',
28380         '7g',
28381         'eth',
28382         '7h',
28383         'ntilde',
28384         '7i',
28385         'ograve',
28386         '7j',
28387         'oacute',
28388         '7k',
28389         'ocirc',
28390         '7l',
28391         'otilde',
28392         '7m',
28393         'ouml',
28394         '7n',
28395         'divide',
28396         '7o',
28397         'oslash',
28398         '7p',
28399         'ugrave',
28400         '7q',
28401         'uacute',
28402         '7r',
28403         'ucirc',
28404         '7s',
28405         'uuml',
28406         '7t',
28407         'yacute',
28408         '7u',
28409         'thorn',
28410         '7v',
28411         'yuml',
28412         'ci',
28413         'fnof',
28414         'sh',
28415         'Alpha',
28416         'si',
28417         'Beta',
28418         'sj',
28419         'Gamma',
28420         'sk',
28421         'Delta',
28422         'sl',
28423         'Epsilon',
28424         'sm',
28425         'Zeta',
28426         'sn',
28427         'Eta',
28428         'so',
28429         'Theta',
28430         'sp',
28431         'Iota',
28432         'sq',
28433         'Kappa',
28434         'sr',
28435         'Lambda',
28436         'ss',
28437         'Mu',
28438         'st',
28439         'Nu',
28440         'su',
28441         'Xi',
28442         'sv',
28443         'Omicron',
28444         't0',
28445         'Pi',
28446         't1',
28447         'Rho',
28448         't3',
28449         'Sigma',
28450         't4',
28451         'Tau',
28452         't5',
28453         'Upsilon',
28454         't6',
28455         'Phi',
28456         't7',
28457         'Chi',
28458         't8',
28459         'Psi',
28460         't9',
28461         'Omega',
28462         'th',
28463         'alpha',
28464         'ti',
28465         'beta',
28466         'tj',
28467         'gamma',
28468         'tk',
28469         'delta',
28470         'tl',
28471         'epsilon',
28472         'tm',
28473         'zeta',
28474         'tn',
28475         'eta',
28476         'to',
28477         'theta',
28478         'tp',
28479         'iota',
28480         'tq',
28481         'kappa',
28482         'tr',
28483         'lambda',
28484         'ts',
28485         'mu',
28486         'tt',
28487         'nu',
28488         'tu',
28489         'xi',
28490         'tv',
28491         'omicron',
28492         'u0',
28493         'pi',
28494         'u1',
28495         'rho',
28496         'u2',
28497         'sigmaf',
28498         'u3',
28499         'sigma',
28500         'u4',
28501         'tau',
28502         'u5',
28503         'upsilon',
28504         'u6',
28505         'phi',
28506         'u7',
28507         'chi',
28508         'u8',
28509         'psi',
28510         'u9',
28511         'omega',
28512         'uh',
28513         'thetasym',
28514         'ui',
28515         'upsih',
28516         'um',
28517         'piv',
28518         '812',
28519         'bull',
28520         '816',
28521         'hellip',
28522         '81i',
28523         'prime',
28524         '81j',
28525         'Prime',
28526         '81u',
28527         'oline',
28528         '824',
28529         'frasl',
28530         '88o',
28531         'weierp',
28532         '88h',
28533         'image',
28534         '88s',
28535         'real',
28536         '892',
28537         'trade',
28538         '89l',
28539         'alefsym',
28540         '8cg',
28541         'larr',
28542         '8ch',
28543         'uarr',
28544         '8ci',
28545         'rarr',
28546         '8cj',
28547         'darr',
28548         '8ck',
28549         'harr',
28550         '8dl',
28551         'crarr',
28552         '8eg',
28553         'lArr',
28554         '8eh',
28555         'uArr',
28556         '8ei',
28557         'rArr',
28558         '8ej',
28559         'dArr',
28560         '8ek',
28561         'hArr',
28562         '8g0',
28563         'forall',
28564         '8g2',
28565         'part',
28566         '8g3',
28567         'exist',
28568         '8g5',
28569         'empty',
28570         '8g7',
28571         'nabla',
28572         '8g8',
28573         'isin',
28574         '8g9',
28575         'notin',
28576         '8gb',
28577         'ni',
28578         '8gf',
28579         'prod',
28580         '8gh',
28581         'sum',
28582         '8gi',
28583         'minus',
28584         '8gn',
28585         'lowast',
28586         '8gq',
28587         'radic',
28588         '8gt',
28589         'prop',
28590         '8gu',
28591         'infin',
28592         '8h0',
28593         'ang',
28594         '8h7',
28595         'and',
28596         '8h8',
28597         'or',
28598         '8h9',
28599         'cap',
28600         '8ha',
28601         'cup',
28602         '8hb',
28603         'int',
28604         '8hk',
28605         'there4',
28606         '8hs',
28607         'sim',
28608         '8i5',
28609         'cong',
28610         '8i8',
28611         'asymp',
28612         '8j0',
28613         'ne',
28614         '8j1',
28615         'equiv',
28616         '8j4',
28617         'le',
28618         '8j5',
28619         'ge',
28620         '8k2',
28621         'sub',
28622         '8k3',
28623         'sup',
28624         '8k4',
28625         'nsub',
28626         '8k6',
28627         'sube',
28628         '8k7',
28629         'supe',
28630         '8kl',
28631         'oplus',
28632         '8kn',
28633         'otimes',
28634         '8l5',
28635         'perp',
28636         '8m5',
28637         'sdot',
28638         '8o8',
28639         'lceil',
28640         '8o9',
28641         'rceil',
28642         '8oa',
28643         'lfloor',
28644         '8ob',
28645         'rfloor',
28646         '8p9',
28647         'lang',
28648         '8pa',
28649         'rang',
28650         '9ea',
28651         'loz',
28652         '9j0',
28653         'spades',
28654         '9j3',
28655         'clubs',
28656         '9j5',
28657         'hearts',
28658         '9j6',
28659         'diams',
28660         'ai',
28661         'OElig',
28662         'aj',
28663         'oelig',
28664         'b0',
28665         'Scaron',
28666         'b1',
28667         'scaron',
28668         'bo',
28669         'Yuml',
28670         'm6',
28671         'circ',
28672         'ms',
28673         'tilde',
28674         '802',
28675         'ensp',
28676         '803',
28677         'emsp',
28678         '809',
28679         'thinsp',
28680         '80c',
28681         'zwnj',
28682         '80d',
28683         'zwj',
28684         '80e',
28685         'lrm',
28686         '80f',
28687         'rlm',
28688         '80j',
28689         'ndash',
28690         '80k',
28691         'mdash',
28692         '80o',
28693         'lsquo',
28694         '80p',
28695         'rsquo',
28696         '80q',
28697         'sbquo',
28698         '80s',
28699         'ldquo',
28700         '80t',
28701         'rdquo',
28702         '80u',
28703         'bdquo',
28704         '810',
28705         'dagger',
28706         '811',
28707         'Dagger',
28708         '81g',
28709         'permil',
28710         '81p',
28711         'lsaquo',
28712         '81q',
28713         'rsaquo',
28714         '85c',
28715         'euro'
28716     ],
28717
28718          
28719     /**
28720      * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
28721      *
28722      * @method encodeRaw
28723      * @param {String} text Text to encode.
28724      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28725      * @return {String} Entity encoded text.
28726      */
28727     encodeRaw: function(text, attr)
28728     {
28729         var t = this;
28730         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28731             return t.baseEntities[chr] || chr;
28732         });
28733     },
28734     /**
28735      * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
28736      * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
28737      * and is exposed as the DOMUtils.encode function.
28738      *
28739      * @method encodeAllRaw
28740      * @param {String} text Text to encode.
28741      * @return {String} Entity encoded text.
28742      */
28743     encodeAllRaw: function(text) {
28744         var t = this;
28745         return ('' + text).replace(this.rawCharsRegExp, function(chr) {
28746             return t.baseEntities[chr] || chr;
28747         });
28748     },
28749     /**
28750      * Encodes the specified string using numeric entities. The core entities will be
28751      * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
28752      *
28753      * @method encodeNumeric
28754      * @param {String} text Text to encode.
28755      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28756      * @return {String} Entity encoded text.
28757      */
28758     encodeNumeric: function(text, attr) {
28759         var t = this;
28760         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28761             // Multi byte sequence convert it to a single entity
28762             if (chr.length > 1) {
28763                 return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
28764             }
28765             return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
28766         });
28767     },
28768     /**
28769      * Encodes the specified string using named entities. The core entities will be encoded
28770      * as named ones but all non lower ascii characters will be encoded into named entities.
28771      *
28772      * @method encodeNamed
28773      * @param {String} text Text to encode.
28774      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28775      * @param {Object} entities Optional parameter with entities to use.
28776      * @return {String} Entity encoded text.
28777      */
28778     encodeNamed: function(text, attr, entities) {
28779         var t = this;
28780         entities = entities || this.namedEntities;
28781         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28782             return t.baseEntities[chr] || entities[chr] || chr;
28783         });
28784     },
28785     /**
28786      * Returns an encode function based on the name(s) and it's optional entities.
28787      *
28788      * @method getEncodeFunc
28789      * @param {String} name Comma separated list of encoders for example named,numeric.
28790      * @param {String} entities Optional parameter with entities to use instead of the built in set.
28791      * @return {function} Encode function to be used.
28792      */
28793     getEncodeFunc: function(name, entities) {
28794         entities = this.buildEntitiesLookup(entities) || this.namedEntities;
28795         var t = this;
28796         function encodeNamedAndNumeric(text, attr) {
28797             return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
28798                 return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
28799             });
28800         }
28801
28802         function encodeCustomNamed(text, attr) {
28803             return t.encodeNamed(text, attr, entities);
28804         }
28805         // Replace + with , to be compatible with previous TinyMCE versions
28806         name = this.makeMap(name.replace(/\+/g, ','));
28807         // Named and numeric encoder
28808         if (name.named && name.numeric) {
28809             return this.encodeNamedAndNumeric;
28810         }
28811         // Named encoder
28812         if (name.named) {
28813             // Custom names
28814             if (entities) {
28815                 return encodeCustomNamed;
28816             }
28817             return this.encodeNamed;
28818         }
28819         // Numeric
28820         if (name.numeric) {
28821             return this.encodeNumeric;
28822         }
28823         // Raw encoder
28824         return this.encodeRaw;
28825     },
28826     /**
28827      * Decodes the specified string, this will replace entities with raw UTF characters.
28828      *
28829      * @method decode
28830      * @param {String} text Text to entity decode.
28831      * @return {String} Entity decoded string.
28832      */
28833     decode: function(text)
28834     {
28835         var  t = this;
28836         return text.replace(this.entityRegExp, function(all, numeric) {
28837             if (numeric) {
28838                 numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
28839                 // Support upper UTF
28840                 if (numeric > 65535) {
28841                     numeric -= 65536;
28842                     return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
28843                 }
28844                 return t.asciiMap[numeric] || String.fromCharCode(numeric);
28845             }
28846             return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
28847         });
28848     },
28849     nativeDecode : function (text) {
28850         return text;
28851     },
28852     makeMap : function (items, delim, map) {
28853                 var i;
28854                 items = items || [];
28855                 delim = delim || ',';
28856                 if (typeof items == "string") {
28857                         items = items.split(delim);
28858                 }
28859                 map = map || {};
28860                 i = items.length;
28861                 while (i--) {
28862                         map[items[i]] = {};
28863                 }
28864                 return map;
28865         }
28866 };
28867     
28868     
28869     
28870 Roo.htmleditor.TidyEntities.init();
28871 /**
28872  * @class Roo.htmleditor.KeyEnter
28873  * Handle Enter press..
28874  * @cfg {Roo.HtmlEditorCore} core the editor.
28875  * @constructor
28876  * Create a new Filter.
28877  * @param {Object} config Configuration options
28878  */
28879
28880
28881
28882
28883
28884 Roo.htmleditor.KeyEnter = function(cfg) {
28885     Roo.apply(this, cfg);
28886     // this does not actually call walk as it's really just a abstract class
28887  
28888     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
28889 }
28890
28891 //Roo.htmleditor.KeyEnter.i = 0;
28892
28893
28894 Roo.htmleditor.KeyEnter.prototype = {
28895     
28896     core : false,
28897     
28898     keypress : function(e)
28899     {
28900         if (e.charCode != 13 && e.charCode != 10) {
28901             Roo.log([e.charCode,e]);
28902             return true;
28903         }
28904         e.preventDefault();
28905         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
28906         var doc = this.core.doc;
28907           //add a new line
28908        
28909     
28910         var sel = this.core.getSelection();
28911         var range = sel.getRangeAt(0);
28912         var n = range.commonAncestorContainer;
28913         var pc = range.closest([ 'ol', 'ul']);
28914         var pli = range.closest('li');
28915         if (!pc || e.ctrlKey) {
28916             // on it list, or ctrl pressed.
28917             if (!e.ctrlKey) {
28918                 sel.insertNode('br', 'after'); 
28919             } else {
28920                 // only do this if we have ctrl key..
28921                 var br = doc.createElement('br');
28922                 br.className = 'clear';
28923                 br.setAttribute('style', 'clear: both');
28924                 sel.insertNode(br, 'after'); 
28925             }
28926             
28927          
28928             this.core.undoManager.addEvent();
28929             this.core.fireEditorEvent(e);
28930             return false;
28931         }
28932         
28933         // deal with <li> insetion
28934         if (pli.innerText.trim() == '' &&
28935             pli.previousSibling &&
28936             pli.previousSibling.nodeName == 'LI' &&
28937             pli.previousSibling.innerText.trim() ==  '') {
28938             pli.parentNode.removeChild(pli.previousSibling);
28939             sel.cursorAfter(pc);
28940             this.core.undoManager.addEvent();
28941             this.core.fireEditorEvent(e);
28942             return false;
28943         }
28944     
28945         var li = doc.createElement('LI');
28946         li.innerHTML = '&nbsp;';
28947         if (!pli || !pli.firstSibling) {
28948             pc.appendChild(li);
28949         } else {
28950             pli.parentNode.insertBefore(li, pli.firstSibling);
28951         }
28952         sel.cursorText (li.firstChild);
28953       
28954         this.core.undoManager.addEvent();
28955         this.core.fireEditorEvent(e);
28956
28957         return false;
28958         
28959     
28960         
28961         
28962          
28963     }
28964 };
28965      
28966 /**
28967  * @class Roo.htmleditor.Block
28968  * Base class for html editor blocks - do not use it directly .. extend it..
28969  * @cfg {DomElement} node The node to apply stuff to.
28970  * @cfg {String} friendly_name the name that appears in the context bar about this block
28971  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
28972  
28973  * @constructor
28974  * Create a new Filter.
28975  * @param {Object} config Configuration options
28976  */
28977
28978 Roo.htmleditor.Block  = function(cfg)
28979 {
28980     // do nothing .. should not be called really.
28981 }
28982 /**
28983  * factory method to get the block from an element (using cache if necessary)
28984  * @static
28985  * @param {HtmlElement} the dom element
28986  */
28987 Roo.htmleditor.Block.factory = function(node)
28988 {
28989     var cc = Roo.htmleditor.Block.cache;
28990     var id = Roo.get(node).id;
28991     if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
28992         Roo.htmleditor.Block.cache[id].readElement(node);
28993         return Roo.htmleditor.Block.cache[id];
28994     }
28995     var db  = node.getAttribute('data-block');
28996     if (!db) {
28997         db = node.nodeName.toLowerCase().toUpperCaseFirst();
28998     }
28999     var cls = Roo.htmleditor['Block' + db];
29000     if (typeof(cls) == 'undefined') {
29001         //Roo.log(node.getAttribute('data-block'));
29002         Roo.log("OOps missing block : " + 'Block' + db);
29003         return false;
29004     }
29005     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
29006     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
29007 };
29008
29009 /**
29010  * initalize all Elements from content that are 'blockable'
29011  * @static
29012  * @param the body element
29013  */
29014 Roo.htmleditor.Block.initAll = function(body, type)
29015 {
29016     if (typeof(type) == 'undefined') {
29017         var ia = Roo.htmleditor.Block.initAll;
29018         ia(body,'table');
29019         ia(body,'td');
29020         ia(body,'figure');
29021         return;
29022     }
29023     Roo.each(Roo.get(body).query(type), function(e) {
29024         Roo.htmleditor.Block.factory(e);    
29025     },this);
29026 };
29027 // question goes here... do we need to clear out this cache sometimes?
29028 // or show we make it relivant to the htmleditor.
29029 Roo.htmleditor.Block.cache = {};
29030
29031 Roo.htmleditor.Block.prototype = {
29032     
29033     node : false,
29034     
29035      // used by context menu
29036     friendly_name : 'Based Block',
29037     
29038     // text for button to delete this element
29039     deleteTitle : false,
29040     
29041     context : false,
29042     /**
29043      * Update a node with values from this object
29044      * @param {DomElement} node
29045      */
29046     updateElement : function(node)
29047     {
29048         Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
29049     },
29050      /**
29051      * convert to plain HTML for calling insertAtCursor..
29052      */
29053     toHTML : function()
29054     {
29055         return Roo.DomHelper.markup(this.toObject());
29056     },
29057     /**
29058      * used by readEleemnt to extract data from a node
29059      * may need improving as it's pretty basic
29060      
29061      * @param {DomElement} node
29062      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
29063      * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
29064      * @param {String} style the style property - eg. text-align
29065      */
29066     getVal : function(node, tag, attr, style)
29067     {
29068         var n = node;
29069         if (tag !== true && n.tagName != tag.toUpperCase()) {
29070             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
29071             // but kiss for now.
29072             n = node.getElementsByTagName(tag).item(0);
29073         }
29074         if (!n) {
29075             return '';
29076         }
29077         if (attr === false) {
29078             return n;
29079         }
29080         if (attr == 'html') {
29081             return n.innerHTML;
29082         }
29083         if (attr == 'style') {
29084             return n.style[style]; 
29085         }
29086         
29087         return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
29088             
29089     },
29090     /**
29091      * create a DomHelper friendly object - for use with 
29092      * Roo.DomHelper.markup / overwrite / etc..
29093      * (override this)
29094      */
29095     toObject : function()
29096     {
29097         return {};
29098     },
29099       /**
29100      * Read a node that has a 'data-block' property - and extract the values from it.
29101      * @param {DomElement} node - the node
29102      */
29103     readElement : function(node)
29104     {
29105         
29106     } 
29107     
29108     
29109 };
29110
29111  
29112
29113 /**
29114  * @class Roo.htmleditor.BlockFigure
29115  * Block that has an image and a figcaption
29116  * @cfg {String} image_src the url for the image
29117  * @cfg {String} align (left|right) alignment for the block default left
29118  * @cfg {String} caption the text to appear below  (and in the alt tag)
29119  * @cfg {String} caption_display (block|none) display or not the caption
29120  * @cfg {String|number} image_width the width of the image number or %?
29121  * @cfg {String|number} image_height the height of the image number or %?
29122  * 
29123  * @constructor
29124  * Create a new Filter.
29125  * @param {Object} config Configuration options
29126  */
29127
29128 Roo.htmleditor.BlockFigure = function(cfg)
29129 {
29130     if (cfg.node) {
29131         this.readElement(cfg.node);
29132         this.updateElement(cfg.node);
29133     }
29134     Roo.apply(this, cfg);
29135 }
29136 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
29137  
29138     
29139     // setable values.
29140     image_src: '',
29141     align: 'center',
29142     caption : '',
29143     caption_display : 'block',
29144     width : '100%',
29145     cls : '',
29146     href: '',
29147     video_url : '',
29148     
29149     // margin: '2%', not used
29150     
29151     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
29152
29153     
29154     // used by context menu
29155     friendly_name : 'Image with caption',
29156     deleteTitle : "Delete Image and Caption",
29157     
29158     contextMenu : function(toolbar)
29159     {
29160         
29161         var block = function() {
29162             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
29163         };
29164         
29165         
29166         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
29167         
29168         var syncValue = toolbar.editorcore.syncValue;
29169         
29170         var fields = {};
29171         
29172         return [
29173              {
29174                 xtype : 'TextItem',
29175                 text : "Source: ",
29176                 xns : rooui.Toolbar  //Boostrap?
29177             },
29178             {
29179                 xtype : 'Button',
29180                 text: 'Change Image URL',
29181                  
29182                 listeners : {
29183                     click: function (btn, state)
29184                     {
29185                         var b = block();
29186                         
29187                         Roo.MessageBox.show({
29188                             title : "Image Source URL",
29189                             msg : "Enter the url for the image",
29190                             buttons: Roo.MessageBox.OKCANCEL,
29191                             fn: function(btn, val){
29192                                 if (btn != 'ok') {
29193                                     return;
29194                                 }
29195                                 b.image_src = val;
29196                                 b.updateElement();
29197                                 syncValue();
29198                                 toolbar.editorcore.onEditorEvent();
29199                             },
29200                             minWidth:250,
29201                             prompt:true,
29202                             //multiline: multiline,
29203                             modal : true,
29204                             value : b.image_src
29205                         });
29206                     }
29207                 },
29208                 xns : rooui.Toolbar
29209             },
29210          
29211             {
29212                 xtype : 'Button',
29213                 text: 'Change Link URL',
29214                  
29215                 listeners : {
29216                     click: function (btn, state)
29217                     {
29218                         var b = block();
29219                         
29220                         Roo.MessageBox.show({
29221                             title : "Link URL",
29222                             msg : "Enter the url for the link - leave blank to have no link",
29223                             buttons: Roo.MessageBox.OKCANCEL,
29224                             fn: function(btn, val){
29225                                 if (btn != 'ok') {
29226                                     return;
29227                                 }
29228                                 b.href = val;
29229                                 b.updateElement();
29230                                 syncValue();
29231                                 toolbar.editorcore.onEditorEvent();
29232                             },
29233                             minWidth:250,
29234                             prompt:true,
29235                             //multiline: multiline,
29236                             modal : true,
29237                             value : b.href
29238                         });
29239                     }
29240                 },
29241                 xns : rooui.Toolbar
29242             },
29243             {
29244                 xtype : 'Button',
29245                 text: 'Show Video URL',
29246                  
29247                 listeners : {
29248                     click: function (btn, state)
29249                     {
29250                         Roo.MessageBox.alert("Video URL",
29251                             block().video_url == '' ? 'This image is not linked ot a video' :
29252                                 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
29253                     }
29254                 },
29255                 xns : rooui.Toolbar
29256             },
29257             
29258             
29259             {
29260                 xtype : 'TextItem',
29261                 text : "Width: ",
29262                 xns : rooui.Toolbar  //Boostrap?
29263             },
29264             {
29265                 xtype : 'ComboBox',
29266                 allowBlank : false,
29267                 displayField : 'val',
29268                 editable : true,
29269                 listWidth : 100,
29270                 triggerAction : 'all',
29271                 typeAhead : true,
29272                 valueField : 'val',
29273                 width : 70,
29274                 name : 'width',
29275                 listeners : {
29276                     select : function (combo, r, index)
29277                     {
29278                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29279                         var b = block();
29280                         b.width = r.get('val');
29281                         b.updateElement();
29282                         syncValue();
29283                         toolbar.editorcore.onEditorEvent();
29284                     }
29285                 },
29286                 xns : rooui.form,
29287                 store : {
29288                     xtype : 'SimpleStore',
29289                     data : [
29290                         ['100%'],
29291                         ['80%'],
29292                         ['50%'],
29293                         ['20%'],
29294                         ['10%']
29295                     ],
29296                     fields : [ 'val'],
29297                     xns : Roo.data
29298                 }
29299             },
29300             {
29301                 xtype : 'TextItem',
29302                 text : "Align: ",
29303                 xns : rooui.Toolbar  //Boostrap?
29304             },
29305             {
29306                 xtype : 'ComboBox',
29307                 allowBlank : false,
29308                 displayField : 'val',
29309                 editable : true,
29310                 listWidth : 100,
29311                 triggerAction : 'all',
29312                 typeAhead : true,
29313                 valueField : 'val',
29314                 width : 70,
29315                 name : 'align',
29316                 listeners : {
29317                     select : function (combo, r, index)
29318                     {
29319                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29320                         var b = block();
29321                         b.align = r.get('val');
29322                         b.updateElement();
29323                         syncValue();
29324                         toolbar.editorcore.onEditorEvent();
29325                     }
29326                 },
29327                 xns : rooui.form,
29328                 store : {
29329                     xtype : 'SimpleStore',
29330                     data : [
29331                         ['left'],
29332                         ['right'],
29333                         ['center']
29334                     ],
29335                     fields : [ 'val'],
29336                     xns : Roo.data
29337                 }
29338             },
29339             
29340               
29341             {
29342                 xtype : 'Button',
29343                 text: 'Hide Caption',
29344                 name : 'caption_display',
29345                 pressed : false,
29346                 enableToggle : true,
29347                 setValue : function(v) {
29348                     // this trigger toggle.
29349                      
29350                     this.setText(v ? "Hide Caption" : "Show Caption");
29351                     this.setPressed(v != 'block');
29352                 },
29353                 listeners : {
29354                     toggle: function (btn, state)
29355                     {
29356                         var b  = block();
29357                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
29358                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
29359                         b.updateElement();
29360                         syncValue();
29361                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29362                         toolbar.editorcore.onEditorEvent();
29363                     }
29364                 },
29365                 xns : rooui.Toolbar
29366             }
29367         ];
29368         
29369     },
29370     /**
29371      * create a DomHelper friendly object - for use with
29372      * Roo.DomHelper.markup / overwrite / etc..
29373      */
29374     toObject : function()
29375     {
29376         var d = document.createElement('div');
29377         d.innerHTML = this.caption;
29378         
29379         var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
29380         
29381         var iw = this.align == 'center' ? this.width : '100%';
29382         var img =   {
29383             tag : 'img',
29384             contenteditable : 'false',
29385             src : this.image_src,
29386             alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
29387             style: {
29388                 width : iw,
29389                 maxWidth : iw + ' !important', // this is not getting rendered?
29390                 margin : m  
29391                 
29392             }
29393         };
29394         /*
29395         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
29396                     '<a href="{2}">' + 
29397                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
29398                     '</a>' + 
29399                 '</div>',
29400         */
29401                 
29402         if (this.href.length > 0) {
29403             img = {
29404                 tag : 'a',
29405                 href: this.href,
29406                 contenteditable : 'true',
29407                 cn : [
29408                     img
29409                 ]
29410             };
29411         }
29412         
29413         
29414         if (this.video_url.length > 0) {
29415             img = {
29416                 tag : 'div',
29417                 cls : this.cls,
29418                 frameborder : 0,
29419                 allowfullscreen : true,
29420                 width : 420,  // these are for video tricks - that we replace the outer
29421                 height : 315,
29422                 src : this.video_url,
29423                 cn : [
29424                     img
29425                 ]
29426             };
29427         }
29428         // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
29429         var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
29430         
29431   
29432         var ret =   {
29433             tag: 'figure',
29434             'data-block' : 'Figure',
29435             'data-width' : this.width, 
29436             contenteditable : 'false',
29437             
29438             style : {
29439                 display: 'block',
29440                 float :  this.align ,
29441                 maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
29442                 width : this.align == 'center' ? '100%' : this.width,
29443                 margin:  '0px',
29444                 padding: this.align == 'center' ? '0' : '0 10px' ,
29445                 textAlign : this.align   // seems to work for email..
29446                 
29447             },
29448            
29449             
29450             align : this.align,
29451             cn : [
29452                 img,
29453               
29454                 {
29455                     tag: 'figcaption',
29456                     'data-display' : this.caption_display,
29457                     style : {
29458                         textAlign : 'left',
29459                         fontSize : '16px',
29460                         lineHeight : '24px',
29461                         display : this.caption_display,
29462                         maxWidth : (this.align == 'center' ?  this.width : '100%' ) + ' !important',
29463                         margin: m,
29464                         width: this.align == 'center' ?  this.width : '100%' 
29465                     
29466                          
29467                     },
29468                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
29469                     cn : [
29470                         {
29471                             tag: 'div',
29472                             style  : {
29473                                 marginTop : '16px',
29474                                 textAlign : 'left'
29475                             },
29476                             align: 'left',
29477                             cn : [
29478                                 {
29479                                     // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
29480                                     tag : 'i',
29481                                     contenteditable : true,
29482                                     html : captionhtml
29483                                 }
29484                                 
29485                             ]
29486                         }
29487                         
29488                     ]
29489                     
29490                 }
29491             ]
29492         };
29493         return ret;
29494          
29495     },
29496     
29497     readElement : function(node)
29498     {
29499         // this should not really come from the link...
29500         this.video_url = this.getVal(node, 'div', 'src');
29501         this.cls = this.getVal(node, 'div', 'class');
29502         this.href = this.getVal(node, 'a', 'href');
29503         
29504         
29505         this.image_src = this.getVal(node, 'img', 'src');
29506          
29507         this.align = this.getVal(node, 'figure', 'align');
29508         var figcaption = this.getVal(node, 'figcaption', false);
29509         if (figcaption !== '') {
29510             this.caption = this.getVal(figcaption, 'i', 'html');
29511         }
29512         
29513
29514         this.caption_display = this.getVal(node, 'figcaption', 'data-display');
29515         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
29516         this.width = this.getVal(node, true, 'data-width');
29517         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
29518         
29519     },
29520     removeNode : function()
29521     {
29522         return this.node;
29523     }
29524     
29525   
29526    
29527      
29528     
29529     
29530     
29531     
29532 })
29533
29534  
29535
29536 /**
29537  * @class Roo.htmleditor.BlockTable
29538  * Block that manages a table
29539  * 
29540  * @constructor
29541  * Create a new Filter.
29542  * @param {Object} config Configuration options
29543  */
29544
29545 Roo.htmleditor.BlockTable = function(cfg)
29546 {
29547     if (cfg.node) {
29548         this.readElement(cfg.node);
29549         this.updateElement(cfg.node);
29550     }
29551     Roo.apply(this, cfg);
29552     if (!cfg.node) {
29553         this.rows = [];
29554         for(var r = 0; r < this.no_row; r++) {
29555             this.rows[r] = [];
29556             for(var c = 0; c < this.no_col; c++) {
29557                 this.rows[r][c] = this.emptyCell();
29558             }
29559         }
29560     }
29561     
29562     
29563 }
29564 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
29565  
29566     rows : false,
29567     no_col : 1,
29568     no_row : 1,
29569     
29570     
29571     width: '100%',
29572     
29573     // used by context menu
29574     friendly_name : 'Table',
29575     deleteTitle : 'Delete Table',
29576     // context menu is drawn once..
29577     
29578     contextMenu : function(toolbar)
29579     {
29580         
29581         var block = function() {
29582             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
29583         };
29584         
29585         
29586         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
29587         
29588         var syncValue = toolbar.editorcore.syncValue;
29589         
29590         var fields = {};
29591         
29592         return [
29593             {
29594                 xtype : 'TextItem',
29595                 text : "Width: ",
29596                 xns : rooui.Toolbar  //Boostrap?
29597             },
29598             {
29599                 xtype : 'ComboBox',
29600                 allowBlank : false,
29601                 displayField : 'val',
29602                 editable : true,
29603                 listWidth : 100,
29604                 triggerAction : 'all',
29605                 typeAhead : true,
29606                 valueField : 'val',
29607                 width : 100,
29608                 name : 'width',
29609                 listeners : {
29610                     select : function (combo, r, index)
29611                     {
29612                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29613                         var b = block();
29614                         b.width = r.get('val');
29615                         b.updateElement();
29616                         syncValue();
29617                         toolbar.editorcore.onEditorEvent();
29618                     }
29619                 },
29620                 xns : rooui.form,
29621                 store : {
29622                     xtype : 'SimpleStore',
29623                     data : [
29624                         ['100%'],
29625                         ['auto']
29626                     ],
29627                     fields : [ 'val'],
29628                     xns : Roo.data
29629                 }
29630             },
29631             // -------- Cols
29632             
29633             {
29634                 xtype : 'TextItem',
29635                 text : "Columns: ",
29636                 xns : rooui.Toolbar  //Boostrap?
29637             },
29638          
29639             {
29640                 xtype : 'Button',
29641                 text: '-',
29642                 listeners : {
29643                     click : function (_self, e)
29644                     {
29645                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29646                         block().removeColumn();
29647                         syncValue();
29648                         toolbar.editorcore.onEditorEvent();
29649                     }
29650                 },
29651                 xns : rooui.Toolbar
29652             },
29653             {
29654                 xtype : 'Button',
29655                 text: '+',
29656                 listeners : {
29657                     click : function (_self, e)
29658                     {
29659                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29660                         block().addColumn();
29661                         syncValue();
29662                         toolbar.editorcore.onEditorEvent();
29663                     }
29664                 },
29665                 xns : rooui.Toolbar
29666             },
29667             // -------- ROWS
29668             {
29669                 xtype : 'TextItem',
29670                 text : "Rows: ",
29671                 xns : rooui.Toolbar  //Boostrap?
29672             },
29673          
29674             {
29675                 xtype : 'Button',
29676                 text: '-',
29677                 listeners : {
29678                     click : function (_self, e)
29679                     {
29680                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29681                         block().removeRow();
29682                         syncValue();
29683                         toolbar.editorcore.onEditorEvent();
29684                     }
29685                 },
29686                 xns : rooui.Toolbar
29687             },
29688             {
29689                 xtype : 'Button',
29690                 text: '+',
29691                 listeners : {
29692                     click : function (_self, e)
29693                     {
29694                         block().addRow();
29695                         syncValue();
29696                         toolbar.editorcore.onEditorEvent();
29697                     }
29698                 },
29699                 xns : rooui.Toolbar
29700             },
29701             // -------- ROWS
29702             {
29703                 xtype : 'Button',
29704                 text: 'Reset Column Widths',
29705                 listeners : {
29706                     
29707                     click : function (_self, e)
29708                     {
29709                         block().resetWidths();
29710                         syncValue();
29711                         toolbar.editorcore.onEditorEvent();
29712                     }
29713                 },
29714                 xns : rooui.Toolbar
29715             } 
29716             
29717             
29718             
29719         ];
29720         
29721     },
29722     
29723     
29724   /**
29725      * create a DomHelper friendly object - for use with
29726      * Roo.DomHelper.markup / overwrite / etc..
29727      * ?? should it be called with option to hide all editing features?
29728      */
29729     toObject : function()
29730     {
29731         
29732         var ret = {
29733             tag : 'table',
29734             contenteditable : 'false', // this stops cell selection from picking the table.
29735             'data-block' : 'Table',
29736             style : {
29737                 width:  this.width,
29738                 border : 'solid 1px #000', // ??? hard coded?
29739                 'border-collapse' : 'collapse' 
29740             },
29741             cn : [
29742                 { tag : 'tbody' , cn : [] }
29743             ]
29744         };
29745         
29746         // do we have a head = not really 
29747         var ncols = 0;
29748         Roo.each(this.rows, function( row ) {
29749             var tr = {
29750                 tag: 'tr',
29751                 style : {
29752                     margin: '6px',
29753                     border : 'solid 1px #000',
29754                     textAlign : 'left' 
29755                 },
29756                 cn : [ ]
29757             };
29758             
29759             ret.cn[0].cn.push(tr);
29760             // does the row have any properties? ?? height?
29761             var nc = 0;
29762             Roo.each(row, function( cell ) {
29763                 
29764                 var td = {
29765                     tag : 'td',
29766                     contenteditable :  'true',
29767                     'data-block' : 'Td',
29768                     html : cell.html,
29769                     style : cell.style
29770                 };
29771                 if (cell.colspan > 1) {
29772                     td.colspan = cell.colspan ;
29773                     nc += cell.colspan;
29774                 } else {
29775                     nc++;
29776                 }
29777                 if (cell.rowspan > 1) {
29778                     td.rowspan = cell.rowspan ;
29779                 }
29780                 
29781                 
29782                 // widths ?
29783                 tr.cn.push(td);
29784                     
29785                 
29786             }, this);
29787             ncols = Math.max(nc, ncols);
29788             
29789             
29790         }, this);
29791         // add the header row..
29792         
29793         ncols++;
29794          
29795         
29796         return ret;
29797          
29798     },
29799     
29800     readElement : function(node)
29801     {
29802         node  = node ? node : this.node ;
29803         this.width = this.getVal(node, true, 'style', 'width') || '100%';
29804         
29805         this.rows = [];
29806         this.no_row = 0;
29807         var trs = Array.from(node.rows);
29808         trs.forEach(function(tr) {
29809             var row =  [];
29810             this.rows.push(row);
29811             
29812             this.no_row++;
29813             var no_column = 0;
29814             Array.from(tr.cells).forEach(function(td) {
29815                 
29816                 var add = {
29817                     colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
29818                     rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
29819                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
29820                     html : td.innerHTML
29821                 };
29822                 no_column += add.colspan;
29823                      
29824                 
29825                 row.push(add);
29826                 
29827                 
29828             },this);
29829             this.no_col = Math.max(this.no_col, no_column);
29830             
29831             
29832         },this);
29833         
29834         
29835     },
29836     normalizeRows: function()
29837     {
29838         var ret= [];
29839         var rid = -1;
29840         this.rows.forEach(function(row) {
29841             rid++;
29842             ret[rid] = [];
29843             row = this.normalizeRow(row);
29844             var cid = 0;
29845             row.forEach(function(c) {
29846                 while (typeof(ret[rid][cid]) != 'undefined') {
29847                     cid++;
29848                 }
29849                 if (typeof(ret[rid]) == 'undefined') {
29850                     ret[rid] = [];
29851                 }
29852                 ret[rid][cid] = c;
29853                 c.row = rid;
29854                 c.col = cid;
29855                 if (c.rowspan < 2) {
29856                     return;
29857                 }
29858                 
29859                 for(var i = 1 ;i < c.rowspan; i++) {
29860                     if (typeof(ret[rid+i]) == 'undefined') {
29861                         ret[rid+i] = [];
29862                     }
29863                     ret[rid+i][cid] = c;
29864                 }
29865             });
29866         }, this);
29867         return ret;
29868     
29869     },
29870     
29871     normalizeRow: function(row)
29872     {
29873         var ret= [];
29874         row.forEach(function(c) {
29875             if (c.colspan < 2) {
29876                 ret.push(c);
29877                 return;
29878             }
29879             for(var i =0 ;i < c.colspan; i++) {
29880                 ret.push(c);
29881             }
29882         });
29883         return ret;
29884     
29885     },
29886     
29887     deleteColumn : function(sel)
29888     {
29889         if (!sel || sel.type != 'col') {
29890             return;
29891         }
29892         if (this.no_col < 2) {
29893             return;
29894         }
29895         
29896         this.rows.forEach(function(row) {
29897             var cols = this.normalizeRow(row);
29898             var col = cols[sel.col];
29899             if (col.colspan > 1) {
29900                 col.colspan --;
29901             } else {
29902                 row.remove(col);
29903             }
29904             
29905         }, this);
29906         this.no_col--;
29907         
29908     },
29909     removeColumn : function()
29910     {
29911         this.deleteColumn({
29912             type: 'col',
29913             col : this.no_col-1
29914         });
29915         this.updateElement();
29916     },
29917     
29918      
29919     addColumn : function()
29920     {
29921         
29922         this.rows.forEach(function(row) {
29923             row.push(this.emptyCell());
29924            
29925         }, this);
29926         this.updateElement();
29927     },
29928     
29929     deleteRow : function(sel)
29930     {
29931         if (!sel || sel.type != 'row') {
29932             return;
29933         }
29934         
29935         if (this.no_row < 2) {
29936             return;
29937         }
29938         
29939         var rows = this.normalizeRows();
29940         
29941         
29942         rows[sel.row].forEach(function(col) {
29943             if (col.rowspan > 1) {
29944                 col.rowspan--;
29945             } else {
29946                 col.remove = 1; // flage it as removed.
29947             }
29948             
29949         }, this);
29950         var newrows = [];
29951         this.rows.forEach(function(row) {
29952             newrow = [];
29953             row.forEach(function(c) {
29954                 if (typeof(c.remove) == 'undefined') {
29955                     newrow.push(c);
29956                 }
29957                 
29958             });
29959             if (newrow.length > 0) {
29960                 newrows.push(row);
29961             }
29962         });
29963         this.rows =  newrows;
29964         
29965         
29966         
29967         this.no_row--;
29968         this.updateElement();
29969         
29970     },
29971     removeRow : function()
29972     {
29973         this.deleteRow({
29974             type: 'row',
29975             row : this.no_row-1
29976         });
29977         
29978     },
29979     
29980      
29981     addRow : function()
29982     {
29983         
29984         var row = [];
29985         for (var i = 0; i < this.no_col; i++ ) {
29986             
29987             row.push(this.emptyCell());
29988            
29989         }
29990         this.rows.push(row);
29991         this.updateElement();
29992         
29993     },
29994      
29995     // the default cell object... at present...
29996     emptyCell : function() {
29997         return (new Roo.htmleditor.BlockTd({})).toObject();
29998         
29999      
30000     },
30001     
30002     removeNode : function()
30003     {
30004         return this.node;
30005     },
30006     
30007     
30008     
30009     resetWidths : function()
30010     {
30011         Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
30012             var nn = Roo.htmleditor.Block.factory(n);
30013             nn.width = '';
30014             nn.updateElement(n);
30015         });
30016     }
30017     
30018     
30019     
30020     
30021 })
30022
30023 /**
30024  *
30025  * editing a TD?
30026  *
30027  * since selections really work on the table cell, then editing really should work from there
30028  *
30029  * The original plan was to support merging etc... - but that may not be needed yet..
30030  *
30031  * So this simple version will support:
30032  *   add/remove cols
30033  *   adjust the width +/-
30034  *   reset the width...
30035  *   
30036  *
30037  */
30038
30039
30040  
30041
30042 /**
30043  * @class Roo.htmleditor.BlockTable
30044  * Block that manages a table
30045  * 
30046  * @constructor
30047  * Create a new Filter.
30048  * @param {Object} config Configuration options
30049  */
30050
30051 Roo.htmleditor.BlockTd = function(cfg)
30052 {
30053     if (cfg.node) {
30054         this.readElement(cfg.node);
30055         this.updateElement(cfg.node);
30056     }
30057     Roo.apply(this, cfg);
30058      
30059     
30060     
30061 }
30062 Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
30063  
30064     node : false,
30065     
30066     width: '',
30067     textAlign : 'left',
30068     valign : 'top',
30069     
30070     colspan : 1,
30071     rowspan : 1,
30072     
30073     
30074     // used by context menu
30075     friendly_name : 'Table Cell',
30076     deleteTitle : false, // use our customer delete
30077     
30078     // context menu is drawn once..
30079     
30080     contextMenu : function(toolbar)
30081     {
30082         
30083         var cell = function() {
30084             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
30085         };
30086         
30087         var table = function() {
30088             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
30089         };
30090         
30091         var lr = false;
30092         var saveSel = function()
30093         {
30094             lr = toolbar.editorcore.getSelection().getRangeAt(0);
30095         }
30096         var restoreSel = function()
30097         {
30098             if (lr) {
30099                 (function() {
30100                     toolbar.editorcore.focus();
30101                     var cr = toolbar.editorcore.getSelection();
30102                     cr.removeAllRanges();
30103                     cr.addRange(lr);
30104                     toolbar.editorcore.onEditorEvent();
30105                 }).defer(10, this);
30106                 
30107                 
30108             }
30109         }
30110         
30111         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
30112         
30113         var syncValue = toolbar.editorcore.syncValue;
30114         
30115         var fields = {};
30116         
30117         return [
30118             {
30119                 xtype : 'Button',
30120                 text : 'Edit Table',
30121                 listeners : {
30122                     click : function() {
30123                         var t = toolbar.tb.selectedNode.closest('table');
30124                         toolbar.editorcore.selectNode(t);
30125                         toolbar.editorcore.onEditorEvent();                        
30126                     }
30127                 }
30128                 
30129             },
30130               
30131            
30132              
30133             {
30134                 xtype : 'TextItem',
30135                 text : "Column Width: ",
30136                  xns : rooui.Toolbar 
30137                
30138             },
30139             {
30140                 xtype : 'Button',
30141                 text: '-',
30142                 listeners : {
30143                     click : function (_self, e)
30144                     {
30145                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30146                         cell().shrinkColumn();
30147                         syncValue();
30148                          toolbar.editorcore.onEditorEvent();
30149                     }
30150                 },
30151                 xns : rooui.Toolbar
30152             },
30153             {
30154                 xtype : 'Button',
30155                 text: '+',
30156                 listeners : {
30157                     click : function (_self, e)
30158                     {
30159                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30160                         cell().growColumn();
30161                         syncValue();
30162                         toolbar.editorcore.onEditorEvent();
30163                     }
30164                 },
30165                 xns : rooui.Toolbar
30166             },
30167             
30168             {
30169                 xtype : 'TextItem',
30170                 text : "Vertical Align: ",
30171                 xns : rooui.Toolbar  //Boostrap?
30172             },
30173             {
30174                 xtype : 'ComboBox',
30175                 allowBlank : false,
30176                 displayField : 'val',
30177                 editable : true,
30178                 listWidth : 100,
30179                 triggerAction : 'all',
30180                 typeAhead : true,
30181                 valueField : 'val',
30182                 width : 100,
30183                 name : 'valign',
30184                 listeners : {
30185                     select : function (combo, r, index)
30186                     {
30187                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30188                         var b = cell();
30189                         b.valign = r.get('val');
30190                         b.updateElement();
30191                         syncValue();
30192                         toolbar.editorcore.onEditorEvent();
30193                     }
30194                 },
30195                 xns : rooui.form,
30196                 store : {
30197                     xtype : 'SimpleStore',
30198                     data : [
30199                         ['top'],
30200                         ['middle'],
30201                         ['bottom'] // there are afew more... 
30202                     ],
30203                     fields : [ 'val'],
30204                     xns : Roo.data
30205                 }
30206             },
30207             
30208             {
30209                 xtype : 'TextItem',
30210                 text : "Merge Cells: ",
30211                  xns : rooui.Toolbar 
30212                
30213             },
30214             
30215             
30216             {
30217                 xtype : 'Button',
30218                 text: 'Right',
30219                 listeners : {
30220                     click : function (_self, e)
30221                     {
30222                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30223                         cell().mergeRight();
30224                         //block().growColumn();
30225                         syncValue();
30226                         toolbar.editorcore.onEditorEvent();
30227                     }
30228                 },
30229                 xns : rooui.Toolbar
30230             },
30231              
30232             {
30233                 xtype : 'Button',
30234                 text: 'Below',
30235                 listeners : {
30236                     click : function (_self, e)
30237                     {
30238                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30239                         cell().mergeBelow();
30240                         //block().growColumn();
30241                         syncValue();
30242                         toolbar.editorcore.onEditorEvent();
30243                     }
30244                 },
30245                 xns : rooui.Toolbar
30246             },
30247             {
30248                 xtype : 'TextItem',
30249                 text : "| ",
30250                  xns : rooui.Toolbar 
30251                
30252             },
30253             
30254             {
30255                 xtype : 'Button',
30256                 text: 'Split',
30257                 listeners : {
30258                     click : function (_self, e)
30259                     {
30260                         //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30261                         cell().split();
30262                         syncValue();
30263                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30264                         toolbar.editorcore.onEditorEvent();
30265                                              
30266                     }
30267                 },
30268                 xns : rooui.Toolbar
30269             },
30270             {
30271                 xtype : 'Fill',
30272                 xns : rooui.Toolbar 
30273                
30274             },
30275         
30276           
30277             {
30278                 xtype : 'Button',
30279                 text: 'Delete',
30280                  
30281                 xns : rooui.Toolbar,
30282                 menu : {
30283                     xtype : 'Menu',
30284                     xns : rooui.menu,
30285                     items : [
30286                         {
30287                             xtype : 'Item',
30288                             html: 'Column',
30289                             listeners : {
30290                                 click : function (_self, e)
30291                                 {
30292                                     var t = table();
30293                                     
30294                                     cell().deleteColumn();
30295                                     syncValue();
30296                                     toolbar.editorcore.selectNode(t.node);
30297                                     toolbar.editorcore.onEditorEvent();   
30298                                 }
30299                             },
30300                             xns : rooui.menu
30301                         },
30302                         {
30303                             xtype : 'Item',
30304                             html: 'Row',
30305                             listeners : {
30306                                 click : function (_self, e)
30307                                 {
30308                                     var t = table();
30309                                     cell().deleteRow();
30310                                     syncValue();
30311                                     
30312                                     toolbar.editorcore.selectNode(t.node);
30313                                     toolbar.editorcore.onEditorEvent();   
30314                                                          
30315                                 }
30316                             },
30317                             xns : rooui.menu
30318                         },
30319                        {
30320                             xtype : 'Separator',
30321                             xns : rooui.menu
30322                         },
30323                         {
30324                             xtype : 'Item',
30325                             html: 'Table',
30326                             listeners : {
30327                                 click : function (_self, e)
30328                                 {
30329                                     var t = table();
30330                                     var nn = t.node.nextSibling || t.node.previousSibling;
30331                                     t.node.parentNode.removeChild(t.node);
30332                                     if (nn) { 
30333                                         toolbar.editorcore.selectNode(nn, true);
30334                                     }
30335                                     toolbar.editorcore.onEditorEvent();   
30336                                                          
30337                                 }
30338                             },
30339                             xns : rooui.menu
30340                         }
30341                     ]
30342                 }
30343             }
30344             
30345             // align... << fixme
30346             
30347         ];
30348         
30349     },
30350     
30351     
30352   /**
30353      * create a DomHelper friendly object - for use with
30354      * Roo.DomHelper.markup / overwrite / etc..
30355      * ?? should it be called with option to hide all editing features?
30356      */
30357  /**
30358      * create a DomHelper friendly object - for use with
30359      * Roo.DomHelper.markup / overwrite / etc..
30360      * ?? should it be called with option to hide all editing features?
30361      */
30362     toObject : function()
30363     {
30364         var ret = {
30365             tag : 'td',
30366             contenteditable : 'true', // this stops cell selection from picking the table.
30367             'data-block' : 'Td',
30368             valign : this.valign,
30369             style : {  
30370                 'text-align' :  this.textAlign,
30371                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
30372                 'border-collapse' : 'collapse',
30373                 padding : '6px', // 8 for desktop / 4 for mobile
30374                 'vertical-align': this.valign
30375             },
30376             html : this.html
30377         };
30378         if (this.width != '') {
30379             ret.width = this.width;
30380             ret.style.width = this.width;
30381         }
30382         
30383         
30384         if (this.colspan > 1) {
30385             ret.colspan = this.colspan ;
30386         } 
30387         if (this.rowspan > 1) {
30388             ret.rowspan = this.rowspan ;
30389         }
30390         
30391            
30392         
30393         return ret;
30394          
30395     },
30396     
30397     readElement : function(node)
30398     {
30399         node  = node ? node : this.node ;
30400         this.width = node.style.width;
30401         this.colspan = Math.max(1,1*node.getAttribute('colspan'));
30402         this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
30403         this.html = node.innerHTML;
30404         if (node.style.textAlign != '') {
30405             this.textAlign = node.style.textAlign;
30406         }
30407         
30408         
30409     },
30410      
30411     // the default cell object... at present...
30412     emptyCell : function() {
30413         return {
30414             colspan :  1,
30415             rowspan :  1,
30416             textAlign : 'left',
30417             html : "&nbsp;" // is this going to be editable now?
30418         };
30419      
30420     },
30421     
30422     removeNode : function()
30423     {
30424         return this.node.closest('table');
30425          
30426     },
30427     
30428     cellData : false,
30429     
30430     colWidths : false,
30431     
30432     toTableArray  : function()
30433     {
30434         var ret = [];
30435         var tab = this.node.closest('tr').closest('table');
30436         Array.from(tab.rows).forEach(function(r, ri){
30437             ret[ri] = [];
30438         });
30439         var rn = 0;
30440         this.colWidths = [];
30441         var all_auto = true;
30442         Array.from(tab.rows).forEach(function(r, ri){
30443             
30444             var cn = 0;
30445             Array.from(r.cells).forEach(function(ce, ci){
30446                 var c =  {
30447                     cell : ce,
30448                     row : rn,
30449                     col: cn,
30450                     colspan : ce.colSpan,
30451                     rowspan : ce.rowSpan
30452                 };
30453                 if (ce.isEqualNode(this.node)) {
30454                     this.cellData = c;
30455                 }
30456                 // if we have been filled up by a row?
30457                 if (typeof(ret[rn][cn]) != 'undefined') {
30458                     while(typeof(ret[rn][cn]) != 'undefined') {
30459                         cn++;
30460                     }
30461                     c.col = cn;
30462                 }
30463                 
30464                 if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
30465                     this.colWidths[cn] =   ce.style.width;
30466                     if (this.colWidths[cn] != '') {
30467                         all_auto = false;
30468                     }
30469                 }
30470                 
30471                 
30472                 if (c.colspan < 2 && c.rowspan < 2 ) {
30473                     ret[rn][cn] = c;
30474                     cn++;
30475                     return;
30476                 }
30477                 for(var j = 0; j < c.rowspan; j++) {
30478                     if (typeof(ret[rn+j]) == 'undefined') {
30479                         continue; // we have a problem..
30480                     }
30481                     ret[rn+j][cn] = c;
30482                     for(var i = 0; i < c.colspan; i++) {
30483                         ret[rn+j][cn+i] = c;
30484                     }
30485                 }
30486                 
30487                 cn += c.colspan;
30488             }, this);
30489             rn++;
30490         }, this);
30491         
30492         // initalize widths.?
30493         // either all widths or no widths..
30494         if (all_auto) {
30495             this.colWidths[0] = false; // no widths flag.
30496         }
30497         
30498         
30499         return ret;
30500         
30501     },
30502     
30503     
30504     
30505     
30506     mergeRight: function()
30507     {
30508          
30509         // get the contents of the next cell along..
30510         var tr = this.node.closest('tr');
30511         var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
30512         if (i >= tr.childNodes.length - 1) {
30513             return; // no cells on right to merge with.
30514         }
30515         var table = this.toTableArray();
30516         
30517         if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
30518             return; // nothing right?
30519         }
30520         var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
30521         // right cell - must be same rowspan and on the same row.
30522         if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
30523             return; // right hand side is not same rowspan.
30524         }
30525         
30526         
30527         
30528         this.node.innerHTML += ' ' + rc.cell.innerHTML;
30529         tr.removeChild(rc.cell);
30530         this.colspan += rc.colspan;
30531         this.node.setAttribute('colspan', this.colspan);
30532
30533         var table = this.toTableArray();
30534         this.normalizeWidths(table);
30535         this.updateWidths(table);
30536     },
30537     
30538     
30539     mergeBelow : function()
30540     {
30541         var table = this.toTableArray();
30542         if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
30543             return; // no row below
30544         }
30545         if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
30546             return; // nothing right?
30547         }
30548         var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
30549         
30550         if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
30551             return; // right hand side is not same rowspan.
30552         }
30553         this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
30554         rc.cell.parentNode.removeChild(rc.cell);
30555         this.rowspan += rc.rowspan;
30556         this.node.setAttribute('rowspan', this.rowspan);
30557     },
30558     
30559     split: function()
30560     {
30561         if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
30562             return;
30563         }
30564         var table = this.toTableArray();
30565         var cd = this.cellData;
30566         this.rowspan = 1;
30567         this.colspan = 1;
30568         
30569         for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
30570              
30571             
30572             for(var c = cd.col; c < cd.col + cd.colspan; c++) {
30573                 if (r == cd.row && c == cd.col) {
30574                     this.node.removeAttribute('rowspan');
30575                     this.node.removeAttribute('colspan');
30576                 }
30577                  
30578                 var ntd = this.node.cloneNode(); // which col/row should be 0..
30579                 ntd.removeAttribute('id'); 
30580                 ntd.style.width  = this.colWidths[c];
30581                 ntd.innerHTML = '';
30582                 table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
30583             }
30584             
30585         }
30586         this.redrawAllCells(table);
30587         
30588     },
30589     
30590     
30591     
30592     redrawAllCells: function(table)
30593     {
30594         
30595          
30596         var tab = this.node.closest('tr').closest('table');
30597         var ctr = tab.rows[0].parentNode;
30598         Array.from(tab.rows).forEach(function(r, ri){
30599             
30600             Array.from(r.cells).forEach(function(ce, ci){
30601                 ce.parentNode.removeChild(ce);
30602             });
30603             r.parentNode.removeChild(r);
30604         });
30605         for(var r = 0 ; r < table.length; r++) {
30606             var re = tab.rows[r];
30607             
30608             var re = tab.ownerDocument.createElement('tr');
30609             ctr.appendChild(re);
30610             for(var c = 0 ; c < table[r].length; c++) {
30611                 if (table[r][c].cell === false) {
30612                     continue;
30613                 }
30614                 
30615                 re.appendChild(table[r][c].cell);
30616                  
30617                 table[r][c].cell = false;
30618             }
30619         }
30620         
30621     },
30622     updateWidths : function(table)
30623     {
30624         for(var r = 0 ; r < table.length; r++) {
30625            
30626             for(var c = 0 ; c < table[r].length; c++) {
30627                 if (table[r][c].cell === false) {
30628                     continue;
30629                 }
30630                 
30631                 if (this.colWidths[0] != false && table[r][c].colspan < 2) {
30632                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
30633                     el.width = Math.floor(this.colWidths[c])  +'%';
30634                     el.updateElement(el.node);
30635                 }
30636                 if (this.colWidths[0] != false && table[r][c].colspan > 1) {
30637                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
30638                     var width = 0;
30639                     for(var i = 0; i < table[r][c].colspan; i ++) {
30640                         width += Math.floor(this.colWidths[c + i]);
30641                     }
30642                     el.width = width  +'%';
30643                     el.updateElement(el.node);
30644                 }
30645                 table[r][c].cell = false; // done
30646             }
30647         }
30648     },
30649     normalizeWidths : function(table)
30650     {
30651         if (this.colWidths[0] === false) {
30652             var nw = 100.0 / this.colWidths.length;
30653             this.colWidths.forEach(function(w,i) {
30654                 this.colWidths[i] = nw;
30655             },this);
30656             return;
30657         }
30658     
30659         var t = 0, missing = [];
30660         
30661         this.colWidths.forEach(function(w,i) {
30662             //if you mix % and
30663             this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
30664             var add =  this.colWidths[i];
30665             if (add > 0) {
30666                 t+=add;
30667                 return;
30668             }
30669             missing.push(i);
30670             
30671             
30672         },this);
30673         var nc = this.colWidths.length;
30674         if (missing.length) {
30675             var mult = (nc - missing.length) / (1.0 * nc);
30676             var t = mult * t;
30677             var ew = (100 -t) / (1.0 * missing.length);
30678             this.colWidths.forEach(function(w,i) {
30679                 if (w > 0) {
30680                     this.colWidths[i] = w * mult;
30681                     return;
30682                 }
30683                 
30684                 this.colWidths[i] = ew;
30685             }, this);
30686             // have to make up numbers..
30687              
30688         }
30689         // now we should have all the widths..
30690         
30691     
30692     },
30693     
30694     shrinkColumn : function()
30695     {
30696         var table = this.toTableArray();
30697         this.normalizeWidths(table);
30698         var col = this.cellData.col;
30699         var nw = this.colWidths[col] * 0.8;
30700         if (nw < 5) {
30701             return;
30702         }
30703         var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
30704         this.colWidths.forEach(function(w,i) {
30705             if (i == col) {
30706                  this.colWidths[i] = nw;
30707                 return;
30708             }
30709             this.colWidths[i] += otherAdd
30710         }, this);
30711         this.updateWidths(table);
30712          
30713     },
30714     growColumn : function()
30715     {
30716         var table = this.toTableArray();
30717         this.normalizeWidths(table);
30718         var col = this.cellData.col;
30719         var nw = this.colWidths[col] * 1.2;
30720         if (nw > 90) {
30721             return;
30722         }
30723         var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
30724         this.colWidths.forEach(function(w,i) {
30725             if (i == col) {
30726                 this.colWidths[i] = nw;
30727                 return;
30728             }
30729             this.colWidths[i] -= otherSub
30730         }, this);
30731         this.updateWidths(table);
30732          
30733     },
30734     deleteRow : function()
30735     {
30736         // delete this rows 'tr'
30737         // if any of the cells in this row have a rowspan > 1 && row!= this row..
30738         // then reduce the rowspan.
30739         var table = this.toTableArray();
30740         // this.cellData.row;
30741         for (var i =0;i< table[this.cellData.row].length ; i++) {
30742             var c = table[this.cellData.row][i];
30743             if (c.row != this.cellData.row) {
30744                 
30745                 c.rowspan--;
30746                 c.cell.setAttribute('rowspan', c.rowspan);
30747                 continue;
30748             }
30749             if (c.rowspan > 1) {
30750                 c.rowspan--;
30751                 c.cell.setAttribute('rowspan', c.rowspan);
30752             }
30753         }
30754         table.splice(this.cellData.row,1);
30755         this.redrawAllCells(table);
30756         
30757     },
30758     deleteColumn : function()
30759     {
30760         var table = this.toTableArray();
30761         
30762         for (var i =0;i< table.length ; i++) {
30763             var c = table[i][this.cellData.col];
30764             if (c.col != this.cellData.col) {
30765                 table[i][this.cellData.col].colspan--;
30766             } else if (c.colspan > 1) {
30767                 c.colspan--;
30768                 c.cell.setAttribute('colspan', c.colspan);
30769             }
30770             table[i].splice(this.cellData.col,1);
30771         }
30772         
30773         this.redrawAllCells(table);
30774     }
30775     
30776     
30777     
30778     
30779 })
30780
30781 //<script type="text/javascript">
30782
30783 /*
30784  * Based  Ext JS Library 1.1.1
30785  * Copyright(c) 2006-2007, Ext JS, LLC.
30786  * LGPL
30787  *
30788  */
30789  
30790 /**
30791  * @class Roo.HtmlEditorCore
30792  * @extends Roo.Component
30793  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
30794  *
30795  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
30796  */
30797
30798 Roo.HtmlEditorCore = function(config){
30799     
30800     
30801     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
30802     
30803     
30804     this.addEvents({
30805         /**
30806          * @event initialize
30807          * Fires when the editor is fully initialized (including the iframe)
30808          * @param {Roo.HtmlEditorCore} this
30809          */
30810         initialize: true,
30811         /**
30812          * @event activate
30813          * Fires when the editor is first receives the focus. Any insertion must wait
30814          * until after this event.
30815          * @param {Roo.HtmlEditorCore} this
30816          */
30817         activate: true,
30818          /**
30819          * @event beforesync
30820          * Fires before the textarea is updated with content from the editor iframe. Return false
30821          * to cancel the sync.
30822          * @param {Roo.HtmlEditorCore} this
30823          * @param {String} html
30824          */
30825         beforesync: true,
30826          /**
30827          * @event beforepush
30828          * Fires before the iframe editor is updated with content from the textarea. Return false
30829          * to cancel the push.
30830          * @param {Roo.HtmlEditorCore} this
30831          * @param {String} html
30832          */
30833         beforepush: true,
30834          /**
30835          * @event sync
30836          * Fires when the textarea is updated with content from the editor iframe.
30837          * @param {Roo.HtmlEditorCore} this
30838          * @param {String} html
30839          */
30840         sync: true,
30841          /**
30842          * @event push
30843          * Fires when the iframe editor is updated with content from the textarea.
30844          * @param {Roo.HtmlEditorCore} this
30845          * @param {String} html
30846          */
30847         push: true,
30848         
30849         /**
30850          * @event editorevent
30851          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
30852          * @param {Roo.HtmlEditorCore} this
30853          */
30854         editorevent: true 
30855         
30856         
30857     });
30858     
30859     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
30860     
30861     // defaults : white / black...
30862     this.applyBlacklists();
30863     
30864     
30865     
30866 };
30867
30868
30869 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
30870
30871
30872      /**
30873      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
30874      */
30875     
30876     owner : false,
30877     
30878      /**
30879      * @cfg {String} css styling for resizing. (used on bootstrap only)
30880      */
30881     resize : false,
30882      /**
30883      * @cfg {Number} height (in pixels)
30884      */   
30885     height: 300,
30886    /**
30887      * @cfg {Number} width (in pixels)
30888      */   
30889     width: 500,
30890      /**
30891      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
30892      *         if you are doing an email editor, this probably needs disabling, it's designed
30893      */
30894     autoClean: true,
30895     
30896     /**
30897      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
30898      */
30899     enableBlocks : true,
30900     /**
30901      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
30902      * 
30903      */
30904     stylesheets: false,
30905      /**
30906      * @cfg {String} language default en - language of text (usefull for rtl languages)
30907      * 
30908      */
30909     language: 'en',
30910     
30911     /**
30912      * @cfg {boolean} allowComments - default false - allow comments in HTML source
30913      *          - by default they are stripped - if you are editing email you may need this.
30914      */
30915     allowComments: false,
30916     // id of frame..
30917     frameId: false,
30918     
30919     // private properties
30920     validationEvent : false,
30921     deferHeight: true,
30922     initialized : false,
30923     activated : false,
30924     sourceEditMode : false,
30925     onFocus : Roo.emptyFn,
30926     iframePad:3,
30927     hideMode:'offsets',
30928     
30929     clearUp: true,
30930     
30931     // blacklist + whitelisted elements..
30932     black: false,
30933     white: false,
30934      
30935     bodyCls : '',
30936
30937     
30938     undoManager : false,
30939     /**
30940      * Protected method that will not generally be called directly. It
30941      * is called when the editor initializes the iframe with HTML contents. Override this method if you
30942      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
30943      */
30944     getDocMarkup : function(){
30945         // body styles..
30946         var st = '';
30947         
30948         // inherit styels from page...?? 
30949         if (this.stylesheets === false) {
30950             
30951             Roo.get(document.head).select('style').each(function(node) {
30952                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
30953             });
30954             
30955             Roo.get(document.head).select('link').each(function(node) { 
30956                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
30957             });
30958             
30959         } else if (!this.stylesheets.length) {
30960                 // simple..
30961                 st = '<style type="text/css">' +
30962                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
30963                    '</style>';
30964         } else {
30965             for (var i in this.stylesheets) {
30966                 if (typeof(this.stylesheets[i]) != 'string') {
30967                     continue;
30968                 }
30969                 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
30970             }
30971             
30972         }
30973         
30974         st +=  '<style type="text/css">' +
30975             'IMG { cursor: pointer } ' +
30976         '</style>';
30977         
30978         st += '<meta name="google" content="notranslate">';
30979         
30980         var cls = 'notranslate roo-htmleditor-body';
30981         
30982         if(this.bodyCls.length){
30983             cls += ' ' + this.bodyCls;
30984         }
30985         
30986         return '<html  class="notranslate" translate="no"><head>' + st  +
30987             //<style type="text/css">' +
30988             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
30989             //'</style>' +
30990             ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
30991     },
30992
30993     // private
30994     onRender : function(ct, position)
30995     {
30996         var _t = this;
30997         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
30998         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
30999         
31000         
31001         this.el.dom.style.border = '0 none';
31002         this.el.dom.setAttribute('tabIndex', -1);
31003         this.el.addClass('x-hidden hide');
31004         
31005         
31006         
31007         if(Roo.isIE){ // fix IE 1px bogus margin
31008             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
31009         }
31010        
31011         
31012         this.frameId = Roo.id();
31013         
31014         var ifcfg = {
31015             tag: 'iframe',
31016             cls: 'form-control', // bootstrap..
31017             id: this.frameId,
31018             name: this.frameId,
31019             frameBorder : 'no',
31020             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
31021         };
31022         if (this.resize) {
31023             ifcfg.style = { resize : this.resize };
31024         }
31025         
31026         var iframe = this.owner.wrap.createChild(ifcfg, this.el); 
31027         
31028         
31029         this.iframe = iframe.dom;
31030
31031         this.assignDocWin();
31032         
31033         this.doc.designMode = 'on';
31034        
31035         this.doc.open();
31036         this.doc.write(this.getDocMarkup());
31037         this.doc.close();
31038
31039         
31040         var task = { // must defer to wait for browser to be ready
31041             run : function(){
31042                 //console.log("run task?" + this.doc.readyState);
31043                 this.assignDocWin();
31044                 if(this.doc.body || this.doc.readyState == 'complete'){
31045                     try {
31046                         this.doc.designMode="on";
31047                         
31048                     } catch (e) {
31049                         return;
31050                     }
31051                     Roo.TaskMgr.stop(task);
31052                     this.initEditor.defer(10, this);
31053                 }
31054             },
31055             interval : 10,
31056             duration: 10000,
31057             scope: this
31058         };
31059         Roo.TaskMgr.start(task);
31060
31061     },
31062
31063     // private
31064     onResize : function(w, h)
31065     {
31066          Roo.log('resize: ' +w + ',' + h );
31067         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
31068         if(!this.iframe){
31069             return;
31070         }
31071         if(typeof w == 'number'){
31072             
31073             this.iframe.style.width = w + 'px';
31074         }
31075         if(typeof h == 'number'){
31076             
31077             this.iframe.style.height = h + 'px';
31078             if(this.doc){
31079                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
31080             }
31081         }
31082         
31083     },
31084
31085     /**
31086      * Toggles the editor between standard and source edit mode.
31087      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
31088      */
31089     toggleSourceEdit : function(sourceEditMode){
31090         
31091         this.sourceEditMode = sourceEditMode === true;
31092         
31093         if(this.sourceEditMode){
31094  
31095             Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
31096             
31097         }else{
31098             Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
31099             //this.iframe.className = '';
31100             this.deferFocus();
31101         }
31102         //this.setSize(this.owner.wrap.getSize());
31103         //this.fireEvent('editmodechange', this, this.sourceEditMode);
31104     },
31105
31106     
31107   
31108
31109     /**
31110      * Protected method that will not generally be called directly. If you need/want
31111      * custom HTML cleanup, this is the method you should override.
31112      * @param {String} html The HTML to be cleaned
31113      * return {String} The cleaned HTML
31114      */
31115     cleanHtml : function(html)
31116     {
31117         html = String(html);
31118         if(html.length > 5){
31119             if(Roo.isSafari){ // strip safari nonsense
31120                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
31121             }
31122         }
31123         if(html == '&nbsp;'){
31124             html = '';
31125         }
31126         return html;
31127     },
31128
31129     /**
31130      * HTML Editor -> Textarea
31131      * Protected method that will not generally be called directly. Syncs the contents
31132      * of the editor iframe with the textarea.
31133      */
31134     syncValue : function()
31135     {
31136         //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
31137         if(this.initialized){
31138             
31139             if (this.undoManager) {
31140                 this.undoManager.addEvent();
31141             }
31142
31143             
31144             var bd = (this.doc.body || this.doc.documentElement);
31145            
31146             
31147             var sel = this.win.getSelection();
31148             
31149             var div = document.createElement('div');
31150             div.innerHTML = bd.innerHTML;
31151             var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
31152             if (gtx.length > 0) {
31153                 var rm = gtx.item(0).parentNode;
31154                 rm.parentNode.removeChild(rm);
31155             }
31156             
31157            
31158             if (this.enableBlocks) {
31159                 new Roo.htmleditor.FilterBlock({ node : div });
31160             }
31161             
31162             var html = div.innerHTML;
31163             
31164             //?? tidy?
31165             if (this.autoClean) {
31166                 
31167                 new Roo.htmleditor.FilterAttributes({
31168                     node : div,
31169                     attrib_white : [
31170                             'href',
31171                             'src',
31172                             'name',
31173                             'align',
31174                             'colspan',
31175                             'rowspan',
31176                             'data-display',
31177                             'data-width',
31178                             'start' ,
31179                             'style',
31180                             // youtube embed.
31181                             'class',
31182                             'allowfullscreen',
31183                             'frameborder',
31184                             'width',
31185                             'height',
31186                             'alt'
31187                             ],
31188                     attrib_clean : ['href', 'src' ] 
31189                 });
31190                 
31191                 var tidy = new Roo.htmleditor.TidySerializer({
31192                     inner:  true
31193                 });
31194                 html  = tidy.serialize(div);
31195                 
31196             }
31197             
31198             
31199             if(Roo.isSafari){
31200                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
31201                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
31202                 if(m && m[1]){
31203                     html = '<div style="'+m[0]+'">' + html + '</div>';
31204                 }
31205             }
31206             html = this.cleanHtml(html);
31207             // fix up the special chars.. normaly like back quotes in word...
31208             // however we do not want to do this with chinese..
31209             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
31210                 
31211                 var cc = match.charCodeAt();
31212
31213                 // Get the character value, handling surrogate pairs
31214                 if (match.length == 2) {
31215                     // It's a surrogate pair, calculate the Unicode code point
31216                     var high = match.charCodeAt(0) - 0xD800;
31217                     var low  = match.charCodeAt(1) - 0xDC00;
31218                     cc = (high * 0x400) + low + 0x10000;
31219                 }  else if (
31220                     (cc >= 0x4E00 && cc < 0xA000 ) ||
31221                     (cc >= 0x3400 && cc < 0x4E00 ) ||
31222                     (cc >= 0xf900 && cc < 0xfb00 )
31223                 ) {
31224                         return match;
31225                 }  
31226          
31227                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
31228                 return "&#" + cc + ";";
31229                 
31230                 
31231             });
31232             
31233             
31234              
31235             if(this.owner.fireEvent('beforesync', this, html) !== false){
31236                 this.el.dom.value = html;
31237                 this.owner.fireEvent('sync', this, html);
31238             }
31239         }
31240     },
31241
31242     /**
31243      * TEXTAREA -> EDITABLE
31244      * Protected method that will not generally be called directly. Pushes the value of the textarea
31245      * into the iframe editor.
31246      */
31247     pushValue : function()
31248     {
31249         //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
31250         if(this.initialized){
31251             var v = this.el.dom.value.trim();
31252             
31253             
31254             if(this.owner.fireEvent('beforepush', this, v) !== false){
31255                 var d = (this.doc.body || this.doc.documentElement);
31256                 d.innerHTML = v;
31257                  
31258                 this.el.dom.value = d.innerHTML;
31259                 this.owner.fireEvent('push', this, v);
31260             }
31261             if (this.autoClean) {
31262                 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
31263                 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
31264             }
31265             if (this.enableBlocks) {
31266                 Roo.htmleditor.Block.initAll(this.doc.body);
31267             }
31268             
31269             this.updateLanguage();
31270             
31271             var lc = this.doc.body.lastChild;
31272             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
31273                 // add an extra line at the end.
31274                 this.doc.body.appendChild(this.doc.createElement('br'));
31275             }
31276             
31277             
31278         }
31279     },
31280
31281     // private
31282     deferFocus : function(){
31283         this.focus.defer(10, this);
31284     },
31285
31286     // doc'ed in Field
31287     focus : function(){
31288         if(this.win && !this.sourceEditMode){
31289             this.win.focus();
31290         }else{
31291             this.el.focus();
31292         }
31293     },
31294     
31295     assignDocWin: function()
31296     {
31297         var iframe = this.iframe;
31298         
31299          if(Roo.isIE){
31300             this.doc = iframe.contentWindow.document;
31301             this.win = iframe.contentWindow;
31302         } else {
31303 //            if (!Roo.get(this.frameId)) {
31304 //                return;
31305 //            }
31306 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
31307 //            this.win = Roo.get(this.frameId).dom.contentWindow;
31308             
31309             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
31310                 return;
31311             }
31312             
31313             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
31314             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
31315         }
31316     },
31317     
31318     // private
31319     initEditor : function(){
31320         //console.log("INIT EDITOR");
31321         this.assignDocWin();
31322         
31323         
31324         
31325         this.doc.designMode="on";
31326         this.doc.open();
31327         this.doc.write(this.getDocMarkup());
31328         this.doc.close();
31329         
31330         var dbody = (this.doc.body || this.doc.documentElement);
31331         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
31332         // this copies styles from the containing element into thsi one..
31333         // not sure why we need all of this..
31334         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
31335         
31336         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
31337         //ss['background-attachment'] = 'fixed'; // w3c
31338         dbody.bgProperties = 'fixed'; // ie
31339         dbody.setAttribute("translate", "no");
31340         
31341         //Roo.DomHelper.applyStyles(dbody, ss);
31342         Roo.EventManager.on(this.doc, {
31343              
31344             'mouseup': this.onEditorEvent,
31345             'dblclick': this.onEditorEvent,
31346             'click': this.onEditorEvent,
31347             'keyup': this.onEditorEvent,
31348             
31349             buffer:100,
31350             scope: this
31351         });
31352         Roo.EventManager.on(this.doc, {
31353             'paste': this.onPasteEvent,
31354             scope : this
31355         });
31356         if(Roo.isGecko){
31357             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
31358         }
31359         //??? needed???
31360         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
31361             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
31362         }
31363         this.initialized = true;
31364
31365         
31366         // initialize special key events - enter
31367         new Roo.htmleditor.KeyEnter({core : this});
31368         
31369          
31370         
31371         this.owner.fireEvent('initialize', this);
31372         this.pushValue();
31373     },
31374     // this is to prevent a href clicks resulting in a redirect?
31375    
31376     onPasteEvent : function(e,v)
31377     {
31378         // I think we better assume paste is going to be a dirty load of rubish from word..
31379         
31380         // even pasting into a 'email version' of this widget will have to clean up that mess.
31381         var cd = (e.browserEvent.clipboardData || window.clipboardData);
31382         
31383         // check what type of paste - if it's an image, then handle it differently.
31384         if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
31385             // pasting images? 
31386             var urlAPI = (window.createObjectURL && window) || 
31387                 (window.URL && URL.revokeObjectURL && URL) || 
31388                 (window.webkitURL && webkitURL);
31389             
31390             var r = new FileReader();
31391             var t = this;
31392             r.addEventListener('load',function()
31393             {
31394                 
31395                 var d = (new DOMParser().parseFromString('<img src="' + r.result+ '">', 'text/html')).body;
31396                 // is insert asycn?
31397                 if (t.enableBlocks) {
31398                     
31399                     Array.from(d.getElementsByTagName('img')).forEach(function(img) {
31400                         if (img.closest('figure')) { // assume!! that it's aready
31401                             return;
31402                         }
31403                         var fig  = new Roo.htmleditor.BlockFigure({
31404                             image_src  : img.src
31405                         });
31406                         fig.updateElement(img); // replace it..
31407                         
31408                     });
31409                 }
31410                 t.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
31411                 t.owner.fireEvent('paste', this);
31412             });
31413             r.readAsDataURL(cd.files[0]);
31414             
31415             e.preventDefault();
31416             
31417             return false;
31418         }
31419         if (cd.types.indexOf('text/html') < 0 ) {
31420             return false;
31421         }
31422         var images = [];
31423         var html = cd.getData('text/html'); // clipboard event
31424         if (cd.types.indexOf('text/rtf') > -1) {
31425             var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
31426             images = parser.doc ? parser.doc.getElementsByType('pict') : [];
31427         }
31428         //Roo.log(images);
31429         //Roo.log(imgs);
31430         // fixme..
31431         images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
31432                        .map(function(g) { return g.toDataURL(); })
31433                        .filter(function(g) { return g != 'about:blank'; });
31434         
31435         //Roo.log(html);
31436         html = this.cleanWordChars(html);
31437         
31438         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
31439         
31440         
31441         var sn = this.getParentElement();
31442         // check if d contains a table, and prevent nesting??
31443         //Roo.log(d.getElementsByTagName('table'));
31444         //Roo.log(sn);
31445         //Roo.log(sn.closest('table'));
31446         if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
31447             e.preventDefault();
31448             this.insertAtCursor("You can not nest tables");
31449             //Roo.log("prevent?"); // fixme - 
31450             return false;
31451         }
31452         
31453         
31454         
31455         if (images.length > 0) {
31456             // replace all v:imagedata - with img.
31457             var ar = Array.from(d.getElementsByTagName('v:imagedata'));
31458             Roo.each(ar, function(node) {
31459                 node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
31460                 node.parentNode.removeChild(node);
31461             });
31462             
31463             
31464             Roo.each(d.getElementsByTagName('img'), function(img, i) {
31465                 img.setAttribute('src', images[i]);
31466             });
31467         }
31468         if (this.autoClean) {
31469             new Roo.htmleditor.FilterWord({ node : d });
31470             
31471             new Roo.htmleditor.FilterStyleToTag({ node : d });
31472             new Roo.htmleditor.FilterAttributes({
31473                 node : d,
31474                 attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width', 'start'],
31475                 attrib_clean : ['href', 'src' ] 
31476             });
31477             new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
31478             // should be fonts..
31479             new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
31480             new Roo.htmleditor.FilterParagraph({ node : d });
31481             new Roo.htmleditor.FilterSpan({ node : d });
31482             new Roo.htmleditor.FilterLongBr({ node : d });
31483             new Roo.htmleditor.FilterComment({ node : d });
31484             
31485             
31486         }
31487         if (this.enableBlocks) {
31488                 
31489             Array.from(d.getElementsByTagName('img')).forEach(function(img) {
31490                 if (img.closest('figure')) { // assume!! that it's aready
31491                     return;
31492                 }
31493                 var fig  = new Roo.htmleditor.BlockFigure({
31494                     image_src  : img.src
31495                 });
31496                 fig.updateElement(img); // replace it..
31497                 
31498             });
31499         }
31500         
31501         
31502         this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
31503         if (this.enableBlocks) {
31504             Roo.htmleditor.Block.initAll(this.doc.body);
31505         }
31506          
31507         
31508         e.preventDefault();
31509         this.owner.fireEvent('paste', this);
31510         return false;
31511         // default behaveiour should be our local cleanup paste? (optional?)
31512         // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
31513         //this.owner.fireEvent('paste', e, v);
31514     },
31515     // private
31516     onDestroy : function(){
31517         
31518         
31519         
31520         if(this.rendered){
31521             
31522             //for (var i =0; i < this.toolbars.length;i++) {
31523             //    // fixme - ask toolbars for heights?
31524             //    this.toolbars[i].onDestroy();
31525            // }
31526             
31527             //this.wrap.dom.innerHTML = '';
31528             //this.wrap.remove();
31529         }
31530     },
31531
31532     // private
31533     onFirstFocus : function(){
31534         
31535         this.assignDocWin();
31536         this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
31537         
31538         this.activated = true;
31539          
31540     
31541         if(Roo.isGecko){ // prevent silly gecko errors
31542             this.win.focus();
31543             var s = this.win.getSelection();
31544             if(!s.focusNode || s.focusNode.nodeType != 3){
31545                 var r = s.getRangeAt(0);
31546                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
31547                 r.collapse(true);
31548                 this.deferFocus();
31549             }
31550             try{
31551                 this.execCmd('useCSS', true);
31552                 this.execCmd('styleWithCSS', false);
31553             }catch(e){}
31554         }
31555         this.owner.fireEvent('activate', this);
31556     },
31557
31558     // private
31559     adjustFont: function(btn){
31560         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
31561         //if(Roo.isSafari){ // safari
31562         //    adjust *= 2;
31563        // }
31564         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
31565         if(Roo.isSafari){ // safari
31566             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
31567             v =  (v < 10) ? 10 : v;
31568             v =  (v > 48) ? 48 : v;
31569             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
31570             
31571         }
31572         
31573         
31574         v = Math.max(1, v+adjust);
31575         
31576         this.execCmd('FontSize', v  );
31577     },
31578
31579     onEditorEvent : function(e)
31580     {
31581          
31582         
31583         if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
31584             return; // we do not handle this.. (undo manager does..)
31585         }
31586         // clicking a 'block'?
31587         
31588         // in theory this detects if the last element is not a br, then we try and do that.
31589         // its so clicking in space at bottom triggers adding a br and moving the cursor.
31590         if (e &&
31591             e.target.nodeName == 'BODY' &&
31592             e.type == "mouseup" &&
31593             this.doc.body.lastChild
31594            ) {
31595             var lc = this.doc.body.lastChild;
31596             // gtx-trans is google translate plugin adding crap.
31597             while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
31598                 lc = lc.previousSibling;
31599             }
31600             if (lc.nodeType == 1 && lc.nodeName != 'BR') {
31601             // if last element is <BR> - then dont do anything.
31602             
31603                 var ns = this.doc.createElement('br');
31604                 this.doc.body.appendChild(ns);
31605                 range = this.doc.createRange();
31606                 range.setStartAfter(ns);
31607                 range.collapse(true);
31608                 var sel = this.win.getSelection();
31609                 sel.removeAllRanges();
31610                 sel.addRange(range);
31611             }
31612         }
31613         
31614         
31615         
31616         this.fireEditorEvent(e);
31617       //  this.updateToolbar();
31618         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
31619     },
31620     
31621     fireEditorEvent: function(e)
31622     {
31623         this.owner.fireEvent('editorevent', this, e);
31624     },
31625
31626     insertTag : function(tg)
31627     {
31628         // could be a bit smarter... -> wrap the current selected tRoo..
31629         if (tg.toLowerCase() == 'span' ||
31630             tg.toLowerCase() == 'code' ||
31631             tg.toLowerCase() == 'sup' ||
31632             tg.toLowerCase() == 'sub' 
31633             ) {
31634             
31635             range = this.createRange(this.getSelection());
31636             var wrappingNode = this.doc.createElement(tg.toLowerCase());
31637             wrappingNode.appendChild(range.extractContents());
31638             range.insertNode(wrappingNode);
31639
31640             return;
31641             
31642             
31643             
31644         }
31645         this.execCmd("formatblock",   tg);
31646         this.undoManager.addEvent(); 
31647     },
31648     
31649     insertText : function(txt)
31650     {
31651         
31652         
31653         var range = this.createRange();
31654         range.deleteContents();
31655                //alert(Sender.getAttribute('label'));
31656                
31657         range.insertNode(this.doc.createTextNode(txt));
31658         this.undoManager.addEvent();
31659     } ,
31660     
31661      
31662
31663     /**
31664      * Executes a Midas editor command on the editor document and performs necessary focus and
31665      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
31666      * @param {String} cmd The Midas command
31667      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
31668      */
31669     relayCmd : function(cmd, value)
31670     {
31671         
31672         switch (cmd) {
31673             case 'justifyleft':
31674             case 'justifyright':
31675             case 'justifycenter':
31676                 // if we are in a cell, then we will adjust the
31677                 var n = this.getParentElement();
31678                 var td = n.closest('td');
31679                 if (td) {
31680                     var bl = Roo.htmleditor.Block.factory(td);
31681                     bl.textAlign = cmd.replace('justify','');
31682                     bl.updateElement();
31683                     this.owner.fireEvent('editorevent', this);
31684                     return;
31685                 }
31686                 this.execCmd('styleWithCSS', true); // 
31687                 break;
31688             case 'bold':
31689             case 'italic':
31690             case 'underline':                
31691                 // if there is no selection, then we insert, and set the curson inside it..
31692                 this.execCmd('styleWithCSS', false); 
31693                 break;
31694                 
31695         
31696             default:
31697                 break;
31698         }
31699         
31700         
31701         this.win.focus();
31702         this.execCmd(cmd, value);
31703         this.owner.fireEvent('editorevent', this);
31704         //this.updateToolbar();
31705         this.owner.deferFocus();
31706     },
31707
31708     /**
31709      * Executes a Midas editor command directly on the editor document.
31710      * For visual commands, you should use {@link #relayCmd} instead.
31711      * <b>This should only be called after the editor is initialized.</b>
31712      * @param {String} cmd The Midas command
31713      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
31714      */
31715     execCmd : function(cmd, value){
31716         this.doc.execCommand(cmd, false, value === undefined ? null : value);
31717         this.syncValue();
31718     },
31719  
31720  
31721    
31722     /**
31723      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
31724      * to insert tRoo.
31725      * @param {String} text | dom node.. 
31726      */
31727     insertAtCursor : function(text)
31728     {
31729         
31730         if(!this.activated){
31731             return;
31732         }
31733          
31734         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
31735             this.win.focus();
31736             
31737             
31738             // from jquery ui (MIT licenced)
31739             var range, node;
31740             var win = this.win;
31741             
31742             if (win.getSelection && win.getSelection().getRangeAt) {
31743                 
31744                 // delete the existing?
31745                 
31746                 this.createRange(this.getSelection()).deleteContents();
31747                 range = win.getSelection().getRangeAt(0);
31748                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
31749                 range.insertNode(node);
31750                 range = range.cloneRange();
31751                 range.collapse(false);
31752                  
31753                 win.getSelection().removeAllRanges();
31754                 win.getSelection().addRange(range);
31755                 
31756                 
31757                 
31758             } else if (win.document.selection && win.document.selection.createRange) {
31759                 // no firefox support
31760                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
31761                 win.document.selection.createRange().pasteHTML(txt);
31762             
31763             } else {
31764                 // no firefox support
31765                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
31766                 this.execCmd('InsertHTML', txt);
31767             } 
31768             this.syncValue();
31769             
31770             this.deferFocus();
31771         }
31772     },
31773  // private
31774     mozKeyPress : function(e){
31775         if(e.ctrlKey){
31776             var c = e.getCharCode(), cmd;
31777           
31778             if(c > 0){
31779                 c = String.fromCharCode(c).toLowerCase();
31780                 switch(c){
31781                     case 'b':
31782                         cmd = 'bold';
31783                         break;
31784                     case 'i':
31785                         cmd = 'italic';
31786                         break;
31787                     
31788                     case 'u':
31789                         cmd = 'underline';
31790                         break;
31791                     
31792                     //case 'v':
31793                       //  this.cleanUpPaste.defer(100, this);
31794                       //  return;
31795                         
31796                 }
31797                 if(cmd){
31798                     
31799                     this.relayCmd(cmd);
31800                     //this.win.focus();
31801                     //this.execCmd(cmd);
31802                     //this.deferFocus();
31803                     e.preventDefault();
31804                 }
31805                 
31806             }
31807         }
31808     },
31809
31810     // private
31811     fixKeys : function(){ // load time branching for fastest keydown performance
31812         
31813         
31814         if(Roo.isIE){
31815             return function(e){
31816                 var k = e.getKey(), r;
31817                 if(k == e.TAB){
31818                     e.stopEvent();
31819                     r = this.doc.selection.createRange();
31820                     if(r){
31821                         r.collapse(true);
31822                         r.pasteHTML('&#160;&#160;&#160;&#160;');
31823                         this.deferFocus();
31824                     }
31825                     return;
31826                 }
31827                 /// this is handled by Roo.htmleditor.KeyEnter
31828                  /*
31829                 if(k == e.ENTER){
31830                     r = this.doc.selection.createRange();
31831                     if(r){
31832                         var target = r.parentElement();
31833                         if(!target || target.tagName.toLowerCase() != 'li'){
31834                             e.stopEvent();
31835                             r.pasteHTML('<br/>');
31836                             r.collapse(false);
31837                             r.select();
31838                         }
31839                     }
31840                 }
31841                 */
31842                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31843                 //    this.cleanUpPaste.defer(100, this);
31844                 //    return;
31845                 //}
31846                 
31847                 
31848             };
31849         }else if(Roo.isOpera){
31850             return function(e){
31851                 var k = e.getKey();
31852                 if(k == e.TAB){
31853                     e.stopEvent();
31854                     this.win.focus();
31855                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
31856                     this.deferFocus();
31857                 }
31858                
31859                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31860                 //    this.cleanUpPaste.defer(100, this);
31861                  //   return;
31862                 //}
31863                 
31864             };
31865         }else if(Roo.isSafari){
31866             return function(e){
31867                 var k = e.getKey();
31868                 
31869                 if(k == e.TAB){
31870                     e.stopEvent();
31871                     this.execCmd('InsertText','\t');
31872                     this.deferFocus();
31873                     return;
31874                 }
31875                  this.mozKeyPress(e);
31876                 
31877                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31878                  //   this.cleanUpPaste.defer(100, this);
31879                  //   return;
31880                // }
31881                 
31882              };
31883         }
31884     }(),
31885     
31886     getAllAncestors: function()
31887     {
31888         var p = this.getSelectedNode();
31889         var a = [];
31890         if (!p) {
31891             a.push(p); // push blank onto stack..
31892             p = this.getParentElement();
31893         }
31894         
31895         
31896         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
31897             a.push(p);
31898             p = p.parentNode;
31899         }
31900         a.push(this.doc.body);
31901         return a;
31902     },
31903     lastSel : false,
31904     lastSelNode : false,
31905     
31906     
31907     getSelection : function() 
31908     {
31909         this.assignDocWin();
31910         return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
31911     },
31912     /**
31913      * Select a dom node
31914      * @param {DomElement} node the node to select
31915      */
31916     selectNode : function(node, collapse)
31917     {
31918         var nodeRange = node.ownerDocument.createRange();
31919         try {
31920             nodeRange.selectNode(node);
31921         } catch (e) {
31922             nodeRange.selectNodeContents(node);
31923         }
31924         if (collapse === true) {
31925             nodeRange.collapse(true);
31926         }
31927         //
31928         var s = this.win.getSelection();
31929         s.removeAllRanges();
31930         s.addRange(nodeRange);
31931     },
31932     
31933     getSelectedNode: function() 
31934     {
31935         // this may only work on Gecko!!!
31936         
31937         // should we cache this!!!!
31938         
31939          
31940          
31941         var range = this.createRange(this.getSelection()).cloneRange();
31942         
31943         if (Roo.isIE) {
31944             var parent = range.parentElement();
31945             while (true) {
31946                 var testRange = range.duplicate();
31947                 testRange.moveToElementText(parent);
31948                 if (testRange.inRange(range)) {
31949                     break;
31950                 }
31951                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
31952                     break;
31953                 }
31954                 parent = parent.parentElement;
31955             }
31956             return parent;
31957         }
31958         
31959         // is ancestor a text element.
31960         var ac =  range.commonAncestorContainer;
31961         if (ac.nodeType == 3) {
31962             ac = ac.parentNode;
31963         }
31964         
31965         var ar = ac.childNodes;
31966          
31967         var nodes = [];
31968         var other_nodes = [];
31969         var has_other_nodes = false;
31970         for (var i=0;i<ar.length;i++) {
31971             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
31972                 continue;
31973             }
31974             // fullly contained node.
31975             
31976             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
31977                 nodes.push(ar[i]);
31978                 continue;
31979             }
31980             
31981             // probably selected..
31982             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
31983                 other_nodes.push(ar[i]);
31984                 continue;
31985             }
31986             // outer..
31987             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
31988                 continue;
31989             }
31990             
31991             
31992             has_other_nodes = true;
31993         }
31994         if (!nodes.length && other_nodes.length) {
31995             nodes= other_nodes;
31996         }
31997         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
31998             return false;
31999         }
32000         
32001         return nodes[0];
32002     },
32003     
32004     
32005     createRange: function(sel)
32006     {
32007         // this has strange effects when using with 
32008         // top toolbar - not sure if it's a great idea.
32009         //this.editor.contentWindow.focus();
32010         if (typeof sel != "undefined") {
32011             try {
32012                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
32013             } catch(e) {
32014                 return this.doc.createRange();
32015             }
32016         } else {
32017             return this.doc.createRange();
32018         }
32019     },
32020     getParentElement: function()
32021     {
32022         
32023         this.assignDocWin();
32024         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
32025         
32026         var range = this.createRange(sel);
32027          
32028         try {
32029             var p = range.commonAncestorContainer;
32030             while (p.nodeType == 3) { // text node
32031                 p = p.parentNode;
32032             }
32033             return p;
32034         } catch (e) {
32035             return null;
32036         }
32037     
32038     },
32039     /***
32040      *
32041      * Range intersection.. the hard stuff...
32042      *  '-1' = before
32043      *  '0' = hits..
32044      *  '1' = after.
32045      *         [ -- selected range --- ]
32046      *   [fail]                        [fail]
32047      *
32048      *    basically..
32049      *      if end is before start or  hits it. fail.
32050      *      if start is after end or hits it fail.
32051      *
32052      *   if either hits (but other is outside. - then it's not 
32053      *   
32054      *    
32055      **/
32056     
32057     
32058     // @see http://www.thismuchiknow.co.uk/?p=64.
32059     rangeIntersectsNode : function(range, node)
32060     {
32061         var nodeRange = node.ownerDocument.createRange();
32062         try {
32063             nodeRange.selectNode(node);
32064         } catch (e) {
32065             nodeRange.selectNodeContents(node);
32066         }
32067     
32068         var rangeStartRange = range.cloneRange();
32069         rangeStartRange.collapse(true);
32070     
32071         var rangeEndRange = range.cloneRange();
32072         rangeEndRange.collapse(false);
32073     
32074         var nodeStartRange = nodeRange.cloneRange();
32075         nodeStartRange.collapse(true);
32076     
32077         var nodeEndRange = nodeRange.cloneRange();
32078         nodeEndRange.collapse(false);
32079     
32080         return rangeStartRange.compareBoundaryPoints(
32081                  Range.START_TO_START, nodeEndRange) == -1 &&
32082                rangeEndRange.compareBoundaryPoints(
32083                  Range.START_TO_START, nodeStartRange) == 1;
32084         
32085          
32086     },
32087     rangeCompareNode : function(range, node)
32088     {
32089         var nodeRange = node.ownerDocument.createRange();
32090         try {
32091             nodeRange.selectNode(node);
32092         } catch (e) {
32093             nodeRange.selectNodeContents(node);
32094         }
32095         
32096         
32097         range.collapse(true);
32098     
32099         nodeRange.collapse(true);
32100      
32101         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
32102         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
32103          
32104         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
32105         
32106         var nodeIsBefore   =  ss == 1;
32107         var nodeIsAfter    = ee == -1;
32108         
32109         if (nodeIsBefore && nodeIsAfter) {
32110             return 0; // outer
32111         }
32112         if (!nodeIsBefore && nodeIsAfter) {
32113             return 1; //right trailed.
32114         }
32115         
32116         if (nodeIsBefore && !nodeIsAfter) {
32117             return 2;  // left trailed.
32118         }
32119         // fully contined.
32120         return 3;
32121     },
32122  
32123     cleanWordChars : function(input) {// change the chars to hex code
32124         
32125        var swapCodes  = [ 
32126             [    8211, "&#8211;" ], 
32127             [    8212, "&#8212;" ], 
32128             [    8216,  "'" ],  
32129             [    8217, "'" ],  
32130             [    8220, '"' ],  
32131             [    8221, '"' ],  
32132             [    8226, "*" ],  
32133             [    8230, "..." ]
32134         ]; 
32135         var output = input;
32136         Roo.each(swapCodes, function(sw) { 
32137             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
32138             
32139             output = output.replace(swapper, sw[1]);
32140         });
32141         
32142         return output;
32143     },
32144     
32145      
32146     
32147         
32148     
32149     cleanUpChild : function (node)
32150     {
32151         
32152         new Roo.htmleditor.FilterComment({node : node});
32153         new Roo.htmleditor.FilterAttributes({
32154                 node : node,
32155                 attrib_black : this.ablack,
32156                 attrib_clean : this.aclean,
32157                 style_white : this.cwhite,
32158                 style_black : this.cblack
32159         });
32160         new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
32161         new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
32162          
32163         
32164     },
32165     
32166     /**
32167      * Clean up MS wordisms...
32168      * @deprecated - use filter directly
32169      */
32170     cleanWord : function(node)
32171     {
32172         new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
32173         new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
32174         
32175     },
32176    
32177     
32178     /**
32179
32180      * @deprecated - use filters
32181      */
32182     cleanTableWidths : function(node)
32183     {
32184         new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
32185         
32186  
32187     },
32188     
32189      
32190         
32191     applyBlacklists : function()
32192     {
32193         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
32194         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
32195         
32196         this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
32197         this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
32198         this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
32199         
32200         this.white = [];
32201         this.black = [];
32202         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
32203             if (b.indexOf(tag) > -1) {
32204                 return;
32205             }
32206             this.white.push(tag);
32207             
32208         }, this);
32209         
32210         Roo.each(w, function(tag) {
32211             if (b.indexOf(tag) > -1) {
32212                 return;
32213             }
32214             if (this.white.indexOf(tag) > -1) {
32215                 return;
32216             }
32217             this.white.push(tag);
32218             
32219         }, this);
32220         
32221         
32222         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
32223             if (w.indexOf(tag) > -1) {
32224                 return;
32225             }
32226             this.black.push(tag);
32227             
32228         }, this);
32229         
32230         Roo.each(b, function(tag) {
32231             if (w.indexOf(tag) > -1) {
32232                 return;
32233             }
32234             if (this.black.indexOf(tag) > -1) {
32235                 return;
32236             }
32237             this.black.push(tag);
32238             
32239         }, this);
32240         
32241         
32242         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
32243         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
32244         
32245         this.cwhite = [];
32246         this.cblack = [];
32247         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
32248             if (b.indexOf(tag) > -1) {
32249                 return;
32250             }
32251             this.cwhite.push(tag);
32252             
32253         }, this);
32254         
32255         Roo.each(w, function(tag) {
32256             if (b.indexOf(tag) > -1) {
32257                 return;
32258             }
32259             if (this.cwhite.indexOf(tag) > -1) {
32260                 return;
32261             }
32262             this.cwhite.push(tag);
32263             
32264         }, this);
32265         
32266         
32267         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
32268             if (w.indexOf(tag) > -1) {
32269                 return;
32270             }
32271             this.cblack.push(tag);
32272             
32273         }, this);
32274         
32275         Roo.each(b, function(tag) {
32276             if (w.indexOf(tag) > -1) {
32277                 return;
32278             }
32279             if (this.cblack.indexOf(tag) > -1) {
32280                 return;
32281             }
32282             this.cblack.push(tag);
32283             
32284         }, this);
32285     },
32286     
32287     setStylesheets : function(stylesheets)
32288     {
32289         if(typeof(stylesheets) == 'string'){
32290             Roo.get(this.iframe.contentDocument.head).createChild({
32291                 tag : 'link',
32292                 rel : 'stylesheet',
32293                 type : 'text/css',
32294                 href : stylesheets
32295             });
32296             
32297             return;
32298         }
32299         var _this = this;
32300      
32301         Roo.each(stylesheets, function(s) {
32302             if(!s.length){
32303                 return;
32304             }
32305             
32306             Roo.get(_this.iframe.contentDocument.head).createChild({
32307                 tag : 'link',
32308                 rel : 'stylesheet',
32309                 type : 'text/css',
32310                 href : s
32311             });
32312         });
32313
32314         
32315     },
32316     
32317     
32318     updateLanguage : function()
32319     {
32320         if (!this.iframe || !this.iframe.contentDocument) {
32321             return;
32322         }
32323         Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
32324     },
32325     
32326     
32327     removeStylesheets : function()
32328     {
32329         var _this = this;
32330         
32331         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
32332             s.remove();
32333         });
32334     },
32335     
32336     setStyle : function(style)
32337     {
32338         Roo.get(this.iframe.contentDocument.head).createChild({
32339             tag : 'style',
32340             type : 'text/css',
32341             html : style
32342         });
32343
32344         return;
32345     }
32346     
32347     // hide stuff that is not compatible
32348     /**
32349      * @event blur
32350      * @hide
32351      */
32352     /**
32353      * @event change
32354      * @hide
32355      */
32356     /**
32357      * @event focus
32358      * @hide
32359      */
32360     /**
32361      * @event specialkey
32362      * @hide
32363      */
32364     /**
32365      * @cfg {String} fieldClass @hide
32366      */
32367     /**
32368      * @cfg {String} focusClass @hide
32369      */
32370     /**
32371      * @cfg {String} autoCreate @hide
32372      */
32373     /**
32374      * @cfg {String} inputType @hide
32375      */
32376     /**
32377      * @cfg {String} invalidClass @hide
32378      */
32379     /**
32380      * @cfg {String} invalidText @hide
32381      */
32382     /**
32383      * @cfg {String} msgFx @hide
32384      */
32385     /**
32386      * @cfg {String} validateOnBlur @hide
32387      */
32388 });
32389
32390 Roo.HtmlEditorCore.white = [
32391         'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
32392         
32393        'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
32394        'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
32395        'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
32396        'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
32397        'TABLE',   'UL',         'XMP', 
32398        
32399        'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
32400       'THEAD',   'TR', 
32401      
32402       'DIR', 'MENU', 'OL', 'UL', 'DL',
32403        
32404       'EMBED',  'OBJECT'
32405 ];
32406
32407
32408 Roo.HtmlEditorCore.black = [
32409     //    'embed',  'object', // enable - backend responsiblity to clean thiese
32410         'APPLET', // 
32411         'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
32412         'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
32413         'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
32414         'SCRIPT', 'STYLE' ,'TITLE',  'XML',
32415         //'FONT' // CLEAN LATER..
32416         'COLGROUP', 'COL'   // messy tables.
32417         
32418         
32419 ];
32420 Roo.HtmlEditorCore.clean = [ // ?? needed???
32421      'SCRIPT', 'STYLE', 'TITLE', 'XML'
32422 ];
32423 Roo.HtmlEditorCore.tag_remove = [
32424     'FONT', 'TBODY'  
32425 ];
32426 // attributes..
32427
32428 Roo.HtmlEditorCore.ablack = [
32429     'on'
32430 ];
32431     
32432 Roo.HtmlEditorCore.aclean = [ 
32433     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
32434 ];
32435
32436 // protocols..
32437 Roo.HtmlEditorCore.pwhite= [
32438         'http',  'https',  'mailto'
32439 ];
32440
32441 // white listed style attributes.
32442 Roo.HtmlEditorCore.cwhite= [
32443       //  'text-align', /// default is to allow most things..
32444       
32445          
32446 //        'font-size'//??
32447 ];
32448
32449 // black listed style attributes.
32450 Roo.HtmlEditorCore.cblack= [
32451       //  'font-size' -- this can be set by the project 
32452 ];
32453
32454
32455
32456
32457     /*
32458  * - LGPL
32459  *
32460  * HtmlEditor
32461  * 
32462  */
32463
32464 /**
32465  * @class Roo.bootstrap.form.HtmlEditor
32466  * @extends Roo.bootstrap.form.TextArea
32467  * Bootstrap HtmlEditor class
32468
32469  * @constructor
32470  * Create a new HtmlEditor
32471  * @param {Object} config The config object
32472  */
32473
32474 Roo.bootstrap.form.HtmlEditor = function(config){
32475
32476     this.addEvents({
32477             /**
32478              * @event initialize
32479              * Fires when the editor is fully initialized (including the iframe)
32480              * @param {Roo.bootstrap.form.HtmlEditor} this
32481              */
32482             initialize: true,
32483             /**
32484              * @event activate
32485              * Fires when the editor is first receives the focus. Any insertion must wait
32486              * until after this event.
32487              * @param {Roo.bootstrap.form.HtmlEditor} this
32488              */
32489             activate: true,
32490              /**
32491              * @event beforesync
32492              * Fires before the textarea is updated with content from the editor iframe. Return false
32493              * to cancel the sync.
32494              * @param {Roo.bootstrap.form.HtmlEditor} this
32495              * @param {String} html
32496              */
32497             beforesync: true,
32498              /**
32499              * @event beforepush
32500              * Fires before the iframe editor is updated with content from the textarea. Return false
32501              * to cancel the push.
32502              * @param {Roo.bootstrap.form.HtmlEditor} this
32503              * @param {String} html
32504              */
32505             beforepush: true,
32506              /**
32507              * @event sync
32508              * Fires when the textarea is updated with content from the editor iframe.
32509              * @param {Roo.bootstrap.form.HtmlEditor} this
32510              * @param {String} html
32511              */
32512             sync: true,
32513              /**
32514              * @event push
32515              * Fires when the iframe editor is updated with content from the textarea.
32516              * @param {Roo.bootstrap.form.HtmlEditor} this
32517              * @param {String} html
32518              */
32519             push: true,
32520              /**
32521              * @event editmodechange
32522              * Fires when the editor switches edit modes
32523              * @param {Roo.bootstrap.form.HtmlEditor} this
32524              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
32525              */
32526             editmodechange: true,
32527             /**
32528              * @event editorevent
32529              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
32530              * @param {Roo.bootstrap.form.HtmlEditor} this
32531              */
32532             editorevent: true,
32533             /**
32534              * @event firstfocus
32535              * Fires when on first focus - needed by toolbars..
32536              * @param {Roo.bootstrap.form.HtmlEditor} this
32537              */
32538             firstfocus: true,
32539             /**
32540              * @event autosave
32541              * Auto save the htmlEditor value as a file into Events
32542              * @param {Roo.bootstrap.form.HtmlEditor} this
32543              */
32544             autosave: true,
32545             /**
32546              * @event savedpreview
32547              * preview the saved version of htmlEditor
32548              * @param {Roo.bootstrap.form.HtmlEditor} this
32549              */
32550             savedpreview: true,
32551              /**
32552             * @event stylesheetsclick
32553             * Fires when press the Sytlesheets button
32554             * @param {Roo.HtmlEditorCore} this
32555             */
32556             stylesheetsclick: true,
32557             /**
32558             * @event paste
32559             * Fires when press user pastes into the editor
32560             * @param {Roo.HtmlEditorCore} this
32561             */
32562             paste: true,
32563             /**
32564             * @event imageadd
32565             * Fires when on any editor when an image is added (excluding paste)
32566             * @param {Roo.bootstrap.form.HtmlEditor} this
32567             */
32568            imageadd: true ,
32569             /**
32570             * @event imageupdated
32571             * Fires when on any editor when an image is changed (excluding paste)
32572             * @param {Roo.bootstrap.form.HtmlEditor} this
32573             * @param {HTMLElement} img could also be a figure if blocks are enabled
32574             */
32575            imageupdate: true ,
32576            /**
32577             * @event imagedelete
32578             * Fires when on any editor when an image is deleted
32579             * @param {Roo.bootstrap.form.HtmlEditor} this
32580             * @param {HTMLElement} img could also be a figure if blocks are enabled
32581             */
32582            imagedelete: true  
32583     });
32584     Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
32585     if (!this.toolbars) {
32586         this.toolbars = [];
32587     }
32588     
32589     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
32590     
32591 };
32592
32593
32594 Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea,  {
32595     
32596     
32597       /**
32598      * @cfg {Array|boolean} toolbars Array of toolbars, or names of toolbars. - true for standard, and false for none.
32599      */
32600     toolbars : true,
32601     
32602      /**
32603     * @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
32604     */
32605     btns : [],
32606    
32607      /**
32608      * @cfg {String} resize  (none|both|horizontal|vertical) - css resize of element
32609      */
32610     resize : false,
32611      /**
32612      * @cfg {Number} height (in pixels)
32613      */   
32614     height: 300,
32615    /**
32616      * @cfg {Number} width (in pixels)
32617      */   
32618     width: false,
32619     
32620     /**
32621      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
32622      * 
32623      */
32624     stylesheets: false,
32625     
32626     // id of frame..
32627     frameId: false,
32628     
32629     // private properties
32630     validationEvent : false,
32631     deferHeight: true,
32632     initialized : false,
32633     activated : false,
32634     
32635     onFocus : Roo.emptyFn,
32636     iframePad:3,
32637     hideMode:'offsets',
32638     
32639     tbContainer : false,
32640     
32641     bodyCls : '',
32642     
32643     toolbarContainer :function() {
32644         return this.wrap.select('.x-html-editor-tb',true).first();
32645     },
32646
32647     /**
32648      * Protected method that will not generally be called directly. It
32649      * is called when the editor creates its toolbar. Override this method if you need to
32650      * add custom toolbar buttons.
32651      * @param {HtmlEditor} editor
32652      */
32653     createToolbar : function()
32654     {
32655         //Roo.log('renewing');
32656         //Roo.log("create toolbars");
32657         if (this.toolbars === false) {
32658             return;
32659         }
32660         if (this.toolbars === true) {
32661             this.toolbars = [ 'Standard' ];
32662         }
32663         
32664         var ar = Array.from(this.toolbars);
32665         this.toolbars = [];
32666         ar.forEach(function(t,i) {
32667             if (typeof(t) == 'string') {
32668                 t = {
32669                     xtype : t
32670                 };
32671             }
32672             if (typeof(t) == 'object' && typeof(t.xtype) == 'string') {
32673                 t.editor = this;
32674                 t.xns = t.xns || Roo.bootstrap.form.HtmlEditorToolbar;
32675                 t = Roo.factory(t);
32676             }
32677             this.toolbars[i] = t;
32678             this.toolbars[i].render(this.toolbarContainer());
32679         }, this);
32680         
32681         
32682     },
32683
32684      
32685     // private
32686     onRender : function(ct, position)
32687     {
32688        // Roo.log("Call onRender: " + this.xtype);
32689         var _t = this;
32690         Roo.bootstrap.form.HtmlEditor.superclass.onRender.call(this, ct, position);
32691       
32692         this.wrap = this.inputEl().wrap({
32693             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
32694         });
32695         
32696         this.editorcore.onRender(ct, position);
32697          
32698          
32699         this.createToolbar(this);
32700        
32701         
32702           
32703         
32704     },
32705
32706     // private
32707     onResize : function(w, h)
32708     {
32709         Roo.log('resize: ' +w + ',' + h );
32710         Roo.bootstrap.form.HtmlEditor.superclass.onResize.apply(this, arguments);
32711         var ew = false;
32712         var eh = false;
32713         
32714         if(this.inputEl() ){
32715             if(typeof w == 'number'){
32716                 var aw = w - this.wrap.getFrameWidth('lr');
32717                 this.inputEl().setWidth(this.adjustWidth('textarea', aw));
32718                 ew = aw;
32719             }
32720             if(typeof h == 'number'){
32721                  var tbh = -11;  // fixme it needs to tool bar size!
32722                 for (var i =0; i < this.toolbars.length;i++) {
32723                     // fixme - ask toolbars for heights?
32724                     tbh += this.toolbars[i].el.getHeight();
32725                     //if (this.toolbars[i].footer) {
32726                     //    tbh += this.toolbars[i].footer.el.getHeight();
32727                     //}
32728                 }
32729               
32730                 
32731                 
32732                 
32733                 
32734                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
32735                 ah -= 5; // knock a few pixes off for look..
32736                 this.inputEl().setHeight(this.adjustWidth('textarea', ah));
32737                 var eh = ah;
32738             }
32739         }
32740         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
32741         this.editorcore.onResize(ew,eh);
32742         
32743     },
32744
32745     /**
32746      * Toggles the editor between standard and source edit mode.
32747      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
32748      */
32749     toggleSourceEdit : function(sourceEditMode)
32750     {
32751         this.editorcore.toggleSourceEdit(sourceEditMode);
32752         
32753         if(this.editorcore.sourceEditMode){
32754             Roo.log('editor - showing textarea');
32755             
32756 //            Roo.log('in');
32757 //            Roo.log(this.syncValue());
32758             this.syncValue();
32759             this.inputEl().removeClass(['hide', 'x-hidden']);
32760             this.inputEl().dom.removeAttribute('tabIndex');
32761             this.inputEl().focus();
32762         }else{
32763             Roo.log('editor - hiding textarea');
32764 //            Roo.log('out')
32765 //            Roo.log(this.pushValue()); 
32766             this.pushValue();
32767             
32768             this.inputEl().addClass(['hide', 'x-hidden']);
32769             this.inputEl().dom.setAttribute('tabIndex', -1);
32770             //this.deferFocus();
32771         }
32772          
32773         //if(this.resizable){
32774         //    this.setSize(this.wrap.getSize());
32775         //}
32776         
32777         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
32778     },
32779  
32780     // private (for BoxComponent)
32781     adjustSize : Roo.BoxComponent.prototype.adjustSize,
32782
32783     // private (for BoxComponent)
32784     getResizeEl : function(){
32785         return this.wrap;
32786     },
32787
32788     // private (for BoxComponent)
32789     getPositionEl : function(){
32790         return this.wrap;
32791     },
32792
32793     // private
32794     initEvents : function(){
32795         this.originalValue = this.getValue();
32796     },
32797
32798 //    /**
32799 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
32800 //     * @method
32801 //     */
32802 //    markInvalid : Roo.emptyFn,
32803 //    /**
32804 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
32805 //     * @method
32806 //     */
32807 //    clearInvalid : Roo.emptyFn,
32808
32809     setValue : function(v){
32810         Roo.bootstrap.form.HtmlEditor.superclass.setValue.call(this, v);
32811         this.editorcore.pushValue();
32812     },
32813
32814      
32815     // private
32816     deferFocus : function(){
32817         this.focus.defer(10, this);
32818     },
32819
32820     // doc'ed in Field
32821     focus : function(){
32822         this.editorcore.focus();
32823         
32824     },
32825       
32826
32827     // private
32828     onDestroy : function(){
32829         
32830         
32831         
32832         if(this.rendered){
32833             
32834             for (var i =0; i < this.toolbars.length;i++) {
32835                 // fixme - ask toolbars for heights?
32836                 this.toolbars[i].onDestroy();
32837             }
32838             
32839             this.wrap.dom.innerHTML = '';
32840             this.wrap.remove();
32841         }
32842     },
32843
32844     // private
32845     onFirstFocus : function(){
32846         //Roo.log("onFirstFocus");
32847         this.editorcore.onFirstFocus();
32848          for (var i =0; i < this.toolbars.length;i++) {
32849             this.toolbars[i].onFirstFocus();
32850         }
32851         
32852     },
32853     
32854     // private
32855     syncValue : function()
32856     {   
32857         this.editorcore.syncValue();
32858     },
32859     
32860     pushValue : function()
32861     {   
32862         this.editorcore.pushValue();
32863     }
32864      
32865     
32866     // hide stuff that is not compatible
32867     /**
32868      * @event blur
32869      * @hide
32870      */
32871     /**
32872      * @event change
32873      * @hide
32874      */
32875     /**
32876      * @event focus
32877      * @hide
32878      */
32879     /**
32880      * @event specialkey
32881      * @hide
32882      */
32883     /**
32884      * @cfg {String} fieldClass @hide
32885      */
32886     /**
32887      * @cfg {String} focusClass @hide
32888      */
32889     /**
32890      * @cfg {String} autoCreate @hide
32891      */
32892     /**
32893      * @cfg {String} inputType @hide
32894      */
32895      
32896     /**
32897      * @cfg {String} invalidText @hide
32898      */
32899     /**
32900      * @cfg {String} msgFx @hide
32901      */
32902     /**
32903      * @cfg {String} validateOnBlur @hide
32904      */
32905 });
32906  
32907     
32908    
32909    
32910    
32911       
32912 /**
32913  * @class Roo.bootstrap.form.HtmlEditorToolbar.Standard
32914  * @parent Roo.bootstrap.form.HtmlEditor
32915  * @extends Roo.bootstrap.nav.Simplebar
32916  * Basic Toolbar
32917  * 
32918  * @example
32919  * Usage:
32920  *
32921  new Roo.bootstrap.form.HtmlEditor({
32922     ....
32923     toolbars : [
32924         new Roo.bootstrap.form.HtmlEditorToolbar.Standard({
32925             disable : { fonts: 1 , format: 1, ..., ... , ...],
32926             btns : [ .... ]
32927         })
32928     }
32929      
32930  * 
32931  * @cfg {Object} disable List of elements to disable..
32932  * @cfg {Array} btns List of additional buttons.
32933  * 
32934  * 
32935  * NEEDS Extra CSS? 
32936  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
32937  */
32938  
32939 Roo.bootstrap.form.HtmlEditorToolbar.Standard = function(config)
32940 {
32941     
32942     Roo.apply(this, config);
32943     
32944     // default disabled, based on 'good practice'..
32945     this.disable = this.disable || {};
32946     Roo.applyIf(this.disable, {
32947         fontSize : true,
32948         colors : true,
32949         specialElements : true
32950     });
32951     Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.constructor.call(this, config);
32952     
32953     this.editor = config.editor;
32954     this.editorcore = config.editor.editorcore;
32955     
32956     this.buttons   = new Roo.util.MixedCollection(false, function(o) { return o.btnid; });
32957     
32958     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
32959     // dont call parent... till later.
32960 }
32961 Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simplebar,  {
32962      
32963     bar : true,
32964     
32965     editor : false,
32966     editorcore : false,
32967     
32968     
32969     formats : [
32970         "p" ,  
32971         "h1","h2","h3","h4","h5","h6", 
32972         "pre", "code", 
32973         "abbr", "acronym", "address", "cite", "samp", "var",
32974         'div','span'
32975     ],
32976     
32977     
32978     deleteBtn: false,
32979     
32980     onRender : function(ct, position)
32981     {
32982        // Roo.log("Call onRender: " + this.xtype);
32983         
32984        Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.onRender.call(this, ct, position);
32985        Roo.log(this.el);
32986        this.el.dom.style.marginBottom = '0';
32987        var _this = this;
32988        var editorcore = this.editorcore;
32989        var editor= this.editor;
32990        
32991        var children = [];
32992        var btn = function(id, cmd , toggle, handler, html){
32993        
32994             var  event = toggle ? 'toggle' : 'click';
32995        
32996             var a = {
32997                 size : 'sm',
32998                 xtype: 'Button',
32999                 xns: Roo.bootstrap,
33000                 //glyphicon : id,
33001                 btnid : id,
33002                 fa: id,
33003                 cls : 'roo-html-editor-btn-' + id,
33004                 cmd : cmd, // why id || cmd
33005                 enableToggle: toggle !== false,
33006                 html : html || '',
33007                 pressed : toggle ? false : null,
33008                 listeners : {}
33009             };
33010             a.listeners[toggle ? 'toggle' : 'click'] = function() {
33011                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
33012             };
33013             children.push(a);
33014             return a;
33015        }
33016        
33017     //    var cb_box = function...
33018         
33019         var style = {
33020                 xtype: 'Button',
33021                 size : 'sm',
33022                 xns: Roo.bootstrap,
33023                 fa : 'font',
33024                 cls : 'roo-html-editor-font-chooser',
33025                 //html : 'submit'
33026                 menu : {
33027                     xtype: 'Menu',
33028                     xns: Roo.bootstrap,
33029                     items:  []
33030                 }
33031         };
33032         Roo.each(this.formats, function(f) {
33033             style.menu.items.push({
33034                 xtype :'MenuItem',
33035                 xns: Roo.bootstrap,
33036                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
33037                 tagname : f,
33038                 listeners : {
33039                     click : function()
33040                     {
33041                         editorcore.insertTag(this.tagname);
33042                         editor.focus();
33043                     }
33044                 }
33045                 
33046             });
33047         });
33048         children.push(style);   
33049         
33050         btn('bold',         'bold',true);
33051         btn('italic',       'italic',true);
33052         btn('underline',     'underline',true);
33053         btn('align-left',   'justifyleft',true);
33054         btn('align-center', 'justifycenter',true);
33055         btn('align-right' , 'justifyright',true);
33056         btn('link', false, true, this.onLinkClick);
33057         
33058         
33059         btn('image', false, true, this.onImageClick);
33060         btn('list','insertunorderedlist',true);
33061         btn('list-ol','insertorderedlist',true);
33062
33063         btn('pencil', false,true, function(btn){
33064                 Roo.log(this);
33065                 this.toggleSourceEdit(btn.pressed);
33066         });
33067         
33068         if (this.editor.btns.length > 0) {
33069             for (var i = 0; i<this.editor.btns.length; i++) {
33070                 children.push(this.editor.btns[i]);
33071             }
33072         }
33073         
33074         
33075          
33076         this.xtype = 'NavSimplebar'; // why?
33077         
33078         for(var i=0;i< children.length;i++) {
33079             
33080             this.buttons.add(this.addxtypeChild(children[i]));
33081             
33082         }
33083         this.buildToolbarDelete();
33084
33085         editor.on('editorevent', this.updateToolbar, this);
33086     },
33087     
33088     buildToolbarDelete : function()
33089     {
33090         
33091        /* this.addxtypeChild({
33092             xtype : 'Element',
33093             xns : Roo.bootstrap,
33094             cls : 'roo-htmleditor-fill'
33095         });
33096         */
33097         this.deleteBtn = this.addxtypeChild({
33098             size : 'sm',
33099             xtype: 'Button',
33100             xns: Roo.bootstrap,
33101             fa: 'trash',
33102             listeners : {
33103                 click : this.onDelete.createDelegate(this)
33104             }
33105         });
33106         this.deleteBtn.hide();     
33107         
33108     },
33109     
33110     onImageClick : function()
33111     {
33112         if (this.input) {
33113             this.input.un('change', this.onFileSelected, this);
33114         }
33115         this.input = Roo.get(document.body).createChild({ 
33116           tag: 'input', 
33117           type : 'file', 
33118           style : 'display:none', 
33119           multiple: 'multiple'
33120        });
33121         this.input.on('change', this.onFileSelected, this);
33122         this.input.dom.click();
33123     },
33124     
33125     onFileSelected : function(e)
33126     {
33127          e.preventDefault();
33128         
33129         if(typeof(this.input.dom.files) == 'undefined' || !this.input.dom.files.length){
33130             return;
33131         }
33132     
33133          
33134         this.addFiles(Array.prototype.slice.call(this.input.dom.files), false);
33135     },
33136     
33137     addFiles : function(far, fire_add) {
33138
33139          
33140         var editor =  this.editorcore;
33141   
33142         if (!far.length) {
33143             if (fire_add) {
33144                 this.editor.syncValue();
33145                 editor.owner.fireEvent('editorevent', editor.owner, false);
33146                 editor.owner.fireEvent('imageadd', editor.owner, false);
33147             }
33148             return;
33149         }
33150         
33151         var f = far.pop();
33152         
33153         if (!f.type.match(/^image/)) {
33154             this.addFiles(far, fire_add);
33155             return;
33156         }
33157          
33158         var sn = this.selectedNode;
33159         
33160         var bl = sn  && this.editorcore.enableBlocks ? Roo.htmleditor.Block.factory(sn) : false;
33161         
33162         
33163         var reader = new FileReader();
33164         reader.addEventListener('load', (function() {
33165             if (bl) {
33166                 bl.image_src = reader.result;
33167                 //bl.caption = f.name;
33168                 bl.updateElement(sn);
33169                 this.editor.syncValue();
33170                 editor.owner.fireEvent('editorevent', editor.owner, false);
33171                 editor.owner.fireEvent('imageupdate', editor.owner, sn);
33172                 // we only do the first file!! and replace.
33173                 return;
33174             }
33175             if (this.editorcore.enableBlocks) {
33176                 var fig = new Roo.htmleditor.BlockFigure({
33177                     image_src :  reader.result,
33178                     caption : '',
33179                     caption_display : 'none'  //default to hide captions..
33180                  });
33181                 editor.insertAtCursor(fig.toHTML());
33182                 this.addFiles(far, true);
33183                 return;
33184             }
33185             // just a standard img..
33186             if (sn && sn.tagName.toUpperCase() == 'IMG') {
33187                 sn.src = reader.result;
33188                 this.editor.syncValue();
33189                 editor.owner.fireEvent('editorevent', editor.owner, false);
33190                 editor.owner.fireEvent('imageupdate', editor.owner, sn);
33191                 return;
33192             }
33193             editor.insertAtCursor('<img src="' + reader.result +'">');
33194             this.addFiles(far, true);
33195             
33196         }).createDelegate(this));
33197         reader.readAsDataURL(f);
33198         
33199     
33200      },
33201     
33202     
33203     onBtnClick : function(id)
33204     {
33205        this.editorcore.relayCmd(id);
33206        this.editorcore.focus();
33207     },
33208     
33209     onLinkClick : function(btn) {
33210         var url = this.selectedNode && this.selectedNode.tagName.toUpperCase() == 'A' ?
33211                 this.selectedNode.getAttribute('href') : '';
33212             
33213         Roo.bootstrap.MessageBox.show({
33214             title : "Add / Edit Link URL",
33215             msg : "Enter the URL for the link",
33216             buttons: Roo.bootstrap.MessageBox.OKCANCEL,
33217             minWidth: 250,
33218             scope : this,
33219             prompt:true,
33220             multiline: false,
33221             modal : true,
33222             value : url,
33223             fn:  function(pressed, newurl) {
33224                 if (pressed != 'ok') {
33225                     this.editorcore.focus();
33226                     return;
33227                 }
33228                 if (url != '') {
33229                     this.selectedNode.setAttribute('href', newurl);
33230                     return;
33231                 }
33232                 if(newurl && newurl .match(/http(s):\/\/.+/)) {
33233                     this.editorcore.relayCmd('createlink', newurl);
33234                 }
33235                 this.editorcore.focus();
33236             }
33237         });
33238     },
33239     /**
33240      * Protected method that will not generally be called directly. It triggers
33241      * a toolbar update by reading the markup state of the current selection in the editor.
33242      */
33243     updateToolbar: function(editor ,ev, sel){
33244
33245         if(!this.editorcore.activated){
33246             this.editor.onFirstFocus(); // is this neeed?
33247             return;
33248         }
33249
33250         var btns = this.buttons; 
33251         var doc = this.editorcore.doc;
33252         var hasToggle  = false;
33253         btns.each(function(e) {
33254             if (e.enableToggle && e.cmd) {
33255                 hasToggle = hasToggle  || (['align-left', 'align-right', 'align-center', 'image' , 'link', 'underline'].indexOf(e.btnid) < 0 && doc.queryCommandState(e.cmd));
33256                 e.setActive(doc.queryCommandState(e.cmd));
33257             }
33258         }, this);
33259         
33260         
33261         if (ev &&
33262             (ev.type == 'mouseup' || ev.type == 'click' ) &&
33263             ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
33264             // they have click on an image...
33265             // let's see if we can change the selection...
33266             sel = ev.target;
33267             
33268         }
33269         
33270         var ans = this.editorcore.getAllAncestors();
33271         if (!sel) { 
33272             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
33273             sel = sel ? sel : this.editorcore.doc.body;
33274             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
33275             
33276         }
33277         
33278         var lastSel = this.selectedNode;
33279         this.selectedNode = sel;
33280          
33281         // ok see if we are editing a block?
33282         
33283         var db = false;
33284         // you are not actually selecting the block.
33285         if (sel && sel.hasAttribute('data-block')) {
33286             db = sel;
33287         } else if (sel && sel.closest('[data-block]')) {
33288             db = sel.closest('[data-block]');
33289         }
33290         
33291         Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
33292             e.classList.remove('roo-ed-selection');
33293         });
33294         
33295         var block = false;
33296         if (db && this.editorcore.enableBlocks) {
33297             block = Roo.htmleditor.Block.factory(db);
33298             
33299             if (block) {
33300                 db.className =  (db.classList.length > 0  ? db.className + ' ' : '') +
33301                     ' roo-ed-selection';
33302                 sel = this.selectedNode = db;
33303             }
33304         }
33305         
33306         // highlight the 'a'..
33307         var tn = sel && sel.tagName.toUpperCase() || '';
33308         if (!block && sel && tn != 'A') {
33309             var asel = sel.closest('A');
33310             if (asel) {
33311                 sel = asel;
33312             }
33313         }
33314        
33315         btns.get('link').setActive(tn == 'A' && this.selectedNode.hasAttribute('href'));
33316         btns.get('image').setActive(tn == 'IMG' || this.editorcore.enableBlocks && tn == 'FIGURE');
33317         btns.get('underline').setActive(tn == 'U' || sel.closest('u') ? true : false);
33318         
33319         Roo.bootstrap.menu.Manager.hideAll();
33320          
33321         
33322         
33323         
33324         
33325         // handle delete button..
33326         if (hasToggle || (tn.length && tn == 'BODY')) {
33327             this.deleteBtn.hide();
33328             return;
33329             
33330         }
33331         this.deleteBtn.show();
33332         
33333         
33334         
33335         //this.editorsyncValue();
33336     },
33337     onFirstFocus: function() {
33338         this.buttons.each(function(item){
33339            item.enable();
33340         });
33341     },
33342     
33343     onDelete : function()
33344     {
33345         var range = this.editorcore.createRange();
33346         var selection = this.editorcore.getSelection();
33347         var sn = this.selectedNode;
33348         range.setStart(sn,0);
33349         range.setEnd(sn,0); 
33350         
33351         
33352         if (sn.hasAttribute('data-block')) {
33353             var block = Roo.htmleditor.Block.factory(this.selectedNode);
33354             if (block) {
33355                 sn = block.removeNode();
33356                 sn.parentNode.removeChild(sn);
33357                 selection.removeAllRanges();
33358                 selection.addRange(range);
33359                 this.updateToolbar(null, null, null);
33360                 if (sn.tagName.toUpperCase() == 'FIGURE') {
33361                     this.editor.syncValue();
33362                     this.editor.fireEvent('imagedelete', this.editor, sn);
33363                 }
33364                 
33365                 this.selectedNode = false;
33366                 this.editorcore.fireEditorEvent(false);
33367                 return;
33368             }   
33369              
33370         }
33371         if (!sn) {
33372             return; // should not really happen..
33373         }
33374         if (sn && sn.tagName == 'BODY') {
33375             return;
33376         }
33377         var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
33378         
33379         // remove and keep parents.
33380         a = new Roo.htmleditor.FilterKeepChildren({tag : false});
33381         a.replaceTag(sn);
33382         
33383         selection.removeAllRanges();
33384         selection.addRange(range);
33385         if (sn.tagName.toUpperCase() == 'IMG"') {
33386             this.editor.syncValue();
33387             this.editor.fireEvent('imagedelete', this.editor, sn);
33388         }
33389         
33390         this.selectedNode = false;
33391         this.editorcore.fireEditorEvent(false);
33392         
33393         
33394     },
33395     
33396     
33397     toggleSourceEdit : function(sourceEditMode){
33398         
33399           
33400         if(sourceEditMode){
33401             Roo.log("disabling buttons");
33402            this.buttons.each( function(item){
33403                 if(item.cmd != 'pencil'){
33404                     item.disable();
33405                 }
33406             });
33407           
33408         }else{
33409             Roo.log("enabling buttons");
33410             if(this.editorcore.initialized){
33411                 this.buttons.each( function(item){
33412                     item.enable();
33413                 });
33414             }
33415             
33416         }
33417         Roo.log("calling toggole on editor");
33418         // tell the editor that it's been pressed..
33419         this.editor.toggleSourceEdit(sourceEditMode);
33420        
33421     }
33422 });
33423
33424
33425
33426
33427  
33428 /*
33429  * - LGPL
33430  */
33431
33432 /**
33433  * @class Roo.bootstrap.form.Markdown
33434  * @extends Roo.bootstrap.form.TextArea
33435  * Bootstrap Showdown editable area
33436  * @cfg {string} content
33437  * 
33438  * @constructor
33439  * Create a new Showdown
33440  */
33441
33442 Roo.bootstrap.form.Markdown = function(config){
33443     Roo.bootstrap.form.Markdown.superclass.constructor.call(this, config);
33444    
33445 };
33446
33447 Roo.extend(Roo.bootstrap.form.Markdown, Roo.bootstrap.form.TextArea,  {
33448     
33449     editing :false,
33450     
33451     initEvents : function()
33452     {
33453         
33454         Roo.bootstrap.form.TextArea.prototype.initEvents.call(this);
33455         this.markdownEl = this.el.createChild({
33456             cls : 'roo-markdown-area'
33457         });
33458         this.inputEl().addClass('d-none');
33459         if (this.getValue() == '') {
33460             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
33461             
33462         } else {
33463             this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
33464         }
33465         this.markdownEl.on('click', this.toggleTextEdit, this);
33466         this.on('blur', this.toggleTextEdit, this);
33467         this.on('specialkey', this.resizeTextArea, this);
33468     },
33469     
33470     toggleTextEdit : function()
33471     {
33472         var sh = this.markdownEl.getHeight();
33473         this.inputEl().addClass('d-none');
33474         this.markdownEl.addClass('d-none');
33475         if (!this.editing) {
33476             // show editor?
33477             this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
33478             this.inputEl().removeClass('d-none');
33479             this.inputEl().focus();
33480             this.editing = true;
33481             return;
33482         }
33483         // show showdown...
33484         this.updateMarkdown();
33485         this.markdownEl.removeClass('d-none');
33486         this.editing = false;
33487         return;
33488     },
33489     updateMarkdown : function()
33490     {
33491         if (this.getValue() == '') {
33492             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
33493             return;
33494         }
33495  
33496         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
33497     },
33498     
33499     resizeTextArea: function () {
33500         
33501         var sh = 100;
33502         Roo.log([sh, this.getValue().split("\n").length * 30]);
33503         this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
33504     },
33505     setValue : function(val)
33506     {
33507         Roo.bootstrap.form.TextArea.prototype.setValue.call(this,val);
33508         if (!this.editing) {
33509             this.updateMarkdown();
33510         }
33511         
33512     },
33513     focus : function()
33514     {
33515         if (!this.editing) {
33516             this.toggleTextEdit();
33517         }
33518         
33519     }
33520
33521
33522 });/*
33523  * Based on:
33524  * Ext JS Library 1.1.1
33525  * Copyright(c) 2006-2007, Ext JS, LLC.
33526  *
33527  * Originally Released Under LGPL - original licence link has changed is not relivant.
33528  *
33529  * Fork - LGPL
33530  * <script type="text/javascript">
33531  */
33532  
33533 /**
33534  * @class Roo.bootstrap.PagingToolbar
33535  * @extends Roo.bootstrap.nav.Simplebar
33536  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
33537  * @constructor
33538  * Create a new PagingToolbar
33539  * @param {Object} config The config object
33540  * @param {Roo.data.Store} store
33541  */
33542 Roo.bootstrap.PagingToolbar = function(config)
33543 {
33544     // old args format still supported... - xtype is prefered..
33545         // created from xtype...
33546     
33547     this.ds = config.dataSource;
33548     
33549     if (config.store && !this.ds) {
33550         this.store= Roo.factory(config.store, Roo.data);
33551         this.ds = this.store;
33552         this.ds.xmodule = this.xmodule || false;
33553     }
33554     
33555     this.toolbarItems = [];
33556     if (config.items) {
33557         this.toolbarItems = config.items;
33558     }
33559     
33560     Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
33561     
33562     this.cursor = 0;
33563     
33564     if (this.ds) { 
33565         this.bind(this.ds);
33566     }
33567     
33568     if (Roo.bootstrap.version == 4) {
33569         this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
33570     } else {
33571         this.navgroup = new Roo.bootstrap.nav.Group({ cls: 'pagination' });
33572     }
33573     
33574 };
33575
33576 Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.nav.Simplebar, {
33577     /**
33578      * @cfg {Roo.bootstrap.Button} buttons[]
33579      * Buttons for the toolbar
33580      */
33581      /**
33582      * @cfg {Roo.data.Store} store
33583      * The underlying data store providing the paged data
33584      */
33585     /**
33586      * @cfg {String/HTMLElement/Element} container
33587      * container The id or element that will contain the toolbar
33588      */
33589     /**
33590      * @cfg {Boolean} displayInfo
33591      * True to display the displayMsg (defaults to false)
33592      */
33593     /**
33594      * @cfg {Number} pageSize
33595      * The number of records to display per page (defaults to 20)
33596      */
33597     pageSize: 20,
33598     /**
33599      * @cfg {String} displayMsg
33600      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
33601      */
33602     displayMsg : 'Displaying {0} - {1} of {2}',
33603     /**
33604      * @cfg {String} emptyMsg
33605      * The message to display when no records are found (defaults to "No data to display")
33606      */
33607     emptyMsg : 'No data to display',
33608     /**
33609      * Customizable piece of the default paging text (defaults to "Page")
33610      * @type String
33611      */
33612     beforePageText : "Page",
33613     /**
33614      * Customizable piece of the default paging text (defaults to "of %0")
33615      * @type String
33616      */
33617     afterPageText : "of {0}",
33618     /**
33619      * Customizable piece of the default paging text (defaults to "First Page")
33620      * @type String
33621      */
33622     firstText : "First Page",
33623     /**
33624      * Customizable piece of the default paging text (defaults to "Previous Page")
33625      * @type String
33626      */
33627     prevText : "Previous Page",
33628     /**
33629      * Customizable piece of the default paging text (defaults to "Next Page")
33630      * @type String
33631      */
33632     nextText : "Next Page",
33633     /**
33634      * Customizable piece of the default paging text (defaults to "Last Page")
33635      * @type String
33636      */
33637     lastText : "Last Page",
33638     /**
33639      * Customizable piece of the default paging text (defaults to "Refresh")
33640      * @type String
33641      */
33642     refreshText : "Refresh",
33643
33644     buttons : false,
33645     // private
33646     onRender : function(ct, position) 
33647     {
33648         Roo.bootstrap.PagingToolbar.superclass.onRender.call(this, ct, position);
33649         this.navgroup.parentId = this.id;
33650         this.navgroup.onRender(this.el, null);
33651         // add the buttons to the navgroup
33652         
33653         if(this.displayInfo){
33654             this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
33655             this.displayEl = this.el.select('.x-paging-info', true).first();
33656 //            var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
33657 //            this.displayEl = navel.el.select('span',true).first();
33658         }
33659         
33660         var _this = this;
33661         
33662         if(this.buttons){
33663             Roo.each(_this.buttons, function(e){ // this might need to use render????
33664                Roo.factory(e).render(_this.el);
33665             });
33666         }
33667             
33668         Roo.each(_this.toolbarItems, function(e) {
33669             _this.navgroup.addItem(e);
33670         });
33671         
33672         
33673         this.first = this.navgroup.addItem({
33674             tooltip: this.firstText,
33675             cls: "prev btn-outline-secondary",
33676             html : ' <i class="fa fa-step-backward"></i>',
33677             disabled: true,
33678             preventDefault: true,
33679             listeners : { click : this.onClick.createDelegate(this, ["first"]) }
33680         });
33681         
33682         this.prev =  this.navgroup.addItem({
33683             tooltip: this.prevText,
33684             cls: "prev btn-outline-secondary",
33685             html : ' <i class="fa fa-backward"></i>',
33686             disabled: true,
33687             preventDefault: true,
33688             listeners : { click :  this.onClick.createDelegate(this, ["prev"]) }
33689         });
33690     //this.addSeparator();
33691         
33692         
33693         var field = this.navgroup.addItem( {
33694             tagtype : 'span',
33695             cls : 'x-paging-position  btn-outline-secondary',
33696              disabled: true,
33697             html : this.beforePageText  +
33698                 '<input type="text" size="3" value="1" class="x-grid-page-number">' +
33699                 '<span class="x-paging-after">' +  String.format(this.afterPageText, 1) + '</span>'
33700          } ); //?? escaped?
33701         
33702         this.field = field.el.select('input', true).first();
33703         this.field.on("keydown", this.onPagingKeydown, this);
33704         this.field.on("focus", function(){this.dom.select();});
33705     
33706     
33707         this.afterTextEl =  field.el.select('.x-paging-after',true).first();
33708         //this.field.setHeight(18);
33709         //this.addSeparator();
33710         this.next = this.navgroup.addItem({
33711             tooltip: this.nextText,
33712             cls: "next btn-outline-secondary",
33713             html : ' <i class="fa fa-forward"></i>',
33714             disabled: true,
33715             preventDefault: true,
33716             listeners : { click :  this.onClick.createDelegate(this, ["next"]) }
33717         });
33718         this.last = this.navgroup.addItem({
33719             tooltip: this.lastText,
33720             html : ' <i class="fa fa-step-forward"></i>',
33721             cls: "next btn-outline-secondary",
33722             disabled: true,
33723             preventDefault: true,
33724             listeners : { click :  this.onClick.createDelegate(this, ["last"]) }
33725         });
33726     //this.addSeparator();
33727         this.loading = this.navgroup.addItem({
33728             tooltip: this.refreshText,
33729             cls: "btn-outline-secondary",
33730             html : ' <i class="fa fa-refresh"></i>',
33731             preventDefault: true,
33732             listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
33733         });
33734         
33735     },
33736
33737     // private
33738     updateInfo : function(){
33739         if(this.displayEl){
33740             var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
33741             var msg = count == 0 ?
33742                 this.emptyMsg :
33743                 String.format(
33744                     this.displayMsg,
33745                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
33746                 );
33747             this.displayEl.update(msg);
33748         }
33749     },
33750
33751     // private
33752     onLoad : function(ds, r, o)
33753     {
33754         this.cursor = o.params && o.params.start ? o.params.start : 0;
33755         
33756         var d = this.getPageData(),
33757             ap = d.activePage,
33758             ps = d.pages;
33759         
33760         
33761         this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
33762         this.field.dom.value = ap;
33763         this.first.setDisabled(ap == 1);
33764         this.prev.setDisabled(ap == 1);
33765         this.next.setDisabled(ap == ps);
33766         this.last.setDisabled(ap == ps);
33767         this.loading.enable();
33768         this.updateInfo();
33769     },
33770
33771     // private
33772     getPageData : function(){
33773         var total = this.ds.getTotalCount();
33774         return {
33775             total : total,
33776             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
33777             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
33778         };
33779     },
33780
33781     // private
33782     onLoadError : function(proxy, o){
33783         this.loading.enable();
33784         if (this.ds.events.loadexception.listeners.length  < 2) {
33785             // nothing has been assigned to loadexception except this...
33786             // so 
33787             Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
33788
33789         }
33790     },
33791
33792     // private
33793     onPagingKeydown : function(e){
33794         var k = e.getKey();
33795         var d = this.getPageData();
33796         if(k == e.RETURN){
33797             var v = this.field.dom.value, pageNum;
33798             if(!v || isNaN(pageNum = parseInt(v, 10))){
33799                 this.field.dom.value = d.activePage;
33800                 return;
33801             }
33802             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
33803             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
33804             e.stopEvent();
33805         }
33806         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))
33807         {
33808           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
33809           this.field.dom.value = pageNum;
33810           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
33811           e.stopEvent();
33812         }
33813         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
33814         {
33815           var v = this.field.dom.value, pageNum; 
33816           var increment = (e.shiftKey) ? 10 : 1;
33817           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
33818                 increment *= -1;
33819           }
33820           if(!v || isNaN(pageNum = parseInt(v, 10))) {
33821             this.field.dom.value = d.activePage;
33822             return;
33823           }
33824           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
33825           {
33826             this.field.dom.value = parseInt(v, 10) + increment;
33827             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
33828             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
33829           }
33830           e.stopEvent();
33831         }
33832     },
33833
33834     // private
33835     beforeLoad : function(){
33836         if(this.loading){
33837             this.loading.disable();
33838         }
33839     },
33840
33841     // private
33842     onClick : function(which){
33843         
33844         var ds = this.ds;
33845         if (!ds) {
33846             return;
33847         }
33848         
33849         switch(which){
33850             case "first":
33851                 ds.load({params:{start: 0, limit: this.pageSize}});
33852             break;
33853             case "prev":
33854                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
33855             break;
33856             case "next":
33857                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
33858             break;
33859             case "last":
33860                 var total = ds.getTotalCount();
33861                 var extra = total % this.pageSize;
33862                 var lastStart = extra ? (total - extra) : total-this.pageSize;
33863                 ds.load({params:{start: lastStart, limit: this.pageSize}});
33864             break;
33865             case "refresh":
33866                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
33867             break;
33868         }
33869     },
33870
33871     /**
33872      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
33873      * @param {Roo.data.Store} store The data store to unbind
33874      */
33875     unbind : function(ds){
33876         ds.un("beforeload", this.beforeLoad, this);
33877         ds.un("load", this.onLoad, this);
33878         ds.un("loadexception", this.onLoadError, this);
33879         ds.un("remove", this.updateInfo, this);
33880         ds.un("add", this.updateInfo, this);
33881         this.ds = undefined;
33882     },
33883
33884     /**
33885      * Binds the paging toolbar to the specified {@link Roo.data.Store}
33886      * @param {Roo.data.Store} store The data store to bind
33887      */
33888     bind : function(ds){
33889         ds.on("beforeload", this.beforeLoad, this);
33890         ds.on("load", this.onLoad, this);
33891         ds.on("loadexception", this.onLoadError, this);
33892         ds.on("remove", this.updateInfo, this);
33893         ds.on("add", this.updateInfo, this);
33894         this.ds = ds;
33895     }
33896 });/*
33897  * - LGPL
33898  *
33899  * element
33900  * 
33901  */
33902
33903 /**
33904  * @class Roo.bootstrap.MessageBar
33905  * @extends Roo.bootstrap.Component
33906  * Bootstrap MessageBar class
33907  * @cfg {String} html contents of the MessageBar
33908  * @cfg {String} weight (info | success | warning | danger) default info
33909  * @cfg {String} beforeClass insert the bar before the given class
33910  * @cfg {Boolean} closable (true | false) default false
33911  * @cfg {Boolean} fixed (true | false) default false, fix the bar at the top
33912  * 
33913  * @constructor
33914  * Create a new Element
33915  * @param {Object} config The config object
33916  */
33917
33918 Roo.bootstrap.MessageBar = function(config){
33919     Roo.bootstrap.MessageBar.superclass.constructor.call(this, config);
33920 };
33921
33922 Roo.extend(Roo.bootstrap.MessageBar, Roo.bootstrap.Component,  {
33923     
33924     html: '',
33925     weight: 'info',
33926     closable: false,
33927     fixed: false,
33928     beforeClass: 'bootstrap-sticky-wrap',
33929     
33930     getAutoCreate : function(){
33931         
33932         var cfg = {
33933             tag: 'div',
33934             cls: 'alert alert-dismissable alert-' + this.weight,
33935             cn: [
33936                 {
33937                     tag: 'span',
33938                     cls: 'message',
33939                     html: this.html || ''
33940                 }
33941             ]
33942         };
33943         
33944         if(this.fixed){
33945             cfg.cls += ' alert-messages-fixed';
33946         }
33947         
33948         if(this.closable){
33949             cfg.cn.push({
33950                 tag: 'button',
33951                 cls: 'close',
33952                 html: 'x'
33953             });
33954         }
33955         
33956         return cfg;
33957     },
33958     
33959     onRender : function(ct, position)
33960     {
33961         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
33962         
33963         if(!this.el){
33964             var cfg = Roo.apply({},  this.getAutoCreate());
33965             cfg.id = Roo.id();
33966             
33967             if (this.cls) {
33968                 cfg.cls += ' ' + this.cls;
33969             }
33970             if (this.style) {
33971                 cfg.style = this.style;
33972             }
33973             this.el = Roo.get(document.body).createChild(cfg, Roo.select('.'+this.beforeClass, true).first());
33974             
33975             this.el.setVisibilityMode(Roo.Element.DISPLAY);
33976         }
33977         
33978         this.el.select('>button.close').on('click', this.hide, this);
33979         
33980     },
33981     
33982     show : function()
33983     {
33984         if (!this.rendered) {
33985             this.render();
33986         }
33987         
33988         this.el.show();
33989         
33990         this.fireEvent('show', this);
33991         
33992     },
33993     
33994     hide : function()
33995     {
33996         if (!this.rendered) {
33997             this.render();
33998         }
33999         
34000         this.el.hide();
34001         
34002         this.fireEvent('hide', this);
34003     },
34004     
34005     update : function()
34006     {
34007 //        var e = this.el.dom.firstChild;
34008 //        
34009 //        if(this.closable){
34010 //            e = e.nextSibling;
34011 //        }
34012 //        
34013 //        e.data = this.html || '';
34014
34015         this.el.select('>.message', true).first().dom.innerHTML = this.html || '';
34016     }
34017    
34018 });
34019
34020  
34021
34022      /*
34023  * - LGPL
34024  *
34025  * Graph
34026  * 
34027  */
34028
34029
34030 /**
34031  * @class Roo.bootstrap.Graph
34032  * @extends Roo.bootstrap.Component
34033  * Bootstrap Graph class
34034 > Prameters
34035  -sm {number} sm 4
34036  -md {number} md 5
34037  @cfg {String} graphtype  bar | vbar | pie
34038  @cfg {number} g_x coodinator | centre x (pie)
34039  @cfg {number} g_y coodinator | centre y (pie)
34040  @cfg {number} g_r radius (pie)
34041  @cfg {number} g_height height of the chart (respected by all elements in the set)
34042  @cfg {number} g_width width of the chart (respected by all elements in the set)
34043  @cfg {Object} title The title of the chart
34044     
34045  -{Array}  values
34046  -opts (object) options for the chart 
34047      o {
34048      o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
34049      o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
34050      o vgutter (number)
34051      o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
34052      o stacked (boolean) whether or not to tread values as in a stacked bar chart
34053      o to
34054      o stretch (boolean)
34055      o }
34056  -opts (object) options for the pie
34057      o{
34058      o cut
34059      o startAngle (number)
34060      o endAngle (number)
34061      } 
34062  *
34063  * @constructor
34064  * Create a new Input
34065  * @param {Object} config The config object
34066  */
34067
34068 Roo.bootstrap.Graph = function(config){
34069     Roo.bootstrap.Graph.superclass.constructor.call(this, config);
34070     
34071     this.addEvents({
34072         // img events
34073         /**
34074          * @event click
34075          * The img click event for the img.
34076          * @param {Roo.EventObject} e
34077          */
34078         "click" : true
34079     });
34080 };
34081
34082 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
34083     
34084     sm: 4,
34085     md: 5,
34086     graphtype: 'bar',
34087     g_height: 250,
34088     g_width: 400,
34089     g_x: 50,
34090     g_y: 50,
34091     g_r: 30,
34092     opts:{
34093         //g_colors: this.colors,
34094         g_type: 'soft',
34095         g_gutter: '20%'
34096
34097     },
34098     title : false,
34099
34100     getAutoCreate : function(){
34101         
34102         var cfg = {
34103             tag: 'div',
34104             html : null
34105         };
34106         
34107         
34108         return  cfg;
34109     },
34110
34111     onRender : function(ct,position){
34112         
34113         
34114         Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
34115         
34116         if (typeof(Raphael) == 'undefined') {
34117             Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
34118             return;
34119         }
34120         
34121         this.raphael = Raphael(this.el.dom);
34122         
34123                     // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
34124                     // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
34125                     // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
34126                     // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
34127                 /*
34128                 r.text(160, 10, "Single Series Chart").attr(txtattr);
34129                 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
34130                 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
34131                 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
34132                 
34133                 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
34134                 r.barchart(330, 10, 300, 220, data1);
34135                 r.barchart(10, 250, 300, 220, data2, {stacked: true});
34136                 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
34137                 */
34138                 
34139                 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
34140                 // r.barchart(30, 30, 560, 250,  xdata, {
34141                 //    labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
34142                 //     axis : "0 0 1 1",
34143                 //     axisxlabels :  xdata
34144                 //     //yvalues : cols,
34145                    
34146                 // });
34147 //        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
34148 //        
34149 //        this.load(null,xdata,{
34150 //                axis : "0 0 1 1",
34151 //                axisxlabels :  xdata
34152 //                });
34153
34154     },
34155
34156     load : function(graphtype,xdata,opts)
34157     {
34158         this.raphael.clear();
34159         if(!graphtype) {
34160             graphtype = this.graphtype;
34161         }
34162         if(!opts){
34163             opts = this.opts;
34164         }
34165         var r = this.raphael,
34166             fin = function () {
34167                 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
34168             },
34169             fout = function () {
34170                 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
34171             },
34172             pfin = function() {
34173                 this.sector.stop();
34174                 this.sector.scale(1.1, 1.1, this.cx, this.cy);
34175
34176                 if (this.label) {
34177                     this.label[0].stop();
34178                     this.label[0].attr({ r: 7.5 });
34179                     this.label[1].attr({ "font-weight": 800 });
34180                 }
34181             },
34182             pfout = function() {
34183                 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
34184
34185                 if (this.label) {
34186                     this.label[0].animate({ r: 5 }, 500, "bounce");
34187                     this.label[1].attr({ "font-weight": 400 });
34188                 }
34189             };
34190
34191         switch(graphtype){
34192             case 'bar':
34193                 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
34194                 break;
34195             case 'hbar':
34196                 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
34197                 break;
34198             case 'pie':
34199 //                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west", 
34200 //                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
34201 //            
34202                 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
34203                 
34204                 break;
34205
34206         }
34207         
34208         if(this.title){
34209             this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
34210         }
34211         
34212     },
34213     
34214     setTitle: function(o)
34215     {
34216         this.title = o;
34217     },
34218     
34219     initEvents: function() {
34220         
34221         if(!this.href){
34222             this.el.on('click', this.onClick, this);
34223         }
34224     },
34225     
34226     onClick : function(e)
34227     {
34228         Roo.log('img onclick');
34229         this.fireEvent('click', this, e);
34230     }
34231    
34232 });
34233
34234  
34235 Roo.bootstrap.dash = {};/*
34236  * - LGPL
34237  *
34238  * numberBox
34239  * 
34240  */
34241 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
34242
34243 /**
34244  * @class Roo.bootstrap.dash.NumberBox
34245  * @extends Roo.bootstrap.Component
34246  * Bootstrap NumberBox class
34247  * @cfg {String} headline Box headline
34248  * @cfg {String} content Box content
34249  * @cfg {String} icon Box icon
34250  * @cfg {String} footer Footer text
34251  * @cfg {String} fhref Footer href
34252  * 
34253  * @constructor
34254  * Create a new NumberBox
34255  * @param {Object} config The config object
34256  */
34257
34258
34259 Roo.bootstrap.dash.NumberBox = function(config){
34260     Roo.bootstrap.dash.NumberBox.superclass.constructor.call(this, config);
34261     
34262 };
34263
34264 Roo.extend(Roo.bootstrap.dash.NumberBox, Roo.bootstrap.Component,  {
34265     
34266     headline : '',
34267     content : '',
34268     icon : '',
34269     footer : '',
34270     fhref : '',
34271     ficon : '',
34272     
34273     getAutoCreate : function(){
34274         
34275         var cfg = {
34276             tag : 'div',
34277             cls : 'small-box ',
34278             cn : [
34279                 {
34280                     tag : 'div',
34281                     cls : 'inner',
34282                     cn :[
34283                         {
34284                             tag : 'h3',
34285                             cls : 'roo-headline',
34286                             html : this.headline
34287                         },
34288                         {
34289                             tag : 'p',
34290                             cls : 'roo-content',
34291                             html : this.content
34292                         }
34293                     ]
34294                 }
34295             ]
34296         };
34297         
34298         if(this.icon){
34299             cfg.cn.push({
34300                 tag : 'div',
34301                 cls : 'icon',
34302                 cn :[
34303                     {
34304                         tag : 'i',
34305                         cls : 'ion ' + this.icon
34306                     }
34307                 ]
34308             });
34309         }
34310         
34311         if(this.footer){
34312             var footer = {
34313                 tag : 'a',
34314                 cls : 'small-box-footer',
34315                 href : this.fhref || '#',
34316                 html : this.footer
34317             };
34318             
34319             cfg.cn.push(footer);
34320             
34321         }
34322         
34323         return  cfg;
34324     },
34325
34326     onRender : function(ct,position){
34327         Roo.bootstrap.dash.NumberBox.superclass.onRender.call(this,ct,position);
34328
34329
34330        
34331                 
34332     },
34333
34334     setHeadline: function (value)
34335     {
34336         this.el.select('.roo-headline',true).first().dom.innerHTML = value;
34337     },
34338     
34339     setFooter: function (value, href)
34340     {
34341         this.el.select('a.small-box-footer',true).first().dom.innerHTML = value;
34342         
34343         if(href){
34344             this.el.select('a.small-box-footer',true).first().attr('href', href);
34345         }
34346         
34347     },
34348
34349     setContent: function (value)
34350     {
34351         this.el.select('.roo-content',true).first().dom.innerHTML = value;
34352     },
34353
34354     initEvents: function() 
34355     {   
34356         
34357     }
34358     
34359 });
34360
34361  
34362 /*
34363  * - LGPL
34364  *
34365  * TabBox
34366  * 
34367  */
34368 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
34369
34370 /**
34371  * @class Roo.bootstrap.dash.TabBox
34372  * @extends Roo.bootstrap.Component
34373  * @children Roo.bootstrap.dash.TabPane
34374  * Bootstrap TabBox class
34375  * @cfg {String} title Title of the TabBox
34376  * @cfg {String} icon Icon of the TabBox
34377  * @cfg {Boolean} showtabs (true|false) show the tabs default true
34378  * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
34379  * 
34380  * @constructor
34381  * Create a new TabBox
34382  * @param {Object} config The config object
34383  */
34384
34385
34386 Roo.bootstrap.dash.TabBox = function(config){
34387     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
34388     this.addEvents({
34389         // raw events
34390         /**
34391          * @event addpane
34392          * When a pane is added
34393          * @param {Roo.bootstrap.dash.TabPane} pane
34394          */
34395         "addpane" : true,
34396         /**
34397          * @event activatepane
34398          * When a pane is activated
34399          * @param {Roo.bootstrap.dash.TabPane} pane
34400          */
34401         "activatepane" : true
34402         
34403          
34404     });
34405     
34406     this.panes = [];
34407 };
34408
34409 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
34410
34411     title : '',
34412     icon : false,
34413     showtabs : true,
34414     tabScrollable : false,
34415     
34416     getChildContainer : function()
34417     {
34418         return this.el.select('.tab-content', true).first();
34419     },
34420     
34421     getAutoCreate : function(){
34422         
34423         var header = {
34424             tag: 'li',
34425             cls: 'pull-left header',
34426             html: this.title,
34427             cn : []
34428         };
34429         
34430         if(this.icon){
34431             header.cn.push({
34432                 tag: 'i',
34433                 cls: 'fa ' + this.icon
34434             });
34435         }
34436         
34437         var h = {
34438             tag: 'ul',
34439             cls: 'nav nav-tabs pull-right',
34440             cn: [
34441                 header
34442             ]
34443         };
34444         
34445         if(this.tabScrollable){
34446             h = {
34447                 tag: 'div',
34448                 cls: 'tab-header',
34449                 cn: [
34450                     {
34451                         tag: 'ul',
34452                         cls: 'nav nav-tabs pull-right',
34453                         cn: [
34454                             header
34455                         ]
34456                     }
34457                 ]
34458             };
34459         }
34460         
34461         var cfg = {
34462             tag: 'div',
34463             cls: 'nav-tabs-custom',
34464             cn: [
34465                 h,
34466                 {
34467                     tag: 'div',
34468                     cls: 'tab-content no-padding',
34469                     cn: []
34470                 }
34471             ]
34472         };
34473
34474         return  cfg;
34475     },
34476     initEvents : function()
34477     {
34478         //Roo.log('add add pane handler');
34479         this.on('addpane', this.onAddPane, this);
34480     },
34481      /**
34482      * Updates the box title
34483      * @param {String} html to set the title to.
34484      */
34485     setTitle : function(value)
34486     {
34487         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
34488     },
34489     onAddPane : function(pane)
34490     {
34491         this.panes.push(pane);
34492         //Roo.log('addpane');
34493         //Roo.log(pane);
34494         // tabs are rendere left to right..
34495         if(!this.showtabs){
34496             return;
34497         }
34498         
34499         var ctr = this.el.select('.nav-tabs', true).first();
34500          
34501          
34502         var existing = ctr.select('.nav-tab',true);
34503         var qty = existing.getCount();;
34504         
34505         
34506         var tab = ctr.createChild({
34507             tag : 'li',
34508             cls : 'nav-tab' + (qty ? '' : ' active'),
34509             cn : [
34510                 {
34511                     tag : 'a',
34512                     href:'#',
34513                     html : pane.title
34514                 }
34515             ]
34516         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
34517         pane.tab = tab;
34518         
34519         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
34520         if (!qty) {
34521             pane.el.addClass('active');
34522         }
34523         
34524                 
34525     },
34526     onTabClick : function(ev,un,ob,pane)
34527     {
34528         //Roo.log('tab - prev default');
34529         ev.preventDefault();
34530         
34531         
34532         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
34533         pane.tab.addClass('active');
34534         //Roo.log(pane.title);
34535         this.getChildContainer().select('.tab-pane',true).removeClass('active');
34536         // technically we should have a deactivate event.. but maybe add later.
34537         // and it should not de-activate the selected tab...
34538         this.fireEvent('activatepane', pane);
34539         pane.el.addClass('active');
34540         pane.fireEvent('activate');
34541         
34542         
34543     },
34544     
34545     getActivePane : function()
34546     {
34547         var r = false;
34548         Roo.each(this.panes, function(p) {
34549             if(p.el.hasClass('active')){
34550                 r = p;
34551                 return false;
34552             }
34553             
34554             return;
34555         });
34556         
34557         return r;
34558     }
34559     
34560     
34561 });
34562
34563  
34564 /*
34565  * - LGPL
34566  *
34567  * Tab pane
34568  * 
34569  */
34570 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
34571 /**
34572  * @class Roo.bootstrap.TabPane
34573  * @extends Roo.bootstrap.Component
34574  * @children  Roo.bootstrap.Graph Roo.bootstrap.Column
34575  * Bootstrap TabPane class
34576  * @cfg {Boolean} active (false | true) Default false
34577  * @cfg {String} title title of panel
34578
34579  * 
34580  * @constructor
34581  * Create a new TabPane
34582  * @param {Object} config The config object
34583  */
34584
34585 Roo.bootstrap.dash.TabPane = function(config){
34586     Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
34587     
34588     this.addEvents({
34589         // raw events
34590         /**
34591          * @event activate
34592          * When a pane is activated
34593          * @param {Roo.bootstrap.dash.TabPane} pane
34594          */
34595         "activate" : true
34596          
34597     });
34598 };
34599
34600 Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component,  {
34601     
34602     active : false,
34603     title : '',
34604     
34605     // the tabBox that this is attached to.
34606     tab : false,
34607      
34608     getAutoCreate : function() 
34609     {
34610         var cfg = {
34611             tag: 'div',
34612             cls: 'tab-pane'
34613         };
34614         
34615         if(this.active){
34616             cfg.cls += ' active';
34617         }
34618         
34619         return cfg;
34620     },
34621     initEvents  : function()
34622     {
34623         //Roo.log('trigger add pane handler');
34624         this.parent().fireEvent('addpane', this)
34625     },
34626     
34627      /**
34628      * Updates the tab title 
34629      * @param {String} html to set the title to.
34630      */
34631     setTitle: function(str)
34632     {
34633         if (!this.tab) {
34634             return;
34635         }
34636         this.title = str;
34637         this.tab.select('a', true).first().dom.innerHTML = str;
34638         
34639     }
34640     
34641     
34642     
34643 });
34644
34645  
34646
34647
34648  /*
34649  * - LGPL
34650  *
34651  * Tooltip
34652  * 
34653  */
34654
34655 /**
34656  * @class Roo.bootstrap.Tooltip
34657  * Bootstrap Tooltip class
34658  * This is basic at present - all componets support it by default, however they should add tooltipEl() method
34659  * to determine which dom element triggers the tooltip.
34660  * 
34661  * It needs to add support for additional attributes like tooltip-position
34662  * 
34663  * @constructor
34664  * Create a new Toolti
34665  * @param {Object} config The config object
34666  */
34667
34668 Roo.bootstrap.Tooltip = function(config){
34669     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
34670     
34671     this.alignment = Roo.bootstrap.Tooltip.alignment;
34672     
34673     if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
34674         this.alignment = config.alignment;
34675     }
34676     
34677 };
34678
34679 Roo.apply(Roo.bootstrap.Tooltip, {
34680     /**
34681      * @function init initialize tooltip monitoring.
34682      * @static
34683      */
34684     currentEl : false,
34685     currentTip : false,
34686     currentRegion : false,
34687     
34688     //  init : delay?
34689     
34690     init : function()
34691     {
34692         Roo.get(document).on('mouseover', this.enter ,this);
34693         Roo.get(document).on('mouseout', this.leave, this);
34694          
34695         
34696         this.currentTip = new Roo.bootstrap.Tooltip();
34697     },
34698     
34699     enter : function(ev)
34700     {
34701         var dom = ev.getTarget();
34702         
34703         //Roo.log(['enter',dom]);
34704         var el = Roo.fly(dom);
34705         if (this.currentEl) {
34706             //Roo.log(dom);
34707             //Roo.log(this.currentEl);
34708             //Roo.log(this.currentEl.contains(dom));
34709             if (this.currentEl == el) {
34710                 return;
34711             }
34712             if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
34713                 return;
34714             }
34715
34716         }
34717         
34718         if (this.currentTip.el) {
34719             this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
34720         }    
34721         //Roo.log(ev);
34722         
34723         if(!el || el.dom == document){
34724             return;
34725         }
34726         
34727         var bindEl = el; 
34728         var pel = false;
34729         if (!el.attr('tooltip')) {
34730             pel = el.findParent("[tooltip]");
34731             if (pel) {
34732                 bindEl = Roo.get(pel);
34733             }
34734         }
34735         
34736        
34737         
34738         // you can not look for children, as if el is the body.. then everythign is the child..
34739         if (!pel && !el.attr('tooltip')) { //
34740             if (!el.select("[tooltip]").elements.length) {
34741                 return;
34742             }
34743             // is the mouse over this child...?
34744             bindEl = el.select("[tooltip]").first();
34745             var xy = ev.getXY();
34746             if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
34747                 //Roo.log("not in region.");
34748                 return;
34749             }
34750             //Roo.log("child element over..");
34751             
34752         }
34753         this.currentEl = el;
34754         this.currentTip.bind(bindEl);
34755         this.currentRegion = Roo.lib.Region.getRegion(dom);
34756         this.currentTip.enter();
34757         
34758     },
34759     leave : function(ev)
34760     {
34761         var dom = ev.getTarget();
34762         //Roo.log(['leave',dom]);
34763         if (!this.currentEl) {
34764             return;
34765         }
34766         
34767         
34768         if (dom != this.currentEl.dom) {
34769             return;
34770         }
34771         var xy = ev.getXY();
34772         if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0]  ))) {
34773             return;
34774         }
34775         // only activate leave if mouse cursor is outside... bounding box..
34776         
34777         
34778         
34779         
34780         if (this.currentTip) {
34781             this.currentTip.leave();
34782         }
34783         //Roo.log('clear currentEl');
34784         this.currentEl = false;
34785         
34786         
34787     },
34788     alignment : {
34789         'left' : ['r-l', [-2,0], 'right'],
34790         'right' : ['l-r', [2,0], 'left'],
34791         'bottom' : ['t-b', [0,2], 'top'],
34792         'top' : [ 'b-t', [0,-2], 'bottom']
34793     }
34794     
34795 });
34796
34797
34798 Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
34799     
34800     
34801     bindEl : false,
34802     
34803     delay : null, // can be { show : 300 , hide: 500}
34804     
34805     timeout : null,
34806     
34807     hoverState : null, //???
34808     
34809     placement : 'bottom', 
34810     
34811     alignment : false,
34812     
34813     getAutoCreate : function(){
34814     
34815         var cfg = {
34816            cls : 'tooltip',   
34817            role : 'tooltip',
34818            cn : [
34819                 {
34820                     cls : 'tooltip-arrow arrow'
34821                 },
34822                 {
34823                     cls : 'tooltip-inner'
34824                 }
34825            ]
34826         };
34827         
34828         return cfg;
34829     },
34830     bind : function(el)
34831     {
34832         this.bindEl = el;
34833     },
34834     
34835     initEvents : function()
34836     {
34837         this.arrowEl = this.el.select('.arrow', true).first();
34838         this.innerEl = this.el.select('.tooltip-inner', true).first();
34839     },
34840     
34841     enter : function () {
34842        
34843         if (this.timeout != null) {
34844             clearTimeout(this.timeout);
34845         }
34846         
34847         this.hoverState = 'in';
34848          //Roo.log("enter - show");
34849         if (!this.delay || !this.delay.show) {
34850             this.show();
34851             return;
34852         }
34853         var _t = this;
34854         this.timeout = setTimeout(function () {
34855             if (_t.hoverState == 'in') {
34856                 _t.show();
34857             }
34858         }, this.delay.show);
34859     },
34860     leave : function()
34861     {
34862         clearTimeout(this.timeout);
34863     
34864         this.hoverState = 'out';
34865          if (!this.delay || !this.delay.hide) {
34866             this.hide();
34867             return;
34868         }
34869        
34870         var _t = this;
34871         this.timeout = setTimeout(function () {
34872             //Roo.log("leave - timeout");
34873             
34874             if (_t.hoverState == 'out') {
34875                 _t.hide();
34876                 Roo.bootstrap.Tooltip.currentEl = false;
34877             }
34878         }, delay);
34879     },
34880     
34881     show : function (msg)
34882     {
34883         if (!this.el) {
34884             this.render(document.body);
34885         }
34886         // set content.
34887         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
34888         
34889         var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
34890         
34891         this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
34892         
34893         this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
34894                              'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
34895
34896         if(this.bindEl.attr('tooltip-class')) {
34897             this.el.addClass(this.bindEl.attr('tooltip-class'));
34898         }
34899         
34900         var placement = typeof this.placement == 'function' ?
34901             this.placement.call(this, this.el, on_el) :
34902             this.placement;
34903         
34904         if(this.bindEl.attr('tooltip-placement')) {
34905             placement = this.bindEl.attr('tooltip-placement');
34906         }
34907             
34908         var autoToken = /\s?auto?\s?/i;
34909         var autoPlace = autoToken.test(placement);
34910         if (autoPlace) {
34911             placement = placement.replace(autoToken, '') || 'top';
34912         }
34913         
34914         //this.el.detach()
34915         //this.el.setXY([0,0]);
34916         this.el.show();
34917         //this.el.dom.style.display='block';
34918         
34919         //this.el.appendTo(on_el);
34920         
34921         var p = this.getPosition();
34922         var box = this.el.getBox();
34923         
34924         if (autoPlace) {
34925             // fixme..
34926         }
34927         
34928         var align = this.alignment[placement];
34929         
34930         var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
34931         
34932         if(placement == 'top' || placement == 'bottom'){
34933             if(xy[0] < 0){
34934                 placement = 'right';
34935             }
34936             
34937             if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
34938                 placement = 'left';
34939             }
34940             
34941             var scroll = Roo.select('body', true).first().getScroll();
34942             
34943             if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
34944                 placement = 'top';
34945             }
34946             
34947             align = this.alignment[placement];
34948             
34949             this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
34950             
34951         }
34952         
34953         var elems = document.getElementsByTagName('div');
34954         var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
34955         for (var i = 0; i < elems.length; i++) {
34956           var zindex = Number.parseInt(
34957                 document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
34958                 10
34959           );
34960           if (zindex > highest) {
34961             highest = zindex;
34962           }
34963         }
34964         
34965         
34966         
34967         this.el.dom.style.zIndex = highest;
34968         
34969         this.el.alignTo(this.bindEl, align[0],align[1]);
34970         //var arrow = this.el.select('.arrow',true).first();
34971         //arrow.set(align[2], 
34972         
34973         this.el.addClass(placement);
34974         this.el.addClass("bs-tooltip-"+ placement);
34975         
34976         this.el.addClass('in fade show');
34977         
34978         this.hoverState = null;
34979         
34980         if (this.el.hasClass('fade')) {
34981             // fade it?
34982         }
34983         
34984         
34985         
34986         
34987         
34988     },
34989     hide : function()
34990     {
34991          
34992         if (!this.el) {
34993             return;
34994         }
34995         //this.el.setXY([0,0]);
34996         if(this.bindEl.attr('tooltip-class')) {
34997             this.el.removeClass(this.bindEl.attr('tooltip-class'));
34998         }
34999         this.el.removeClass(['show', 'in']);
35000         //this.el.hide();
35001         
35002     }
35003     
35004 });
35005  
35006
35007  /*
35008  * - LGPL
35009  *
35010  * Location Picker
35011  * 
35012  */
35013
35014 /**
35015  * @class Roo.bootstrap.LocationPicker
35016  * @extends Roo.bootstrap.Component
35017  * Bootstrap LocationPicker class
35018  * @cfg {Number} latitude Position when init default 0
35019  * @cfg {Number} longitude Position when init default 0
35020  * @cfg {Number} zoom default 15
35021  * @cfg {String} mapTypeId default google.maps.MapTypeId.ROADMAP
35022  * @cfg {Boolean} mapTypeControl default false
35023  * @cfg {Boolean} disableDoubleClickZoom default false
35024  * @cfg {Boolean} scrollwheel default true
35025  * @cfg {Boolean} streetViewControl default false
35026  * @cfg {Number} radius default 0
35027  * @cfg {String} locationName
35028  * @cfg {Boolean} draggable default true
35029  * @cfg {Boolean} enableAutocomplete default false
35030  * @cfg {Boolean} enableReverseGeocode default true
35031  * @cfg {String} markerTitle
35032  * 
35033  * @constructor
35034  * Create a new LocationPicker
35035  * @param {Object} config The config object
35036  */
35037
35038
35039 Roo.bootstrap.LocationPicker = function(config){
35040     
35041     Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
35042     
35043     this.addEvents({
35044         /**
35045          * @event initial
35046          * Fires when the picker initialized.
35047          * @param {Roo.bootstrap.LocationPicker} this
35048          * @param {Google Location} location
35049          */
35050         initial : true,
35051         /**
35052          * @event positionchanged
35053          * Fires when the picker position changed.
35054          * @param {Roo.bootstrap.LocationPicker} this
35055          * @param {Google Location} location
35056          */
35057         positionchanged : true,
35058         /**
35059          * @event resize
35060          * Fires when the map resize.
35061          * @param {Roo.bootstrap.LocationPicker} this
35062          */
35063         resize : true,
35064         /**
35065          * @event show
35066          * Fires when the map show.
35067          * @param {Roo.bootstrap.LocationPicker} this
35068          */
35069         show : true,
35070         /**
35071          * @event hide
35072          * Fires when the map hide.
35073          * @param {Roo.bootstrap.LocationPicker} this
35074          */
35075         hide : true,
35076         /**
35077          * @event mapClick
35078          * Fires when click the map.
35079          * @param {Roo.bootstrap.LocationPicker} this
35080          * @param {Map event} e
35081          */
35082         mapClick : true,
35083         /**
35084          * @event mapRightClick
35085          * Fires when right click the map.
35086          * @param {Roo.bootstrap.LocationPicker} this
35087          * @param {Map event} e
35088          */
35089         mapRightClick : true,
35090         /**
35091          * @event markerClick
35092          * Fires when click the marker.
35093          * @param {Roo.bootstrap.LocationPicker} this
35094          * @param {Map event} e
35095          */
35096         markerClick : true,
35097         /**
35098          * @event markerRightClick
35099          * Fires when right click the marker.
35100          * @param {Roo.bootstrap.LocationPicker} this
35101          * @param {Map event} e
35102          */
35103         markerRightClick : true,
35104         /**
35105          * @event OverlayViewDraw
35106          * Fires when OverlayView Draw
35107          * @param {Roo.bootstrap.LocationPicker} this
35108          */
35109         OverlayViewDraw : true,
35110         /**
35111          * @event OverlayViewOnAdd
35112          * Fires when OverlayView Draw
35113          * @param {Roo.bootstrap.LocationPicker} this
35114          */
35115         OverlayViewOnAdd : true,
35116         /**
35117          * @event OverlayViewOnRemove
35118          * Fires when OverlayView Draw
35119          * @param {Roo.bootstrap.LocationPicker} this
35120          */
35121         OverlayViewOnRemove : true,
35122         /**
35123          * @event OverlayViewShow
35124          * Fires when OverlayView Draw
35125          * @param {Roo.bootstrap.LocationPicker} this
35126          * @param {Pixel} cpx
35127          */
35128         OverlayViewShow : true,
35129         /**
35130          * @event OverlayViewHide
35131          * Fires when OverlayView Draw
35132          * @param {Roo.bootstrap.LocationPicker} this
35133          */
35134         OverlayViewHide : true,
35135         /**
35136          * @event loadexception
35137          * Fires when load google lib failed.
35138          * @param {Roo.bootstrap.LocationPicker} this
35139          */
35140         loadexception : true
35141     });
35142         
35143 };
35144
35145 Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
35146     
35147     gMapContext: false,
35148     
35149     latitude: 0,
35150     longitude: 0,
35151     zoom: 15,
35152     mapTypeId: false,
35153     mapTypeControl: false,
35154     disableDoubleClickZoom: false,
35155     scrollwheel: true,
35156     streetViewControl: false,
35157     radius: 0,
35158     locationName: '',
35159     draggable: true,
35160     enableAutocomplete: false,
35161     enableReverseGeocode: true,
35162     markerTitle: '',
35163     
35164     getAutoCreate: function()
35165     {
35166
35167         var cfg = {
35168             tag: 'div',
35169             cls: 'roo-location-picker'
35170         };
35171         
35172         return cfg
35173     },
35174     
35175     initEvents: function(ct, position)
35176     {       
35177         if(!this.el.getWidth() || this.isApplied()){
35178             return;
35179         }
35180         
35181         this.el.setVisibilityMode(Roo.Element.DISPLAY);
35182         
35183         this.initial();
35184     },
35185     
35186     initial: function()
35187     {
35188         if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
35189             this.fireEvent('loadexception', this);
35190             return;
35191         }
35192         
35193         if(!this.mapTypeId){
35194             this.mapTypeId = google.maps.MapTypeId.ROADMAP;
35195         }
35196         
35197         this.gMapContext = this.GMapContext();
35198         
35199         this.initOverlayView();
35200         
35201         this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
35202         
35203         var _this = this;
35204                 
35205         google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
35206             _this.setPosition(_this.gMapContext.marker.position);
35207         });
35208         
35209         google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
35210             _this.fireEvent('mapClick', this, event);
35211             
35212         });
35213
35214         google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
35215             _this.fireEvent('mapRightClick', this, event);
35216             
35217         });
35218         
35219         google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
35220             _this.fireEvent('markerClick', this, event);
35221             
35222         });
35223
35224         google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
35225             _this.fireEvent('markerRightClick', this, event);
35226             
35227         });
35228         
35229         this.setPosition(this.gMapContext.location);
35230         
35231         this.fireEvent('initial', this, this.gMapContext.location);
35232     },
35233     
35234     initOverlayView: function()
35235     {
35236         var _this = this;
35237         
35238         Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
35239             
35240             draw: function()
35241             {
35242                 _this.fireEvent('OverlayViewDraw', _this);
35243             },
35244             
35245             onAdd: function()
35246             {
35247                 _this.fireEvent('OverlayViewOnAdd', _this);
35248             },
35249             
35250             onRemove: function()
35251             {
35252                 _this.fireEvent('OverlayViewOnRemove', _this);
35253             },
35254             
35255             show: function(cpx)
35256             {
35257                 _this.fireEvent('OverlayViewShow', _this, cpx);
35258             },
35259             
35260             hide: function()
35261             {
35262                 _this.fireEvent('OverlayViewHide', _this);
35263             }
35264             
35265         });
35266     },
35267     
35268     fromLatLngToContainerPixel: function(event)
35269     {
35270         return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
35271     },
35272     
35273     isApplied: function() 
35274     {
35275         return this.getGmapContext() == false ? false : true;
35276     },
35277     
35278     getGmapContext: function() 
35279     {
35280         return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
35281     },
35282     
35283     GMapContext: function() 
35284     {
35285         var position = new google.maps.LatLng(this.latitude, this.longitude);
35286         
35287         var _map = new google.maps.Map(this.el.dom, {
35288             center: position,
35289             zoom: this.zoom,
35290             mapTypeId: this.mapTypeId,
35291             mapTypeControl: this.mapTypeControl,
35292             disableDoubleClickZoom: this.disableDoubleClickZoom,
35293             scrollwheel: this.scrollwheel,
35294             streetViewControl: this.streetViewControl,
35295             locationName: this.locationName,
35296             draggable: this.draggable,
35297             enableAutocomplete: this.enableAutocomplete,
35298             enableReverseGeocode: this.enableReverseGeocode
35299         });
35300         
35301         var _marker = new google.maps.Marker({
35302             position: position,
35303             map: _map,
35304             title: this.markerTitle,
35305             draggable: this.draggable
35306         });
35307         
35308         return {
35309             map: _map,
35310             marker: _marker,
35311             circle: null,
35312             location: position,
35313             radius: this.radius,
35314             locationName: this.locationName,
35315             addressComponents: {
35316                 formatted_address: null,
35317                 addressLine1: null,
35318                 addressLine2: null,
35319                 streetName: null,
35320                 streetNumber: null,
35321                 city: null,
35322                 district: null,
35323                 state: null,
35324                 stateOrProvince: null
35325             },
35326             settings: this,
35327             domContainer: this.el.dom,
35328             geodecoder: new google.maps.Geocoder()
35329         };
35330     },
35331     
35332     drawCircle: function(center, radius, options) 
35333     {
35334         if (this.gMapContext.circle != null) {
35335             this.gMapContext.circle.setMap(null);
35336         }
35337         if (radius > 0) {
35338             radius *= 1;
35339             options = Roo.apply({}, options, {
35340                 strokeColor: "#0000FF",
35341                 strokeOpacity: .35,
35342                 strokeWeight: 2,
35343                 fillColor: "#0000FF",
35344                 fillOpacity: .2
35345             });
35346             
35347             options.map = this.gMapContext.map;
35348             options.radius = radius;
35349             options.center = center;
35350             this.gMapContext.circle = new google.maps.Circle(options);
35351             return this.gMapContext.circle;
35352         }
35353         
35354         return null;
35355     },
35356     
35357     setPosition: function(location) 
35358     {
35359         this.gMapContext.location = location;
35360         this.gMapContext.marker.setPosition(location);
35361         this.gMapContext.map.panTo(location);
35362         this.drawCircle(location, this.gMapContext.radius, {});
35363         
35364         var _this = this;
35365         
35366         if (this.gMapContext.settings.enableReverseGeocode) {
35367             this.gMapContext.geodecoder.geocode({
35368                 latLng: this.gMapContext.location
35369             }, function(results, status) {
35370                 
35371                 if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
35372                     _this.gMapContext.locationName = results[0].formatted_address;
35373                     _this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
35374                     
35375                     _this.fireEvent('positionchanged', this, location);
35376                 }
35377             });
35378             
35379             return;
35380         }
35381         
35382         this.fireEvent('positionchanged', this, location);
35383     },
35384     
35385     resize: function()
35386     {
35387         google.maps.event.trigger(this.gMapContext.map, "resize");
35388         
35389         this.gMapContext.map.setCenter(this.gMapContext.marker.position);
35390         
35391         this.fireEvent('resize', this);
35392     },
35393     
35394     setPositionByLatLng: function(latitude, longitude)
35395     {
35396         this.setPosition(new google.maps.LatLng(latitude, longitude));
35397     },
35398     
35399     getCurrentPosition: function() 
35400     {
35401         return {
35402             latitude: this.gMapContext.location.lat(),
35403             longitude: this.gMapContext.location.lng()
35404         };
35405     },
35406     
35407     getAddressName: function() 
35408     {
35409         return this.gMapContext.locationName;
35410     },
35411     
35412     getAddressComponents: function() 
35413     {
35414         return this.gMapContext.addressComponents;
35415     },
35416     
35417     address_component_from_google_geocode: function(address_components) 
35418     {
35419         var result = {};
35420         
35421         for (var i = 0; i < address_components.length; i++) {
35422             var component = address_components[i];
35423             if (component.types.indexOf("postal_code") >= 0) {
35424                 result.postalCode = component.short_name;
35425             } else if (component.types.indexOf("street_number") >= 0) {
35426                 result.streetNumber = component.short_name;
35427             } else if (component.types.indexOf("route") >= 0) {
35428                 result.streetName = component.short_name;
35429             } else if (component.types.indexOf("neighborhood") >= 0) {
35430                 result.city = component.short_name;
35431             } else if (component.types.indexOf("locality") >= 0) {
35432                 result.city = component.short_name;
35433             } else if (component.types.indexOf("sublocality") >= 0) {
35434                 result.district = component.short_name;
35435             } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
35436                 result.stateOrProvince = component.short_name;
35437             } else if (component.types.indexOf("country") >= 0) {
35438                 result.country = component.short_name;
35439             }
35440         }
35441         
35442         result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
35443         result.addressLine2 = "";
35444         return result;
35445     },
35446     
35447     setZoomLevel: function(zoom)
35448     {
35449         this.gMapContext.map.setZoom(zoom);
35450     },
35451     
35452     show: function()
35453     {
35454         if(!this.el){
35455             return;
35456         }
35457         
35458         this.el.show();
35459         
35460         this.resize();
35461         
35462         this.fireEvent('show', this);
35463     },
35464     
35465     hide: function()
35466     {
35467         if(!this.el){
35468             return;
35469         }
35470         
35471         this.el.hide();
35472         
35473         this.fireEvent('hide', this);
35474     }
35475     
35476 });
35477
35478 Roo.apply(Roo.bootstrap.LocationPicker, {
35479     
35480     OverlayView : function(map, options)
35481     {
35482         options = options || {};
35483         
35484         this.setMap(map);
35485     }
35486     
35487     
35488 });/**
35489  * @class Roo.bootstrap.Alert
35490  * @extends Roo.bootstrap.Component
35491  * Bootstrap Alert class - shows an alert area box
35492  * eg
35493  * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
35494   Enter a valid email address
35495 </div>
35496  * @licence LGPL
35497  * @cfg {String} title The title of alert
35498  * @cfg {String} html The content of alert
35499  * @cfg {String} weight (success|info|warning|danger) Weight of the message
35500  * @cfg {String} fa font-awesomeicon
35501  * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
35502  * @cfg {Boolean} close true to show a x closer
35503  * 
35504  * 
35505  * @constructor
35506  * Create a new alert
35507  * @param {Object} config The config object
35508  */
35509
35510
35511 Roo.bootstrap.Alert = function(config){
35512     Roo.bootstrap.Alert.superclass.constructor.call(this, config);
35513     
35514 };
35515
35516 Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
35517     
35518     title: '',
35519     html: '',
35520     weight: false,
35521     fa: false,
35522     faicon: false, // BC
35523     close : false,
35524     
35525     
35526     getAutoCreate : function()
35527     {
35528         
35529         var cfg = {
35530             tag : 'div',
35531             cls : 'alert',
35532             cn : [
35533                 {
35534                     tag: 'button',
35535                     type :  "button",
35536                     cls: "close",
35537                     html : '×',
35538                     style : this.close ? '' : 'display:none'
35539                 },
35540                 {
35541                     tag : 'i',
35542                     cls : 'roo-alert-icon'
35543                     
35544                 },
35545                 {
35546                     tag : 'b',
35547                     cls : 'roo-alert-title',
35548                     html : this.title
35549                 },
35550                 {
35551                     tag : 'span',
35552                     cls : 'roo-alert-text',
35553                     html : this.html
35554                 }
35555             ]
35556         };
35557         
35558         if(this.faicon){
35559             cfg.cn[0].cls += ' fa ' + this.faicon;
35560         }
35561         if(this.fa){
35562             cfg.cn[0].cls += ' fa ' + this.fa;
35563         }
35564         
35565         if(this.weight){
35566             cfg.cls += ' alert-' + this.weight;
35567         }
35568         
35569         return cfg;
35570     },
35571     
35572     initEvents: function() 
35573     {
35574         this.el.setVisibilityMode(Roo.Element.DISPLAY);
35575         this.titleEl =  this.el.select('.roo-alert-title',true).first();
35576         this.iconEl = this.el.select('.roo-alert-icon',true).first();
35577         this.htmlEl = this.el.select('.roo-alert-text',true).first();
35578         if (this.seconds > 0) {
35579             this.hide.defer(this.seconds, this);
35580         }
35581     },
35582     /**
35583      * Set the Title Message HTML
35584      * @param {String} html
35585      */
35586     setTitle : function(str)
35587     {
35588         this.titleEl.dom.innerHTML = str;
35589     },
35590      
35591      /**
35592      * Set the Body Message HTML
35593      * @param {String} html
35594      */
35595     setHtml : function(str)
35596     {
35597         this.htmlEl.dom.innerHTML = str;
35598     },
35599     /**
35600      * Set the Weight of the alert
35601      * @param {String} (success|info|warning|danger) weight
35602      */
35603     
35604     setWeight : function(weight)
35605     {
35606         if(this.weight){
35607             this.el.removeClass('alert-' + this.weight);
35608         }
35609         
35610         this.weight = weight;
35611         
35612         this.el.addClass('alert-' + this.weight);
35613     },
35614       /**
35615      * Set the Icon of the alert
35616      * @param {String} see fontawsome names (name without the 'fa-' bit)
35617      */
35618     setIcon : function(icon)
35619     {
35620         if(this.faicon){
35621             this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
35622         }
35623         
35624         this.faicon = icon;
35625         
35626         this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
35627     },
35628     /**
35629      * Hide the Alert
35630      */
35631     hide: function() 
35632     {
35633         this.el.hide();   
35634     },
35635     /**
35636      * Show the Alert
35637      */
35638     show: function() 
35639     {  
35640         this.el.show();   
35641     }
35642     
35643 });
35644
35645  
35646 /*
35647 * Licence: LGPL
35648 */
35649
35650 /**
35651  * @class Roo.bootstrap.UploadCropbox
35652  * @extends Roo.bootstrap.Component
35653  * Bootstrap UploadCropbox class
35654  * @cfg {String} emptyText show when image has been loaded
35655  * @cfg {String} rotateNotify show when image too small to rotate
35656  * @cfg {Number} errorTimeout default 3000
35657  * @cfg {Number} minWidth default 300
35658  * @cfg {Number} minHeight default 300
35659  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
35660  * @cfg {Boolean} isDocument (true|false) default false
35661  * @cfg {String} url action url
35662  * @cfg {String} paramName default 'imageUpload'
35663  * @cfg {String} method default POST
35664  * @cfg {Boolean} loadMask (true|false) default true
35665  * @cfg {Boolean} loadingText default 'Loading...'
35666  * 
35667  * @constructor
35668  * Create a new UploadCropbox
35669  * @param {Object} config The config object
35670  */
35671
35672 Roo.bootstrap.UploadCropbox = function(config){
35673     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
35674     
35675     this.addEvents({
35676         /**
35677          * @event beforeselectfile
35678          * Fire before select file
35679          * @param {Roo.bootstrap.UploadCropbox} this
35680          */
35681         "beforeselectfile" : true,
35682         /**
35683          * @event initial
35684          * Fire after initEvent
35685          * @param {Roo.bootstrap.UploadCropbox} this
35686          */
35687         "initial" : true,
35688         /**
35689          * @event crop
35690          * Fire after initEvent
35691          * @param {Roo.bootstrap.UploadCropbox} this
35692          * @param {String} data
35693          */
35694         "crop" : true,
35695         /**
35696          * @event prepare
35697          * Fire when preparing the file data
35698          * @param {Roo.bootstrap.UploadCropbox} this
35699          * @param {Object} file
35700          */
35701         "prepare" : true,
35702         /**
35703          * @event exception
35704          * Fire when get exception
35705          * @param {Roo.bootstrap.UploadCropbox} this
35706          * @param {XMLHttpRequest} xhr
35707          */
35708         "exception" : true,
35709         /**
35710          * @event beforeloadcanvas
35711          * Fire before load the canvas
35712          * @param {Roo.bootstrap.UploadCropbox} this
35713          * @param {String} src
35714          */
35715         "beforeloadcanvas" : true,
35716         /**
35717          * @event trash
35718          * Fire when trash image
35719          * @param {Roo.bootstrap.UploadCropbox} this
35720          */
35721         "trash" : true,
35722         /**
35723          * @event download
35724          * Fire when download the image
35725          * @param {Roo.bootstrap.UploadCropbox} this
35726          */
35727         "download" : true,
35728         /**
35729          * @event footerbuttonclick
35730          * Fire when footerbuttonclick
35731          * @param {Roo.bootstrap.UploadCropbox} this
35732          * @param {String} type
35733          */
35734         "footerbuttonclick" : true,
35735         /**
35736          * @event resize
35737          * Fire when resize
35738          * @param {Roo.bootstrap.UploadCropbox} this
35739          */
35740         "resize" : true,
35741         /**
35742          * @event rotate
35743          * Fire when rotate the image
35744          * @param {Roo.bootstrap.UploadCropbox} this
35745          * @param {String} pos
35746          */
35747         "rotate" : true,
35748         /**
35749          * @event inspect
35750          * Fire when inspect the file
35751          * @param {Roo.bootstrap.UploadCropbox} this
35752          * @param {Object} file
35753          */
35754         "inspect" : true,
35755         /**
35756          * @event upload
35757          * Fire when xhr upload the file
35758          * @param {Roo.bootstrap.UploadCropbox} this
35759          * @param {Object} data
35760          */
35761         "upload" : true,
35762         /**
35763          * @event arrange
35764          * Fire when arrange the file data
35765          * @param {Roo.bootstrap.UploadCropbox} this
35766          * @param {Object} formData
35767          */
35768         "arrange" : true
35769     });
35770     
35771     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
35772 };
35773
35774 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
35775     
35776     emptyText : 'Click to upload image',
35777     rotateNotify : 'Image is too small to rotate',
35778     errorTimeout : 3000,
35779     scale : 0,
35780     baseScale : 1,
35781     rotate : 0,
35782     dragable : false,
35783     pinching : false,
35784     mouseX : 0,
35785     mouseY : 0,
35786     cropData : false,
35787     minWidth : 300,
35788     minHeight : 300,
35789     file : false,
35790     exif : {},
35791     baseRotate : 1,
35792     cropType : 'image/jpeg',
35793     buttons : false,
35794     canvasLoaded : false,
35795     isDocument : false,
35796     method : 'POST',
35797     paramName : 'imageUpload',
35798     loadMask : true,
35799     loadingText : 'Loading...',
35800     maskEl : false,
35801     
35802     getAutoCreate : function()
35803     {
35804         var cfg = {
35805             tag : 'div',
35806             cls : 'roo-upload-cropbox',
35807             cn : [
35808                 {
35809                     tag : 'input',
35810                     cls : 'roo-upload-cropbox-selector',
35811                     type : 'file'
35812                 },
35813                 {
35814                     tag : 'div',
35815                     cls : 'roo-upload-cropbox-body',
35816                     style : 'cursor:pointer',
35817                     cn : [
35818                         {
35819                             tag : 'div',
35820                             cls : 'roo-upload-cropbox-preview'
35821                         },
35822                         {
35823                             tag : 'div',
35824                             cls : 'roo-upload-cropbox-thumb'
35825                         },
35826                         {
35827                             tag : 'div',
35828                             cls : 'roo-upload-cropbox-empty-notify',
35829                             html : this.emptyText
35830                         },
35831                         {
35832                             tag : 'div',
35833                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
35834                             html : this.rotateNotify
35835                         }
35836                     ]
35837                 },
35838                 {
35839                     tag : 'div',
35840                     cls : 'roo-upload-cropbox-footer',
35841                     cn : {
35842                         tag : 'div',
35843                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
35844                         cn : []
35845                     }
35846                 }
35847             ]
35848         };
35849         
35850         return cfg;
35851     },
35852     
35853     onRender : function(ct, position)
35854     {
35855         Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
35856         
35857         if (this.buttons.length) {
35858             
35859             Roo.each(this.buttons, function(bb) {
35860                 
35861                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
35862                 
35863                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
35864                 
35865             }, this);
35866         }
35867         
35868         if(this.loadMask){
35869             this.maskEl = this.el;
35870         }
35871     },
35872     
35873     initEvents : function()
35874     {
35875         this.urlAPI = (window.createObjectURL && window) || 
35876                                 (window.URL && URL.revokeObjectURL && URL) || 
35877                                 (window.webkitURL && webkitURL);
35878                         
35879         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
35880         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35881         
35882         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
35883         this.selectorEl.hide();
35884         
35885         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
35886         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35887         
35888         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
35889         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35890         this.thumbEl.hide();
35891         
35892         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
35893         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35894         
35895         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
35896         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35897         this.errorEl.hide();
35898         
35899         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
35900         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35901         this.footerEl.hide();
35902         
35903         this.setThumbBoxSize();
35904         
35905         this.bind();
35906         
35907         this.resize();
35908         
35909         this.fireEvent('initial', this);
35910     },
35911
35912     bind : function()
35913     {
35914         var _this = this;
35915         
35916         window.addEventListener("resize", function() { _this.resize(); } );
35917         
35918         this.bodyEl.on('click', this.beforeSelectFile, this);
35919         
35920         if(Roo.isTouch){
35921             this.bodyEl.on('touchstart', this.onTouchStart, this);
35922             this.bodyEl.on('touchmove', this.onTouchMove, this);
35923             this.bodyEl.on('touchend', this.onTouchEnd, this);
35924         }
35925         
35926         if(!Roo.isTouch){
35927             this.bodyEl.on('mousedown', this.onMouseDown, this);
35928             this.bodyEl.on('mousemove', this.onMouseMove, this);
35929             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
35930             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
35931             Roo.get(document).on('mouseup', this.onMouseUp, this);
35932         }
35933         
35934         this.selectorEl.on('change', this.onFileSelected, this);
35935     },
35936     
35937     reset : function()
35938     {    
35939         this.scale = 0;
35940         this.baseScale = 1;
35941         this.rotate = 0;
35942         this.baseRotate = 1;
35943         this.dragable = false;
35944         this.pinching = false;
35945         this.mouseX = 0;
35946         this.mouseY = 0;
35947         this.cropData = false;
35948         this.notifyEl.dom.innerHTML = this.emptyText;
35949         
35950         this.selectorEl.dom.value = '';
35951         
35952     },
35953     
35954     resize : function()
35955     {
35956         if(this.fireEvent('resize', this) != false){
35957             this.setThumbBoxPosition();
35958             this.setCanvasPosition();
35959         }
35960     },
35961     
35962     onFooterButtonClick : function(e, el, o, type)
35963     {
35964         switch (type) {
35965             case 'rotate-left' :
35966                 this.onRotateLeft(e);
35967                 break;
35968             case 'rotate-right' :
35969                 this.onRotateRight(e);
35970                 break;
35971             case 'picture' :
35972                 this.beforeSelectFile(e);
35973                 break;
35974             case 'trash' :
35975                 this.trash(e);
35976                 break;
35977             case 'crop' :
35978                 this.crop(e);
35979                 break;
35980             case 'download' :
35981                 this.download(e);
35982                 break;
35983             default :
35984                 break;
35985         }
35986         
35987         this.fireEvent('footerbuttonclick', this, type);
35988     },
35989     
35990     beforeSelectFile : function(e)
35991     {
35992         e.preventDefault();
35993         
35994         if(this.fireEvent('beforeselectfile', this) != false){
35995             this.selectorEl.dom.click();
35996         }
35997     },
35998     
35999     onFileSelected : function(e)
36000     {
36001         e.preventDefault();
36002         
36003         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
36004             return;
36005         }
36006         
36007         var file = this.selectorEl.dom.files[0];
36008         
36009         if(this.fireEvent('inspect', this, file) != false){
36010             this.prepare(file);
36011         }
36012         
36013     },
36014     
36015     trash : function(e)
36016     {
36017         this.fireEvent('trash', this);
36018     },
36019     
36020     download : function(e)
36021     {
36022         this.fireEvent('download', this);
36023     },
36024     
36025     loadCanvas : function(src)
36026     {   
36027         if(this.fireEvent('beforeloadcanvas', this, src) != false){
36028             
36029             this.reset();
36030             
36031             this.imageEl = document.createElement('img');
36032             
36033             var _this = this;
36034             
36035             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
36036             
36037             this.imageEl.src = src;
36038         }
36039     },
36040     
36041     onLoadCanvas : function()
36042     {   
36043         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
36044         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
36045         
36046         this.bodyEl.un('click', this.beforeSelectFile, this);
36047         
36048         this.notifyEl.hide();
36049         this.thumbEl.show();
36050         this.footerEl.show();
36051         
36052         this.baseRotateLevel();
36053         
36054         if(this.isDocument){
36055             this.setThumbBoxSize();
36056         }
36057         
36058         this.setThumbBoxPosition();
36059         
36060         this.baseScaleLevel();
36061         
36062         this.draw();
36063         
36064         this.resize();
36065         
36066         this.canvasLoaded = true;
36067         
36068         if(this.loadMask){
36069             this.maskEl.unmask();
36070         }
36071         
36072     },
36073     
36074     setCanvasPosition : function()
36075     {   
36076         if(!this.canvasEl){
36077             return;
36078         }
36079         
36080         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
36081         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
36082         
36083         this.previewEl.setLeft(pw);
36084         this.previewEl.setTop(ph);
36085         
36086     },
36087     
36088     onMouseDown : function(e)
36089     {   
36090         e.stopEvent();
36091         
36092         this.dragable = true;
36093         this.pinching = false;
36094         
36095         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
36096             this.dragable = false;
36097             return;
36098         }
36099         
36100         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
36101         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
36102         
36103     },
36104     
36105     onMouseMove : function(e)
36106     {   
36107         e.stopEvent();
36108         
36109         if(!this.canvasLoaded){
36110             return;
36111         }
36112         
36113         if (!this.dragable){
36114             return;
36115         }
36116         
36117         var minX = Math.ceil(this.thumbEl.getLeft(true));
36118         var minY = Math.ceil(this.thumbEl.getTop(true));
36119         
36120         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
36121         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
36122         
36123         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
36124         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
36125         
36126         x = x - this.mouseX;
36127         y = y - this.mouseY;
36128         
36129         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
36130         var bgY = Math.ceil(y + this.previewEl.getTop(true));
36131         
36132         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
36133         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
36134         
36135         this.previewEl.setLeft(bgX);
36136         this.previewEl.setTop(bgY);
36137         
36138         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
36139         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
36140     },
36141     
36142     onMouseUp : function(e)
36143     {   
36144         e.stopEvent();
36145         
36146         this.dragable = false;
36147     },
36148     
36149     onMouseWheel : function(e)
36150     {   
36151         e.stopEvent();
36152         
36153         this.startScale = this.scale;
36154         
36155         this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
36156         
36157         if(!this.zoomable()){
36158             this.scale = this.startScale;
36159             return;
36160         }
36161         
36162         this.draw();
36163         
36164         return;
36165     },
36166     
36167     zoomable : function()
36168     {
36169         var minScale = this.thumbEl.getWidth() / this.minWidth;
36170         
36171         if(this.minWidth < this.minHeight){
36172             minScale = this.thumbEl.getHeight() / this.minHeight;
36173         }
36174         
36175         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
36176         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
36177         
36178         if(
36179                 this.isDocument &&
36180                 (this.rotate == 0 || this.rotate == 180) && 
36181                 (
36182                     width > this.imageEl.OriginWidth || 
36183                     height > this.imageEl.OriginHeight ||
36184                     (width < this.minWidth && height < this.minHeight)
36185                 )
36186         ){
36187             return false;
36188         }
36189         
36190         if(
36191                 this.isDocument &&
36192                 (this.rotate == 90 || this.rotate == 270) && 
36193                 (
36194                     width > this.imageEl.OriginWidth || 
36195                     height > this.imageEl.OriginHeight ||
36196                     (width < this.minHeight && height < this.minWidth)
36197                 )
36198         ){
36199             return false;
36200         }
36201         
36202         if(
36203                 !this.isDocument &&
36204                 (this.rotate == 0 || this.rotate == 180) && 
36205                 (
36206                     width < this.minWidth || 
36207                     width > this.imageEl.OriginWidth || 
36208                     height < this.minHeight || 
36209                     height > this.imageEl.OriginHeight
36210                 )
36211         ){
36212             return false;
36213         }
36214         
36215         if(
36216                 !this.isDocument &&
36217                 (this.rotate == 90 || this.rotate == 270) && 
36218                 (
36219                     width < this.minHeight || 
36220                     width > this.imageEl.OriginWidth || 
36221                     height < this.minWidth || 
36222                     height > this.imageEl.OriginHeight
36223                 )
36224         ){
36225             return false;
36226         }
36227         
36228         return true;
36229         
36230     },
36231     
36232     onRotateLeft : function(e)
36233     {   
36234         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
36235             
36236             var minScale = this.thumbEl.getWidth() / this.minWidth;
36237             
36238             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
36239             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
36240             
36241             this.startScale = this.scale;
36242             
36243             while (this.getScaleLevel() < minScale){
36244             
36245                 this.scale = this.scale + 1;
36246                 
36247                 if(!this.zoomable()){
36248                     break;
36249                 }
36250                 
36251                 if(
36252                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
36253                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
36254                 ){
36255                     continue;
36256                 }
36257                 
36258                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
36259
36260                 this.draw();
36261                 
36262                 return;
36263             }
36264             
36265             this.scale = this.startScale;
36266             
36267             this.onRotateFail();
36268             
36269             return false;
36270         }
36271         
36272         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
36273
36274         if(this.isDocument){
36275             this.setThumbBoxSize();
36276             this.setThumbBoxPosition();
36277             this.setCanvasPosition();
36278         }
36279         
36280         this.draw();
36281         
36282         this.fireEvent('rotate', this, 'left');
36283         
36284     },
36285     
36286     onRotateRight : function(e)
36287     {
36288         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
36289             
36290             var minScale = this.thumbEl.getWidth() / this.minWidth;
36291         
36292             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
36293             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
36294             
36295             this.startScale = this.scale;
36296             
36297             while (this.getScaleLevel() < minScale){
36298             
36299                 this.scale = this.scale + 1;
36300                 
36301                 if(!this.zoomable()){
36302                     break;
36303                 }
36304                 
36305                 if(
36306                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
36307                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
36308                 ){
36309                     continue;
36310                 }
36311                 
36312                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
36313
36314                 this.draw();
36315                 
36316                 return;
36317             }
36318             
36319             this.scale = this.startScale;
36320             
36321             this.onRotateFail();
36322             
36323             return false;
36324         }
36325         
36326         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
36327
36328         if(this.isDocument){
36329             this.setThumbBoxSize();
36330             this.setThumbBoxPosition();
36331             this.setCanvasPosition();
36332         }
36333         
36334         this.draw();
36335         
36336         this.fireEvent('rotate', this, 'right');
36337     },
36338     
36339     onRotateFail : function()
36340     {
36341         this.errorEl.show(true);
36342         
36343         var _this = this;
36344         
36345         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
36346     },
36347     
36348     draw : function()
36349     {
36350         this.previewEl.dom.innerHTML = '';
36351         
36352         var canvasEl = document.createElement("canvas");
36353         
36354         var contextEl = canvasEl.getContext("2d");
36355         
36356         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36357         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36358         var center = this.imageEl.OriginWidth / 2;
36359         
36360         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
36361             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36362             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36363             center = this.imageEl.OriginHeight / 2;
36364         }
36365         
36366         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
36367         
36368         contextEl.translate(center, center);
36369         contextEl.rotate(this.rotate * Math.PI / 180);
36370
36371         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
36372         
36373         this.canvasEl = document.createElement("canvas");
36374         
36375         this.contextEl = this.canvasEl.getContext("2d");
36376         
36377         switch (this.rotate) {
36378             case 0 :
36379                 
36380                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36381                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36382                 
36383                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36384                 
36385                 break;
36386             case 90 : 
36387                 
36388                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36389                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36390                 
36391                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36392                     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);
36393                     break;
36394                 }
36395                 
36396                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36397                 
36398                 break;
36399             case 180 :
36400                 
36401                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36402                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36403                 
36404                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36405                     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);
36406                     break;
36407                 }
36408                 
36409                 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);
36410                 
36411                 break;
36412             case 270 :
36413                 
36414                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36415                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36416         
36417                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36418                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36419                     break;
36420                 }
36421                 
36422                 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);
36423                 
36424                 break;
36425             default : 
36426                 break;
36427         }
36428         
36429         this.previewEl.appendChild(this.canvasEl);
36430         
36431         this.setCanvasPosition();
36432     },
36433     
36434     crop : function()
36435     {
36436         if(!this.canvasLoaded){
36437             return;
36438         }
36439         
36440         var imageCanvas = document.createElement("canvas");
36441         
36442         var imageContext = imageCanvas.getContext("2d");
36443         
36444         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
36445         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
36446         
36447         var center = imageCanvas.width / 2;
36448         
36449         imageContext.translate(center, center);
36450         
36451         imageContext.rotate(this.rotate * Math.PI / 180);
36452         
36453         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
36454         
36455         var canvas = document.createElement("canvas");
36456         
36457         var context = canvas.getContext("2d");
36458                 
36459         canvas.width = this.minWidth;
36460         canvas.height = this.minHeight;
36461
36462         switch (this.rotate) {
36463             case 0 :
36464                 
36465                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
36466                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
36467                 
36468                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36469                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36470                 
36471                 var targetWidth = this.minWidth - 2 * x;
36472                 var targetHeight = this.minHeight - 2 * y;
36473                 
36474                 var scale = 1;
36475                 
36476                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36477                     scale = targetWidth / width;
36478                 }
36479                 
36480                 if(x > 0 && y == 0){
36481                     scale = targetHeight / height;
36482                 }
36483                 
36484                 if(x > 0 && y > 0){
36485                     scale = targetWidth / width;
36486                     
36487                     if(width < height){
36488                         scale = targetHeight / height;
36489                     }
36490                 }
36491                 
36492                 context.scale(scale, scale);
36493                 
36494                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36495                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36496
36497                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36498                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36499
36500                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36501                 
36502                 break;
36503             case 90 : 
36504                 
36505                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
36506                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
36507                 
36508                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36509                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36510                 
36511                 var targetWidth = this.minWidth - 2 * x;
36512                 var targetHeight = this.minHeight - 2 * y;
36513                 
36514                 var scale = 1;
36515                 
36516                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36517                     scale = targetWidth / width;
36518                 }
36519                 
36520                 if(x > 0 && y == 0){
36521                     scale = targetHeight / height;
36522                 }
36523                 
36524                 if(x > 0 && y > 0){
36525                     scale = targetWidth / width;
36526                     
36527                     if(width < height){
36528                         scale = targetHeight / height;
36529                     }
36530                 }
36531                 
36532                 context.scale(scale, scale);
36533                 
36534                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36535                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36536
36537                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36538                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36539                 
36540                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
36541                 
36542                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36543                 
36544                 break;
36545             case 180 :
36546                 
36547                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
36548                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
36549                 
36550                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36551                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36552                 
36553                 var targetWidth = this.minWidth - 2 * x;
36554                 var targetHeight = this.minHeight - 2 * y;
36555                 
36556                 var scale = 1;
36557                 
36558                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36559                     scale = targetWidth / width;
36560                 }
36561                 
36562                 if(x > 0 && y == 0){
36563                     scale = targetHeight / height;
36564                 }
36565                 
36566                 if(x > 0 && y > 0){
36567                     scale = targetWidth / width;
36568                     
36569                     if(width < height){
36570                         scale = targetHeight / height;
36571                     }
36572                 }
36573                 
36574                 context.scale(scale, scale);
36575                 
36576                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36577                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36578
36579                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36580                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36581
36582                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
36583                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
36584                 
36585                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36586                 
36587                 break;
36588             case 270 :
36589                 
36590                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
36591                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
36592                 
36593                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36594                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36595                 
36596                 var targetWidth = this.minWidth - 2 * x;
36597                 var targetHeight = this.minHeight - 2 * y;
36598                 
36599                 var scale = 1;
36600                 
36601                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36602                     scale = targetWidth / width;
36603                 }
36604                 
36605                 if(x > 0 && y == 0){
36606                     scale = targetHeight / height;
36607                 }
36608                 
36609                 if(x > 0 && y > 0){
36610                     scale = targetWidth / width;
36611                     
36612                     if(width < height){
36613                         scale = targetHeight / height;
36614                     }
36615                 }
36616                 
36617                 context.scale(scale, scale);
36618                 
36619                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36620                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36621
36622                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36623                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36624                 
36625                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
36626                 
36627                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36628                 
36629                 break;
36630             default : 
36631                 break;
36632         }
36633         
36634         this.cropData = canvas.toDataURL(this.cropType);
36635         
36636         if(this.fireEvent('crop', this, this.cropData) !== false){
36637             this.process(this.file, this.cropData);
36638         }
36639         
36640         return;
36641         
36642     },
36643     
36644     setThumbBoxSize : function()
36645     {
36646         var width, height;
36647         
36648         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
36649             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
36650             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
36651             
36652             this.minWidth = width;
36653             this.minHeight = height;
36654             
36655             if(this.rotate == 90 || this.rotate == 270){
36656                 this.minWidth = height;
36657                 this.minHeight = width;
36658             }
36659         }
36660         
36661         height = 300;
36662         width = Math.ceil(this.minWidth * height / this.minHeight);
36663         
36664         if(this.minWidth > this.minHeight){
36665             width = 300;
36666             height = Math.ceil(this.minHeight * width / this.minWidth);
36667         }
36668         
36669         this.thumbEl.setStyle({
36670             width : width + 'px',
36671             height : height + 'px'
36672         });
36673
36674         return;
36675             
36676     },
36677     
36678     setThumbBoxPosition : function()
36679     {
36680         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
36681         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
36682         
36683         this.thumbEl.setLeft(x);
36684         this.thumbEl.setTop(y);
36685         
36686     },
36687     
36688     baseRotateLevel : function()
36689     {
36690         this.baseRotate = 1;
36691         
36692         if(
36693                 typeof(this.exif) != 'undefined' &&
36694                 typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
36695                 [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
36696         ){
36697             this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
36698         }
36699         
36700         this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
36701         
36702     },
36703     
36704     baseScaleLevel : function()
36705     {
36706         var width, height;
36707         
36708         if(this.isDocument){
36709             
36710             if(this.baseRotate == 6 || this.baseRotate == 8){
36711             
36712                 height = this.thumbEl.getHeight();
36713                 this.baseScale = height / this.imageEl.OriginWidth;
36714
36715                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
36716                     width = this.thumbEl.getWidth();
36717                     this.baseScale = width / this.imageEl.OriginHeight;
36718                 }
36719
36720                 return;
36721             }
36722
36723             height = this.thumbEl.getHeight();
36724             this.baseScale = height / this.imageEl.OriginHeight;
36725
36726             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
36727                 width = this.thumbEl.getWidth();
36728                 this.baseScale = width / this.imageEl.OriginWidth;
36729             }
36730
36731             return;
36732         }
36733         
36734         if(this.baseRotate == 6 || this.baseRotate == 8){
36735             
36736             width = this.thumbEl.getHeight();
36737             this.baseScale = width / this.imageEl.OriginHeight;
36738             
36739             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
36740                 height = this.thumbEl.getWidth();
36741                 this.baseScale = height / this.imageEl.OriginHeight;
36742             }
36743             
36744             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36745                 height = this.thumbEl.getWidth();
36746                 this.baseScale = height / this.imageEl.OriginHeight;
36747                 
36748                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
36749                     width = this.thumbEl.getHeight();
36750                     this.baseScale = width / this.imageEl.OriginWidth;
36751                 }
36752             }
36753             
36754             return;
36755         }
36756         
36757         width = this.thumbEl.getWidth();
36758         this.baseScale = width / this.imageEl.OriginWidth;
36759         
36760         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
36761             height = this.thumbEl.getHeight();
36762             this.baseScale = height / this.imageEl.OriginHeight;
36763         }
36764         
36765         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36766             
36767             height = this.thumbEl.getHeight();
36768             this.baseScale = height / this.imageEl.OriginHeight;
36769             
36770             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
36771                 width = this.thumbEl.getWidth();
36772                 this.baseScale = width / this.imageEl.OriginWidth;
36773             }
36774             
36775         }
36776         
36777         return;
36778     },
36779     
36780     getScaleLevel : function()
36781     {
36782         return this.baseScale * Math.pow(1.1, this.scale);
36783     },
36784     
36785     onTouchStart : function(e)
36786     {
36787         if(!this.canvasLoaded){
36788             this.beforeSelectFile(e);
36789             return;
36790         }
36791         
36792         var touches = e.browserEvent.touches;
36793         
36794         if(!touches){
36795             return;
36796         }
36797         
36798         if(touches.length == 1){
36799             this.onMouseDown(e);
36800             return;
36801         }
36802         
36803         if(touches.length != 2){
36804             return;
36805         }
36806         
36807         var coords = [];
36808         
36809         for(var i = 0, finger; finger = touches[i]; i++){
36810             coords.push(finger.pageX, finger.pageY);
36811         }
36812         
36813         var x = Math.pow(coords[0] - coords[2], 2);
36814         var y = Math.pow(coords[1] - coords[3], 2);
36815         
36816         this.startDistance = Math.sqrt(x + y);
36817         
36818         this.startScale = this.scale;
36819         
36820         this.pinching = true;
36821         this.dragable = false;
36822         
36823     },
36824     
36825     onTouchMove : function(e)
36826     {
36827         if(!this.pinching && !this.dragable){
36828             return;
36829         }
36830         
36831         var touches = e.browserEvent.touches;
36832         
36833         if(!touches){
36834             return;
36835         }
36836         
36837         if(this.dragable){
36838             this.onMouseMove(e);
36839             return;
36840         }
36841         
36842         var coords = [];
36843         
36844         for(var i = 0, finger; finger = touches[i]; i++){
36845             coords.push(finger.pageX, finger.pageY);
36846         }
36847         
36848         var x = Math.pow(coords[0] - coords[2], 2);
36849         var y = Math.pow(coords[1] - coords[3], 2);
36850         
36851         this.endDistance = Math.sqrt(x + y);
36852         
36853         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
36854         
36855         if(!this.zoomable()){
36856             this.scale = this.startScale;
36857             return;
36858         }
36859         
36860         this.draw();
36861         
36862     },
36863     
36864     onTouchEnd : function(e)
36865     {
36866         this.pinching = false;
36867         this.dragable = false;
36868         
36869     },
36870     
36871     process : function(file, crop)
36872     {
36873         if(this.loadMask){
36874             this.maskEl.mask(this.loadingText);
36875         }
36876         
36877         this.xhr = new XMLHttpRequest();
36878         
36879         file.xhr = this.xhr;
36880
36881         this.xhr.open(this.method, this.url, true);
36882         
36883         var headers = {
36884             "Accept": "application/json",
36885             "Cache-Control": "no-cache",
36886             "X-Requested-With": "XMLHttpRequest"
36887         };
36888         
36889         for (var headerName in headers) {
36890             var headerValue = headers[headerName];
36891             if (headerValue) {
36892                 this.xhr.setRequestHeader(headerName, headerValue);
36893             }
36894         }
36895         
36896         var _this = this;
36897         
36898         this.xhr.onload = function()
36899         {
36900             _this.xhrOnLoad(_this.xhr);
36901         }
36902         
36903         this.xhr.onerror = function()
36904         {
36905             _this.xhrOnError(_this.xhr);
36906         }
36907         
36908         var formData = new FormData();
36909
36910         formData.append('returnHTML', 'NO');
36911         
36912         if(crop){
36913             formData.append('crop', crop);
36914         }
36915         
36916         if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
36917             formData.append(this.paramName, file, file.name);
36918         }
36919         
36920         if(typeof(file.filename) != 'undefined'){
36921             formData.append('filename', file.filename);
36922         }
36923         
36924         if(typeof(file.mimetype) != 'undefined'){
36925             formData.append('mimetype', file.mimetype);
36926         }
36927         
36928         if(this.fireEvent('arrange', this, formData) != false){
36929             this.xhr.send(formData);
36930         };
36931     },
36932     
36933     xhrOnLoad : function(xhr)
36934     {
36935         if(this.loadMask){
36936             this.maskEl.unmask();
36937         }
36938         
36939         if (xhr.readyState !== 4) {
36940             this.fireEvent('exception', this, xhr);
36941             return;
36942         }
36943
36944         var response = Roo.decode(xhr.responseText);
36945         
36946         if(!response.success){
36947             this.fireEvent('exception', this, xhr);
36948             return;
36949         }
36950         
36951         var response = Roo.decode(xhr.responseText);
36952         
36953         this.fireEvent('upload', this, response);
36954         
36955     },
36956     
36957     xhrOnError : function()
36958     {
36959         if(this.loadMask){
36960             this.maskEl.unmask();
36961         }
36962         
36963         Roo.log('xhr on error');
36964         
36965         var response = Roo.decode(xhr.responseText);
36966           
36967         Roo.log(response);
36968         
36969     },
36970     
36971     prepare : function(file)
36972     {   
36973         if(this.loadMask){
36974             this.maskEl.mask(this.loadingText);
36975         }
36976         
36977         this.file = false;
36978         this.exif = {};
36979         
36980         if(typeof(file) === 'string'){
36981             this.loadCanvas(file);
36982             return;
36983         }
36984         
36985         if(!file || !this.urlAPI){
36986             return;
36987         }
36988         
36989         this.file = file;
36990         this.cropType = file.type;
36991         
36992         var _this = this;
36993         
36994         if(this.fireEvent('prepare', this, this.file) != false){
36995             
36996             var reader = new FileReader();
36997             
36998             reader.onload = function (e) {
36999                 if (e.target.error) {
37000                     Roo.log(e.target.error);
37001                     return;
37002                 }
37003                 
37004                 var buffer = e.target.result,
37005                     dataView = new DataView(buffer),
37006                     offset = 2,
37007                     maxOffset = dataView.byteLength - 4,
37008                     markerBytes,
37009                     markerLength;
37010                 
37011                 if (dataView.getUint16(0) === 0xffd8) {
37012                     while (offset < maxOffset) {
37013                         markerBytes = dataView.getUint16(offset);
37014                         
37015                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
37016                             markerLength = dataView.getUint16(offset + 2) + 2;
37017                             if (offset + markerLength > dataView.byteLength) {
37018                                 Roo.log('Invalid meta data: Invalid segment size.');
37019                                 break;
37020                             }
37021                             
37022                             if(markerBytes == 0xffe1){
37023                                 _this.parseExifData(
37024                                     dataView,
37025                                     offset,
37026                                     markerLength
37027                                 );
37028                             }
37029                             
37030                             offset += markerLength;
37031                             
37032                             continue;
37033                         }
37034                         
37035                         break;
37036                     }
37037                     
37038                 }
37039                 
37040                 var url = _this.urlAPI.createObjectURL(_this.file);
37041                 
37042                 _this.loadCanvas(url);
37043                 
37044                 return;
37045             }
37046             
37047             reader.readAsArrayBuffer(this.file);
37048             
37049         }
37050         
37051     },
37052     
37053     parseExifData : function(dataView, offset, length)
37054     {
37055         var tiffOffset = offset + 10,
37056             littleEndian,
37057             dirOffset;
37058     
37059         if (dataView.getUint32(offset + 4) !== 0x45786966) {
37060             // No Exif data, might be XMP data instead
37061             return;
37062         }
37063         
37064         // Check for the ASCII code for "Exif" (0x45786966):
37065         if (dataView.getUint32(offset + 4) !== 0x45786966) {
37066             // No Exif data, might be XMP data instead
37067             return;
37068         }
37069         if (tiffOffset + 8 > dataView.byteLength) {
37070             Roo.log('Invalid Exif data: Invalid segment size.');
37071             return;
37072         }
37073         // Check for the two null bytes:
37074         if (dataView.getUint16(offset + 8) !== 0x0000) {
37075             Roo.log('Invalid Exif data: Missing byte alignment offset.');
37076             return;
37077         }
37078         // Check the byte alignment:
37079         switch (dataView.getUint16(tiffOffset)) {
37080         case 0x4949:
37081             littleEndian = true;
37082             break;
37083         case 0x4D4D:
37084             littleEndian = false;
37085             break;
37086         default:
37087             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
37088             return;
37089         }
37090         // Check for the TIFF tag marker (0x002A):
37091         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
37092             Roo.log('Invalid Exif data: Missing TIFF marker.');
37093             return;
37094         }
37095         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
37096         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
37097         
37098         this.parseExifTags(
37099             dataView,
37100             tiffOffset,
37101             tiffOffset + dirOffset,
37102             littleEndian
37103         );
37104     },
37105     
37106     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
37107     {
37108         var tagsNumber,
37109             dirEndOffset,
37110             i;
37111         if (dirOffset + 6 > dataView.byteLength) {
37112             Roo.log('Invalid Exif data: Invalid directory offset.');
37113             return;
37114         }
37115         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
37116         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
37117         if (dirEndOffset + 4 > dataView.byteLength) {
37118             Roo.log('Invalid Exif data: Invalid directory size.');
37119             return;
37120         }
37121         for (i = 0; i < tagsNumber; i += 1) {
37122             this.parseExifTag(
37123                 dataView,
37124                 tiffOffset,
37125                 dirOffset + 2 + 12 * i, // tag offset
37126                 littleEndian
37127             );
37128         }
37129         // Return the offset to the next directory:
37130         return dataView.getUint32(dirEndOffset, littleEndian);
37131     },
37132     
37133     parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
37134     {
37135         var tag = dataView.getUint16(offset, littleEndian);
37136         
37137         this.exif[tag] = this.getExifValue(
37138             dataView,
37139             tiffOffset,
37140             offset,
37141             dataView.getUint16(offset + 2, littleEndian), // tag type
37142             dataView.getUint32(offset + 4, littleEndian), // tag length
37143             littleEndian
37144         );
37145     },
37146     
37147     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
37148     {
37149         var tagType = Roo.bootstrap.UploadCropbox.exifTagTypes[type],
37150             tagSize,
37151             dataOffset,
37152             values,
37153             i,
37154             str,
37155             c;
37156     
37157         if (!tagType) {
37158             Roo.log('Invalid Exif data: Invalid tag type.');
37159             return;
37160         }
37161         
37162         tagSize = tagType.size * length;
37163         // Determine if the value is contained in the dataOffset bytes,
37164         // or if the value at the dataOffset is a pointer to the actual data:
37165         dataOffset = tagSize > 4 ?
37166                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
37167         if (dataOffset + tagSize > dataView.byteLength) {
37168             Roo.log('Invalid Exif data: Invalid data offset.');
37169             return;
37170         }
37171         if (length === 1) {
37172             return tagType.getValue(dataView, dataOffset, littleEndian);
37173         }
37174         values = [];
37175         for (i = 0; i < length; i += 1) {
37176             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
37177         }
37178         
37179         if (tagType.ascii) {
37180             str = '';
37181             // Concatenate the chars:
37182             for (i = 0; i < values.length; i += 1) {
37183                 c = values[i];
37184                 // Ignore the terminating NULL byte(s):
37185                 if (c === '\u0000') {
37186                     break;
37187                 }
37188                 str += c;
37189             }
37190             return str;
37191         }
37192         return values;
37193     }
37194     
37195 });
37196
37197 Roo.apply(Roo.bootstrap.UploadCropbox, {
37198     tags : {
37199         'Orientation': 0x0112
37200     },
37201     
37202     Orientation: {
37203             1: 0, //'top-left',
37204 //            2: 'top-right',
37205             3: 180, //'bottom-right',
37206 //            4: 'bottom-left',
37207 //            5: 'left-top',
37208             6: 90, //'right-top',
37209 //            7: 'right-bottom',
37210             8: 270 //'left-bottom'
37211     },
37212     
37213     exifTagTypes : {
37214         // byte, 8-bit unsigned int:
37215         1: {
37216             getValue: function (dataView, dataOffset) {
37217                 return dataView.getUint8(dataOffset);
37218             },
37219             size: 1
37220         },
37221         // ascii, 8-bit byte:
37222         2: {
37223             getValue: function (dataView, dataOffset) {
37224                 return String.fromCharCode(dataView.getUint8(dataOffset));
37225             },
37226             size: 1,
37227             ascii: true
37228         },
37229         // short, 16 bit int:
37230         3: {
37231             getValue: function (dataView, dataOffset, littleEndian) {
37232                 return dataView.getUint16(dataOffset, littleEndian);
37233             },
37234             size: 2
37235         },
37236         // long, 32 bit int:
37237         4: {
37238             getValue: function (dataView, dataOffset, littleEndian) {
37239                 return dataView.getUint32(dataOffset, littleEndian);
37240             },
37241             size: 4
37242         },
37243         // rational = two long values, first is numerator, second is denominator:
37244         5: {
37245             getValue: function (dataView, dataOffset, littleEndian) {
37246                 return dataView.getUint32(dataOffset, littleEndian) /
37247                     dataView.getUint32(dataOffset + 4, littleEndian);
37248             },
37249             size: 8
37250         },
37251         // slong, 32 bit signed int:
37252         9: {
37253             getValue: function (dataView, dataOffset, littleEndian) {
37254                 return dataView.getInt32(dataOffset, littleEndian);
37255             },
37256             size: 4
37257         },
37258         // srational, two slongs, first is numerator, second is denominator:
37259         10: {
37260             getValue: function (dataView, dataOffset, littleEndian) {
37261                 return dataView.getInt32(dataOffset, littleEndian) /
37262                     dataView.getInt32(dataOffset + 4, littleEndian);
37263             },
37264             size: 8
37265         }
37266     },
37267     
37268     footer : {
37269         STANDARD : [
37270             {
37271                 tag : 'div',
37272                 cls : 'btn-group roo-upload-cropbox-rotate-left',
37273                 action : 'rotate-left',
37274                 cn : [
37275                     {
37276                         tag : 'button',
37277                         cls : 'btn btn-default',
37278                         html : '<i class="fa fa-undo"></i>'
37279                     }
37280                 ]
37281             },
37282             {
37283                 tag : 'div',
37284                 cls : 'btn-group roo-upload-cropbox-picture',
37285                 action : 'picture',
37286                 cn : [
37287                     {
37288                         tag : 'button',
37289                         cls : 'btn btn-default',
37290                         html : '<i class="fa fa-picture-o"></i>'
37291                     }
37292                 ]
37293             },
37294             {
37295                 tag : 'div',
37296                 cls : 'btn-group roo-upload-cropbox-rotate-right',
37297                 action : 'rotate-right',
37298                 cn : [
37299                     {
37300                         tag : 'button',
37301                         cls : 'btn btn-default',
37302                         html : '<i class="fa fa-repeat"></i>'
37303                     }
37304                 ]
37305             }
37306         ],
37307         DOCUMENT : [
37308             {
37309                 tag : 'div',
37310                 cls : 'btn-group roo-upload-cropbox-rotate-left',
37311                 action : 'rotate-left',
37312                 cn : [
37313                     {
37314                         tag : 'button',
37315                         cls : 'btn btn-default',
37316                         html : '<i class="fa fa-undo"></i>'
37317                     }
37318                 ]
37319             },
37320             {
37321                 tag : 'div',
37322                 cls : 'btn-group roo-upload-cropbox-download',
37323                 action : 'download',
37324                 cn : [
37325                     {
37326                         tag : 'button',
37327                         cls : 'btn btn-default',
37328                         html : '<i class="fa fa-download"></i>'
37329                     }
37330                 ]
37331             },
37332             {
37333                 tag : 'div',
37334                 cls : 'btn-group roo-upload-cropbox-crop',
37335                 action : 'crop',
37336                 cn : [
37337                     {
37338                         tag : 'button',
37339                         cls : 'btn btn-default',
37340                         html : '<i class="fa fa-crop"></i>'
37341                     }
37342                 ]
37343             },
37344             {
37345                 tag : 'div',
37346                 cls : 'btn-group roo-upload-cropbox-trash',
37347                 action : 'trash',
37348                 cn : [
37349                     {
37350                         tag : 'button',
37351                         cls : 'btn btn-default',
37352                         html : '<i class="fa fa-trash"></i>'
37353                     }
37354                 ]
37355             },
37356             {
37357                 tag : 'div',
37358                 cls : 'btn-group roo-upload-cropbox-rotate-right',
37359                 action : 'rotate-right',
37360                 cn : [
37361                     {
37362                         tag : 'button',
37363                         cls : 'btn btn-default',
37364                         html : '<i class="fa fa-repeat"></i>'
37365                     }
37366                 ]
37367             }
37368         ],
37369         ROTATOR : [
37370             {
37371                 tag : 'div',
37372                 cls : 'btn-group roo-upload-cropbox-rotate-left',
37373                 action : 'rotate-left',
37374                 cn : [
37375                     {
37376                         tag : 'button',
37377                         cls : 'btn btn-default',
37378                         html : '<i class="fa fa-undo"></i>'
37379                     }
37380                 ]
37381             },
37382             {
37383                 tag : 'div',
37384                 cls : 'btn-group roo-upload-cropbox-rotate-right',
37385                 action : 'rotate-right',
37386                 cn : [
37387                     {
37388                         tag : 'button',
37389                         cls : 'btn btn-default',
37390                         html : '<i class="fa fa-repeat"></i>'
37391                     }
37392                 ]
37393             }
37394         ]
37395     }
37396 });
37397
37398 /*
37399 * Licence: LGPL
37400 */
37401
37402 /**
37403  * @class Roo.bootstrap.DocumentManager
37404  * @extends Roo.bootstrap.Component
37405  * Bootstrap DocumentManager class
37406  * @cfg {String} paramName default 'imageUpload'
37407  * @cfg {String} toolTipName default 'filename'
37408  * @cfg {String} method default POST
37409  * @cfg {String} url action url
37410  * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
37411  * @cfg {Boolean} multiple multiple upload default true
37412  * @cfg {Number} thumbSize default 300
37413  * @cfg {String} fieldLabel
37414  * @cfg {Number} labelWidth default 4
37415  * @cfg {String} labelAlign (left|top) default left
37416  * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
37417 * @cfg {Number} labellg set the width of label (1-12)
37418  * @cfg {Number} labelmd set the width of label (1-12)
37419  * @cfg {Number} labelsm set the width of label (1-12)
37420  * @cfg {Number} labelxs set the width of label (1-12)
37421  * 
37422  * @constructor
37423  * Create a new DocumentManager
37424  * @param {Object} config The config object
37425  */
37426
37427 Roo.bootstrap.DocumentManager = function(config){
37428     Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
37429     
37430     this.files = [];
37431     this.delegates = [];
37432     
37433     this.addEvents({
37434         /**
37435          * @event initial
37436          * Fire when initial the DocumentManager
37437          * @param {Roo.bootstrap.DocumentManager} this
37438          */
37439         "initial" : true,
37440         /**
37441          * @event inspect
37442          * inspect selected file
37443          * @param {Roo.bootstrap.DocumentManager} this
37444          * @param {File} file
37445          */
37446         "inspect" : true,
37447         /**
37448          * @event exception
37449          * Fire when xhr load exception
37450          * @param {Roo.bootstrap.DocumentManager} this
37451          * @param {XMLHttpRequest} xhr
37452          */
37453         "exception" : true,
37454         /**
37455          * @event afterupload
37456          * Fire when xhr load exception
37457          * @param {Roo.bootstrap.DocumentManager} this
37458          * @param {XMLHttpRequest} xhr
37459          */
37460         "afterupload" : true,
37461         /**
37462          * @event prepare
37463          * prepare the form data
37464          * @param {Roo.bootstrap.DocumentManager} this
37465          * @param {Object} formData
37466          */
37467         "prepare" : true,
37468         /**
37469          * @event remove
37470          * Fire when remove the file
37471          * @param {Roo.bootstrap.DocumentManager} this
37472          * @param {Object} file
37473          */
37474         "remove" : true,
37475         /**
37476          * @event refresh
37477          * Fire after refresh the file
37478          * @param {Roo.bootstrap.DocumentManager} this
37479          */
37480         "refresh" : true,
37481         /**
37482          * @event click
37483          * Fire after click the image
37484          * @param {Roo.bootstrap.DocumentManager} this
37485          * @param {Object} file
37486          */
37487         "click" : true,
37488         /**
37489          * @event edit
37490          * Fire when upload a image and editable set to true
37491          * @param {Roo.bootstrap.DocumentManager} this
37492          * @param {Object} file
37493          */
37494         "edit" : true,
37495         /**
37496          * @event beforeselectfile
37497          * Fire before select file
37498          * @param {Roo.bootstrap.DocumentManager} this
37499          */
37500         "beforeselectfile" : true,
37501         /**
37502          * @event process
37503          * Fire before process file
37504          * @param {Roo.bootstrap.DocumentManager} this
37505          * @param {Object} file
37506          */
37507         "process" : true,
37508         /**
37509          * @event previewrendered
37510          * Fire when preview rendered
37511          * @param {Roo.bootstrap.DocumentManager} this
37512          * @param {Object} file
37513          */
37514         "previewrendered" : true,
37515         /**
37516          */
37517         "previewResize" : true
37518         
37519     });
37520 };
37521
37522 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
37523     
37524     boxes : 0,
37525     inputName : '',
37526     thumbSize : 300,
37527     multiple : true,
37528     files : false,
37529     method : 'POST',
37530     url : '',
37531     paramName : 'imageUpload',
37532     toolTipName : 'filename',
37533     fieldLabel : '',
37534     labelWidth : 4,
37535     labelAlign : 'left',
37536     editable : true,
37537     delegates : false,
37538     xhr : false, 
37539     
37540     labellg : 0,
37541     labelmd : 0,
37542     labelsm : 0,
37543     labelxs : 0,
37544     
37545     getAutoCreate : function()
37546     {   
37547         var managerWidget = {
37548             tag : 'div',
37549             cls : 'roo-document-manager',
37550             cn : [
37551                 {
37552                     tag : 'input',
37553                     cls : 'roo-document-manager-selector',
37554                     type : 'file'
37555                 },
37556                 {
37557                     tag : 'div',
37558                     cls : 'roo-document-manager-uploader',
37559                     cn : [
37560                         {
37561                             tag : 'div',
37562                             cls : 'roo-document-manager-upload-btn',
37563                             html : '<i class="fa fa-plus"></i>'
37564                         }
37565                     ]
37566                     
37567                 }
37568             ]
37569         };
37570         
37571         var content = [
37572             {
37573                 tag : 'div',
37574                 cls : 'column col-md-12',
37575                 cn : managerWidget
37576             }
37577         ];
37578         
37579         if(this.fieldLabel.length){
37580             
37581             content = [
37582                 {
37583                     tag : 'div',
37584                     cls : 'column col-md-12',
37585                     html : this.fieldLabel
37586                 },
37587                 {
37588                     tag : 'div',
37589                     cls : 'column col-md-12',
37590                     cn : managerWidget
37591                 }
37592             ];
37593
37594             if(this.labelAlign == 'left'){
37595                 content = [
37596                     {
37597                         tag : 'div',
37598                         cls : 'column',
37599                         html : this.fieldLabel
37600                     },
37601                     {
37602                         tag : 'div',
37603                         cls : 'column',
37604                         cn : managerWidget
37605                     }
37606                 ];
37607                 
37608                 if(this.labelWidth > 12){
37609                     content[0].style = "width: " + this.labelWidth + 'px';
37610                 }
37611
37612                 if(this.labelWidth < 13 && this.labelmd == 0){
37613                     this.labelmd = this.labelWidth;
37614                 }
37615
37616                 if(this.labellg > 0){
37617                     content[0].cls += ' col-lg-' + this.labellg;
37618                     content[1].cls += ' col-lg-' + (12 - this.labellg);
37619                 }
37620
37621                 if(this.labelmd > 0){
37622                     content[0].cls += ' col-md-' + this.labelmd;
37623                     content[1].cls += ' col-md-' + (12 - this.labelmd);
37624                 }
37625
37626                 if(this.labelsm > 0){
37627                     content[0].cls += ' col-sm-' + this.labelsm;
37628                     content[1].cls += ' col-sm-' + (12 - this.labelsm);
37629                 }
37630
37631                 if(this.labelxs > 0){
37632                     content[0].cls += ' col-xs-' + this.labelxs;
37633                     content[1].cls += ' col-xs-' + (12 - this.labelxs);
37634                 }
37635                 
37636             }
37637         }
37638         
37639         var cfg = {
37640             tag : 'div',
37641             cls : 'row clearfix',
37642             cn : content
37643         };
37644         
37645         return cfg;
37646         
37647     },
37648     
37649     initEvents : function()
37650     {
37651         this.managerEl = this.el.select('.roo-document-manager', true).first();
37652         this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37653         
37654         this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
37655         this.selectorEl.hide();
37656         
37657         if(this.multiple){
37658             this.selectorEl.attr('multiple', 'multiple');
37659         }
37660         
37661         this.selectorEl.on('change', this.onFileSelected, this);
37662         
37663         this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
37664         this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37665         
37666         this.uploader.on('click', this.onUploaderClick, this);
37667         
37668         this.renderProgressDialog();
37669         
37670         var _this = this;
37671         
37672         window.addEventListener("resize", function() { _this.refresh(); } );
37673         
37674         this.fireEvent('initial', this);
37675     },
37676     
37677     renderProgressDialog : function()
37678     {
37679         var _this = this;
37680         
37681         this.progressDialog = new Roo.bootstrap.Modal({
37682             cls : 'roo-document-manager-progress-dialog',
37683             allow_close : false,
37684             animate : false,
37685             title : '',
37686             buttons : [
37687                 {
37688                     name  :'cancel',
37689                     weight : 'danger',
37690                     html : 'Cancel'
37691                 }
37692             ], 
37693             listeners : { 
37694                 btnclick : function() {
37695                     _this.uploadCancel();
37696                     this.hide();
37697                 }
37698             }
37699         });
37700          
37701         this.progressDialog.render(Roo.get(document.body));
37702          
37703         this.progress = new Roo.bootstrap.Progress({
37704             cls : 'roo-document-manager-progress',
37705             active : true,
37706             striped : true
37707         });
37708         
37709         this.progress.render(this.progressDialog.getChildContainer());
37710         
37711         this.progressBar = new Roo.bootstrap.ProgressBar({
37712             cls : 'roo-document-manager-progress-bar',
37713             aria_valuenow : 0,
37714             aria_valuemin : 0,
37715             aria_valuemax : 12,
37716             panel : 'success'
37717         });
37718         
37719         this.progressBar.render(this.progress.getChildContainer());
37720     },
37721     
37722     onUploaderClick : function(e)
37723     {
37724         e.preventDefault();
37725      
37726         if(this.fireEvent('beforeselectfile', this) != false){
37727             this.selectorEl.dom.click();
37728         }
37729         
37730     },
37731     
37732     onFileSelected : function(e)
37733     {
37734         e.preventDefault();
37735         
37736         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
37737             return;
37738         }
37739         
37740         Roo.each(this.selectorEl.dom.files, function(file){
37741             if(this.fireEvent('inspect', this, file) != false){
37742                 this.files.push(file);
37743             }
37744         }, this);
37745         
37746         this.queue();
37747         
37748     },
37749     
37750     queue : function()
37751     {
37752         this.selectorEl.dom.value = '';
37753         
37754         if(!this.files || !this.files.length){
37755             return;
37756         }
37757         
37758         if(this.boxes > 0 && this.files.length > this.boxes){
37759             this.files = this.files.slice(0, this.boxes);
37760         }
37761         
37762         this.uploader.show();
37763         
37764         if(this.boxes > 0 && this.files.length > this.boxes - 1){
37765             this.uploader.hide();
37766         }
37767         
37768         var _this = this;
37769         
37770         var files = [];
37771         
37772         var docs = [];
37773         
37774         Roo.each(this.files, function(file){
37775             
37776             if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
37777                 var f = this.renderPreview(file);
37778                 files.push(f);
37779                 return;
37780             }
37781             
37782             if(file.type.indexOf('image') != -1){
37783                 this.delegates.push(
37784                     (function(){
37785                         _this.process(file);
37786                     }).createDelegate(this)
37787                 );
37788         
37789                 return;
37790             }
37791             
37792             docs.push(
37793                 (function(){
37794                     _this.process(file);
37795                 }).createDelegate(this)
37796             );
37797             
37798         }, this);
37799         
37800         this.files = files;
37801         
37802         this.delegates = this.delegates.concat(docs);
37803         
37804         if(!this.delegates.length){
37805             this.refresh();
37806             return;
37807         }
37808         
37809         this.progressBar.aria_valuemax = this.delegates.length;
37810         
37811         this.arrange();
37812         
37813         return;
37814     },
37815     
37816     arrange : function()
37817     {
37818         if(!this.delegates.length){
37819             this.progressDialog.hide();
37820             this.refresh();
37821             return;
37822         }
37823         
37824         var delegate = this.delegates.shift();
37825         
37826         this.progressDialog.show();
37827         
37828         this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
37829         
37830         this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
37831         
37832         delegate();
37833     },
37834     
37835     refresh : function()
37836     {
37837         this.uploader.show();
37838         
37839         if(this.boxes > 0 && this.files.length > this.boxes - 1){
37840             this.uploader.hide();
37841         }
37842         
37843         Roo.isTouch ? this.closable(false) : this.closable(true);
37844         
37845         this.fireEvent('refresh', this);
37846     },
37847     
37848     onRemove : function(e, el, o)
37849     {
37850         e.preventDefault();
37851         
37852         this.fireEvent('remove', this, o);
37853         
37854     },
37855     
37856     remove : function(o)
37857     {
37858         var files = [];
37859         
37860         Roo.each(this.files, function(file){
37861             if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
37862                 files.push(file);
37863                 return;
37864             }
37865
37866             o.target.remove();
37867
37868         }, this);
37869         
37870         this.files = files;
37871         
37872         this.refresh();
37873     },
37874     
37875     clear : function()
37876     {
37877         Roo.each(this.files, function(file){
37878             if(!file.target){
37879                 return;
37880             }
37881             
37882             file.target.remove();
37883
37884         }, this);
37885         
37886         this.files = [];
37887         
37888         this.refresh();
37889     },
37890     
37891     onClick : function(e, el, o)
37892     {
37893         e.preventDefault();
37894         
37895         this.fireEvent('click', this, o);
37896         
37897     },
37898     
37899     closable : function(closable)
37900     {
37901         Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
37902             
37903             el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37904             
37905             if(closable){
37906                 el.show();
37907                 return;
37908             }
37909             
37910             el.hide();
37911             
37912         }, this);
37913     },
37914     
37915     xhrOnLoad : function(xhr)
37916     {
37917         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
37918             el.remove();
37919         }, this);
37920         
37921         if (xhr.readyState !== 4) {
37922             this.arrange();
37923             this.fireEvent('exception', this, xhr);
37924             return;
37925         }
37926
37927         var response = Roo.decode(xhr.responseText);
37928         
37929         if(!response.success){
37930             this.arrange();
37931             this.fireEvent('exception', this, xhr);
37932             return;
37933         }
37934         
37935         var file = this.renderPreview(response.data);
37936         
37937         this.files.push(file);
37938         
37939         this.arrange();
37940         
37941         this.fireEvent('afterupload', this, xhr);
37942         
37943     },
37944     
37945     xhrOnError : function(xhr)
37946     {
37947         Roo.log('xhr on error');
37948         
37949         var response = Roo.decode(xhr.responseText);
37950           
37951         Roo.log(response);
37952         
37953         this.arrange();
37954     },
37955     
37956     process : function(file)
37957     {
37958         if(this.fireEvent('process', this, file) !== false){
37959             if(this.editable && file.type.indexOf('image') != -1){
37960                 this.fireEvent('edit', this, file);
37961                 return;
37962             }
37963
37964             this.uploadStart(file, false);
37965
37966             return;
37967         }
37968         
37969     },
37970     
37971     uploadStart : function(file, crop)
37972     {
37973         this.xhr = new XMLHttpRequest();
37974         
37975         if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
37976             this.arrange();
37977             return;
37978         }
37979         
37980         file.xhr = this.xhr;
37981             
37982         this.managerEl.createChild({
37983             tag : 'div',
37984             cls : 'roo-document-manager-loading',
37985             cn : [
37986                 {
37987                     tag : 'div',
37988                     tooltip : file.name,
37989                     cls : 'roo-document-manager-thumb',
37990                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
37991                 }
37992             ]
37993
37994         });
37995
37996         this.xhr.open(this.method, this.url, true);
37997         
37998         var headers = {
37999             "Accept": "application/json",
38000             "Cache-Control": "no-cache",
38001             "X-Requested-With": "XMLHttpRequest"
38002         };
38003         
38004         for (var headerName in headers) {
38005             var headerValue = headers[headerName];
38006             if (headerValue) {
38007                 this.xhr.setRequestHeader(headerName, headerValue);
38008             }
38009         }
38010         
38011         var _this = this;
38012         
38013         this.xhr.onload = function()
38014         {
38015             _this.xhrOnLoad(_this.xhr);
38016         }
38017         
38018         this.xhr.onerror = function()
38019         {
38020             _this.xhrOnError(_this.xhr);
38021         }
38022         
38023         var formData = new FormData();
38024
38025         formData.append('returnHTML', 'NO');
38026         
38027         if(crop){
38028             formData.append('crop', crop);
38029         }
38030         
38031         formData.append(this.paramName, file, file.name);
38032         
38033         var options = {
38034             file : file, 
38035             manually : false
38036         };
38037         
38038         if(this.fireEvent('prepare', this, formData, options) != false){
38039             
38040             if(options.manually){
38041                 return;
38042             }
38043             
38044             this.xhr.send(formData);
38045             return;
38046         };
38047         
38048         this.uploadCancel();
38049     },
38050     
38051     uploadCancel : function()
38052     {
38053         if (this.xhr) {
38054             this.xhr.abort();
38055         }
38056         
38057         this.delegates = [];
38058         
38059         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
38060             el.remove();
38061         }, this);
38062         
38063         this.arrange();
38064     },
38065     
38066     renderPreview : function(file)
38067     {
38068         if(typeof(file.target) != 'undefined' && file.target){
38069             return file;
38070         }
38071         
38072         var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
38073         
38074         var previewEl = this.managerEl.createChild({
38075             tag : 'div',
38076             cls : 'roo-document-manager-preview',
38077             cn : [
38078                 {
38079                     tag : 'div',
38080                     tooltip : file[this.toolTipName],
38081                     cls : 'roo-document-manager-thumb',
38082                     html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
38083                 },
38084                 {
38085                     tag : 'button',
38086                     cls : 'close',
38087                     html : '<i class="fa fa-times-circle"></i>'
38088                 }
38089             ]
38090         });
38091
38092         var close = previewEl.select('button.close', true).first();
38093
38094         close.on('click', this.onRemove, this, file);
38095
38096         file.target = previewEl;
38097
38098         var image = previewEl.select('img', true).first();
38099         
38100         var _this = this;
38101         
38102         image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
38103         
38104         image.on('click', this.onClick, this, file);
38105         
38106         this.fireEvent('previewrendered', this, file);
38107         
38108         return file;
38109         
38110     },
38111     
38112     onPreviewLoad : function(file, image)
38113     {
38114         if(typeof(file.target) == 'undefined' || !file.target){
38115             return;
38116         }
38117         
38118         var width = image.dom.naturalWidth || image.dom.width;
38119         var height = image.dom.naturalHeight || image.dom.height;
38120         
38121         if(!this.previewResize) {
38122             return;
38123         }
38124         
38125         if(width > height){
38126             file.target.addClass('wide');
38127             return;
38128         }
38129         
38130         file.target.addClass('tall');
38131         return;
38132         
38133     },
38134     
38135     uploadFromSource : function(file, crop)
38136     {
38137         this.xhr = new XMLHttpRequest();
38138         
38139         this.managerEl.createChild({
38140             tag : 'div',
38141             cls : 'roo-document-manager-loading',
38142             cn : [
38143                 {
38144                     tag : 'div',
38145                     tooltip : file.name,
38146                     cls : 'roo-document-manager-thumb',
38147                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
38148                 }
38149             ]
38150
38151         });
38152
38153         this.xhr.open(this.method, this.url, true);
38154         
38155         var headers = {
38156             "Accept": "application/json",
38157             "Cache-Control": "no-cache",
38158             "X-Requested-With": "XMLHttpRequest"
38159         };
38160         
38161         for (var headerName in headers) {
38162             var headerValue = headers[headerName];
38163             if (headerValue) {
38164                 this.xhr.setRequestHeader(headerName, headerValue);
38165             }
38166         }
38167         
38168         var _this = this;
38169         
38170         this.xhr.onload = function()
38171         {
38172             _this.xhrOnLoad(_this.xhr);
38173         }
38174         
38175         this.xhr.onerror = function()
38176         {
38177             _this.xhrOnError(_this.xhr);
38178         }
38179         
38180         var formData = new FormData();
38181
38182         formData.append('returnHTML', 'NO');
38183         
38184         formData.append('crop', crop);
38185         
38186         if(typeof(file.filename) != 'undefined'){
38187             formData.append('filename', file.filename);
38188         }
38189         
38190         if(typeof(file.mimetype) != 'undefined'){
38191             formData.append('mimetype', file.mimetype);
38192         }
38193         
38194         Roo.log(formData);
38195         
38196         if(this.fireEvent('prepare', this, formData) != false){
38197             this.xhr.send(formData);
38198         };
38199     }
38200 });
38201
38202 /*
38203 * Licence: LGPL
38204 */
38205
38206 /**
38207  * @class Roo.bootstrap.DocumentViewer
38208  * @extends Roo.bootstrap.Component
38209  * Bootstrap DocumentViewer class
38210  * @cfg {Boolean} showDownload (true|false) show download button (default true)
38211  * @cfg {Boolean} showTrash (true|false) show trash button (default true)
38212  * 
38213  * @constructor
38214  * Create a new DocumentViewer
38215  * @param {Object} config The config object
38216  */
38217
38218 Roo.bootstrap.DocumentViewer = function(config){
38219     Roo.bootstrap.DocumentViewer.superclass.constructor.call(this, config);
38220     
38221     this.addEvents({
38222         /**
38223          * @event initial
38224          * Fire after initEvent
38225          * @param {Roo.bootstrap.DocumentViewer} this
38226          */
38227         "initial" : true,
38228         /**
38229          * @event click
38230          * Fire after click
38231          * @param {Roo.bootstrap.DocumentViewer} this
38232          */
38233         "click" : true,
38234         /**
38235          * @event download
38236          * Fire after download button
38237          * @param {Roo.bootstrap.DocumentViewer} this
38238          */
38239         "download" : true,
38240         /**
38241          * @event trash
38242          * Fire after trash button
38243          * @param {Roo.bootstrap.DocumentViewer} this
38244          */
38245         "trash" : true
38246         
38247     });
38248 };
38249
38250 Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component,  {
38251     
38252     showDownload : true,
38253     
38254     showTrash : true,
38255     
38256     getAutoCreate : function()
38257     {
38258         var cfg = {
38259             tag : 'div',
38260             cls : 'roo-document-viewer',
38261             cn : [
38262                 {
38263                     tag : 'div',
38264                     cls : 'roo-document-viewer-body',
38265                     cn : [
38266                         {
38267                             tag : 'div',
38268                             cls : 'roo-document-viewer-thumb',
38269                             cn : [
38270                                 {
38271                                     tag : 'img',
38272                                     cls : 'roo-document-viewer-image'
38273                                 }
38274                             ]
38275                         }
38276                     ]
38277                 },
38278                 {
38279                     tag : 'div',
38280                     cls : 'roo-document-viewer-footer',
38281                     cn : {
38282                         tag : 'div',
38283                         cls : 'btn-group btn-group-justified roo-document-viewer-btn-group',
38284                         cn : [
38285                             {
38286                                 tag : 'div',
38287                                 cls : 'btn-group roo-document-viewer-download',
38288                                 cn : [
38289                                     {
38290                                         tag : 'button',
38291                                         cls : 'btn btn-default',
38292                                         html : '<i class="fa fa-download"></i>'
38293                                     }
38294                                 ]
38295                             },
38296                             {
38297                                 tag : 'div',
38298                                 cls : 'btn-group roo-document-viewer-trash',
38299                                 cn : [
38300                                     {
38301                                         tag : 'button',
38302                                         cls : 'btn btn-default',
38303                                         html : '<i class="fa fa-trash"></i>'
38304                                     }
38305                                 ]
38306                             }
38307                         ]
38308                     }
38309                 }
38310             ]
38311         };
38312         
38313         return cfg;
38314     },
38315     
38316     initEvents : function()
38317     {
38318         this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
38319         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
38320         
38321         this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
38322         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
38323         
38324         this.imageEl = this.el.select('.roo-document-viewer-image', true).first();
38325         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
38326         
38327         this.footerEl = this.el.select('.roo-document-viewer-footer', true).first();
38328         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
38329         
38330         this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
38331         this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
38332         
38333         this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
38334         this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
38335         
38336         this.bodyEl.on('click', this.onClick, this);
38337         this.downloadBtn.on('click', this.onDownload, this);
38338         this.trashBtn.on('click', this.onTrash, this);
38339         
38340         this.downloadBtn.hide();
38341         this.trashBtn.hide();
38342         
38343         if(this.showDownload){
38344             this.downloadBtn.show();
38345         }
38346         
38347         if(this.showTrash){
38348             this.trashBtn.show();
38349         }
38350         
38351         if(!this.showDownload && !this.showTrash) {
38352             this.footerEl.hide();
38353         }
38354         
38355     },
38356     
38357     initial : function()
38358     {
38359         this.fireEvent('initial', this);
38360         
38361     },
38362     
38363     onClick : function(e)
38364     {
38365         e.preventDefault();
38366         
38367         this.fireEvent('click', this);
38368     },
38369     
38370     onDownload : function(e)
38371     {
38372         e.preventDefault();
38373         
38374         this.fireEvent('download', this);
38375     },
38376     
38377     onTrash : function(e)
38378     {
38379         e.preventDefault();
38380         
38381         this.fireEvent('trash', this);
38382     }
38383     
38384 });
38385 /*
38386  * - LGPL
38387  *
38388  * FieldLabel
38389  * 
38390  */
38391
38392 /**
38393  * @class Roo.bootstrap.form.FieldLabel
38394  * @extends Roo.bootstrap.Component
38395  * Bootstrap FieldLabel class
38396  * @cfg {String} html contents of the element
38397  * @cfg {String} tag tag of the element default label
38398  * @cfg {String} cls class of the element
38399  * @cfg {String} target label target 
38400  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
38401  * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
38402  * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
38403  * @cfg {String} iconTooltip default "This field is required"
38404  * @cfg {String} indicatorpos (left|right) default left
38405  * 
38406  * @constructor
38407  * Create a new FieldLabel
38408  * @param {Object} config The config object
38409  */
38410
38411 Roo.bootstrap.form.FieldLabel = function(config){
38412     Roo.bootstrap.Element.superclass.constructor.call(this, config);
38413     
38414     this.addEvents({
38415             /**
38416              * @event invalid
38417              * Fires after the field has been marked as invalid.
38418              * @param {Roo.form.FieldLabel} this
38419              * @param {String} msg The validation message
38420              */
38421             invalid : true,
38422             /**
38423              * @event valid
38424              * Fires after the field has been validated with no errors.
38425              * @param {Roo.form.FieldLabel} this
38426              */
38427             valid : true
38428         });
38429 };
38430
38431 Roo.extend(Roo.bootstrap.form.FieldLabel, Roo.bootstrap.Component,  {
38432     
38433     tag: 'label',
38434     cls: '',
38435     html: '',
38436     target: '',
38437     allowBlank : true,
38438     invalidClass : 'has-warning',
38439     validClass : 'has-success',
38440     iconTooltip : 'This field is required',
38441     indicatorpos : 'left',
38442     
38443     getAutoCreate : function(){
38444         
38445         var cls = "";
38446         if (!this.allowBlank) {
38447             cls  = "visible";
38448         }
38449         
38450         var cfg = {
38451             tag : this.tag,
38452             cls : 'roo-bootstrap-field-label ' + this.cls,
38453             for : this.target,
38454             cn : [
38455                 {
38456                     tag : 'i',
38457                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
38458                     tooltip : this.iconTooltip
38459                 },
38460                 {
38461                     tag : 'span',
38462                     html : this.html
38463                 }
38464             ] 
38465         };
38466         
38467         if(this.indicatorpos == 'right'){
38468             var cfg = {
38469                 tag : this.tag,
38470                 cls : 'roo-bootstrap-field-label ' + this.cls,
38471                 for : this.target,
38472                 cn : [
38473                     {
38474                         tag : 'span',
38475                         html : this.html
38476                     },
38477                     {
38478                         tag : 'i',
38479                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
38480                         tooltip : this.iconTooltip
38481                     }
38482                 ] 
38483             };
38484         }
38485         
38486         return cfg;
38487     },
38488     
38489     initEvents: function() 
38490     {
38491         Roo.bootstrap.Element.superclass.initEvents.call(this);
38492         
38493         this.indicator = this.indicatorEl();
38494         
38495         if(this.indicator){
38496             this.indicator.removeClass('visible');
38497             this.indicator.addClass('invisible');
38498         }
38499         
38500         Roo.bootstrap.form.FieldLabel.register(this);
38501     },
38502     
38503     indicatorEl : function()
38504     {
38505         var indicator = this.el.select('i.roo-required-indicator',true).first();
38506         
38507         if(!indicator){
38508             return false;
38509         }
38510         
38511         return indicator;
38512         
38513     },
38514     
38515     /**
38516      * Mark this field as valid
38517      */
38518     markValid : function()
38519     {
38520         if(this.indicator){
38521             this.indicator.removeClass('visible');
38522             this.indicator.addClass('invisible');
38523         }
38524         if (Roo.bootstrap.version == 3) {
38525             this.el.removeClass(this.invalidClass);
38526             this.el.addClass(this.validClass);
38527         } else {
38528             this.el.removeClass('is-invalid');
38529             this.el.addClass('is-valid');
38530         }
38531         
38532         
38533         this.fireEvent('valid', this);
38534     },
38535     
38536     /**
38537      * Mark this field as invalid
38538      * @param {String} msg The validation message
38539      */
38540     markInvalid : function(msg)
38541     {
38542         if(this.indicator){
38543             this.indicator.removeClass('invisible');
38544             this.indicator.addClass('visible');
38545         }
38546           if (Roo.bootstrap.version == 3) {
38547             this.el.removeClass(this.validClass);
38548             this.el.addClass(this.invalidClass);
38549         } else {
38550             this.el.removeClass('is-valid');
38551             this.el.addClass('is-invalid');
38552         }
38553         
38554         
38555         this.fireEvent('invalid', this, msg);
38556     }
38557     
38558    
38559 });
38560
38561 Roo.apply(Roo.bootstrap.form.FieldLabel, {
38562     
38563     groups: {},
38564     
38565      /**
38566     * register a FieldLabel Group
38567     * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add
38568     */
38569     register : function(label)
38570     {
38571         if(this.groups.hasOwnProperty(label.target)){
38572             return;
38573         }
38574      
38575         this.groups[label.target] = label;
38576         
38577     },
38578     /**
38579     * fetch a FieldLabel Group based on the target
38580     * @param {string} target
38581     * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group
38582     */
38583     get: function(target) {
38584         if (typeof(this.groups[target]) == 'undefined') {
38585             return false;
38586         }
38587         
38588         return this.groups[target] ;
38589     }
38590 });
38591
38592  
38593
38594  /*
38595  * - LGPL
38596  *
38597  * page DateSplitField.
38598  * 
38599  */
38600
38601
38602 /**
38603  * @class Roo.bootstrap.form.DateSplitField
38604  * @extends Roo.bootstrap.Component
38605  * Bootstrap DateSplitField class
38606  * @cfg {string} fieldLabel - the label associated
38607  * @cfg {Number} labelWidth set the width of label (0-12)
38608  * @cfg {String} labelAlign (top|left)
38609  * @cfg {Boolean} dayAllowBlank (true|false) default false
38610  * @cfg {Boolean} monthAllowBlank (true|false) default false
38611  * @cfg {Boolean} yearAllowBlank (true|false) default false
38612  * @cfg {string} dayPlaceholder 
38613  * @cfg {string} monthPlaceholder
38614  * @cfg {string} yearPlaceholder
38615  * @cfg {string} dayFormat default 'd'
38616  * @cfg {string} monthFormat default 'm'
38617  * @cfg {string} yearFormat default 'Y'
38618  * @cfg {Number} labellg set the width of label (1-12)
38619  * @cfg {Number} labelmd set the width of label (1-12)
38620  * @cfg {Number} labelsm set the width of label (1-12)
38621  * @cfg {Number} labelxs set the width of label (1-12)
38622
38623  *     
38624  * @constructor
38625  * Create a new DateSplitField
38626  * @param {Object} config The config object
38627  */
38628
38629 Roo.bootstrap.form.DateSplitField = function(config){
38630     Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config);
38631     
38632     this.addEvents({
38633         // raw events
38634          /**
38635          * @event years
38636          * getting the data of years
38637          * @param {Roo.bootstrap.form.DateSplitField} this
38638          * @param {Object} years
38639          */
38640         "years" : true,
38641         /**
38642          * @event days
38643          * getting the data of days
38644          * @param {Roo.bootstrap.form.DateSplitField} this
38645          * @param {Object} days
38646          */
38647         "days" : true,
38648         /**
38649          * @event invalid
38650          * Fires after the field has been marked as invalid.
38651          * @param {Roo.form.Field} this
38652          * @param {String} msg The validation message
38653          */
38654         invalid : true,
38655        /**
38656          * @event valid
38657          * Fires after the field has been validated with no errors.
38658          * @param {Roo.form.Field} this
38659          */
38660         valid : true
38661     });
38662 };
38663
38664 Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component,  {
38665     
38666     fieldLabel : '',
38667     labelAlign : 'top',
38668     labelWidth : 3,
38669     dayAllowBlank : false,
38670     monthAllowBlank : false,
38671     yearAllowBlank : false,
38672     dayPlaceholder : '',
38673     monthPlaceholder : '',
38674     yearPlaceholder : '',
38675     dayFormat : 'd',
38676     monthFormat : 'm',
38677     yearFormat : 'Y',
38678     isFormField : true,
38679     labellg : 0,
38680     labelmd : 0,
38681     labelsm : 0,
38682     labelxs : 0,
38683     
38684     getAutoCreate : function()
38685     {
38686         var cfg = {
38687             tag : 'div',
38688             cls : 'row roo-date-split-field-group',
38689             cn : [
38690                 {
38691                     tag : 'input',
38692                     type : 'hidden',
38693                     cls : 'form-hidden-field roo-date-split-field-group-value',
38694                     name : this.name
38695                 }
38696             ]
38697         };
38698         
38699         var labelCls = 'col-md-12';
38700         var contentCls = 'col-md-4';
38701         
38702         if(this.fieldLabel){
38703             
38704             var label = {
38705                 tag : 'div',
38706                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
38707                 cn : [
38708                     {
38709                         tag : 'label',
38710                         html : this.fieldLabel
38711                     }
38712                 ]
38713             };
38714             
38715             if(this.labelAlign == 'left'){
38716             
38717                 if(this.labelWidth > 12){
38718                     label.style = "width: " + this.labelWidth + 'px';
38719                 }
38720
38721                 if(this.labelWidth < 13 && this.labelmd == 0){
38722                     this.labelmd = this.labelWidth;
38723                 }
38724
38725                 if(this.labellg > 0){
38726                     labelCls = ' col-lg-' + this.labellg;
38727                     contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
38728                 }
38729
38730                 if(this.labelmd > 0){
38731                     labelCls = ' col-md-' + this.labelmd;
38732                     contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
38733                 }
38734
38735                 if(this.labelsm > 0){
38736                     labelCls = ' col-sm-' + this.labelsm;
38737                     contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
38738                 }
38739
38740                 if(this.labelxs > 0){
38741                     labelCls = ' col-xs-' + this.labelxs;
38742                     contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
38743                 }
38744             }
38745             
38746             label.cls += ' ' + labelCls;
38747             
38748             cfg.cn.push(label);
38749         }
38750         
38751         Roo.each(['day', 'month', 'year'], function(t){
38752             cfg.cn.push({
38753                 tag : 'div',
38754                 cls : 'column roo-date-split-field-' + t + ' ' + contentCls
38755             });
38756         }, this);
38757         
38758         return cfg;
38759     },
38760     
38761     inputEl: function ()
38762     {
38763         return this.el.select('.roo-date-split-field-group-value', true).first();
38764     },
38765     
38766     onRender : function(ct, position) 
38767     {
38768         var _this = this;
38769         
38770         Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
38771         
38772         this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
38773         
38774         this.dayField = new Roo.bootstrap.form.ComboBox({
38775             allowBlank : this.dayAllowBlank,
38776             alwaysQuery : true,
38777             displayField : 'value',
38778             editable : false,
38779             fieldLabel : '',
38780             forceSelection : true,
38781             mode : 'local',
38782             placeholder : this.dayPlaceholder,
38783             selectOnFocus : true,
38784             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
38785             triggerAction : 'all',
38786             typeAhead : true,
38787             valueField : 'value',
38788             store : new Roo.data.SimpleStore({
38789                 data : (function() {    
38790                     var days = [];
38791                     _this.fireEvent('days', _this, days);
38792                     return days;
38793                 })(),
38794                 fields : [ 'value' ]
38795             }),
38796             listeners : {
38797                 select : function (_self, record, index)
38798                 {
38799                     _this.setValue(_this.getValue());
38800                 }
38801             }
38802         });
38803
38804         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
38805         
38806         this.monthField = new Roo.bootstrap.form.MonthField({
38807             after : '<i class=\"fa fa-calendar\"></i>',
38808             allowBlank : this.monthAllowBlank,
38809             placeholder : this.monthPlaceholder,
38810             readOnly : true,
38811             listeners : {
38812                 render : function (_self)
38813                 {
38814                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
38815                         e.preventDefault();
38816                         _self.focus();
38817                     });
38818                 },
38819                 select : function (_self, oldvalue, newvalue)
38820                 {
38821                     _this.setValue(_this.getValue());
38822                 }
38823             }
38824         });
38825         
38826         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
38827         
38828         this.yearField = new Roo.bootstrap.form.ComboBox({
38829             allowBlank : this.yearAllowBlank,
38830             alwaysQuery : true,
38831             displayField : 'value',
38832             editable : false,
38833             fieldLabel : '',
38834             forceSelection : true,
38835             mode : 'local',
38836             placeholder : this.yearPlaceholder,
38837             selectOnFocus : true,
38838             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
38839             triggerAction : 'all',
38840             typeAhead : true,
38841             valueField : 'value',
38842             store : new Roo.data.SimpleStore({
38843                 data : (function() {
38844                     var years = [];
38845                     _this.fireEvent('years', _this, years);
38846                     return years;
38847                 })(),
38848                 fields : [ 'value' ]
38849             }),
38850             listeners : {
38851                 select : function (_self, record, index)
38852                 {
38853                     _this.setValue(_this.getValue());
38854                 }
38855             }
38856         });
38857
38858         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
38859     },
38860     
38861     setValue : function(v, format)
38862     {
38863         this.inputEl.dom.value = v;
38864         
38865         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
38866         
38867         var d = Date.parseDate(v, f);
38868         
38869         if(!d){
38870             this.validate();
38871             return;
38872         }
38873         
38874         this.setDay(d.format(this.dayFormat));
38875         this.setMonth(d.format(this.monthFormat));
38876         this.setYear(d.format(this.yearFormat));
38877         
38878         this.validate();
38879         
38880         return;
38881     },
38882     
38883     setDay : function(v)
38884     {
38885         this.dayField.setValue(v);
38886         this.inputEl.dom.value = this.getValue();
38887         this.validate();
38888         return;
38889     },
38890     
38891     setMonth : function(v)
38892     {
38893         this.monthField.setValue(v, true);
38894         this.inputEl.dom.value = this.getValue();
38895         this.validate();
38896         return;
38897     },
38898     
38899     setYear : function(v)
38900     {
38901         this.yearField.setValue(v);
38902         this.inputEl.dom.value = this.getValue();
38903         this.validate();
38904         return;
38905     },
38906     
38907     getDay : function()
38908     {
38909         return this.dayField.getValue();
38910     },
38911     
38912     getMonth : function()
38913     {
38914         return this.monthField.getValue();
38915     },
38916     
38917     getYear : function()
38918     {
38919         return this.yearField.getValue();
38920     },
38921     
38922     getValue : function()
38923     {
38924         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
38925         
38926         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
38927         
38928         return date;
38929     },
38930     
38931     reset : function()
38932     {
38933         this.setDay('');
38934         this.setMonth('');
38935         this.setYear('');
38936         this.inputEl.dom.value = '';
38937         this.validate();
38938         return;
38939     },
38940     
38941     validate : function()
38942     {
38943         var d = this.dayField.validate();
38944         var m = this.monthField.validate();
38945         var y = this.yearField.validate();
38946         
38947         var valid = true;
38948         
38949         if(
38950                 (!this.dayAllowBlank && !d) ||
38951                 (!this.monthAllowBlank && !m) ||
38952                 (!this.yearAllowBlank && !y)
38953         ){
38954             valid = false;
38955         }
38956         
38957         if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
38958             return valid;
38959         }
38960         
38961         if(valid){
38962             this.markValid();
38963             return valid;
38964         }
38965         
38966         this.markInvalid();
38967         
38968         return valid;
38969     },
38970     
38971     markValid : function()
38972     {
38973         
38974         var label = this.el.select('label', true).first();
38975         var icon = this.el.select('i.fa-star', true).first();
38976
38977         if(label && icon){
38978             icon.remove();
38979         }
38980         
38981         this.fireEvent('valid', this);
38982     },
38983     
38984      /**
38985      * Mark this field as invalid
38986      * @param {String} msg The validation message
38987      */
38988     markInvalid : function(msg)
38989     {
38990         
38991         var label = this.el.select('label', true).first();
38992         var icon = this.el.select('i.fa-star', true).first();
38993
38994         if(label && !icon){
38995             this.el.select('.roo-date-split-field-label', true).createChild({
38996                 tag : 'i',
38997                 cls : 'text-danger fa fa-lg fa-star',
38998                 tooltip : 'This field is required',
38999                 style : 'margin-right:5px;'
39000             }, label, true);
39001         }
39002         
39003         this.fireEvent('invalid', this, msg);
39004     },
39005     
39006     clearInvalid : function()
39007     {
39008         var label = this.el.select('label', true).first();
39009         var icon = this.el.select('i.fa-star', true).first();
39010
39011         if(label && icon){
39012             icon.remove();
39013         }
39014         
39015         this.fireEvent('valid', this);
39016     },
39017     
39018     getName: function()
39019     {
39020         return this.name;
39021     }
39022     
39023 });
39024
39025  
39026
39027 /**
39028  * @class Roo.bootstrap.LayoutMasonry
39029  * @extends Roo.bootstrap.Component
39030  * @children Roo.bootstrap.Element Roo.bootstrap.Img Roo.bootstrap.MasonryBrick
39031  * Bootstrap Layout Masonry class
39032  *
39033  * This is based on 
39034  * http://masonry.desandro.com
39035  *
39036  * The idea is to render all the bricks based on vertical width...
39037  *
39038  * The original code extends 'outlayer' - we might need to use that....
39039
39040  * @constructor
39041  * Create a new Element
39042  * @param {Object} config The config object
39043  */
39044
39045 Roo.bootstrap.LayoutMasonry = function(config){
39046     
39047     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
39048     
39049     this.bricks = [];
39050     
39051     Roo.bootstrap.LayoutMasonry.register(this);
39052     
39053     this.addEvents({
39054         // raw events
39055         /**
39056          * @event layout
39057          * Fire after layout the items
39058          * @param {Roo.bootstrap.LayoutMasonry} this
39059          * @param {Roo.EventObject} e
39060          */
39061         "layout" : true
39062     });
39063     
39064 };
39065
39066 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
39067     
39068     /**
39069      * @cfg {Boolean} isLayoutInstant = no animation?
39070      */   
39071     isLayoutInstant : false, // needed?
39072    
39073     /**
39074      * @cfg {Number} boxWidth  width of the columns
39075      */   
39076     boxWidth : 450,
39077     
39078       /**
39079      * @cfg {Number} boxHeight  - 0 for square, or fix it at a certian height
39080      */   
39081     boxHeight : 0,
39082     
39083     /**
39084      * @cfg {Number} padWidth padding below box..
39085      */   
39086     padWidth : 10, 
39087     
39088     /**
39089      * @cfg {Number} gutter gutter width..
39090      */   
39091     gutter : 10,
39092     
39093      /**
39094      * @cfg {Number} maxCols maximum number of columns
39095      */   
39096     
39097     maxCols: 0,
39098     
39099     /**
39100      * @cfg {Boolean} isAutoInitial defalut true
39101      */   
39102     isAutoInitial : true, 
39103     
39104     containerWidth: 0,
39105     
39106     /**
39107      * @cfg {Boolean} isHorizontal defalut false
39108      */   
39109     isHorizontal : false, 
39110
39111     currentSize : null,
39112     
39113     tag: 'div',
39114     
39115     cls: '',
39116     
39117     bricks: null, //CompositeElement
39118     
39119     cols : 1,
39120     
39121     _isLayoutInited : false,
39122     
39123 //    isAlternative : false, // only use for vertical layout...
39124     
39125     /**
39126      * @cfg {Number} alternativePadWidth padding below box..
39127      */   
39128     alternativePadWidth : 50,
39129     
39130     selectedBrick : [],
39131     
39132     getAutoCreate : function(){
39133         
39134         var cfg = Roo.apply({}, Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call(this));
39135         
39136         var cfg = {
39137             tag: this.tag,
39138             cls: 'blog-masonary-wrapper ' + this.cls,
39139             cn : {
39140                 cls : 'mas-boxes masonary'
39141             }
39142         };
39143         
39144         return cfg;
39145     },
39146     
39147     getChildContainer: function( )
39148     {
39149         if (this.boxesEl) {
39150             return this.boxesEl;
39151         }
39152         
39153         this.boxesEl = this.el.select('.mas-boxes').first();
39154         
39155         return this.boxesEl;
39156     },
39157     
39158     
39159     initEvents : function()
39160     {
39161         var _this = this;
39162         
39163         if(this.isAutoInitial){
39164             Roo.log('hook children rendered');
39165             this.on('childrenrendered', function() {
39166                 Roo.log('children rendered');
39167                 _this.initial();
39168             } ,this);
39169         }
39170     },
39171     
39172     initial : function()
39173     {
39174         this.selectedBrick = [];
39175         
39176         this.currentSize = this.el.getBox(true);
39177         
39178         Roo.EventManager.onWindowResize(this.resize, this); 
39179
39180         if(!this.isAutoInitial){
39181             this.layout();
39182             return;
39183         }
39184         
39185         this.layout();
39186         
39187         return;
39188         //this.layout.defer(500,this);
39189         
39190     },
39191     
39192     resize : function()
39193     {
39194         var cs = this.el.getBox(true);
39195         
39196         if (
39197                 this.currentSize.width == cs.width && 
39198                 this.currentSize.x == cs.x && 
39199                 this.currentSize.height == cs.height && 
39200                 this.currentSize.y == cs.y 
39201         ) {
39202             Roo.log("no change in with or X or Y");
39203             return;
39204         }
39205         
39206         this.currentSize = cs;
39207         
39208         this.layout();
39209         
39210     },
39211     
39212     layout : function()
39213     {   
39214         this._resetLayout();
39215         
39216         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
39217         
39218         this.layoutItems( isInstant );
39219       
39220         this._isLayoutInited = true;
39221         
39222         this.fireEvent('layout', this);
39223         
39224     },
39225     
39226     _resetLayout : function()
39227     {
39228         if(this.isHorizontal){
39229             this.horizontalMeasureColumns();
39230             return;
39231         }
39232         
39233         this.verticalMeasureColumns();
39234         
39235     },
39236     
39237     verticalMeasureColumns : function()
39238     {
39239         this.getContainerWidth();
39240         
39241 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
39242 //            this.colWidth = Math.floor(this.containerWidth * 0.8);
39243 //            return;
39244 //        }
39245         
39246         var boxWidth = this.boxWidth + this.padWidth;
39247         
39248         if(this.containerWidth < this.boxWidth){
39249             boxWidth = this.containerWidth
39250         }
39251         
39252         var containerWidth = this.containerWidth;
39253         
39254         var cols = Math.floor(containerWidth / boxWidth);
39255         
39256         this.cols = Math.max( cols, 1 );
39257         
39258         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
39259         
39260         var totalBoxWidth = this.cols * boxWidth - this.padWidth;
39261         
39262         var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
39263         
39264         this.colWidth = boxWidth + avail - this.padWidth;
39265         
39266         this.unitWidth = Math.round((this.colWidth - (this.gutter * 2)) / 3);
39267         this.unitHeight = this.boxHeight > 0 ? this.boxHeight  : this.unitWidth;
39268     },
39269     
39270     horizontalMeasureColumns : function()
39271     {
39272         this.getContainerWidth();
39273         
39274         var boxWidth = this.boxWidth;
39275         
39276         if(this.containerWidth < boxWidth){
39277             boxWidth = this.containerWidth;
39278         }
39279         
39280         this.unitWidth = Math.floor((boxWidth - (this.gutter * 2)) / 3);
39281         
39282         this.el.setHeight(boxWidth);
39283         
39284     },
39285     
39286     getContainerWidth : function()
39287     {
39288         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
39289     },
39290     
39291     layoutItems : function( isInstant )
39292     {
39293         Roo.log(this.bricks);
39294         
39295         var items = Roo.apply([], this.bricks);
39296         
39297         if(this.isHorizontal){
39298             this._horizontalLayoutItems( items , isInstant );
39299             return;
39300         }
39301         
39302 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
39303 //            this._verticalAlternativeLayoutItems( items , isInstant );
39304 //            return;
39305 //        }
39306         
39307         this._verticalLayoutItems( items , isInstant );
39308         
39309     },
39310     
39311     _verticalLayoutItems : function ( items , isInstant)
39312     {
39313         if ( !items || !items.length ) {
39314             return;
39315         }
39316         
39317         var standard = [
39318             ['xs', 'xs', 'xs', 'tall'],
39319             ['xs', 'xs', 'tall'],
39320             ['xs', 'xs', 'sm'],
39321             ['xs', 'xs', 'xs'],
39322             ['xs', 'tall'],
39323             ['xs', 'sm'],
39324             ['xs', 'xs'],
39325             ['xs'],
39326             
39327             ['sm', 'xs', 'xs'],
39328             ['sm', 'xs'],
39329             ['sm'],
39330             
39331             ['tall', 'xs', 'xs', 'xs'],
39332             ['tall', 'xs', 'xs'],
39333             ['tall', 'xs'],
39334             ['tall']
39335             
39336         ];
39337         
39338         var queue = [];
39339         
39340         var boxes = [];
39341         
39342         var box = [];
39343         
39344         Roo.each(items, function(item, k){
39345             
39346             switch (item.size) {
39347                 // these layouts take up a full box,
39348                 case 'md' :
39349                 case 'md-left' :
39350                 case 'md-right' :
39351                 case 'wide' :
39352                     
39353                     if(box.length){
39354                         boxes.push(box);
39355                         box = [];
39356                     }
39357                     
39358                     boxes.push([item]);
39359                     
39360                     break;
39361                     
39362                 case 'xs' :
39363                 case 'sm' :
39364                 case 'tall' :
39365                     
39366                     box.push(item);
39367                     
39368                     break;
39369                 default :
39370                     break;
39371                     
39372             }
39373             
39374         }, this);
39375         
39376         if(box.length){
39377             boxes.push(box);
39378             box = [];
39379         }
39380         
39381         var filterPattern = function(box, length)
39382         {
39383             if(!box.length){
39384                 return;
39385             }
39386             
39387             var match = false;
39388             
39389             var pattern = box.slice(0, length);
39390             
39391             var format = [];
39392             
39393             Roo.each(pattern, function(i){
39394                 format.push(i.size);
39395             }, this);
39396             
39397             Roo.each(standard, function(s){
39398                 
39399                 if(String(s) != String(format)){
39400                     return;
39401                 }
39402                 
39403                 match = true;
39404                 return false;
39405                 
39406             }, this);
39407             
39408             if(!match && length == 1){
39409                 return;
39410             }
39411             
39412             if(!match){
39413                 filterPattern(box, length - 1);
39414                 return;
39415             }
39416                 
39417             queue.push(pattern);
39418
39419             box = box.slice(length, box.length);
39420
39421             filterPattern(box, 4);
39422
39423             return;
39424             
39425         }
39426         
39427         Roo.each(boxes, function(box, k){
39428             
39429             if(!box.length){
39430                 return;
39431             }
39432             
39433             if(box.length == 1){
39434                 queue.push(box);
39435                 return;
39436             }
39437             
39438             filterPattern(box, 4);
39439             
39440         }, this);
39441         
39442         this._processVerticalLayoutQueue( queue, isInstant );
39443         
39444     },
39445     
39446 //    _verticalAlternativeLayoutItems : function( items , isInstant )
39447 //    {
39448 //        if ( !items || !items.length ) {
39449 //            return;
39450 //        }
39451 //
39452 //        this._processVerticalAlternativeLayoutQueue( items, isInstant );
39453 //        
39454 //    },
39455     
39456     _horizontalLayoutItems : function ( items , isInstant)
39457     {
39458         if ( !items || !items.length || items.length < 3) {
39459             return;
39460         }
39461         
39462         items.reverse();
39463         
39464         var eItems = items.slice(0, 3);
39465         
39466         items = items.slice(3, items.length);
39467         
39468         var standard = [
39469             ['xs', 'xs', 'xs', 'wide'],
39470             ['xs', 'xs', 'wide'],
39471             ['xs', 'xs', 'sm'],
39472             ['xs', 'xs', 'xs'],
39473             ['xs', 'wide'],
39474             ['xs', 'sm'],
39475             ['xs', 'xs'],
39476             ['xs'],
39477             
39478             ['sm', 'xs', 'xs'],
39479             ['sm', 'xs'],
39480             ['sm'],
39481             
39482             ['wide', 'xs', 'xs', 'xs'],
39483             ['wide', 'xs', 'xs'],
39484             ['wide', 'xs'],
39485             ['wide'],
39486             
39487             ['wide-thin']
39488         ];
39489         
39490         var queue = [];
39491         
39492         var boxes = [];
39493         
39494         var box = [];
39495         
39496         Roo.each(items, function(item, k){
39497             
39498             switch (item.size) {
39499                 case 'md' :
39500                 case 'md-left' :
39501                 case 'md-right' :
39502                 case 'tall' :
39503                     
39504                     if(box.length){
39505                         boxes.push(box);
39506                         box = [];
39507                     }
39508                     
39509                     boxes.push([item]);
39510                     
39511                     break;
39512                     
39513                 case 'xs' :
39514                 case 'sm' :
39515                 case 'wide' :
39516                 case 'wide-thin' :
39517                     
39518                     box.push(item);
39519                     
39520                     break;
39521                 default :
39522                     break;
39523                     
39524             }
39525             
39526         }, this);
39527         
39528         if(box.length){
39529             boxes.push(box);
39530             box = [];
39531         }
39532         
39533         var filterPattern = function(box, length)
39534         {
39535             if(!box.length){
39536                 return;
39537             }
39538             
39539             var match = false;
39540             
39541             var pattern = box.slice(0, length);
39542             
39543             var format = [];
39544             
39545             Roo.each(pattern, function(i){
39546                 format.push(i.size);
39547             }, this);
39548             
39549             Roo.each(standard, function(s){
39550                 
39551                 if(String(s) != String(format)){
39552                     return;
39553                 }
39554                 
39555                 match = true;
39556                 return false;
39557                 
39558             }, this);
39559             
39560             if(!match && length == 1){
39561                 return;
39562             }
39563             
39564             if(!match){
39565                 filterPattern(box, length - 1);
39566                 return;
39567             }
39568                 
39569             queue.push(pattern);
39570
39571             box = box.slice(length, box.length);
39572
39573             filterPattern(box, 4);
39574
39575             return;
39576             
39577         }
39578         
39579         Roo.each(boxes, function(box, k){
39580             
39581             if(!box.length){
39582                 return;
39583             }
39584             
39585             if(box.length == 1){
39586                 queue.push(box);
39587                 return;
39588             }
39589             
39590             filterPattern(box, 4);
39591             
39592         }, this);
39593         
39594         
39595         var prune = [];
39596         
39597         var pos = this.el.getBox(true);
39598         
39599         var minX = pos.x;
39600         
39601         var maxX = pos.right - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
39602         
39603         var hit_end = false;
39604         
39605         Roo.each(queue, function(box){
39606             
39607             if(hit_end){
39608                 
39609                 Roo.each(box, function(b){
39610                 
39611                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
39612                     b.el.hide();
39613
39614                 }, this);
39615
39616                 return;
39617             }
39618             
39619             var mx = 0;
39620             
39621             Roo.each(box, function(b){
39622                 
39623                 b.el.setVisibilityMode(Roo.Element.DISPLAY);
39624                 b.el.show();
39625
39626                 mx = Math.max(mx, b.x);
39627                 
39628             }, this);
39629             
39630             maxX = maxX - this.unitWidth * mx - this.gutter * (mx - 1) - this.padWidth;
39631             
39632             if(maxX < minX){
39633                 
39634                 Roo.each(box, function(b){
39635                 
39636                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
39637                     b.el.hide();
39638                     
39639                 }, this);
39640                 
39641                 hit_end = true;
39642                 
39643                 return;
39644             }
39645             
39646             prune.push(box);
39647             
39648         }, this);
39649         
39650         this._processHorizontalLayoutQueue( prune, eItems, isInstant );
39651     },
39652     
39653     /** Sets position of item in DOM
39654     * @param {Element} item
39655     * @param {Number} x - horizontal position
39656     * @param {Number} y - vertical position
39657     * @param {Boolean} isInstant - disables transitions
39658     */
39659     _processVerticalLayoutQueue : function( queue, isInstant )
39660     {
39661         var pos = this.el.getBox(true);
39662         var x = pos.x;
39663         var y = pos.y;
39664         var maxY = [];
39665         
39666         for (var i = 0; i < this.cols; i++){
39667             maxY[i] = pos.y;
39668         }
39669         
39670         Roo.each(queue, function(box, k){
39671             
39672             var col = k % this.cols;
39673             
39674             Roo.each(box, function(b,kk){
39675                 
39676                 b.el.position('absolute');
39677                 
39678                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39679                 var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39680                 
39681                 if(b.size == 'md-left' || b.size == 'md-right'){
39682                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
39683                     height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
39684                 }
39685                 
39686                 b.el.setWidth(width);
39687                 b.el.setHeight(height);
39688                 // iframe?
39689                 b.el.select('iframe',true).setSize(width,height);
39690                 
39691             }, this);
39692             
39693             for (var i = 0; i < this.cols; i++){
39694                 
39695                 if(maxY[i] < maxY[col]){
39696                     col = i;
39697                     continue;
39698                 }
39699                 
39700                 col = Math.min(col, i);
39701                 
39702             }
39703             
39704             x = pos.x + col * (this.colWidth + this.padWidth);
39705             
39706             y = maxY[col];
39707             
39708             var positions = [];
39709             
39710             switch (box.length){
39711                 case 1 :
39712                     positions = this.getVerticalOneBoxColPositions(x, y, box);
39713                     break;
39714                 case 2 :
39715                     positions = this.getVerticalTwoBoxColPositions(x, y, box);
39716                     break;
39717                 case 3 :
39718                     positions = this.getVerticalThreeBoxColPositions(x, y, box);
39719                     break;
39720                 case 4 :
39721                     positions = this.getVerticalFourBoxColPositions(x, y, box);
39722                     break;
39723                 default :
39724                     break;
39725             }
39726             
39727             Roo.each(box, function(b,kk){
39728                 
39729                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
39730                 
39731                 var sz = b.el.getSize();
39732                 
39733                 maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
39734                 
39735             }, this);
39736             
39737         }, this);
39738         
39739         var mY = 0;
39740         
39741         for (var i = 0; i < this.cols; i++){
39742             mY = Math.max(mY, maxY[i]);
39743         }
39744         
39745         this.el.setHeight(mY - pos.y);
39746         
39747     },
39748     
39749 //    _processVerticalAlternativeLayoutQueue : function( items, isInstant )
39750 //    {
39751 //        var pos = this.el.getBox(true);
39752 //        var x = pos.x;
39753 //        var y = pos.y;
39754 //        var maxX = pos.right;
39755 //        
39756 //        var maxHeight = 0;
39757 //        
39758 //        Roo.each(items, function(item, k){
39759 //            
39760 //            var c = k % 2;
39761 //            
39762 //            item.el.position('absolute');
39763 //                
39764 //            var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
39765 //
39766 //            item.el.setWidth(width);
39767 //
39768 //            var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
39769 //
39770 //            item.el.setHeight(height);
39771 //            
39772 //            if(c == 0){
39773 //                item.el.setXY([x, y], isInstant ? false : true);
39774 //            } else {
39775 //                item.el.setXY([maxX - width, y], isInstant ? false : true);
39776 //            }
39777 //            
39778 //            y = y + height + this.alternativePadWidth;
39779 //            
39780 //            maxHeight = maxHeight + height + this.alternativePadWidth;
39781 //            
39782 //        }, this);
39783 //        
39784 //        this.el.setHeight(maxHeight);
39785 //        
39786 //    },
39787     
39788     _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
39789     {
39790         var pos = this.el.getBox(true);
39791         
39792         var minX = pos.x;
39793         var minY = pos.y;
39794         
39795         var maxX = pos.right;
39796         
39797         this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
39798         
39799         var maxX = maxX - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
39800         
39801         Roo.each(queue, function(box, k){
39802             
39803             Roo.each(box, function(b, kk){
39804                 
39805                 b.el.position('absolute');
39806                 
39807                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39808                 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39809                 
39810                 if(b.size == 'md-left' || b.size == 'md-right'){
39811                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
39812                     height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
39813                 }
39814                 
39815                 b.el.setWidth(width);
39816                 b.el.setHeight(height);
39817                 
39818             }, this);
39819             
39820             if(!box.length){
39821                 return;
39822             }
39823             
39824             var positions = [];
39825             
39826             switch (box.length){
39827                 case 1 :
39828                     positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
39829                     break;
39830                 case 2 :
39831                     positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
39832                     break;
39833                 case 3 :
39834                     positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
39835                     break;
39836                 case 4 :
39837                     positions = this.getHorizontalFourBoxColPositions(maxX, minY, box);
39838                     break;
39839                 default :
39840                     break;
39841             }
39842             
39843             Roo.each(box, function(b,kk){
39844                 
39845                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
39846                 
39847                 maxX = Math.min(maxX, positions[kk].x - this.padWidth);
39848                 
39849             }, this);
39850             
39851         }, this);
39852         
39853     },
39854     
39855     _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
39856     {
39857         Roo.each(eItems, function(b,k){
39858             
39859             b.size = (k == 0) ? 'sm' : 'xs';
39860             b.x = (k == 0) ? 2 : 1;
39861             b.y = (k == 0) ? 2 : 1;
39862             
39863             b.el.position('absolute');
39864             
39865             var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39866                 
39867             b.el.setWidth(width);
39868             
39869             var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39870             
39871             b.el.setHeight(height);
39872             
39873         }, this);
39874
39875         var positions = [];
39876         
39877         positions.push({
39878             x : maxX - this.unitWidth * 2 - this.gutter,
39879             y : minY
39880         });
39881         
39882         positions.push({
39883             x : maxX - this.unitWidth,
39884             y : minY + (this.unitWidth + this.gutter) * 2
39885         });
39886         
39887         positions.push({
39888             x : maxX - this.unitWidth * 3 - this.gutter * 2,
39889             y : minY
39890         });
39891         
39892         Roo.each(eItems, function(b,k){
39893             
39894             b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
39895
39896         }, this);
39897         
39898     },
39899     
39900     getVerticalOneBoxColPositions : function(x, y, box)
39901     {
39902         var pos = [];
39903         
39904         var rand = Math.floor(Math.random() * ((4 - box[0].x)));
39905         
39906         if(box[0].size == 'md-left'){
39907             rand = 0;
39908         }
39909         
39910         if(box[0].size == 'md-right'){
39911             rand = 1;
39912         }
39913         
39914         pos.push({
39915             x : x + (this.unitWidth + this.gutter) * rand,
39916             y : y
39917         });
39918         
39919         return pos;
39920     },
39921     
39922     getVerticalTwoBoxColPositions : function(x, y, box)
39923     {
39924         var pos = [];
39925         
39926         if(box[0].size == 'xs'){
39927             
39928             pos.push({
39929                 x : x,
39930                 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
39931             });
39932
39933             pos.push({
39934                 x : x + (this.unitWidth + this.gutter) * (3 - box[1].x),
39935                 y : y
39936             });
39937             
39938             return pos;
39939             
39940         }
39941         
39942         pos.push({
39943             x : x,
39944             y : y
39945         });
39946
39947         pos.push({
39948             x : x + (this.unitWidth + this.gutter) * 2,
39949             y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
39950         });
39951         
39952         return pos;
39953         
39954     },
39955     
39956     getVerticalThreeBoxColPositions : function(x, y, box)
39957     {
39958         var pos = [];
39959         
39960         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
39961             
39962             pos.push({
39963                 x : x,
39964                 y : y
39965             });
39966
39967             pos.push({
39968                 x : x + (this.unitWidth + this.gutter) * 1,
39969                 y : y
39970             });
39971             
39972             pos.push({
39973                 x : x + (this.unitWidth + this.gutter) * 2,
39974                 y : y
39975             });
39976             
39977             return pos;
39978             
39979         }
39980         
39981         if(box[0].size == 'xs' && box[1].size == 'xs'){
39982             
39983             pos.push({
39984                 x : x,
39985                 y : y
39986             });
39987
39988             pos.push({
39989                 x : x,
39990                 y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
39991             });
39992             
39993             pos.push({
39994                 x : x + (this.unitWidth + this.gutter) * 1,
39995                 y : y
39996             });
39997             
39998             return pos;
39999             
40000         }
40001         
40002         pos.push({
40003             x : x,
40004             y : y
40005         });
40006
40007         pos.push({
40008             x : x + (this.unitWidth + this.gutter) * 2,
40009             y : y
40010         });
40011
40012         pos.push({
40013             x : x + (this.unitWidth + this.gutter) * 2,
40014             y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
40015         });
40016             
40017         return pos;
40018         
40019     },
40020     
40021     getVerticalFourBoxColPositions : function(x, y, box)
40022     {
40023         var pos = [];
40024         
40025         if(box[0].size == 'xs'){
40026             
40027             pos.push({
40028                 x : x,
40029                 y : y
40030             });
40031
40032             pos.push({
40033                 x : x,
40034                 y : y + (this.unitHeight + this.gutter) * 1
40035             });
40036             
40037             pos.push({
40038                 x : x,
40039                 y : y + (this.unitHeight + this.gutter) * 2
40040             });
40041             
40042             pos.push({
40043                 x : x + (this.unitWidth + this.gutter) * 1,
40044                 y : y
40045             });
40046             
40047             return pos;
40048             
40049         }
40050         
40051         pos.push({
40052             x : x,
40053             y : y
40054         });
40055
40056         pos.push({
40057             x : x + (this.unitWidth + this.gutter) * 2,
40058             y : y
40059         });
40060
40061         pos.push({
40062             x : x + (this.unitHeightunitWidth + this.gutter) * 2,
40063             y : y + (this.unitHeight + this.gutter) * 1
40064         });
40065
40066         pos.push({
40067             x : x + (this.unitWidth + this.gutter) * 2,
40068             y : y + (this.unitWidth + this.gutter) * 2
40069         });
40070
40071         return pos;
40072         
40073     },
40074     
40075     getHorizontalOneBoxColPositions : function(maxX, minY, box)
40076     {
40077         var pos = [];
40078         
40079         if(box[0].size == 'md-left'){
40080             pos.push({
40081                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
40082                 y : minY
40083             });
40084             
40085             return pos;
40086         }
40087         
40088         if(box[0].size == 'md-right'){
40089             pos.push({
40090                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
40091                 y : minY + (this.unitWidth + this.gutter) * 1
40092             });
40093             
40094             return pos;
40095         }
40096         
40097         var rand = Math.floor(Math.random() * (4 - box[0].y));
40098         
40099         pos.push({
40100             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40101             y : minY + (this.unitWidth + this.gutter) * rand
40102         });
40103         
40104         return pos;
40105         
40106     },
40107     
40108     getHorizontalTwoBoxColPositions : function(maxX, minY, box)
40109     {
40110         var pos = [];
40111         
40112         if(box[0].size == 'xs'){
40113             
40114             pos.push({
40115                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40116                 y : minY
40117             });
40118
40119             pos.push({
40120                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40121                 y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
40122             });
40123             
40124             return pos;
40125             
40126         }
40127         
40128         pos.push({
40129             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40130             y : minY
40131         });
40132
40133         pos.push({
40134             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40135             y : minY + (this.unitWidth + this.gutter) * 2
40136         });
40137         
40138         return pos;
40139         
40140     },
40141     
40142     getHorizontalThreeBoxColPositions : function(maxX, minY, box)
40143     {
40144         var pos = [];
40145         
40146         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
40147             
40148             pos.push({
40149                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40150                 y : minY
40151             });
40152
40153             pos.push({
40154                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40155                 y : minY + (this.unitWidth + this.gutter) * 1
40156             });
40157             
40158             pos.push({
40159                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
40160                 y : minY + (this.unitWidth + this.gutter) * 2
40161             });
40162             
40163             return pos;
40164             
40165         }
40166         
40167         if(box[0].size == 'xs' && box[1].size == 'xs'){
40168             
40169             pos.push({
40170                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40171                 y : minY
40172             });
40173
40174             pos.push({
40175                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40176                 y : minY
40177             });
40178             
40179             pos.push({
40180                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
40181                 y : minY + (this.unitWidth + this.gutter) * 1
40182             });
40183             
40184             return pos;
40185             
40186         }
40187         
40188         pos.push({
40189             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40190             y : minY
40191         });
40192
40193         pos.push({
40194             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40195             y : minY + (this.unitWidth + this.gutter) * 2
40196         });
40197
40198         pos.push({
40199             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
40200             y : minY + (this.unitWidth + this.gutter) * 2
40201         });
40202             
40203         return pos;
40204         
40205     },
40206     
40207     getHorizontalFourBoxColPositions : function(maxX, minY, box)
40208     {
40209         var pos = [];
40210         
40211         if(box[0].size == 'xs'){
40212             
40213             pos.push({
40214                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40215                 y : minY
40216             });
40217
40218             pos.push({
40219                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40220                 y : minY
40221             });
40222             
40223             pos.push({
40224                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
40225                 y : minY
40226             });
40227             
40228             pos.push({
40229                 x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
40230                 y : minY + (this.unitWidth + this.gutter) * 1
40231             });
40232             
40233             return pos;
40234             
40235         }
40236         
40237         pos.push({
40238             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
40239             y : minY
40240         });
40241         
40242         pos.push({
40243             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
40244             y : minY + (this.unitWidth + this.gutter) * 2
40245         });
40246         
40247         pos.push({
40248             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
40249             y : minY + (this.unitWidth + this.gutter) * 2
40250         });
40251         
40252         pos.push({
40253             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1) - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
40254             y : minY + (this.unitWidth + this.gutter) * 2
40255         });
40256
40257         return pos;
40258         
40259     },
40260     
40261     /**
40262     * remove a Masonry Brick
40263     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
40264     */
40265     removeBrick : function(brick_id)
40266     {
40267         if (!brick_id) {
40268             return;
40269         }
40270         
40271         for (var i = 0; i<this.bricks.length; i++) {
40272             if (this.bricks[i].id == brick_id) {
40273                 this.bricks.splice(i,1);
40274                 this.el.dom.removeChild(Roo.get(brick_id).dom);
40275                 this.initial();
40276             }
40277         }
40278     },
40279     
40280     /**
40281     * adds a Masonry Brick
40282     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
40283     */
40284     addBrick : function(cfg)
40285     {
40286         var cn = new Roo.bootstrap.MasonryBrick(cfg);
40287         //this.register(cn);
40288         cn.parentId = this.id;
40289         cn.render(this.el);
40290         return cn;
40291     },
40292     
40293     /**
40294     * register a Masonry Brick
40295     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
40296     */
40297     
40298     register : function(brick)
40299     {
40300         this.bricks.push(brick);
40301         brick.masonryId = this.id;
40302     },
40303     
40304     /**
40305     * clear all the Masonry Brick
40306     */
40307     clearAll : function()
40308     {
40309         this.bricks = [];
40310         //this.getChildContainer().dom.innerHTML = "";
40311         this.el.dom.innerHTML = '';
40312     },
40313     
40314     getSelected : function()
40315     {
40316         if (!this.selectedBrick) {
40317             return false;
40318         }
40319         
40320         return this.selectedBrick;
40321     }
40322 });
40323
40324 Roo.apply(Roo.bootstrap.LayoutMasonry, {
40325     
40326     groups: {},
40327      /**
40328     * register a Masonry Layout
40329     * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
40330     */
40331     
40332     register : function(layout)
40333     {
40334         this.groups[layout.id] = layout;
40335     },
40336     /**
40337     * fetch a  Masonry Layout based on the masonry layout ID
40338     * @param {string} the masonry layout to add
40339     * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
40340     */
40341     
40342     get: function(layout_id) {
40343         if (typeof(this.groups[layout_id]) == 'undefined') {
40344             return false;
40345         }
40346         return this.groups[layout_id] ;
40347     }
40348     
40349     
40350     
40351 });
40352
40353  
40354
40355  /**
40356  *
40357  * This is based on 
40358  * http://masonry.desandro.com
40359  *
40360  * The idea is to render all the bricks based on vertical width...
40361  *
40362  * The original code extends 'outlayer' - we might need to use that....
40363  * 
40364  */
40365
40366
40367 /**
40368  * @class Roo.bootstrap.LayoutMasonryAuto
40369  * @extends Roo.bootstrap.Component
40370  * Bootstrap Layout Masonry class
40371  * 
40372  * @constructor
40373  * Create a new Element
40374  * @param {Object} config The config object
40375  */
40376
40377 Roo.bootstrap.LayoutMasonryAuto = function(config){
40378     Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this, config);
40379 };
40380
40381 Roo.extend(Roo.bootstrap.LayoutMasonryAuto, Roo.bootstrap.Component,  {
40382     
40383       /**
40384      * @cfg {Boolean} isFitWidth  - resize the width..
40385      */   
40386     isFitWidth : false,  // options..
40387     /**
40388      * @cfg {Boolean} isOriginLeft = left align?
40389      */   
40390     isOriginLeft : true,
40391     /**
40392      * @cfg {Boolean} isOriginTop = top align?
40393      */   
40394     isOriginTop : false,
40395     /**
40396      * @cfg {Boolean} isLayoutInstant = no animation?
40397      */   
40398     isLayoutInstant : false, // needed?
40399     /**
40400      * @cfg {Boolean} isResizingContainer = not sure if this is used..
40401      */   
40402     isResizingContainer : true,
40403     /**
40404      * @cfg {Number} columnWidth  width of the columns 
40405      */   
40406     
40407     columnWidth : 0,
40408     
40409     /**
40410      * @cfg {Number} maxCols maximum number of columns
40411      */   
40412     
40413     maxCols: 0,
40414     /**
40415      * @cfg {Number} padHeight padding below box..
40416      */   
40417     
40418     padHeight : 10, 
40419     
40420     /**
40421      * @cfg {Boolean} isAutoInitial defalut true
40422      */   
40423     
40424     isAutoInitial : true, 
40425     
40426     // private?
40427     gutter : 0,
40428     
40429     containerWidth: 0,
40430     initialColumnWidth : 0,
40431     currentSize : null,
40432     
40433     colYs : null, // array.
40434     maxY : 0,
40435     padWidth: 10,
40436     
40437     
40438     tag: 'div',
40439     cls: '',
40440     bricks: null, //CompositeElement
40441     cols : 0, // array?
40442     // element : null, // wrapped now this.el
40443     _isLayoutInited : null, 
40444     
40445     
40446     getAutoCreate : function(){
40447         
40448         var cfg = {
40449             tag: this.tag,
40450             cls: 'blog-masonary-wrapper ' + this.cls,
40451             cn : {
40452                 cls : 'mas-boxes masonary'
40453             }
40454         };
40455         
40456         return cfg;
40457     },
40458     
40459     getChildContainer: function( )
40460     {
40461         if (this.boxesEl) {
40462             return this.boxesEl;
40463         }
40464         
40465         this.boxesEl = this.el.select('.mas-boxes').first();
40466         
40467         return this.boxesEl;
40468     },
40469     
40470     
40471     initEvents : function()
40472     {
40473         var _this = this;
40474         
40475         if(this.isAutoInitial){
40476             Roo.log('hook children rendered');
40477             this.on('childrenrendered', function() {
40478                 Roo.log('children rendered');
40479                 _this.initial();
40480             } ,this);
40481         }
40482         
40483     },
40484     
40485     initial : function()
40486     {
40487         this.reloadItems();
40488
40489         this.currentSize = this.el.getBox(true);
40490
40491         /// was window resize... - let's see if this works..
40492         Roo.EventManager.onWindowResize(this.resize, this); 
40493
40494         if(!this.isAutoInitial){
40495             this.layout();
40496             return;
40497         }
40498         
40499         this.layout.defer(500,this);
40500     },
40501     
40502     reloadItems: function()
40503     {
40504         this.bricks = this.el.select('.masonry-brick', true);
40505         
40506         this.bricks.each(function(b) {
40507             //Roo.log(b.getSize());
40508             if (!b.attr('originalwidth')) {
40509                 b.attr('originalwidth',  b.getSize().width);
40510             }
40511             
40512         });
40513         
40514         Roo.log(this.bricks.elements.length);
40515     },
40516     
40517     resize : function()
40518     {
40519         Roo.log('resize');
40520         var cs = this.el.getBox(true);
40521         
40522         if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
40523             Roo.log("no change in with or X");
40524             return;
40525         }
40526         this.currentSize = cs;
40527         this.layout();
40528     },
40529     
40530     layout : function()
40531     {
40532          Roo.log('layout');
40533         this._resetLayout();
40534         //this._manageStamps();
40535       
40536         // don't animate first layout
40537         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
40538         this.layoutItems( isInstant );
40539       
40540         // flag for initalized
40541         this._isLayoutInited = true;
40542     },
40543     
40544     layoutItems : function( isInstant )
40545     {
40546         //var items = this._getItemsForLayout( this.items );
40547         // original code supports filtering layout items.. we just ignore it..
40548         
40549         this._layoutItems( this.bricks , isInstant );
40550       
40551         this._postLayout();
40552     },
40553     _layoutItems : function ( items , isInstant)
40554     {
40555        //this.fireEvent( 'layout', this, items );
40556     
40557
40558         if ( !items || !items.elements.length ) {
40559           // no items, emit event with empty array
40560             return;
40561         }
40562
40563         var queue = [];
40564         items.each(function(item) {
40565             Roo.log("layout item");
40566             Roo.log(item);
40567             // get x/y object from method
40568             var position = this._getItemLayoutPosition( item );
40569             // enqueue
40570             position.item = item;
40571             position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
40572             queue.push( position );
40573         }, this);
40574       
40575         this._processLayoutQueue( queue );
40576     },
40577     /** Sets position of item in DOM
40578     * @param {Element} item
40579     * @param {Number} x - horizontal position
40580     * @param {Number} y - vertical position
40581     * @param {Boolean} isInstant - disables transitions
40582     */
40583     _processLayoutQueue : function( queue )
40584     {
40585         for ( var i=0, len = queue.length; i < len; i++ ) {
40586             var obj = queue[i];
40587             obj.item.position('absolute');
40588             obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
40589         }
40590     },
40591       
40592     
40593     /**
40594     * Any logic you want to do after each layout,
40595     * i.e. size the container
40596     */
40597     _postLayout : function()
40598     {
40599         this.resizeContainer();
40600     },
40601     
40602     resizeContainer : function()
40603     {
40604         if ( !this.isResizingContainer ) {
40605             return;
40606         }
40607         var size = this._getContainerSize();
40608         if ( size ) {
40609             this.el.setSize(size.width,size.height);
40610             this.boxesEl.setSize(size.width,size.height);
40611         }
40612     },
40613     
40614     
40615     
40616     _resetLayout : function()
40617     {
40618         //this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
40619         this.colWidth = this.el.getWidth();
40620         //this.gutter = this.el.getWidth(); 
40621         
40622         this.measureColumns();
40623
40624         // reset column Y
40625         var i = this.cols;
40626         this.colYs = [];
40627         while (i--) {
40628             this.colYs.push( 0 );
40629         }
40630     
40631         this.maxY = 0;
40632     },
40633
40634     measureColumns : function()
40635     {
40636         this.getContainerWidth();
40637       // if columnWidth is 0, default to outerWidth of first item
40638         if ( !this.columnWidth ) {
40639             var firstItem = this.bricks.first();
40640             Roo.log(firstItem);
40641             this.columnWidth  = this.containerWidth;
40642             if (firstItem && firstItem.attr('originalwidth') ) {
40643                 this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
40644             }
40645             // columnWidth fall back to item of first element
40646             Roo.log("set column width?");
40647                         this.initialColumnWidth = this.columnWidth  ;
40648
40649             // if first elem has no width, default to size of container
40650             
40651         }
40652         
40653         
40654         if (this.initialColumnWidth) {
40655             this.columnWidth = this.initialColumnWidth;
40656         }
40657         
40658         
40659             
40660         // column width is fixed at the top - however if container width get's smaller we should
40661         // reduce it...
40662         
40663         // this bit calcs how man columns..
40664             
40665         var columnWidth = this.columnWidth += this.gutter;
40666       
40667         // calculate columns
40668         var containerWidth = this.containerWidth + this.gutter;
40669         
40670         var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
40671         // fix rounding errors, typically with gutters
40672         var excess = columnWidth - containerWidth % columnWidth;
40673         
40674         
40675         // if overshoot is less than a pixel, round up, otherwise floor it
40676         var mathMethod = excess && excess < 1 ? 'round' : 'floor';
40677         cols = Math[ mathMethod ]( cols );
40678         this.cols = Math.max( cols, 1 );
40679         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
40680         
40681          // padding positioning..
40682         var totalColWidth = this.cols * this.columnWidth;
40683         var padavail = this.containerWidth - totalColWidth;
40684         // so for 2 columns - we need 3 'pads'
40685         
40686         var padNeeded = (1+this.cols) * this.padWidth;
40687         
40688         var padExtra = Math.floor((padavail - padNeeded) / this.cols);
40689         
40690         this.columnWidth += padExtra
40691         //this.padWidth = Math.floor(padavail /  ( this.cols));
40692         
40693         // adjust colum width so that padding is fixed??
40694         
40695         // we have 3 columns ... total = width * 3
40696         // we have X left over... that should be used by 
40697         
40698         //if (this.expandC) {
40699             
40700         //}
40701         
40702         
40703         
40704     },
40705     
40706     getContainerWidth : function()
40707     {
40708        /* // container is parent if fit width
40709         var container = this.isFitWidth ? this.element.parentNode : this.element;
40710         // check that this.size and size are there
40711         // IE8 triggers resize on body size change, so they might not be
40712         
40713         var size = getSize( container );  //FIXME
40714         this.containerWidth = size && size.innerWidth; //FIXME
40715         */
40716          
40717         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
40718         
40719     },
40720     
40721     _getItemLayoutPosition : function( item )  // what is item?
40722     {
40723         // we resize the item to our columnWidth..
40724       
40725         item.setWidth(this.columnWidth);
40726         item.autoBoxAdjust  = false;
40727         
40728         var sz = item.getSize();
40729  
40730         // how many columns does this brick span
40731         var remainder = this.containerWidth % this.columnWidth;
40732         
40733         var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
40734         // round if off by 1 pixel, otherwise use ceil
40735         var colSpan = Math[ mathMethod ]( sz.width  / this.columnWidth );
40736         colSpan = Math.min( colSpan, this.cols );
40737         
40738         // normally this should be '1' as we dont' currently allow multi width columns..
40739         
40740         var colGroup = this._getColGroup( colSpan );
40741         // get the minimum Y value from the columns
40742         var minimumY = Math.min.apply( Math, colGroup );
40743         Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
40744         
40745         var shortColIndex = colGroup.indexOf(  minimumY ); // broken on ie8..?? probably...
40746          
40747         // position the brick
40748         var position = {
40749             x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
40750             y: this.currentSize.y + minimumY + this.padHeight
40751         };
40752         
40753         Roo.log(position);
40754         // apply setHeight to necessary columns
40755         var setHeight = minimumY + sz.height + this.padHeight;
40756         //Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
40757         
40758         var setSpan = this.cols + 1 - colGroup.length;
40759         for ( var i = 0; i < setSpan; i++ ) {
40760           this.colYs[ shortColIndex + i ] = setHeight ;
40761         }
40762       
40763         return position;
40764     },
40765     
40766     /**
40767      * @param {Number} colSpan - number of columns the element spans
40768      * @returns {Array} colGroup
40769      */
40770     _getColGroup : function( colSpan )
40771     {
40772         if ( colSpan < 2 ) {
40773           // if brick spans only one column, use all the column Ys
40774           return this.colYs;
40775         }
40776       
40777         var colGroup = [];
40778         // how many different places could this brick fit horizontally
40779         var groupCount = this.cols + 1 - colSpan;
40780         // for each group potential horizontal position
40781         for ( var i = 0; i < groupCount; i++ ) {
40782           // make an array of colY values for that one group
40783           var groupColYs = this.colYs.slice( i, i + colSpan );
40784           // and get the max value of the array
40785           colGroup[i] = Math.max.apply( Math, groupColYs );
40786         }
40787         return colGroup;
40788     },
40789     /*
40790     _manageStamp : function( stamp )
40791     {
40792         var stampSize =  stamp.getSize();
40793         var offset = stamp.getBox();
40794         // get the columns that this stamp affects
40795         var firstX = this.isOriginLeft ? offset.x : offset.right;
40796         var lastX = firstX + stampSize.width;
40797         var firstCol = Math.floor( firstX / this.columnWidth );
40798         firstCol = Math.max( 0, firstCol );
40799         
40800         var lastCol = Math.floor( lastX / this.columnWidth );
40801         // lastCol should not go over if multiple of columnWidth #425
40802         lastCol -= lastX % this.columnWidth ? 0 : 1;
40803         lastCol = Math.min( this.cols - 1, lastCol );
40804         
40805         // set colYs to bottom of the stamp
40806         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
40807             stampSize.height;
40808             
40809         for ( var i = firstCol; i <= lastCol; i++ ) {
40810           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
40811         }
40812     },
40813     */
40814     
40815     _getContainerSize : function()
40816     {
40817         this.maxY = Math.max.apply( Math, this.colYs );
40818         var size = {
40819             height: this.maxY
40820         };
40821       
40822         if ( this.isFitWidth ) {
40823             size.width = this._getContainerFitWidth();
40824         }
40825       
40826         return size;
40827     },
40828     
40829     _getContainerFitWidth : function()
40830     {
40831         var unusedCols = 0;
40832         // count unused columns
40833         var i = this.cols;
40834         while ( --i ) {
40835           if ( this.colYs[i] !== 0 ) {
40836             break;
40837           }
40838           unusedCols++;
40839         }
40840         // fit container to columns that have been used
40841         return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
40842     },
40843     
40844     needsResizeLayout : function()
40845     {
40846         var previousWidth = this.containerWidth;
40847         this.getContainerWidth();
40848         return previousWidth !== this.containerWidth;
40849     }
40850  
40851 });
40852
40853  
40854
40855  /*
40856  * - LGPL
40857  *
40858  * element
40859  * 
40860  */
40861
40862 /**
40863  * @class Roo.bootstrap.MasonryBrick
40864  * @extends Roo.bootstrap.Component
40865  * Bootstrap MasonryBrick class
40866  * 
40867  * @constructor
40868  * Create a new MasonryBrick
40869  * @param {Object} config The config object
40870  */
40871
40872 Roo.bootstrap.MasonryBrick = function(config){
40873     
40874     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
40875     
40876     Roo.bootstrap.MasonryBrick.register(this);
40877     
40878     this.addEvents({
40879         // raw events
40880         /**
40881          * @event click
40882          * When a MasonryBrick is clcik
40883          * @param {Roo.bootstrap.MasonryBrick} this
40884          * @param {Roo.EventObject} e
40885          */
40886         "click" : true
40887     });
40888 };
40889
40890 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
40891     
40892     /**
40893      * @cfg {String} title
40894      */   
40895     title : '',
40896     /**
40897      * @cfg {String} html
40898      */   
40899     html : '',
40900     /**
40901      * @cfg {String} bgimage
40902      */   
40903     bgimage : '',
40904     /**
40905      * @cfg {String} videourl
40906      */   
40907     videourl : '',
40908     /**
40909      * @cfg {String} cls
40910      */   
40911     cls : '',
40912     /**
40913      * @cfg {String} href
40914      */   
40915     href : '',
40916     /**
40917      * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
40918      */   
40919     size : 'xs',
40920     
40921     /**
40922      * @cfg {String} placetitle (center|bottom)
40923      */   
40924     placetitle : '',
40925     
40926     /**
40927      * @cfg {Boolean} isFitContainer defalut true
40928      */   
40929     isFitContainer : true, 
40930     
40931     /**
40932      * @cfg {Boolean} preventDefault defalut false
40933      */   
40934     preventDefault : false, 
40935     
40936     /**
40937      * @cfg {Boolean} inverse defalut false
40938      */   
40939     maskInverse : false, 
40940     
40941     getAutoCreate : function()
40942     {
40943         if(!this.isFitContainer){
40944             return this.getSplitAutoCreate();
40945         }
40946         
40947         var cls = 'masonry-brick masonry-brick-full';
40948         
40949         if(this.href.length){
40950             cls += ' masonry-brick-link';
40951         }
40952         
40953         if(this.bgimage.length){
40954             cls += ' masonry-brick-image';
40955         }
40956         
40957         if(this.maskInverse){
40958             cls += ' mask-inverse';
40959         }
40960         
40961         if(!this.html.length && !this.maskInverse && !this.videourl.length){
40962             cls += ' enable-mask';
40963         }
40964         
40965         if(this.size){
40966             cls += ' masonry-' + this.size + '-brick';
40967         }
40968         
40969         if(this.placetitle.length){
40970             
40971             switch (this.placetitle) {
40972                 case 'center' :
40973                     cls += ' masonry-center-title';
40974                     break;
40975                 case 'bottom' :
40976                     cls += ' masonry-bottom-title';
40977                     break;
40978                 default:
40979                     break;
40980             }
40981             
40982         } else {
40983             if(!this.html.length && !this.bgimage.length){
40984                 cls += ' masonry-center-title';
40985             }
40986
40987             if(!this.html.length && this.bgimage.length){
40988                 cls += ' masonry-bottom-title';
40989             }
40990         }
40991         
40992         if(this.cls){
40993             cls += ' ' + this.cls;
40994         }
40995         
40996         var cfg = {
40997             tag: (this.href.length) ? 'a' : 'div',
40998             cls: cls,
40999             cn: [
41000                 {
41001                     tag: 'div',
41002                     cls: 'masonry-brick-mask'
41003                 },
41004                 {
41005                     tag: 'div',
41006                     cls: 'masonry-brick-paragraph',
41007                     cn: []
41008                 }
41009             ]
41010         };
41011         
41012         if(this.href.length){
41013             cfg.href = this.href;
41014         }
41015         
41016         var cn = cfg.cn[1].cn;
41017         
41018         if(this.title.length){
41019             cn.push({
41020                 tag: 'h4',
41021                 cls: 'masonry-brick-title',
41022                 html: this.title
41023             });
41024         }
41025         
41026         if(this.html.length){
41027             cn.push({
41028                 tag: 'p',
41029                 cls: 'masonry-brick-text',
41030                 html: this.html
41031             });
41032         }
41033         
41034         if (!this.title.length && !this.html.length) {
41035             cfg.cn[1].cls += ' hide';
41036         }
41037         
41038         if(this.bgimage.length){
41039             cfg.cn.push({
41040                 tag: 'img',
41041                 cls: 'masonry-brick-image-view',
41042                 src: this.bgimage
41043             });
41044         }
41045         
41046         if(this.videourl.length){
41047             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
41048             // youtube support only?
41049             cfg.cn.push({
41050                 tag: 'iframe',
41051                 cls: 'masonry-brick-image-view',
41052                 src: vurl,
41053                 frameborder : 0,
41054                 allowfullscreen : true
41055             });
41056         }
41057         
41058         return cfg;
41059         
41060     },
41061     
41062     getSplitAutoCreate : function()
41063     {
41064         var cls = 'masonry-brick masonry-brick-split';
41065         
41066         if(this.href.length){
41067             cls += ' masonry-brick-link';
41068         }
41069         
41070         if(this.bgimage.length){
41071             cls += ' masonry-brick-image';
41072         }
41073         
41074         if(this.size){
41075             cls += ' masonry-' + this.size + '-brick';
41076         }
41077         
41078         switch (this.placetitle) {
41079             case 'center' :
41080                 cls += ' masonry-center-title';
41081                 break;
41082             case 'bottom' :
41083                 cls += ' masonry-bottom-title';
41084                 break;
41085             default:
41086                 if(!this.bgimage.length){
41087                     cls += ' masonry-center-title';
41088                 }
41089
41090                 if(this.bgimage.length){
41091                     cls += ' masonry-bottom-title';
41092                 }
41093                 break;
41094         }
41095         
41096         if(this.cls){
41097             cls += ' ' + this.cls;
41098         }
41099         
41100         var cfg = {
41101             tag: (this.href.length) ? 'a' : 'div',
41102             cls: cls,
41103             cn: [
41104                 {
41105                     tag: 'div',
41106                     cls: 'masonry-brick-split-head',
41107                     cn: [
41108                         {
41109                             tag: 'div',
41110                             cls: 'masonry-brick-paragraph',
41111                             cn: []
41112                         }
41113                     ]
41114                 },
41115                 {
41116                     tag: 'div',
41117                     cls: 'masonry-brick-split-body',
41118                     cn: []
41119                 }
41120             ]
41121         };
41122         
41123         if(this.href.length){
41124             cfg.href = this.href;
41125         }
41126         
41127         if(this.title.length){
41128             cfg.cn[0].cn[0].cn.push({
41129                 tag: 'h4',
41130                 cls: 'masonry-brick-title',
41131                 html: this.title
41132             });
41133         }
41134         
41135         if(this.html.length){
41136             cfg.cn[1].cn.push({
41137                 tag: 'p',
41138                 cls: 'masonry-brick-text',
41139                 html: this.html
41140             });
41141         }
41142
41143         if(this.bgimage.length){
41144             cfg.cn[0].cn.push({
41145                 tag: 'img',
41146                 cls: 'masonry-brick-image-view',
41147                 src: this.bgimage
41148             });
41149         }
41150         
41151         if(this.videourl.length){
41152             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
41153             // youtube support only?
41154             cfg.cn[0].cn.cn.push({
41155                 tag: 'iframe',
41156                 cls: 'masonry-brick-image-view',
41157                 src: vurl,
41158                 frameborder : 0,
41159                 allowfullscreen : true
41160             });
41161         }
41162         
41163         return cfg;
41164     },
41165     
41166     initEvents: function() 
41167     {
41168         switch (this.size) {
41169             case 'xs' :
41170                 this.x = 1;
41171                 this.y = 1;
41172                 break;
41173             case 'sm' :
41174                 this.x = 2;
41175                 this.y = 2;
41176                 break;
41177             case 'md' :
41178             case 'md-left' :
41179             case 'md-right' :
41180                 this.x = 3;
41181                 this.y = 3;
41182                 break;
41183             case 'tall' :
41184                 this.x = 2;
41185                 this.y = 3;
41186                 break;
41187             case 'wide' :
41188                 this.x = 3;
41189                 this.y = 2;
41190                 break;
41191             case 'wide-thin' :
41192                 this.x = 3;
41193                 this.y = 1;
41194                 break;
41195                         
41196             default :
41197                 break;
41198         }
41199         
41200         if(Roo.isTouch){
41201             this.el.on('touchstart', this.onTouchStart, this);
41202             this.el.on('touchmove', this.onTouchMove, this);
41203             this.el.on('touchend', this.onTouchEnd, this);
41204             this.el.on('contextmenu', this.onContextMenu, this);
41205         } else {
41206             this.el.on('mouseenter'  ,this.enter, this);
41207             this.el.on('mouseleave', this.leave, this);
41208             this.el.on('click', this.onClick, this);
41209         }
41210         
41211         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
41212             this.parent().bricks.push(this);   
41213         }
41214         
41215     },
41216     
41217     onClick: function(e, el)
41218     {
41219         var time = this.endTimer - this.startTimer;
41220         // Roo.log(e.preventDefault());
41221         if(Roo.isTouch){
41222             if(time > 1000){
41223                 e.preventDefault();
41224                 return;
41225             }
41226         }
41227         
41228         if(!this.preventDefault){
41229             return;
41230         }
41231         
41232         e.preventDefault();
41233         
41234         if (this.activeClass != '') {
41235             this.selectBrick();
41236         }
41237         
41238         this.fireEvent('click', this, e);
41239     },
41240     
41241     enter: function(e, el)
41242     {
41243         e.preventDefault();
41244         
41245         if(!this.isFitContainer || this.maskInverse || this.videourl.length){
41246             return;
41247         }
41248         
41249         if(this.bgimage.length && this.html.length){
41250             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
41251         }
41252     },
41253     
41254     leave: function(e, el)
41255     {
41256         e.preventDefault();
41257         
41258         if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
41259             return;
41260         }
41261         
41262         if(this.bgimage.length && this.html.length){
41263             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
41264         }
41265     },
41266     
41267     onTouchStart: function(e, el)
41268     {
41269 //        e.preventDefault();
41270         
41271         this.touchmoved = false;
41272         
41273         if(!this.isFitContainer){
41274             return;
41275         }
41276         
41277         if(!this.bgimage.length || !this.html.length){
41278             return;
41279         }
41280         
41281         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
41282         
41283         this.timer = new Date().getTime();
41284         
41285     },
41286     
41287     onTouchMove: function(e, el)
41288     {
41289         this.touchmoved = true;
41290     },
41291     
41292     onContextMenu : function(e,el)
41293     {
41294         e.preventDefault();
41295         e.stopPropagation();
41296         return false;
41297     },
41298     
41299     onTouchEnd: function(e, el)
41300     {
41301 //        e.preventDefault();
41302         
41303         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
41304         
41305             this.leave(e,el);
41306             
41307             return;
41308         }
41309         
41310         if(!this.bgimage.length || !this.html.length){
41311             
41312             if(this.href.length){
41313                 window.location.href = this.href;
41314             }
41315             
41316             return;
41317         }
41318         
41319         if(!this.isFitContainer){
41320             return;
41321         }
41322         
41323         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
41324         
41325         window.location.href = this.href;
41326     },
41327     
41328     //selection on single brick only
41329     selectBrick : function() {
41330         
41331         if (!this.parentId) {
41332             return;
41333         }
41334         
41335         var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
41336         var index = m.selectedBrick.indexOf(this.id);
41337         
41338         if ( index > -1) {
41339             m.selectedBrick.splice(index,1);
41340             this.el.removeClass(this.activeClass);
41341             return;
41342         }
41343         
41344         for(var i = 0; i < m.selectedBrick.length; i++) {
41345             var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
41346             b.el.removeClass(b.activeClass);
41347         }
41348         
41349         m.selectedBrick = [];
41350         
41351         m.selectedBrick.push(this.id);
41352         this.el.addClass(this.activeClass);
41353         return;
41354     },
41355     
41356     isSelected : function(){
41357         return this.el.hasClass(this.activeClass);
41358         
41359     }
41360 });
41361
41362 Roo.apply(Roo.bootstrap.MasonryBrick, {
41363     
41364     //groups: {},
41365     groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
41366      /**
41367     * register a Masonry Brick
41368     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
41369     */
41370     
41371     register : function(brick)
41372     {
41373         //this.groups[brick.id] = brick;
41374         this.groups.add(brick.id, brick);
41375     },
41376     /**
41377     * fetch a  masonry brick based on the masonry brick ID
41378     * @param {string} the masonry brick to add
41379     * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
41380     */
41381     
41382     get: function(brick_id) 
41383     {
41384         // if (typeof(this.groups[brick_id]) == 'undefined') {
41385         //     return false;
41386         // }
41387         // return this.groups[brick_id] ;
41388         
41389         if(this.groups.key(brick_id)) {
41390             return this.groups.key(brick_id);
41391         }
41392         
41393         return false;
41394     }
41395     
41396     
41397     
41398 });
41399
41400  /*
41401  * - LGPL
41402  *
41403  * element
41404  * 
41405  */
41406
41407 /**
41408  * @class Roo.bootstrap.Brick
41409  * @extends Roo.bootstrap.Component
41410  * Bootstrap Brick class
41411  * 
41412  * @constructor
41413  * Create a new Brick
41414  * @param {Object} config The config object
41415  */
41416
41417 Roo.bootstrap.Brick = function(config){
41418     Roo.bootstrap.Brick.superclass.constructor.call(this, config);
41419     
41420     this.addEvents({
41421         // raw events
41422         /**
41423          * @event click
41424          * When a Brick is click
41425          * @param {Roo.bootstrap.Brick} this
41426          * @param {Roo.EventObject} e
41427          */
41428         "click" : true
41429     });
41430 };
41431
41432 Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component,  {
41433     
41434     /**
41435      * @cfg {String} title
41436      */   
41437     title : '',
41438     /**
41439      * @cfg {String} html
41440      */   
41441     html : '',
41442     /**
41443      * @cfg {String} bgimage
41444      */   
41445     bgimage : '',
41446     /**
41447      * @cfg {String} cls
41448      */   
41449     cls : '',
41450     /**
41451      * @cfg {String} href
41452      */   
41453     href : '',
41454     /**
41455      * @cfg {String} video
41456      */   
41457     video : '',
41458     /**
41459      * @cfg {Boolean} square
41460      */   
41461     square : true,
41462     
41463     getAutoCreate : function()
41464     {
41465         var cls = 'roo-brick';
41466         
41467         if(this.href.length){
41468             cls += ' roo-brick-link';
41469         }
41470         
41471         if(this.bgimage.length){
41472             cls += ' roo-brick-image';
41473         }
41474         
41475         if(!this.html.length && !this.bgimage.length){
41476             cls += ' roo-brick-center-title';
41477         }
41478         
41479         if(!this.html.length && this.bgimage.length){
41480             cls += ' roo-brick-bottom-title';
41481         }
41482         
41483         if(this.cls){
41484             cls += ' ' + this.cls;
41485         }
41486         
41487         var cfg = {
41488             tag: (this.href.length) ? 'a' : 'div',
41489             cls: cls,
41490             cn: [
41491                 {
41492                     tag: 'div',
41493                     cls: 'roo-brick-paragraph',
41494                     cn: []
41495                 }
41496             ]
41497         };
41498         
41499         if(this.href.length){
41500             cfg.href = this.href;
41501         }
41502         
41503         var cn = cfg.cn[0].cn;
41504         
41505         if(this.title.length){
41506             cn.push({
41507                 tag: 'h4',
41508                 cls: 'roo-brick-title',
41509                 html: this.title
41510             });
41511         }
41512         
41513         if(this.html.length){
41514             cn.push({
41515                 tag: 'p',
41516                 cls: 'roo-brick-text',
41517                 html: this.html
41518             });
41519         } else {
41520             cn.cls += ' hide';
41521         }
41522         
41523         if(this.bgimage.length){
41524             cfg.cn.push({
41525                 tag: 'img',
41526                 cls: 'roo-brick-image-view',
41527                 src: this.bgimage
41528             });
41529         }
41530         
41531         return cfg;
41532     },
41533     
41534     initEvents: function() 
41535     {
41536         if(this.title.length || this.html.length){
41537             this.el.on('mouseenter'  ,this.enter, this);
41538             this.el.on('mouseleave', this.leave, this);
41539         }
41540         
41541         Roo.EventManager.onWindowResize(this.resize, this); 
41542         
41543         if(this.bgimage.length){
41544             this.imageEl = this.el.select('.roo-brick-image-view', true).first();
41545             this.imageEl.on('load', this.onImageLoad, this);
41546             return;
41547         }
41548         
41549         this.resize();
41550     },
41551     
41552     onImageLoad : function()
41553     {
41554         this.resize();
41555     },
41556     
41557     resize : function()
41558     {
41559         var paragraph = this.el.select('.roo-brick-paragraph', true).first();
41560         
41561         paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
41562         
41563         if(this.bgimage.length){
41564             var image = this.el.select('.roo-brick-image-view', true).first();
41565             
41566             image.setWidth(paragraph.getWidth());
41567             
41568             if(this.square){
41569                 image.setHeight(paragraph.getWidth());
41570             }
41571             
41572             this.el.setHeight(image.getHeight());
41573             paragraph.setHeight(image.getHeight());
41574             
41575         }
41576         
41577     },
41578     
41579     enter: function(e, el)
41580     {
41581         e.preventDefault();
41582         
41583         if(this.bgimage.length){
41584             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
41585             this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
41586         }
41587     },
41588     
41589     leave: function(e, el)
41590     {
41591         e.preventDefault();
41592         
41593         if(this.bgimage.length){
41594             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
41595             this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
41596         }
41597     }
41598     
41599 });
41600
41601  
41602
41603  /*
41604  * - LGPL
41605  *
41606  * Number field 
41607  */
41608
41609 /**
41610  * @class Roo.bootstrap.form.NumberField
41611  * @extends Roo.bootstrap.form.Input
41612  * Bootstrap NumberField class
41613  * 
41614  * 
41615  * 
41616  * 
41617  * @constructor
41618  * Create a new NumberField
41619  * @param {Object} config The config object
41620  */
41621
41622 Roo.bootstrap.form.NumberField = function(config){
41623     Roo.bootstrap.form.NumberField.superclass.constructor.call(this, config);
41624 };
41625
41626 Roo.extend(Roo.bootstrap.form.NumberField, Roo.bootstrap.form.Input, {
41627     
41628     /**
41629      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
41630      */
41631     allowDecimals : true,
41632     /**
41633      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
41634      */
41635     decimalSeparator : ".",
41636     /**
41637      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
41638      */
41639     decimalPrecision : 2,
41640     /**
41641      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
41642      */
41643     allowNegative : true,
41644     
41645     /**
41646      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
41647      */
41648     allowZero: true,
41649     /**
41650      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
41651      */
41652     minValue : Number.NEGATIVE_INFINITY,
41653     /**
41654      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
41655      */
41656     maxValue : Number.MAX_VALUE,
41657     /**
41658      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
41659      */
41660     minText : "The minimum value for this field is {0}",
41661     /**
41662      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
41663      */
41664     maxText : "The maximum value for this field is {0}",
41665     /**
41666      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
41667      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
41668      */
41669     nanText : "{0} is not a valid number",
41670     /**
41671      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
41672      */
41673     thousandsDelimiter : false,
41674     /**
41675      * @cfg {String} valueAlign alignment of value
41676      */
41677     valueAlign : "left",
41678
41679     getAutoCreate : function()
41680     {
41681         var hiddenInput = {
41682             tag: 'input',
41683             type: 'hidden',
41684             id: Roo.id(),
41685             cls: 'hidden-number-input'
41686         };
41687         
41688         if (this.name) {
41689             hiddenInput.name = this.name;
41690         }
41691         
41692         this.name = '';
41693         
41694         var cfg = Roo.bootstrap.form.NumberField.superclass.getAutoCreate.call(this);
41695         
41696         this.name = hiddenInput.name;
41697         
41698         if(cfg.cn.length > 0) {
41699             cfg.cn.push(hiddenInput);
41700         }
41701         
41702         return cfg;
41703     },
41704
41705     // private
41706     initEvents : function()
41707     {   
41708         Roo.bootstrap.form.NumberField.superclass.initEvents.call(this);
41709         
41710         var allowed = "0123456789";
41711         
41712         if(this.allowDecimals){
41713             allowed += this.decimalSeparator;
41714         }
41715         
41716         if(this.allowNegative){
41717             allowed += "-";
41718         }
41719         
41720         if(this.thousandsDelimiter) {
41721             allowed += ",";
41722         }
41723         
41724         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
41725         
41726         var keyPress = function(e){
41727             
41728             var k = e.getKey();
41729             
41730             var c = e.getCharCode();
41731             
41732             if(
41733                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
41734                     allowed.indexOf(String.fromCharCode(c)) === -1
41735             ){
41736                 e.stopEvent();
41737                 return;
41738             }
41739             
41740             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
41741                 return;
41742             }
41743             
41744             if(allowed.indexOf(String.fromCharCode(c)) === -1){
41745                 e.stopEvent();
41746             }
41747         };
41748         
41749         this.el.on("keypress", keyPress, this);
41750     },
41751     
41752     validateValue : function(value)
41753     {
41754         
41755         if(!Roo.bootstrap.form.NumberField.superclass.validateValue.call(this, value)){
41756             return false;
41757         }
41758         
41759         var num = this.parseValue(value);
41760         
41761         if(isNaN(num)){
41762             this.markInvalid(String.format(this.nanText, value));
41763             return false;
41764         }
41765         
41766         if(num < this.minValue){
41767             this.markInvalid(String.format(this.minText, this.minValue));
41768             return false;
41769         }
41770         
41771         if(num > this.maxValue){
41772             this.markInvalid(String.format(this.maxText, this.maxValue));
41773             return false;
41774         }
41775         
41776         return true;
41777     },
41778
41779     getValue : function()
41780     {
41781         var v = this.hiddenEl().getValue();
41782         
41783         return this.fixPrecision(this.parseValue(v));
41784     },
41785
41786     parseValue : function(value)
41787     {
41788         if(this.thousandsDelimiter) {
41789             value += "";
41790             r = new RegExp(",", "g");
41791             value = value.replace(r, "");
41792         }
41793         
41794         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
41795         return isNaN(value) ? '' : value;
41796     },
41797
41798     fixPrecision : function(value)
41799     {
41800         if(this.thousandsDelimiter) {
41801             value += "";
41802             r = new RegExp(",", "g");
41803             value = value.replace(r, "");
41804         }
41805         
41806         var nan = isNaN(value);
41807         
41808         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
41809             return nan ? '' : value;
41810         }
41811         return parseFloat(value).toFixed(this.decimalPrecision);
41812     },
41813
41814     setValue : function(v)
41815     {
41816         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
41817         
41818         this.value = v;
41819         
41820         if(this.rendered){
41821             
41822             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
41823             
41824             this.inputEl().dom.value = (v == '') ? '' :
41825                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
41826             
41827             if(!this.allowZero && v === '0') {
41828                 this.hiddenEl().dom.value = '';
41829                 this.inputEl().dom.value = '';
41830             }
41831             
41832             this.validate();
41833         }
41834     },
41835
41836     decimalPrecisionFcn : function(v)
41837     {
41838         return Math.floor(v);
41839     },
41840
41841     beforeBlur : function()
41842     {
41843         var v = this.parseValue(this.getRawValue());
41844         
41845         if(v || v === 0 || v === ''){
41846             this.setValue(v);
41847         }
41848     },
41849     
41850     hiddenEl : function()
41851     {
41852         return this.el.select('input.hidden-number-input',true).first();
41853     }
41854     
41855 });
41856
41857  
41858
41859 /*
41860 * Licence: LGPL
41861 */
41862
41863 /**
41864  * @class Roo.bootstrap.DocumentSlider
41865  * @extends Roo.bootstrap.Component
41866  * Bootstrap DocumentSlider class
41867  * 
41868  * @constructor
41869  * Create a new DocumentViewer
41870  * @param {Object} config The config object
41871  */
41872
41873 Roo.bootstrap.DocumentSlider = function(config){
41874     Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
41875     
41876     this.files = [];
41877     
41878     this.addEvents({
41879         /**
41880          * @event initial
41881          * Fire after initEvent
41882          * @param {Roo.bootstrap.DocumentSlider} this
41883          */
41884         "initial" : true,
41885         /**
41886          * @event update
41887          * Fire after update
41888          * @param {Roo.bootstrap.DocumentSlider} this
41889          */
41890         "update" : true,
41891         /**
41892          * @event click
41893          * Fire after click
41894          * @param {Roo.bootstrap.DocumentSlider} this
41895          */
41896         "click" : true
41897     });
41898 };
41899
41900 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
41901     
41902     files : false,
41903     
41904     indicator : 0,
41905     
41906     getAutoCreate : function()
41907     {
41908         var cfg = {
41909             tag : 'div',
41910             cls : 'roo-document-slider',
41911             cn : [
41912                 {
41913                     tag : 'div',
41914                     cls : 'roo-document-slider-header',
41915                     cn : [
41916                         {
41917                             tag : 'div',
41918                             cls : 'roo-document-slider-header-title'
41919                         }
41920                     ]
41921                 },
41922                 {
41923                     tag : 'div',
41924                     cls : 'roo-document-slider-body',
41925                     cn : [
41926                         {
41927                             tag : 'div',
41928                             cls : 'roo-document-slider-prev',
41929                             cn : [
41930                                 {
41931                                     tag : 'i',
41932                                     cls : 'fa fa-chevron-left'
41933                                 }
41934                             ]
41935                         },
41936                         {
41937                             tag : 'div',
41938                             cls : 'roo-document-slider-thumb',
41939                             cn : [
41940                                 {
41941                                     tag : 'img',
41942                                     cls : 'roo-document-slider-image'
41943                                 }
41944                             ]
41945                         },
41946                         {
41947                             tag : 'div',
41948                             cls : 'roo-document-slider-next',
41949                             cn : [
41950                                 {
41951                                     tag : 'i',
41952                                     cls : 'fa fa-chevron-right'
41953                                 }
41954                             ]
41955                         }
41956                     ]
41957                 }
41958             ]
41959         };
41960         
41961         return cfg;
41962     },
41963     
41964     initEvents : function()
41965     {
41966         this.headerEl = this.el.select('.roo-document-slider-header', true).first();
41967         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
41968         
41969         this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
41970         this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
41971         
41972         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
41973         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
41974         
41975         this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
41976         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
41977         
41978         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
41979         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
41980         
41981         this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
41982         this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
41983         
41984         this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
41985         this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
41986         
41987         this.thumbEl.on('click', this.onClick, this);
41988         
41989         this.prevIndicator.on('click', this.prev, this);
41990         
41991         this.nextIndicator.on('click', this.next, this);
41992         
41993     },
41994     
41995     initial : function()
41996     {
41997         if(this.files.length){
41998             this.indicator = 1;
41999             this.update()
42000         }
42001         
42002         this.fireEvent('initial', this);
42003     },
42004     
42005     update : function()
42006     {
42007         this.imageEl.attr('src', this.files[this.indicator - 1]);
42008         
42009         this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
42010         
42011         this.prevIndicator.show();
42012         
42013         if(this.indicator == 1){
42014             this.prevIndicator.hide();
42015         }
42016         
42017         this.nextIndicator.show();
42018         
42019         if(this.indicator == this.files.length){
42020             this.nextIndicator.hide();
42021         }
42022         
42023         this.thumbEl.scrollTo('top');
42024         
42025         this.fireEvent('update', this);
42026     },
42027     
42028     onClick : function(e)
42029     {
42030         e.preventDefault();
42031         
42032         this.fireEvent('click', this);
42033     },
42034     
42035     prev : function(e)
42036     {
42037         e.preventDefault();
42038         
42039         this.indicator = Math.max(1, this.indicator - 1);
42040         
42041         this.update();
42042     },
42043     
42044     next : function(e)
42045     {
42046         e.preventDefault();
42047         
42048         this.indicator = Math.min(this.files.length, this.indicator + 1);
42049         
42050         this.update();
42051     }
42052 });
42053 /*
42054  * - LGPL
42055  *
42056  * RadioSet
42057  *
42058  *
42059  */
42060
42061 /**
42062  * @class Roo.bootstrap.form.RadioSet
42063  * @extends Roo.bootstrap.form.Input
42064  * @children Roo.bootstrap.form.Radio
42065  * Bootstrap RadioSet class
42066  * @cfg {String} indicatorpos (left|right) default left
42067  * @cfg {Boolean} inline (true|false) inline the element (default true)
42068  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
42069  * @constructor
42070  * Create a new RadioSet
42071  * @param {Object} config The config object
42072  */
42073
42074 Roo.bootstrap.form.RadioSet = function(config){
42075     
42076     Roo.bootstrap.form.RadioSet.superclass.constructor.call(this, config);
42077     
42078     this.radioes = [];
42079     
42080     Roo.bootstrap.form.RadioSet.register(this);
42081     
42082     this.addEvents({
42083         /**
42084         * @event check
42085         * Fires when the element is checked or unchecked.
42086         * @param {Roo.bootstrap.form.RadioSet} this This radio
42087         * @param {Roo.bootstrap.form.Radio} item The checked item
42088         */
42089        check : true,
42090        /**
42091         * @event click
42092         * Fires when the element is click.
42093         * @param {Roo.bootstrap.form.RadioSet} this This radio set
42094         * @param {Roo.bootstrap.form.Radio} item The checked item
42095         * @param {Roo.EventObject} e The event object
42096         */
42097        click : true
42098     });
42099     
42100 };
42101
42102 Roo.extend(Roo.bootstrap.form.RadioSet, Roo.bootstrap.form.Input,  {
42103
42104     radioes : false,
42105     
42106     inline : true,
42107     
42108     weight : '',
42109     
42110     indicatorpos : 'left',
42111     
42112     getAutoCreate : function()
42113     {
42114         var label = {
42115             tag : 'label',
42116             cls : 'roo-radio-set-label',
42117             cn : [
42118                 {
42119                     tag : 'span',
42120                     html : this.fieldLabel
42121                 }
42122             ]
42123         };
42124         if (Roo.bootstrap.version == 3) {
42125             
42126             
42127             if(this.indicatorpos == 'left'){
42128                 label.cn.unshift({
42129                     tag : 'i',
42130                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
42131                     tooltip : 'This field is required'
42132                 });
42133             } else {
42134                 label.cn.push({
42135                     tag : 'i',
42136                     cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
42137                     tooltip : 'This field is required'
42138                 });
42139             }
42140         }
42141         var items = {
42142             tag : 'div',
42143             cls : 'roo-radio-set-items'
42144         };
42145         
42146         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
42147         
42148         if (align === 'left' && this.fieldLabel.length) {
42149             
42150             items = {
42151                 cls : "roo-radio-set-right", 
42152                 cn: [
42153                     items
42154                 ]
42155             };
42156             
42157             if(this.labelWidth > 12){
42158                 label.style = "width: " + this.labelWidth + 'px';
42159             }
42160             
42161             if(this.labelWidth < 13 && this.labelmd == 0){
42162                 this.labelmd = this.labelWidth;
42163             }
42164             
42165             if(this.labellg > 0){
42166                 label.cls += ' col-lg-' + this.labellg;
42167                 items.cls += ' col-lg-' + (12 - this.labellg);
42168             }
42169             
42170             if(this.labelmd > 0){
42171                 label.cls += ' col-md-' + this.labelmd;
42172                 items.cls += ' col-md-' + (12 - this.labelmd);
42173             }
42174             
42175             if(this.labelsm > 0){
42176                 label.cls += ' col-sm-' + this.labelsm;
42177                 items.cls += ' col-sm-' + (12 - this.labelsm);
42178             }
42179             
42180             if(this.labelxs > 0){
42181                 label.cls += ' col-xs-' + this.labelxs;
42182                 items.cls += ' col-xs-' + (12 - this.labelxs);
42183             }
42184         }
42185         
42186         var cfg = {
42187             tag : 'div',
42188             cls : 'roo-radio-set',
42189             cn : [
42190                 {
42191                     tag : 'input',
42192                     cls : 'roo-radio-set-input',
42193                     type : 'hidden',
42194                     name : this.name,
42195                     value : this.value ? this.value :  ''
42196                 },
42197                 label,
42198                 items
42199             ]
42200         };
42201         
42202         if(this.weight.length){
42203             cfg.cls += ' roo-radio-' + this.weight;
42204         }
42205         
42206         if(this.inline) {
42207             cfg.cls += ' roo-radio-set-inline';
42208         }
42209         
42210         var settings=this;
42211         ['xs','sm','md','lg'].map(function(size){
42212             if (settings[size]) {
42213                 cfg.cls += ' col-' + size + '-' + settings[size];
42214             }
42215         });
42216         
42217         return cfg;
42218         
42219     },
42220
42221     initEvents : function()
42222     {
42223         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
42224         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
42225         
42226         if(!this.fieldLabel.length){
42227             this.labelEl.hide();
42228         }
42229         
42230         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
42231         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
42232         
42233         this.indicator = this.indicatorEl();
42234         
42235         if(this.indicator){
42236             this.indicator.addClass('invisible');
42237         }
42238         
42239         this.originalValue = this.getValue();
42240         
42241     },
42242     
42243     inputEl: function ()
42244     {
42245         return this.el.select('.roo-radio-set-input', true).first();
42246     },
42247     
42248     getChildContainer : function()
42249     {
42250         return this.itemsEl;
42251     },
42252     
42253     register : function(item)
42254     {
42255         this.radioes.push(item);
42256         
42257     },
42258     
42259     validate : function()
42260     {   
42261         if(this.getVisibilityEl().hasClass('hidden')){
42262             return true;
42263         }
42264         
42265         var valid = false;
42266         
42267         Roo.each(this.radioes, function(i){
42268             if(!i.checked){
42269                 return;
42270             }
42271             
42272             valid = true;
42273             return false;
42274         });
42275         
42276         if(this.allowBlank) {
42277             return true;
42278         }
42279         
42280         if(this.disabled || valid){
42281             this.markValid();
42282             return true;
42283         }
42284         
42285         this.markInvalid();
42286         return false;
42287         
42288     },
42289     
42290     markValid : function()
42291     {
42292         if(this.labelEl.isVisible(true) && this.indicatorEl()){
42293             this.indicatorEl().removeClass('visible');
42294             this.indicatorEl().addClass('invisible');
42295         }
42296         
42297         
42298         if (Roo.bootstrap.version == 3) {
42299             this.el.removeClass([this.invalidClass, this.validClass]);
42300             this.el.addClass(this.validClass);
42301         } else {
42302             this.el.removeClass(['is-invalid','is-valid']);
42303             this.el.addClass(['is-valid']);
42304         }
42305         this.fireEvent('valid', this);
42306     },
42307     
42308     markInvalid : function(msg)
42309     {
42310         if(this.allowBlank || this.disabled){
42311             return;
42312         }
42313         
42314         if(this.labelEl.isVisible(true) && this.indicatorEl()){
42315             this.indicatorEl().removeClass('invisible');
42316             this.indicatorEl().addClass('visible');
42317         }
42318         if (Roo.bootstrap.version == 3) {
42319             this.el.removeClass([this.invalidClass, this.validClass]);
42320             this.el.addClass(this.invalidClass);
42321         } else {
42322             this.el.removeClass(['is-invalid','is-valid']);
42323             this.el.addClass(['is-invalid']);
42324         }
42325         
42326         this.fireEvent('invalid', this, msg);
42327         
42328     },
42329     
42330     setValue : function(v, suppressEvent)
42331     {   
42332         if(this.value === v){
42333             return;
42334         }
42335         
42336         this.value = v;
42337         
42338         if(this.rendered){
42339             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
42340         }
42341         
42342         Roo.each(this.radioes, function(i){
42343             i.checked = false;
42344             i.el.removeClass('checked');
42345         });
42346         
42347         Roo.each(this.radioes, function(i){
42348             
42349             if(i.value === v || i.value.toString() === v.toString()){
42350                 i.checked = true;
42351                 i.el.addClass('checked');
42352                 
42353                 if(suppressEvent !== true){
42354                     this.fireEvent('check', this, i);
42355                 }
42356                 
42357                 return false;
42358             }
42359             
42360         }, this);
42361         
42362         this.validate();
42363     },
42364     
42365     clearInvalid : function(){
42366         
42367         if(!this.el || this.preventMark){
42368             return;
42369         }
42370         
42371         this.el.removeClass([this.invalidClass]);
42372         
42373         this.fireEvent('valid', this);
42374     }
42375     
42376 });
42377
42378 Roo.apply(Roo.bootstrap.form.RadioSet, {
42379     
42380     groups: {},
42381     
42382     register : function(set)
42383     {
42384         this.groups[set.name] = set;
42385     },
42386     
42387     get: function(name) 
42388     {
42389         if (typeof(this.groups[name]) == 'undefined') {
42390             return false;
42391         }
42392         
42393         return this.groups[name] ;
42394     }
42395     
42396 });
42397 /*
42398  * Based on:
42399  * Ext JS Library 1.1.1
42400  * Copyright(c) 2006-2007, Ext JS, LLC.
42401  *
42402  * Originally Released Under LGPL - original licence link has changed is not relivant.
42403  *
42404  * Fork - LGPL
42405  * <script type="text/javascript">
42406  */
42407
42408
42409 /**
42410  * @class Roo.bootstrap.SplitBar
42411  * @extends Roo.util.Observable
42412  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
42413  * <br><br>
42414  * Usage:
42415  * <pre><code>
42416 var split = new Roo.bootstrap.SplitBar("elementToDrag", "elementToSize",
42417                    Roo.bootstrap.SplitBar.HORIZONTAL, Roo.bootstrap.SplitBar.LEFT);
42418 split.setAdapter(new Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter("container"));
42419 split.minSize = 100;
42420 split.maxSize = 600;
42421 split.animate = true;
42422 split.on('moved', splitterMoved);
42423 </code></pre>
42424  * @constructor
42425  * Create a new SplitBar
42426  * @config {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
42427  * @config {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
42428  * @config {Number} orientation (optional) Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
42429  * @config {Number} placement (optional) Either Roo.bootstrap.SplitBar.LEFT or Roo.bootstrap.SplitBar.RIGHT for horizontal or  
42430                         Roo.bootstrap.SplitBar.TOP or Roo.bootstrap.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
42431                         position of the SplitBar).
42432  */
42433 Roo.bootstrap.SplitBar = function(cfg){
42434     
42435     /** @private */
42436     
42437     //{
42438     //  dragElement : elm
42439     //  resizingElement: el,
42440         // optional..
42441     //    orientation : Either Roo.bootstrap.SplitBar.HORIZONTAL
42442     //    placement : Roo.bootstrap.SplitBar.LEFT  ,
42443         // existingProxy ???
42444     //}
42445     
42446     this.el = Roo.get(cfg.dragElement, true);
42447     this.el.dom.unselectable = "on";
42448     /** @private */
42449     this.resizingEl = Roo.get(cfg.resizingElement, true);
42450
42451     /**
42452      * @private
42453      * The orientation of the split. Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
42454      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
42455      * @type Number
42456      */
42457     this.orientation = cfg.orientation || Roo.bootstrap.SplitBar.HORIZONTAL;
42458     
42459     /**
42460      * The minimum size of the resizing element. (Defaults to 0)
42461      * @type Number
42462      */
42463     this.minSize = 0;
42464     
42465     /**
42466      * The maximum size of the resizing element. (Defaults to 2000)
42467      * @type Number
42468      */
42469     this.maxSize = 2000;
42470     
42471     /**
42472      * Whether to animate the transition to the new size
42473      * @type Boolean
42474      */
42475     this.animate = false;
42476     
42477     /**
42478      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
42479      * @type Boolean
42480      */
42481     this.useShim = false;
42482     
42483     /** @private */
42484     this.shim = null;
42485     
42486     if(!cfg.existingProxy){
42487         /** @private */
42488         this.proxy = Roo.bootstrap.SplitBar.createProxy(this.orientation);
42489     }else{
42490         this.proxy = Roo.get(cfg.existingProxy).dom;
42491     }
42492     /** @private */
42493     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
42494     
42495     /** @private */
42496     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
42497     
42498     /** @private */
42499     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
42500     
42501     /** @private */
42502     this.dragSpecs = {};
42503     
42504     /**
42505      * @private The adapter to use to positon and resize elements
42506      */
42507     this.adapter = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
42508     this.adapter.init(this);
42509     
42510     if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42511         /** @private */
42512         this.placement = cfg.placement || (this.el.getX() > this.resizingEl.getX() ? Roo.bootstrap.SplitBar.LEFT : Roo.bootstrap.SplitBar.RIGHT);
42513         this.el.addClass("roo-splitbar-h");
42514     }else{
42515         /** @private */
42516         this.placement = cfg.placement || (this.el.getY() > this.resizingEl.getY() ? Roo.bootstrap.SplitBar.TOP : Roo.bootstrap.SplitBar.BOTTOM);
42517         this.el.addClass("roo-splitbar-v");
42518     }
42519     
42520     this.addEvents({
42521         /**
42522          * @event resize
42523          * Fires when the splitter is moved (alias for {@link #event-moved})
42524          * @param {Roo.bootstrap.SplitBar} this
42525          * @param {Number} newSize the new width or height
42526          */
42527         "resize" : true,
42528         /**
42529          * @event moved
42530          * Fires when the splitter is moved
42531          * @param {Roo.bootstrap.SplitBar} this
42532          * @param {Number} newSize the new width or height
42533          */
42534         "moved" : true,
42535         /**
42536          * @event beforeresize
42537          * Fires before the splitter is dragged
42538          * @param {Roo.bootstrap.SplitBar} this
42539          */
42540         "beforeresize" : true,
42541
42542         "beforeapply" : true
42543     });
42544
42545     Roo.util.Observable.call(this);
42546 };
42547
42548 Roo.extend(Roo.bootstrap.SplitBar, Roo.util.Observable, {
42549     onStartProxyDrag : function(x, y){
42550         this.fireEvent("beforeresize", this);
42551         if(!this.overlay){
42552             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "roo-drag-overlay", html: "&#160;"}, true);
42553             o.unselectable();
42554             o.enableDisplayMode("block");
42555             // all splitbars share the same overlay
42556             Roo.bootstrap.SplitBar.prototype.overlay = o;
42557         }
42558         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
42559         this.overlay.show();
42560         Roo.get(this.proxy).setDisplayed("block");
42561         var size = this.adapter.getElementSize(this);
42562         this.activeMinSize = this.getMinimumSize();;
42563         this.activeMaxSize = this.getMaximumSize();;
42564         var c1 = size - this.activeMinSize;
42565         var c2 = Math.max(this.activeMaxSize - size, 0);
42566         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42567             this.dd.resetConstraints();
42568             this.dd.setXConstraint(
42569                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c1 : c2, 
42570                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c2 : c1
42571             );
42572             this.dd.setYConstraint(0, 0);
42573         }else{
42574             this.dd.resetConstraints();
42575             this.dd.setXConstraint(0, 0);
42576             this.dd.setYConstraint(
42577                 this.placement == Roo.bootstrap.SplitBar.TOP ? c1 : c2, 
42578                 this.placement == Roo.bootstrap.SplitBar.TOP ? c2 : c1
42579             );
42580          }
42581         this.dragSpecs.startSize = size;
42582         this.dragSpecs.startPoint = [x, y];
42583         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
42584     },
42585     
42586     /** 
42587      * @private Called after the drag operation by the DDProxy
42588      */
42589     onEndProxyDrag : function(e){
42590         Roo.get(this.proxy).setDisplayed(false);
42591         var endPoint = Roo.lib.Event.getXY(e);
42592         if(this.overlay){
42593             this.overlay.hide();
42594         }
42595         var newSize;
42596         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42597             newSize = this.dragSpecs.startSize + 
42598                 (this.placement == Roo.bootstrap.SplitBar.LEFT ?
42599                     endPoint[0] - this.dragSpecs.startPoint[0] :
42600                     this.dragSpecs.startPoint[0] - endPoint[0]
42601                 );
42602         }else{
42603             newSize = this.dragSpecs.startSize + 
42604                 (this.placement == Roo.bootstrap.SplitBar.TOP ?
42605                     endPoint[1] - this.dragSpecs.startPoint[1] :
42606                     this.dragSpecs.startPoint[1] - endPoint[1]
42607                 );
42608         }
42609         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
42610         if(newSize != this.dragSpecs.startSize){
42611             if(this.fireEvent('beforeapply', this, newSize) !== false){
42612                 this.adapter.setElementSize(this, newSize);
42613                 this.fireEvent("moved", this, newSize);
42614                 this.fireEvent("resize", this, newSize);
42615             }
42616         }
42617     },
42618     
42619     /**
42620      * Get the adapter this SplitBar uses
42621      * @return The adapter object
42622      */
42623     getAdapter : function(){
42624         return this.adapter;
42625     },
42626     
42627     /**
42628      * Set the adapter this SplitBar uses
42629      * @param {Object} adapter A SplitBar adapter object
42630      */
42631     setAdapter : function(adapter){
42632         this.adapter = adapter;
42633         this.adapter.init(this);
42634     },
42635     
42636     /**
42637      * Gets the minimum size for the resizing element
42638      * @return {Number} The minimum size
42639      */
42640     getMinimumSize : function(){
42641         return this.minSize;
42642     },
42643     
42644     /**
42645      * Sets the minimum size for the resizing element
42646      * @param {Number} minSize The minimum size
42647      */
42648     setMinimumSize : function(minSize){
42649         this.minSize = minSize;
42650     },
42651     
42652     /**
42653      * Gets the maximum size for the resizing element
42654      * @return {Number} The maximum size
42655      */
42656     getMaximumSize : function(){
42657         return this.maxSize;
42658     },
42659     
42660     /**
42661      * Sets the maximum size for the resizing element
42662      * @param {Number} maxSize The maximum size
42663      */
42664     setMaximumSize : function(maxSize){
42665         this.maxSize = maxSize;
42666     },
42667     
42668     /**
42669      * Sets the initialize size for the resizing element
42670      * @param {Number} size The initial size
42671      */
42672     setCurrentSize : function(size){
42673         var oldAnimate = this.animate;
42674         this.animate = false;
42675         this.adapter.setElementSize(this, size);
42676         this.animate = oldAnimate;
42677     },
42678     
42679     /**
42680      * Destroy this splitbar. 
42681      * @param {Boolean} removeEl True to remove the element
42682      */
42683     destroy : function(removeEl){
42684         if(this.shim){
42685             this.shim.remove();
42686         }
42687         this.dd.unreg();
42688         this.proxy.parentNode.removeChild(this.proxy);
42689         if(removeEl){
42690             this.el.remove();
42691         }
42692     }
42693 });
42694
42695 /**
42696  * @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.
42697  */
42698 Roo.bootstrap.SplitBar.createProxy = function(dir){
42699     var proxy = new Roo.Element(document.createElement("div"));
42700     proxy.unselectable();
42701     var cls = 'roo-splitbar-proxy';
42702     proxy.addClass(cls + ' ' + (dir == Roo.bootstrap.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
42703     document.body.appendChild(proxy.dom);
42704     return proxy.dom;
42705 };
42706
42707 /** 
42708  * @class Roo.bootstrap.SplitBar.BasicLayoutAdapter
42709  * Default Adapter. It assumes the splitter and resizing element are not positioned
42710  * elements and only gets/sets the width of the element. Generally used for table based layouts.
42711  */
42712 Roo.bootstrap.SplitBar.BasicLayoutAdapter = function(){
42713 };
42714
42715 Roo.bootstrap.SplitBar.BasicLayoutAdapter.prototype = {
42716     // do nothing for now
42717     init : function(s){
42718     
42719     },
42720     /**
42721      * Called before drag operations to get the current size of the resizing element. 
42722      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
42723      */
42724      getElementSize : function(s){
42725         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42726             return s.resizingEl.getWidth();
42727         }else{
42728             return s.resizingEl.getHeight();
42729         }
42730     },
42731     
42732     /**
42733      * Called after drag operations to set the size of the resizing element.
42734      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
42735      * @param {Number} newSize The new size to set
42736      * @param {Function} onComplete A function to be invoked when resizing is complete
42737      */
42738     setElementSize : function(s, newSize, onComplete){
42739         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42740             if(!s.animate){
42741                 s.resizingEl.setWidth(newSize);
42742                 if(onComplete){
42743                     onComplete(s, newSize);
42744                 }
42745             }else{
42746                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
42747             }
42748         }else{
42749             
42750             if(!s.animate){
42751                 s.resizingEl.setHeight(newSize);
42752                 if(onComplete){
42753                     onComplete(s, newSize);
42754                 }
42755             }else{
42756                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
42757             }
42758         }
42759     }
42760 };
42761
42762 /** 
42763  *@class Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter
42764  * @extends Roo.bootstrap.SplitBar.BasicLayoutAdapter
42765  * Adapter that  moves the splitter element to align with the resized sizing element. 
42766  * Used with an absolute positioned SplitBar.
42767  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
42768  * document.body, make sure you assign an id to the body element.
42769  */
42770 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter = function(container){
42771     this.basic = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
42772     this.container = Roo.get(container);
42773 };
42774
42775 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter.prototype = {
42776     init : function(s){
42777         this.basic.init(s);
42778     },
42779     
42780     getElementSize : function(s){
42781         return this.basic.getElementSize(s);
42782     },
42783     
42784     setElementSize : function(s, newSize, onComplete){
42785         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
42786     },
42787     
42788     moveSplitter : function(s){
42789         var yes = Roo.bootstrap.SplitBar;
42790         switch(s.placement){
42791             case yes.LEFT:
42792                 s.el.setX(s.resizingEl.getRight());
42793                 break;
42794             case yes.RIGHT:
42795                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
42796                 break;
42797             case yes.TOP:
42798                 s.el.setY(s.resizingEl.getBottom());
42799                 break;
42800             case yes.BOTTOM:
42801                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
42802                 break;
42803         }
42804     }
42805 };
42806
42807 /**
42808  * Orientation constant - Create a vertical SplitBar
42809  * @static
42810  * @type Number
42811  */
42812 Roo.bootstrap.SplitBar.VERTICAL = 1;
42813
42814 /**
42815  * Orientation constant - Create a horizontal SplitBar
42816  * @static
42817  * @type Number
42818  */
42819 Roo.bootstrap.SplitBar.HORIZONTAL = 2;
42820
42821 /**
42822  * Placement constant - The resizing element is to the left of the splitter element
42823  * @static
42824  * @type Number
42825  */
42826 Roo.bootstrap.SplitBar.LEFT = 1;
42827
42828 /**
42829  * Placement constant - The resizing element is to the right of the splitter element
42830  * @static
42831  * @type Number
42832  */
42833 Roo.bootstrap.SplitBar.RIGHT = 2;
42834
42835 /**
42836  * Placement constant - The resizing element is positioned above the splitter element
42837  * @static
42838  * @type Number
42839  */
42840 Roo.bootstrap.SplitBar.TOP = 3;
42841
42842 /**
42843  * Placement constant - The resizing element is positioned under splitter element
42844  * @static
42845  * @type Number
42846  */
42847 Roo.bootstrap.SplitBar.BOTTOM = 4;
42848 /*
42849  * Based on:
42850  * Ext JS Library 1.1.1
42851  * Copyright(c) 2006-2007, Ext JS, LLC.
42852  *
42853  * Originally Released Under LGPL - original licence link has changed is not relivant.
42854  *
42855  * Fork - LGPL
42856  * <script type="text/javascript">
42857  */
42858
42859 /**
42860  * @class Roo.bootstrap.layout.Manager
42861  * @extends Roo.bootstrap.Component
42862  * @abstract
42863  * Base class for layout managers.
42864  */
42865 Roo.bootstrap.layout.Manager = function(config)
42866 {
42867     this.monitorWindowResize = true; // do this before we apply configuration.
42868     
42869     Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config);
42870
42871
42872
42873
42874
42875     /** false to disable window resize monitoring @type Boolean */
42876     
42877     this.regions = {};
42878     this.addEvents({
42879         /**
42880          * @event layout
42881          * Fires when a layout is performed.
42882          * @param {Roo.LayoutManager} this
42883          */
42884         "layout" : true,
42885         /**
42886          * @event regionresized
42887          * Fires when the user resizes a region.
42888          * @param {Roo.LayoutRegion} region The resized region
42889          * @param {Number} newSize The new size (width for east/west, height for north/south)
42890          */
42891         "regionresized" : true,
42892         /**
42893          * @event regioncollapsed
42894          * Fires when a region is collapsed.
42895          * @param {Roo.LayoutRegion} region The collapsed region
42896          */
42897         "regioncollapsed" : true,
42898         /**
42899          * @event regionexpanded
42900          * Fires when a region is expanded.
42901          * @param {Roo.LayoutRegion} region The expanded region
42902          */
42903         "regionexpanded" : true
42904     });
42905     this.updating = false;
42906
42907     if (config.el) {
42908         this.el = Roo.get(config.el);
42909         this.initEvents();
42910     }
42911
42912 };
42913
42914 Roo.extend(Roo.bootstrap.layout.Manager, Roo.bootstrap.Component, {
42915
42916
42917     regions : null,
42918
42919     monitorWindowResize : true,
42920
42921
42922     updating : false,
42923
42924
42925     onRender : function(ct, position)
42926     {
42927         if(!this.el){
42928             this.el = Roo.get(ct);
42929             this.initEvents();
42930         }
42931         //this.fireEvent('render',this);
42932     },
42933
42934
42935     initEvents: function()
42936     {
42937
42938
42939         // ie scrollbar fix
42940         if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
42941             document.body.scroll = "no";
42942         }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
42943             this.el.position('relative');
42944         }
42945         this.id = this.el.id;
42946         this.el.addClass("roo-layout-container");
42947         Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
42948         if(this.el.dom != document.body ) {
42949             this.el.on('resize', this.layout,this);
42950             this.el.on('show', this.layout,this);
42951         }
42952
42953     },
42954
42955     /**
42956      * Returns true if this layout is currently being updated
42957      * @return {Boolean}
42958      */
42959     isUpdating : function(){
42960         return this.updating;
42961     },
42962
42963     /**
42964      * Suspend the LayoutManager from doing auto-layouts while
42965      * making multiple add or remove calls
42966      */
42967     beginUpdate : function(){
42968         this.updating = true;
42969     },
42970
42971     /**
42972      * Restore auto-layouts and optionally disable the manager from performing a layout
42973      * @param {Boolean} noLayout true to disable a layout update
42974      */
42975     endUpdate : function(noLayout){
42976         this.updating = false;
42977         if(!noLayout){
42978             this.layout();
42979         }
42980     },
42981
42982     layout: function(){
42983         // abstract...
42984     },
42985
42986     onRegionResized : function(region, newSize){
42987         this.fireEvent("regionresized", region, newSize);
42988         this.layout();
42989     },
42990
42991     onRegionCollapsed : function(region){
42992         this.fireEvent("regioncollapsed", region);
42993     },
42994
42995     onRegionExpanded : function(region){
42996         this.fireEvent("regionexpanded", region);
42997     },
42998
42999     /**
43000      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
43001      * performs box-model adjustments.
43002      * @return {Object} The size as an object {width: (the width), height: (the height)}
43003      */
43004     getViewSize : function()
43005     {
43006         var size;
43007         if(this.el.dom != document.body){
43008             size = this.el.getSize();
43009         }else{
43010             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
43011         }
43012         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
43013         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
43014         return size;
43015     },
43016
43017     /**
43018      * Returns the Element this layout is bound to.
43019      * @return {Roo.Element}
43020      */
43021     getEl : function(){
43022         return this.el;
43023     },
43024
43025     /**
43026      * Returns the specified region.
43027      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
43028      * @return {Roo.LayoutRegion}
43029      */
43030     getRegion : function(target){
43031         return this.regions[target.toLowerCase()];
43032     },
43033
43034     onWindowResize : function(){
43035         if(this.monitorWindowResize){
43036             this.layout();
43037         }
43038     }
43039 });
43040 /*
43041  * Based on:
43042  * Ext JS Library 1.1.1
43043  * Copyright(c) 2006-2007, Ext JS, LLC.
43044  *
43045  * Originally Released Under LGPL - original licence link has changed is not relivant.
43046  *
43047  * Fork - LGPL
43048  * <script type="text/javascript">
43049  */
43050 /**
43051  * @class Roo.bootstrap.layout.Border
43052  * @extends Roo.bootstrap.layout.Manager
43053  * @children Roo.bootstrap.panel.Content Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Grid
43054  * @parent builder Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Nest Roo.bootstrap.Modal
43055  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
43056  * please see: examples/bootstrap/nested.html<br><br>
43057  
43058 <b>The container the layout is rendered into can be either the body element or any other element.
43059 If it is not the body element, the container needs to either be an absolute positioned element,
43060 or you will need to add "position:relative" to the css of the container.  You will also need to specify
43061 the container size if it is not the body element.</b>
43062
43063 * @constructor
43064 * Create a new Border
43065 * @param {Object} config Configuration options
43066  */
43067 Roo.bootstrap.layout.Border = function(config){
43068     config = config || {};
43069     Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
43070     
43071     
43072     
43073     Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
43074         if(config[region]){
43075             config[region].region = region;
43076             this.addRegion(config[region]);
43077         }
43078     },this);
43079     
43080 };
43081
43082 Roo.bootstrap.layout.Border.regions =  ["center", "north","south","east","west"];
43083
43084 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
43085     
43086         /**
43087          * @cfg {Roo.bootstrap.layout.Region} center region to go in center
43088          */
43089         /**
43090          * @cfg {Roo.bootstrap.layout.Region} west region to go in west
43091          */
43092         /**
43093          * @cfg {Roo.bootstrap.layout.Region} east region to go in east
43094          */
43095         /**
43096          * @cfg {Roo.bootstrap.layout.Region} south region to go in south
43097          */
43098         /**
43099          * @cfg {Roo.bootstrap.layout.Region} north region to go in north
43100          */
43101         
43102         
43103         
43104         
43105     parent : false, // this might point to a 'nest' or a ???
43106     
43107     /**
43108      * Creates and adds a new region if it doesn't already exist.
43109      * @param {String} target The target region key (north, south, east, west or center).
43110      * @param {Object} config The regions config object
43111      * @return {BorderLayoutRegion} The new region
43112      */
43113     addRegion : function(config)
43114     {
43115         if(!this.regions[config.region]){
43116             var r = this.factory(config);
43117             this.bindRegion(r);
43118         }
43119         return this.regions[config.region];
43120     },
43121
43122     // private (kinda)
43123     bindRegion : function(r){
43124         this.regions[r.config.region] = r;
43125         
43126         r.on("visibilitychange",    this.layout, this);
43127         r.on("paneladded",          this.layout, this);
43128         r.on("panelremoved",        this.layout, this);
43129         r.on("invalidated",         this.layout, this);
43130         r.on("resized",             this.onRegionResized, this);
43131         r.on("collapsed",           this.onRegionCollapsed, this);
43132         r.on("expanded",            this.onRegionExpanded, this);
43133     },
43134
43135     /**
43136      * Performs a layout update.
43137      */
43138     layout : function()
43139     {
43140         if(this.updating) {
43141             return;
43142         }
43143         
43144         // render all the rebions if they have not been done alreayd?
43145         Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
43146             if(this.regions[region] && !this.regions[region].bodyEl){
43147                 this.regions[region].onRender(this.el)
43148             }
43149         },this);
43150         
43151         var size = this.getViewSize();
43152         var w = size.width;
43153         var h = size.height;
43154         var centerW = w;
43155         var centerH = h;
43156         var centerY = 0;
43157         var centerX = 0;
43158         //var x = 0, y = 0;
43159
43160         var rs = this.regions;
43161         var north = rs["north"];
43162         var south = rs["south"]; 
43163         var west = rs["west"];
43164         var east = rs["east"];
43165         var center = rs["center"];
43166         //if(this.hideOnLayout){ // not supported anymore
43167             //c.el.setStyle("display", "none");
43168         //}
43169         if(north && north.isVisible()){
43170             var b = north.getBox();
43171             var m = north.getMargins();
43172             b.width = w - (m.left+m.right);
43173             b.x = m.left;
43174             b.y = m.top;
43175             centerY = b.height + b.y + m.bottom;
43176             centerH -= centerY;
43177             north.updateBox(this.safeBox(b));
43178         }
43179         if(south && south.isVisible()){
43180             var b = south.getBox();
43181             var m = south.getMargins();
43182             b.width = w - (m.left+m.right);
43183             b.x = m.left;
43184             var totalHeight = (b.height + m.top + m.bottom);
43185             b.y = h - totalHeight + m.top;
43186             centerH -= totalHeight;
43187             south.updateBox(this.safeBox(b));
43188         }
43189         if(west && west.isVisible()){
43190             var b = west.getBox();
43191             var m = west.getMargins();
43192             b.height = centerH - (m.top+m.bottom);
43193             b.x = m.left;
43194             b.y = centerY + m.top;
43195             var totalWidth = (b.width + m.left + m.right);
43196             centerX += totalWidth;
43197             centerW -= totalWidth;
43198             west.updateBox(this.safeBox(b));
43199         }
43200         if(east && east.isVisible()){
43201             var b = east.getBox();
43202             var m = east.getMargins();
43203             b.height = centerH - (m.top+m.bottom);
43204             var totalWidth = (b.width + m.left + m.right);
43205             b.x = w - totalWidth + m.left;
43206             b.y = centerY + m.top;
43207             centerW -= totalWidth;
43208             east.updateBox(this.safeBox(b));
43209         }
43210         if(center){
43211             var m = center.getMargins();
43212             var centerBox = {
43213                 x: centerX + m.left,
43214                 y: centerY + m.top,
43215                 width: centerW - (m.left+m.right),
43216                 height: centerH - (m.top+m.bottom)
43217             };
43218             //if(this.hideOnLayout){
43219                 //center.el.setStyle("display", "block");
43220             //}
43221             center.updateBox(this.safeBox(centerBox));
43222         }
43223         this.el.repaint();
43224         this.fireEvent("layout", this);
43225     },
43226
43227     // private
43228     safeBox : function(box){
43229         box.width = Math.max(0, box.width);
43230         box.height = Math.max(0, box.height);
43231         return box;
43232     },
43233
43234     /**
43235      * Adds a ContentPanel (or subclass) to this layout.
43236      * @param {String} target The target region key (north, south, east, west or center).
43237      * @param {Roo.ContentPanel} panel The panel to add
43238      * @return {Roo.ContentPanel} The added panel
43239      */
43240     add : function(target, panel){
43241          
43242         target = target.toLowerCase();
43243         return this.regions[target].add(panel);
43244     },
43245
43246     /**
43247      * Remove a ContentPanel (or subclass) to this layout.
43248      * @param {String} target The target region key (north, south, east, west or center).
43249      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
43250      * @return {Roo.ContentPanel} The removed panel
43251      */
43252     remove : function(target, panel){
43253         target = target.toLowerCase();
43254         return this.regions[target].remove(panel);
43255     },
43256
43257     /**
43258      * Searches all regions for a panel with the specified id
43259      * @param {String} panelId
43260      * @return {Roo.ContentPanel} The panel or null if it wasn't found
43261      */
43262     findPanel : function(panelId){
43263         var rs = this.regions;
43264         for(var target in rs){
43265             if(typeof rs[target] != "function"){
43266                 var p = rs[target].getPanel(panelId);
43267                 if(p){
43268                     return p;
43269                 }
43270             }
43271         }
43272         return null;
43273     },
43274
43275     /**
43276      * Searches all regions for a panel with the specified id and activates (shows) it.
43277      * @param {String/ContentPanel} panelId The panels id or the panel itself
43278      * @return {Roo.ContentPanel} The shown panel or null
43279      */
43280     showPanel : function(panelId) {
43281       var rs = this.regions;
43282       for(var target in rs){
43283          var r = rs[target];
43284          if(typeof r != "function"){
43285             if(r.hasPanel(panelId)){
43286                return r.showPanel(panelId);
43287             }
43288          }
43289       }
43290       return null;
43291    },
43292
43293    /**
43294      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
43295      * @param {Roo.state.Provider} provider (optional) An alternate state provider
43296      */
43297    /*
43298     restoreState : function(provider){
43299         if(!provider){
43300             provider = Roo.state.Manager;
43301         }
43302         var sm = new Roo.LayoutStateManager();
43303         sm.init(this, provider);
43304     },
43305 */
43306  
43307  
43308     /**
43309      * Adds a xtype elements to the layout.
43310      * <pre><code>
43311
43312 layout.addxtype({
43313        xtype : 'ContentPanel',
43314        region: 'west',
43315        items: [ .... ]
43316    }
43317 );
43318
43319 layout.addxtype({
43320         xtype : 'NestedLayoutPanel',
43321         region: 'west',
43322         layout: {
43323            center: { },
43324            west: { }   
43325         },
43326         items : [ ... list of content panels or nested layout panels.. ]
43327    }
43328 );
43329 </code></pre>
43330      * @param {Object} cfg Xtype definition of item to add.
43331      */
43332     addxtype : function(cfg)
43333     {
43334         // basically accepts a pannel...
43335         // can accept a layout region..!?!?
43336         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
43337         
43338         
43339         // theory?  children can only be panels??
43340         
43341         //if (!cfg.xtype.match(/Panel$/)) {
43342         //    return false;
43343         //}
43344         var ret = false;
43345         
43346         if (typeof(cfg.region) == 'undefined') {
43347             Roo.log("Failed to add Panel, region was not set");
43348             Roo.log(cfg);
43349             return false;
43350         }
43351         var region = cfg.region;
43352         delete cfg.region;
43353         
43354           
43355         var xitems = [];
43356         if (cfg.items) {
43357             xitems = cfg.items;
43358             delete cfg.items;
43359         }
43360         var nb = false;
43361         
43362         if ( region == 'center') {
43363             Roo.log("Center: " + cfg.title);
43364         }
43365         
43366         
43367         switch(cfg.xtype) 
43368         {
43369             case 'Content':  // ContentPanel (el, cfg)
43370             case 'Scroll':  // ContentPanel (el, cfg)
43371             case 'View': 
43372                 cfg.autoCreate = cfg.autoCreate || true;
43373                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43374                 //} else {
43375                 //    var el = this.el.createChild();
43376                 //    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
43377                 //}
43378                 
43379                 this.add(region, ret);
43380                 break;
43381             
43382             /*
43383             case 'TreePanel': // our new panel!
43384                 cfg.el = this.el.createChild();
43385                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
43386                 this.add(region, ret);
43387                 break;
43388             */
43389             
43390             case 'Nest': 
43391                 // create a new Layout (which is  a Border Layout...
43392                 
43393                 var clayout = cfg.layout;
43394                 clayout.el  = this.el.createChild();
43395                 clayout.items   = clayout.items  || [];
43396                 
43397                 delete cfg.layout;
43398                 
43399                 // replace this exitems with the clayout ones..
43400                 xitems = clayout.items;
43401                  
43402                 // force background off if it's in center...
43403                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
43404                     cfg.background = false;
43405                 }
43406                 cfg.layout  = new Roo.bootstrap.layout.Border(clayout);
43407                 
43408                 
43409                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43410                 //console.log('adding nested layout panel '  + cfg.toSource());
43411                 this.add(region, ret);
43412                 nb = {}; /// find first...
43413                 break;
43414             
43415             case 'Grid':
43416                 
43417                 // needs grid and region
43418                 
43419                 //var el = this.getRegion(region).el.createChild();
43420                 /*
43421                  *var el = this.el.createChild();
43422                 // create the grid first...
43423                 cfg.grid.container = el;
43424                 cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
43425                 */
43426                 
43427                 if (region == 'center' && this.active ) {
43428                     cfg.background = false;
43429                 }
43430                 
43431                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43432                 
43433                 this.add(region, ret);
43434                 /*
43435                 if (cfg.background) {
43436                     // render grid on panel activation (if panel background)
43437                     ret.on('activate', function(gp) {
43438                         if (!gp.grid.rendered) {
43439                     //        gp.grid.render(el);
43440                         }
43441                     });
43442                 } else {
43443                   //  cfg.grid.render(el);
43444                 }
43445                 */
43446                 break;
43447            
43448            
43449             case 'Border': // it can get called on it'self... - might need to check if this is fixed?
43450                 // it was the old xcomponent building that caused this before.
43451                 // espeically if border is the top element in the tree.
43452                 ret = this;
43453                 break; 
43454                 
43455                     
43456                 
43457                 
43458                 
43459             default:
43460                 /*
43461                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
43462                     
43463                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
43464                     this.add(region, ret);
43465                 } else {
43466                 */
43467                     Roo.log(cfg);
43468                     throw "Can not add '" + cfg.xtype + "' to Border";
43469                     return null;
43470              
43471                                 
43472              
43473         }
43474         this.beginUpdate();
43475         // add children..
43476         var region = '';
43477         var abn = {};
43478         Roo.each(xitems, function(i)  {
43479             region = nb && i.region ? i.region : false;
43480             
43481             var add = ret.addxtype(i);
43482            
43483             if (region) {
43484                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
43485                 if (!i.background) {
43486                     abn[region] = nb[region] ;
43487                 }
43488             }
43489             
43490         });
43491         this.endUpdate();
43492
43493         // make the last non-background panel active..
43494         //if (nb) { Roo.log(abn); }
43495         if (nb) {
43496             
43497             for(var r in abn) {
43498                 region = this.getRegion(r);
43499                 if (region) {
43500                     // tried using nb[r], but it does not work..
43501                      
43502                     region.showPanel(abn[r]);
43503                    
43504                 }
43505             }
43506         }
43507         return ret;
43508         
43509     },
43510     
43511     
43512 // private
43513     factory : function(cfg)
43514     {
43515         
43516         var validRegions = Roo.bootstrap.layout.Border.regions;
43517
43518         var target = cfg.region;
43519         cfg.mgr = this;
43520         
43521         var r = Roo.bootstrap.layout;
43522         Roo.log(target);
43523         switch(target){
43524             case "north":
43525                 return new r.North(cfg);
43526             case "south":
43527                 return new r.South(cfg);
43528             case "east":
43529                 return new r.East(cfg);
43530             case "west":
43531                 return new r.West(cfg);
43532             case "center":
43533                 return new r.Center(cfg);
43534         }
43535         throw 'Layout region "'+target+'" not supported.';
43536     }
43537     
43538     
43539 });
43540  /*
43541  * Based on:
43542  * Ext JS Library 1.1.1
43543  * Copyright(c) 2006-2007, Ext JS, LLC.
43544  *
43545  * Originally Released Under LGPL - original licence link has changed is not relivant.
43546  *
43547  * Fork - LGPL
43548  * <script type="text/javascript">
43549  */
43550  
43551 /**
43552  * @class Roo.bootstrap.layout.Basic
43553  * @extends Roo.util.Observable
43554  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
43555  * and does not have a titlebar, tabs or any other features. All it does is size and position 
43556  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
43557  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
43558  * @cfg {string}   region  the region that it inhabits..
43559  * @cfg {bool}   skipConfig skip config?
43560  * 
43561
43562  */
43563 Roo.bootstrap.layout.Basic = function(config){
43564     
43565     this.mgr = config.mgr;
43566     
43567     this.position = config.region;
43568     
43569     var skipConfig = config.skipConfig;
43570     
43571     this.events = {
43572         /**
43573          * @scope Roo.BasicLayoutRegion
43574          */
43575         
43576         /**
43577          * @event beforeremove
43578          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
43579          * @param {Roo.LayoutRegion} this
43580          * @param {Roo.ContentPanel} panel The panel
43581          * @param {Object} e The cancel event object
43582          */
43583         "beforeremove" : true,
43584         /**
43585          * @event invalidated
43586          * Fires when the layout for this region is changed.
43587          * @param {Roo.LayoutRegion} this
43588          */
43589         "invalidated" : true,
43590         /**
43591          * @event visibilitychange
43592          * Fires when this region is shown or hidden 
43593          * @param {Roo.LayoutRegion} this
43594          * @param {Boolean} visibility true or false
43595          */
43596         "visibilitychange" : true,
43597         /**
43598          * @event paneladded
43599          * Fires when a panel is added. 
43600          * @param {Roo.LayoutRegion} this
43601          * @param {Roo.ContentPanel} panel The panel
43602          */
43603         "paneladded" : true,
43604         /**
43605          * @event panelremoved
43606          * Fires when a panel is removed. 
43607          * @param {Roo.LayoutRegion} this
43608          * @param {Roo.ContentPanel} panel The panel
43609          */
43610         "panelremoved" : true,
43611         /**
43612          * @event beforecollapse
43613          * Fires when this region before collapse.
43614          * @param {Roo.LayoutRegion} this
43615          */
43616         "beforecollapse" : true,
43617         /**
43618          * @event collapsed
43619          * Fires when this region is collapsed.
43620          * @param {Roo.LayoutRegion} this
43621          */
43622         "collapsed" : true,
43623         /**
43624          * @event expanded
43625          * Fires when this region is expanded.
43626          * @param {Roo.LayoutRegion} this
43627          */
43628         "expanded" : true,
43629         /**
43630          * @event slideshow
43631          * Fires when this region is slid into view.
43632          * @param {Roo.LayoutRegion} this
43633          */
43634         "slideshow" : true,
43635         /**
43636          * @event slidehide
43637          * Fires when this region slides out of view. 
43638          * @param {Roo.LayoutRegion} this
43639          */
43640         "slidehide" : true,
43641         /**
43642          * @event panelactivated
43643          * Fires when a panel is activated. 
43644          * @param {Roo.LayoutRegion} this
43645          * @param {Roo.ContentPanel} panel The activated panel
43646          */
43647         "panelactivated" : true,
43648         /**
43649          * @event resized
43650          * Fires when the user resizes this region. 
43651          * @param {Roo.LayoutRegion} this
43652          * @param {Number} newSize The new size (width for east/west, height for north/south)
43653          */
43654         "resized" : true
43655     };
43656     /** A collection of panels in this region. @type Roo.util.MixedCollection */
43657     this.panels = new Roo.util.MixedCollection();
43658     this.panels.getKey = this.getPanelId.createDelegate(this);
43659     this.box = null;
43660     this.activePanel = null;
43661     // ensure listeners are added...
43662     
43663     if (config.listeners || config.events) {
43664         Roo.bootstrap.layout.Basic.superclass.constructor.call(this, {
43665             listeners : config.listeners || {},
43666             events : config.events || {}
43667         });
43668     }
43669     
43670     if(skipConfig !== true){
43671         this.applyConfig(config);
43672     }
43673 };
43674
43675 Roo.extend(Roo.bootstrap.layout.Basic, Roo.util.Observable,
43676 {
43677     getPanelId : function(p){
43678         return p.getId();
43679     },
43680     
43681     applyConfig : function(config){
43682         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
43683         this.config = config;
43684         
43685     },
43686     
43687     /**
43688      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
43689      * the width, for horizontal (north, south) the height.
43690      * @param {Number} newSize The new width or height
43691      */
43692     resizeTo : function(newSize){
43693         var el = this.el ? this.el :
43694                  (this.activePanel ? this.activePanel.getEl() : null);
43695         if(el){
43696             switch(this.position){
43697                 case "east":
43698                 case "west":
43699                     el.setWidth(newSize);
43700                     this.fireEvent("resized", this, newSize);
43701                 break;
43702                 case "north":
43703                 case "south":
43704                     el.setHeight(newSize);
43705                     this.fireEvent("resized", this, newSize);
43706                 break;                
43707             }
43708         }
43709     },
43710     
43711     getBox : function(){
43712         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
43713     },
43714     
43715     getMargins : function(){
43716         return this.margins;
43717     },
43718     
43719     updateBox : function(box){
43720         this.box = box;
43721         var el = this.activePanel.getEl();
43722         el.dom.style.left = box.x + "px";
43723         el.dom.style.top = box.y + "px";
43724         this.activePanel.setSize(box.width, box.height);
43725     },
43726     
43727     /**
43728      * Returns the container element for this region.
43729      * @return {Roo.Element}
43730      */
43731     getEl : function(){
43732         return this.activePanel;
43733     },
43734     
43735     /**
43736      * Returns true if this region is currently visible.
43737      * @return {Boolean}
43738      */
43739     isVisible : function(){
43740         return this.activePanel ? true : false;
43741     },
43742     
43743     setActivePanel : function(panel){
43744         panel = this.getPanel(panel);
43745         if(this.activePanel && this.activePanel != panel){
43746             this.activePanel.setActiveState(false);
43747             this.activePanel.getEl().setLeftTop(-10000,-10000);
43748         }
43749         this.activePanel = panel;
43750         panel.setActiveState(true);
43751         if(this.box){
43752             panel.setSize(this.box.width, this.box.height);
43753         }
43754         this.fireEvent("panelactivated", this, panel);
43755         this.fireEvent("invalidated");
43756     },
43757     
43758     /**
43759      * Show the specified panel.
43760      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
43761      * @return {Roo.ContentPanel} The shown panel or null
43762      */
43763     showPanel : function(panel){
43764         panel = this.getPanel(panel);
43765         if(panel){
43766             this.setActivePanel(panel);
43767         }
43768         return panel;
43769     },
43770     
43771     /**
43772      * Get the active panel for this region.
43773      * @return {Roo.ContentPanel} The active panel or null
43774      */
43775     getActivePanel : function(){
43776         return this.activePanel;
43777     },
43778     
43779     /**
43780      * Add the passed ContentPanel(s)
43781      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
43782      * @return {Roo.ContentPanel} The panel added (if only one was added)
43783      */
43784     add : function(panel){
43785         if(arguments.length > 1){
43786             for(var i = 0, len = arguments.length; i < len; i++) {
43787                 this.add(arguments[i]);
43788             }
43789             return null;
43790         }
43791         if(this.hasPanel(panel)){
43792             this.showPanel(panel);
43793             return panel;
43794         }
43795         var el = panel.getEl();
43796         if(el.dom.parentNode != this.mgr.el.dom){
43797             this.mgr.el.dom.appendChild(el.dom);
43798         }
43799         if(panel.setRegion){
43800             panel.setRegion(this);
43801         }
43802         this.panels.add(panel);
43803         el.setStyle("position", "absolute");
43804         if(!panel.background){
43805             this.setActivePanel(panel);
43806             if(this.config.initialSize && this.panels.getCount()==1){
43807                 this.resizeTo(this.config.initialSize);
43808             }
43809         }
43810         this.fireEvent("paneladded", this, panel);
43811         return panel;
43812     },
43813     
43814     /**
43815      * Returns true if the panel is in this region.
43816      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43817      * @return {Boolean}
43818      */
43819     hasPanel : function(panel){
43820         if(typeof panel == "object"){ // must be panel obj
43821             panel = panel.getId();
43822         }
43823         return this.getPanel(panel) ? true : false;
43824     },
43825     
43826     /**
43827      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
43828      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43829      * @param {Boolean} preservePanel Overrides the config preservePanel option
43830      * @return {Roo.ContentPanel} The panel that was removed
43831      */
43832     remove : function(panel, preservePanel){
43833         panel = this.getPanel(panel);
43834         if(!panel){
43835             return null;
43836         }
43837         var e = {};
43838         this.fireEvent("beforeremove", this, panel, e);
43839         if(e.cancel === true){
43840             return null;
43841         }
43842         var panelId = panel.getId();
43843         this.panels.removeKey(panelId);
43844         return panel;
43845     },
43846     
43847     /**
43848      * Returns the panel specified or null if it's not in this region.
43849      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43850      * @return {Roo.ContentPanel}
43851      */
43852     getPanel : function(id){
43853         if(typeof id == "object"){ // must be panel obj
43854             return id;
43855         }
43856         return this.panels.get(id);
43857     },
43858     
43859     /**
43860      * Returns this regions position (north/south/east/west/center).
43861      * @return {String} 
43862      */
43863     getPosition: function(){
43864         return this.position;    
43865     }
43866 });/*
43867  * Based on:
43868  * Ext JS Library 1.1.1
43869  * Copyright(c) 2006-2007, Ext JS, LLC.
43870  *
43871  * Originally Released Under LGPL - original licence link has changed is not relivant.
43872  *
43873  * Fork - LGPL
43874  * <script type="text/javascript">
43875  */
43876  
43877 /**
43878  * @class Roo.bootstrap.layout.Region
43879  * @extends Roo.bootstrap.layout.Basic
43880  * This class represents a region in a layout manager.
43881  
43882  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
43883  * @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})
43884  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
43885  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
43886  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
43887  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
43888  * @cfg {String}    title           The title for the region (overrides panel titles)
43889  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
43890  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
43891  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
43892  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
43893  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
43894  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
43895  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
43896  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
43897  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
43898  * @cfg {String}    overflow       (hidden|visible) if you have menus in the region, then you need to set this to visible.
43899
43900  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
43901  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
43902  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
43903  * @cfg {Number}    width           For East/West panels
43904  * @cfg {Number}    height          For North/South panels
43905  * @cfg {Boolean}   split           To show the splitter
43906  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
43907  * 
43908  * @cfg {string}   cls             Extra CSS classes to add to region
43909  * 
43910  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
43911  * @cfg {string}   region  the region that it inhabits..
43912  *
43913
43914  * @xxxcfg {Boolean}   collapsible     DISABLED False to disable collapsing (defaults to true)
43915  * @xxxcfg {Boolean}   collapsed       DISABLED True to set the initial display to collapsed (defaults to false)
43916
43917  * @xxxcfg {String}    collapsedTitle  DISABLED Optional string message to display in the collapsed block of a north or south region
43918  * @xxxxcfg {Boolean}   floatable       DISABLED False to disable floating (defaults to true)
43919  * @xxxxcfg {Boolean}   showPin         True to show a pin button NOT SUPPORTED YET
43920  */
43921 Roo.bootstrap.layout.Region = function(config)
43922 {
43923     this.applyConfig(config);
43924
43925     var mgr = config.mgr;
43926     var pos = config.region;
43927     config.skipConfig = true;
43928     Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
43929     
43930     if (mgr.el) {
43931         this.onRender(mgr.el);   
43932     }
43933      
43934     this.visible = true;
43935     this.collapsed = false;
43936     this.unrendered_panels = [];
43937 };
43938
43939 Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
43940
43941     position: '', // set by wrapper (eg. north/south etc..)
43942     unrendered_panels : null,  // unrendered panels.
43943     
43944     tabPosition : false,
43945     
43946     mgr: false, // points to 'Border'
43947     
43948     
43949     createBody : function(){
43950         /** This region's body element 
43951         * @type Roo.Element */
43952         this.bodyEl = this.el.createChild({
43953                 tag: "div",
43954                 cls: "roo-layout-panel-body tab-content" // bootstrap added...
43955         });
43956     },
43957
43958     onRender: function(ctr, pos)
43959     {
43960         var dh = Roo.DomHelper;
43961         /** This region's container element 
43962         * @type Roo.Element */
43963         this.el = dh.append(ctr.dom, {
43964                 tag: "div",
43965                 cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
43966             }, true);
43967         /** This region's title element 
43968         * @type Roo.Element */
43969     
43970         this.titleEl = dh.append(this.el.dom,  {
43971                 tag: "div",
43972                 unselectable: "on",
43973                 cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
43974                 children:[
43975                     {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
43976                     {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
43977                 ]
43978             }, true);
43979         
43980         this.titleEl.enableDisplayMode();
43981         /** This region's title text element 
43982         * @type HTMLElement */
43983         this.titleTextEl = this.titleEl.dom.firstChild;
43984         this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
43985         /*
43986         this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
43987         this.closeBtn.enableDisplayMode();
43988         this.closeBtn.on("click", this.closeClicked, this);
43989         this.closeBtn.hide();
43990     */
43991         this.createBody(this.config);
43992         if(this.config.hideWhenEmpty){
43993             this.hide();
43994             this.on("paneladded", this.validateVisibility, this);
43995             this.on("panelremoved", this.validateVisibility, this);
43996         }
43997         if(this.autoScroll){
43998             this.bodyEl.setStyle("overflow", "auto");
43999         }else{
44000             this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
44001         }
44002         //if(c.titlebar !== false){
44003             if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
44004                 this.titleEl.hide();
44005             }else{
44006                 this.titleEl.show();
44007                 if(this.config.title){
44008                     this.titleTextEl.innerHTML = this.config.title;
44009                 }
44010             }
44011         //}
44012         if(this.config.collapsed){
44013             this.collapse(true);
44014         }
44015         if(this.config.hidden){
44016             this.hide();
44017         }
44018         
44019         if (this.unrendered_panels && this.unrendered_panels.length) {
44020             for (var i =0;i< this.unrendered_panels.length; i++) {
44021                 this.add(this.unrendered_panels[i]);
44022             }
44023             this.unrendered_panels = null;
44024             
44025         }
44026         
44027     },
44028     
44029     applyConfig : function(c)
44030     {
44031         /*
44032          *if(c.collapsible && this.position != "center" && !this.collapsedEl){
44033             var dh = Roo.DomHelper;
44034             if(c.titlebar !== false){
44035                 this.collapseBtn = this.createTool(this.tools.dom, "roo-layout-collapse-"+this.position);
44036                 this.collapseBtn.on("click", this.collapse, this);
44037                 this.collapseBtn.enableDisplayMode();
44038                 /*
44039                 if(c.showPin === true || this.showPin){
44040                     this.stickBtn = this.createTool(this.tools.dom, "roo-layout-stick");
44041                     this.stickBtn.enableDisplayMode();
44042                     this.stickBtn.on("click", this.expand, this);
44043                     this.stickBtn.hide();
44044                 }
44045                 
44046             }
44047             */
44048             /** This region's collapsed element
44049             * @type Roo.Element */
44050             /*
44051              *
44052             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
44053                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
44054             ]}, true);
44055             
44056             if(c.floatable !== false){
44057                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
44058                this.collapsedEl.on("click", this.collapseClick, this);
44059             }
44060
44061             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
44062                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
44063                    id: "message", unselectable: "on", style:{"float":"left"}});
44064                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
44065              }
44066             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
44067             this.expandBtn.on("click", this.expand, this);
44068             
44069         }
44070         
44071         if(this.collapseBtn){
44072             this.collapseBtn.setVisible(c.collapsible == true);
44073         }
44074         
44075         this.cmargins = c.cmargins || this.cmargins ||
44076                          (this.position == "west" || this.position == "east" ?
44077                              {top: 0, left: 2, right:2, bottom: 0} :
44078                              {top: 2, left: 0, right:0, bottom: 2});
44079         */
44080         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
44081         
44082         
44083         this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
44084         
44085         this.autoScroll = c.autoScroll || false;
44086         
44087         
44088        
44089         
44090         this.duration = c.duration || .30;
44091         this.slideDuration = c.slideDuration || .45;
44092         this.config = c;
44093        
44094     },
44095     /**
44096      * Returns true if this region is currently visible.
44097      * @return {Boolean}
44098      */
44099     isVisible : function(){
44100         return this.visible;
44101     },
44102
44103     /**
44104      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
44105      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
44106      */
44107     //setCollapsedTitle : function(title){
44108     //    title = title || "&#160;";
44109      //   if(this.collapsedTitleTextEl){
44110       //      this.collapsedTitleTextEl.innerHTML = title;
44111        // }
44112     //},
44113
44114     getBox : function(){
44115         var b;
44116       //  if(!this.collapsed){
44117             b = this.el.getBox(false, true);
44118        // }else{
44119           //  b = this.collapsedEl.getBox(false, true);
44120         //}
44121         return b;
44122     },
44123
44124     getMargins : function(){
44125         return this.margins;
44126         //return this.collapsed ? this.cmargins : this.margins;
44127     },
44128 /*
44129     highlight : function(){
44130         this.el.addClass("x-layout-panel-dragover");
44131     },
44132
44133     unhighlight : function(){
44134         this.el.removeClass("x-layout-panel-dragover");
44135     },
44136 */
44137     updateBox : function(box)
44138     {
44139         if (!this.bodyEl) {
44140             return; // not rendered yet..
44141         }
44142         
44143         this.box = box;
44144         if(!this.collapsed){
44145             this.el.dom.style.left = box.x + "px";
44146             this.el.dom.style.top = box.y + "px";
44147             this.updateBody(box.width, box.height);
44148         }else{
44149             this.collapsedEl.dom.style.left = box.x + "px";
44150             this.collapsedEl.dom.style.top = box.y + "px";
44151             this.collapsedEl.setSize(box.width, box.height);
44152         }
44153         if(this.tabs){
44154             this.tabs.autoSizeTabs();
44155         }
44156     },
44157
44158     updateBody : function(w, h)
44159     {
44160         if(w !== null){
44161             this.el.setWidth(w);
44162             w -= this.el.getBorderWidth("rl");
44163             if(this.config.adjustments){
44164                 w += this.config.adjustments[0];
44165             }
44166         }
44167         if(h !== null && h > 0){
44168             this.el.setHeight(h);
44169             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
44170             h -= this.el.getBorderWidth("tb");
44171             if(this.config.adjustments){
44172                 h += this.config.adjustments[1];
44173             }
44174             this.bodyEl.setHeight(h);
44175             if(this.tabs){
44176                 h = this.tabs.syncHeight(h);
44177             }
44178         }
44179         if(this.panelSize){
44180             w = w !== null ? w : this.panelSize.width;
44181             h = h !== null ? h : this.panelSize.height;
44182         }
44183         if(this.activePanel){
44184             var el = this.activePanel.getEl();
44185             w = w !== null ? w : el.getWidth();
44186             h = h !== null ? h : el.getHeight();
44187             this.panelSize = {width: w, height: h};
44188             this.activePanel.setSize(w, h);
44189         }
44190         if(Roo.isIE && this.tabs){
44191             this.tabs.el.repaint();
44192         }
44193     },
44194
44195     /**
44196      * Returns the container element for this region.
44197      * @return {Roo.Element}
44198      */
44199     getEl : function(){
44200         return this.el;
44201     },
44202
44203     /**
44204      * Hides this region.
44205      */
44206     hide : function(){
44207         //if(!this.collapsed){
44208             this.el.dom.style.left = "-2000px";
44209             this.el.hide();
44210         //}else{
44211          //   this.collapsedEl.dom.style.left = "-2000px";
44212          //   this.collapsedEl.hide();
44213        // }
44214         this.visible = false;
44215         this.fireEvent("visibilitychange", this, false);
44216     },
44217
44218     /**
44219      * Shows this region if it was previously hidden.
44220      */
44221     show : function(){
44222         //if(!this.collapsed){
44223             this.el.show();
44224         //}else{
44225         //    this.collapsedEl.show();
44226        // }
44227         this.visible = true;
44228         this.fireEvent("visibilitychange", this, true);
44229     },
44230 /*
44231     closeClicked : function(){
44232         if(this.activePanel){
44233             this.remove(this.activePanel);
44234         }
44235     },
44236
44237     collapseClick : function(e){
44238         if(this.isSlid){
44239            e.stopPropagation();
44240            this.slideIn();
44241         }else{
44242            e.stopPropagation();
44243            this.slideOut();
44244         }
44245     },
44246 */
44247     /**
44248      * Collapses this region.
44249      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
44250      */
44251     /*
44252     collapse : function(skipAnim, skipCheck = false){
44253         if(this.collapsed) {
44254             return;
44255         }
44256         
44257         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
44258             
44259             this.collapsed = true;
44260             if(this.split){
44261                 this.split.el.hide();
44262             }
44263             if(this.config.animate && skipAnim !== true){
44264                 this.fireEvent("invalidated", this);
44265                 this.animateCollapse();
44266             }else{
44267                 this.el.setLocation(-20000,-20000);
44268                 this.el.hide();
44269                 this.collapsedEl.show();
44270                 this.fireEvent("collapsed", this);
44271                 this.fireEvent("invalidated", this);
44272             }
44273         }
44274         
44275     },
44276 */
44277     animateCollapse : function(){
44278         // overridden
44279     },
44280
44281     /**
44282      * Expands this region if it was previously collapsed.
44283      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
44284      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
44285      */
44286     /*
44287     expand : function(e, skipAnim){
44288         if(e) {
44289             e.stopPropagation();
44290         }
44291         if(!this.collapsed || this.el.hasActiveFx()) {
44292             return;
44293         }
44294         if(this.isSlid){
44295             this.afterSlideIn();
44296             skipAnim = true;
44297         }
44298         this.collapsed = false;
44299         if(this.config.animate && skipAnim !== true){
44300             this.animateExpand();
44301         }else{
44302             this.el.show();
44303             if(this.split){
44304                 this.split.el.show();
44305             }
44306             this.collapsedEl.setLocation(-2000,-2000);
44307             this.collapsedEl.hide();
44308             this.fireEvent("invalidated", this);
44309             this.fireEvent("expanded", this);
44310         }
44311     },
44312 */
44313     animateExpand : function(){
44314         // overridden
44315     },
44316
44317     initTabs : function()
44318     {
44319         //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
44320         
44321         var ts = new Roo.bootstrap.panel.Tabs({
44322             el: this.bodyEl.dom,
44323             region : this,
44324             tabPosition: this.tabPosition ? this.tabPosition  : 'top',
44325             disableTooltips: this.config.disableTabTips,
44326             toolbar : this.config.toolbar
44327         });
44328         
44329         if(this.config.hideTabs){
44330             ts.stripWrap.setDisplayed(false);
44331         }
44332         this.tabs = ts;
44333         ts.resizeTabs = this.config.resizeTabs === true;
44334         ts.minTabWidth = this.config.minTabWidth || 40;
44335         ts.maxTabWidth = this.config.maxTabWidth || 250;
44336         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
44337         ts.monitorResize = false;
44338         //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
44339         ts.bodyEl.addClass('roo-layout-tabs-body');
44340         this.panels.each(this.initPanelAsTab, this);
44341     },
44342
44343     initPanelAsTab : function(panel){
44344         var ti = this.tabs.addTab(
44345             panel.getEl().id,
44346             panel.getTitle(),
44347             null,
44348             this.config.closeOnTab && panel.isClosable(),
44349             panel.tpl
44350         );
44351         if(panel.tabTip !== undefined){
44352             ti.setTooltip(panel.tabTip);
44353         }
44354         ti.on("activate", function(){
44355               this.setActivePanel(panel);
44356         }, this);
44357         
44358         if(this.config.closeOnTab){
44359             ti.on("beforeclose", function(t, e){
44360                 e.cancel = true;
44361                 this.remove(panel);
44362             }, this);
44363         }
44364         
44365         panel.tabItem = ti;
44366         
44367         return ti;
44368     },
44369
44370     updatePanelTitle : function(panel, title)
44371     {
44372         if(this.activePanel == panel){
44373             this.updateTitle(title);
44374         }
44375         if(this.tabs){
44376             var ti = this.tabs.getTab(panel.getEl().id);
44377             ti.setText(title);
44378             if(panel.tabTip !== undefined){
44379                 ti.setTooltip(panel.tabTip);
44380             }
44381         }
44382     },
44383
44384     updateTitle : function(title){
44385         if(this.titleTextEl && !this.config.title){
44386             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
44387         }
44388     },
44389
44390     setActivePanel : function(panel)
44391     {
44392         panel = this.getPanel(panel);
44393         if(this.activePanel && this.activePanel != panel){
44394             if(this.activePanel.setActiveState(false) === false){
44395                 return;
44396             }
44397         }
44398         this.activePanel = panel;
44399         panel.setActiveState(true);
44400         if(this.panelSize){
44401             panel.setSize(this.panelSize.width, this.panelSize.height);
44402         }
44403         if(this.closeBtn){
44404             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
44405         }
44406         this.updateTitle(panel.getTitle());
44407         if(this.tabs){
44408             this.fireEvent("invalidated", this);
44409         }
44410         this.fireEvent("panelactivated", this, panel);
44411     },
44412
44413     /**
44414      * Shows the specified panel.
44415      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
44416      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
44417      */
44418     showPanel : function(panel)
44419     {
44420         panel = this.getPanel(panel);
44421         if(panel){
44422             if(this.tabs){
44423                 var tab = this.tabs.getTab(panel.getEl().id);
44424                 if(tab.isHidden()){
44425                     this.tabs.unhideTab(tab.id);
44426                 }
44427                 tab.activate();
44428             }else{
44429                 this.setActivePanel(panel);
44430             }
44431         }
44432         return panel;
44433     },
44434
44435     /**
44436      * Get the active panel for this region.
44437      * @return {Roo.ContentPanel} The active panel or null
44438      */
44439     getActivePanel : function(){
44440         return this.activePanel;
44441     },
44442
44443     validateVisibility : function(){
44444         if(this.panels.getCount() < 1){
44445             this.updateTitle("&#160;");
44446             this.closeBtn.hide();
44447             this.hide();
44448         }else{
44449             if(!this.isVisible()){
44450                 this.show();
44451             }
44452         }
44453     },
44454
44455     /**
44456      * Adds the passed ContentPanel(s) to this region.
44457      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
44458      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
44459      */
44460     add : function(panel)
44461     {
44462         if(arguments.length > 1){
44463             for(var i = 0, len = arguments.length; i < len; i++) {
44464                 this.add(arguments[i]);
44465             }
44466             return null;
44467         }
44468         
44469         // if we have not been rendered yet, then we can not really do much of this..
44470         if (!this.bodyEl) {
44471             this.unrendered_panels.push(panel);
44472             return panel;
44473         }
44474         
44475         
44476         
44477         
44478         if(this.hasPanel(panel)){
44479             this.showPanel(panel);
44480             return panel;
44481         }
44482         panel.setRegion(this);
44483         this.panels.add(panel);
44484        /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
44485             // sinle panel - no tab...?? would it not be better to render it with the tabs,
44486             // and hide them... ???
44487             this.bodyEl.dom.appendChild(panel.getEl().dom);
44488             if(panel.background !== true){
44489                 this.setActivePanel(panel);
44490             }
44491             this.fireEvent("paneladded", this, panel);
44492             return panel;
44493         }
44494         */
44495         if(!this.tabs){
44496             this.initTabs();
44497         }else{
44498             this.initPanelAsTab(panel);
44499         }
44500         
44501         
44502         if(panel.background !== true){
44503             this.tabs.activate(panel.getEl().id);
44504         }
44505         this.fireEvent("paneladded", this, panel);
44506         return panel;
44507     },
44508
44509     /**
44510      * Hides the tab for the specified panel.
44511      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44512      */
44513     hidePanel : function(panel){
44514         if(this.tabs && (panel = this.getPanel(panel))){
44515             this.tabs.hideTab(panel.getEl().id);
44516         }
44517     },
44518
44519     /**
44520      * Unhides the tab for a previously hidden panel.
44521      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44522      */
44523     unhidePanel : function(panel){
44524         if(this.tabs && (panel = this.getPanel(panel))){
44525             this.tabs.unhideTab(panel.getEl().id);
44526         }
44527     },
44528
44529     clearPanels : function(){
44530         while(this.panels.getCount() > 0){
44531              this.remove(this.panels.first());
44532         }
44533     },
44534
44535     /**
44536      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
44537      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44538      * @param {Boolean} preservePanel Overrides the config preservePanel option
44539      * @return {Roo.ContentPanel} The panel that was removed
44540      */
44541     remove : function(panel, preservePanel)
44542     {
44543         panel = this.getPanel(panel);
44544         if(!panel){
44545             return null;
44546         }
44547         var e = {};
44548         this.fireEvent("beforeremove", this, panel, e);
44549         if(e.cancel === true){
44550             return null;
44551         }
44552         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
44553         var panelId = panel.getId();
44554         this.panels.removeKey(panelId);
44555         if(preservePanel){
44556             document.body.appendChild(panel.getEl().dom);
44557         }
44558         if(this.tabs){
44559             this.tabs.removeTab(panel.getEl().id);
44560         }else if (!preservePanel){
44561             this.bodyEl.dom.removeChild(panel.getEl().dom);
44562         }
44563         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
44564             var p = this.panels.first();
44565             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
44566             tempEl.appendChild(p.getEl().dom);
44567             this.bodyEl.update("");
44568             this.bodyEl.dom.appendChild(p.getEl().dom);
44569             tempEl = null;
44570             this.updateTitle(p.getTitle());
44571             this.tabs = null;
44572             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
44573             this.setActivePanel(p);
44574         }
44575         panel.setRegion(null);
44576         if(this.activePanel == panel){
44577             this.activePanel = null;
44578         }
44579         if(this.config.autoDestroy !== false && preservePanel !== true){
44580             try{panel.destroy();}catch(e){}
44581         }
44582         this.fireEvent("panelremoved", this, panel);
44583         return panel;
44584     },
44585
44586     /**
44587      * Returns the TabPanel component used by this region
44588      * @return {Roo.TabPanel}
44589      */
44590     getTabs : function(){
44591         return this.tabs;
44592     },
44593
44594     createTool : function(parentEl, className){
44595         var btn = Roo.DomHelper.append(parentEl, {
44596             tag: "div",
44597             cls: "x-layout-tools-button",
44598             children: [ {
44599                 tag: "div",
44600                 cls: "roo-layout-tools-button-inner " + className,
44601                 html: "&#160;"
44602             }]
44603         }, true);
44604         btn.addClassOnOver("roo-layout-tools-button-over");
44605         return btn;
44606     }
44607 });/*
44608  * Based on:
44609  * Ext JS Library 1.1.1
44610  * Copyright(c) 2006-2007, Ext JS, LLC.
44611  *
44612  * Originally Released Under LGPL - original licence link has changed is not relivant.
44613  *
44614  * Fork - LGPL
44615  * <script type="text/javascript">
44616  */
44617  
44618
44619
44620 /**
44621  * @class Roo.SplitLayoutRegion
44622  * @extends Roo.LayoutRegion
44623  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
44624  */
44625 Roo.bootstrap.layout.Split = function(config){
44626     this.cursor = config.cursor;
44627     Roo.bootstrap.layout.Split.superclass.constructor.call(this, config);
44628 };
44629
44630 Roo.extend(Roo.bootstrap.layout.Split, Roo.bootstrap.layout.Region,
44631 {
44632     splitTip : "Drag to resize.",
44633     collapsibleSplitTip : "Drag to resize. Double click to hide.",
44634     useSplitTips : false,
44635
44636     applyConfig : function(config){
44637         Roo.bootstrap.layout.Split.superclass.applyConfig.call(this, config);
44638     },
44639     
44640     onRender : function(ctr,pos) {
44641         
44642         Roo.bootstrap.layout.Split.superclass.onRender.call(this, ctr,pos);
44643         if(!this.config.split){
44644             return;
44645         }
44646         if(!this.split){
44647             
44648             var splitEl = Roo.DomHelper.append(ctr.dom,  {
44649                             tag: "div",
44650                             id: this.el.id + "-split",
44651                             cls: "roo-layout-split roo-layout-split-"+this.position,
44652                             html: "&#160;"
44653             });
44654             /** The SplitBar for this region 
44655             * @type Roo.SplitBar */
44656             // does not exist yet...
44657             Roo.log([this.position, this.orientation]);
44658             
44659             this.split = new Roo.bootstrap.SplitBar({
44660                 dragElement : splitEl,
44661                 resizingElement: this.el,
44662                 orientation : this.orientation
44663             });
44664             
44665             this.split.on("moved", this.onSplitMove, this);
44666             this.split.useShim = this.config.useShim === true;
44667             this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
44668             if(this.useSplitTips){
44669                 this.split.el.dom.title = this.config.collapsible ? this.collapsibleSplitTip : this.splitTip;
44670             }
44671             //if(config.collapsible){
44672             //    this.split.el.on("dblclick", this.collapse,  this);
44673             //}
44674         }
44675         if(typeof this.config.minSize != "undefined"){
44676             this.split.minSize = this.config.minSize;
44677         }
44678         if(typeof this.config.maxSize != "undefined"){
44679             this.split.maxSize = this.config.maxSize;
44680         }
44681         if(this.config.hideWhenEmpty || this.config.hidden || this.config.collapsed){
44682             this.hideSplitter();
44683         }
44684         
44685     },
44686
44687     getHMaxSize : function(){
44688          var cmax = this.config.maxSize || 10000;
44689          var center = this.mgr.getRegion("center");
44690          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
44691     },
44692
44693     getVMaxSize : function(){
44694          var cmax = this.config.maxSize || 10000;
44695          var center = this.mgr.getRegion("center");
44696          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
44697     },
44698
44699     onSplitMove : function(split, newSize){
44700         this.fireEvent("resized", this, newSize);
44701     },
44702     
44703     /** 
44704      * Returns the {@link Roo.SplitBar} for this region.
44705      * @return {Roo.SplitBar}
44706      */
44707     getSplitBar : function(){
44708         return this.split;
44709     },
44710     
44711     hide : function(){
44712         this.hideSplitter();
44713         Roo.bootstrap.layout.Split.superclass.hide.call(this);
44714     },
44715
44716     hideSplitter : function(){
44717         if(this.split){
44718             this.split.el.setLocation(-2000,-2000);
44719             this.split.el.hide();
44720         }
44721     },
44722
44723     show : function(){
44724         if(this.split){
44725             this.split.el.show();
44726         }
44727         Roo.bootstrap.layout.Split.superclass.show.call(this);
44728     },
44729     
44730     beforeSlide: function(){
44731         if(Roo.isGecko){// firefox overflow auto bug workaround
44732             this.bodyEl.clip();
44733             if(this.tabs) {
44734                 this.tabs.bodyEl.clip();
44735             }
44736             if(this.activePanel){
44737                 this.activePanel.getEl().clip();
44738                 
44739                 if(this.activePanel.beforeSlide){
44740                     this.activePanel.beforeSlide();
44741                 }
44742             }
44743         }
44744     },
44745     
44746     afterSlide : function(){
44747         if(Roo.isGecko){// firefox overflow auto bug workaround
44748             this.bodyEl.unclip();
44749             if(this.tabs) {
44750                 this.tabs.bodyEl.unclip();
44751             }
44752             if(this.activePanel){
44753                 this.activePanel.getEl().unclip();
44754                 if(this.activePanel.afterSlide){
44755                     this.activePanel.afterSlide();
44756                 }
44757             }
44758         }
44759     },
44760
44761     initAutoHide : function(){
44762         if(this.autoHide !== false){
44763             if(!this.autoHideHd){
44764                 var st = new Roo.util.DelayedTask(this.slideIn, this);
44765                 this.autoHideHd = {
44766                     "mouseout": function(e){
44767                         if(!e.within(this.el, true)){
44768                             st.delay(500);
44769                         }
44770                     },
44771                     "mouseover" : function(e){
44772                         st.cancel();
44773                     },
44774                     scope : this
44775                 };
44776             }
44777             this.el.on(this.autoHideHd);
44778         }
44779     },
44780
44781     clearAutoHide : function(){
44782         if(this.autoHide !== false){
44783             this.el.un("mouseout", this.autoHideHd.mouseout);
44784             this.el.un("mouseover", this.autoHideHd.mouseover);
44785         }
44786     },
44787
44788     clearMonitor : function(){
44789         Roo.get(document).un("click", this.slideInIf, this);
44790     },
44791
44792     // these names are backwards but not changed for compat
44793     slideOut : function(){
44794         if(this.isSlid || this.el.hasActiveFx()){
44795             return;
44796         }
44797         this.isSlid = true;
44798         if(this.collapseBtn){
44799             this.collapseBtn.hide();
44800         }
44801         this.closeBtnState = this.closeBtn.getStyle('display');
44802         this.closeBtn.hide();
44803         if(this.stickBtn){
44804             this.stickBtn.show();
44805         }
44806         this.el.show();
44807         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
44808         this.beforeSlide();
44809         this.el.setStyle("z-index", 10001);
44810         this.el.slideIn(this.getSlideAnchor(), {
44811             callback: function(){
44812                 this.afterSlide();
44813                 this.initAutoHide();
44814                 Roo.get(document).on("click", this.slideInIf, this);
44815                 this.fireEvent("slideshow", this);
44816             },
44817             scope: this,
44818             block: true
44819         });
44820     },
44821
44822     afterSlideIn : function(){
44823         this.clearAutoHide();
44824         this.isSlid = false;
44825         this.clearMonitor();
44826         this.el.setStyle("z-index", "");
44827         if(this.collapseBtn){
44828             this.collapseBtn.show();
44829         }
44830         this.closeBtn.setStyle('display', this.closeBtnState);
44831         if(this.stickBtn){
44832             this.stickBtn.hide();
44833         }
44834         this.fireEvent("slidehide", this);
44835     },
44836
44837     slideIn : function(cb){
44838         if(!this.isSlid || this.el.hasActiveFx()){
44839             Roo.callback(cb);
44840             return;
44841         }
44842         this.isSlid = false;
44843         this.beforeSlide();
44844         this.el.slideOut(this.getSlideAnchor(), {
44845             callback: function(){
44846                 this.el.setLeftTop(-10000, -10000);
44847                 this.afterSlide();
44848                 this.afterSlideIn();
44849                 Roo.callback(cb);
44850             },
44851             scope: this,
44852             block: true
44853         });
44854     },
44855     
44856     slideInIf : function(e){
44857         if(!e.within(this.el)){
44858             this.slideIn();
44859         }
44860     },
44861
44862     animateCollapse : function(){
44863         this.beforeSlide();
44864         this.el.setStyle("z-index", 20000);
44865         var anchor = this.getSlideAnchor();
44866         this.el.slideOut(anchor, {
44867             callback : function(){
44868                 this.el.setStyle("z-index", "");
44869                 this.collapsedEl.slideIn(anchor, {duration:.3});
44870                 this.afterSlide();
44871                 this.el.setLocation(-10000,-10000);
44872                 this.el.hide();
44873                 this.fireEvent("collapsed", this);
44874             },
44875             scope: this,
44876             block: true
44877         });
44878     },
44879
44880     animateExpand : function(){
44881         this.beforeSlide();
44882         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
44883         this.el.setStyle("z-index", 20000);
44884         this.collapsedEl.hide({
44885             duration:.1
44886         });
44887         this.el.slideIn(this.getSlideAnchor(), {
44888             callback : function(){
44889                 this.el.setStyle("z-index", "");
44890                 this.afterSlide();
44891                 if(this.split){
44892                     this.split.el.show();
44893                 }
44894                 this.fireEvent("invalidated", this);
44895                 this.fireEvent("expanded", this);
44896             },
44897             scope: this,
44898             block: true
44899         });
44900     },
44901
44902     anchors : {
44903         "west" : "left",
44904         "east" : "right",
44905         "north" : "top",
44906         "south" : "bottom"
44907     },
44908
44909     sanchors : {
44910         "west" : "l",
44911         "east" : "r",
44912         "north" : "t",
44913         "south" : "b"
44914     },
44915
44916     canchors : {
44917         "west" : "tl-tr",
44918         "east" : "tr-tl",
44919         "north" : "tl-bl",
44920         "south" : "bl-tl"
44921     },
44922
44923     getAnchor : function(){
44924         return this.anchors[this.position];
44925     },
44926
44927     getCollapseAnchor : function(){
44928         return this.canchors[this.position];
44929     },
44930
44931     getSlideAnchor : function(){
44932         return this.sanchors[this.position];
44933     },
44934
44935     getAlignAdj : function(){
44936         var cm = this.cmargins;
44937         switch(this.position){
44938             case "west":
44939                 return [0, 0];
44940             break;
44941             case "east":
44942                 return [0, 0];
44943             break;
44944             case "north":
44945                 return [0, 0];
44946             break;
44947             case "south":
44948                 return [0, 0];
44949             break;
44950         }
44951     },
44952
44953     getExpandAdj : function(){
44954         var c = this.collapsedEl, cm = this.cmargins;
44955         switch(this.position){
44956             case "west":
44957                 return [-(cm.right+c.getWidth()+cm.left), 0];
44958             break;
44959             case "east":
44960                 return [cm.right+c.getWidth()+cm.left, 0];
44961             break;
44962             case "north":
44963                 return [0, -(cm.top+cm.bottom+c.getHeight())];
44964             break;
44965             case "south":
44966                 return [0, cm.top+cm.bottom+c.getHeight()];
44967             break;
44968         }
44969     }
44970 });/*
44971  * Based on:
44972  * Ext JS Library 1.1.1
44973  * Copyright(c) 2006-2007, Ext JS, LLC.
44974  *
44975  * Originally Released Under LGPL - original licence link has changed is not relivant.
44976  *
44977  * Fork - LGPL
44978  * <script type="text/javascript">
44979  */
44980 /*
44981  * These classes are private internal classes
44982  */
44983 Roo.bootstrap.layout.Center = function(config){
44984     config.region = "center";
44985     Roo.bootstrap.layout.Region.call(this, config);
44986     this.visible = true;
44987     this.minWidth = config.minWidth || 20;
44988     this.minHeight = config.minHeight || 20;
44989 };
44990
44991 Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
44992     hide : function(){
44993         // center panel can't be hidden
44994     },
44995     
44996     show : function(){
44997         // center panel can't be hidden
44998     },
44999     
45000     getMinWidth: function(){
45001         return this.minWidth;
45002     },
45003     
45004     getMinHeight: function(){
45005         return this.minHeight;
45006     }
45007 });
45008
45009
45010
45011
45012  
45013
45014
45015
45016
45017
45018
45019 Roo.bootstrap.layout.North = function(config)
45020 {
45021     config.region = 'north';
45022     config.cursor = 'n-resize';
45023     
45024     Roo.bootstrap.layout.Split.call(this, config);
45025     
45026     
45027     if(this.split){
45028         this.split.placement = Roo.bootstrap.SplitBar.TOP;
45029         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
45030         this.split.el.addClass("roo-layout-split-v");
45031     }
45032     //var size = config.initialSize || config.height;
45033     //if(this.el && typeof size != "undefined"){
45034     //    this.el.setHeight(size);
45035     //}
45036 };
45037 Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split,
45038 {
45039     orientation: Roo.bootstrap.SplitBar.VERTICAL,
45040      
45041      
45042     onRender : function(ctr, pos)
45043     {
45044         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
45045         var size = this.config.initialSize || this.config.height;
45046         if(this.el && typeof size != "undefined"){
45047             this.el.setHeight(size);
45048         }
45049     
45050     },
45051     
45052     getBox : function(){
45053         if(this.collapsed){
45054             return this.collapsedEl.getBox();
45055         }
45056         var box = this.el.getBox();
45057         if(this.split){
45058             box.height += this.split.el.getHeight();
45059         }
45060         return box;
45061     },
45062     
45063     updateBox : function(box){
45064         if(this.split && !this.collapsed){
45065             box.height -= this.split.el.getHeight();
45066             this.split.el.setLeft(box.x);
45067             this.split.el.setTop(box.y+box.height);
45068             this.split.el.setWidth(box.width);
45069         }
45070         if(this.collapsed){
45071             this.updateBody(box.width, null);
45072         }
45073         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
45074     }
45075 });
45076
45077
45078
45079
45080
45081 Roo.bootstrap.layout.South = function(config){
45082     config.region = 'south';
45083     config.cursor = 's-resize';
45084     Roo.bootstrap.layout.Split.call(this, config);
45085     if(this.split){
45086         this.split.placement = Roo.bootstrap.SplitBar.BOTTOM;
45087         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
45088         this.split.el.addClass("roo-layout-split-v");
45089     }
45090     
45091 };
45092
45093 Roo.extend(Roo.bootstrap.layout.South, Roo.bootstrap.layout.Split, {
45094     orientation: Roo.bootstrap.SplitBar.VERTICAL,
45095     
45096     onRender : function(ctr, pos)
45097     {
45098         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
45099         var size = this.config.initialSize || this.config.height;
45100         if(this.el && typeof size != "undefined"){
45101             this.el.setHeight(size);
45102         }
45103     
45104     },
45105     
45106     getBox : function(){
45107         if(this.collapsed){
45108             return this.collapsedEl.getBox();
45109         }
45110         var box = this.el.getBox();
45111         if(this.split){
45112             var sh = this.split.el.getHeight();
45113             box.height += sh;
45114             box.y -= sh;
45115         }
45116         return box;
45117     },
45118     
45119     updateBox : function(box){
45120         if(this.split && !this.collapsed){
45121             var sh = this.split.el.getHeight();
45122             box.height -= sh;
45123             box.y += sh;
45124             this.split.el.setLeft(box.x);
45125             this.split.el.setTop(box.y-sh);
45126             this.split.el.setWidth(box.width);
45127         }
45128         if(this.collapsed){
45129             this.updateBody(box.width, null);
45130         }
45131         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
45132     }
45133 });
45134
45135 Roo.bootstrap.layout.East = function(config){
45136     config.region = "east";
45137     config.cursor = "e-resize";
45138     Roo.bootstrap.layout.Split.call(this, config);
45139     if(this.split){
45140         this.split.placement = Roo.bootstrap.SplitBar.RIGHT;
45141         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
45142         this.split.el.addClass("roo-layout-split-h");
45143     }
45144     
45145 };
45146 Roo.extend(Roo.bootstrap.layout.East, Roo.bootstrap.layout.Split, {
45147     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
45148     
45149     onRender : function(ctr, pos)
45150     {
45151         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
45152         var size = this.config.initialSize || this.config.width;
45153         if(this.el && typeof size != "undefined"){
45154             this.el.setWidth(size);
45155         }
45156     
45157     },
45158     
45159     getBox : function(){
45160         if(this.collapsed){
45161             return this.collapsedEl.getBox();
45162         }
45163         var box = this.el.getBox();
45164         if(this.split){
45165             var sw = this.split.el.getWidth();
45166             box.width += sw;
45167             box.x -= sw;
45168         }
45169         return box;
45170     },
45171
45172     updateBox : function(box){
45173         if(this.split && !this.collapsed){
45174             var sw = this.split.el.getWidth();
45175             box.width -= sw;
45176             this.split.el.setLeft(box.x);
45177             this.split.el.setTop(box.y);
45178             this.split.el.setHeight(box.height);
45179             box.x += sw;
45180         }
45181         if(this.collapsed){
45182             this.updateBody(null, box.height);
45183         }
45184         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
45185     }
45186 });
45187
45188 Roo.bootstrap.layout.West = function(config){
45189     config.region = "west";
45190     config.cursor = "w-resize";
45191     
45192     Roo.bootstrap.layout.Split.call(this, config);
45193     if(this.split){
45194         this.split.placement = Roo.bootstrap.SplitBar.LEFT;
45195         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
45196         this.split.el.addClass("roo-layout-split-h");
45197     }
45198     
45199 };
45200 Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
45201     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
45202     
45203     onRender: function(ctr, pos)
45204     {
45205         Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos);
45206         var size = this.config.initialSize || this.config.width;
45207         if(typeof size != "undefined"){
45208             this.el.setWidth(size);
45209         }
45210     },
45211     
45212     getBox : function(){
45213         if(this.collapsed){
45214             return this.collapsedEl.getBox();
45215         }
45216         var box = this.el.getBox();
45217         if (box.width == 0) {
45218             box.width = this.config.width; // kludge?
45219         }
45220         if(this.split){
45221             box.width += this.split.el.getWidth();
45222         }
45223         return box;
45224     },
45225     
45226     updateBox : function(box){
45227         if(this.split && !this.collapsed){
45228             var sw = this.split.el.getWidth();
45229             box.width -= sw;
45230             this.split.el.setLeft(box.x+box.width);
45231             this.split.el.setTop(box.y);
45232             this.split.el.setHeight(box.height);
45233         }
45234         if(this.collapsed){
45235             this.updateBody(null, box.height);
45236         }
45237         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
45238     }
45239 });/*
45240  * Based on:
45241  * Ext JS Library 1.1.1
45242  * Copyright(c) 2006-2007, Ext JS, LLC.
45243  *
45244  * Originally Released Under LGPL - original licence link has changed is not relivant.
45245  *
45246  * Fork - LGPL
45247  * <script type="text/javascript">
45248  */
45249 /**
45250  * @class Roo.bootstrap.paenl.Content
45251  * @extends Roo.util.Observable
45252  * @children Roo.bootstrap.Component
45253  * @parent builder Roo.bootstrap.layout.Border
45254  * A basic ContentPanel element. - a panel that contain any content (eg. forms etc.)
45255  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
45256  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
45257  * @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
45258  * @cfg {Boolean}   closable      True if the panel can be closed/removed
45259  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
45260  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
45261  * @cfg {Toolbar}   toolbar       A toolbar for this panel
45262  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
45263  * @cfg {String} title          The title for this panel
45264  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
45265  * @cfg {String} url            Calls {@link #setUrl} with this value
45266  * @cfg {String} region  [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
45267  * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
45268  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
45269  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
45270  * @cfg {Boolean} iframe      contents are an iframe - makes showing remote sources/CSS feasible..
45271  * @cfg {Boolean} badges render the badges
45272  * @cfg {String} cls  extra classes to use  
45273  * @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
45274  
45275  * @constructor
45276  * Create a new ContentPanel.
45277  * @param {String/Object} config A string to set only the title or a config object
45278  
45279  */
45280 Roo.bootstrap.panel.Content = function( config){
45281     
45282     this.tpl = config.tpl || false;
45283     
45284     var el = config.el;
45285     var content = config.content;
45286
45287     if(config.autoCreate){ // xtype is available if this is called from factory
45288         el = Roo.id();
45289     }
45290     this.el = Roo.get(el);
45291     if(!this.el && config && config.autoCreate){
45292         if(typeof config.autoCreate == "object"){
45293             if(!config.autoCreate.id){
45294                 config.autoCreate.id = config.id||el;
45295             }
45296             this.el = Roo.DomHelper.append(document.body,
45297                         config.autoCreate, true);
45298         }else{
45299             var elcfg =  {
45300                 tag: "div",
45301                 cls: (config.cls || '') +
45302                     (config.background ? ' bg-' + config.background : '') +
45303                     " roo-layout-inactive-content",
45304                 id: config.id||el
45305             };
45306             if (config.iframe) {
45307                 elcfg.cn = [
45308                     {
45309                         tag : 'iframe',
45310                         style : 'border: 0px',
45311                         src : 'about:blank'
45312                     }
45313                 ];
45314             }
45315               
45316             if (config.html) {
45317                 elcfg.html = config.html;
45318                 
45319             }
45320                         
45321             this.el = Roo.DomHelper.append(document.body, elcfg , true);
45322             if (config.iframe) {
45323                 this.iframeEl = this.el.select('iframe',true).first();
45324             }
45325             
45326         }
45327     } 
45328     this.closable = false;
45329     this.loaded = false;
45330     this.active = false;
45331    
45332       
45333     if (config.toolbar && !config.toolbar.el && config.toolbar.xtype) {
45334         
45335         this.toolbar = new config.toolbar.xns[config.toolbar.xtype](config.toolbar);
45336         
45337         this.wrapEl = this.el; //this.el.wrap();
45338         var ti = [];
45339         if (config.toolbar.items) {
45340             ti = config.toolbar.items ;
45341             delete config.toolbar.items ;
45342         }
45343         
45344         var nitems = [];
45345         this.toolbar.render(this.wrapEl, 'before');
45346         for(var i =0;i < ti.length;i++) {
45347           //  Roo.log(['add child', items[i]]);
45348             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
45349         }
45350         this.toolbar.items = nitems;
45351         this.toolbar.el.insertBefore(this.wrapEl.dom.firstChild);
45352         delete config.toolbar;
45353         
45354     }
45355     /*
45356     // xtype created footer. - not sure if will work as we normally have to render first..
45357     if (this.footer && !this.footer.el && this.footer.xtype) {
45358         if (!this.wrapEl) {
45359             this.wrapEl = this.el.wrap();
45360         }
45361     
45362         this.footer.container = this.wrapEl.createChild();
45363          
45364         this.footer = Roo.factory(this.footer, Roo);
45365         
45366     }
45367     */
45368     
45369      if(typeof config == "string"){
45370         this.title = config;
45371     }else{
45372         Roo.apply(this, config);
45373     }
45374     
45375     if(this.resizeEl){
45376         this.resizeEl = Roo.get(this.resizeEl, true);
45377     }else{
45378         this.resizeEl = this.el;
45379     }
45380     // handle view.xtype
45381     
45382  
45383     
45384     
45385     this.addEvents({
45386         /**
45387          * @event activate
45388          * Fires when this panel is activated. 
45389          * @param {Roo.ContentPanel} this
45390          */
45391         "activate" : true,
45392         /**
45393          * @event deactivate
45394          * Fires when this panel is activated. 
45395          * @param {Roo.ContentPanel} this
45396          */
45397         "deactivate" : true,
45398
45399         /**
45400          * @event resize
45401          * Fires when this panel is resized if fitToFrame is true.
45402          * @param {Roo.ContentPanel} this
45403          * @param {Number} width The width after any component adjustments
45404          * @param {Number} height The height after any component adjustments
45405          */
45406         "resize" : true,
45407         
45408          /**
45409          * @event render
45410          * Fires when this tab is created
45411          * @param {Roo.ContentPanel} this
45412          */
45413         "render" : true,
45414         
45415           /**
45416          * @event scroll
45417          * Fires when this content is scrolled
45418          * @param {Roo.ContentPanel} this
45419          * @param {Event} scrollEvent
45420          */
45421         "scroll" : true
45422         
45423         
45424         
45425     });
45426     
45427
45428     
45429     
45430     if(this.autoScroll && !this.iframe){
45431         this.resizeEl.setStyle("overflow", "auto");
45432         this.resizeEl.on('scroll', this.onScroll, this);
45433     } else {
45434         // fix randome scrolling
45435         //this.el.on('scroll', function() {
45436         //    Roo.log('fix random scolling');
45437         //    this.scrollTo('top',0); 
45438         //});
45439     }
45440     content = content || this.content;
45441     if(content){
45442         this.setContent(content);
45443     }
45444     if(config && config.url){
45445         this.setUrl(this.url, this.params, this.loadOnce);
45446     }
45447     
45448     
45449     
45450     Roo.bootstrap.panel.Content.superclass.constructor.call(this);
45451     
45452     if (this.view && typeof(this.view.xtype) != 'undefined') {
45453         this.view.el = this.el.appendChild(document.createElement("div"));
45454         this.view = Roo.factory(this.view); 
45455         this.view.render  &&  this.view.render(false, '');  
45456     }
45457     
45458     
45459     this.fireEvent('render', this);
45460 };
45461
45462 Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
45463     
45464     cls : '',
45465     background : '',
45466     
45467     tabTip : '',
45468     
45469     iframe : false,
45470     iframeEl : false,
45471     
45472     /* Resize Element - use this to work out scroll etc. */
45473     resizeEl : false,
45474     
45475     setRegion : function(region){
45476         this.region = region;
45477         this.setActiveClass(region && !this.background);
45478     },
45479     
45480     
45481     setActiveClass: function(state)
45482     {
45483         if(state){
45484            this.el.replaceClass("roo-layout-inactive-content", "roo-layout-active-content");
45485            this.el.setStyle('position','relative');
45486         }else{
45487            this.el.replaceClass("roo-layout-active-content", "roo-layout-inactive-content");
45488            this.el.setStyle('position', 'absolute');
45489         } 
45490     },
45491     
45492     /**
45493      * Returns the toolbar for this Panel if one was configured. 
45494      * @return {Roo.Toolbar} 
45495      */
45496     getToolbar : function(){
45497         return this.toolbar;
45498     },
45499     
45500     setActiveState : function(active)
45501     {
45502         this.active = active;
45503         this.setActiveClass(active);
45504         if(!active){
45505             if(this.fireEvent("deactivate", this) === false){
45506                 return false;
45507             }
45508             return true;
45509         }
45510         this.fireEvent("activate", this);
45511         return true;
45512     },
45513     /**
45514      * Updates this panel's element (not for iframe)
45515      * @param {String} content The new content
45516      * @param {Boolean} loadScripts (optional) true to look for and process scripts
45517     */
45518     setContent : function(content, loadScripts){
45519         if (this.iframe) {
45520             return;
45521         }
45522         
45523         this.el.update(content, loadScripts);
45524     },
45525
45526     ignoreResize : function(w, h)
45527     {
45528         //return false; // always resize?
45529         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
45530             return true;
45531         }else{
45532             this.lastSize = {width: w, height: h};
45533             return false;
45534         }
45535     },
45536     /**
45537      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
45538      * @return {Roo.UpdateManager} The UpdateManager
45539      */
45540     getUpdateManager : function(){
45541         if (this.iframe) {
45542             return false;
45543         }
45544         return this.el.getUpdateManager();
45545     },
45546      /**
45547      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
45548      * Does not work with IFRAME contents
45549      * @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:
45550 <pre><code>
45551 panel.load({
45552     url: "your-url.php",
45553     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
45554     callback: yourFunction,
45555     scope: yourObject, //(optional scope)
45556     discardUrl: false,
45557     nocache: false,
45558     text: "Loading...",
45559     timeout: 30,
45560     scripts: false
45561 });
45562 </code></pre>
45563      
45564      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
45565      * 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.
45566      * @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}
45567      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
45568      * @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.
45569      * @return {Roo.ContentPanel} this
45570      */
45571     load : function(){
45572         
45573         if (this.iframe) {
45574             return this;
45575         }
45576         
45577         var um = this.el.getUpdateManager();
45578         um.update.apply(um, arguments);
45579         return this;
45580     },
45581
45582
45583     /**
45584      * 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.
45585      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
45586      * @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)
45587      * @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)
45588      * @return {Roo.UpdateManager|Boolean} The UpdateManager or false if IFRAME
45589      */
45590     setUrl : function(url, params, loadOnce){
45591         if (this.iframe) {
45592             this.iframeEl.dom.src = url;
45593             return false;
45594         }
45595         
45596         if(this.refreshDelegate){
45597             this.removeListener("activate", this.refreshDelegate);
45598         }
45599         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
45600         this.on("activate", this.refreshDelegate);
45601         return this.el.getUpdateManager();
45602     },
45603     
45604     _handleRefresh : function(url, params, loadOnce){
45605         if(!loadOnce || !this.loaded){
45606             var updater = this.el.getUpdateManager();
45607             updater.update(url, params, this._setLoaded.createDelegate(this));
45608         }
45609     },
45610     
45611     _setLoaded : function(){
45612         this.loaded = true;
45613     }, 
45614     
45615     /**
45616      * Returns this panel's id
45617      * @return {String} 
45618      */
45619     getId : function(){
45620         return this.el.id;
45621     },
45622     
45623     /** 
45624      * Returns this panel's element - used by regiosn to add.
45625      * @return {Roo.Element} 
45626      */
45627     getEl : function(){
45628         return this.wrapEl || this.el;
45629     },
45630     
45631    
45632     
45633     adjustForComponents : function(width, height)
45634     {
45635         //Roo.log('adjustForComponents ');
45636         if(this.resizeEl != this.el){
45637             width -= this.el.getFrameWidth('lr');
45638             height -= this.el.getFrameWidth('tb');
45639         }
45640         if(this.toolbar){
45641             var te = this.toolbar.getEl();
45642             te.setWidth(width);
45643             height -= te.getHeight();
45644         }
45645         if(this.footer){
45646             var te = this.footer.getEl();
45647             te.setWidth(width);
45648             height -= te.getHeight();
45649         }
45650         
45651         
45652         if(this.adjustments){
45653             width += this.adjustments[0];
45654             height += this.adjustments[1];
45655         }
45656         return {"width": width, "height": height};
45657     },
45658     
45659     setSize : function(width, height){
45660         if(this.fitToFrame && !this.ignoreResize(width, height)){
45661             if(this.fitContainer && this.resizeEl != this.el){
45662                 this.el.setSize(width, height);
45663             }
45664             var size = this.adjustForComponents(width, height);
45665             if (this.iframe) {
45666                 this.iframeEl.setSize(width,height);
45667             }
45668             
45669             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
45670             this.fireEvent('resize', this, size.width, size.height);
45671             
45672             
45673         }
45674     },
45675     
45676     /**
45677      * Returns this panel's title
45678      * @return {String} 
45679      */
45680     getTitle : function(){
45681         
45682         if (typeof(this.title) != 'object') {
45683             return this.title;
45684         }
45685         
45686         var t = '';
45687         for (var k in this.title) {
45688             if (!this.title.hasOwnProperty(k)) {
45689                 continue;
45690             }
45691             
45692             if (k.indexOf('-') >= 0) {
45693                 var s = k.split('-');
45694                 for (var i = 0; i<s.length; i++) {
45695                     t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
45696                 }
45697             } else {
45698                 t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
45699             }
45700         }
45701         return t;
45702     },
45703     
45704     /**
45705      * Set this panel's title
45706      * @param {String} title
45707      */
45708     setTitle : function(title){
45709         this.title = title;
45710         if(this.region){
45711             this.region.updatePanelTitle(this, title);
45712         }
45713     },
45714     
45715     /**
45716      * Returns true is this panel was configured to be closable
45717      * @return {Boolean} 
45718      */
45719     isClosable : function(){
45720         return this.closable;
45721     },
45722     
45723     beforeSlide : function(){
45724         this.el.clip();
45725         this.resizeEl.clip();
45726     },
45727     
45728     afterSlide : function(){
45729         this.el.unclip();
45730         this.resizeEl.unclip();
45731     },
45732     
45733     /**
45734      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
45735      *   Will fail silently if the {@link #setUrl} method has not been called.
45736      *   This does not activate the panel, just updates its content.
45737      */
45738     refresh : function(){
45739         if(this.refreshDelegate){
45740            this.loaded = false;
45741            this.refreshDelegate();
45742         }
45743     },
45744     
45745     /**
45746      * Destroys this panel
45747      */
45748     destroy : function(){
45749         this.el.removeAllListeners();
45750         var tempEl = document.createElement("span");
45751         tempEl.appendChild(this.el.dom);
45752         tempEl.innerHTML = "";
45753         this.el.remove();
45754         this.el = null;
45755     },
45756     
45757     /**
45758      * form - if the content panel contains a form - this is a reference to it.
45759      * @type {Roo.form.Form}
45760      */
45761     form : false,
45762     /**
45763      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
45764      *    This contains a reference to it.
45765      * @type {Roo.View}
45766      */
45767     view : false,
45768     
45769       /**
45770      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
45771      * <pre><code>
45772
45773 layout.addxtype({
45774        xtype : 'Form',
45775        items: [ .... ]
45776    }
45777 );
45778
45779 </code></pre>
45780      * @param {Object} cfg Xtype definition of item to add.
45781      */
45782     
45783     
45784     getChildContainer: function () {
45785         return this.getEl();
45786     },
45787     
45788     
45789     onScroll : function(e)
45790     {
45791         this.fireEvent('scroll', this, e);
45792     }
45793     
45794     
45795     /*
45796         var  ret = new Roo.factory(cfg);
45797         return ret;
45798         
45799         
45800         // add form..
45801         if (cfg.xtype.match(/^Form$/)) {
45802             
45803             var el;
45804             //if (this.footer) {
45805             //    el = this.footer.container.insertSibling(false, 'before');
45806             //} else {
45807                 el = this.el.createChild();
45808             //}
45809
45810             this.form = new  Roo.form.Form(cfg);
45811             
45812             
45813             if ( this.form.allItems.length) {
45814                 this.form.render(el.dom);
45815             }
45816             return this.form;
45817         }
45818         // should only have one of theses..
45819         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
45820             // views.. should not be just added - used named prop 'view''
45821             
45822             cfg.el = this.el.appendChild(document.createElement("div"));
45823             // factory?
45824             
45825             var ret = new Roo.factory(cfg);
45826              
45827              ret.render && ret.render(false, ''); // render blank..
45828             this.view = ret;
45829             return ret;
45830         }
45831         return false;
45832     }
45833     \*/
45834 });
45835  
45836 /**
45837  * @class Roo.bootstrap.panel.Grid
45838  * @extends Roo.bootstrap.panel.Content
45839  * @constructor
45840  * Create a new GridPanel.
45841  * @cfg {Roo.bootstrap.Table} grid The grid for this panel
45842  * @cfg {Roo.bootstrap.nav.Simplebar} toolbar the toolbar at the top of the grid.
45843  * @param {Object} config A the config object
45844   
45845  */
45846
45847
45848
45849 Roo.bootstrap.panel.Grid = function(config)
45850 {
45851     
45852       
45853     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
45854         {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
45855
45856     config.el = this.wrapper;
45857     //this.el = this.wrapper;
45858     
45859       if (config.container) {
45860         // ctor'ed from a Border/panel.grid
45861         
45862         
45863         this.wrapper.setStyle("overflow", "hidden");
45864         this.wrapper.addClass('roo-grid-container');
45865
45866     }
45867     
45868     
45869     if(config.toolbar){
45870         var tool_el = this.wrapper.createChild();    
45871         this.toolbar = Roo.factory(config.toolbar);
45872         var ti = [];
45873         if (config.toolbar.items) {
45874             ti = config.toolbar.items ;
45875             delete config.toolbar.items ;
45876         }
45877         
45878         var nitems = [];
45879         this.toolbar.render(tool_el);
45880         for(var i =0;i < ti.length;i++) {
45881           //  Roo.log(['add child', items[i]]);
45882             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
45883         }
45884         this.toolbar.items = nitems;
45885         
45886         delete config.toolbar;
45887     }
45888     
45889     Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
45890     config.grid.scrollBody = true;;
45891     config.grid.monitorWindowResize = false; // turn off autosizing
45892     config.grid.autoHeight = false;
45893     config.grid.autoWidth = false;
45894     
45895     this.grid = new config.grid.xns[config.grid.xtype](config.grid);
45896     
45897     if (config.background) {
45898         // render grid on panel activation (if panel background)
45899         this.on('activate', function(gp) {
45900             if (!gp.grid.rendered) {
45901                 gp.grid.render(this.wrapper);
45902                 gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");   
45903             }
45904         });
45905             
45906     } else {
45907         this.grid.render(this.wrapper);
45908         this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");               
45909
45910     }
45911     //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
45912     // ??? needed ??? config.el = this.wrapper;
45913     
45914     
45915     
45916   
45917     // xtype created footer. - not sure if will work as we normally have to render first..
45918     if (this.footer && !this.footer.el && this.footer.xtype) {
45919         
45920         var ctr = this.grid.getView().getFooterPanel(true);
45921         this.footer.dataSource = this.grid.dataSource;
45922         this.footer = Roo.factory(this.footer, Roo);
45923         this.footer.render(ctr);
45924         
45925     }
45926     
45927     
45928     
45929     
45930      
45931 };
45932
45933 Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content,
45934 {
45935   
45936     getId : function(){
45937         return this.grid.id;
45938     },
45939     
45940     /**
45941      * Returns the grid for this panel
45942      * @return {Roo.bootstrap.Table} 
45943      */
45944     getGrid : function(){
45945         return this.grid;    
45946     },
45947     
45948     setSize : function(width, height)
45949     {
45950      
45951         //if(!this.ignoreResize(width, height)){
45952             var grid = this.grid;
45953             var size = this.adjustForComponents(width, height);
45954             // tfoot is not a footer?
45955           
45956             
45957             var gridel = grid.getGridEl();
45958             gridel.setSize(size.width, size.height);
45959             
45960             var tbd = grid.getGridEl().select('tbody', true).first();
45961             var thd = grid.getGridEl().select('thead',true).first();
45962             var tbf= grid.getGridEl().select('tfoot', true).first();
45963
45964             if (tbf) {
45965                 size.height -= tbf.getHeight();
45966             }
45967             if (thd) {
45968                 size.height -= thd.getHeight();
45969             }
45970             
45971             tbd.setSize(size.width, size.height );
45972             // this is for the account management tab -seems to work there.
45973             var thd = grid.getGridEl().select('thead',true).first();
45974             //if (tbd) {
45975             //    tbd.setSize(size.width, size.height - thd.getHeight());
45976             //}
45977              
45978             grid.autoSize();
45979         //}
45980    
45981     },
45982      
45983     
45984     
45985     beforeSlide : function(){
45986         this.grid.getView().scroller.clip();
45987     },
45988     
45989     afterSlide : function(){
45990         this.grid.getView().scroller.unclip();
45991     },
45992     
45993     destroy : function(){
45994         this.grid.destroy();
45995         delete this.grid;
45996         Roo.bootstrap.panel.Grid.superclass.destroy.call(this); 
45997     }
45998 });
45999
46000 /**
46001  * @class Roo.bootstrap.panel.Nest
46002  * @extends Roo.bootstrap.panel.Content
46003  * @constructor
46004  * Create a new Panel, that can contain a layout.Border.
46005  * 
46006  * 
46007  * @param {String/Object} config A string to set only the title or a config object
46008  */
46009 Roo.bootstrap.panel.Nest = function(config)
46010 {
46011     // construct with only one argument..
46012     /* FIXME - implement nicer consturctors
46013     if (layout.layout) {
46014         config = layout;
46015         layout = config.layout;
46016         delete config.layout;
46017     }
46018     if (layout.xtype && !layout.getEl) {
46019         // then layout needs constructing..
46020         layout = Roo.factory(layout, Roo);
46021     }
46022     */
46023     
46024     config.el =  config.layout.getEl();
46025     
46026     Roo.bootstrap.panel.Nest.superclass.constructor.call(this, config);
46027     
46028     config.layout.monitorWindowResize = false; // turn off autosizing
46029     this.layout = config.layout;
46030     this.layout.getEl().addClass("roo-layout-nested-layout");
46031     this.layout.parent = this;
46032     
46033     
46034     
46035     
46036 };
46037
46038 Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
46039     /**
46040     * @cfg {Roo.BorderLayout} layout The layout for this panel
46041     */
46042     layout : false,
46043
46044     setSize : function(width, height){
46045         if(!this.ignoreResize(width, height)){
46046             var size = this.adjustForComponents(width, height);
46047             var el = this.layout.getEl();
46048             if (size.height < 1) {
46049                 el.setWidth(size.width);   
46050             } else {
46051                 el.setSize(size.width, size.height);
46052             }
46053             var touch = el.dom.offsetWidth;
46054             this.layout.layout();
46055             // ie requires a double layout on the first pass
46056             if(Roo.isIE && !this.initialized){
46057                 this.initialized = true;
46058                 this.layout.layout();
46059             }
46060         }
46061     },
46062     
46063     // activate all subpanels if not currently active..
46064     
46065     setActiveState : function(active){
46066         this.active = active;
46067         this.setActiveClass(active);
46068         
46069         if(!active){
46070             this.fireEvent("deactivate", this);
46071             return;
46072         }
46073         
46074         this.fireEvent("activate", this);
46075         // not sure if this should happen before or after..
46076         if (!this.layout) {
46077             return; // should not happen..
46078         }
46079         var reg = false;
46080         for (var r in this.layout.regions) {
46081             reg = this.layout.getRegion(r);
46082             if (reg.getActivePanel()) {
46083                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
46084                 reg.setActivePanel(reg.getActivePanel());
46085                 continue;
46086             }
46087             if (!reg.panels.length) {
46088                 continue;
46089             }
46090             reg.showPanel(reg.getPanel(0));
46091         }
46092         
46093         
46094         
46095         
46096     },
46097     
46098     /**
46099      * Returns the nested BorderLayout for this panel
46100      * @return {Roo.BorderLayout} 
46101      */
46102     getLayout : function(){
46103         return this.layout;
46104     },
46105     
46106      /**
46107      * Adds a xtype elements to the layout of the nested panel
46108      * <pre><code>
46109
46110 panel.addxtype({
46111        xtype : 'ContentPanel',
46112        region: 'west',
46113        items: [ .... ]
46114    }
46115 );
46116
46117 panel.addxtype({
46118         xtype : 'NestedLayoutPanel',
46119         region: 'west',
46120         layout: {
46121            center: { },
46122            west: { }   
46123         },
46124         items : [ ... list of content panels or nested layout panels.. ]
46125    }
46126 );
46127 </code></pre>
46128      * @param {Object} cfg Xtype definition of item to add.
46129      */
46130     addxtype : function(cfg) {
46131         return this.layout.addxtype(cfg);
46132     
46133     }
46134 });/*
46135  * Based on:
46136  * Ext JS Library 1.1.1
46137  * Copyright(c) 2006-2007, Ext JS, LLC.
46138  *
46139  * Originally Released Under LGPL - original licence link has changed is not relivant.
46140  *
46141  * Fork - LGPL
46142  * <script type="text/javascript">
46143  */
46144 /**
46145  * @class Roo.TabPanel
46146  * @extends Roo.util.Observable
46147  * A lightweight tab container.
46148  * <br><br>
46149  * Usage:
46150  * <pre><code>
46151 // basic tabs 1, built from existing content
46152 var tabs = new Roo.TabPanel("tabs1");
46153 tabs.addTab("script", "View Script");
46154 tabs.addTab("markup", "View Markup");
46155 tabs.activate("script");
46156
46157 // more advanced tabs, built from javascript
46158 var jtabs = new Roo.TabPanel("jtabs");
46159 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
46160
46161 // set up the UpdateManager
46162 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
46163 var updater = tab2.getUpdateManager();
46164 updater.setDefaultUrl("ajax1.htm");
46165 tab2.on('activate', updater.refresh, updater, true);
46166
46167 // Use setUrl for Ajax loading
46168 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
46169 tab3.setUrl("ajax2.htm", null, true);
46170
46171 // Disabled tab
46172 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
46173 tab4.disable();
46174
46175 jtabs.activate("jtabs-1");
46176  * </code></pre>
46177  * @constructor
46178  * Create a new TabPanel.
46179  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
46180  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
46181  */
46182 Roo.bootstrap.panel.Tabs = function(config){
46183     /**
46184     * The container element for this TabPanel.
46185     * @type Roo.Element
46186     */
46187     this.el = Roo.get(config.el);
46188     delete config.el;
46189     if(config){
46190         if(typeof config == "boolean"){
46191             this.tabPosition = config ? "bottom" : "top";
46192         }else{
46193             Roo.apply(this, config);
46194         }
46195     }
46196     
46197     if(this.tabPosition == "bottom"){
46198         // if tabs are at the bottom = create the body first.
46199         this.bodyEl = Roo.get(this.createBody(this.el.dom));
46200         this.el.addClass("roo-tabs-bottom");
46201     }
46202     // next create the tabs holders
46203     
46204     if (this.tabPosition == "west"){
46205         
46206         var reg = this.region; // fake it..
46207         while (reg) {
46208             if (!reg.mgr.parent) {
46209                 break;
46210             }
46211             reg = reg.mgr.parent.region;
46212         }
46213         Roo.log("got nest?");
46214         Roo.log(reg);
46215         if (reg.mgr.getRegion('west')) {
46216             var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
46217             this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
46218             this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
46219             this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
46220             this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
46221         
46222             
46223         }
46224         
46225         
46226     } else {
46227      
46228         this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
46229         this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
46230         this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
46231         this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
46232     }
46233     
46234     
46235     if(Roo.isIE){
46236         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
46237     }
46238     
46239     // finally - if tabs are at the top, then create the body last..
46240     if(this.tabPosition != "bottom"){
46241         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
46242          * @type Roo.Element
46243          */
46244         this.bodyEl = Roo.get(this.createBody(this.el.dom));
46245         this.el.addClass("roo-tabs-top");
46246     }
46247     this.items = [];
46248
46249     this.bodyEl.setStyle("position", "relative");
46250
46251     this.active = null;
46252     this.activateDelegate = this.activate.createDelegate(this);
46253
46254     this.addEvents({
46255         /**
46256          * @event tabchange
46257          * Fires when the active tab changes
46258          * @param {Roo.TabPanel} this
46259          * @param {Roo.TabPanelItem} activePanel The new active tab
46260          */
46261         "tabchange": true,
46262         /**
46263          * @event beforetabchange
46264          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
46265          * @param {Roo.TabPanel} this
46266          * @param {Object} e Set cancel to true on this object to cancel the tab change
46267          * @param {Roo.TabPanelItem} tab The tab being changed to
46268          */
46269         "beforetabchange" : true
46270     });
46271
46272     Roo.EventManager.onWindowResize(this.onResize, this);
46273     this.cpad = this.el.getPadding("lr");
46274     this.hiddenCount = 0;
46275
46276
46277     // toolbar on the tabbar support...
46278     if (this.toolbar) {
46279         alert("no toolbar support yet");
46280         this.toolbar  = false;
46281         /*
46282         var tcfg = this.toolbar;
46283         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
46284         this.toolbar = new Roo.Toolbar(tcfg);
46285         if (Roo.isSafari) {
46286             var tbl = tcfg.container.child('table', true);
46287             tbl.setAttribute('width', '100%');
46288         }
46289         */
46290         
46291     }
46292    
46293
46294
46295     Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
46296 };
46297
46298 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
46299     /*
46300      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
46301      */
46302     tabPosition : "top",
46303     /*
46304      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
46305      */
46306     currentTabWidth : 0,
46307     /*
46308      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
46309      */
46310     minTabWidth : 40,
46311     /*
46312      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
46313      */
46314     maxTabWidth : 250,
46315     /*
46316      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
46317      */
46318     preferredTabWidth : 175,
46319     /*
46320      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
46321      */
46322     resizeTabs : false,
46323     /*
46324      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
46325      */
46326     monitorResize : true,
46327     /*
46328      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
46329      */
46330     toolbar : false,  // set by caller..
46331     
46332     region : false, /// set by caller
46333     
46334     disableTooltips : true, // not used yet...
46335
46336     /**
46337      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
46338      * @param {String} id The id of the div to use <b>or create</b>
46339      * @param {String} text The text for the tab
46340      * @param {String} content (optional) Content to put in the TabPanelItem body
46341      * @param {Boolean} closable (optional) True to create a close icon on the tab
46342      * @return {Roo.TabPanelItem} The created TabPanelItem
46343      */
46344     addTab : function(id, text, content, closable, tpl)
46345     {
46346         var item = new Roo.bootstrap.panel.TabItem({
46347             panel: this,
46348             id : id,
46349             text : text,
46350             closable : closable,
46351             tpl : tpl
46352         });
46353         this.addTabItem(item);
46354         if(content){
46355             item.setContent(content);
46356         }
46357         return item;
46358     },
46359
46360     /**
46361      * Returns the {@link Roo.TabPanelItem} with the specified id/index
46362      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
46363      * @return {Roo.TabPanelItem}
46364      */
46365     getTab : function(id){
46366         return this.items[id];
46367     },
46368
46369     /**
46370      * Hides the {@link Roo.TabPanelItem} with the specified id/index
46371      * @param {String/Number} id The id or index of the TabPanelItem to hide.
46372      */
46373     hideTab : function(id){
46374         var t = this.items[id];
46375         if(!t.isHidden()){
46376            t.setHidden(true);
46377            this.hiddenCount++;
46378            this.autoSizeTabs();
46379         }
46380     },
46381
46382     /**
46383      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
46384      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
46385      */
46386     unhideTab : function(id){
46387         var t = this.items[id];
46388         if(t.isHidden()){
46389            t.setHidden(false);
46390            this.hiddenCount--;
46391            this.autoSizeTabs();
46392         }
46393     },
46394
46395     /**
46396      * Adds an existing {@link Roo.TabPanelItem}.
46397      * @param {Roo.TabPanelItem} item The TabPanelItem to add
46398      */
46399     addTabItem : function(item)
46400     {
46401         this.items[item.id] = item;
46402         this.items.push(item);
46403         this.autoSizeTabs();
46404       //  if(this.resizeTabs){
46405     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
46406   //         this.autoSizeTabs();
46407 //        }else{
46408 //            item.autoSize();
46409        // }
46410     },
46411
46412     /**
46413      * Removes a {@link Roo.TabPanelItem}.
46414      * @param {String/Number} id The id or index of the TabPanelItem to remove.
46415      */
46416     removeTab : function(id){
46417         var items = this.items;
46418         var tab = items[id];
46419         if(!tab) { return; }
46420         var index = items.indexOf(tab);
46421         if(this.active == tab && items.length > 1){
46422             var newTab = this.getNextAvailable(index);
46423             if(newTab) {
46424                 newTab.activate();
46425             }
46426         }
46427         this.stripEl.dom.removeChild(tab.pnode.dom);
46428         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
46429             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
46430         }
46431         items.splice(index, 1);
46432         delete this.items[tab.id];
46433         tab.fireEvent("close", tab);
46434         tab.purgeListeners();
46435         this.autoSizeTabs();
46436     },
46437
46438     getNextAvailable : function(start){
46439         var items = this.items;
46440         var index = start;
46441         // look for a next tab that will slide over to
46442         // replace the one being removed
46443         while(index < items.length){
46444             var item = items[++index];
46445             if(item && !item.isHidden()){
46446                 return item;
46447             }
46448         }
46449         // if one isn't found select the previous tab (on the left)
46450         index = start;
46451         while(index >= 0){
46452             var item = items[--index];
46453             if(item && !item.isHidden()){
46454                 return item;
46455             }
46456         }
46457         return null;
46458     },
46459
46460     /**
46461      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
46462      * @param {String/Number} id The id or index of the TabPanelItem to disable.
46463      */
46464     disableTab : function(id){
46465         var tab = this.items[id];
46466         if(tab && this.active != tab){
46467             tab.disable();
46468         }
46469     },
46470
46471     /**
46472      * Enables a {@link Roo.TabPanelItem} that is disabled.
46473      * @param {String/Number} id The id or index of the TabPanelItem to enable.
46474      */
46475     enableTab : function(id){
46476         var tab = this.items[id];
46477         tab.enable();
46478     },
46479
46480     /**
46481      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
46482      * @param {String/Number} id The id or index of the TabPanelItem to activate.
46483      * @return {Roo.TabPanelItem} The TabPanelItem.
46484      */
46485     activate : function(id)
46486     {
46487         //Roo.log('activite:'  + id);
46488         
46489         var tab = this.items[id];
46490         if(!tab){
46491             return null;
46492         }
46493         if(tab == this.active || tab.disabled){
46494             return tab;
46495         }
46496         var e = {};
46497         this.fireEvent("beforetabchange", this, e, tab);
46498         if(e.cancel !== true && !tab.disabled){
46499             if(this.active){
46500                 this.active.hide();
46501             }
46502             this.active = this.items[id];
46503             this.active.show();
46504             this.fireEvent("tabchange", this, this.active);
46505         }
46506         return tab;
46507     },
46508
46509     /**
46510      * Gets the active {@link Roo.TabPanelItem}.
46511      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
46512      */
46513     getActiveTab : function(){
46514         return this.active;
46515     },
46516
46517     /**
46518      * Updates the tab body element to fit the height of the container element
46519      * for overflow scrolling
46520      * @param {Number} targetHeight (optional) Override the starting height from the elements height
46521      */
46522     syncHeight : function(targetHeight){
46523         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
46524         var bm = this.bodyEl.getMargins();
46525         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
46526         this.bodyEl.setHeight(newHeight);
46527         return newHeight;
46528     },
46529
46530     onResize : function(){
46531         if(this.monitorResize){
46532             this.autoSizeTabs();
46533         }
46534     },
46535
46536     /**
46537      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
46538      */
46539     beginUpdate : function(){
46540         this.updating = true;
46541     },
46542
46543     /**
46544      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
46545      */
46546     endUpdate : function(){
46547         this.updating = false;
46548         this.autoSizeTabs();
46549     },
46550
46551     /**
46552      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
46553      */
46554     autoSizeTabs : function()
46555     {
46556         var count = this.items.length;
46557         var vcount = count - this.hiddenCount;
46558         
46559         if (vcount < 2) {
46560             this.stripEl.hide();
46561         } else {
46562             this.stripEl.show();
46563         }
46564         
46565         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
46566             return;
46567         }
46568         
46569         
46570         var w = Math.max(this.el.getWidth() - this.cpad, 10);
46571         var availWidth = Math.floor(w / vcount);
46572         var b = this.stripBody;
46573         if(b.getWidth() > w){
46574             var tabs = this.items;
46575             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
46576             if(availWidth < this.minTabWidth){
46577                 /*if(!this.sleft){    // incomplete scrolling code
46578                     this.createScrollButtons();
46579                 }
46580                 this.showScroll();
46581                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
46582             }
46583         }else{
46584             if(this.currentTabWidth < this.preferredTabWidth){
46585                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
46586             }
46587         }
46588     },
46589
46590     /**
46591      * Returns the number of tabs in this TabPanel.
46592      * @return {Number}
46593      */
46594      getCount : function(){
46595          return this.items.length;
46596      },
46597
46598     /**
46599      * Resizes all the tabs to the passed width
46600      * @param {Number} The new width
46601      */
46602     setTabWidth : function(width){
46603         this.currentTabWidth = width;
46604         for(var i = 0, len = this.items.length; i < len; i++) {
46605                 if(!this.items[i].isHidden()) {
46606                 this.items[i].setWidth(width);
46607             }
46608         }
46609     },
46610
46611     /**
46612      * Destroys this TabPanel
46613      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
46614      */
46615     destroy : function(removeEl){
46616         Roo.EventManager.removeResizeListener(this.onResize, this);
46617         for(var i = 0, len = this.items.length; i < len; i++){
46618             this.items[i].purgeListeners();
46619         }
46620         if(removeEl === true){
46621             this.el.update("");
46622             this.el.remove();
46623         }
46624     },
46625     
46626     createStrip : function(container)
46627     {
46628         var strip = document.createElement("nav");
46629         strip.className = Roo.bootstrap.version == 4 ?
46630             "navbar-light bg-light" : 
46631             "navbar navbar-default"; //"x-tabs-wrap";
46632         container.appendChild(strip);
46633         return strip;
46634     },
46635     
46636     createStripList : function(strip)
46637     {
46638         // div wrapper for retard IE
46639         // returns the "tr" element.
46640         strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
46641         //'<div class="x-tabs-strip-wrap">'+
46642           //  '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
46643           //  '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
46644         return strip.firstChild; //.firstChild.firstChild.firstChild;
46645     },
46646     createBody : function(container)
46647     {
46648         var body = document.createElement("div");
46649         Roo.id(body, "tab-body");
46650         //Roo.fly(body).addClass("x-tabs-body");
46651         Roo.fly(body).addClass("tab-content");
46652         container.appendChild(body);
46653         return body;
46654     },
46655     createItemBody :function(bodyEl, id){
46656         var body = Roo.getDom(id);
46657         if(!body){
46658             body = document.createElement("div");
46659             body.id = id;
46660         }
46661         //Roo.fly(body).addClass("x-tabs-item-body");
46662         Roo.fly(body).addClass("tab-pane");
46663          bodyEl.insertBefore(body, bodyEl.firstChild);
46664         return body;
46665     },
46666     /** @private */
46667     createStripElements :  function(stripEl, text, closable, tpl)
46668     {
46669         var td = document.createElement("li"); // was td..
46670         td.className = 'nav-item';
46671         
46672         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
46673         
46674         
46675         stripEl.appendChild(td);
46676         /*if(closable){
46677             td.className = "x-tabs-closable";
46678             if(!this.closeTpl){
46679                 this.closeTpl = new Roo.Template(
46680                    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
46681                    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
46682                    '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
46683                 );
46684             }
46685             var el = this.closeTpl.overwrite(td, {"text": text});
46686             var close = el.getElementsByTagName("div")[0];
46687             var inner = el.getElementsByTagName("em")[0];
46688             return {"el": el, "close": close, "inner": inner};
46689         } else {
46690         */
46691         // not sure what this is..
46692 //            if(!this.tabTpl){
46693                 //this.tabTpl = new Roo.Template(
46694                 //   '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
46695                 //   '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
46696                 //);
46697 //                this.tabTpl = new Roo.Template(
46698 //                   '<a href="#">' +
46699 //                   '<span unselectable="on"' +
46700 //                            (this.disableTooltips ? '' : ' title="{text}"') +
46701 //                            ' >{text}</span></a>'
46702 //                );
46703 //                
46704 //            }
46705
46706
46707             var template = tpl || this.tabTpl || false;
46708             
46709             if(!template){
46710                 template =  new Roo.Template(
46711                         Roo.bootstrap.version == 4 ? 
46712                             (
46713                                 '<a class="nav-link" href="#" unselectable="on"' +
46714                                      (this.disableTooltips ? '' : ' title="{text}"') +
46715                                      ' >{text}</a>'
46716                             ) : (
46717                                 '<a class="nav-link" href="#">' +
46718                                 '<span unselectable="on"' +
46719                                          (this.disableTooltips ? '' : ' title="{text}"') +
46720                                     ' >{text}</span></a>'
46721                             )
46722                 );
46723             }
46724             
46725             switch (typeof(template)) {
46726                 case 'object' :
46727                     break;
46728                 case 'string' :
46729                     template = new Roo.Template(template);
46730                     break;
46731                 default :
46732                     break;
46733             }
46734             
46735             var el = template.overwrite(td, {"text": text});
46736             
46737             var inner = el.getElementsByTagName("span")[0];
46738             
46739             return {"el": el, "inner": inner};
46740             
46741     }
46742         
46743     
46744 });
46745
46746 /**
46747  * @class Roo.TabPanelItem
46748  * @extends Roo.util.Observable
46749  * Represents an individual item (tab plus body) in a TabPanel.
46750  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
46751  * @param {String} id The id of this TabPanelItem
46752  * @param {String} text The text for the tab of this TabPanelItem
46753  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
46754  */
46755 Roo.bootstrap.panel.TabItem = function(config){
46756     /**
46757      * The {@link Roo.TabPanel} this TabPanelItem belongs to
46758      * @type Roo.TabPanel
46759      */
46760     this.tabPanel = config.panel;
46761     /**
46762      * The id for this TabPanelItem
46763      * @type String
46764      */
46765     this.id = config.id;
46766     /** @private */
46767     this.disabled = false;
46768     /** @private */
46769     this.text = config.text;
46770     /** @private */
46771     this.loaded = false;
46772     this.closable = config.closable;
46773
46774     /**
46775      * The body element for this TabPanelItem.
46776      * @type Roo.Element
46777      */
46778     this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
46779     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
46780     this.bodyEl.setStyle("display", "block");
46781     this.bodyEl.setStyle("zoom", "1");
46782     //this.hideAction();
46783
46784     var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
46785     /** @private */
46786     this.el = Roo.get(els.el);
46787     this.inner = Roo.get(els.inner, true);
46788      this.textEl = Roo.bootstrap.version == 4 ?
46789         this.el : Roo.get(this.el.dom.firstChild, true);
46790
46791     this.pnode = this.linode = Roo.get(els.el.parentNode, true);
46792     this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
46793
46794     
46795 //    this.el.on("mousedown", this.onTabMouseDown, this);
46796     this.el.on("click", this.onTabClick, this);
46797     /** @private */
46798     if(config.closable){
46799         var c = Roo.get(els.close, true);
46800         c.dom.title = this.closeText;
46801         c.addClassOnOver("close-over");
46802         c.on("click", this.closeClick, this);
46803      }
46804
46805     this.addEvents({
46806          /**
46807          * @event activate
46808          * Fires when this tab becomes the active tab.
46809          * @param {Roo.TabPanel} tabPanel The parent TabPanel
46810          * @param {Roo.TabPanelItem} this
46811          */
46812         "activate": true,
46813         /**
46814          * @event beforeclose
46815          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
46816          * @param {Roo.TabPanelItem} this
46817          * @param {Object} e Set cancel to true on this object to cancel the close.
46818          */
46819         "beforeclose": true,
46820         /**
46821          * @event close
46822          * Fires when this tab is closed.
46823          * @param {Roo.TabPanelItem} this
46824          */
46825          "close": true,
46826         /**
46827          * @event deactivate
46828          * Fires when this tab is no longer the active tab.
46829          * @param {Roo.TabPanel} tabPanel The parent TabPanel
46830          * @param {Roo.TabPanelItem} this
46831          */
46832          "deactivate" : true
46833     });
46834     this.hidden = false;
46835
46836     Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
46837 };
46838
46839 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
46840            {
46841     purgeListeners : function(){
46842        Roo.util.Observable.prototype.purgeListeners.call(this);
46843        this.el.removeAllListeners();
46844     },
46845     /**
46846      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
46847      */
46848     show : function(){
46849         this.status_node.addClass("active");
46850         this.showAction();
46851         if(Roo.isOpera){
46852             this.tabPanel.stripWrap.repaint();
46853         }
46854         this.fireEvent("activate", this.tabPanel, this);
46855     },
46856
46857     /**
46858      * Returns true if this tab is the active tab.
46859      * @return {Boolean}
46860      */
46861     isActive : function(){
46862         return this.tabPanel.getActiveTab() == this;
46863     },
46864
46865     /**
46866      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
46867      */
46868     hide : function(){
46869         this.status_node.removeClass("active");
46870         this.hideAction();
46871         this.fireEvent("deactivate", this.tabPanel, this);
46872     },
46873
46874     hideAction : function(){
46875         this.bodyEl.hide();
46876         this.bodyEl.setStyle("position", "absolute");
46877         this.bodyEl.setLeft("-20000px");
46878         this.bodyEl.setTop("-20000px");
46879     },
46880
46881     showAction : function(){
46882         this.bodyEl.setStyle("position", "relative");
46883         this.bodyEl.setTop("");
46884         this.bodyEl.setLeft("");
46885         this.bodyEl.show();
46886     },
46887
46888     /**
46889      * Set the tooltip for the tab.
46890      * @param {String} tooltip The tab's tooltip
46891      */
46892     setTooltip : function(text){
46893         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
46894             this.textEl.dom.qtip = text;
46895             this.textEl.dom.removeAttribute('title');
46896         }else{
46897             this.textEl.dom.title = text;
46898         }
46899     },
46900
46901     onTabClick : function(e){
46902         e.preventDefault();
46903         this.tabPanel.activate(this.id);
46904     },
46905
46906     onTabMouseDown : function(e){
46907         e.preventDefault();
46908         this.tabPanel.activate(this.id);
46909     },
46910 /*
46911     getWidth : function(){
46912         return this.inner.getWidth();
46913     },
46914
46915     setWidth : function(width){
46916         var iwidth = width - this.linode.getPadding("lr");
46917         this.inner.setWidth(iwidth);
46918         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
46919         this.linode.setWidth(width);
46920     },
46921 */
46922     /**
46923      * Show or hide the tab
46924      * @param {Boolean} hidden True to hide or false to show.
46925      */
46926     setHidden : function(hidden){
46927         this.hidden = hidden;
46928         this.linode.setStyle("display", hidden ? "none" : "");
46929     },
46930
46931     /**
46932      * Returns true if this tab is "hidden"
46933      * @return {Boolean}
46934      */
46935     isHidden : function(){
46936         return this.hidden;
46937     },
46938
46939     /**
46940      * Returns the text for this tab
46941      * @return {String}
46942      */
46943     getText : function(){
46944         return this.text;
46945     },
46946     /*
46947     autoSize : function(){
46948         //this.el.beginMeasure();
46949         this.textEl.setWidth(1);
46950         /*
46951          *  #2804 [new] Tabs in Roojs
46952          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
46953          */
46954         //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
46955         //this.el.endMeasure();
46956     //},
46957
46958     /**
46959      * Sets the text for the tab (Note: this also sets the tooltip text)
46960      * @param {String} text The tab's text and tooltip
46961      */
46962     setText : function(text){
46963         this.text = text;
46964         this.textEl.update(text);
46965         this.setTooltip(text);
46966         //if(!this.tabPanel.resizeTabs){
46967         //    this.autoSize();
46968         //}
46969     },
46970     /**
46971      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
46972      */
46973     activate : function(){
46974         this.tabPanel.activate(this.id);
46975     },
46976
46977     /**
46978      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
46979      */
46980     disable : function(){
46981         if(this.tabPanel.active != this){
46982             this.disabled = true;
46983             this.status_node.addClass("disabled");
46984         }
46985     },
46986
46987     /**
46988      * Enables this TabPanelItem if it was previously disabled.
46989      */
46990     enable : function(){
46991         this.disabled = false;
46992         this.status_node.removeClass("disabled");
46993     },
46994
46995     /**
46996      * Sets the content for this TabPanelItem.
46997      * @param {String} content The content
46998      * @param {Boolean} loadScripts true to look for and load scripts
46999      */
47000     setContent : function(content, loadScripts){
47001         this.bodyEl.update(content, loadScripts);
47002     },
47003
47004     /**
47005      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
47006      * @return {Roo.UpdateManager} The UpdateManager
47007      */
47008     getUpdateManager : function(){
47009         return this.bodyEl.getUpdateManager();
47010     },
47011
47012     /**
47013      * Set a URL to be used to load the content for this TabPanelItem.
47014      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
47015      * @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)
47016      * @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)
47017      * @return {Roo.UpdateManager} The UpdateManager
47018      */
47019     setUrl : function(url, params, loadOnce){
47020         if(this.refreshDelegate){
47021             this.un('activate', this.refreshDelegate);
47022         }
47023         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
47024         this.on("activate", this.refreshDelegate);
47025         return this.bodyEl.getUpdateManager();
47026     },
47027
47028     /** @private */
47029     _handleRefresh : function(url, params, loadOnce){
47030         if(!loadOnce || !this.loaded){
47031             var updater = this.bodyEl.getUpdateManager();
47032             updater.update(url, params, this._setLoaded.createDelegate(this));
47033         }
47034     },
47035
47036     /**
47037      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
47038      *   Will fail silently if the setUrl method has not been called.
47039      *   This does not activate the panel, just updates its content.
47040      */
47041     refresh : function(){
47042         if(this.refreshDelegate){
47043            this.loaded = false;
47044            this.refreshDelegate();
47045         }
47046     },
47047
47048     /** @private */
47049     _setLoaded : function(){
47050         this.loaded = true;
47051     },
47052
47053     /** @private */
47054     closeClick : function(e){
47055         var o = {};
47056         e.stopEvent();
47057         this.fireEvent("beforeclose", this, o);
47058         if(o.cancel !== true){
47059             this.tabPanel.removeTab(this.id);
47060         }
47061     },
47062     /**
47063      * The text displayed in the tooltip for the close icon.
47064      * @type String
47065      */
47066     closeText : "Close this tab"
47067 });
47068 /**
47069 *    This script refer to:
47070 *    Title: International Telephone Input
47071 *    Author: Jack O'Connor
47072 *    Code version:  v12.1.12
47073 *    Availability: https://github.com/jackocnr/intl-tel-input.git
47074 **/
47075
47076 Roo.bootstrap.form.PhoneInputData = function() {
47077     var d = [
47078       [
47079         "Afghanistan (‫افغانستان‬‎)",
47080         "af",
47081         "93"
47082       ],
47083       [
47084         "Albania (Shqipëri)",
47085         "al",
47086         "355"
47087       ],
47088       [
47089         "Algeria (‫الجزائر‬‎)",
47090         "dz",
47091         "213"
47092       ],
47093       [
47094         "American Samoa",
47095         "as",
47096         "1684"
47097       ],
47098       [
47099         "Andorra",
47100         "ad",
47101         "376"
47102       ],
47103       [
47104         "Angola",
47105         "ao",
47106         "244"
47107       ],
47108       [
47109         "Anguilla",
47110         "ai",
47111         "1264"
47112       ],
47113       [
47114         "Antigua and Barbuda",
47115         "ag",
47116         "1268"
47117       ],
47118       [
47119         "Argentina",
47120         "ar",
47121         "54"
47122       ],
47123       [
47124         "Armenia (Հայաստան)",
47125         "am",
47126         "374"
47127       ],
47128       [
47129         "Aruba",
47130         "aw",
47131         "297"
47132       ],
47133       [
47134         "Australia",
47135         "au",
47136         "61",
47137         0
47138       ],
47139       [
47140         "Austria (Österreich)",
47141         "at",
47142         "43"
47143       ],
47144       [
47145         "Azerbaijan (Azərbaycan)",
47146         "az",
47147         "994"
47148       ],
47149       [
47150         "Bahamas",
47151         "bs",
47152         "1242"
47153       ],
47154       [
47155         "Bahrain (‫البحرين‬‎)",
47156         "bh",
47157         "973"
47158       ],
47159       [
47160         "Bangladesh (বাংলাদেশ)",
47161         "bd",
47162         "880"
47163       ],
47164       [
47165         "Barbados",
47166         "bb",
47167         "1246"
47168       ],
47169       [
47170         "Belarus (Беларусь)",
47171         "by",
47172         "375"
47173       ],
47174       [
47175         "Belgium (België)",
47176         "be",
47177         "32"
47178       ],
47179       [
47180         "Belize",
47181         "bz",
47182         "501"
47183       ],
47184       [
47185         "Benin (Bénin)",
47186         "bj",
47187         "229"
47188       ],
47189       [
47190         "Bermuda",
47191         "bm",
47192         "1441"
47193       ],
47194       [
47195         "Bhutan (འབྲུག)",
47196         "bt",
47197         "975"
47198       ],
47199       [
47200         "Bolivia",
47201         "bo",
47202         "591"
47203       ],
47204       [
47205         "Bosnia and Herzegovina (Босна и Херцеговина)",
47206         "ba",
47207         "387"
47208       ],
47209       [
47210         "Botswana",
47211         "bw",
47212         "267"
47213       ],
47214       [
47215         "Brazil (Brasil)",
47216         "br",
47217         "55"
47218       ],
47219       [
47220         "British Indian Ocean Territory",
47221         "io",
47222         "246"
47223       ],
47224       [
47225         "British Virgin Islands",
47226         "vg",
47227         "1284"
47228       ],
47229       [
47230         "Brunei",
47231         "bn",
47232         "673"
47233       ],
47234       [
47235         "Bulgaria (България)",
47236         "bg",
47237         "359"
47238       ],
47239       [
47240         "Burkina Faso",
47241         "bf",
47242         "226"
47243       ],
47244       [
47245         "Burundi (Uburundi)",
47246         "bi",
47247         "257"
47248       ],
47249       [
47250         "Cambodia (កម្ពុជា)",
47251         "kh",
47252         "855"
47253       ],
47254       [
47255         "Cameroon (Cameroun)",
47256         "cm",
47257         "237"
47258       ],
47259       [
47260         "Canada",
47261         "ca",
47262         "1",
47263         1,
47264         ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
47265       ],
47266       [
47267         "Cape Verde (Kabu Verdi)",
47268         "cv",
47269         "238"
47270       ],
47271       [
47272         "Caribbean Netherlands",
47273         "bq",
47274         "599",
47275         1
47276       ],
47277       [
47278         "Cayman Islands",
47279         "ky",
47280         "1345"
47281       ],
47282       [
47283         "Central African Republic (République centrafricaine)",
47284         "cf",
47285         "236"
47286       ],
47287       [
47288         "Chad (Tchad)",
47289         "td",
47290         "235"
47291       ],
47292       [
47293         "Chile",
47294         "cl",
47295         "56"
47296       ],
47297       [
47298         "China (中国)",
47299         "cn",
47300         "86"
47301       ],
47302       [
47303         "Christmas Island",
47304         "cx",
47305         "61",
47306         2
47307       ],
47308       [
47309         "Cocos (Keeling) Islands",
47310         "cc",
47311         "61",
47312         1
47313       ],
47314       [
47315         "Colombia",
47316         "co",
47317         "57"
47318       ],
47319       [
47320         "Comoros (‫جزر القمر‬‎)",
47321         "km",
47322         "269"
47323       ],
47324       [
47325         "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
47326         "cd",
47327         "243"
47328       ],
47329       [
47330         "Congo (Republic) (Congo-Brazzaville)",
47331         "cg",
47332         "242"
47333       ],
47334       [
47335         "Cook Islands",
47336         "ck",
47337         "682"
47338       ],
47339       [
47340         "Costa Rica",
47341         "cr",
47342         "506"
47343       ],
47344       [
47345         "Côte d’Ivoire",
47346         "ci",
47347         "225"
47348       ],
47349       [
47350         "Croatia (Hrvatska)",
47351         "hr",
47352         "385"
47353       ],
47354       [
47355         "Cuba",
47356         "cu",
47357         "53"
47358       ],
47359       [
47360         "Curaçao",
47361         "cw",
47362         "599",
47363         0
47364       ],
47365       [
47366         "Cyprus (Κύπρος)",
47367         "cy",
47368         "357"
47369       ],
47370       [
47371         "Czech Republic (Česká republika)",
47372         "cz",
47373         "420"
47374       ],
47375       [
47376         "Denmark (Danmark)",
47377         "dk",
47378         "45"
47379       ],
47380       [
47381         "Djibouti",
47382         "dj",
47383         "253"
47384       ],
47385       [
47386         "Dominica",
47387         "dm",
47388         "1767"
47389       ],
47390       [
47391         "Dominican Republic (República Dominicana)",
47392         "do",
47393         "1",
47394         2,
47395         ["809", "829", "849"]
47396       ],
47397       [
47398         "Ecuador",
47399         "ec",
47400         "593"
47401       ],
47402       [
47403         "Egypt (‫مصر‬‎)",
47404         "eg",
47405         "20"
47406       ],
47407       [
47408         "El Salvador",
47409         "sv",
47410         "503"
47411       ],
47412       [
47413         "Equatorial Guinea (Guinea Ecuatorial)",
47414         "gq",
47415         "240"
47416       ],
47417       [
47418         "Eritrea",
47419         "er",
47420         "291"
47421       ],
47422       [
47423         "Estonia (Eesti)",
47424         "ee",
47425         "372"
47426       ],
47427       [
47428         "Ethiopia",
47429         "et",
47430         "251"
47431       ],
47432       [
47433         "Falkland Islands (Islas Malvinas)",
47434         "fk",
47435         "500"
47436       ],
47437       [
47438         "Faroe Islands (Føroyar)",
47439         "fo",
47440         "298"
47441       ],
47442       [
47443         "Fiji",
47444         "fj",
47445         "679"
47446       ],
47447       [
47448         "Finland (Suomi)",
47449         "fi",
47450         "358",
47451         0
47452       ],
47453       [
47454         "France",
47455         "fr",
47456         "33"
47457       ],
47458       [
47459         "French Guiana (Guyane française)",
47460         "gf",
47461         "594"
47462       ],
47463       [
47464         "French Polynesia (Polynésie française)",
47465         "pf",
47466         "689"
47467       ],
47468       [
47469         "Gabon",
47470         "ga",
47471         "241"
47472       ],
47473       [
47474         "Gambia",
47475         "gm",
47476         "220"
47477       ],
47478       [
47479         "Georgia (საქართველო)",
47480         "ge",
47481         "995"
47482       ],
47483       [
47484         "Germany (Deutschland)",
47485         "de",
47486         "49"
47487       ],
47488       [
47489         "Ghana (Gaana)",
47490         "gh",
47491         "233"
47492       ],
47493       [
47494         "Gibraltar",
47495         "gi",
47496         "350"
47497       ],
47498       [
47499         "Greece (Ελλάδα)",
47500         "gr",
47501         "30"
47502       ],
47503       [
47504         "Greenland (Kalaallit Nunaat)",
47505         "gl",
47506         "299"
47507       ],
47508       [
47509         "Grenada",
47510         "gd",
47511         "1473"
47512       ],
47513       [
47514         "Guadeloupe",
47515         "gp",
47516         "590",
47517         0
47518       ],
47519       [
47520         "Guam",
47521         "gu",
47522         "1671"
47523       ],
47524       [
47525         "Guatemala",
47526         "gt",
47527         "502"
47528       ],
47529       [
47530         "Guernsey",
47531         "gg",
47532         "44",
47533         1
47534       ],
47535       [
47536         "Guinea (Guinée)",
47537         "gn",
47538         "224"
47539       ],
47540       [
47541         "Guinea-Bissau (Guiné Bissau)",
47542         "gw",
47543         "245"
47544       ],
47545       [
47546         "Guyana",
47547         "gy",
47548         "592"
47549       ],
47550       [
47551         "Haiti",
47552         "ht",
47553         "509"
47554       ],
47555       [
47556         "Honduras",
47557         "hn",
47558         "504"
47559       ],
47560       [
47561         "Hong Kong (香港)",
47562         "hk",
47563         "852"
47564       ],
47565       [
47566         "Hungary (Magyarország)",
47567         "hu",
47568         "36"
47569       ],
47570       [
47571         "Iceland (Ísland)",
47572         "is",
47573         "354"
47574       ],
47575       [
47576         "India (भारत)",
47577         "in",
47578         "91"
47579       ],
47580       [
47581         "Indonesia",
47582         "id",
47583         "62"
47584       ],
47585       [
47586         "Iran (‫ایران‬‎)",
47587         "ir",
47588         "98"
47589       ],
47590       [
47591         "Iraq (‫العراق‬‎)",
47592         "iq",
47593         "964"
47594       ],
47595       [
47596         "Ireland",
47597         "ie",
47598         "353"
47599       ],
47600       [
47601         "Isle of Man",
47602         "im",
47603         "44",
47604         2
47605       ],
47606       [
47607         "Israel (‫ישראל‬‎)",
47608         "il",
47609         "972"
47610       ],
47611       [
47612         "Italy (Italia)",
47613         "it",
47614         "39",
47615         0
47616       ],
47617       [
47618         "Jamaica",
47619         "jm",
47620         "1876"
47621       ],
47622       [
47623         "Japan (日本)",
47624         "jp",
47625         "81"
47626       ],
47627       [
47628         "Jersey",
47629         "je",
47630         "44",
47631         3
47632       ],
47633       [
47634         "Jordan (‫الأردن‬‎)",
47635         "jo",
47636         "962"
47637       ],
47638       [
47639         "Kazakhstan (Казахстан)",
47640         "kz",
47641         "7",
47642         1
47643       ],
47644       [
47645         "Kenya",
47646         "ke",
47647         "254"
47648       ],
47649       [
47650         "Kiribati",
47651         "ki",
47652         "686"
47653       ],
47654       [
47655         "Kosovo",
47656         "xk",
47657         "383"
47658       ],
47659       [
47660         "Kuwait (‫الكويت‬‎)",
47661         "kw",
47662         "965"
47663       ],
47664       [
47665         "Kyrgyzstan (Кыргызстан)",
47666         "kg",
47667         "996"
47668       ],
47669       [
47670         "Laos (ລາວ)",
47671         "la",
47672         "856"
47673       ],
47674       [
47675         "Latvia (Latvija)",
47676         "lv",
47677         "371"
47678       ],
47679       [
47680         "Lebanon (‫لبنان‬‎)",
47681         "lb",
47682         "961"
47683       ],
47684       [
47685         "Lesotho",
47686         "ls",
47687         "266"
47688       ],
47689       [
47690         "Liberia",
47691         "lr",
47692         "231"
47693       ],
47694       [
47695         "Libya (‫ليبيا‬‎)",
47696         "ly",
47697         "218"
47698       ],
47699       [
47700         "Liechtenstein",
47701         "li",
47702         "423"
47703       ],
47704       [
47705         "Lithuania (Lietuva)",
47706         "lt",
47707         "370"
47708       ],
47709       [
47710         "Luxembourg",
47711         "lu",
47712         "352"
47713       ],
47714       [
47715         "Macau (澳門)",
47716         "mo",
47717         "853"
47718       ],
47719       [
47720         "Macedonia (FYROM) (Македонија)",
47721         "mk",
47722         "389"
47723       ],
47724       [
47725         "Madagascar (Madagasikara)",
47726         "mg",
47727         "261"
47728       ],
47729       [
47730         "Malawi",
47731         "mw",
47732         "265"
47733       ],
47734       [
47735         "Malaysia",
47736         "my",
47737         "60"
47738       ],
47739       [
47740         "Maldives",
47741         "mv",
47742         "960"
47743       ],
47744       [
47745         "Mali",
47746         "ml",
47747         "223"
47748       ],
47749       [
47750         "Malta",
47751         "mt",
47752         "356"
47753       ],
47754       [
47755         "Marshall Islands",
47756         "mh",
47757         "692"
47758       ],
47759       [
47760         "Martinique",
47761         "mq",
47762         "596"
47763       ],
47764       [
47765         "Mauritania (‫موريتانيا‬‎)",
47766         "mr",
47767         "222"
47768       ],
47769       [
47770         "Mauritius (Moris)",
47771         "mu",
47772         "230"
47773       ],
47774       [
47775         "Mayotte",
47776         "yt",
47777         "262",
47778         1
47779       ],
47780       [
47781         "Mexico (México)",
47782         "mx",
47783         "52"
47784       ],
47785       [
47786         "Micronesia",
47787         "fm",
47788         "691"
47789       ],
47790       [
47791         "Moldova (Republica Moldova)",
47792         "md",
47793         "373"
47794       ],
47795       [
47796         "Monaco",
47797         "mc",
47798         "377"
47799       ],
47800       [
47801         "Mongolia (Монгол)",
47802         "mn",
47803         "976"
47804       ],
47805       [
47806         "Montenegro (Crna Gora)",
47807         "me",
47808         "382"
47809       ],
47810       [
47811         "Montserrat",
47812         "ms",
47813         "1664"
47814       ],
47815       [
47816         "Morocco (‫المغرب‬‎)",
47817         "ma",
47818         "212",
47819         0
47820       ],
47821       [
47822         "Mozambique (Moçambique)",
47823         "mz",
47824         "258"
47825       ],
47826       [
47827         "Myanmar (Burma) (မြန်မာ)",
47828         "mm",
47829         "95"
47830       ],
47831       [
47832         "Namibia (Namibië)",
47833         "na",
47834         "264"
47835       ],
47836       [
47837         "Nauru",
47838         "nr",
47839         "674"
47840       ],
47841       [
47842         "Nepal (नेपाल)",
47843         "np",
47844         "977"
47845       ],
47846       [
47847         "Netherlands (Nederland)",
47848         "nl",
47849         "31"
47850       ],
47851       [
47852         "New Caledonia (Nouvelle-Calédonie)",
47853         "nc",
47854         "687"
47855       ],
47856       [
47857         "New Zealand",
47858         "nz",
47859         "64"
47860       ],
47861       [
47862         "Nicaragua",
47863         "ni",
47864         "505"
47865       ],
47866       [
47867         "Niger (Nijar)",
47868         "ne",
47869         "227"
47870       ],
47871       [
47872         "Nigeria",
47873         "ng",
47874         "234"
47875       ],
47876       [
47877         "Niue",
47878         "nu",
47879         "683"
47880       ],
47881       [
47882         "Norfolk Island",
47883         "nf",
47884         "672"
47885       ],
47886       [
47887         "North Korea (조선 민주주의 인민 공화국)",
47888         "kp",
47889         "850"
47890       ],
47891       [
47892         "Northern Mariana Islands",
47893         "mp",
47894         "1670"
47895       ],
47896       [
47897         "Norway (Norge)",
47898         "no",
47899         "47",
47900         0
47901       ],
47902       [
47903         "Oman (‫عُمان‬‎)",
47904         "om",
47905         "968"
47906       ],
47907       [
47908         "Pakistan (‫پاکستان‬‎)",
47909         "pk",
47910         "92"
47911       ],
47912       [
47913         "Palau",
47914         "pw",
47915         "680"
47916       ],
47917       [
47918         "Palestine (‫فلسطين‬‎)",
47919         "ps",
47920         "970"
47921       ],
47922       [
47923         "Panama (Panamá)",
47924         "pa",
47925         "507"
47926       ],
47927       [
47928         "Papua New Guinea",
47929         "pg",
47930         "675"
47931       ],
47932       [
47933         "Paraguay",
47934         "py",
47935         "595"
47936       ],
47937       [
47938         "Peru (Perú)",
47939         "pe",
47940         "51"
47941       ],
47942       [
47943         "Philippines",
47944         "ph",
47945         "63"
47946       ],
47947       [
47948         "Poland (Polska)",
47949         "pl",
47950         "48"
47951       ],
47952       [
47953         "Portugal",
47954         "pt",
47955         "351"
47956       ],
47957       [
47958         "Puerto Rico",
47959         "pr",
47960         "1",
47961         3,
47962         ["787", "939"]
47963       ],
47964       [
47965         "Qatar (‫قطر‬‎)",
47966         "qa",
47967         "974"
47968       ],
47969       [
47970         "Réunion (La Réunion)",
47971         "re",
47972         "262",
47973         0
47974       ],
47975       [
47976         "Romania (România)",
47977         "ro",
47978         "40"
47979       ],
47980       [
47981         "Russia (Россия)",
47982         "ru",
47983         "7",
47984         0
47985       ],
47986       [
47987         "Rwanda",
47988         "rw",
47989         "250"
47990       ],
47991       [
47992         "Saint Barthélemy",
47993         "bl",
47994         "590",
47995         1
47996       ],
47997       [
47998         "Saint Helena",
47999         "sh",
48000         "290"
48001       ],
48002       [
48003         "Saint Kitts and Nevis",
48004         "kn",
48005         "1869"
48006       ],
48007       [
48008         "Saint Lucia",
48009         "lc",
48010         "1758"
48011       ],
48012       [
48013         "Saint Martin (Saint-Martin (partie française))",
48014         "mf",
48015         "590",
48016         2
48017       ],
48018       [
48019         "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
48020         "pm",
48021         "508"
48022       ],
48023       [
48024         "Saint Vincent and the Grenadines",
48025         "vc",
48026         "1784"
48027       ],
48028       [
48029         "Samoa",
48030         "ws",
48031         "685"
48032       ],
48033       [
48034         "San Marino",
48035         "sm",
48036         "378"
48037       ],
48038       [
48039         "São Tomé and Príncipe (São Tomé e Príncipe)",
48040         "st",
48041         "239"
48042       ],
48043       [
48044         "Saudi Arabia (‫المملكة العربية السعودية‬‎)",
48045         "sa",
48046         "966"
48047       ],
48048       [
48049         "Senegal (Sénégal)",
48050         "sn",
48051         "221"
48052       ],
48053       [
48054         "Serbia (Србија)",
48055         "rs",
48056         "381"
48057       ],
48058       [
48059         "Seychelles",
48060         "sc",
48061         "248"
48062       ],
48063       [
48064         "Sierra Leone",
48065         "sl",
48066         "232"
48067       ],
48068       [
48069         "Singapore",
48070         "sg",
48071         "65"
48072       ],
48073       [
48074         "Sint Maarten",
48075         "sx",
48076         "1721"
48077       ],
48078       [
48079         "Slovakia (Slovensko)",
48080         "sk",
48081         "421"
48082       ],
48083       [
48084         "Slovenia (Slovenija)",
48085         "si",
48086         "386"
48087       ],
48088       [
48089         "Solomon Islands",
48090         "sb",
48091         "677"
48092       ],
48093       [
48094         "Somalia (Soomaaliya)",
48095         "so",
48096         "252"
48097       ],
48098       [
48099         "South Africa",
48100         "za",
48101         "27"
48102       ],
48103       [
48104         "South Korea (대한민국)",
48105         "kr",
48106         "82"
48107       ],
48108       [
48109         "South Sudan (‫جنوب السودان‬‎)",
48110         "ss",
48111         "211"
48112       ],
48113       [
48114         "Spain (España)",
48115         "es",
48116         "34"
48117       ],
48118       [
48119         "Sri Lanka (ශ්‍රී ලංකාව)",
48120         "lk",
48121         "94"
48122       ],
48123       [
48124         "Sudan (‫السودان‬‎)",
48125         "sd",
48126         "249"
48127       ],
48128       [
48129         "Suriname",
48130         "sr",
48131         "597"
48132       ],
48133       [
48134         "Svalbard and Jan Mayen",
48135         "sj",
48136         "47",
48137         1
48138       ],
48139       [
48140         "Swaziland",
48141         "sz",
48142         "268"
48143       ],
48144       [
48145         "Sweden (Sverige)",
48146         "se",
48147         "46"
48148       ],
48149       [
48150         "Switzerland (Schweiz)",
48151         "ch",
48152         "41"
48153       ],
48154       [
48155         "Syria (‫سوريا‬‎)",
48156         "sy",
48157         "963"
48158       ],
48159       [
48160         "Taiwan (台灣)",
48161         "tw",
48162         "886"
48163       ],
48164       [
48165         "Tajikistan",
48166         "tj",
48167         "992"
48168       ],
48169       [
48170         "Tanzania",
48171         "tz",
48172         "255"
48173       ],
48174       [
48175         "Thailand (ไทย)",
48176         "th",
48177         "66"
48178       ],
48179       [
48180         "Timor-Leste",
48181         "tl",
48182         "670"
48183       ],
48184       [
48185         "Togo",
48186         "tg",
48187         "228"
48188       ],
48189       [
48190         "Tokelau",
48191         "tk",
48192         "690"
48193       ],
48194       [
48195         "Tonga",
48196         "to",
48197         "676"
48198       ],
48199       [
48200         "Trinidad and Tobago",
48201         "tt",
48202         "1868"
48203       ],
48204       [
48205         "Tunisia (‫تونس‬‎)",
48206         "tn",
48207         "216"
48208       ],
48209       [
48210         "Turkey (Türkiye)",
48211         "tr",
48212         "90"
48213       ],
48214       [
48215         "Turkmenistan",
48216         "tm",
48217         "993"
48218       ],
48219       [
48220         "Turks and Caicos Islands",
48221         "tc",
48222         "1649"
48223       ],
48224       [
48225         "Tuvalu",
48226         "tv",
48227         "688"
48228       ],
48229       [
48230         "U.S. Virgin Islands",
48231         "vi",
48232         "1340"
48233       ],
48234       [
48235         "Uganda",
48236         "ug",
48237         "256"
48238       ],
48239       [
48240         "Ukraine (Україна)",
48241         "ua",
48242         "380"
48243       ],
48244       [
48245         "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)",
48246         "ae",
48247         "971"
48248       ],
48249       [
48250         "United Kingdom",
48251         "gb",
48252         "44",
48253         0
48254       ],
48255       [
48256         "United States",
48257         "us",
48258         "1",
48259         0
48260       ],
48261       [
48262         "Uruguay",
48263         "uy",
48264         "598"
48265       ],
48266       [
48267         "Uzbekistan (Oʻzbekiston)",
48268         "uz",
48269         "998"
48270       ],
48271       [
48272         "Vanuatu",
48273         "vu",
48274         "678"
48275       ],
48276       [
48277         "Vatican City (Città del Vaticano)",
48278         "va",
48279         "39",
48280         1
48281       ],
48282       [
48283         "Venezuela",
48284         "ve",
48285         "58"
48286       ],
48287       [
48288         "Vietnam (Việt Nam)",
48289         "vn",
48290         "84"
48291       ],
48292       [
48293         "Wallis and Futuna (Wallis-et-Futuna)",
48294         "wf",
48295         "681"
48296       ],
48297       [
48298         "Western Sahara (‫الصحراء الغربية‬‎)",
48299         "eh",
48300         "212",
48301         1
48302       ],
48303       [
48304         "Yemen (‫اليمن‬‎)",
48305         "ye",
48306         "967"
48307       ],
48308       [
48309         "Zambia",
48310         "zm",
48311         "260"
48312       ],
48313       [
48314         "Zimbabwe",
48315         "zw",
48316         "263"
48317       ],
48318       [
48319         "Åland Islands",
48320         "ax",
48321         "358",
48322         1
48323       ]
48324   ];
48325   
48326   return d;
48327 }/**
48328 *    This script refer to:
48329 *    Title: International Telephone Input
48330 *    Author: Jack O'Connor
48331 *    Code version:  v12.1.12
48332 *    Availability: https://github.com/jackocnr/intl-tel-input.git
48333 **/
48334
48335 /**
48336  * @class Roo.bootstrap.form.PhoneInput
48337  * @extends Roo.bootstrap.form.TriggerField
48338  * An input with International dial-code selection
48339  
48340  * @cfg {String} defaultDialCode default '+852'
48341  * @cfg {Array} preferedCountries default []
48342   
48343  * @constructor
48344  * Create a new PhoneInput.
48345  * @param {Object} config Configuration options
48346  */
48347
48348 Roo.bootstrap.form.PhoneInput = function(config) {
48349     Roo.bootstrap.form.PhoneInput.superclass.constructor.call(this, config);
48350 };
48351
48352 Roo.extend(Roo.bootstrap.form.PhoneInput, Roo.bootstrap.form.TriggerField, {
48353         /**
48354         * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
48355         */
48356         listWidth: undefined,
48357         
48358         selectedClass: 'active',
48359         
48360         invalidClass : "has-warning",
48361         
48362         validClass: 'has-success',
48363         
48364         allowed: '0123456789',
48365         
48366         max_length: 15,
48367         
48368         /**
48369          * @cfg {String} defaultDialCode The default dial code when initializing the input
48370          */
48371         defaultDialCode: '+852',
48372         
48373         /**
48374          * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
48375          */
48376         preferedCountries: false,
48377         
48378         getAutoCreate : function()
48379         {
48380             var data = Roo.bootstrap.form.PhoneInputData();
48381             var align = this.labelAlign || this.parentLabelAlign();
48382             var id = Roo.id();
48383             
48384             this.allCountries = [];
48385             this.dialCodeMapping = [];
48386             
48387             for (var i = 0; i < data.length; i++) {
48388               var c = data[i];
48389               this.allCountries[i] = {
48390                 name: c[0],
48391                 iso2: c[1],
48392                 dialCode: c[2],
48393                 priority: c[3] || 0,
48394                 areaCodes: c[4] || null
48395               };
48396               this.dialCodeMapping[c[2]] = {
48397                   name: c[0],
48398                   iso2: c[1],
48399                   priority: c[3] || 0,
48400                   areaCodes: c[4] || null
48401               };
48402             }
48403             
48404             var cfg = {
48405                 cls: 'form-group',
48406                 cn: []
48407             };
48408             
48409             var input =  {
48410                 tag: 'input',
48411                 id : id,
48412                 // type: 'number', -- do not use number - we get the flaky up/down arrows.
48413                 maxlength: this.max_length,
48414                 cls : 'form-control tel-input',
48415                 autocomplete: 'new-password'
48416             };
48417             
48418             var hiddenInput = {
48419                 tag: 'input',
48420                 type: 'hidden',
48421                 cls: 'hidden-tel-input'
48422             };
48423             
48424             if (this.name) {
48425                 hiddenInput.name = this.name;
48426             }
48427             
48428             if (this.disabled) {
48429                 input.disabled = true;
48430             }
48431             
48432             var flag_container = {
48433                 tag: 'div',
48434                 cls: 'flag-box',
48435                 cn: [
48436                     {
48437                         tag: 'div',
48438                         cls: 'flag'
48439                     },
48440                     {
48441                         tag: 'div',
48442                         cls: 'caret'
48443                     }
48444                 ]
48445             };
48446             
48447             var box = {
48448                 tag: 'div',
48449                 cls: this.hasFeedback ? 'has-feedback' : '',
48450                 cn: [
48451                     hiddenInput,
48452                     input,
48453                     {
48454                         tag: 'input',
48455                         cls: 'dial-code-holder',
48456                         disabled: true
48457                     }
48458                 ]
48459             };
48460             
48461             var container = {
48462                 cls: 'roo-select2-container input-group',
48463                 cn: [
48464                     flag_container,
48465                     box
48466                 ]
48467             };
48468             
48469             if (this.fieldLabel.length) {
48470                 var indicator = {
48471                     tag: 'i',
48472                     tooltip: 'This field is required'
48473                 };
48474                 
48475                 var label = {
48476                     tag: 'label',
48477                     'for':  id,
48478                     cls: 'control-label',
48479                     cn: []
48480                 };
48481                 
48482                 var label_text = {
48483                     tag: 'span',
48484                     html: this.fieldLabel
48485                 };
48486                 
48487                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
48488                 label.cn = [
48489                     indicator,
48490                     label_text
48491                 ];
48492                 
48493                 if(this.indicatorpos == 'right') {
48494                     indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
48495                     label.cn = [
48496                         label_text,
48497                         indicator
48498                     ];
48499                 }
48500                 
48501                 if(align == 'left') {
48502                     container = {
48503                         tag: 'div',
48504                         cn: [
48505                             container
48506                         ]
48507                     };
48508                     
48509                     if(this.labelWidth > 12){
48510                         label.style = "width: " + this.labelWidth + 'px';
48511                     }
48512                     if(this.labelWidth < 13 && this.labelmd == 0){
48513                         this.labelmd = this.labelWidth;
48514                     }
48515                     if(this.labellg > 0){
48516                         label.cls += ' col-lg-' + this.labellg;
48517                         input.cls += ' col-lg-' + (12 - this.labellg);
48518                     }
48519                     if(this.labelmd > 0){
48520                         label.cls += ' col-md-' + this.labelmd;
48521                         container.cls += ' col-md-' + (12 - this.labelmd);
48522                     }
48523                     if(this.labelsm > 0){
48524                         label.cls += ' col-sm-' + this.labelsm;
48525                         container.cls += ' col-sm-' + (12 - this.labelsm);
48526                     }
48527                     if(this.labelxs > 0){
48528                         label.cls += ' col-xs-' + this.labelxs;
48529                         container.cls += ' col-xs-' + (12 - this.labelxs);
48530                     }
48531                 }
48532             }
48533             
48534             cfg.cn = [
48535                 label,
48536                 container
48537             ];
48538             
48539             var settings = this;
48540             
48541             ['xs','sm','md','lg'].map(function(size){
48542                 if (settings[size]) {
48543                     cfg.cls += ' col-' + size + '-' + settings[size];
48544                 }
48545             });
48546             
48547             this.store = new Roo.data.Store({
48548                 proxy : new Roo.data.MemoryProxy({}),
48549                 reader : new Roo.data.JsonReader({
48550                     fields : [
48551                         {
48552                             'name' : 'name',
48553                             'type' : 'string'
48554                         },
48555                         {
48556                             'name' : 'iso2',
48557                             'type' : 'string'
48558                         },
48559                         {
48560                             'name' : 'dialCode',
48561                             'type' : 'string'
48562                         },
48563                         {
48564                             'name' : 'priority',
48565                             'type' : 'string'
48566                         },
48567                         {
48568                             'name' : 'areaCodes',
48569                             'type' : 'string'
48570                         }
48571                     ]
48572                 })
48573             });
48574             
48575             if(!this.preferedCountries) {
48576                 this.preferedCountries = [
48577                     'hk',
48578                     'gb',
48579                     'us'
48580                 ];
48581             }
48582             
48583             var p = this.preferedCountries.reverse();
48584             
48585             if(p) {
48586                 for (var i = 0; i < p.length; i++) {
48587                     for (var j = 0; j < this.allCountries.length; j++) {
48588                         if(this.allCountries[j].iso2 == p[i]) {
48589                             var t = this.allCountries[j];
48590                             this.allCountries.splice(j,1);
48591                             this.allCountries.unshift(t);
48592                         }
48593                     } 
48594                 }
48595             }
48596             
48597             this.store.proxy.data = {
48598                 success: true,
48599                 data: this.allCountries
48600             };
48601             
48602             return cfg;
48603         },
48604         
48605         initEvents : function()
48606         {
48607             this.createList();
48608             Roo.bootstrap.form.PhoneInput.superclass.initEvents.call(this);
48609             
48610             this.indicator = this.indicatorEl();
48611             this.flag = this.flagEl();
48612             this.dialCodeHolder = this.dialCodeHolderEl();
48613             
48614             this.trigger = this.el.select('div.flag-box',true).first();
48615             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
48616             
48617             var _this = this;
48618             
48619             (function(){
48620                 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
48621                 _this.list.setWidth(lw);
48622             }).defer(100);
48623             
48624             this.list.on('mouseover', this.onViewOver, this);
48625             this.list.on('mousemove', this.onViewMove, this);
48626             this.inputEl().on("keyup", this.onKeyUp, this);
48627             this.inputEl().on("keypress", this.onKeyPress, this);
48628             
48629             this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
48630
48631             this.view = new Roo.View(this.list, this.tpl, {
48632                 singleSelect:true, store: this.store, selectedClass: this.selectedClass
48633             });
48634             
48635             this.view.on('click', this.onViewClick, this);
48636             this.setValue(this.defaultDialCode);
48637         },
48638         
48639         onTriggerClick : function(e)
48640         {
48641             Roo.log('trigger click');
48642             if(this.disabled){
48643                 return;
48644             }
48645             
48646             if(this.isExpanded()){
48647                 this.collapse();
48648                 this.hasFocus = false;
48649             }else {
48650                 this.store.load({});
48651                 this.hasFocus = true;
48652                 this.expand();
48653             }
48654         },
48655         
48656         isExpanded : function()
48657         {
48658             return this.list.isVisible();
48659         },
48660         
48661         collapse : function()
48662         {
48663             if(!this.isExpanded()){
48664                 return;
48665             }
48666             this.list.hide();
48667             Roo.get(document).un('mousedown', this.collapseIf, this);
48668             Roo.get(document).un('mousewheel', this.collapseIf, this);
48669             this.fireEvent('collapse', this);
48670             this.validate();
48671         },
48672         
48673         expand : function()
48674         {
48675             Roo.log('expand');
48676
48677             if(this.isExpanded() || !this.hasFocus){
48678                 return;
48679             }
48680             
48681             var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
48682             this.list.setWidth(lw);
48683             
48684             this.list.show();
48685             this.restrictHeight();
48686             
48687             Roo.get(document).on('mousedown', this.collapseIf, this);
48688             Roo.get(document).on('mousewheel', this.collapseIf, this);
48689             
48690             this.fireEvent('expand', this);
48691         },
48692         
48693         restrictHeight : function()
48694         {
48695             this.list.alignTo(this.inputEl(), this.listAlign);
48696             this.list.alignTo(this.inputEl(), this.listAlign);
48697         },
48698         
48699         onViewOver : function(e, t)
48700         {
48701             if(this.inKeyMode){
48702                 return;
48703             }
48704             var item = this.view.findItemFromChild(t);
48705             
48706             if(item){
48707                 var index = this.view.indexOf(item);
48708                 this.select(index, false);
48709             }
48710         },
48711
48712         // private
48713         onViewClick : function(view, doFocus, el, e)
48714         {
48715             var index = this.view.getSelectedIndexes()[0];
48716             
48717             var r = this.store.getAt(index);
48718             
48719             if(r){
48720                 this.onSelect(r, index);
48721             }
48722             if(doFocus !== false && !this.blockFocus){
48723                 this.inputEl().focus();
48724             }
48725         },
48726         
48727         onViewMove : function(e, t)
48728         {
48729             this.inKeyMode = false;
48730         },
48731         
48732         select : function(index, scrollIntoView)
48733         {
48734             this.selectedIndex = index;
48735             this.view.select(index);
48736             if(scrollIntoView !== false){
48737                 var el = this.view.getNode(index);
48738                 if(el){
48739                     this.list.scrollChildIntoView(el, false);
48740                 }
48741             }
48742         },
48743         
48744         createList : function()
48745         {
48746             this.list = Roo.get(document.body).createChild({
48747                 tag: 'ul',
48748                 cls: 'typeahead typeahead-long dropdown-menu tel-list',
48749                 style: 'display:none'
48750             });
48751             
48752             this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
48753         },
48754         
48755         collapseIf : function(e)
48756         {
48757             var in_combo  = e.within(this.el);
48758             var in_list =  e.within(this.list);
48759             var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
48760             
48761             if (in_combo || in_list || is_list) {
48762                 return;
48763             }
48764             this.collapse();
48765         },
48766         
48767         onSelect : function(record, index)
48768         {
48769             if(this.fireEvent('beforeselect', this, record, index) !== false){
48770                 
48771                 this.setFlagClass(record.data.iso2);
48772                 this.setDialCode(record.data.dialCode);
48773                 this.hasFocus = false;
48774                 this.collapse();
48775                 this.fireEvent('select', this, record, index);
48776             }
48777         },
48778         
48779         flagEl : function()
48780         {
48781             var flag = this.el.select('div.flag',true).first();
48782             if(!flag){
48783                 return false;
48784             }
48785             return flag;
48786         },
48787         
48788         dialCodeHolderEl : function()
48789         {
48790             var d = this.el.select('input.dial-code-holder',true).first();
48791             if(!d){
48792                 return false;
48793             }
48794             return d;
48795         },
48796         
48797         setDialCode : function(v)
48798         {
48799             this.dialCodeHolder.dom.value = '+'+v;
48800         },
48801         
48802         setFlagClass : function(n)
48803         {
48804             this.flag.dom.className = 'flag '+n;
48805         },
48806         
48807         getValue : function()
48808         {
48809             var v = this.inputEl().getValue();
48810             if(this.dialCodeHolder) {
48811                 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
48812             }
48813             return v;
48814         },
48815         
48816         setValue : function(v)
48817         {
48818             var d = this.getDialCode(v);
48819             
48820             //invalid dial code
48821             if(v.length == 0 || !d || d.length == 0) {
48822                 if(this.rendered){
48823                     this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
48824                     this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
48825                 }
48826                 return;
48827             }
48828             
48829             //valid dial code
48830             this.setFlagClass(this.dialCodeMapping[d].iso2);
48831             this.setDialCode(d);
48832             this.inputEl().dom.value = v.replace('+'+d,'');
48833             this.hiddenEl().dom.value = this.getValue();
48834             
48835             this.validate();
48836         },
48837         
48838         getDialCode : function(v)
48839         {
48840             v = v ||  '';
48841             
48842             if (v.length == 0) {
48843                 return this.dialCodeHolder.dom.value;
48844             }
48845             
48846             var dialCode = "";
48847             if (v.charAt(0) != "+") {
48848                 return false;
48849             }
48850             var numericChars = "";
48851             for (var i = 1; i < v.length; i++) {
48852               var c = v.charAt(i);
48853               if (!isNaN(c)) {
48854                 numericChars += c;
48855                 if (this.dialCodeMapping[numericChars]) {
48856                   dialCode = v.substr(1, i);
48857                 }
48858                 if (numericChars.length == 4) {
48859                   break;
48860                 }
48861               }
48862             }
48863             return dialCode;
48864         },
48865         
48866         reset : function()
48867         {
48868             this.setValue(this.defaultDialCode);
48869             this.validate();
48870         },
48871         
48872         hiddenEl : function()
48873         {
48874             return this.el.select('input.hidden-tel-input',true).first();
48875         },
48876         
48877         // after setting val
48878         onKeyUp : function(e){
48879             this.setValue(this.getValue());
48880         },
48881         
48882         onKeyPress : function(e){
48883             if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
48884                 e.stopEvent();
48885             }
48886         }
48887         
48888 });
48889 /**
48890  * @class Roo.bootstrap.form.MoneyField
48891  * @extends Roo.bootstrap.form.ComboBox
48892  * Bootstrap MoneyField class
48893  * 
48894  * @constructor
48895  * Create a new MoneyField.
48896  * @param {Object} config Configuration options
48897  */
48898
48899 Roo.bootstrap.form.MoneyField = function(config) {
48900     
48901     Roo.bootstrap.form.MoneyField.superclass.constructor.call(this, config);
48902     
48903 };
48904
48905 Roo.extend(Roo.bootstrap.form.MoneyField, Roo.bootstrap.form.ComboBox, {
48906     
48907     /**
48908      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
48909      */
48910     allowDecimals : true,
48911     /**
48912      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
48913      */
48914     decimalSeparator : ".",
48915     /**
48916      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
48917      */
48918     decimalPrecision : 0,
48919     /**
48920      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
48921      */
48922     allowNegative : true,
48923     /**
48924      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
48925      */
48926     allowZero: true,
48927     /**
48928      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
48929      */
48930     minValue : Number.NEGATIVE_INFINITY,
48931     /**
48932      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
48933      */
48934     maxValue : Number.MAX_VALUE,
48935     /**
48936      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
48937      */
48938     minText : "The minimum value for this field is {0}",
48939     /**
48940      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
48941      */
48942     maxText : "The maximum value for this field is {0}",
48943     /**
48944      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
48945      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
48946      */
48947     nanText : "{0} is not a valid number",
48948     /**
48949      * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
48950      */
48951     castInt : true,
48952     /**
48953      * @cfg {String} defaults currency of the MoneyField
48954      * value should be in lkey
48955      */
48956     defaultCurrency : false,
48957     /**
48958      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
48959      */
48960     thousandsDelimiter : false,
48961     /**
48962      * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE)
48963      */
48964     max_length: false,
48965     
48966     inputlg : 9,
48967     inputmd : 9,
48968     inputsm : 9,
48969     inputxs : 6,
48970      /**
48971      * @cfg {Roo.data.Store} store  Store to lookup currency??
48972      */
48973     store : false,
48974     
48975     getAutoCreate : function()
48976     {
48977         var align = this.labelAlign || this.parentLabelAlign();
48978         
48979         var id = Roo.id();
48980
48981         var cfg = {
48982             cls: 'form-group',
48983             cn: []
48984         };
48985
48986         var input =  {
48987             tag: 'input',
48988             id : id,
48989             cls : 'form-control roo-money-amount-input',
48990             autocomplete: 'new-password'
48991         };
48992         
48993         var hiddenInput = {
48994             tag: 'input',
48995             type: 'hidden',
48996             id: Roo.id(),
48997             cls: 'hidden-number-input'
48998         };
48999         
49000         if(this.max_length) {
49001             input.maxlength = this.max_length; 
49002         }
49003         
49004         if (this.name) {
49005             hiddenInput.name = this.name;
49006         }
49007
49008         if (this.disabled) {
49009             input.disabled = true;
49010         }
49011
49012         var clg = 12 - this.inputlg;
49013         var cmd = 12 - this.inputmd;
49014         var csm = 12 - this.inputsm;
49015         var cxs = 12 - this.inputxs;
49016         
49017         var container = {
49018             tag : 'div',
49019             cls : 'row roo-money-field',
49020             cn : [
49021                 {
49022                     tag : 'div',
49023                     cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
49024                     cn : [
49025                         {
49026                             tag : 'div',
49027                             cls: 'roo-select2-container input-group',
49028                             cn: [
49029                                 {
49030                                     tag : 'input',
49031                                     cls : 'form-control roo-money-currency-input',
49032                                     autocomplete: 'new-password',
49033                                     readOnly : 1,
49034                                     name : this.currencyName
49035                                 },
49036                                 {
49037                                     tag :'span',
49038                                     cls : 'input-group-addon',
49039                                     cn : [
49040                                         {
49041                                             tag: 'span',
49042                                             cls: 'caret'
49043                                         }
49044                                     ]
49045                                 }
49046                             ]
49047                         }
49048                     ]
49049                 },
49050                 {
49051                     tag : 'div',
49052                     cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
49053                     cn : [
49054                         {
49055                             tag: 'div',
49056                             cls: this.hasFeedback ? 'has-feedback' : '',
49057                             cn: [
49058                                 input
49059                             ]
49060                         }
49061                     ]
49062                 }
49063             ]
49064             
49065         };
49066         
49067         if (this.fieldLabel.length) {
49068             var indicator = {
49069                 tag: 'i',
49070                 tooltip: 'This field is required'
49071             };
49072
49073             var label = {
49074                 tag: 'label',
49075                 'for':  id,
49076                 cls: 'control-label',
49077                 cn: []
49078             };
49079
49080             var label_text = {
49081                 tag: 'span',
49082                 html: this.fieldLabel
49083             };
49084
49085             indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
49086             label.cn = [
49087                 indicator,
49088                 label_text
49089             ];
49090
49091             if(this.indicatorpos == 'right') {
49092                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
49093                 label.cn = [
49094                     label_text,
49095                     indicator
49096                 ];
49097             }
49098
49099             if(align == 'left') {
49100                 container = {
49101                     tag: 'div',
49102                     cn: [
49103                         container
49104                     ]
49105                 };
49106
49107                 if(this.labelWidth > 12){
49108                     label.style = "width: " + this.labelWidth + 'px';
49109                 }
49110                 if(this.labelWidth < 13 && this.labelmd == 0){
49111                     this.labelmd = this.labelWidth;
49112                 }
49113                 if(this.labellg > 0){
49114                     label.cls += ' col-lg-' + this.labellg;
49115                     input.cls += ' col-lg-' + (12 - this.labellg);
49116                 }
49117                 if(this.labelmd > 0){
49118                     label.cls += ' col-md-' + this.labelmd;
49119                     container.cls += ' col-md-' + (12 - this.labelmd);
49120                 }
49121                 if(this.labelsm > 0){
49122                     label.cls += ' col-sm-' + this.labelsm;
49123                     container.cls += ' col-sm-' + (12 - this.labelsm);
49124                 }
49125                 if(this.labelxs > 0){
49126                     label.cls += ' col-xs-' + this.labelxs;
49127                     container.cls += ' col-xs-' + (12 - this.labelxs);
49128                 }
49129             }
49130         }
49131
49132         cfg.cn = [
49133             label,
49134             container,
49135             hiddenInput
49136         ];
49137         
49138         var settings = this;
49139
49140         ['xs','sm','md','lg'].map(function(size){
49141             if (settings[size]) {
49142                 cfg.cls += ' col-' + size + '-' + settings[size];
49143             }
49144         });
49145         
49146         return cfg;
49147     },
49148     
49149     initEvents : function()
49150     {
49151         this.indicator = this.indicatorEl();
49152         
49153         this.initCurrencyEvent();
49154         
49155         this.initNumberEvent();
49156     },
49157     
49158     initCurrencyEvent : function()
49159     {
49160         if (!this.store) {
49161             throw "can not find store for combo";
49162         }
49163         
49164         this.store = Roo.factory(this.store, Roo.data);
49165         this.store.parent = this;
49166         
49167         this.createList();
49168         
49169         this.triggerEl = this.el.select('.input-group-addon', true).first();
49170         
49171         this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
49172         
49173         var _this = this;
49174         
49175         (function(){
49176             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
49177             _this.list.setWidth(lw);
49178         }).defer(100);
49179         
49180         this.list.on('mouseover', this.onViewOver, this);
49181         this.list.on('mousemove', this.onViewMove, this);
49182         this.list.on('scroll', this.onViewScroll, this);
49183         
49184         if(!this.tpl){
49185             this.tpl = '<li><a href="#">{' + this.currencyField + '}</a></li>';
49186         }
49187         
49188         this.view = new Roo.View(this.list, this.tpl, {
49189             singleSelect:true, store: this.store, selectedClass: this.selectedClass
49190         });
49191         
49192         this.view.on('click', this.onViewClick, this);
49193         
49194         this.store.on('beforeload', this.onBeforeLoad, this);
49195         this.store.on('load', this.onLoad, this);
49196         this.store.on('loadexception', this.onLoadException, this);
49197         
49198         this.keyNav = new Roo.KeyNav(this.currencyEl(), {
49199             "up" : function(e){
49200                 this.inKeyMode = true;
49201                 this.selectPrev();
49202             },
49203
49204             "down" : function(e){
49205                 if(!this.isExpanded()){
49206                     this.onTriggerClick();
49207                 }else{
49208                     this.inKeyMode = true;
49209                     this.selectNext();
49210                 }
49211             },
49212
49213             "enter" : function(e){
49214                 this.collapse();
49215                 
49216                 if(this.fireEvent("specialkey", this, e)){
49217                     this.onViewClick(false);
49218                 }
49219                 
49220                 return true;
49221             },
49222
49223             "esc" : function(e){
49224                 this.collapse();
49225             },
49226
49227             "tab" : function(e){
49228                 this.collapse();
49229                 
49230                 if(this.fireEvent("specialkey", this, e)){
49231                     this.onViewClick(false);
49232                 }
49233                 
49234                 return true;
49235             },
49236
49237             scope : this,
49238
49239             doRelay : function(foo, bar, hname){
49240                 if(hname == 'down' || this.scope.isExpanded()){
49241                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
49242                 }
49243                 return true;
49244             },
49245
49246             forceKeyDown: true
49247         });
49248         
49249         this.currencyEl().on("click", this.onTriggerClick, this, { preventDefault : true });
49250         
49251     },
49252     
49253     initNumberEvent : function(e)
49254     {
49255         this.inputEl().on("keydown" , this.fireKey,  this);
49256         this.inputEl().on("focus", this.onFocus,  this);
49257         this.inputEl().on("blur", this.onBlur,  this);
49258         
49259         this.inputEl().relayEvent('keyup', this);
49260         
49261         if(this.indicator){
49262             this.indicator.addClass('invisible');
49263         }
49264  
49265         this.originalValue = this.getValue();
49266         
49267         if(this.validationEvent == 'keyup'){
49268             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
49269             this.inputEl().on('keyup', this.filterValidation, this);
49270         }
49271         else if(this.validationEvent !== false){
49272             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
49273         }
49274         
49275         if(this.selectOnFocus){
49276             this.on("focus", this.preFocus, this);
49277             
49278         }
49279         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
49280             this.inputEl().on("keypress", this.filterKeys, this);
49281         } else {
49282             this.inputEl().relayEvent('keypress', this);
49283         }
49284         
49285         var allowed = "0123456789";
49286         
49287         if(this.allowDecimals){
49288             allowed += this.decimalSeparator;
49289         }
49290         
49291         if(this.allowNegative){
49292             allowed += "-";
49293         }
49294         
49295         if(this.thousandsDelimiter) {
49296             allowed += ",";
49297         }
49298         
49299         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
49300         
49301         var keyPress = function(e){
49302             
49303             var k = e.getKey();
49304             
49305             var c = e.getCharCode();
49306             
49307             if(
49308                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
49309                     allowed.indexOf(String.fromCharCode(c)) === -1
49310             ){
49311                 e.stopEvent();
49312                 return;
49313             }
49314             
49315             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
49316                 return;
49317             }
49318             
49319             if(allowed.indexOf(String.fromCharCode(c)) === -1){
49320                 e.stopEvent();
49321             }
49322         };
49323         
49324         this.inputEl().on("keypress", keyPress, this);
49325         
49326     },
49327     
49328     onTriggerClick : function(e)
49329     {   
49330         if(this.disabled){
49331             return;
49332         }
49333         
49334         this.page = 0;
49335         this.loadNext = false;
49336         
49337         if(this.isExpanded()){
49338             this.collapse();
49339             return;
49340         }
49341         
49342         this.hasFocus = true;
49343         
49344         if(this.triggerAction == 'all') {
49345             this.doQuery(this.allQuery, true);
49346             return;
49347         }
49348         
49349         this.doQuery(this.getRawValue());
49350     },
49351     
49352     getCurrency : function()
49353     {   
49354         var v = this.currencyEl().getValue();
49355         
49356         return v;
49357     },
49358     
49359     restrictHeight : function()
49360     {
49361         this.list.alignTo(this.currencyEl(), this.listAlign);
49362         this.list.alignTo(this.currencyEl(), this.listAlign);
49363     },
49364     
49365     onViewClick : function(view, doFocus, el, e)
49366     {
49367         var index = this.view.getSelectedIndexes()[0];
49368         
49369         var r = this.store.getAt(index);
49370         
49371         if(r){
49372             this.onSelect(r, index);
49373         }
49374     },
49375     
49376     onSelect : function(record, index){
49377         
49378         if(this.fireEvent('beforeselect', this, record, index) !== false){
49379         
49380             this.setFromCurrencyData(index > -1 ? record.data : false);
49381             
49382             this.collapse();
49383             
49384             this.fireEvent('select', this, record, index);
49385         }
49386     },
49387     
49388     setFromCurrencyData : function(o)
49389     {
49390         var currency = '';
49391         
49392         this.lastCurrency = o;
49393         
49394         if (this.currencyField) {
49395             currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField];
49396         } else {
49397             Roo.log('no  currencyField value set for '+ (this.name ? this.name : this.id));
49398         }
49399         
49400         this.lastSelectionText = currency;
49401         
49402         //setting default currency
49403         if(o[this.currencyField] * 1 == 0 && this.defaultCurrency) {
49404             this.setCurrency(this.defaultCurrency);
49405             return;
49406         }
49407         
49408         this.setCurrency(currency);
49409     },
49410     
49411     setFromData : function(o)
49412     {
49413         var c = {};
49414         
49415         c[this.currencyField] = !o || typeof(o[this.currencyName]) == 'undefined' ? '' : o[this.currencyName];
49416         
49417         this.setFromCurrencyData(c);
49418         
49419         var value = '';
49420         
49421         if (this.name) {
49422             value = !o || typeof(o[this.name]) == 'undefined' ? '' : o[this.name];
49423         } else {
49424             Roo.log('no value set for '+ (this.name ? this.name : this.id));
49425         }
49426         
49427         this.setValue(value);
49428         
49429     },
49430     
49431     setCurrency : function(v)
49432     {   
49433         this.currencyValue = v;
49434         
49435         if(this.rendered){
49436             this.currencyEl().dom.value = (v === null || v === undefined ? '' : v);
49437             this.validate();
49438         }
49439     },
49440     
49441     setValue : function(v)
49442     {
49443         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
49444         
49445         this.value = v;
49446         
49447         if(this.rendered){
49448             
49449             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
49450             
49451             this.inputEl().dom.value = (v == '') ? '' :
49452                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
49453             
49454             if(!this.allowZero && v === '0') {
49455                 this.hiddenEl().dom.value = '';
49456                 this.inputEl().dom.value = '';
49457             }
49458             
49459             this.validate();
49460         }
49461     },
49462     
49463     getRawValue : function()
49464     {
49465         var v = this.inputEl().getValue();
49466         
49467         return v;
49468     },
49469     
49470     getValue : function()
49471     {
49472         return this.fixPrecision(this.parseValue(this.getRawValue()));
49473     },
49474     
49475     parseValue : function(value)
49476     {
49477         if(this.thousandsDelimiter) {
49478             value += "";
49479             r = new RegExp(",", "g");
49480             value = value.replace(r, "");
49481         }
49482         
49483         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
49484         return isNaN(value) ? '' : value;
49485         
49486     },
49487     
49488     fixPrecision : function(value)
49489     {
49490         if(this.thousandsDelimiter) {
49491             value += "";
49492             r = new RegExp(",", "g");
49493             value = value.replace(r, "");
49494         }
49495         
49496         var nan = isNaN(value);
49497         
49498         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
49499             return nan ? '' : value;
49500         }
49501         return parseFloat(value).toFixed(this.decimalPrecision);
49502     },
49503     
49504     decimalPrecisionFcn : function(v)
49505     {
49506         return Math.floor(v);
49507     },
49508     
49509     validateValue : function(value)
49510     {
49511         if(!Roo.bootstrap.form.MoneyField.superclass.validateValue.call(this, value)){
49512             return false;
49513         }
49514         
49515         var num = this.parseValue(value);
49516         
49517         if(isNaN(num)){
49518             this.markInvalid(String.format(this.nanText, value));
49519             return false;
49520         }
49521         
49522         if(num < this.minValue){
49523             this.markInvalid(String.format(this.minText, this.minValue));
49524             return false;
49525         }
49526         
49527         if(num > this.maxValue){
49528             this.markInvalid(String.format(this.maxText, this.maxValue));
49529             return false;
49530         }
49531         
49532         return true;
49533     },
49534     
49535     validate : function()
49536     {
49537         if(this.disabled || this.allowBlank){
49538             this.markValid();
49539             return true;
49540         }
49541         
49542         var currency = this.getCurrency();
49543         
49544         if(this.validateValue(this.getRawValue()) && currency.length){
49545             this.markValid();
49546             return true;
49547         }
49548         
49549         this.markInvalid();
49550         return false;
49551     },
49552     
49553     getName: function()
49554     {
49555         return this.name;
49556     },
49557     
49558     beforeBlur : function()
49559     {
49560         if(!this.castInt){
49561             return;
49562         }
49563         
49564         var v = this.parseValue(this.getRawValue());
49565         
49566         if(v || v == 0){
49567             this.setValue(v);
49568         }
49569     },
49570     
49571     onBlur : function()
49572     {
49573         this.beforeBlur();
49574         
49575         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
49576             //this.el.removeClass(this.focusClass);
49577         }
49578         
49579         this.hasFocus = false;
49580         
49581         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
49582             this.validate();
49583         }
49584         
49585         var v = this.getValue();
49586         
49587         if(String(v) !== String(this.startValue)){
49588             this.fireEvent('change', this, v, this.startValue);
49589         }
49590         
49591         this.fireEvent("blur", this);
49592     },
49593     
49594     inputEl : function()
49595     {
49596         return this.el.select('.roo-money-amount-input', true).first();
49597     },
49598     
49599     currencyEl : function()
49600     {
49601         return this.el.select('.roo-money-currency-input', true).first();
49602     },
49603     
49604     hiddenEl : function()
49605     {
49606         return this.el.select('input.hidden-number-input',true).first();
49607     }
49608     
49609 });/**
49610  * @class Roo.bootstrap.BezierSignature
49611  * @extends Roo.bootstrap.Component
49612  * Bootstrap BezierSignature class
49613  * This script refer to:
49614  *    Title: Signature Pad
49615  *    Author: szimek
49616  *    Availability: https://github.com/szimek/signature_pad
49617  *
49618  * @constructor
49619  * Create a new BezierSignature
49620  * @param {Object} config The config object
49621  */
49622
49623 Roo.bootstrap.BezierSignature = function(config){
49624     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
49625     this.addEvents({
49626         "resize" : true
49627     });
49628 };
49629
49630 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
49631 {
49632      
49633     curve_data: [],
49634     
49635     is_empty: true,
49636     
49637     mouse_btn_down: true,
49638     
49639     /**
49640      * @cfg {int} canvas height
49641      */
49642     canvas_height: '200px',
49643     
49644     /**
49645      * @cfg {float|function} Radius of a single dot.
49646      */ 
49647     dot_size: false,
49648     
49649     /**
49650      * @cfg {float} Minimum width of a line. Defaults to 0.5.
49651      */
49652     min_width: 0.5,
49653     
49654     /**
49655      * @cfg {float} Maximum width of a line. Defaults to 2.5.
49656      */
49657     max_width: 2.5,
49658     
49659     /**
49660      * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
49661      */
49662     throttle: 16,
49663     
49664     /**
49665      * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
49666      */
49667     min_distance: 5,
49668     
49669     /**
49670      * @cfg {string} Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
49671      */
49672     bg_color: 'rgba(0, 0, 0, 0)',
49673     
49674     /**
49675      * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
49676      */
49677     dot_color: 'black',
49678     
49679     /**
49680      * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
49681      */ 
49682     velocity_filter_weight: 0.7,
49683     
49684     /**
49685      * @cfg {function} Callback when stroke begin. 
49686      */
49687     onBegin: false,
49688     
49689     /**
49690      * @cfg {function} Callback when stroke end.
49691      */
49692     onEnd: false,
49693     
49694     getAutoCreate : function()
49695     {
49696         var cls = 'roo-signature column';
49697         
49698         if(this.cls){
49699             cls += ' ' + this.cls;
49700         }
49701         
49702         var col_sizes = [
49703             'lg',
49704             'md',
49705             'sm',
49706             'xs'
49707         ];
49708         
49709         for(var i = 0; i < col_sizes.length; i++) {
49710             if(this[col_sizes[i]]) {
49711                 cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
49712             }
49713         }
49714         
49715         var cfg = {
49716             tag: 'div',
49717             cls: cls,
49718             cn: [
49719                 {
49720                     tag: 'div',
49721                     cls: 'roo-signature-body',
49722                     cn: [
49723                         {
49724                             tag: 'canvas',
49725                             cls: 'roo-signature-body-canvas',
49726                             height: this.canvas_height,
49727                             width: this.canvas_width
49728                         }
49729                     ]
49730                 },
49731                 {
49732                     tag: 'input',
49733                     type: 'file',
49734                     style: 'display: none'
49735                 }
49736             ]
49737         };
49738         
49739         return cfg;
49740     },
49741     
49742     initEvents: function() 
49743     {
49744         Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
49745         
49746         var canvas = this.canvasEl();
49747         
49748         // mouse && touch event swapping...
49749         canvas.dom.style.touchAction = 'none';
49750         canvas.dom.style.msTouchAction = 'none';
49751         
49752         this.mouse_btn_down = false;
49753         canvas.on('mousedown', this._handleMouseDown, this);
49754         canvas.on('mousemove', this._handleMouseMove, this);
49755         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
49756         
49757         if (window.PointerEvent) {
49758             canvas.on('pointerdown', this._handleMouseDown, this);
49759             canvas.on('pointermove', this._handleMouseMove, this);
49760             Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
49761         }
49762         
49763         if ('ontouchstart' in window) {
49764             canvas.on('touchstart', this._handleTouchStart, this);
49765             canvas.on('touchmove', this._handleTouchMove, this);
49766             canvas.on('touchend', this._handleTouchEnd, this);
49767         }
49768         
49769         Roo.EventManager.onWindowResize(this.resize, this, true);
49770         
49771         // file input event
49772         this.fileEl().on('change', this.uploadImage, this);
49773         
49774         this.clear();
49775         
49776         this.resize();
49777     },
49778     
49779     resize: function(){
49780         
49781         var canvas = this.canvasEl().dom;
49782         var ctx = this.canvasElCtx();
49783         var img_data = false;
49784         
49785         if(canvas.width > 0) {
49786             var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
49787         }
49788         // setting canvas width will clean img data
49789         canvas.width = 0;
49790         
49791         var style = window.getComputedStyle ? 
49792             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
49793             
49794         var padding_left = parseInt(style.paddingLeft) || 0;
49795         var padding_right = parseInt(style.paddingRight) || 0;
49796         
49797         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
49798         
49799         if(img_data) {
49800             ctx.putImageData(img_data, 0, 0);
49801         }
49802     },
49803     
49804     _handleMouseDown: function(e)
49805     {
49806         if (e.browserEvent.which === 1) {
49807             this.mouse_btn_down = true;
49808             this.strokeBegin(e);
49809         }
49810     },
49811     
49812     _handleMouseMove: function (e)
49813     {
49814         if (this.mouse_btn_down) {
49815             this.strokeMoveUpdate(e);
49816         }
49817     },
49818     
49819     _handleMouseUp: function (e)
49820     {
49821         if (e.browserEvent.which === 1 && this.mouse_btn_down) {
49822             this.mouse_btn_down = false;
49823             this.strokeEnd(e);
49824         }
49825     },
49826     
49827     _handleTouchStart: function (e) {
49828         
49829         e.preventDefault();
49830         if (e.browserEvent.targetTouches.length === 1) {
49831             // var touch = e.browserEvent.changedTouches[0];
49832             // this.strokeBegin(touch);
49833             
49834              this.strokeBegin(e); // assume e catching the correct xy...
49835         }
49836     },
49837     
49838     _handleTouchMove: function (e) {
49839         e.preventDefault();
49840         // var touch = event.targetTouches[0];
49841         // _this._strokeMoveUpdate(touch);
49842         this.strokeMoveUpdate(e);
49843     },
49844     
49845     _handleTouchEnd: function (e) {
49846         var wasCanvasTouched = e.target === this.canvasEl().dom;
49847         if (wasCanvasTouched) {
49848             e.preventDefault();
49849             // var touch = event.changedTouches[0];
49850             // _this._strokeEnd(touch);
49851             this.strokeEnd(e);
49852         }
49853     },
49854     
49855     reset: function () {
49856         this._lastPoints = [];
49857         this._lastVelocity = 0;
49858         this._lastWidth = (this.min_width + this.max_width) / 2;
49859         this.canvasElCtx().fillStyle = this.dot_color;
49860     },
49861     
49862     strokeMoveUpdate: function(e)
49863     {
49864         this.strokeUpdate(e);
49865         
49866         if (this.throttle) {
49867             this.throttleStroke(this.strokeUpdate, this.throttle);
49868         }
49869         else {
49870             this.strokeUpdate(e);
49871         }
49872     },
49873     
49874     strokeBegin: function(e)
49875     {
49876         var newPointGroup = {
49877             color: this.dot_color,
49878             points: []
49879         };
49880         
49881         if (typeof this.onBegin === 'function') {
49882             this.onBegin(e);
49883         }
49884         
49885         this.curve_data.push(newPointGroup);
49886         this.reset();
49887         this.strokeUpdate(e);
49888     },
49889     
49890     strokeUpdate: function(e)
49891     {
49892         var rect = this.canvasEl().dom.getBoundingClientRect();
49893         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
49894         var lastPointGroup = this.curve_data[this.curve_data.length - 1];
49895         var lastPoints = lastPointGroup.points;
49896         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
49897         var isLastPointTooClose = lastPoint
49898             ? point.distanceTo(lastPoint) <= this.min_distance
49899             : false;
49900         var color = lastPointGroup.color;
49901         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
49902             var curve = this.addPoint(point);
49903             if (!lastPoint) {
49904                 this.drawDot({color: color, point: point});
49905             }
49906             else if (curve) {
49907                 this.drawCurve({color: color, curve: curve});
49908             }
49909             lastPoints.push({
49910                 time: point.time,
49911                 x: point.x,
49912                 y: point.y
49913             });
49914         }
49915     },
49916     
49917     strokeEnd: function(e)
49918     {
49919         this.strokeUpdate(e);
49920         if (typeof this.onEnd === 'function') {
49921             this.onEnd(e);
49922         }
49923     },
49924     
49925     addPoint:  function (point) {
49926         var _lastPoints = this._lastPoints;
49927         _lastPoints.push(point);
49928         if (_lastPoints.length > 2) {
49929             if (_lastPoints.length === 3) {
49930                 _lastPoints.unshift(_lastPoints[0]);
49931             }
49932             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
49933             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
49934             _lastPoints.shift();
49935             return curve;
49936         }
49937         return null;
49938     },
49939     
49940     calculateCurveWidths: function (startPoint, endPoint) {
49941         var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
49942             (1 - this.velocity_filter_weight) * this._lastVelocity;
49943
49944         var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
49945         var widths = {
49946             end: newWidth,
49947             start: this._lastWidth
49948         };
49949         
49950         this._lastVelocity = velocity;
49951         this._lastWidth = newWidth;
49952         return widths;
49953     },
49954     
49955     drawDot: function (_a) {
49956         var color = _a.color, point = _a.point;
49957         var ctx = this.canvasElCtx();
49958         var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
49959         ctx.beginPath();
49960         this.drawCurveSegment(point.x, point.y, width);
49961         ctx.closePath();
49962         ctx.fillStyle = color;
49963         ctx.fill();
49964     },
49965     
49966     drawCurve: function (_a) {
49967         var color = _a.color, curve = _a.curve;
49968         var ctx = this.canvasElCtx();
49969         var widthDelta = curve.endWidth - curve.startWidth;
49970         var drawSteps = Math.floor(curve.length()) * 2;
49971         ctx.beginPath();
49972         ctx.fillStyle = color;
49973         for (var i = 0; i < drawSteps; i += 1) {
49974         var t = i / drawSteps;
49975         var tt = t * t;
49976         var ttt = tt * t;
49977         var u = 1 - t;
49978         var uu = u * u;
49979         var uuu = uu * u;
49980         var x = uuu * curve.startPoint.x;
49981         x += 3 * uu * t * curve.control1.x;
49982         x += 3 * u * tt * curve.control2.x;
49983         x += ttt * curve.endPoint.x;
49984         var y = uuu * curve.startPoint.y;
49985         y += 3 * uu * t * curve.control1.y;
49986         y += 3 * u * tt * curve.control2.y;
49987         y += ttt * curve.endPoint.y;
49988         var width = curve.startWidth + ttt * widthDelta;
49989         this.drawCurveSegment(x, y, width);
49990         }
49991         ctx.closePath();
49992         ctx.fill();
49993     },
49994     
49995     drawCurveSegment: function (x, y, width) {
49996         var ctx = this.canvasElCtx();
49997         ctx.moveTo(x, y);
49998         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
49999         this.is_empty = false;
50000     },
50001     
50002     clear: function()
50003     {
50004         var ctx = this.canvasElCtx();
50005         var canvas = this.canvasEl().dom;
50006         ctx.fillStyle = this.bg_color;
50007         ctx.clearRect(0, 0, canvas.width, canvas.height);
50008         ctx.fillRect(0, 0, canvas.width, canvas.height);
50009         this.curve_data = [];
50010         this.reset();
50011         this.is_empty = true;
50012     },
50013     
50014     fileEl: function()
50015     {
50016         return  this.el.select('input',true).first();
50017     },
50018     
50019     canvasEl: function()
50020     {
50021         return this.el.select('canvas',true).first();
50022     },
50023     
50024     canvasElCtx: function()
50025     {
50026         return this.el.select('canvas',true).first().dom.getContext('2d');
50027     },
50028     
50029     getImage: function(type)
50030     {
50031         if(this.is_empty) {
50032             return false;
50033         }
50034         
50035         // encryption ?
50036         return this.canvasEl().dom.toDataURL('image/'+type, 1);
50037     },
50038     
50039     drawFromImage: function(img_src)
50040     {
50041         var img = new Image();
50042         
50043         img.onload = function(){
50044             this.canvasElCtx().drawImage(img, 0, 0);
50045         }.bind(this);
50046         
50047         img.src = img_src;
50048         
50049         this.is_empty = false;
50050     },
50051     
50052     selectImage: function()
50053     {
50054         this.fileEl().dom.click();
50055     },
50056     
50057     uploadImage: function(e)
50058     {
50059         var reader = new FileReader();
50060         
50061         reader.onload = function(e){
50062             var img = new Image();
50063             img.onload = function(){
50064                 this.reset();
50065                 this.canvasElCtx().drawImage(img, 0, 0);
50066             }.bind(this);
50067             img.src = e.target.result;
50068         }.bind(this);
50069         
50070         reader.readAsDataURL(e.target.files[0]);
50071     },
50072     
50073     // Bezier Point Constructor
50074     Point: (function () {
50075         function Point(x, y, time) {
50076             this.x = x;
50077             this.y = y;
50078             this.time = time || Date.now();
50079         }
50080         Point.prototype.distanceTo = function (start) {
50081             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
50082         };
50083         Point.prototype.equals = function (other) {
50084             return this.x === other.x && this.y === other.y && this.time === other.time;
50085         };
50086         Point.prototype.velocityFrom = function (start) {
50087             return this.time !== start.time
50088             ? this.distanceTo(start) / (this.time - start.time)
50089             : 0;
50090         };
50091         return Point;
50092     }()),
50093     
50094     
50095     // Bezier Constructor
50096     Bezier: (function () {
50097         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
50098             this.startPoint = startPoint;
50099             this.control2 = control2;
50100             this.control1 = control1;
50101             this.endPoint = endPoint;
50102             this.startWidth = startWidth;
50103             this.endWidth = endWidth;
50104         }
50105         Bezier.fromPoints = function (points, widths, scope) {
50106             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
50107             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
50108             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
50109         };
50110         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
50111             var dx1 = s1.x - s2.x;
50112             var dy1 = s1.y - s2.y;
50113             var dx2 = s2.x - s3.x;
50114             var dy2 = s2.y - s3.y;
50115             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
50116             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
50117             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
50118             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
50119             var dxm = m1.x - m2.x;
50120             var dym = m1.y - m2.y;
50121             var k = l2 / (l1 + l2);
50122             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
50123             var tx = s2.x - cm.x;
50124             var ty = s2.y - cm.y;
50125             return {
50126                 c1: new scope.Point(m1.x + tx, m1.y + ty),
50127                 c2: new scope.Point(m2.x + tx, m2.y + ty)
50128             };
50129         };
50130         Bezier.prototype.length = function () {
50131             var steps = 10;
50132             var length = 0;
50133             var px;
50134             var py;
50135             for (var i = 0; i <= steps; i += 1) {
50136                 var t = i / steps;
50137                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
50138                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
50139                 if (i > 0) {
50140                     var xdiff = cx - px;
50141                     var ydiff = cy - py;
50142                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
50143                 }
50144                 px = cx;
50145                 py = cy;
50146             }
50147             return length;
50148         };
50149         Bezier.prototype.point = function (t, start, c1, c2, end) {
50150             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
50151             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
50152             + (3.0 * c2 * (1.0 - t) * t * t)
50153             + (end * t * t * t);
50154         };
50155         return Bezier;
50156     }()),
50157     
50158     throttleStroke: function(fn, wait) {
50159       if (wait === void 0) { wait = 250; }
50160       var previous = 0;
50161       var timeout = null;
50162       var result;
50163       var storedContext;
50164       var storedArgs;
50165       var later = function () {
50166           previous = Date.now();
50167           timeout = null;
50168           result = fn.apply(storedContext, storedArgs);
50169           if (!timeout) {
50170               storedContext = null;
50171               storedArgs = [];
50172           }
50173       };
50174       return function wrapper() {
50175           var args = [];
50176           for (var _i = 0; _i < arguments.length; _i++) {
50177               args[_i] = arguments[_i];
50178           }
50179           var now = Date.now();
50180           var remaining = wait - (now - previous);
50181           storedContext = this;
50182           storedArgs = args;
50183           if (remaining <= 0 || remaining > wait) {
50184               if (timeout) {
50185                   clearTimeout(timeout);
50186                   timeout = null;
50187               }
50188               previous = now;
50189               result = fn.apply(storedContext, storedArgs);
50190               if (!timeout) {
50191                   storedContext = null;
50192                   storedArgs = [];
50193               }
50194           }
50195           else if (!timeout) {
50196               timeout = window.setTimeout(later, remaining);
50197           }
50198           return result;
50199       };
50200   }
50201   
50202 });
50203
50204  
50205
50206  // old names for form elements
50207 Roo.bootstrap.Form          =   Roo.bootstrap.form.Form;
50208 Roo.bootstrap.Input         =   Roo.bootstrap.form.Input;
50209 Roo.bootstrap.TextArea      =   Roo.bootstrap.form.TextArea;
50210 Roo.bootstrap.TriggerField  =   Roo.bootstrap.form.TriggerField;
50211 Roo.bootstrap.ComboBox      =   Roo.bootstrap.form.ComboBox;
50212 Roo.bootstrap.DateField     =   Roo.bootstrap.form.DateField;
50213 Roo.bootstrap.TimeField     =   Roo.bootstrap.form.TimeField;
50214 Roo.bootstrap.MonthField    =   Roo.bootstrap.form.MonthField;
50215 Roo.bootstrap.CheckBox      =   Roo.bootstrap.form.CheckBox;
50216 Roo.bootstrap.Radio         =   Roo.bootstrap.form.Radio;
50217 Roo.bootstrap.RadioSet      =   Roo.bootstrap.form.RadioSet;
50218 Roo.bootstrap.SecurePass    =   Roo.bootstrap.form.SecurePass;
50219 Roo.bootstrap.FieldLabel    =   Roo.bootstrap.form.FieldLabel;
50220 Roo.bootstrap.DateSplitField=   Roo.bootstrap.form.DateSplitField;
50221 Roo.bootstrap.NumberField   =   Roo.bootstrap.form.NumberField;
50222 Roo.bootstrap.PhoneInput    =   Roo.bootstrap.form.PhoneInput;
50223 Roo.bootstrap.PhoneInputData=   Roo.bootstrap.form.PhoneInputData;
50224 Roo.bootstrap.MoneyField    =   Roo.bootstrap.form.MoneyField;
50225 Roo.bootstrap.HtmlEditor    =   Roo.bootstrap.form.HtmlEditor;
50226 Roo.bootstrap.HtmlEditor.ToolbarStandard =   Roo.bootstrap.form.HtmlEditorToolbarStandard;
50227 Roo.bootstrap.Markdown      = Roo.bootstrap.form.Markdown;
50228 Roo.bootstrap.CardUploader  = Roo.bootstrap.form.CardUploader;// depricated.
50229 Roo.bootstrap.Navbar            = Roo.bootstrap.nav.Bar;
50230 Roo.bootstrap.NavGroup          = Roo.bootstrap.nav.Group;
50231 Roo.bootstrap.NavHeaderbar      = Roo.bootstrap.nav.Headerbar;
50232 Roo.bootstrap.NavItem           = Roo.bootstrap.nav.Item;
50233
50234 Roo.bootstrap.NavProgressBar     = Roo.bootstrap.nav.ProgressBar;
50235 Roo.bootstrap.NavProgressBarItem = Roo.bootstrap.nav.ProgressBarItem;
50236
50237 Roo.bootstrap.NavSidebar        = Roo.bootstrap.nav.Sidebar;
50238 Roo.bootstrap.NavSidebarItem    = Roo.bootstrap.nav.SidebarItem;
50239
50240 Roo.bootstrap.NavSimplebar      = Roo.bootstrap.nav.Simplebar;// deprciated 
50241 Roo.bootstrap.Menu = Roo.bootstrap.menu.Menu;
50242 Roo.bootstrap.MenuItem =  Roo.bootstrap.menu.Item;
50243 Roo.bootstrap.MenuSeparator = Roo.bootstrap.menu.Separator
50244