fix #7444-New_Customer_Portal_200_Design
[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  * Based on:
22  * Ext JS Library 1.1.1
23  * Copyright(c) 2006-2007, Ext JS, LLC.
24  *
25  * Originally Released Under LGPL - original licence link has changed is not relivant.
26  *
27  * Fork - LGPL
28  * <script type="text/javascript">
29  */
30
31
32 /**
33  * @class Roo.Shadow
34  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
35  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
36  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
37  * @constructor
38  * Create a new Shadow
39  * @param {Object} config The config object
40  */
41 Roo.Shadow = function(config){
42     Roo.apply(this, config);
43     if(typeof this.mode != "string"){
44         this.mode = this.defaultMode;
45     }
46     var o = this.offset, a = {h: 0};
47     var rad = Math.floor(this.offset/2);
48     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
49         case "drop":
50             a.w = 0;
51             a.l = a.t = o;
52             a.t -= 1;
53             if(Roo.isIE){
54                 a.l -= this.offset + rad;
55                 a.t -= this.offset + rad;
56                 a.w -= rad;
57                 a.h -= rad;
58                 a.t += 1;
59             }
60         break;
61         case "sides":
62             a.w = (o*2);
63             a.l = -o;
64             a.t = o-1;
65             if(Roo.isIE){
66                 a.l -= (this.offset - rad);
67                 a.t -= this.offset + rad;
68                 a.l += 1;
69                 a.w -= (this.offset - rad)*2;
70                 a.w -= rad + 1;
71                 a.h -= 1;
72             }
73         break;
74         case "frame":
75             a.w = a.h = (o*2);
76             a.l = a.t = -o;
77             a.t += 1;
78             a.h -= 2;
79             if(Roo.isIE){
80                 a.l -= (this.offset - rad);
81                 a.t -= (this.offset - rad);
82                 a.l += 1;
83                 a.w -= (this.offset + rad + 1);
84                 a.h -= (this.offset + rad);
85                 a.h += 1;
86             }
87         break;
88     };
89
90     this.adjusts = a;
91 };
92
93 Roo.Shadow.prototype = {
94     /**
95      * @cfg {String} mode
96      * The shadow display mode.  Supports the following options:<br />
97      * sides: Shadow displays on both sides and bottom only<br />
98      * frame: Shadow displays equally on all four sides<br />
99      * drop: Traditional bottom-right drop shadow (default)
100      */
101     mode: false,
102     /**
103      * @cfg {String} offset
104      * The number of pixels to offset the shadow from the element (defaults to 4)
105      */
106     offset: 4,
107
108     // private
109     defaultMode: "drop",
110
111     /**
112      * Displays the shadow under the target element
113      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
114      */
115     show : function(target){
116         target = Roo.get(target);
117         if(!this.el){
118             this.el = Roo.Shadow.Pool.pull();
119             if(this.el.dom.nextSibling != target.dom){
120                 this.el.insertBefore(target);
121             }
122         }
123         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
124         if(Roo.isIE){
125             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
126         }
127         this.realign(
128             target.getLeft(true),
129             target.getTop(true),
130             target.getWidth(),
131             target.getHeight()
132         );
133         this.el.dom.style.display = "block";
134     },
135
136     /**
137      * Returns true if the shadow is visible, else false
138      */
139     isVisible : function(){
140         return this.el ? true : false;  
141     },
142
143     /**
144      * Direct alignment when values are already available. Show must be called at least once before
145      * calling this method to ensure it is initialized.
146      * @param {Number} left The target element left position
147      * @param {Number} top The target element top position
148      * @param {Number} width The target element width
149      * @param {Number} height The target element height
150      */
151     realign : function(l, t, w, h){
152         if(!this.el){
153             return;
154         }
155         var a = this.adjusts, d = this.el.dom, s = d.style;
156         var iea = 0;
157         s.left = (l+a.l)+"px";
158         s.top = (t+a.t)+"px";
159         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
160  
161         if(s.width != sws || s.height != shs){
162             s.width = sws;
163             s.height = shs;
164             if(!Roo.isIE){
165                 var cn = d.childNodes;
166                 var sww = Math.max(0, (sw-12))+"px";
167                 cn[0].childNodes[1].style.width = sww;
168                 cn[1].childNodes[1].style.width = sww;
169                 cn[2].childNodes[1].style.width = sww;
170                 cn[1].style.height = Math.max(0, (sh-12))+"px";
171             }
172         }
173     },
174
175     /**
176      * Hides this shadow
177      */
178     hide : function(){
179         if(this.el){
180             this.el.dom.style.display = "none";
181             Roo.Shadow.Pool.push(this.el);
182             delete this.el;
183         }
184     },
185
186     /**
187      * Adjust the z-index of this shadow
188      * @param {Number} zindex The new z-index
189      */
190     setZIndex : function(z){
191         this.zIndex = z;
192         if(this.el){
193             this.el.setStyle("z-index", z);
194         }
195     }
196 };
197
198 // Private utility class that manages the internal Shadow cache
199 Roo.Shadow.Pool = function(){
200     var p = [];
201     var markup = Roo.isIE ?
202                  '<div class="x-ie-shadow"></div>' :
203                  '<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>';
204     return {
205         pull : function(){
206             var sh = p.shift();
207             if(!sh){
208                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
209                 sh.autoBoxAdjust = false;
210             }
211             return sh;
212         },
213
214         push : function(sh){
215             p.push(sh);
216         }
217     };
218 }();/*
219  * - LGPL
220  *
221  * base class for bootstrap elements.
222  * 
223  */
224
225 Roo.bootstrap = Roo.bootstrap || {};
226 /**
227  * @class Roo.bootstrap.Component
228  * @extends Roo.Component
229  * @abstract
230  * @children Roo.bootstrap.Component
231  * Bootstrap Component base class
232  * @cfg {String} cls css class
233  * @cfg {String} style any extra css
234  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
235  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
236  * @cfg {string} dataId cutomer id
237  * @cfg {string} name Specifies name attribute
238  * @cfg {string} tooltip  Text for the tooltip
239  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
240  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
241  
242  * @constructor
243  * Do not use directly - it does not do anything..
244  * @param {Object} config The config object
245  */
246
247
248
249 Roo.bootstrap.Component = function(config){
250     Roo.bootstrap.Component.superclass.constructor.call(this, config);
251        
252     this.addEvents({
253         /**
254          * @event childrenrendered
255          * Fires when the children have been rendered..
256          * @param {Roo.bootstrap.Component} this
257          */
258         "childrenrendered" : true
259         
260         
261         
262     });
263     
264     
265 };
266
267 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
268     
269     
270     allowDomMove : false, // to stop relocations in parent onRender...
271     
272     cls : false,
273     
274     style : false,
275     
276     autoCreate : false,
277     
278     tooltip : null,
279     /**
280      * Initialize Events for the element
281      */
282     initEvents : function() { },
283     
284     xattr : false,
285     
286     parentId : false,
287     
288     can_build_overlaid : true,
289     
290     container_method : false,
291     
292     dataId : false,
293     
294     name : false,
295     
296     parent: function() {
297         // returns the parent component..
298         return Roo.ComponentMgr.get(this.parentId)
299         
300         
301     },
302     
303     // private
304     onRender : function(ct, position)
305     {
306        // Roo.log("Call onRender: " + this.xtype);
307         
308         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
309         
310         if(this.el){
311             if (this.el.attr('xtype')) {
312                 this.el.attr('xtypex', this.el.attr('xtype'));
313                 this.el.dom.removeAttribute('xtype');
314                 
315                 this.initEvents();
316             }
317             
318             return;
319         }
320         
321          
322         
323         var cfg = Roo.apply({},  this.getAutoCreate());
324         
325         cfg.id = this.id || Roo.id();
326         
327         // fill in the extra attributes 
328         if (this.xattr && typeof(this.xattr) =='object') {
329             for (var i in this.xattr) {
330                 cfg[i] = this.xattr[i];
331             }
332         }
333         
334         if(this.dataId){
335             cfg.dataId = this.dataId;
336         }
337         
338         if (this.cls) {
339             cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
340         }
341         
342         if (this.style) { // fixme needs to support more complex style data.
343             cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
344         }
345         
346         if(this.name){
347             cfg.name = this.name;
348         }
349         
350         this.el = ct.createChild(cfg, position);
351         
352         if (this.tooltip) {
353             this.tooltipEl().attr('tooltip', this.tooltip);
354         }
355         
356         if(this.tabIndex !== undefined){
357             this.el.dom.setAttribute('tabIndex', this.tabIndex);
358         }
359         
360         this.initEvents();
361         
362     },
363     /**
364      * Fetch the element to add children to
365      * @return {Roo.Element} defaults to this.el
366      */
367     getChildContainer : function()
368     {
369         return this.el;
370     },
371     getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
372     {
373         return Roo.get(document.body);
374     },
375     
376     /**
377      * Fetch the element to display the tooltip on.
378      * @return {Roo.Element} defaults to this.el
379      */
380     tooltipEl : function()
381     {
382         return this.el;
383     },
384         
385     addxtype  : function(tree,cntr)
386     {
387         var cn = this;
388         
389         cn = Roo.factory(tree);
390         //Roo.log(['addxtype', cn]);
391            
392         cn.parentType = this.xtype; //??
393         cn.parentId = this.id;
394         
395         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
396         if (typeof(cn.container_method) == 'string') {
397             cntr = cn.container_method;
398         }
399         
400         
401         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
402         
403         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
404         
405         var build_from_html =  Roo.XComponent.build_from_html;
406           
407         var is_body  = (tree.xtype == 'Body') ;
408           
409         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
410           
411         var self_cntr_el = Roo.get(this[cntr](false));
412         
413         // do not try and build conditional elements 
414         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
415             return false;
416         }
417         
418         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
419             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
420                 return this.addxtypeChild(tree,cntr, is_body);
421             }
422             
423             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
424                 
425             if(echild){
426                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
427             }
428             
429             Roo.log('skipping render');
430             return cn;
431             
432         }
433         
434         var ret = false;
435         if (!build_from_html) {
436             return false;
437         }
438         
439         // this i think handles overlaying multiple children of the same type
440         // with the sam eelement.. - which might be buggy..
441         while (true) {
442             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
443             
444             if (!echild) {
445                 break;
446             }
447             
448             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
449                 break;
450             }
451             
452             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
453         }
454        
455         return ret;
456     },
457     
458     
459     addxtypeChild : function (tree, cntr, is_body)
460     {
461         Roo.debug && Roo.log('addxtypeChild:' + cntr);
462         var cn = this;
463         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
464         
465         
466         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
467                     (typeof(tree['flexy:foreach']) != 'undefined');
468           
469     
470         
471         skip_children = false;
472         // render the element if it's not BODY.
473         if (!is_body) {
474             
475             // if parent was disabled, then do not try and create the children..
476             if(!this[cntr](true)){
477                 tree.items = [];
478                 return tree;
479             }
480            
481             cn = Roo.factory(tree);
482            
483             cn.parentType = this.xtype; //??
484             cn.parentId = this.id;
485             
486             var build_from_html =  Roo.XComponent.build_from_html;
487             
488             
489             // does the container contain child eleemnts with 'xtype' attributes.
490             // that match this xtype..
491             // note - when we render we create these as well..
492             // so we should check to see if body has xtype set.
493             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
494                
495                 var self_cntr_el = Roo.get(this[cntr](false));
496                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
497                 if (echild) { 
498                     //Roo.log(Roo.XComponent.build_from_html);
499                     //Roo.log("got echild:");
500                     //Roo.log(echild);
501                 }
502                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
503                 // and are not displayed -this causes this to use up the wrong element when matching.
504                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
505                 
506                 
507                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
508                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
509                   
510                   
511                   
512                     cn.el = echild;
513                   //  Roo.log("GOT");
514                     //echild.dom.removeAttribute('xtype');
515                 } else {
516                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
517                     Roo.debug && Roo.log(self_cntr_el);
518                     Roo.debug && Roo.log(echild);
519                     Roo.debug && Roo.log(cn);
520                 }
521             }
522            
523             
524            
525             // if object has flexy:if - then it may or may not be rendered.
526             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
527                 // skip a flexy if element.
528                 Roo.debug && Roo.log('skipping render');
529                 Roo.debug && Roo.log(tree);
530                 if (!cn.el) {
531                     Roo.debug && Roo.log('skipping all children');
532                     skip_children = true;
533                 }
534                 
535              } else {
536                  
537                 // actually if flexy:foreach is found, we really want to create 
538                 // multiple copies here...
539                 //Roo.log('render');
540                 //Roo.log(this[cntr]());
541                 // some elements do not have render methods.. like the layouts...
542                 /*
543                 if(this[cntr](true) === false){
544                     cn.items = [];
545                     return cn;
546                 }
547                 */
548                 cn.render && cn.render(this[cntr](true));
549                 
550              }
551             // then add the element..
552         }
553          
554         // handle the kids..
555         
556         var nitems = [];
557         /*
558         if (typeof (tree.menu) != 'undefined') {
559             tree.menu.parentType = cn.xtype;
560             tree.menu.triggerEl = cn.el;
561             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
562             
563         }
564         */
565         if (!tree.items || !tree.items.length) {
566             cn.items = nitems;
567             //Roo.log(["no children", this]);
568             
569             return cn;
570         }
571          
572         var items = tree.items;
573         delete tree.items;
574         
575         //Roo.log(items.length);
576             // add the items..
577         if (!skip_children) {    
578             for(var i =0;i < items.length;i++) {
579               //  Roo.log(['add child', items[i]]);
580                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
581             }
582         }
583         
584         cn.items = nitems;
585         
586         //Roo.log("fire childrenrendered");
587         
588         cn.fireEvent('childrenrendered', this);
589         
590         return cn;
591     },
592     
593     /**
594      * Set the element that will be used to show or hide
595      */
596     setVisibilityEl : function(el)
597     {
598         this.visibilityEl = el;
599     },
600     
601      /**
602      * Get the element that will be used to show or hide
603      */
604     getVisibilityEl : function()
605     {
606         if (typeof(this.visibilityEl) == 'object') {
607             return this.visibilityEl;
608         }
609         
610         if (typeof(this.visibilityEl) == 'string') {
611             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
612         }
613         
614         return this.getEl();
615     },
616     
617     /**
618      * Show a component - removes 'hidden' class
619      */
620     show : function()
621     {
622         if(!this.getVisibilityEl()){
623             return;
624         }
625          
626         this.getVisibilityEl().removeClass(['hidden','d-none']);
627         
628         this.fireEvent('show', this);
629         
630         
631     },
632     /**
633      * Hide a component - adds 'hidden' class
634      */
635     hide: function()
636     {
637         if(!this.getVisibilityEl()){
638             return;
639         }
640         
641         this.getVisibilityEl().addClass(['hidden','d-none']);
642         
643         this.fireEvent('hide', this);
644         
645     }
646 });
647
648  /*
649  * - LGPL
650  *
651  * element
652  * 
653  */
654
655 /**
656  * @class Roo.bootstrap.Element
657  * @extends Roo.bootstrap.Component
658  * @children Roo.bootstrap.Component
659  * Bootstrap Element class (basically a DIV used to make random stuff )
660  * 
661  * @cfg {String} html contents of the element
662  * @cfg {String} tag tag of the element
663  * @cfg {String} cls class of the element
664  * @cfg {Boolean} preventDefault (true|false) default false
665  * @cfg {Boolean} clickable (true|false) default false
666  * @cfg {String} role default blank - set to button to force cursor pointer
667  
668  * 
669  * @constructor
670  * Create a new Element
671  * @param {Object} config The config object
672  */
673
674 Roo.bootstrap.Element = function(config){
675     Roo.bootstrap.Element.superclass.constructor.call(this, config);
676     
677     this.addEvents({
678         // raw events
679         /**
680          * @event click
681          * When a element is chick
682          * @param {Roo.bootstrap.Element} this
683          * @param {Roo.EventObject} e
684          */
685         "click" : true 
686         
687       
688     });
689 };
690
691 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
692     
693     tag: 'div',
694     cls: '',
695     html: '',
696     preventDefault: false, 
697     clickable: false,
698     tapedTwice : false,
699     role : false,
700     
701     getAutoCreate : function(){
702         
703         var cfg = {
704             tag: this.tag,
705             // cls: this.cls, double assign in parent class Component.js :: onRender
706             html: this.html
707         };
708         if (this.role !== false) {
709             cfg.role = this.role;
710         }
711         
712         return cfg;
713     },
714     
715     initEvents: function() 
716     {
717         Roo.bootstrap.Element.superclass.initEvents.call(this);
718         
719         if(this.clickable){
720             this.el.on('click', this.onClick, this);
721         }
722         
723         
724     },
725     
726     onClick : function(e)
727     {
728         if(this.preventDefault){
729             e.preventDefault();
730         }
731         
732         this.fireEvent('click', this, e); // why was this double click before?
733     },
734     
735     
736     
737
738     
739     
740     getValue : function()
741     {
742         return this.el.dom.innerHTML;
743     },
744     
745     setValue : function(value)
746     {
747         this.el.dom.innerHTML = value;
748     }
749    
750 });
751
752  
753
754  /*
755  * - LGPL
756  *
757  * dropable area
758  * 
759  */
760
761 /**
762  * @class Roo.bootstrap.DropTarget
763  * @extends Roo.bootstrap.Element
764  * Bootstrap DropTarget class
765  
766  * @cfg {string} name dropable name
767  * 
768  * @constructor
769  * Create a new Dropable Area
770  * @param {Object} config The config object
771  */
772
773 Roo.bootstrap.DropTarget = function(config){
774     Roo.bootstrap.DropTarget.superclass.constructor.call(this, config);
775     
776     this.addEvents({
777         // raw events
778         /**
779          * @event click
780          * When a element is chick
781          * @param {Roo.bootstrap.Element} this
782          * @param {Roo.EventObject} e
783          */
784         "drop" : true
785     });
786 };
787
788 Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element,  {
789     
790     
791     getAutoCreate : function(){
792         
793          
794     },
795     
796     initEvents: function() 
797     {
798         Roo.bootstrap.DropTarget.superclass.initEvents.call(this);
799         this.dropZone = new Roo.dd.DropTarget(this.getEl(), {
800             ddGroup: this.name,
801             listeners : {
802                 drop : this.dragDrop.createDelegate(this),
803                 enter : this.dragEnter.createDelegate(this),
804                 out : this.dragOut.createDelegate(this),
805                 over : this.dragOver.createDelegate(this)
806             }
807             
808         });
809         this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff
810     },
811     
812     dragDrop : function(source,e,data)
813     {
814         // user has to decide how to impliment this.
815         Roo.log('drop');
816         Roo.log(this);
817         //this.fireEvent('drop', this, source, e ,data);
818         return false;
819     },
820     
821     dragEnter : function(n, dd, e, data)
822     {
823         // probably want to resize the element to match the dropped element..
824         Roo.log("enter");
825         this.originalSize = this.el.getSize();
826         this.el.setSize( n.el.getSize());
827         this.dropZone.DDM.refreshCache(this.name);
828         Roo.log([n, dd, e, data]);
829     },
830     
831     dragOut : function(value)
832     {
833         // resize back to normal
834         Roo.log("out");
835         this.el.setSize(this.originalSize);
836         this.dropZone.resetConstraints();
837     },
838     
839     dragOver : function()
840     {
841         // ??? do nothing?
842     }
843    
844 });
845
846  
847
848  /*
849  * - LGPL
850  *
851  * Body
852  *
853  */
854
855 /**
856  * @class Roo.bootstrap.Body
857  * @extends Roo.bootstrap.Component
858  * @children Roo.bootstrap.Component 
859  * @parent none builder
860  * Bootstrap Body class
861  *
862  * @constructor
863  * Create a new body
864  * @param {Object} config The config object
865  */
866
867 Roo.bootstrap.Body = function(config){
868
869     config = config || {};
870
871     Roo.bootstrap.Body.superclass.constructor.call(this, config);
872     this.el = Roo.get(config.el ? config.el : document.body );
873     if (this.cls && this.cls.length) {
874         Roo.get(document.body).addClass(this.cls);
875     }
876 };
877
878 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component,  {
879
880     is_body : true,// just to make sure it's constructed?
881
882         autoCreate : {
883         cls: 'container'
884     },
885     onRender : function(ct, position)
886     {
887        /* Roo.log("Roo.bootstrap.Body - onRender");
888         if (this.cls && this.cls.length) {
889             Roo.get(document.body).addClass(this.cls);
890         }
891         // style??? xttr???
892         */
893     }
894
895
896
897
898 });
899 /*
900  * - LGPL
901  *
902  * button group
903  * 
904  */
905
906
907 /**
908  * @class Roo.bootstrap.ButtonGroup
909  * @extends Roo.bootstrap.Component
910  * Bootstrap ButtonGroup class
911  * @children Roo.bootstrap.Button Roo.bootstrap.form.Form
912  * 
913  * @cfg {String} size lg | sm | xs (default empty normal)
914  * @cfg {String} align vertical | justified  (default none)
915  * @cfg {String} direction up | down (default down)
916  * @cfg {Boolean} toolbar false | true
917  * @cfg {Boolean} btn true | false
918  * 
919  * 
920  * @constructor
921  * Create a new Input
922  * @param {Object} config The config object
923  */
924
925 Roo.bootstrap.ButtonGroup = function(config){
926     Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
927 };
928
929 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
930     
931     size: '',
932     align: '',
933     direction: '',
934     toolbar: false,
935     btn: true,
936
937     getAutoCreate : function(){
938         var cfg = {
939             cls: 'btn-group',
940             html : null
941         };
942         
943         cfg.html = this.html || cfg.html;
944         
945         if (this.toolbar) {
946             cfg = {
947                 cls: 'btn-toolbar',
948                 html: null
949             };
950             
951             return cfg;
952         }
953         
954         if (['vertical','justified'].indexOf(this.align)!==-1) {
955             cfg.cls = 'btn-group-' + this.align;
956             
957             if (this.align == 'justified') {
958                 console.log(this.items);
959             }
960         }
961         
962         if (['lg','sm','xs'].indexOf(this.size)!==-1) {
963             cfg.cls += ' btn-group-' + this.size;
964         }
965         
966         if (this.direction == 'up') {
967             cfg.cls += ' dropup' ;
968         }
969         
970         return cfg;
971     },
972     /**
973      * Add a button to the group (similar to NavItem API.)
974      */
975     addItem : function(cfg)
976     {
977         var cn = new Roo.bootstrap.Button(cfg);
978         //this.register(cn);
979         cn.parentId = this.id;
980         cn.onRender(this.el, null);
981         return cn;
982     }
983    
984 });
985
986  /*
987  * - LGPL
988  *
989  * button
990  * 
991  */
992
993 /**
994  * @class Roo.bootstrap.Button
995  * @extends Roo.bootstrap.Component
996  * Bootstrap Button class
997  * @cfg {String} html The button content
998  * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
999  * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button)
1000  * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
1001  * @cfg {String} size (lg|sm|xs)
1002  * @cfg {String} tag (a|input|submit)
1003  * @cfg {String} href empty or href
1004  * @cfg {Boolean} disabled default false;
1005  * @cfg {Boolean} isClose default false;
1006  * @cfg {String} glyphicon depricated - use fa
1007  * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
1008  * @cfg {String} badge text for badge
1009  * @cfg {String} theme (default|glow)  
1010  * @cfg {Boolean} inverse dark themed version
1011  * @cfg {Boolean} toggle is it a slidy toggle button
1012  * @cfg {Boolean} pressed   default null - if the button ahs active state
1013  * @cfg {String} ontext text for on slidy toggle state
1014  * @cfg {String} offtext text for off slidy toggle state
1015  * @cfg {Boolean} preventDefault  default true (stop click event triggering the URL if it's a link.)
1016  * @cfg {Boolean} removeClass remove the standard class..
1017  * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. 
1018  * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
1019  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
1020
1021  * @constructor
1022  * Create a new button
1023  * @param {Object} config The config object
1024  */
1025
1026
1027 Roo.bootstrap.Button = function(config){
1028     Roo.bootstrap.Button.superclass.constructor.call(this, config);
1029     
1030     this.addEvents({
1031         // raw events
1032         /**
1033          * @event click
1034          * When a button is pressed
1035          * @param {Roo.bootstrap.Button} btn
1036          * @param {Roo.EventObject} e
1037          */
1038         "click" : true,
1039         /**
1040          * @event dblclick
1041          * When a button is double clicked
1042          * @param {Roo.bootstrap.Button} btn
1043          * @param {Roo.EventObject} e
1044          */
1045         "dblclick" : true,
1046          /**
1047          * @event toggle
1048          * After the button has been toggles
1049          * @param {Roo.bootstrap.Button} btn
1050          * @param {Roo.EventObject} e
1051          * @param {boolean} pressed (also available as button.pressed)
1052          */
1053         "toggle" : true
1054     });
1055 };
1056
1057 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
1058     html: false,
1059     active: false,
1060     weight: '',
1061     badge_weight: '',
1062     outline : false,
1063     size: '',
1064     tag: 'button',
1065     href: '',
1066     disabled: false,
1067     isClose: false,
1068     glyphicon: '',
1069     fa: '',
1070     badge: '',
1071     theme: 'default',
1072     inverse: false,
1073     
1074     toggle: false,
1075     ontext: 'ON',
1076     offtext: 'OFF',
1077     defaulton: true,
1078     preventDefault: true,
1079     removeClass: false,
1080     name: false,
1081     target: false,
1082     group : false,
1083      
1084     pressed : null,
1085      
1086     
1087     getAutoCreate : function(){
1088         
1089         var cfg = {
1090             tag : 'button',
1091             cls : 'roo-button',
1092             html: ''
1093         };
1094         
1095         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
1096             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
1097             this.tag = 'button';
1098         } else {
1099             cfg.tag = this.tag;
1100         }
1101         cfg.html = '<span class="roo-button-text">' + (this.html || cfg.html) + '</span>';
1102         
1103         if (this.toggle == true) {
1104             cfg={
1105                 tag: 'div',
1106                 cls: 'slider-frame roo-button',
1107                 cn: [
1108                     {
1109                         tag: 'span',
1110                         'data-on-text':'ON',
1111                         'data-off-text':'OFF',
1112                         cls: 'slider-button',
1113                         html: this.offtext
1114                     }
1115                 ]
1116             };
1117             // why are we validating the weights?
1118             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1119                 cfg.cls +=  ' ' + this.weight;
1120             }
1121             
1122             return cfg;
1123         }
1124         
1125         if (this.isClose) {
1126             cfg.cls += ' close';
1127             
1128             cfg["aria-hidden"] = true;
1129             
1130             cfg.html = "&times;";
1131             
1132             return cfg;
1133         }
1134              
1135         
1136         if (this.theme==='default') {
1137             cfg.cls = 'btn roo-button';
1138             
1139             //if (this.parentType != 'Navbar') {
1140             this.weight = this.weight.length ?  this.weight : 'default';
1141             //}
1142             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1143                 
1144                 var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
1145                 var weight = this.weight == 'default' ? 'secondary' : this.weight;
1146                 cfg.cls += ' btn-' + outline + weight;
1147                 if (this.weight == 'default') {
1148                     // BC
1149                     cfg.cls += ' btn-' + this.weight;
1150                 }
1151             }
1152         } else if (this.theme==='glow') {
1153             
1154             cfg.tag = 'a';
1155             cfg.cls = 'btn-glow roo-button';
1156             
1157             if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1158                 
1159                 cfg.cls += ' ' + this.weight;
1160             }
1161         }
1162    
1163         
1164         if (this.inverse) {
1165             this.cls += ' inverse';
1166         }
1167         
1168         
1169         if (this.active || this.pressed === true) {
1170             cfg.cls += ' active';
1171         }
1172         
1173         if (this.disabled) {
1174             cfg.disabled = 'disabled';
1175         }
1176         
1177         if (this.items) {
1178             Roo.log('changing to ul' );
1179             cfg.tag = 'ul';
1180             this.glyphicon = 'caret';
1181             if (Roo.bootstrap.version == 4) {
1182                 this.fa = 'caret-down';
1183             }
1184             
1185         }
1186         
1187         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
1188          
1189         //gsRoo.log(this.parentType);
1190         if (this.parentType === 'Navbar' && !this.parent().bar) {
1191             Roo.log('changing to li?');
1192             
1193             cfg.tag = 'li';
1194             
1195             cfg.cls = '';
1196             cfg.cn =  [{
1197                 tag : 'a',
1198                 cls : 'roo-button',
1199                 html : this.html,
1200                 href : this.href || '#'
1201             }];
1202             if (this.menu) {
1203                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
1204                 cfg.cls += ' dropdown';
1205             }   
1206             
1207             delete cfg.html;
1208             
1209         }
1210         
1211        cfg.cls += this.parentType === 'Navbar' ?  ' navbar-btn' : '';
1212         
1213         if (this.glyphicon) {
1214             cfg.html = ' ' + cfg.html;
1215             
1216             cfg.cn = [
1217                 {
1218                     tag: 'span',
1219                     cls: 'glyphicon glyphicon-' + this.glyphicon
1220                 }
1221             ];
1222         }
1223         if (this.fa) {
1224             cfg.html = ' ' + cfg.html;
1225             
1226             cfg.cn = [
1227                 {
1228                     tag: 'i',
1229                     cls: 'fa fas fa-' + this.fa
1230                 }
1231             ];
1232         }
1233         
1234         if (this.badge) {
1235             cfg.html += ' ';
1236             
1237             cfg.tag = 'a';
1238             
1239 //            cfg.cls='btn roo-button';
1240             
1241             cfg.href=this.href;
1242             
1243             var value = cfg.html;
1244             
1245             if(this.glyphicon){
1246                 value = {
1247                     tag: 'span',
1248                     cls: 'glyphicon glyphicon-' + this.glyphicon,
1249                     html: this.html
1250                 };
1251             }
1252             if(this.fa){
1253                 value = {
1254                     tag: 'i',
1255                     cls: 'fa fas fa-' + this.fa,
1256                     html: this.html
1257                 };
1258             }
1259             
1260             var bw = this.badge_weight.length ? this.badge_weight :
1261                 (this.weight.length ? this.weight : 'secondary');
1262             bw = bw == 'default' ? 'secondary' : bw;
1263             
1264             cfg.cn = [
1265                 value,
1266                 {
1267                     tag: 'span',
1268                     cls: 'badge badge-' + bw,
1269                     html: this.badge
1270                 }
1271             ];
1272             
1273             cfg.html='';
1274         }
1275         
1276         if (this.menu) {
1277             cfg.cls += ' dropdown';
1278             cfg.html = typeof(cfg.html) != 'undefined' ?
1279                     cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
1280         }
1281         
1282         if (cfg.tag !== 'a' && this.href !== '') {
1283             throw "Tag must be a to set href.";
1284         } else if (this.href.length > 0) {
1285             cfg.href = this.href;
1286         }
1287         
1288         if(this.removeClass){
1289             cfg.cls = '';
1290         }
1291         
1292         if(this.target){
1293             cfg.target = this.target;
1294         }
1295         
1296         return cfg;
1297     },
1298     initEvents: function() {
1299        // Roo.log('init events?');
1300 //        Roo.log(this.el.dom);
1301         // add the menu...
1302         
1303         if (typeof (this.menu) != 'undefined') {
1304             this.menu.parentType = this.xtype;
1305             this.menu.triggerEl = this.el;
1306             this.addxtype(Roo.apply({}, this.menu));
1307         }
1308
1309
1310         if (this.el.hasClass('roo-button')) {
1311              this.el.on('click', this.onClick, this);
1312              this.el.on('dblclick', this.onDblClick, this);
1313         } else {
1314              this.el.select('.roo-button').on('click', this.onClick, this);
1315              this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
1316              
1317         }
1318         // why?
1319         if(this.removeClass){
1320             this.el.on('click', this.onClick, this);
1321         }
1322         
1323         if (this.group === true) {
1324              if (this.pressed === false || this.pressed === true) {
1325                 // nothing
1326             } else {
1327                 this.pressed = false;
1328                 this.setActive(this.pressed);
1329             }
1330             
1331         }
1332         
1333         this.el.enableDisplayMode();
1334         
1335     },
1336     onClick : function(e)
1337     {
1338         if (this.disabled) {
1339             return;
1340         }
1341         
1342         Roo.log('button on click ');
1343         if(this.href === '' || this.preventDefault){
1344             e.preventDefault();
1345         }
1346         
1347         if (this.group) {
1348             if (this.pressed) {
1349                 // do nothing -
1350                 return;
1351             }
1352             this.setActive(true);
1353             var pi = this.parent().items;
1354             for (var i = 0;i < pi.length;i++) {
1355                 if (this == pi[i]) {
1356                     continue;
1357                 }
1358                 if (pi[i].el.hasClass('roo-button')) {
1359                     pi[i].setActive(false);
1360                 }
1361             }
1362             this.fireEvent('click', this, e);            
1363             return;
1364         }
1365         
1366         if (this.pressed === true || this.pressed === false) {
1367             this.toggleActive(e);
1368         }
1369         
1370         
1371         this.fireEvent('click', this, e);
1372     },
1373     onDblClick: function(e)
1374     {
1375         if (this.disabled) {
1376             return;
1377         }
1378         if(this.preventDefault){
1379             e.preventDefault();
1380         }
1381         this.fireEvent('dblclick', this, e);
1382     },
1383     /**
1384      * Enables this button
1385      */
1386     enable : function()
1387     {
1388         this.disabled = false;
1389         this.el.removeClass('disabled');
1390         this.el.dom.removeAttribute("disabled");
1391     },
1392     
1393     /**
1394      * Disable this button
1395      */
1396     disable : function()
1397     {
1398         this.disabled = true;
1399         this.el.addClass('disabled');
1400         this.el.attr("disabled", "disabled")
1401     },
1402      /**
1403      * sets the active state on/off, 
1404      * @param {Boolean} state (optional) Force a particular state
1405      */
1406     setActive : function(v) {
1407         
1408         this.el[v ? 'addClass' : 'removeClass']('active');
1409         this.pressed = v;
1410     },
1411      /**
1412      * toggles the current active state 
1413      */
1414     toggleActive : function(e)
1415     {
1416         this.setActive(!this.pressed); // this modifies pressed...
1417         this.fireEvent('toggle', this, e, this.pressed);
1418     },
1419      /**
1420      * get the current active state
1421      * @return {boolean} true if it's active
1422      */
1423     isActive : function()
1424     {
1425         return this.el.hasClass('active');
1426     },
1427     /**
1428      * set the text of the first selected button
1429      */
1430     setText : function(str)
1431     {
1432         this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
1433     },
1434     /**
1435      * get the text of the first selected button
1436      */
1437     getText : function()
1438     {
1439         return this.el.select('.roo-button-text',true).first().dom.innerHTML;
1440     },
1441     
1442     setWeight : function(str)
1443     {
1444         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
1445         this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
1446         this.weight = str;
1447         var outline = this.outline ? 'outline-' : '';
1448         if (str == 'default') {
1449             this.el.addClass('btn-default btn-outline-secondary');        
1450             return;
1451         }
1452         this.el.addClass('btn-' + outline + str);        
1453     }
1454     
1455     
1456 });
1457 // fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
1458
1459 Roo.bootstrap.Button.weights = [
1460     'default',
1461     'secondary' ,
1462     'primary',
1463     'success',
1464     'info',
1465     'warning',
1466     'danger',
1467     'link',
1468     'light',
1469     'dark'              
1470    
1471 ];/*
1472  * - LGPL
1473  *
1474  * column
1475  * 
1476  */
1477
1478 /**
1479  * @class Roo.bootstrap.Column
1480  * @extends Roo.bootstrap.Component
1481  * @children Roo.bootstrap.Component
1482  * Bootstrap Column class
1483  * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
1484  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
1485  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
1486  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
1487  * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
1488  * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
1489  * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
1490  * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
1491  *
1492  * 
1493  * @cfg {Boolean} hidden (true|false) hide the element
1494  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1495  * @cfg {String} fa (ban|check|...) font awesome icon
1496  * @cfg {Number} fasize (1|2|....) font awsome size
1497
1498  * @cfg {String} icon (info-sign|check|...) glyphicon name
1499
1500  * @cfg {String} html content of column.
1501  * 
1502  * @constructor
1503  * Create a new Column
1504  * @param {Object} config The config object
1505  */
1506
1507 Roo.bootstrap.Column = function(config){
1508     Roo.bootstrap.Column.superclass.constructor.call(this, config);
1509 };
1510
1511 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
1512     
1513     xs: false,
1514     sm: false,
1515     md: false,
1516     lg: false,
1517     xsoff: false,
1518     smoff: false,
1519     mdoff: false,
1520     lgoff: false,
1521     html: '',
1522     offset: 0,
1523     alert: false,
1524     fa: false,
1525     icon : false,
1526     hidden : false,
1527     fasize : 1,
1528     
1529     getAutoCreate : function(){
1530         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
1531         
1532         cfg = {
1533             tag: 'div',
1534             cls: 'column'
1535         };
1536         
1537         var settings=this;
1538         var sizes =   ['xs','sm','md','lg'];
1539         sizes.map(function(size ,ix){
1540             //Roo.log( size + ':' + settings[size]);
1541             
1542             if (settings[size+'off'] !== false) {
1543                 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
1544             }
1545             
1546             if (settings[size] === false) {
1547                 return;
1548             }
1549             
1550             if (!settings[size]) { // 0 = hidden
1551                 cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
1552                 // bootsrap4
1553                 for (var i = ix; i > -1; i--) {
1554                     cfg.cls +=  ' d-' + sizes[i] + '-none'; 
1555                 }
1556                 
1557                 
1558                 return;
1559             }
1560             cfg.cls += ' col-' + size + '-' + settings[size] + (
1561                 size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
1562             );
1563             
1564         });
1565         
1566         if (this.hidden) {
1567             cfg.cls += ' hidden';
1568         }
1569         
1570         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1571             cfg.cls +=' alert alert-' + this.alert;
1572         }
1573         
1574         
1575         if (this.html.length) {
1576             cfg.html = this.html;
1577         }
1578         if (this.fa) {
1579             var fasize = '';
1580             if (this.fasize > 1) {
1581                 fasize = ' fa-' + this.fasize + 'x';
1582             }
1583             cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
1584             
1585             
1586         }
1587         if (this.icon) {
1588             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
1589         }
1590         
1591         return cfg;
1592     }
1593    
1594 });
1595
1596  
1597
1598  /*
1599  * - LGPL
1600  *
1601  * page container.
1602  * 
1603  */
1604
1605
1606 /**
1607  * @class Roo.bootstrap.Container
1608  * @extends Roo.bootstrap.Component
1609  * @children Roo.bootstrap.Component
1610  * @parent builder
1611  * Bootstrap Container class
1612  * @cfg {Boolean} jumbotron is it a jumbotron element
1613  * @cfg {String} html content of element
1614  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
1615  * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel  - type - primary/success.....
1616  * @cfg {String} header content of header (for panel)
1617  * @cfg {String} footer content of footer (for panel)
1618  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
1619  * @cfg {String} tag (header|aside|section) type of HTML tag.
1620  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1621  * @cfg {String} fa font awesome icon
1622  * @cfg {String} icon (info-sign|check|...) glyphicon name
1623  * @cfg {Boolean} hidden (true|false) hide the element
1624  * @cfg {Boolean} expandable (true|false) default false
1625  * @cfg {Boolean} expanded (true|false) default true
1626  * @cfg {String} rheader contet on the right of header
1627  * @cfg {Boolean} clickable (true|false) default false
1628
1629  *     
1630  * @constructor
1631  * Create a new Container
1632  * @param {Object} config The config object
1633  */
1634
1635 Roo.bootstrap.Container = function(config){
1636     Roo.bootstrap.Container.superclass.constructor.call(this, config);
1637     
1638     this.addEvents({
1639         // raw events
1640          /**
1641          * @event expand
1642          * After the panel has been expand
1643          * 
1644          * @param {Roo.bootstrap.Container} this
1645          */
1646         "expand" : true,
1647         /**
1648          * @event collapse
1649          * After the panel has been collapsed
1650          * 
1651          * @param {Roo.bootstrap.Container} this
1652          */
1653         "collapse" : true,
1654         /**
1655          * @event click
1656          * When a element is chick
1657          * @param {Roo.bootstrap.Container} this
1658          * @param {Roo.EventObject} e
1659          */
1660         "click" : true
1661     });
1662 };
1663
1664 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
1665     
1666     jumbotron : false,
1667     well: '',
1668     panel : '',
1669     header: '',
1670     footer : '',
1671     sticky: '',
1672     tag : false,
1673     alert : false,
1674     fa: false,
1675     icon : false,
1676     expandable : false,
1677     rheader : '',
1678     expanded : true,
1679     clickable: false,
1680   
1681      
1682     getChildContainer : function() {
1683         
1684         if(!this.el){
1685             return false;
1686         }
1687         
1688         if (this.panel.length) {
1689             return this.el.select('.panel-body',true).first();
1690         }
1691         
1692         return this.el;
1693     },
1694     
1695     
1696     getAutoCreate : function(){
1697         
1698         var cfg = {
1699             tag : this.tag || 'div',
1700             html : '',
1701             cls : ''
1702         };
1703         if (this.jumbotron) {
1704             cfg.cls = 'jumbotron';
1705         }
1706         
1707         
1708         
1709         // - this is applied by the parent..
1710         //if (this.cls) {
1711         //    cfg.cls = this.cls + '';
1712         //}
1713         
1714         if (this.sticky.length) {
1715             
1716             var bd = Roo.get(document.body);
1717             if (!bd.hasClass('bootstrap-sticky')) {
1718                 bd.addClass('bootstrap-sticky');
1719                 Roo.select('html',true).setStyle('height', '100%');
1720             }
1721              
1722             cfg.cls += 'bootstrap-sticky-' + this.sticky;
1723         }
1724         
1725         
1726         if (this.well.length) {
1727             switch (this.well) {
1728                 case 'lg':
1729                 case 'sm':
1730                     cfg.cls +=' well well-' +this.well;
1731                     break;
1732                 default:
1733                     cfg.cls +=' well';
1734                     break;
1735             }
1736         }
1737         
1738         if (this.hidden) {
1739             cfg.cls += ' hidden';
1740         }
1741         
1742         
1743         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1744             cfg.cls +=' alert alert-' + this.alert;
1745         }
1746         
1747         var body = cfg;
1748         
1749         if (this.panel.length) {
1750             cfg.cls += ' panel panel-' + this.panel;
1751             cfg.cn = [];
1752             if (this.header.length) {
1753                 
1754                 var h = [];
1755                 
1756                 if(this.expandable){
1757                     
1758                     cfg.cls = cfg.cls + ' expandable';
1759                     
1760                     h.push({
1761                         tag: 'i',
1762                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus') 
1763                     });
1764                     
1765                 }
1766                 
1767                 h.push(
1768                     {
1769                         tag: 'span',
1770                         cls : 'panel-title',
1771                         html : (this.expandable ? '&nbsp;' : '') + this.header
1772                     },
1773                     {
1774                         tag: 'span',
1775                         cls: 'panel-header-right',
1776                         html: this.rheader
1777                     }
1778                 );
1779                 
1780                 cfg.cn.push({
1781                     cls : 'panel-heading',
1782                     style : this.expandable ? 'cursor: pointer' : '',
1783                     cn : h
1784                 });
1785                 
1786             }
1787             
1788             body = false;
1789             cfg.cn.push({
1790                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
1791                 html : this.html
1792             });
1793             
1794             
1795             if (this.footer.length) {
1796                 cfg.cn.push({
1797                     cls : 'panel-footer',
1798                     html : this.footer
1799                     
1800                 });
1801             }
1802             
1803         }
1804         
1805         if (body) {
1806             body.html = this.html || cfg.html;
1807             // prefix with the icons..
1808             if (this.fa) {
1809                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
1810             }
1811             if (this.icon) {
1812                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
1813             }
1814             
1815             
1816         }
1817         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
1818             cfg.cls =  'container';
1819         }
1820         
1821         return cfg;
1822     },
1823     
1824     initEvents: function() 
1825     {
1826         if(this.expandable){
1827             var headerEl = this.headerEl();
1828         
1829             if(headerEl){
1830                 headerEl.on('click', this.onToggleClick, this);
1831             }
1832         }
1833         
1834         if(this.clickable){
1835             this.el.on('click', this.onClick, this);
1836         }
1837         
1838     },
1839     
1840     onToggleClick : function()
1841     {
1842         var headerEl = this.headerEl();
1843         
1844         if(!headerEl){
1845             return;
1846         }
1847         
1848         if(this.expanded){
1849             this.collapse();
1850             return;
1851         }
1852         
1853         this.expand();
1854     },
1855     
1856     expand : function()
1857     {
1858         if(this.fireEvent('expand', this)) {
1859             
1860             this.expanded = true;
1861             
1862             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
1863             
1864             this.el.select('.panel-body',true).first().removeClass('hide');
1865             
1866             var toggleEl = this.toggleEl();
1867
1868             if(!toggleEl){
1869                 return;
1870             }
1871
1872             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-minus']);
1873         }
1874         
1875     },
1876     
1877     collapse : function()
1878     {
1879         if(this.fireEvent('collapse', this)) {
1880             
1881             this.expanded = false;
1882             
1883             //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
1884             this.el.select('.panel-body',true).first().addClass('hide');
1885         
1886             var toggleEl = this.toggleEl();
1887
1888             if(!toggleEl){
1889                 return;
1890             }
1891
1892             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-plus']);
1893         }
1894     },
1895     
1896     toggleEl : function()
1897     {
1898         if(!this.el || !this.panel.length || !this.header.length || !this.expandable){
1899             return;
1900         }
1901         
1902         return this.el.select('.panel-heading .fa',true).first();
1903     },
1904     
1905     headerEl : function()
1906     {
1907         if(!this.el || !this.panel.length || !this.header.length){
1908             return;
1909         }
1910         
1911         return this.el.select('.panel-heading',true).first()
1912     },
1913     
1914     bodyEl : function()
1915     {
1916         if(!this.el || !this.panel.length){
1917             return;
1918         }
1919         
1920         return this.el.select('.panel-body',true).first()
1921     },
1922     
1923     titleEl : function()
1924     {
1925         if(!this.el || !this.panel.length || !this.header.length){
1926             return;
1927         }
1928         
1929         return this.el.select('.panel-title',true).first();
1930     },
1931     
1932     setTitle : function(v)
1933     {
1934         var titleEl = this.titleEl();
1935         
1936         if(!titleEl){
1937             return;
1938         }
1939         
1940         titleEl.dom.innerHTML = v;
1941     },
1942     
1943     getTitle : function()
1944     {
1945         
1946         var titleEl = this.titleEl();
1947         
1948         if(!titleEl){
1949             return '';
1950         }
1951         
1952         return titleEl.dom.innerHTML;
1953     },
1954     
1955     setRightTitle : function(v)
1956     {
1957         var t = this.el.select('.panel-header-right',true).first();
1958         
1959         if(!t){
1960             return;
1961         }
1962         
1963         t.dom.innerHTML = v;
1964     },
1965     
1966     onClick : function(e)
1967     {
1968         e.preventDefault();
1969         
1970         this.fireEvent('click', this, e);
1971     }
1972 });
1973
1974  /**
1975  * @class Roo.bootstrap.Card
1976  * @extends Roo.bootstrap.Component
1977  * @children Roo.bootstrap.Component
1978  * @licence LGPL
1979  * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
1980  *
1981  *
1982  * possible... may not be implemented..
1983  * @cfg {String} header_image  src url of image.
1984  * @cfg {String|Object} header
1985  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
1986  * @cfg {Number} header_weight  (primary|secondary|success|info|warning|danger|light|dark)
1987  * 
1988  * @cfg {String} title
1989  * @cfg {String} subtitle
1990  * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
1991  * @cfg {String} footer
1992  
1993  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
1994  * 
1995  * @cfg {String} margin (0|1|2|3|4|5|auto)
1996  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
1997  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
1998  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
1999  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
2000  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
2001  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
2002  *
2003  * @cfg {String} padding (0|1|2|3|4|5)
2004  * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card
2005  * @cfg {String} padding_bottom (0|1|2|3|4|5)
2006  * @cfg {String} padding_left (0|1|2|3|4|5)
2007  * @cfg {String} padding_right (0|1|2|3|4|5)
2008  * @cfg {String} padding_x (0|1|2|3|4|5)
2009  * @cfg {String} padding_y (0|1|2|3|4|5)
2010  *
2011  * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2012  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2013  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2014  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2015  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
2016  
2017  * @config {Boolean} dragable  if this card can be dragged.
2018  * @config {String} drag_group  group for drag
2019  * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
2020  * @config {String} drop_group  group for drag
2021  * 
2022  * @config {Boolean} collapsable can the body be collapsed.
2023  * @config {Boolean} collapsed is the body collapsed when rendered...
2024  * @config {Boolean} rotateable can the body be rotated by clicking on it..
2025  * @config {Boolean} rotated is the body rotated when rendered...
2026  * 
2027  * @constructor
2028  * Create a new Container
2029  * @param {Object} config The config object
2030  */
2031
2032 Roo.bootstrap.Card = function(config){
2033     Roo.bootstrap.Card.superclass.constructor.call(this, config);
2034     
2035     this.addEvents({
2036          // raw events
2037         /**
2038          * @event drop
2039          * When a element a card is dropped
2040          * @param {Roo.bootstrap.Card} this
2041          *
2042          * 
2043          * @param {Roo.bootstrap.Card} move_card the card being dropped?
2044          * @param {String} position 'above' or 'below'
2045          * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list.
2046         
2047          */
2048         'drop' : true,
2049          /**
2050          * @event rotate
2051          * When a element a card is rotate
2052          * @param {Roo.bootstrap.Card} this
2053          * @param {Roo.Element} n the node being dropped?
2054          * @param {Boolean} rotate status
2055          */
2056         'rotate' : true,
2057         /**
2058          * @event cardover
2059          * When a card element is dragged over ready to drop (return false to block dropable)
2060          * @param {Roo.bootstrap.Card} this
2061          * @param {Object} data from dragdrop 
2062          */
2063          'cardover' : true
2064          
2065     });
2066 };
2067
2068
2069 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
2070     
2071     
2072     weight : '',
2073     
2074     margin: '', /// may be better in component?
2075     margin_top: '', 
2076     margin_bottom: '', 
2077     margin_left: '',
2078     margin_right: '',
2079     margin_x: '',
2080     margin_y: '',
2081     
2082     padding : '',
2083     padding_top: '', 
2084     padding_bottom: '', 
2085     padding_left: '',
2086     padding_right: '',
2087     padding_x: '',
2088     padding_y: '',
2089     
2090     display: '', 
2091     display_xs: '', 
2092     display_sm: '', 
2093     display_lg: '',
2094     display_xl: '',
2095  
2096     header_image  : '',
2097     header : '',
2098     header_size : 0,
2099     title : '',
2100     subtitle : '',
2101     html : '',
2102     footer: '',
2103
2104     collapsable : false,
2105     collapsed : false,
2106     rotateable : false,
2107     rotated : false,
2108     
2109     dragable : false,
2110     drag_group : false,
2111     dropable : false,
2112     drop_group : false,
2113     childContainer : false,
2114     dropEl : false, /// the dom placeholde element that indicates drop location.
2115     containerEl: false, // body container
2116     bodyEl: false, // card-body
2117     headerContainerEl : false, //
2118     headerEl : false,
2119     header_imageEl : false,
2120     
2121     
2122     layoutCls : function()
2123     {
2124         var cls = '';
2125         var t = this;
2126         Roo.log(this.margin_bottom.length);
2127         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
2128             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
2129             
2130             if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
2131                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
2132             }
2133             if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
2134                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
2135             }
2136         });
2137         
2138         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
2139             if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
2140                 cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
2141             }
2142         });
2143         
2144         // more generic support?
2145         if (this.hidden) {
2146             cls += ' d-none';
2147         }
2148         
2149         return cls;
2150     },
2151  
2152        // Roo.log("Call onRender: " + this.xtype);
2153         /*  We are looking at something like this.
2154 <div class="card">
2155     <img src="..." class="card-img-top" alt="...">
2156     <div class="card-body">
2157         <h5 class="card-title">Card title</h5>
2158          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
2159
2160         >> this bit is really the body...
2161         <div> << we will ad dthis in hopefully it will not break shit.
2162         
2163         ** card text does not actually have any styling...
2164         
2165             <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>
2166         
2167         </div> <<
2168           <a href="#" class="card-link">Card link</a>
2169           
2170     </div>
2171     <div class="card-footer">
2172         <small class="text-muted">Last updated 3 mins ago</small>
2173     </div>
2174 </div>
2175          */
2176     getAutoCreate : function(){
2177         
2178         var cfg = {
2179             tag : 'div',
2180             cls : 'card',
2181             cn : [ ]
2182         };
2183         
2184         if (this.weight.length && this.weight != 'light') {
2185             cfg.cls += ' text-white';
2186         } else {
2187             cfg.cls += ' text-dark'; // need as it's nested..
2188         }
2189         if (this.weight.length) {
2190             cfg.cls += ' bg-' + this.weight;
2191         }
2192         
2193         cfg.cls += ' ' + this.layoutCls(); 
2194         
2195         var hdr = false;
2196         var hdr_ctr = false;
2197         if (this.header.length) {
2198             hdr = {
2199                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
2200                 cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2201                 cn : []
2202             };
2203             cfg.cn.push(hdr);
2204             hdr_ctr = hdr;
2205         } else {
2206             hdr = {
2207                 tag : 'div',
2208                 cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2209                 cn : []
2210             };
2211             cfg.cn.push(hdr);
2212             hdr_ctr = hdr;
2213         }
2214         if (this.collapsable) {
2215             hdr_ctr = {
2216             tag : 'a',
2217             cls : 'd-block user-select-none',
2218             cn: [
2219                     {
2220                         tag: 'i',
2221                         cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
2222                     }
2223                    
2224                 ]
2225             };
2226             hdr.cn.push(hdr_ctr);
2227         }
2228         
2229         hdr_ctr.cn.push(        {
2230             tag: 'span',
2231             cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
2232             html : this.header
2233         });
2234         
2235         
2236         if (this.header_image.length) {
2237             cfg.cn.push({
2238                 tag : 'img',
2239                 cls : 'card-img-top',
2240                 src: this.header_image // escape?
2241             });
2242         } else {
2243             cfg.cn.push({
2244                     tag : 'div',
2245                     cls : 'card-img-top d-none' 
2246                 });
2247         }
2248             
2249         var body = {
2250             tag : 'div',
2251             cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
2252             cn : []
2253         };
2254         var obody = body;
2255         if (this.collapsable || this.rotateable) {
2256             obody = {
2257                 tag: 'div',
2258                 cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
2259                 cn : [  body ]
2260             };
2261         }
2262         
2263         cfg.cn.push(obody);
2264         
2265         if (this.title.length) {
2266             body.cn.push({
2267                 tag : 'div',
2268                 cls : 'card-title',
2269                 src: this.title // escape?
2270             });
2271         }  
2272         
2273         if (this.subtitle.length) {
2274             body.cn.push({
2275                 tag : 'div',
2276                 cls : 'card-title',
2277                 src: this.subtitle // escape?
2278             });
2279         }
2280         
2281         body.cn.push({
2282             tag : 'div',
2283             cls : 'roo-card-body-ctr'
2284         });
2285         
2286         if (this.html.length) {
2287             body.cn.push({
2288                 tag: 'div',
2289                 html : this.html
2290             });
2291         }
2292         // fixme ? handle objects?
2293         
2294         if (this.footer.length) {
2295            
2296             cfg.cn.push({
2297                 cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
2298                 html : this.footer
2299             });
2300             
2301         } else {
2302             cfg.cn.push({cls : 'card-footer d-none'});
2303         }
2304         
2305         // footer...
2306         
2307         return cfg;
2308     },
2309     
2310     
2311     getCardHeader : function()
2312     {
2313         var  ret = this.el.select('.card-header',true).first();
2314         if (ret.hasClass('d-none')) {
2315             ret.removeClass('d-none');
2316         }
2317         
2318         return ret;
2319     },
2320     getCardFooter : function()
2321     {
2322         var  ret = this.el.select('.card-footer',true).first();
2323         if (ret.hasClass('d-none')) {
2324             ret.removeClass('d-none');
2325         }
2326         
2327         return ret;
2328     },
2329     getCardImageTop : function()
2330     {
2331         var  ret = this.header_imageEl;
2332         if (ret.hasClass('d-none')) {
2333             ret.removeClass('d-none');
2334         }
2335             
2336         return ret;
2337     },
2338     
2339     getChildContainer : function()
2340     {
2341         
2342         if(!this.el){
2343             return false;
2344         }
2345         return this.el.select('.roo-card-body-ctr',true).first();    
2346     },
2347     
2348     initEvents: function() 
2349     {
2350         this.bodyEl = this.el.select('.card-body',true).first(); 
2351         this.containerEl = this.getChildContainer();
2352         if(this.dragable){
2353             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
2354                     containerScroll: true,
2355                     ddGroup: this.drag_group || 'default_card_drag_group'
2356             });
2357             this.dragZone.getDragData = this.getDragData.createDelegate(this);
2358         }
2359         if (this.dropable) {
2360             this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
2361                 containerScroll: true,
2362                 ddGroup: this.drop_group || 'default_card_drag_group'
2363             });
2364             this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
2365             this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
2366             this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
2367             this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
2368             this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
2369         }
2370         
2371         if (this.collapsable) {
2372             this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
2373         }
2374         if (this.rotateable) {
2375             this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
2376         }
2377         this.collapsableEl = this.el.select('.roo-collapsable',true).first();
2378          
2379         this.footerEl = this.el.select('.card-footer',true).first();
2380         this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first();
2381         this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first();
2382         this.headerEl = this.el.select('.card-header',true).first();
2383         
2384         if (this.rotated) {
2385             this.el.addClass('roo-card-rotated');
2386             this.fireEvent('rotate', this, true);
2387         }
2388         this.header_imageEl = this.el.select('.card-img-top',true).first(); 
2389         this.header_imageEl.on('load', this.onHeaderImageLoad, this );
2390         
2391     },
2392     getDragData : function(e)
2393     {
2394         var target = this.getEl();
2395         if (target) {
2396             //this.handleSelection(e);
2397             
2398             var dragData = {
2399                 source: this,
2400                 copy: false,
2401                 nodes: this.getEl(),
2402                 records: []
2403             };
2404             
2405             
2406             dragData.ddel = target.dom ;    // the div element
2407             Roo.log(target.getWidth( ));
2408             dragData.ddel.style.width = target.getWidth() + 'px';
2409             
2410             return dragData;
2411         }
2412         return false;
2413     },
2414     /**
2415     *    Part of the Roo.dd.DropZone interface. If no target node is found, the
2416     *    whole Element becomes the target, and this causes the drop gesture to append.
2417     *
2418     *    Returns an object:
2419     *     {
2420            
2421            position : 'below' or 'above'
2422            card  : relateive to card OBJECT (or true for no cards listed)
2423            items_n : relative to nth item in list
2424            card_n : relative to  nth card in list
2425     }
2426     *
2427     *    
2428     */
2429     getTargetFromEvent : function(e, dragged_card_el)
2430     {
2431         var target = e.getTarget();
2432         while ((target !== null) && (target.parentNode != this.containerEl.dom)) {
2433             target = target.parentNode;
2434         }
2435         
2436         var ret = {
2437             position: '',
2438             cards : [],
2439             card_n : -1,
2440             items_n : -1,
2441             card : false 
2442         };
2443         
2444         //Roo.log([ 'target' , target ? target.id : '--nothing--']);
2445         // see if target is one of the 'cards'...
2446         
2447         
2448         //Roo.log(this.items.length);
2449         var pos = false;
2450         
2451         var last_card_n = 0;
2452         var cards_len  = 0;
2453         for (var i = 0;i< this.items.length;i++) {
2454             
2455             if (!this.items[i].el.hasClass('card')) {
2456                  continue;
2457             }
2458             pos = this.getDropPoint(e, this.items[i].el.dom);
2459             
2460             cards_len = ret.cards.length;
2461             //Roo.log(this.items[i].el.dom.id);
2462             ret.cards.push(this.items[i]);
2463             last_card_n  = i;
2464             if (ret.card_n < 0 && pos == 'above') {
2465                 ret.position = cards_len > 0 ? 'below' : pos;
2466                 ret.items_n = i > 0 ? i - 1 : 0;
2467                 ret.card_n  = cards_len  > 0 ? cards_len - 1 : 0;
2468                 ret.card = ret.cards[ret.card_n];
2469             }
2470         }
2471         if (!ret.cards.length) {
2472             ret.card = true;
2473             ret.position = 'below';
2474             ret.items_n;
2475             return ret;
2476         }
2477         // could not find a card.. stick it at the end..
2478         if (ret.card_n < 0) {
2479             ret.card_n = last_card_n;
2480             ret.card = ret.cards[last_card_n];
2481             ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
2482             ret.position = 'below';
2483         }
2484         
2485         if (this.items[ret.items_n].el == dragged_card_el) {
2486             return false;
2487         }
2488         
2489         if (ret.position == 'below') {
2490             var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
2491             
2492             if (card_after  && card_after.el == dragged_card_el) {
2493                 return false;
2494             }
2495             return ret;
2496         }
2497         
2498         // its's after ..
2499         var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
2500         
2501         if (card_before  && card_before.el == dragged_card_el) {
2502             return false;
2503         }
2504         
2505         return ret;
2506     },
2507     
2508     onNodeEnter : function(n, dd, e, data){
2509         return false;
2510     },
2511     onNodeOver : function(n, dd, e, data)
2512     {
2513        
2514         var target_info = this.getTargetFromEvent(e,data.source.el);
2515         if (target_info === false) {
2516             this.dropPlaceHolder('hide');
2517             return false;
2518         }
2519         Roo.log(['getTargetFromEvent', target_info ]);
2520         
2521         
2522         if (this.fireEvent('cardover', this, [ data ]) === false) {
2523             return false;
2524         }
2525         
2526         this.dropPlaceHolder('show', target_info,data);
2527         
2528         return false; 
2529     },
2530     onNodeOut : function(n, dd, e, data){
2531         this.dropPlaceHolder('hide');
2532      
2533     },
2534     onNodeDrop : function(n, dd, e, data)
2535     {
2536         
2537         // call drop - return false if
2538         
2539         // this could actually fail - if the Network drops..
2540         // we will ignore this at present..- client should probably reload
2541         // the whole set of cards if stuff like that fails.
2542         
2543         
2544         var info = this.getTargetFromEvent(e,data.source.el);
2545         if (info === false) {
2546             return false;
2547         }
2548         this.dropPlaceHolder('hide');
2549   
2550           
2551     
2552         this.acceptCard(data.source, info.position, info.card, info.items_n);
2553         return true;
2554          
2555     },
2556     firstChildCard : function()
2557     {
2558         for (var i = 0;i< this.items.length;i++) {
2559             
2560             if (!this.items[i].el.hasClass('card')) {
2561                  continue;
2562             }
2563             return this.items[i];
2564         }
2565         return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards...
2566     },
2567     /**
2568      * accept card
2569      *
2570      * -        card.acceptCard(move_card, info.position, info.card, info.items_n);
2571      */
2572     acceptCard : function(move_card,  position, next_to_card )
2573     {
2574         if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) {
2575             return false;
2576         }
2577         
2578         var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
2579         
2580         move_card.parent().removeCard(move_card);
2581         
2582         
2583         var dom = move_card.el.dom;
2584         dom.style.width = ''; // clear with - which is set by drag.
2585         
2586         if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
2587             var cardel = next_to_card.el.dom;
2588             
2589             if (position == 'above' ) {
2590                 cardel.parentNode.insertBefore(dom, cardel);
2591             } else if (cardel.nextSibling) {
2592                 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
2593             } else {
2594                 cardel.parentNode.append(dom);
2595             }
2596         } else {
2597             // card container???
2598             this.containerEl.dom.append(dom);
2599         }
2600         
2601         //FIXME HANDLE card = true 
2602         
2603         // add this to the correct place in items.
2604         
2605         // remove Card from items.
2606         
2607        
2608         if (this.items.length) {
2609             var nitems = [];
2610             //Roo.log([info.items_n, info.position, this.items.length]);
2611             for (var i =0; i < this.items.length; i++) {
2612                 if (i == to_items_n && position == 'above') {
2613                     nitems.push(move_card);
2614                 }
2615                 nitems.push(this.items[i]);
2616                 if (i == to_items_n && position == 'below') {
2617                     nitems.push(move_card);
2618                 }
2619             }
2620             this.items = nitems;
2621             Roo.log(this.items);
2622         } else {
2623             this.items.push(move_card);
2624         }
2625         
2626         move_card.parentId = this.id;
2627         
2628         return true;
2629         
2630         
2631     },
2632     removeCard : function(c)
2633     {
2634         this.items = this.items.filter(function(e) { return e != c });
2635  
2636         var dom = c.el.dom;
2637         dom.parentNode.removeChild(dom);
2638         dom.style.width = ''; // clear with - which is set by drag.
2639         c.parentId = false;
2640         
2641     },
2642     
2643     /**    Decide whether to drop above or below a View node. */
2644     getDropPoint : function(e, n, dd)
2645     {
2646         if (dd) {
2647              return false;
2648         }
2649         if (n == this.containerEl.dom) {
2650             return "above";
2651         }
2652         var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
2653         var c = t + (b - t) / 2;
2654         var y = Roo.lib.Event.getPageY(e);
2655         if(y <= c) {
2656             return "above";
2657         }else{
2658             return "below";
2659         }
2660     },
2661     onToggleCollapse : function(e)
2662         {
2663         if (this.collapsed) {
2664             this.el.select('.roo-collapse-toggle').removeClass('collapsed');
2665             this.collapsableEl.addClass('show');
2666             this.collapsed = false;
2667             return;
2668         }
2669         this.el.select('.roo-collapse-toggle').addClass('collapsed');
2670         this.collapsableEl.removeClass('show');
2671         this.collapsed = true;
2672         
2673     
2674     },
2675     
2676     onToggleRotate : function(e)
2677     {
2678         this.collapsableEl.removeClass('show');
2679         this.footerEl.removeClass('d-none');
2680         this.el.removeClass('roo-card-rotated');
2681         this.el.removeClass('d-none');
2682         if (this.rotated) {
2683             
2684             this.collapsableEl.addClass('show');
2685             this.rotated = false;
2686             this.fireEvent('rotate', this, this.rotated);
2687             return;
2688         }
2689         this.el.addClass('roo-card-rotated');
2690         this.footerEl.addClass('d-none');
2691         this.el.select('.roo-collapsable').removeClass('show');
2692         
2693         this.rotated = true;
2694         this.fireEvent('rotate', this, this.rotated);
2695     
2696     },
2697     
2698     dropPlaceHolder: function (action, info, data)
2699     {
2700         if (this.dropEl === false) {
2701             this.dropEl = Roo.DomHelper.append(this.containerEl, {
2702             cls : 'd-none'
2703             },true);
2704         }
2705         this.dropEl.removeClass(['d-none', 'd-block']);        
2706         if (action == 'hide') {
2707             
2708             this.dropEl.addClass('d-none');
2709             return;
2710         }
2711         // FIXME - info.card == true!!!
2712         this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
2713         
2714         if (info.card !== true) {
2715             var cardel = info.card.el.dom;
2716             
2717             if (info.position == 'above') {
2718                 cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
2719             } else if (cardel.nextSibling) {
2720                 cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
2721             } else {
2722                 cardel.parentNode.append(this.dropEl.dom);
2723             }
2724         } else {
2725             // card container???
2726             this.containerEl.dom.append(this.dropEl.dom);
2727         }
2728         
2729         this.dropEl.addClass('d-block roo-card-dropzone');
2730         
2731         this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
2732         
2733         
2734     
2735     
2736     
2737     },
2738     setHeaderText: function(html)
2739     {
2740         this.header = html;
2741         if (this.headerContainerEl) {
2742             this.headerContainerEl.dom.innerHTML = html;
2743         }
2744     },
2745     onHeaderImageLoad : function(ev, he)
2746     {
2747         if (!this.header_image_fit_square) {
2748             return;
2749         }
2750         
2751         var hw = he.naturalHeight / he.naturalWidth;
2752         // wide image = < 0
2753         // tall image = > 1
2754         //var w = he.dom.naturalWidth;
2755         var ww = he.width;
2756         he.style.left =  0;
2757         he.style.position =  'relative';
2758         if (hw > 1) {
2759             var nw = (ww * (1/hw));
2760             Roo.get(he).setSize( ww * (1/hw),  ww);
2761             he.style.left =  ((ww - nw)/ 2) + 'px';
2762             he.style.position =  'relative';
2763         }
2764
2765     }
2766
2767     
2768 });
2769
2770 /*
2771  * - LGPL
2772  *
2773  * Card header - holder for the card header elements.
2774  * 
2775  */
2776
2777 /**
2778  * @class Roo.bootstrap.CardHeader
2779  * @extends Roo.bootstrap.Element
2780  * @parent Roo.bootstrap.Card
2781  * @children Roo.bootstrap.Component
2782  * Bootstrap CardHeader class
2783  * @constructor
2784  * Create a new Card Header - that you can embed children into
2785  * @param {Object} config The config object
2786  */
2787
2788 Roo.bootstrap.CardHeader = function(config){
2789     Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
2790 };
2791
2792 Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element,  {
2793     
2794     
2795     container_method : 'getCardHeader' 
2796     
2797      
2798     
2799     
2800    
2801 });
2802
2803  
2804
2805  /*
2806  * - LGPL
2807  *
2808  * Card footer - holder for the card footer elements.
2809  * 
2810  */
2811
2812 /**
2813  * @class Roo.bootstrap.CardFooter
2814  * @extends Roo.bootstrap.Element
2815  * @parent Roo.bootstrap.Card
2816  * @children Roo.bootstrap.Component
2817  * Bootstrap CardFooter class
2818  * 
2819  * @constructor
2820  * Create a new Card Footer - that you can embed children into
2821  * @param {Object} config The config object
2822  */
2823
2824 Roo.bootstrap.CardFooter = function(config){
2825     Roo.bootstrap.CardFooter.superclass.constructor.call(this, config);
2826 };
2827
2828 Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element,  {
2829     
2830     
2831     container_method : 'getCardFooter' 
2832     
2833      
2834     
2835     
2836    
2837 });
2838
2839  
2840
2841  /*
2842  * - LGPL
2843  *
2844  * Card header - holder for the card header elements.
2845  * 
2846  */
2847
2848 /**
2849  * @class Roo.bootstrap.CardImageTop
2850  * @extends Roo.bootstrap.Element
2851  * @parent Roo.bootstrap.Card
2852  * @children Roo.bootstrap.Component
2853  * Bootstrap CardImageTop class
2854  * 
2855  * @constructor
2856  * Create a new Card Image Top container
2857  * @param {Object} config The config object
2858  */
2859
2860 Roo.bootstrap.CardImageTop = function(config){
2861     Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
2862 };
2863
2864 Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
2865     
2866    
2867     container_method : 'getCardImageTop' 
2868     
2869      
2870     
2871    
2872 });
2873
2874  
2875
2876  
2877 /*
2878 * Licence: LGPL
2879 */
2880
2881 /**
2882  * @class Roo.bootstrap.ButtonUploader
2883  * @extends Roo.bootstrap.Button
2884  * Bootstrap Button Uploader class - it's a button which when you add files to it
2885  *
2886  * 
2887  * @cfg {Number} errorTimeout default 3000
2888  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
2889  * @cfg {Array}  html The button text.
2890  * @cfg {Boolean}  multiple (default true) Should the upload allow multiple files to be uploaded.
2891  *
2892  * @constructor
2893  * Create a new CardUploader
2894  * @param {Object} config The config object
2895  */
2896
2897 Roo.bootstrap.ButtonUploader = function(config){
2898     
2899  
2900     
2901     Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
2902     
2903      
2904      this.addEvents({
2905          // raw events
2906         /**
2907          * @event beforeselect
2908          * When button is pressed, before show upload files dialog is shown
2909          * @param {Roo.bootstrap.UploaderButton} this
2910          *
2911          */
2912         'beforeselect' : true,
2913          /**
2914          * @event fired when files have been selected, 
2915          * When a the download link is clicked
2916          * @param {Roo.bootstrap.UploaderButton} this
2917          * @param {Array} Array of files that have been uploaded
2918          */
2919         'uploaded' : true
2920         
2921     });
2922 };
2923  
2924 Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button,  {
2925     
2926      
2927     errorTimeout : 3000,
2928      
2929     images : false,
2930    
2931     fileCollection : false,
2932     allowBlank : true,
2933     
2934     multiple : true,
2935     
2936     getAutoCreate : function()
2937     {
2938        
2939         
2940         return  {
2941             cls :'div' ,
2942             cn : [
2943                 Roo.bootstrap.Button.prototype.getAutoCreate.call(this) 
2944             ]
2945         };
2946            
2947          
2948     },
2949      
2950    
2951     initEvents : function()
2952     {
2953         
2954         Roo.bootstrap.Button.prototype.initEvents.call(this);
2955         
2956         
2957         
2958         
2959         
2960         this.urlAPI = (window.createObjectURL && window) || 
2961                                 (window.URL && URL.revokeObjectURL && URL) || 
2962                                 (window.webkitURL && webkitURL);
2963                         
2964         var im = {
2965             tag: 'input',
2966             type : 'file',
2967             cls : 'd-none  roo-card-upload-selector' 
2968           
2969         };
2970         if (this.multiple) {
2971             im.multiple = 'multiple';
2972         }
2973         this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem.
2974        
2975         //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
2976         
2977         this.selectorEl.on('change', this.onFileSelected, this);
2978          
2979          
2980        
2981     },
2982     
2983    
2984     onClick : function(e)
2985     {
2986         e.preventDefault();
2987         
2988         if ( this.fireEvent('beforeselect', this) === false) {
2989             return;
2990         }
2991          
2992         this.selectorEl.dom.click();
2993          
2994     },
2995     
2996     onFileSelected : function(e)
2997     {
2998         e.preventDefault();
2999         
3000         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
3001             return;
3002         }
3003         var files = Array.prototype.slice.call(this.selectorEl.dom.files);
3004         this.selectorEl.dom.value  = '';// hopefully reset..
3005         
3006         this.fireEvent('uploaded', this,  files );
3007         
3008     },
3009     
3010        
3011    
3012     
3013     /**
3014      * addCard - add an Attachment to the uploader
3015      * @param data - the data about the image to upload
3016      *
3017      * {
3018           id : 123
3019           title : "Title of file",
3020           is_uploaded : false,
3021           src : "http://.....",
3022           srcfile : { the File upload object },
3023           mimetype : file.type,
3024           preview : false,
3025           is_deleted : 0
3026           .. any other data...
3027         }
3028      *
3029      * 
3030     */
3031      
3032     reset: function()
3033     {
3034          
3035          this.selectorEl
3036     } 
3037     
3038     
3039     
3040     
3041 });
3042  /*
3043  * - LGPL
3044  *
3045  * image
3046  * 
3047  */
3048
3049
3050 /**
3051  * @class Roo.bootstrap.Img
3052  * @extends Roo.bootstrap.Component
3053  * Bootstrap Img class
3054  * @cfg {Boolean} imgResponsive false | true
3055  * @cfg {String} border rounded | circle | thumbnail
3056  * @cfg {String} src image source
3057  * @cfg {String} alt image alternative text
3058  * @cfg {String} href a tag href
3059  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
3060  * @cfg {String} xsUrl xs image source
3061  * @cfg {String} smUrl sm image source
3062  * @cfg {String} mdUrl md image source
3063  * @cfg {String} lgUrl lg image source
3064  * @cfg {Boolean} backgroundContain (use style background and contain image in content)
3065  * 
3066  * @constructor
3067  * Create a new Input
3068  * @param {Object} config The config object
3069  */
3070
3071 Roo.bootstrap.Img = function(config){
3072     Roo.bootstrap.Img.superclass.constructor.call(this, config);
3073     
3074     this.addEvents({
3075         // img events
3076         /**
3077          * @event click
3078          * The img click event for the img.
3079          * @param {Roo.EventObject} e
3080          */
3081         "click" : true,
3082         /**
3083          * @event load
3084          * The when any image loads
3085          * @param {Roo.EventObject} e
3086          */
3087         "load" : true
3088     });
3089 };
3090
3091 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
3092     
3093     imgResponsive: true,
3094     border: '',
3095     src: 'about:blank',
3096     href: false,
3097     target: false,
3098     xsUrl: '',
3099     smUrl: '',
3100     mdUrl: '',
3101     lgUrl: '',
3102     backgroundContain : false,
3103
3104     getAutoCreate : function()
3105     {   
3106         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3107             return this.createSingleImg();
3108         }
3109         
3110         var cfg = {
3111             tag: 'div',
3112             cls: 'roo-image-responsive-group',
3113             cn: []
3114         };
3115         var _this = this;
3116         
3117         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
3118             
3119             if(!_this[size + 'Url']){
3120                 return;
3121             }
3122             
3123             var img = {
3124                 tag: 'img',
3125                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
3126                 html: _this.html || cfg.html,
3127                 src: _this[size + 'Url']
3128             };
3129             
3130             img.cls += ' roo-image-responsive-' + size;
3131             
3132             var s = ['xs', 'sm', 'md', 'lg'];
3133             
3134             s.splice(s.indexOf(size), 1);
3135             
3136             Roo.each(s, function(ss){
3137                 img.cls += ' hidden-' + ss;
3138             });
3139             
3140             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
3141                 cfg.cls += ' img-' + _this.border;
3142             }
3143             
3144             if(_this.alt){
3145                 cfg.alt = _this.alt;
3146             }
3147             
3148             if(_this.href){
3149                 var a = {
3150                     tag: 'a',
3151                     href: _this.href,
3152                     cn: [
3153                         img
3154                     ]
3155                 };
3156
3157                 if(this.target){
3158                     a.target = _this.target;
3159                 }
3160             }
3161             
3162             cfg.cn.push((_this.href) ? a : img);
3163             
3164         });
3165         
3166         return cfg;
3167     },
3168     
3169     createSingleImg : function()
3170     {
3171         var cfg = {
3172             tag: 'img',
3173             cls: (this.imgResponsive) ? 'img-responsive' : '',
3174             html : null,
3175             src : Roo.BLANK_IMAGE_URL  // just incase src get's set to undefined?!?
3176         };
3177         
3178         if (this.backgroundContain) {
3179             cfg.cls += ' background-contain';
3180         }
3181         
3182         cfg.html = this.html || cfg.html;
3183         
3184         if (this.backgroundContain) {
3185             cfg.style="background-image: url(" + this.src + ')';
3186         } else {
3187             cfg.src = this.src || cfg.src;
3188         }
3189         
3190         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
3191             cfg.cls += ' img-' + this.border;
3192         }
3193         
3194         if(this.alt){
3195             cfg.alt = this.alt;
3196         }
3197         
3198         if(this.href){
3199             var a = {
3200                 tag: 'a',
3201                 href: this.href,
3202                 cn: [
3203                     cfg
3204                 ]
3205             };
3206             
3207             if(this.target){
3208                 a.target = this.target;
3209             }
3210             
3211         }
3212         
3213         return (this.href) ? a : cfg;
3214     },
3215     
3216     initEvents: function() 
3217     {
3218         if(!this.href){
3219             this.el.on('click', this.onClick, this);
3220         }
3221         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3222             this.el.on('load', this.onImageLoad, this);
3223         } else {
3224             // not sure if this works.. not tested
3225             this.el.select('img', true).on('load', this.onImageLoad, this);
3226         }
3227         
3228     },
3229     
3230     onClick : function(e)
3231     {
3232         Roo.log('img onclick');
3233         this.fireEvent('click', this, e);
3234     },
3235     onImageLoad: function(e)
3236     {
3237         Roo.log('img load');
3238         this.fireEvent('load', this, e);
3239     },
3240     
3241     /**
3242      * Sets the url of the image - used to update it
3243      * @param {String} url the url of the image
3244      */
3245     
3246     setSrc : function(url)
3247     {
3248         this.src =  url;
3249         
3250         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
3251             if (this.backgroundContain) {
3252                 this.el.dom.style.backgroundImage =  'url(' + url + ')';
3253             } else {
3254                 this.el.dom.src =  url;
3255             }
3256             return;
3257         }
3258         
3259         this.el.select('img', true).first().dom.src =  url;
3260     }
3261     
3262     
3263    
3264 });
3265
3266  /*
3267  * - LGPL
3268  *
3269  * image
3270  * 
3271  */
3272
3273
3274 /**
3275  * @class Roo.bootstrap.Link
3276  * @extends Roo.bootstrap.Component
3277  * @children Roo.bootstrap.Component
3278  * Bootstrap Link Class (eg. '<a href>')
3279  
3280  * @cfg {String} alt image alternative text
3281  * @cfg {String} href a tag href
3282  * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
3283  * @cfg {String} html the content of the link.
3284  * @cfg {String} anchor name for the anchor link
3285  * @cfg {String} fa - favicon
3286
3287  * @cfg {Boolean} preventDefault (true | false) default false
3288
3289  * 
3290  * @constructor
3291  * Create a new Input
3292  * @param {Object} config The config object
3293  */
3294
3295 Roo.bootstrap.Link = function(config){
3296     Roo.bootstrap.Link.superclass.constructor.call(this, config);
3297     
3298     this.addEvents({
3299         // img events
3300         /**
3301          * @event click
3302          * The img click event for the img.
3303          * @param {Roo.EventObject} e
3304          */
3305         "click" : true
3306     });
3307 };
3308
3309 Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
3310     
3311     href: false,
3312     target: false,
3313     preventDefault: false,
3314     anchor : false,
3315     alt : false,
3316     fa: false,
3317
3318
3319     getAutoCreate : function()
3320     {
3321         var html = this.html || '';
3322         
3323         if (this.fa !== false) {
3324             html = '<i class="fa fa-' + this.fa + '"></i>';
3325         }
3326         var cfg = {
3327             tag: 'a'
3328         };
3329         // anchor's do not require html/href...
3330         if (this.anchor === false) {
3331             cfg.html = html;
3332             cfg.href = this.href || '#';
3333         } else {
3334             cfg.name = this.anchor;
3335             if (this.html !== false || this.fa !== false) {
3336                 cfg.html = html;
3337             }
3338             if (this.href !== false) {
3339                 cfg.href = this.href;
3340             }
3341         }
3342         
3343         if(this.alt !== false){
3344             cfg.alt = this.alt;
3345         }
3346         
3347         
3348         if(this.target !== false) {
3349             cfg.target = this.target;
3350         }
3351         
3352         return cfg;
3353     },
3354     
3355     initEvents: function() {
3356         
3357         if(!this.href || this.preventDefault){
3358             this.el.on('click', this.onClick, this);
3359         }
3360     },
3361     
3362     onClick : function(e)
3363     {
3364         if(this.preventDefault){
3365             e.preventDefault();
3366         }
3367         //Roo.log('img onclick');
3368         this.fireEvent('click', this, e);
3369     }
3370    
3371 });
3372
3373  /*
3374  * - LGPL
3375  *
3376  * header
3377  * 
3378  */
3379
3380 /**
3381  * @class Roo.bootstrap.Header
3382  * @extends Roo.bootstrap.Component
3383  * @children Roo.bootstrap.Component
3384  * Bootstrap Header class
3385  *
3386  * 
3387  * @cfg {String} html content of header
3388  * @cfg {Number} level (1|2|3|4|5|6) default 1
3389  * 
3390  * @constructor
3391  * Create a new Header
3392  * @param {Object} config The config object
3393  */
3394
3395
3396 Roo.bootstrap.Header  = function(config){
3397     Roo.bootstrap.Header.superclass.constructor.call(this, config);
3398 };
3399
3400 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
3401     
3402     //href : false,
3403     html : false,
3404     level : 1,
3405     
3406     
3407     
3408     getAutoCreate : function(){
3409         
3410         
3411         
3412         var cfg = {
3413             tag: 'h' + (1 *this.level),
3414             html: this.html || ''
3415         } ;
3416         
3417         return cfg;
3418     }
3419    
3420 });
3421
3422  
3423
3424  /**
3425  * @class Roo.bootstrap.MenuMgr
3426  * @licence LGPL
3427  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
3428  * @static
3429  */
3430 Roo.bootstrap.menu.Manager = function(){
3431    var menus, active, groups = {}, attached = false, lastShow = new Date();
3432
3433    // private - called when first menu is created
3434    function init(){
3435        menus = {};
3436        active = new Roo.util.MixedCollection();
3437        Roo.get(document).addKeyListener(27, function(){
3438            if(active.length > 0){
3439                hideAll();
3440            }
3441        });
3442    }
3443
3444    // private
3445    function hideAll(){
3446        if(active && active.length > 0){
3447            var c = active.clone();
3448            c.each(function(m){
3449                m.hide();
3450            });
3451        }
3452    }
3453
3454    // private
3455    function onHide(m){
3456        active.remove(m);
3457        if(active.length < 1){
3458            Roo.get(document).un("mouseup", onMouseDown);
3459             
3460            attached = false;
3461        }
3462    }
3463
3464    // private
3465    function onShow(m){
3466        var last = active.last();
3467        lastShow = new Date();
3468        active.add(m);
3469        if(!attached){
3470           Roo.get(document).on("mouseup", onMouseDown);
3471            
3472            attached = true;
3473        }
3474        if(m.parentMenu){
3475           //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
3476           m.parentMenu.activeChild = m;
3477        }else if(last && last.isVisible()){
3478           //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
3479        }
3480    }
3481
3482    // private
3483    function onBeforeHide(m){
3484        if(m.activeChild){
3485            m.activeChild.hide();
3486        }
3487        if(m.autoHideTimer){
3488            clearTimeout(m.autoHideTimer);
3489            delete m.autoHideTimer;
3490        }
3491    }
3492
3493    // private
3494    function onBeforeShow(m){
3495        var pm = m.parentMenu;
3496        if(!pm && !m.allowOtherMenus){
3497            hideAll();
3498        }else if(pm && pm.activeChild && active != m){
3499            pm.activeChild.hide();
3500        }
3501    }
3502
3503    // private this should really trigger on mouseup..
3504    function onMouseDown(e){
3505         Roo.log("on Mouse Up");
3506         
3507         if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".dropdown-menu") && !e.getTarget('.user-menu')){
3508             Roo.log("MenuManager hideAll");
3509             hideAll();
3510             e.stopEvent();
3511         }
3512         
3513         
3514    }
3515
3516    // private
3517    function onBeforeCheck(mi, state){
3518        if(state){
3519            var g = groups[mi.group];
3520            for(var i = 0, l = g.length; i < l; i++){
3521                if(g[i] != mi){
3522                    g[i].setChecked(false);
3523                }
3524            }
3525        }
3526    }
3527
3528    return {
3529
3530        /**
3531         * Hides all menus that are currently visible
3532         */
3533        hideAll : function(){
3534             hideAll();  
3535        },
3536
3537        // private
3538        register : function(menu){
3539            if(!menus){
3540                init();
3541            }
3542            menus[menu.id] = menu;
3543            menu.on("beforehide", onBeforeHide);
3544            menu.on("hide", onHide);
3545            menu.on("beforeshow", onBeforeShow);
3546            menu.on("show", onShow);
3547            var g = menu.group;
3548            if(g && menu.events["checkchange"]){
3549                if(!groups[g]){
3550                    groups[g] = [];
3551                }
3552                groups[g].push(menu);
3553                menu.on("checkchange", onCheck);
3554            }
3555        },
3556
3557         /**
3558          * Returns a {@link Roo.menu.Menu} object
3559          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
3560          * be used to generate and return a new Menu instance.
3561          */
3562        get : function(menu){
3563            if(typeof menu == "string"){ // menu id
3564                return menus[menu];
3565            }else if(menu.events){  // menu instance
3566                return menu;
3567            }
3568            /*else if(typeof menu.length == 'number'){ // array of menu items?
3569                return new Roo.bootstrap.Menu({items:menu});
3570            }else{ // otherwise, must be a config
3571                return new Roo.bootstrap.Menu(menu);
3572            }
3573            */
3574            return false;
3575        },
3576
3577        // private
3578        unregister : function(menu){
3579            delete menus[menu.id];
3580            menu.un("beforehide", onBeforeHide);
3581            menu.un("hide", onHide);
3582            menu.un("beforeshow", onBeforeShow);
3583            menu.un("show", onShow);
3584            var g = menu.group;
3585            if(g && menu.events["checkchange"]){
3586                groups[g].remove(menu);
3587                menu.un("checkchange", onCheck);
3588            }
3589        },
3590
3591        // private
3592        registerCheckable : function(menuItem){
3593            var g = menuItem.group;
3594            if(g){
3595                if(!groups[g]){
3596                    groups[g] = [];
3597                }
3598                groups[g].push(menuItem);
3599                menuItem.on("beforecheckchange", onBeforeCheck);
3600            }
3601        },
3602
3603        // private
3604        unregisterCheckable : function(menuItem){
3605            var g = menuItem.group;
3606            if(g){
3607                groups[g].remove(menuItem);
3608                menuItem.un("beforecheckchange", onBeforeCheck);
3609            }
3610        }
3611    };
3612 }(); 
3613 /**
3614  * @class Roo.bootstrap.menu.Menu
3615  * @extends Roo.bootstrap.Component
3616  * @licence LGPL
3617  * @children Roo.bootstrap.menu.Item Roo.bootstrap.menu.Separator
3618  * @parent none
3619  * Bootstrap Menu class - container for MenuItems - normally has to be added to a object that supports the menu property
3620  * 
3621  * @cfg {String} type (dropdown|treeview|submenu) type of menu
3622  * @cfg {bool} hidden  if the menu should be hidden when rendered.
3623  * @cfg {bool} stopEvent (true|false)  Stop event after trigger press (default true)
3624  * @cfg {bool} isLink (true|false)  the menu has link disable auto expand and collaspe (default false)
3625 * @cfg {bool} hideTrigger (true|false)  default false - hide the carret for trigger.
3626 * @cfg {String} align  default tl-bl? == below  - how the menu should be aligned. 
3627  
3628  * @constructor
3629  * Create a new Menu
3630  * @param {Object} config The config objectQ
3631  */
3632
3633
3634 Roo.bootstrap.menu.Menu = function(config){
3635     
3636     if (config.type == 'treeview') {
3637         // normally menu's are drawn attached to the document to handle layering etc..
3638         // however treeview (used by the docs menu is drawn into the parent element)
3639         this.container_method = 'getChildContainer'; 
3640     }
3641     
3642     Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
3643     if (this.registerMenu && this.type != 'treeview')  {
3644         Roo.bootstrap.menu.Manager.register(this);
3645     }
3646     
3647     
3648     this.addEvents({
3649         /**
3650          * @event beforeshow
3651          * Fires before this menu is displayed (return false to block)
3652          * @param {Roo.menu.Menu} this
3653          */
3654         beforeshow : true,
3655         /**
3656          * @event beforehide
3657          * Fires before this menu is hidden (return false to block)
3658          * @param {Roo.menu.Menu} this
3659          */
3660         beforehide : true,
3661         /**
3662          * @event show
3663          * Fires after this menu is displayed
3664          * @param {Roo.menu.Menu} this
3665          */
3666         show : true,
3667         /**
3668          * @event hide
3669          * Fires after this menu is hidden
3670          * @param {Roo.menu.Menu} this
3671          */
3672         hide : true,
3673         /**
3674          * @event click
3675          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
3676          * @param {Roo.menu.Menu} this
3677          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3678          * @param {Roo.EventObject} e
3679          */
3680         click : true,
3681         /**
3682          * @event mouseover
3683          * Fires when the mouse is hovering over this menu
3684          * @param {Roo.menu.Menu} this
3685          * @param {Roo.EventObject} e
3686          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3687          */
3688         mouseover : true,
3689         /**
3690          * @event mouseout
3691          * Fires when the mouse exits this menu
3692          * @param {Roo.menu.Menu} this
3693          * @param {Roo.EventObject} e
3694          * @param {Roo.menu.Item} menuItem The menu item that was clicked
3695          */
3696         mouseout : true,
3697         /**
3698          * @event itemclick
3699          * Fires when a menu item contained in this menu is clicked
3700          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
3701          * @param {Roo.EventObject} e
3702          */
3703         itemclick: true
3704     });
3705     this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
3706 };
3707
3708 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
3709     
3710    /// html : false,
3711    
3712     triggerEl : false,  // is this set by component builder? -- it should really be fetched from parent()???
3713     type: false,
3714     /**
3715      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
3716      */
3717     registerMenu : true,
3718     
3719     menuItems :false, // stores the menu items..
3720     
3721     hidden:true,
3722         
3723     parentMenu : false,
3724     
3725     stopEvent : true,
3726     
3727     isLink : false,
3728     
3729     container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works.
3730     
3731     hideTrigger : false,
3732     
3733     align : 'tl-bl?',
3734     
3735     
3736     getChildContainer : function() {
3737         return this.el;  
3738     },
3739     
3740     getAutoCreate : function(){
3741          
3742         //if (['right'].indexOf(this.align)!==-1) {
3743         //    cfg.cn[1].cls += ' pull-right'
3744         //}
3745          
3746         var cfg = {
3747             tag : 'ul',
3748             cls : 'dropdown-menu shadow' ,
3749             style : 'z-index:1000'
3750             
3751         };
3752         
3753         if (this.type === 'submenu') {
3754             cfg.cls = 'submenu active';
3755         }
3756         if (this.type === 'treeview') {
3757             cfg.cls = 'treeview-menu';
3758         }
3759         
3760         return cfg;
3761     },
3762     initEvents : function() {
3763         
3764        // Roo.log("ADD event");
3765        // Roo.log(this.triggerEl.dom);
3766         if (this.triggerEl) {
3767             
3768             this.triggerEl.on('click', this.onTriggerClick, this);
3769             
3770             this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
3771             
3772             if (!this.hideTrigger) {
3773                 if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
3774                     // dropdown toggle on the 'a' in BS4?
3775                     this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
3776                 } else {
3777                     this.triggerEl.addClass('dropdown-toggle');
3778                 }
3779             }
3780         }
3781         
3782         if (Roo.isTouch) {
3783             this.el.on('touchstart'  , this.onTouch, this);
3784         }
3785         this.el.on('click' , this.onClick, this);
3786
3787         this.el.on("mouseover", this.onMouseOver, this);
3788         this.el.on("mouseout", this.onMouseOut, this);
3789         
3790     },
3791     
3792     findTargetItem : function(e)
3793     {
3794         var t = e.getTarget(".dropdown-menu-item", this.el,  true);
3795         if(!t){
3796             return false;
3797         }
3798         //Roo.log(t);         Roo.log(t.id);
3799         if(t && t.id){
3800             //Roo.log(this.menuitems);
3801             return this.menuitems.get(t.id);
3802             
3803             //return this.items.get(t.menuItemId);
3804         }
3805         
3806         return false;
3807     },
3808     
3809     onTouch : function(e) 
3810     {
3811         Roo.log("menu.onTouch");
3812         //e.stopEvent(); this make the user popdown broken
3813         this.onClick(e);
3814     },
3815     
3816     onClick : function(e)
3817     {
3818         Roo.log("menu.onClick");
3819         
3820         var t = this.findTargetItem(e);
3821         if(!t || t.isContainer){
3822             return;
3823         }
3824         Roo.log(e);
3825         /*
3826         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
3827             if(t == this.activeItem && t.shouldDeactivate(e)){
3828                 this.activeItem.deactivate();
3829                 delete this.activeItem;
3830                 return;
3831             }
3832             if(t.canActivate){
3833                 this.setActiveItem(t, true);
3834             }
3835             return;
3836             
3837             
3838         }
3839         */
3840        
3841         Roo.log('pass click event');
3842         
3843         t.onClick(e);
3844         
3845         this.fireEvent("click", this, t, e);
3846         
3847         var _this = this;
3848         
3849         if(!t.href.length || t.href == '#'){
3850             (function() { _this.hide(); }).defer(100);
3851         }
3852         
3853     },
3854     
3855     onMouseOver : function(e){
3856         var t  = this.findTargetItem(e);
3857         //Roo.log(t);
3858         //if(t){
3859         //    if(t.canActivate && !t.disabled){
3860         //        this.setActiveItem(t, true);
3861         //    }
3862         //}
3863         
3864         this.fireEvent("mouseover", this, e, t);
3865     },
3866     isVisible : function(){
3867         return !this.hidden;
3868     },
3869     onMouseOut : function(e){
3870         var t  = this.findTargetItem(e);
3871         
3872         //if(t ){
3873         //    if(t == this.activeItem && t.shouldDeactivate(e)){
3874         //        this.activeItem.deactivate();
3875         //        delete this.activeItem;
3876         //    }
3877         //}
3878         this.fireEvent("mouseout", this, e, t);
3879     },
3880     
3881     
3882     /**
3883      * Displays this menu relative to another element
3884      * @param {String/HTMLElement/Roo.Element} element The element to align to
3885      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
3886      * the element (defaults to this.defaultAlign)
3887      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3888      */
3889     show : function(el, pos, parentMenu)
3890     {
3891         if (false === this.fireEvent("beforeshow", this)) {
3892             Roo.log("show canceled");
3893             return;
3894         }
3895         this.parentMenu = parentMenu;
3896         if(!this.el){
3897             this.render();
3898         }
3899         this.el.addClass('show'); // show otherwise we do not know how big we are..
3900          
3901         var xy = this.el.getAlignToXY(el, pos);
3902         
3903         // bl-tl << left align  below
3904         // tl-bl << left align 
3905         
3906         if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
3907             // if it goes to far to the right.. -> align left.
3908             xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r'))
3909         }
3910         if(xy[0] < 0){
3911             // was left align - go right?
3912             xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l'))
3913         }
3914         
3915         // goes down the bottom
3916         if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() ||
3917            xy[1]  < 0 ){
3918             var a = this.align.replace('?', '').split('-');
3919             xy = this.el.getAlignToXY(el, a[1]  + '-' + a[0] + '?')
3920             
3921         }
3922         
3923         this.showAt(  xy , parentMenu, false);
3924     },
3925      /**
3926      * Displays this menu at a specific xy position
3927      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
3928      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3929      */
3930     showAt : function(xy, parentMenu, /* private: */_e){
3931         this.parentMenu = parentMenu;
3932         if(!this.el){
3933             this.render();
3934         }
3935         if(_e !== false){
3936             this.fireEvent("beforeshow", this);
3937             //xy = this.el.adjustForConstraints(xy);
3938         }
3939         
3940         //this.el.show();
3941         this.hideMenuItems();
3942         this.hidden = false;
3943         if (this.triggerEl) {
3944             this.triggerEl.addClass('open');
3945         }
3946         
3947         this.el.addClass('show');
3948         
3949         
3950         
3951         // reassign x when hitting right
3952         
3953         // reassign y when hitting bottom
3954         
3955         // but the list may align on trigger left or trigger top... should it be a properity?
3956         
3957         if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
3958             this.el.setXY(xy);
3959         }
3960         
3961         this.focus();
3962         this.fireEvent("show", this);
3963     },
3964     
3965     focus : function(){
3966         return;
3967         if(!this.hidden){
3968             this.doFocus.defer(50, this);
3969         }
3970     },
3971
3972     doFocus : function(){
3973         if(!this.hidden){
3974             this.focusEl.focus();
3975         }
3976     },
3977
3978     /**
3979      * Hides this menu and optionally all parent menus
3980      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
3981      */
3982     hide : function(deep)
3983     {
3984         if (false === this.fireEvent("beforehide", this)) {
3985             Roo.log("hide canceled");
3986             return;
3987         }
3988         this.hideMenuItems();
3989         if(this.el && this.isVisible()){
3990            
3991             if(this.activeItem){
3992                 this.activeItem.deactivate();
3993                 this.activeItem = null;
3994             }
3995             if (this.triggerEl) {
3996                 this.triggerEl.removeClass('open');
3997             }
3998             
3999             this.el.removeClass('show');
4000             this.hidden = true;
4001             this.fireEvent("hide", this);
4002         }
4003         if(deep === true && this.parentMenu){
4004             this.parentMenu.hide(true);
4005         }
4006     },
4007     
4008     onTriggerClick : function(e)
4009     {
4010         Roo.log('trigger click');
4011         
4012         var target = e.getTarget();
4013         
4014         Roo.log(target.nodeName.toLowerCase());
4015         
4016         if(target.nodeName.toLowerCase() === 'i'){
4017             e.preventDefault();
4018         }
4019         
4020     },
4021     
4022     onTriggerPress  : function(e)
4023     {
4024         Roo.log('trigger press');
4025         //Roo.log(e.getTarget());
4026        // Roo.log(this.triggerEl.dom);
4027        
4028         // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
4029         var pel = Roo.get(e.getTarget());
4030         if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
4031             Roo.log('is treeview or dropdown?');
4032             return;
4033         }
4034         
4035         if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
4036             return;
4037         }
4038         
4039         if (this.isVisible()) {
4040             Roo.log('hide');
4041             this.hide();
4042         } else {
4043             Roo.log('show');
4044             
4045             this.show(this.triggerEl, this.align, false);
4046         }
4047         
4048         if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
4049             e.stopEvent();
4050         }
4051         
4052     },
4053        
4054     
4055     hideMenuItems : function()
4056     {
4057         Roo.log("hide Menu Items");
4058         if (!this.el) { 
4059             return;
4060         }
4061         
4062         this.el.select('.open',true).each(function(aa) {
4063             
4064             aa.removeClass('open');
4065          
4066         });
4067     },
4068     addxtypeChild : function (tree, cntr) {
4069         var comp= Roo.bootstrap.menu.Menu.superclass.addxtypeChild.call(this, tree, cntr);
4070           
4071         this.menuitems.add(comp);
4072         return comp;
4073
4074     },
4075     getEl : function()
4076     {
4077         Roo.log(this.el);
4078         return this.el;
4079     },
4080     
4081     clear : function()
4082     {
4083         this.getEl().dom.innerHTML = '';
4084         this.menuitems.clear();
4085     }
4086 });
4087
4088  
4089  /**
4090  * @class Roo.bootstrap.menu.Item
4091  * @extends Roo.bootstrap.Component
4092  * @children  Roo.bootstrap.Button Roo.bootstrap.ButtonUploader Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Container
4093  * @parent Roo.bootstrap.menu.Menu
4094  * @licence LGPL
4095  * Bootstrap MenuItem class
4096  * 
4097  * @cfg {String} html the menu label
4098  * @cfg {String} href the link
4099  * @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
4100  * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
4101  * @cfg {Boolean} active  used on sidebars to highlight active itesm
4102  * @cfg {String} fa favicon to show on left of menu item.
4103  * @cfg {Roo.bootsrap.Menu} menu the child menu.
4104  * 
4105  * 
4106  * @constructor
4107  * Create a new MenuItem
4108  * @param {Object} config The config object
4109  */
4110
4111
4112 Roo.bootstrap.menu.Item = function(config){
4113     Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
4114     this.addEvents({
4115         // raw events
4116         /**
4117          * @event click
4118          * The raw click event for the entire grid.
4119          * @param {Roo.bootstrap.menu.Item} this
4120          * @param {Roo.EventObject} e
4121          */
4122         "click" : true
4123     });
4124 };
4125
4126 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component,  {
4127     
4128     href : false,
4129     html : false,
4130     preventDefault: false,
4131     isContainer : false,
4132     active : false,
4133     fa: false,
4134     
4135     getAutoCreate : function(){
4136         
4137         if(this.isContainer){
4138             return {
4139                 tag: 'li',
4140                 cls: 'dropdown-menu-item '
4141             };
4142         }
4143         var ctag = {
4144             tag: 'span',
4145             html: 'Link'
4146         };
4147         
4148         var anc = {
4149             tag : 'a',
4150             cls : 'dropdown-item',
4151             href : '#',
4152             cn : [  ]
4153         };
4154         
4155         if (this.fa !== false) {
4156             anc.cn.push({
4157                 tag : 'i',
4158                 cls : 'fa fa-' + this.fa
4159             });
4160         }
4161         
4162         anc.cn.push(ctag);
4163         
4164         
4165         var cfg= {
4166             tag: 'li',
4167             cls: 'dropdown-menu-item',
4168             cn: [ anc ]
4169         };
4170         if (this.parent().type == 'treeview') {
4171             cfg.cls = 'treeview-menu';
4172         }
4173         if (this.active) {
4174             cfg.cls += ' active';
4175         }
4176         
4177         
4178         
4179         anc.href = this.href || cfg.cn[0].href ;
4180         ctag.html = this.html || cfg.cn[0].html ;
4181         return cfg;
4182     },
4183     
4184     initEvents: function()
4185     {
4186         if (this.parent().type == 'treeview') {
4187             this.el.select('a').on('click', this.onClick, this);
4188         }
4189         
4190         if (this.menu) {
4191             this.menu.parentType = this.xtype;
4192             this.menu.triggerEl = this.el;
4193             this.menu = this.addxtype(Roo.apply({}, this.menu));
4194         }
4195         
4196     },
4197     onClick : function(e)
4198     {
4199         //Roo.log('item on click ');
4200         
4201         if(this.href === false || this.preventDefault){
4202             e.preventDefault();
4203         }
4204         //this.parent().hideMenuItems();
4205         
4206         this.fireEvent('click', this, e);
4207     },
4208     getEl : function()
4209     {
4210         return this.el;
4211     } 
4212 });
4213
4214  
4215
4216  
4217
4218   
4219 /**
4220  * @class Roo.bootstrap.menu.Separator
4221  * @extends Roo.bootstrap.Component
4222  * @licence LGPL
4223  * @parent Roo.bootstrap.menu.Menu
4224  * Bootstrap Separator class
4225  * 
4226  * @constructor
4227  * Create a new Separator
4228  * @param {Object} config The config object
4229  */
4230
4231
4232 Roo.bootstrap.menu.Separator = function(config){
4233     Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
4234 };
4235
4236 Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component,  {
4237     
4238     getAutoCreate : function(){
4239         var cfg = {
4240             tag : 'li',
4241             cls: 'dropdown-divider divider'
4242         };
4243         
4244         return cfg;
4245     }
4246    
4247 });
4248
4249  
4250
4251  
4252 /*
4253 * Licence: LGPL
4254 */
4255
4256 /**
4257  * @class Roo.bootstrap.Modal
4258  * @extends Roo.bootstrap.Component
4259  * @parent none builder
4260  * @children Roo.bootstrap.Component
4261  * Bootstrap Modal class
4262  * @cfg {String} title Title of dialog
4263  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
4264  * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn
4265  * @cfg {Boolean} specificTitle default false
4266  * @cfg {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
4267  * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
4268  * @cfg {Boolean} animate default true
4269  * @cfg {Boolean} allow_close default true
4270  * @cfg {Boolean} fitwindow default false
4271  * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
4272  * @cfg {Number} width fixed width - usefull for chrome extension only really.
4273  * @cfg {Number} height fixed height - usefull for chrome extension only really.
4274  * @cfg {String} size (sm|lg|xl) default empty
4275  * @cfg {Number} max_width set the max width of modal
4276  * @cfg {Boolean} editableTitle can the title be edited
4277
4278  *
4279  *
4280  * @constructor
4281  * Create a new Modal Dialog
4282  * @param {Object} config The config object
4283  */
4284
4285 Roo.bootstrap.Modal = function(config){
4286     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
4287     this.addEvents({
4288         // raw events
4289         /**
4290          * @event btnclick
4291          * The raw btnclick event for the button
4292          * @param {Roo.EventObject} e
4293          */
4294         "btnclick" : true,
4295         /**
4296          * @event resize
4297          * Fire when dialog resize
4298          * @param {Roo.bootstrap.Modal} this
4299          * @param {Roo.EventObject} e
4300          */
4301         "resize" : true,
4302         /**
4303          * @event titlechanged
4304          * Fire when the editable title has been changed
4305          * @param {Roo.bootstrap.Modal} this
4306          * @param {Roo.EventObject} value
4307          */
4308         "titlechanged" : true 
4309         
4310     });
4311     this.buttons = this.buttons || [];
4312
4313     if (this.tmpl) {
4314         this.tmpl = Roo.factory(this.tmpl);
4315     }
4316
4317 };
4318
4319 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
4320
4321     title : 'test dialog',
4322
4323     buttons : false,
4324
4325     // set on load...
4326
4327     html: false,
4328
4329     tmp: false,
4330
4331     specificTitle: false,
4332
4333     buttonPosition: 'right',
4334
4335     allow_close : true,
4336
4337     animate : true,
4338
4339     fitwindow: false,
4340     
4341      // private
4342     dialogEl: false,
4343     bodyEl:  false,
4344     footerEl:  false,
4345     titleEl:  false,
4346     closeEl:  false,
4347
4348     size: '',
4349     
4350     max_width: 0,
4351     
4352     max_height: 0,
4353     
4354     fit_content: false,
4355     editableTitle  : false,
4356
4357     onRender : function(ct, position)
4358     {
4359         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
4360
4361         if(!this.el){
4362             var cfg = Roo.apply({},  this.getAutoCreate());
4363             cfg.id = Roo.id();
4364             //if(!cfg.name){
4365             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
4366             //}
4367             //if (!cfg.name.length) {
4368             //    delete cfg.name;
4369            // }
4370             if (this.cls) {
4371                 cfg.cls += ' ' + this.cls;
4372             }
4373             if (this.style) {
4374                 cfg.style = this.style;
4375             }
4376             this.el = Roo.get(document.body).createChild(cfg, position);
4377         }
4378         //var type = this.el.dom.type;
4379
4380
4381         if(this.tabIndex !== undefined){
4382             this.el.dom.setAttribute('tabIndex', this.tabIndex);
4383         }
4384
4385         this.dialogEl = this.el.select('.modal-dialog',true).first();
4386         this.bodyEl = this.el.select('.modal-body',true).first();
4387         this.closeEl = this.el.select('.modal-header .close', true).first();
4388         this.headerEl = this.el.select('.modal-header',true).first();
4389         this.titleEl = this.el.select('.modal-title',true).first();
4390         this.footerEl = this.el.select('.modal-footer',true).first();
4391
4392         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
4393         
4394         //this.el.addClass("x-dlg-modal");
4395
4396         if (this.buttons.length) {
4397             Roo.each(this.buttons, function(bb) {
4398                 var b = Roo.apply({}, bb);
4399                 b.xns = b.xns || Roo.bootstrap;
4400                 b.xtype = b.xtype || 'Button';
4401                 if (typeof(b.listeners) == 'undefined') {
4402                     b.listeners = { click : this.onButtonClick.createDelegate(this)  };
4403                 }
4404
4405                 var btn = Roo.factory(b);
4406
4407                 btn.render(this.getButtonContainer());
4408
4409             },this);
4410         }
4411         // render the children.
4412         var nitems = [];
4413
4414         if(typeof(this.items) != 'undefined'){
4415             var items = this.items;
4416             delete this.items;
4417
4418             for(var i =0;i < items.length;i++) {
4419                 // we force children not to montor widnow resize  - as we do that for them.
4420                 items[i].monitorWindowResize = false;
4421                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
4422             }
4423         }
4424
4425         this.items = nitems;
4426
4427         // where are these used - they used to be body/close/footer
4428
4429
4430         this.initEvents();
4431         //this.el.addClass([this.fieldClass, this.cls]);
4432
4433     },
4434
4435     getAutoCreate : function()
4436     {
4437         // we will default to modal-body-overflow - might need to remove or make optional later.
4438         var bdy = {
4439                 cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''), 
4440                 html : this.html || ''
4441         };
4442
4443         var title = {
4444             tag: 'h5',
4445             cls : 'modal-title',
4446             html : this.title
4447         };
4448
4449         if(this.specificTitle){ // WTF is this?
4450             title = this.title;
4451         }
4452
4453         var header = [];
4454         if (this.allow_close && Roo.bootstrap.version == 3) {
4455             header.push({
4456                 tag: 'button',
4457                 cls : 'close',
4458                 html : '&times'
4459             });
4460         }
4461
4462         header.push(title);
4463
4464         if (this.editableTitle) {
4465             header.push({
4466                 cls: 'form-control roo-editable-title d-none',
4467                 tag: 'input',
4468                 type: 'text'
4469             });
4470         }
4471         
4472         if (this.allow_close && Roo.bootstrap.version == 4) {
4473             header.push({
4474                 tag: 'button',
4475                 cls : 'close',
4476                 html : '&times'
4477             });
4478         }
4479         
4480         var size = '';
4481
4482         if(this.size.length){
4483             size = 'modal-' + this.size;
4484         }
4485         
4486         var footer = Roo.bootstrap.version == 3 ?
4487             {
4488                 cls : 'modal-footer',
4489                 cn : [
4490                     {
4491                         tag: 'div',
4492                         cls: 'btn-' + this.buttonPosition
4493                     }
4494                 ]
4495
4496             } :
4497             {  // BS4 uses mr-auto on left buttons....
4498                 cls : 'modal-footer'
4499             };
4500
4501             
4502
4503         
4504         
4505         var modal = {
4506             cls: "modal",
4507              cn : [
4508                 {
4509                     cls: "modal-dialog " + size,
4510                     cn : [
4511                         {
4512                             cls : "modal-content",
4513                             cn : [
4514                                 {
4515                                     cls : 'modal-header',
4516                                     cn : header
4517                                 },
4518                                 bdy,
4519                                 footer
4520                             ]
4521
4522                         }
4523                     ]
4524
4525                 }
4526             ]
4527         };
4528
4529         if(this.animate){
4530             modal.cls += ' fade';
4531         }
4532
4533         return modal;
4534
4535     },
4536     getChildContainer : function() {
4537
4538          return this.bodyEl;
4539
4540     },
4541     getButtonContainer : function() {
4542         
4543          return Roo.bootstrap.version == 4 ?
4544             this.el.select('.modal-footer',true).first()
4545             : this.el.select('.modal-footer div',true).first();
4546
4547     },
4548     initEvents : function()
4549     {
4550         if (this.allow_close) {
4551             this.closeEl.on('click', this.hide, this);
4552         }
4553         Roo.EventManager.onWindowResize(this.resize, this, true);
4554         if (this.editableTitle) {
4555             this.headerEditEl =  this.headerEl.select('.form-control',true).first();
4556             this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
4557             this.headerEditEl.on('keyup', function(e) {
4558                     if([  e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
4559                         this.toggleHeaderInput(false)
4560                     }
4561                 }, this);
4562             this.headerEditEl.on('blur', function(e) {
4563                 this.toggleHeaderInput(false)
4564             },this);
4565         }
4566
4567     },
4568   
4569
4570     resize : function()
4571     {
4572         this.maskEl.setSize(
4573             Roo.lib.Dom.getViewWidth(true),
4574             Roo.lib.Dom.getViewHeight(true)
4575         );
4576         
4577         if (this.fitwindow) {
4578             
4579            this.dialogEl.setStyle( { 'max-width' : '100%' });
4580             this.setSize(
4581                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
4582                 this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
4583             );
4584             return;
4585         }
4586         
4587         if(this.max_width !== 0) {
4588             
4589             var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
4590             
4591             if(this.height) {
4592                 this.setSize(w, this.height);
4593                 return;
4594             }
4595             
4596             if(this.max_height) {
4597                 this.setSize(w,Math.min(
4598                     this.max_height,
4599                     Roo.lib.Dom.getViewportHeight(true) - 60
4600                 ));
4601                 
4602                 return;
4603             }
4604             
4605             if(!this.fit_content) {
4606                 this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
4607                 return;
4608             }
4609             
4610             this.setSize(w, Math.min(
4611                 60 +
4612                 this.headerEl.getHeight() + 
4613                 this.footerEl.getHeight() + 
4614                 this.getChildHeight(this.bodyEl.dom.childNodes),
4615                 Roo.lib.Dom.getViewportHeight(true) - 60)
4616             );
4617         }
4618         
4619     },
4620
4621     setSize : function(w,h)
4622     {
4623         if (!w && !h) {
4624             return;
4625         }
4626         
4627         this.resizeTo(w,h);
4628         // any layout/border etc.. resize..
4629         (function () {
4630             this.items.forEach( function(e) {
4631                 e.layout ? e.layout() : false;
4632
4633             });
4634         }).defer(100,this);
4635         
4636     },
4637
4638     show : function() {
4639
4640         if (!this.rendered) {
4641             this.render();
4642         }
4643         this.toggleHeaderInput(false);
4644         //this.el.setStyle('display', 'block');
4645         this.el.removeClass('hideing');
4646         this.el.dom.style.display='block';
4647         
4648         Roo.get(document.body).addClass('modal-open');
4649  
4650         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
4651             
4652             (function(){
4653                 this.el.addClass('show');
4654                 this.el.addClass('in');
4655             }).defer(50, this);
4656         }else{
4657             this.el.addClass('show');
4658             this.el.addClass('in');
4659         }
4660
4661         // not sure how we can show data in here..
4662         //if (this.tmpl) {
4663         //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
4664         //}
4665
4666         Roo.get(document.body).addClass("x-body-masked");
4667         
4668         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
4669         this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4670         this.maskEl.dom.style.display = 'block';
4671         this.maskEl.addClass('show');
4672         
4673         
4674         this.resize();
4675         
4676         this.fireEvent('show', this);
4677
4678         // set zindex here - otherwise it appears to be ignored...
4679         this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4680         
4681         
4682         // this is for children that are... layout.Border 
4683         (function () {
4684             this.items.forEach( function(e) {
4685                 e.layout ? e.layout() : false;
4686
4687             });
4688         }).defer(100,this);
4689
4690     },
4691     hide : function()
4692     {
4693         if(this.fireEvent("beforehide", this) !== false){
4694             
4695             this.maskEl.removeClass('show');
4696             
4697             this.maskEl.dom.style.display = '';
4698             Roo.get(document.body).removeClass("x-body-masked");
4699             this.el.removeClass('in');
4700             this.el.select('.modal-dialog', true).first().setStyle('transform','');
4701
4702             if(this.animate){ // why
4703                 this.el.addClass('hideing');
4704                 this.el.removeClass('show');
4705                 (function(){
4706                     if (!this.el.hasClass('hideing')) {
4707                         return; // it's been shown again...
4708                     }
4709                     
4710                     this.el.dom.style.display='';
4711
4712                     Roo.get(document.body).removeClass('modal-open');
4713                     this.el.removeClass('hideing');
4714                 }).defer(150,this);
4715                 
4716             }else{
4717                 this.el.removeClass('show');
4718                 this.el.dom.style.display='';
4719                 Roo.get(document.body).removeClass('modal-open');
4720
4721             }
4722             this.fireEvent('hide', this);
4723         }
4724     },
4725     isVisible : function()
4726     {
4727         
4728         return this.el.hasClass('show') && !this.el.hasClass('hideing');
4729         
4730     },
4731
4732     addButton : function(str, cb)
4733     {
4734
4735
4736         var b = Roo.apply({}, { html : str } );
4737         b.xns = b.xns || Roo.bootstrap;
4738         b.xtype = b.xtype || 'Button';
4739         if (typeof(b.listeners) == 'undefined') {
4740             b.listeners = { click : cb.createDelegate(this)  };
4741         }
4742
4743         var btn = Roo.factory(b);
4744
4745         btn.render(this.getButtonContainer());
4746
4747         return btn;
4748
4749     },
4750
4751     setDefaultButton : function(btn)
4752     {
4753         //this.el.select('.modal-footer').()
4754     },
4755
4756     resizeTo: function(w,h)
4757     {
4758         this.dialogEl.setWidth(w);
4759         
4760         var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
4761
4762         this.bodyEl.setHeight(h - diff);
4763         
4764         this.fireEvent('resize', this);
4765     },
4766     
4767     setContentSize  : function(w, h)
4768     {
4769
4770     },
4771     onButtonClick: function(btn,e)
4772     {
4773         //Roo.log([a,b,c]);
4774         this.fireEvent('btnclick', btn.name, e);
4775     },
4776      /**
4777      * Set the title of the Dialog
4778      * @param {String} str new Title
4779      */
4780     setTitle: function(str) {
4781         this.titleEl.dom.innerHTML = str;
4782         this.title = str;
4783     },
4784     /**
4785      * Set the body of the Dialog
4786      * @param {String} str new Title
4787      */
4788     setBody: function(str) {
4789         this.bodyEl.dom.innerHTML = str;
4790     },
4791     /**
4792      * Set the body of the Dialog using the template
4793      * @param {Obj} data - apply this data to the template and replace the body contents.
4794      */
4795     applyBody: function(obj)
4796     {
4797         if (!this.tmpl) {
4798             Roo.log("Error - using apply Body without a template");
4799             //code
4800         }
4801         this.tmpl.overwrite(this.bodyEl, obj);
4802     },
4803     
4804     getChildHeight : function(child_nodes)
4805     {
4806         if(
4807             !child_nodes ||
4808             child_nodes.length == 0
4809         ) {
4810             return 0;
4811         }
4812         
4813         var child_height = 0;
4814         
4815         for(var i = 0; i < child_nodes.length; i++) {
4816             
4817             /*
4818             * for modal with tabs...
4819             if(child_nodes[i].classList.contains('roo-layout-panel')) {
4820                 
4821                 var layout_childs = child_nodes[i].childNodes;
4822                 
4823                 for(var j = 0; j < layout_childs.length; j++) {
4824                     
4825                     if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
4826                         
4827                         var layout_body_childs = layout_childs[j].childNodes;
4828                         
4829                         for(var k = 0; k < layout_body_childs.length; k++) {
4830                             
4831                             if(layout_body_childs[k].classList.contains('navbar')) {
4832                                 child_height += layout_body_childs[k].offsetHeight;
4833                                 continue;
4834                             }
4835                             
4836                             if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
4837                                 
4838                                 var layout_body_tab_childs = layout_body_childs[k].childNodes;
4839                                 
4840                                 for(var m = 0; m < layout_body_tab_childs.length; m++) {
4841                                     
4842                                     if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
4843                                         child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
4844                                         continue;
4845                                     }
4846                                     
4847                                 }
4848                                 
4849                             }
4850                             
4851                         }
4852                     }
4853                 }
4854                 continue;
4855             }
4856             */
4857             
4858             child_height += child_nodes[i].offsetHeight;
4859             // Roo.log(child_nodes[i].offsetHeight);
4860         }
4861         
4862         return child_height;
4863     },
4864     toggleHeaderInput : function(is_edit)
4865     {
4866         if (!this.editableTitle) {
4867             return; // not editable.
4868         }
4869         if (is_edit && this.is_header_editing) {
4870             return; // already editing..
4871         }
4872         if (is_edit) {
4873     
4874             this.headerEditEl.dom.value = this.title;
4875             this.headerEditEl.removeClass('d-none');
4876             this.headerEditEl.dom.focus();
4877             this.titleEl.addClass('d-none');
4878             
4879             this.is_header_editing = true;
4880             return
4881         }
4882         // flip back to not editing.
4883         this.title = this.headerEditEl.dom.value;
4884         this.headerEditEl.addClass('d-none');
4885         this.titleEl.removeClass('d-none');
4886         this.titleEl.dom.innerHTML = String.format('{0}', this.title);
4887         this.is_header_editing = false;
4888         this.fireEvent('titlechanged', this, this.title);
4889     
4890             
4891         
4892     }
4893
4894 });
4895
4896
4897 Roo.apply(Roo.bootstrap.Modal,  {
4898     /**
4899          * Button config that displays a single OK button
4900          * @type Object
4901          */
4902         OK :  [{
4903             name : 'ok',
4904             weight : 'primary',
4905             html : 'OK'
4906         }],
4907         /**
4908          * Button config that displays Yes and No buttons
4909          * @type Object
4910          */
4911         YESNO : [
4912             {
4913                 name  : 'no',
4914                 html : 'No'
4915             },
4916             {
4917                 name  :'yes',
4918                 weight : 'primary',
4919                 html : 'Yes'
4920             }
4921         ],
4922
4923         /**
4924          * Button config that displays OK and Cancel buttons
4925          * @type Object
4926          */
4927         OKCANCEL : [
4928             {
4929                name : 'cancel',
4930                 html : 'Cancel'
4931             },
4932             {
4933                 name : 'ok',
4934                 weight : 'primary',
4935                 html : 'OK'
4936             }
4937         ],
4938         /**
4939          * Button config that displays Yes, No and Cancel buttons
4940          * @type Object
4941          */
4942         YESNOCANCEL : [
4943             {
4944                 name : 'yes',
4945                 weight : 'primary',
4946                 html : 'Yes'
4947             },
4948             {
4949                 name : 'no',
4950                 html : 'No'
4951             },
4952             {
4953                 name : 'cancel',
4954                 html : 'Cancel'
4955             }
4956         ],
4957         
4958         zIndex : 10001
4959 });
4960
4961 /*
4962  * - LGPL
4963  *
4964  * messagebox - can be used as a replace
4965  * 
4966  */
4967 /**
4968  * @class Roo.MessageBox
4969  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
4970  * Example usage:
4971  *<pre><code>
4972 // Basic alert:
4973 Roo.Msg.alert('Status', 'Changes saved successfully.');
4974
4975 // Prompt for user data:
4976 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
4977     if (btn == 'ok'){
4978         // process text value...
4979     }
4980 });
4981
4982 // Show a dialog using config options:
4983 Roo.Msg.show({
4984    title:'Save Changes?',
4985    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
4986    buttons: Roo.Msg.YESNOCANCEL,
4987    fn: processResult,
4988    animEl: 'elId'
4989 });
4990 </code></pre>
4991  * @static
4992  */
4993 Roo.bootstrap.MessageBox = function(){
4994     var dlg, opt, mask, waitTimer;
4995     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
4996     var buttons, activeTextEl, bwidth;
4997
4998     
4999     // private
5000     var handleButton = function(button){
5001         dlg.hide();
5002         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
5003     };
5004
5005     // private
5006     var handleHide = function(){
5007         if(opt && opt.cls){
5008             dlg.el.removeClass(opt.cls);
5009         }
5010         //if(waitTimer){
5011         //    Roo.TaskMgr.stop(waitTimer);
5012         //    waitTimer = null;
5013         //}
5014     };
5015
5016     // private
5017     var updateButtons = function(b){
5018         var width = 0;
5019         if(!b){
5020             buttons["ok"].hide();
5021             buttons["cancel"].hide();
5022             buttons["yes"].hide();
5023             buttons["no"].hide();
5024             dlg.footerEl.hide();
5025             
5026             return width;
5027         }
5028         dlg.footerEl.show();
5029         for(var k in buttons){
5030             if(typeof buttons[k] != "function"){
5031                 if(b[k]){
5032                     buttons[k].show();
5033                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
5034                     width += buttons[k].el.getWidth()+15;
5035                 }else{
5036                     buttons[k].hide();
5037                 }
5038             }
5039         }
5040         return width;
5041     };
5042
5043     // private
5044     var handleEsc = function(d, k, e){
5045         if(opt && opt.closable !== false){
5046             dlg.hide();
5047         }
5048         if(e){
5049             e.stopEvent();
5050         }
5051     };
5052
5053     return {
5054         /**
5055          * Returns a reference to the underlying {@link Roo.BasicDialog} element
5056          * @return {Roo.BasicDialog} The BasicDialog element
5057          */
5058         getDialog : function(){
5059            if(!dlg){
5060                 dlg = new Roo.bootstrap.Modal( {
5061                     //draggable: true,
5062                     //resizable:false,
5063                     //constraintoviewport:false,
5064                     //fixedcenter:true,
5065                     //collapsible : false,
5066                     //shim:true,
5067                     //modal: true,
5068                 //    width: 'auto',
5069                   //  height:100,
5070                     //buttonAlign:"center",
5071                     closeClick : function(){
5072                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
5073                             handleButton("no");
5074                         }else{
5075                             handleButton("cancel");
5076                         }
5077                     }
5078                 });
5079                 dlg.render();
5080                 dlg.on("hide", handleHide);
5081                 mask = dlg.mask;
5082                 //dlg.addKeyListener(27, handleEsc);
5083                 buttons = {};
5084                 this.buttons = buttons;
5085                 var bt = this.buttonText;
5086                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
5087                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
5088                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
5089                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
5090                 //Roo.log(buttons);
5091                 bodyEl = dlg.bodyEl.createChild({
5092
5093                     html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
5094                         '<textarea class="roo-mb-textarea"></textarea>' +
5095                         '<div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
5096                 });
5097                 msgEl = bodyEl.dom.firstChild;
5098                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
5099                 textboxEl.enableDisplayMode();
5100                 textboxEl.addKeyListener([10,13], function(){
5101                     if(dlg.isVisible() && opt && opt.buttons){
5102                         if(opt.buttons.ok){
5103                             handleButton("ok");
5104                         }else if(opt.buttons.yes){
5105                             handleButton("yes");
5106                         }
5107                     }
5108                 });
5109                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
5110                 textareaEl.enableDisplayMode();
5111                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
5112                 progressEl.enableDisplayMode();
5113                 
5114                 // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
5115                 var pf = progressEl.dom.firstChild;
5116                 if (pf) {
5117                     pp = Roo.get(pf.firstChild);
5118                     pp.setHeight(pf.offsetHeight);
5119                 }
5120                 
5121             }
5122             return dlg;
5123         },
5124
5125         /**
5126          * Updates the message box body text
5127          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
5128          * the XHTML-compliant non-breaking space character '&amp;#160;')
5129          * @return {Roo.MessageBox} This message box
5130          */
5131         updateText : function(text)
5132         {
5133             if(!dlg.isVisible() && !opt.width){
5134                 dlg.dialogEl.setStyle({ 'max-width' : this.maxWidth});
5135                 // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
5136             }
5137             msgEl.innerHTML = text || '&#160;';
5138       
5139             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
5140             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
5141             var w = Math.max(
5142                     Math.min(opt.width || cw , this.maxWidth), 
5143                     Math.max(opt.minWidth || this.minWidth, bwidth)
5144             );
5145             if(opt.prompt){
5146                 activeTextEl.setWidth(w);
5147             }
5148             if(dlg.isVisible()){
5149                 dlg.fixedcenter = false;
5150             }
5151             // to big, make it scroll. = But as usual stupid IE does not support
5152             // !important..
5153             
5154             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
5155                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
5156                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
5157             } else {
5158                 bodyEl.dom.style.height = '';
5159                 bodyEl.dom.style.overflowY = '';
5160             }
5161             if (cw > w) {
5162                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
5163             } else {
5164                 bodyEl.dom.style.overflowX = '';
5165             }
5166             
5167             dlg.setContentSize(w, bodyEl.getHeight());
5168             if(dlg.isVisible()){
5169                 dlg.fixedcenter = true;
5170             }
5171             return this;
5172         },
5173
5174         /**
5175          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
5176          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
5177          * @param {Number} value Any number between 0 and 1 (e.g., .5)
5178          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
5179          * @return {Roo.MessageBox} This message box
5180          */
5181         updateProgress : function(value, text){
5182             if(text){
5183                 this.updateText(text);
5184             }
5185             
5186             if (pp) { // weird bug on my firefox - for some reason this is not defined
5187                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
5188                 pp.setHeight(Math.floor(progressEl.dom.firstChild.offsetHeight));
5189             }
5190             return this;
5191         },        
5192
5193         /**
5194          * Returns true if the message box is currently displayed
5195          * @return {Boolean} True if the message box is visible, else false
5196          */
5197         isVisible : function(){
5198             return dlg && dlg.isVisible();  
5199         },
5200
5201         /**
5202          * Hides the message box if it is displayed
5203          */
5204         hide : function(){
5205             if(this.isVisible()){
5206                 dlg.hide();
5207             }  
5208         },
5209
5210         /**
5211          * Displays a new message box, or reinitializes an existing message box, based on the config options
5212          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
5213          * The following config object properties are supported:
5214          * <pre>
5215 Property    Type             Description
5216 ----------  ---------------  ------------------------------------------------------------------------------------
5217 animEl            String/Element   An id or Element from which the message box should animate as it opens and
5218                                    closes (defaults to undefined)
5219 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
5220                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
5221 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
5222                                    progress and wait dialogs will ignore this property and always hide the
5223                                    close button as they can only be closed programmatically.
5224 cls               String           A custom CSS class to apply to the message box element
5225 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
5226                                    displayed (defaults to 75)
5227 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
5228                                    function will be btn (the name of the button that was clicked, if applicable,
5229                                    e.g. "ok"), and text (the value of the active text field, if applicable).
5230                                    Progress and wait dialogs will ignore this option since they do not respond to
5231                                    user actions and can only be closed programmatically, so any required function
5232                                    should be called by the same code after it closes the dialog.
5233 icon              String           A CSS class that provides a background image to be used as an icon for
5234                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
5235 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
5236 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
5237 modal             Boolean          False to allow user interaction with the page while the message box is
5238                                    displayed (defaults to true)
5239 msg               String           A string that will replace the existing message box body text (defaults
5240                                    to the XHTML-compliant non-breaking space character '&#160;')
5241 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
5242 progress          Boolean          True to display a progress bar (defaults to false)
5243 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
5244 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
5245 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
5246 title             String           The title text
5247 value             String           The string value to set into the active textbox element if displayed
5248 wait              Boolean          True to display a progress bar (defaults to false)
5249 width             Number           The width of the dialog in pixels
5250 </pre>
5251          *
5252          * Example usage:
5253          * <pre><code>
5254 Roo.Msg.show({
5255    title: 'Address',
5256    msg: 'Please enter your address:',
5257    width: 300,
5258    buttons: Roo.MessageBox.OKCANCEL,
5259    multiline: true,
5260    fn: saveAddress,
5261    animEl: 'addAddressBtn'
5262 });
5263 </code></pre>
5264          * @param {Object} config Configuration options
5265          * @return {Roo.MessageBox} This message box
5266          */
5267         show : function(options)
5268         {
5269             
5270             // this causes nightmares if you show one dialog after another
5271             // especially on callbacks..
5272              
5273             if(this.isVisible()){
5274                 
5275                 this.hide();
5276                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
5277                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
5278                 Roo.log("New Dialog Message:" +  options.msg )
5279                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
5280                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
5281                 
5282             }
5283             var d = this.getDialog();
5284             opt = options;
5285             d.setTitle(opt.title || "&#160;");
5286             d.closeEl.setDisplayed(opt.closable !== false);
5287             activeTextEl = textboxEl;
5288             opt.prompt = opt.prompt || (opt.multiline ? true : false);
5289             if(opt.prompt){
5290                 if(opt.multiline){
5291                     textboxEl.hide();
5292                     textareaEl.show();
5293                     textareaEl.setHeight(typeof opt.multiline == "number" ?
5294                         opt.multiline : this.defaultTextHeight);
5295                     activeTextEl = textareaEl;
5296                 }else{
5297                     textboxEl.show();
5298                     textareaEl.hide();
5299                 }
5300             }else{
5301                 textboxEl.hide();
5302                 textareaEl.hide();
5303             }
5304             progressEl.setDisplayed(opt.progress === true);
5305             if (opt.progress) {
5306                 d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
5307             }
5308             this.updateProgress(0);
5309             activeTextEl.dom.value = opt.value || "";
5310             if(opt.prompt){
5311                 dlg.setDefaultButton(activeTextEl);
5312             }else{
5313                 var bs = opt.buttons;
5314                 var db = null;
5315                 if(bs && bs.ok){
5316                     db = buttons["ok"];
5317                 }else if(bs && bs.yes){
5318                     db = buttons["yes"];
5319                 }
5320                 dlg.setDefaultButton(db);
5321             }
5322             bwidth = updateButtons(opt.buttons);
5323             this.updateText(opt.msg);
5324             if(opt.cls){
5325                 d.el.addClass(opt.cls);
5326             }
5327             d.proxyDrag = opt.proxyDrag === true;
5328             d.modal = opt.modal !== false;
5329             d.mask = opt.modal !== false ? mask : false;
5330             if(!d.isVisible()){
5331                 // force it to the end of the z-index stack so it gets a cursor in FF
5332                 document.body.appendChild(dlg.el.dom);
5333                 d.animateTarget = null;
5334                 d.show(options.animEl);
5335             }
5336             return this;
5337         },
5338
5339         /**
5340          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
5341          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
5342          * and closing the message box when the process is complete.
5343          * @param {String} title The title bar text
5344          * @param {String} msg The message box body text
5345          * @return {Roo.MessageBox} This message box
5346          */
5347         progress : function(title, msg){
5348             this.show({
5349                 title : title,
5350                 msg : msg,
5351                 buttons: false,
5352                 progress:true,
5353                 closable:false,
5354                 minWidth: this.minProgressWidth,
5355                 modal : true
5356             });
5357             return this;
5358         },
5359
5360         /**
5361          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
5362          * If a callback function is passed it will be called after the user clicks the button, and the
5363          * id of the button that was clicked will be passed as the only parameter to the callback
5364          * (could also be the top-right close button).
5365          * @param {String} title The title bar text
5366          * @param {String} msg The message box body text
5367          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5368          * @param {Object} scope (optional) The scope of the callback function
5369          * @return {Roo.MessageBox} This message box
5370          */
5371         alert : function(title, msg, fn, scope)
5372         {
5373             this.show({
5374                 title : title,
5375                 msg : msg,
5376                 buttons: this.OK,
5377                 fn: fn,
5378                 closable : false,
5379                 scope : scope,
5380                 modal : true
5381             });
5382             return this;
5383         },
5384
5385         /**
5386          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
5387          * interaction while waiting for a long-running process to complete that does not have defined intervals.
5388          * You are responsible for closing the message box when the process is complete.
5389          * @param {String} msg The message box body text
5390          * @param {String} title (optional) The title bar text
5391          * @return {Roo.MessageBox} This message box
5392          */
5393         wait : function(msg, title){
5394             this.show({
5395                 title : title,
5396                 msg : msg,
5397                 buttons: false,
5398                 closable:false,
5399                 progress:true,
5400                 modal:true,
5401                 width:300,
5402                 wait:true
5403             });
5404             waitTimer = Roo.TaskMgr.start({
5405                 run: function(i){
5406                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
5407                 },
5408                 interval: 1000
5409             });
5410             return this;
5411         },
5412
5413         /**
5414          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
5415          * If a callback function is passed it will be called after the user clicks either button, and the id of the
5416          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
5417          * @param {String} title The title bar text
5418          * @param {String} msg The message box body text
5419          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5420          * @param {Object} scope (optional) The scope of the callback function
5421          * @return {Roo.MessageBox} This message box
5422          */
5423         confirm : function(title, msg, fn, scope){
5424             this.show({
5425                 title : title,
5426                 msg : msg,
5427                 buttons: this.YESNO,
5428                 fn: fn,
5429                 scope : scope,
5430                 modal : true
5431             });
5432             return this;
5433         },
5434
5435         /**
5436          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
5437          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
5438          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
5439          * (could also be the top-right close button) and the text that was entered will be passed as the two
5440          * parameters to the callback.
5441          * @param {String} title The title bar text
5442          * @param {String} msg The message box body text
5443          * @param {Function} fn (optional) The callback function invoked after the message box is closed
5444          * @param {Object} scope (optional) The scope of the callback function
5445          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
5446          * property, or the height in pixels to create the textbox (defaults to false / single-line)
5447          * @return {Roo.MessageBox} This message box
5448          */
5449         prompt : function(title, msg, fn, scope, multiline){
5450             this.show({
5451                 title : title,
5452                 msg : msg,
5453                 buttons: this.OKCANCEL,
5454                 fn: fn,
5455                 minWidth:250,
5456                 scope : scope,
5457                 prompt:true,
5458                 multiline: multiline,
5459                 modal : true
5460             });
5461             return this;
5462         },
5463
5464         /**
5465          * Button config that displays a single OK button
5466          * @type Object
5467          */
5468         OK : {ok:true},
5469         /**
5470          * Button config that displays Yes and No buttons
5471          * @type Object
5472          */
5473         YESNO : {yes:true, no:true},
5474         /**
5475          * Button config that displays OK and Cancel buttons
5476          * @type Object
5477          */
5478         OKCANCEL : {ok:true, cancel:true},
5479         /**
5480          * Button config that displays Yes, No and Cancel buttons
5481          * @type Object
5482          */
5483         YESNOCANCEL : {yes:true, no:true, cancel:true},
5484
5485         /**
5486          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
5487          * @type Number
5488          */
5489         defaultTextHeight : 75,
5490         /**
5491          * The maximum width in pixels of the message box (defaults to 600)
5492          * @type Number
5493          */
5494         maxWidth : 600,
5495         /**
5496          * The minimum width in pixels of the message box (defaults to 100)
5497          * @type Number
5498          */
5499         minWidth : 100,
5500         /**
5501          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
5502          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
5503          * @type Number
5504          */
5505         minProgressWidth : 250,
5506         /**
5507          * An object containing the default button text strings that can be overriden for localized language support.
5508          * Supported properties are: ok, cancel, yes and no.
5509          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
5510          * @type Object
5511          */
5512         buttonText : {
5513             ok : "OK",
5514             cancel : "Cancel",
5515             yes : "Yes",
5516             no : "No"
5517         }
5518     };
5519 }();
5520
5521 /**
5522  * Shorthand for {@link Roo.MessageBox}
5523  */
5524 Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
5525 Roo.Msg = Roo.Msg || Roo.MessageBox;
5526 /*
5527  * - LGPL
5528  *
5529  * navbar
5530  * 
5531  */
5532
5533 /**
5534  * @class Roo.bootstrap.nav.Bar
5535  * @extends Roo.bootstrap.Component
5536  * @abstract
5537  * Bootstrap Navbar class
5538
5539  * @constructor
5540  * Create a new Navbar
5541  * @param {Object} config The config object
5542  */
5543
5544
5545 Roo.bootstrap.nav.Bar = function(config){
5546     Roo.bootstrap.nav.Bar.superclass.constructor.call(this, config);
5547     this.addEvents({
5548         // raw events
5549         /**
5550          * @event beforetoggle
5551          * Fire before toggle the menu
5552          * @param {Roo.EventObject} e
5553          */
5554         "beforetoggle" : true
5555     });
5556 };
5557
5558 Roo.extend(Roo.bootstrap.nav.Bar, Roo.bootstrap.Component,  {
5559     
5560     
5561    
5562     // private
5563     navItems : false,
5564     loadMask : false,
5565     
5566     
5567     getAutoCreate : function(){
5568         
5569         
5570         throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
5571         
5572     },
5573     
5574     initEvents :function ()
5575     {
5576         //Roo.log(this.el.select('.navbar-toggle',true));
5577         this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
5578         
5579         var mark = {
5580             tag: "div",
5581             cls:"x-dlg-mask"
5582         };
5583         
5584         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
5585         
5586         var size = this.el.getSize();
5587         this.maskEl.setSize(size.width, size.height);
5588         this.maskEl.enableDisplayMode("block");
5589         this.maskEl.hide();
5590         
5591         if(this.loadMask){
5592             this.maskEl.show();
5593         }
5594     },
5595     
5596     
5597     getChildContainer : function()
5598     {
5599         if (this.el && this.el.select('.collapse').getCount()) {
5600             return this.el.select('.collapse',true).first();
5601         }
5602         
5603         return this.el;
5604     },
5605     
5606     mask : function()
5607     {
5608         this.maskEl.show();
5609     },
5610     
5611     unmask : function()
5612     {
5613         this.maskEl.hide();
5614     },
5615     onToggle : function()
5616     {
5617         
5618         if(this.fireEvent('beforetoggle', this) === false){
5619             return;
5620         }
5621         var ce = this.el.select('.navbar-collapse',true).first();
5622       
5623         if (!ce.hasClass('show')) {
5624            this.expand();
5625         } else {
5626             this.collapse();
5627         }
5628         
5629         
5630     
5631     },
5632     /**
5633      * Expand the navbar pulldown 
5634      */
5635     expand : function ()
5636     {
5637        
5638         var ce = this.el.select('.navbar-collapse',true).first();
5639         if (ce.hasClass('collapsing')) {
5640             return;
5641         }
5642         ce.dom.style.height = '';
5643                // show it...
5644         ce.addClass('in'); // old...
5645         ce.removeClass('collapse');
5646         ce.addClass('show');
5647         var h = ce.getHeight();
5648         Roo.log(h);
5649         ce.removeClass('show');
5650         // at this point we should be able to see it..
5651         ce.addClass('collapsing');
5652         
5653         ce.setHeight(0); // resize it ...
5654         ce.on('transitionend', function() {
5655             //Roo.log('done transition');
5656             ce.removeClass('collapsing');
5657             ce.addClass('show');
5658             ce.removeClass('collapse');
5659
5660             ce.dom.style.height = '';
5661         }, this, { single: true} );
5662         ce.setHeight(h);
5663         ce.dom.scrollTop = 0;
5664     },
5665     /**
5666      * Collapse the navbar pulldown 
5667      */
5668     collapse : function()
5669     {
5670          var ce = this.el.select('.navbar-collapse',true).first();
5671        
5672         if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
5673             // it's collapsed or collapsing..
5674             return;
5675         }
5676         ce.removeClass('in'); // old...
5677         ce.setHeight(ce.getHeight());
5678         ce.removeClass('show');
5679         ce.addClass('collapsing');
5680         
5681         ce.on('transitionend', function() {
5682             ce.dom.style.height = '';
5683             ce.removeClass('collapsing');
5684             ce.addClass('collapse');
5685         }, this, { single: true} );
5686         ce.setHeight(0);
5687     }
5688     
5689     
5690     
5691 });
5692
5693
5694
5695  
5696
5697  /*
5698  * - LGPL
5699  *
5700  * navbar
5701  * 
5702  */
5703
5704 /**
5705  * @class Roo.bootstrap.nav.Simplebar
5706  * @extends Roo.bootstrap.nav.Bar
5707  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5708  * Bootstrap Sidebar class
5709  *
5710  * @cfg {Boolean} inverse is inverted color
5711  * 
5712  * @cfg {String} type (nav | pills | tabs)
5713  * @cfg {Boolean} arrangement stacked | justified
5714  * @cfg {String} align (left | right) alignment
5715  * 
5716  * @cfg {Boolean} main (true|false) main nav bar? default false
5717  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
5718  * 
5719  * @cfg {String} tag (header|footer|nav|div) default is nav 
5720
5721  * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light.
5722  * 
5723  * 
5724  * @constructor
5725  * Create a new Sidebar
5726  * @param {Object} config The config object
5727  */
5728
5729
5730 Roo.bootstrap.nav.Simplebar = function(config){
5731     Roo.bootstrap.nav.Simplebar.superclass.constructor.call(this, config);
5732 };
5733
5734 Roo.extend(Roo.bootstrap.nav.Simplebar, Roo.bootstrap.nav.Bar,  {
5735     
5736     inverse: false,
5737     
5738     type: false,
5739     arrangement: '',
5740     align : false,
5741     
5742     weight : 'light',
5743     
5744     main : false,
5745     
5746     
5747     tag : false,
5748     
5749     
5750     getAutoCreate : function(){
5751         
5752         
5753         var cfg = {
5754             tag : this.tag || 'div',
5755             cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
5756         };
5757         if (['light','white'].indexOf(this.weight) > -1) {
5758             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5759         }
5760         cfg.cls += ' bg-' + this.weight;
5761         
5762         if (this.inverse) {
5763             cfg.cls += ' navbar-inverse';
5764             
5765         }
5766         
5767         // i'm not actually sure these are really used - normally we add a navGroup to a navbar
5768         
5769         if (Roo.bootstrap.version == 4 && this.xtype == 'NavSimplebar') {
5770             return cfg;
5771         }
5772         
5773         
5774     
5775         
5776         cfg.cn = [
5777             {
5778                 cls: 'nav nav-' + this.xtype,
5779                 tag : 'ul'
5780             }
5781         ];
5782         
5783          
5784         this.type = this.type || 'nav';
5785         if (['tabs','pills'].indexOf(this.type) != -1) {
5786             cfg.cn[0].cls += ' nav-' + this.type
5787         
5788         
5789         } else {
5790             if (this.type!=='nav') {
5791                 Roo.log('nav type must be nav/tabs/pills')
5792             }
5793             cfg.cn[0].cls += ' navbar-nav'
5794         }
5795         
5796         
5797         
5798         
5799         if (['stacked','justified'].indexOf(this.arrangement) != -1) {
5800             cfg.cn[0].cls += ' nav-' + this.arrangement;
5801         }
5802         
5803         
5804         if (this.align === 'right') {
5805             cfg.cn[0].cls += ' navbar-right';
5806         }
5807         
5808         
5809         
5810         
5811         return cfg;
5812     
5813         
5814     }
5815     
5816     
5817     
5818 });
5819
5820
5821
5822  
5823
5824  
5825        /*
5826  * - LGPL
5827  *
5828  * navbar
5829  * navbar-fixed-top
5830  * navbar-expand-md  fixed-top 
5831  */
5832
5833 /**
5834  * @class Roo.bootstrap.nav.Headerbar
5835  * @extends Roo.bootstrap.nav.Simplebar
5836  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
5837  * Bootstrap Sidebar class
5838  *
5839  * @cfg {String} brand what is brand
5840  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
5841  * @cfg {String} brand_href href of the brand
5842  * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button   default true
5843  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
5844  * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
5845  * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
5846  * 
5847  * @constructor
5848  * Create a new Sidebar
5849  * @param {Object} config The config object
5850  */
5851
5852
5853 Roo.bootstrap.nav.Headerbar = function(config){
5854     Roo.bootstrap.nav.Headerbar.superclass.constructor.call(this, config);
5855       
5856 };
5857
5858 Roo.extend(Roo.bootstrap.nav.Headerbar, Roo.bootstrap.nav.Simplebar,  {
5859     
5860     position: '',
5861     brand: '',
5862     brand_href: false,
5863     srButton : true,
5864     autohide : false,
5865     desktopCenter : false,
5866    
5867     
5868     getAutoCreate : function(){
5869         
5870         var   cfg = {
5871             tag: this.nav || 'nav',
5872             cls: 'navbar navbar-expand-md',
5873             role: 'navigation',
5874             cn: []
5875         };
5876         
5877         var cn = cfg.cn;
5878         if (this.desktopCenter) {
5879             cn.push({cls : 'container', cn : []});
5880             cn = cn[0].cn;
5881         }
5882         
5883         if(this.srButton){
5884             var btn = {
5885                 tag: 'button',
5886                 type: 'button',
5887                 cls: 'navbar-toggle navbar-toggler',
5888                 'data-toggle': 'collapse',
5889                 cn: [
5890                     {
5891                         tag: 'span',
5892                         cls: 'sr-only',
5893                         html: 'Toggle navigation'
5894                     },
5895                     {
5896                         tag: 'span',
5897                         cls: 'icon-bar navbar-toggler-icon'
5898                     },
5899                     {
5900                         tag: 'span',
5901                         cls: 'icon-bar'
5902                     },
5903                     {
5904                         tag: 'span',
5905                         cls: 'icon-bar'
5906                     }
5907                 ]
5908             };
5909             
5910             cn.push( Roo.bootstrap.version == 4 ? btn : {
5911                 tag: 'div',
5912                 cls: 'navbar-header',
5913                 cn: [
5914                     btn
5915                 ]
5916             });
5917         }
5918         
5919         cn.push({
5920             tag: 'div',
5921             cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
5922             cn : []
5923         });
5924         
5925         cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
5926         
5927         if (['light','white'].indexOf(this.weight) > -1) {
5928             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5929         }
5930         cfg.cls += ' bg-' + this.weight;
5931         
5932         
5933         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
5934             cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
5935             
5936             // tag can override this..
5937             
5938             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
5939         }
5940         
5941         if (this.brand !== '') {
5942             var cp =  Roo.bootstrap.version == 4 ? cn : cn[0].cn;
5943             cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
5944                 tag: 'a',
5945                 href: this.brand_href ? this.brand_href : '#',
5946                 cls: 'navbar-brand',
5947                 cn: [
5948                 this.brand
5949                 ]
5950             });
5951         }
5952         
5953         if(this.main){
5954             cfg.cls += ' main-nav';
5955         }
5956         
5957         
5958         return cfg;
5959
5960         
5961     },
5962     getHeaderChildContainer : function()
5963     {
5964         if (this.srButton && this.el.select('.navbar-header').getCount()) {
5965             return this.el.select('.navbar-header',true).first();
5966         }
5967         
5968         return this.getChildContainer();
5969     },
5970     
5971     getChildContainer : function()
5972     {
5973          
5974         return this.el.select('.roo-navbar-collapse',true).first();
5975          
5976         
5977     },
5978     
5979     initEvents : function()
5980     {
5981         Roo.bootstrap.nav.Headerbar.superclass.initEvents.call(this);
5982         
5983         if (this.autohide) {
5984             
5985             var prevScroll = 0;
5986             var ft = this.el;
5987             
5988             Roo.get(document).on('scroll',function(e) {
5989                 var ns = Roo.get(document).getScroll().top;
5990                 var os = prevScroll;
5991                 prevScroll = ns;
5992                 
5993                 if(ns > os){
5994                     ft.removeClass('slideDown');
5995                     ft.addClass('slideUp');
5996                     return;
5997                 }
5998                 ft.removeClass('slideUp');
5999                 ft.addClass('slideDown');
6000                  
6001               
6002           },this);
6003         }
6004     }    
6005     
6006 });
6007
6008
6009
6010  
6011
6012  /*
6013  * - LGPL
6014  *
6015  * navbar
6016  * 
6017  */
6018
6019 /**
6020  * @class Roo.bootstrap.nav.Sidebar
6021  * @extends Roo.bootstrap.nav.Bar
6022  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
6023  * Bootstrap Sidebar class
6024  * 
6025  * @constructor
6026  * Create a new Sidebar
6027  * @param {Object} config The config object
6028  */
6029
6030
6031 Roo.bootstrap.nav.Sidebar = function(config){
6032     Roo.bootstrap.nav.Sidebar.superclass.constructor.call(this, config);
6033 };
6034
6035 Roo.extend(Roo.bootstrap.nav.Sidebar, Roo.bootstrap.nav.Bar,  {
6036     
6037     sidebar : true, // used by Navbar Item and NavbarGroup at present...
6038     
6039     getAutoCreate : function(){
6040         
6041         
6042         return  {
6043             tag: 'div',
6044             cls: 'sidebar sidebar-nav'
6045         };
6046     
6047         
6048     }
6049     
6050     
6051     
6052 });
6053
6054
6055
6056  
6057
6058  /*
6059  * - LGPL
6060  *
6061  * nav group
6062  * 
6063  */
6064
6065 /**
6066  * @class Roo.bootstrap.nav.Group
6067  * @extends Roo.bootstrap.Component
6068  * @children Roo.bootstrap.nav.Item
6069  * Bootstrap NavGroup class
6070  * @cfg {String} align (left|right)
6071  * @cfg {Boolean} inverse
6072  * @cfg {String} type (nav|pills|tab) default nav
6073  * @cfg {String} navId - reference Id for navbar.
6074  * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
6075  * 
6076  * @constructor
6077  * Create a new nav group
6078  * @param {Object} config The config object
6079  */
6080
6081 Roo.bootstrap.nav.Group = function(config){
6082     Roo.bootstrap.nav.Group.superclass.constructor.call(this, config);
6083     this.navItems = [];
6084    
6085     Roo.bootstrap.nav.Group.register(this);
6086      this.addEvents({
6087         /**
6088              * @event changed
6089              * Fires when the active item changes
6090              * @param {Roo.bootstrap.nav.Group} this
6091              * @param {Roo.bootstrap.Navbar.Item} selected The item selected
6092              * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item 
6093          */
6094         'changed': true
6095      });
6096     
6097 };
6098
6099 Roo.extend(Roo.bootstrap.nav.Group, Roo.bootstrap.Component,  {
6100     
6101     align: '',
6102     inverse: false,
6103     form: false,
6104     type: 'nav',
6105     navId : '',
6106     // private
6107     pilltype : true,
6108     
6109     navItems : false, 
6110     
6111     getAutoCreate : function()
6112     {
6113         var cfg = Roo.apply({}, Roo.bootstrap.nav.Group.superclass.getAutoCreate.call(this));
6114         
6115         cfg = {
6116             tag : 'ul',
6117             cls: 'nav' 
6118         };
6119         if (Roo.bootstrap.version == 4) {
6120             if (['tabs','pills'].indexOf(this.type) != -1) {
6121                 cfg.cls += ' nav-' + this.type; 
6122             } else {
6123                 // trying to remove so header bar can right align top?
6124                 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
6125                     // do not use on header bar... 
6126                     cfg.cls += ' navbar-nav';
6127                 }
6128             }
6129             
6130         } else {
6131             if (['tabs','pills'].indexOf(this.type) != -1) {
6132                 cfg.cls += ' nav-' + this.type
6133             } else {
6134                 if (this.type !== 'nav') {
6135                     Roo.log('nav type must be nav/tabs/pills')
6136                 }
6137                 cfg.cls += ' navbar-nav'
6138             }
6139         }
6140         
6141         if (this.parent() && this.parent().sidebar) {
6142             cfg = {
6143                 tag: 'ul',
6144                 cls: 'dashboard-menu sidebar-menu'
6145             };
6146             
6147             return cfg;
6148         }
6149         
6150         if (this.form === true) {
6151             cfg = {
6152                 tag: 'form',
6153                 cls: 'navbar-form form-inline'
6154             };
6155             //nav navbar-right ml-md-auto
6156             if (this.align === 'right') {
6157                 cfg.cls += ' navbar-right ml-md-auto';
6158             } else {
6159                 cfg.cls += ' navbar-left';
6160             }
6161         }
6162         
6163         if (this.align === 'right') {
6164             cfg.cls += ' navbar-right ml-md-auto';
6165         } else {
6166             cfg.cls += ' mr-auto';
6167         }
6168         
6169         if (this.inverse) {
6170             cfg.cls += ' navbar-inverse';
6171             
6172         }
6173         
6174         
6175         return cfg;
6176     },
6177     /**
6178     * sets the active Navigation item
6179     * @param {Roo.bootstrap.nav.Item} the new current navitem
6180     */
6181     setActiveItem : function(item)
6182     {
6183         var prev = false;
6184         Roo.each(this.navItems, function(v){
6185             if (v == item) {
6186                 return ;
6187             }
6188             if (v.isActive()) {
6189                 v.setActive(false, true);
6190                 prev = v;
6191                 
6192             }
6193             
6194         });
6195
6196         item.setActive(true, true);
6197         this.fireEvent('changed', this, item, prev);
6198         
6199         
6200     },
6201     /**
6202     * gets the active Navigation item
6203     * @return {Roo.bootstrap.nav.Item} the current navitem
6204     */
6205     getActive : function()
6206     {
6207         
6208         var prev = false;
6209         Roo.each(this.navItems, function(v){
6210             
6211             if (v.isActive()) {
6212                 prev = v;
6213                 
6214             }
6215             
6216         });
6217         return prev;
6218     },
6219     
6220     indexOfNav : function()
6221     {
6222         
6223         var prev = false;
6224         Roo.each(this.navItems, function(v,i){
6225             
6226             if (v.isActive()) {
6227                 prev = i;
6228                 
6229             }
6230             
6231         });
6232         return prev;
6233     },
6234     /**
6235     * adds a Navigation item
6236     * @param {Roo.bootstrap.nav.Item} the navitem to add
6237     */
6238     addItem : function(cfg)
6239     {
6240         if (this.form && Roo.bootstrap.version == 4) {
6241             cfg.tag = 'div';
6242         }
6243         var cn = new Roo.bootstrap.nav.Item(cfg);
6244         this.register(cn);
6245         cn.parentId = this.id;
6246         cn.onRender(this.el, null);
6247         return cn;
6248     },
6249     /**
6250     * register a Navigation item
6251     * @param {Roo.bootstrap.nav.Item} the navitem to add
6252     */
6253     register : function(item)
6254     {
6255         this.navItems.push( item);
6256         item.navId = this.navId;
6257     
6258     },
6259     
6260     /**
6261     * clear all the Navigation item
6262     */
6263    
6264     clearAll : function()
6265     {
6266         this.navItems = [];
6267         this.el.dom.innerHTML = '';
6268     },
6269     
6270     getNavItem: function(tabId)
6271     {
6272         var ret = false;
6273         Roo.each(this.navItems, function(e) {
6274             if (e.tabId == tabId) {
6275                ret =  e;
6276                return false;
6277             }
6278             return true;
6279             
6280         });
6281         return ret;
6282     },
6283     
6284     setActiveNext : function()
6285     {
6286         var i = this.indexOfNav(this.getActive());
6287         if (i > this.navItems.length) {
6288             return;
6289         }
6290         this.setActiveItem(this.navItems[i+1]);
6291     },
6292     setActivePrev : function()
6293     {
6294         var i = this.indexOfNav(this.getActive());
6295         if (i  < 1) {
6296             return;
6297         }
6298         this.setActiveItem(this.navItems[i-1]);
6299     },
6300     clearWasActive : function(except) {
6301         Roo.each(this.navItems, function(e) {
6302             if (e.tabId != except.tabId && e.was_active) {
6303                e.was_active = false;
6304                return false;
6305             }
6306             return true;
6307             
6308         });
6309     },
6310     getWasActive : function ()
6311     {
6312         var r = false;
6313         Roo.each(this.navItems, function(e) {
6314             if (e.was_active) {
6315                r = e;
6316                return false;
6317             }
6318             return true;
6319             
6320         });
6321         return r;
6322     }
6323     
6324     
6325 });
6326
6327  
6328 Roo.apply(Roo.bootstrap.nav.Group, {
6329     
6330     groups: {},
6331      /**
6332     * register a Navigation Group
6333     * @param {Roo.bootstrap.nav.Group} the navgroup to add
6334     */
6335     register : function(navgrp)
6336     {
6337         this.groups[navgrp.navId] = navgrp;
6338         
6339     },
6340     /**
6341     * fetch a Navigation Group based on the navigation ID
6342     * @param {string} the navgroup to add
6343     * @returns {Roo.bootstrap.nav.Group} the navgroup 
6344     */
6345     get: function(navId) {
6346         if (typeof(this.groups[navId]) == 'undefined') {
6347             return false;
6348             //this.register(new Roo.bootstrap.nav.Group({ navId : navId }));
6349         }
6350         return this.groups[navId] ;
6351     }
6352     
6353     
6354     
6355 });
6356
6357  /**
6358  * @class Roo.bootstrap.nav.Item
6359  * @extends Roo.bootstrap.Component
6360  * @children Roo.bootstrap.Container Roo.bootstrap.Button
6361  * @parent Roo.bootstrap.nav.Group
6362  * @licence LGPL
6363  * Bootstrap Navbar.NavItem class
6364  * 
6365  * @cfg {String} href  link to
6366  * @cfg {String} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none
6367  * @cfg {Boolean} button_outline show and outlined button
6368  * @cfg {String} html content of button
6369  * @cfg {String} badge text inside badge
6370  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
6371  * @cfg {String} glyphicon DEPRICATED - use fa
6372  * @cfg {String} icon DEPRICATED - use fa
6373  * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
6374  * @cfg {Boolean} active Is item active
6375  * @cfg {Boolean} disabled Is item disabled
6376  * @cfg {String} linkcls  Link Class
6377  * @cfg {Boolean} preventDefault (true | false) default false
6378  * @cfg {String} tabId the tab that this item activates.
6379  * @cfg {String} tagtype (a|span) render as a href or span?
6380  * @cfg {Boolean} animateRef (true|false) link to element default false  
6381  * @cfg {Roo.bootstrap.menu.Menu} menu a Menu 
6382   
6383  * @constructor
6384  * Create a new Navbar Item
6385  * @param {Object} config The config object
6386  */
6387 Roo.bootstrap.nav.Item = function(config){
6388     Roo.bootstrap.nav.Item.superclass.constructor.call(this, config);
6389     this.addEvents({
6390         // raw events
6391         /**
6392          * @event click
6393          * The raw click event for the entire grid.
6394          * @param {Roo.EventObject} e
6395          */
6396         "click" : true,
6397          /**
6398             * @event changed
6399             * Fires when the active item active state changes
6400             * @param {Roo.bootstrap.nav.Item} this
6401             * @param {boolean} state the new state
6402              
6403          */
6404         'changed': true,
6405         /**
6406             * @event scrollto
6407             * Fires when scroll to element
6408             * @param {Roo.bootstrap.nav.Item} this
6409             * @param {Object} options
6410             * @param {Roo.EventObject} e
6411              
6412          */
6413         'scrollto': true
6414     });
6415    
6416 };
6417
6418 Roo.extend(Roo.bootstrap.nav.Item, Roo.bootstrap.Component,  {
6419     
6420     href: false,
6421     html: '',
6422     badge: '',
6423     icon: false,
6424     fa : false,
6425     glyphicon: false,
6426     active: false,
6427     preventDefault : false,
6428     tabId : false,
6429     tagtype : 'a',
6430     tag: 'li',
6431     disabled : false,
6432     animateRef : false,
6433     was_active : false,
6434     button_weight : '',
6435     button_outline : false,
6436     linkcls : '',
6437     navLink: false,
6438     
6439     getAutoCreate : function(){
6440          
6441         var cfg = {
6442             tag: this.tag,
6443             cls: 'nav-item'
6444         };
6445         
6446         cfg.cls =  typeof(cfg.cls) == 'undefined'  ? '' : cfg.cls;
6447         
6448         if (this.active) {
6449             cfg.cls +=  ' active' ;
6450         }
6451         if (this.disabled) {
6452             cfg.cls += ' disabled';
6453         }
6454         
6455         // BS4 only?
6456         if (this.button_weight.length) {
6457             cfg.tag = this.href ? 'a' : 'button';
6458             cfg.html = this.html || '';
6459             cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
6460             if (this.href) {
6461                 cfg.href = this.href;
6462             }
6463             if (this.fa) {
6464                 cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
6465             } else {
6466                 cfg.cls += " nav-html";
6467             }
6468             
6469             // menu .. should add dropdown-menu class - so no need for carat..
6470             
6471             if (this.badge !== '') {
6472                  
6473                 cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6474             }
6475             return cfg;
6476         }
6477         
6478         if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
6479             cfg.cn = [
6480                 {
6481                     tag: this.tagtype,
6482                     href : this.href || "#",
6483                     html: this.html || '',
6484                     cls : ''
6485                 }
6486             ];
6487             if (this.tagtype == 'a') {
6488                 cfg.cn[0].cls = 'nav-link' +  (this.active ?  ' active'  : '') + ' ' + this.linkcls;
6489         
6490             }
6491             if (this.icon) {
6492                 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6493             } else  if (this.fa) {
6494                 cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
6495             } else if(this.glyphicon) {
6496                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
6497             } else {
6498                 cfg.cn[0].cls += " nav-html";
6499             }
6500             
6501             if (this.menu) {
6502                 cfg.cn[0].html += " <span class='caret'></span>";
6503              
6504             }
6505             
6506             if (this.badge !== '') {
6507                 cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6508             }
6509         }
6510         
6511         
6512         
6513         return cfg;
6514     },
6515     onRender : function(ct, position)
6516     {
6517        // Roo.log("Call onRender: " + this.xtype);
6518         if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
6519             this.tag = 'div';
6520         }
6521         
6522         var ret = Roo.bootstrap.nav.Item.superclass.onRender.call(this, ct, position);
6523         this.navLink = this.el.select('.nav-link',true).first();
6524         this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first();
6525         return ret;
6526     },
6527       
6528     
6529     initEvents: function() 
6530     {
6531         if (typeof (this.menu) != 'undefined') {
6532             this.menu.parentType = this.xtype;
6533             this.menu.triggerEl = this.el;
6534             this.menu = this.addxtype(Roo.apply({}, this.menu));
6535         }
6536         
6537         this.el.on('click', this.onClick, this);
6538         
6539         //if(this.tagtype == 'span'){
6540         //    this.el.select('span',true).on('click', this.onClick, this);
6541         //}
6542        
6543         // at this point parent should be available..
6544         this.parent().register(this);
6545     },
6546     
6547     onClick : function(e)
6548     {
6549         if (e.getTarget('.dropdown-menu-item')) {
6550             // did you click on a menu itemm.... - then don't trigger onclick..
6551             return;
6552         }
6553         
6554         if(
6555                 this.preventDefault ||
6556                                 this.href === false ||
6557                 this.href === '#' 
6558         ){
6559             //Roo.log("NavItem - prevent Default?");
6560             e.preventDefault();
6561         }
6562         
6563         if (this.disabled) {
6564             return;
6565         }
6566         
6567         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6568         if (tg && tg.transition) {
6569             Roo.log("waiting for the transitionend");
6570             return;
6571         }
6572         
6573         
6574         
6575         //Roo.log("fire event clicked");
6576         if(this.fireEvent('click', this, e) === false){
6577             return;
6578         };
6579         
6580         if(this.tagtype == 'span'){
6581             return;
6582         }
6583         
6584         //Roo.log(this.href);
6585         var ael = this.el.select('a',true).first();
6586         //Roo.log(ael);
6587         
6588         if(ael && this.animateRef && this.href.indexOf('#') > -1){
6589             //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
6590             if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
6591                 return; // ignore... - it's a 'hash' to another page.
6592             }
6593             Roo.log("NavItem - prevent Default?");
6594             e.preventDefault();
6595             this.scrollToElement(e);
6596         }
6597         
6598         
6599         var p =  this.parent();
6600    
6601         if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) {
6602             if (typeof(p.setActiveItem) !== 'undefined') {
6603                 p.setActiveItem(this);
6604             }
6605         }
6606         
6607         // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
6608         if (p.parentType == 'NavHeaderbar' && !this.menu) {
6609             // remove the collapsed menu expand...
6610             p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');  
6611         }
6612     },
6613     
6614     isActive: function () {
6615         return this.active
6616     },
6617     setActive : function(state, fire, is_was_active)
6618     {
6619         if (this.active && !state && this.navId) {
6620             this.was_active = true;
6621             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6622             if (nv) {
6623                 nv.clearWasActive(this);
6624             }
6625             
6626         }
6627         this.active = state;
6628         
6629         if (!state ) {
6630             this.el.removeClass('active');
6631             this.navLink ? this.navLink.removeClass('active') : false;
6632         } else if (!this.el.hasClass('active')) {
6633             
6634             this.el.addClass('active');
6635             if (Roo.bootstrap.version == 4 && this.navLink ) {
6636                 this.navLink.addClass('active');
6637             }
6638             
6639         }
6640         if (fire) {
6641             this.fireEvent('changed', this, state);
6642         }
6643         
6644         // show a panel if it's registered and related..
6645         
6646         if (!this.navId || !this.tabId || !state || is_was_active) {
6647             return;
6648         }
6649         
6650         var tg = Roo.bootstrap.TabGroup.get(this.navId);
6651         if (!tg) {
6652             return;
6653         }
6654         var pan = tg.getPanelByName(this.tabId);
6655         if (!pan) {
6656             return;
6657         }
6658         // if we can not flip to new panel - go back to old nav highlight..
6659         if (false == tg.showPanel(pan)) {
6660             var nv = Roo.bootstrap.nav.Group.get(this.navId);
6661             if (nv) {
6662                 var onav = nv.getWasActive();
6663                 if (onav) {
6664                     onav.setActive(true, false, true);
6665                 }
6666             }
6667             
6668         }
6669         
6670         
6671         
6672     },
6673      // this should not be here...
6674     setDisabled : function(state)
6675     {
6676         this.disabled = state;
6677         if (!state ) {
6678             this.el.removeClass('disabled');
6679         } else if (!this.el.hasClass('disabled')) {
6680             this.el.addClass('disabled');
6681         }
6682         
6683     },
6684     
6685     /**
6686      * Fetch the element to display the tooltip on.
6687      * @return {Roo.Element} defaults to this.el
6688      */
6689     tooltipEl : function()
6690     {
6691         return this.el; //this.tagtype  == 'a' ? this.el  : this.el.select('' + this.tagtype + '', true).first();
6692     },
6693     
6694     scrollToElement : function(e)
6695     {
6696         var c = document.body;
6697         
6698         /*
6699          * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
6700          */
6701         if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
6702             c = document.documentElement;
6703         }
6704         
6705         var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
6706         
6707         if(!target){
6708             return;
6709         }
6710
6711         var o = target.calcOffsetsTo(c);
6712         
6713         var options = {
6714             target : target,
6715             value : o[1]
6716         };
6717         
6718         this.fireEvent('scrollto', this, options, e);
6719         
6720         Roo.get(c).scrollTo('top', options.value, true);
6721         
6722         return;
6723     },
6724     /**
6725      * Set the HTML (text content) of the item
6726      * @param {string} html  content for the nav item
6727      */
6728     setHtml : function(html)
6729     {
6730         this.html = html;
6731         this.htmlEl.dom.innerHTML = html;
6732         
6733     } 
6734 });
6735  
6736
6737  /*
6738  * - LGPL
6739  *
6740  * sidebar item
6741  *
6742  *  li
6743  *    <span> icon </span>
6744  *    <span> text </span>
6745  *    <span>badge </span>
6746  */
6747
6748 /**
6749  * @class Roo.bootstrap.nav.SidebarItem
6750  * @extends Roo.bootstrap.nav.Item
6751  * Bootstrap Navbar.NavSidebarItem class
6752  * 
6753  * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
6754  * {Boolean} open is the menu open
6755  * {Boolean} buttonView use button as the tigger el rather that a (default false)
6756  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
6757  * {String} buttonSize (sm|md|lg)the extra classes for the button
6758  * {Boolean} showArrow show arrow next to the text (default true)
6759  * @constructor
6760  * Create a new Navbar Button
6761  * @param {Object} config The config object
6762  */
6763 Roo.bootstrap.nav.SidebarItem = function(config){
6764     Roo.bootstrap.nav.SidebarItem.superclass.constructor.call(this, config);
6765     this.addEvents({
6766         // raw events
6767         /**
6768          * @event click
6769          * The raw click event for the entire grid.
6770          * @param {Roo.EventObject} e
6771          */
6772         "click" : true,
6773          /**
6774             * @event changed
6775             * Fires when the active item active state changes
6776             * @param {Roo.bootstrap.nav.SidebarItem} this
6777             * @param {boolean} state the new state
6778              
6779          */
6780         'changed': true
6781     });
6782    
6783 };
6784
6785 Roo.extend(Roo.bootstrap.nav.SidebarItem, Roo.bootstrap.nav.Item,  {
6786     
6787     badgeWeight : 'default',
6788     
6789     open: false,
6790     
6791     buttonView : false,
6792     
6793     buttonWeight : 'default',
6794     
6795     buttonSize : 'md',
6796     
6797     showArrow : true,
6798     
6799     getAutoCreate : function(){
6800         
6801         
6802         var a = {
6803                 tag: 'a',
6804                 href : this.href || '#',
6805                 cls: '',
6806                 html : '',
6807                 cn : []
6808         };
6809         
6810         if(this.buttonView){
6811             a = {
6812                 tag: 'button',
6813                 href : this.href || '#',
6814                 cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
6815                 html : this.html,
6816                 cn : []
6817             };
6818         }
6819         
6820         var cfg = {
6821             tag: 'li',
6822             cls: '',
6823             cn: [ a ]
6824         };
6825         
6826         if (this.active) {
6827             cfg.cls += ' active';
6828         }
6829         
6830         if (this.disabled) {
6831             cfg.cls += ' disabled';
6832         }
6833         if (this.open) {
6834             cfg.cls += ' open x-open';
6835         }
6836         // left icon..
6837         if (this.glyphicon || this.icon) {
6838             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
6839             a.cn.push({ tag : 'i', cls : c }) ;
6840         }
6841         
6842         if(!this.buttonView){
6843             var span = {
6844                 tag: 'span',
6845                 html : this.html || ''
6846             };
6847
6848             a.cn.push(span);
6849             
6850         }
6851         
6852         if (this.badge !== '') {
6853             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge }); 
6854         }
6855         
6856         if (this.menu) {
6857             
6858             if(this.showArrow){
6859                 a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
6860             }
6861             
6862             a.cls += ' dropdown-toggle treeview' ;
6863         }
6864         
6865         return cfg;
6866     },
6867     
6868     initEvents : function()
6869     { 
6870         if (typeof (this.menu) != 'undefined') {
6871             this.menu.parentType = this.xtype;
6872             this.menu.triggerEl = this.el;
6873             this.menu = this.addxtype(Roo.apply({}, this.menu));
6874         }
6875         
6876         this.el.on('click', this.onClick, this);
6877         
6878         if(this.badge !== ''){
6879             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
6880         }
6881         
6882     },
6883     
6884     onClick : function(e)
6885     {
6886         if(this.disabled){
6887             e.preventDefault();
6888             return;
6889         }
6890         
6891         if(this.preventDefault){
6892             e.preventDefault();
6893         }
6894         
6895         this.fireEvent('click', this, e);
6896     },
6897     
6898     disable : function()
6899     {
6900         this.setDisabled(true);
6901     },
6902     
6903     enable : function()
6904     {
6905         this.setDisabled(false);
6906     },
6907     
6908     setDisabled : function(state)
6909     {
6910         if(this.disabled == state){
6911             return;
6912         }
6913         
6914         this.disabled = state;
6915         
6916         if (state) {
6917             this.el.addClass('disabled');
6918             return;
6919         }
6920         
6921         this.el.removeClass('disabled');
6922         
6923         return;
6924     },
6925     
6926     setActive : function(state)
6927     {
6928         if(this.active == state){
6929             return;
6930         }
6931         
6932         this.active = state;
6933         
6934         if (state) {
6935             this.el.addClass('active');
6936             return;
6937         }
6938         
6939         this.el.removeClass('active');
6940         
6941         return;
6942     },
6943     
6944     isActive: function () 
6945     {
6946         return this.active;
6947     },
6948     
6949     setBadge : function(str)
6950     {
6951         if(!this.badgeEl){
6952             return;
6953         }
6954         
6955         this.badgeEl.dom.innerHTML = str;
6956     }
6957     
6958    
6959      
6960  
6961 });
6962  
6963
6964  /*
6965  * - LGPL
6966  *
6967  * nav progress bar
6968  * 
6969  */
6970
6971 /**
6972  * @class Roo.bootstrap.nav.ProgressBar
6973  * @extends Roo.bootstrap.Component
6974  * @children Roo.bootstrap.nav.ProgressBarItem
6975  * Bootstrap NavProgressBar class
6976  * 
6977  * @constructor
6978  * Create a new nav progress bar - a bar indicating step along a process
6979  * @param {Object} config The config object
6980  */
6981
6982 Roo.bootstrap.nav.ProgressBar = function(config){
6983     Roo.bootstrap.nav.ProgressBar.superclass.constructor.call(this, config);
6984
6985     this.bullets = this.bullets || [];
6986    
6987 //    Roo.bootstrap.nav.ProgressBar.register(this);
6988      this.addEvents({
6989         /**
6990              * @event changed
6991              * Fires when the active item changes
6992              * @param {Roo.bootstrap.nav.ProgressBar} this
6993              * @param {Roo.bootstrap.nav.ProgressItem} selected The item selected
6994              * @param {Roo.bootstrap.nav.ProgressItem} prev The previously selected item 
6995          */
6996         'changed': true
6997      });
6998     
6999 };
7000
7001 Roo.extend(Roo.bootstrap.nav.ProgressBar, Roo.bootstrap.Component,  {
7002     /**
7003      * @cfg {Roo.bootstrap.nav.ProgressItem} NavProgressBar:bullets[]
7004      * Bullets for the Nav Progress bar for the toolbar
7005      */
7006     bullets : [],
7007     barItems : [],
7008     
7009     getAutoCreate : function()
7010     {
7011         var cfg = Roo.apply({}, Roo.bootstrap.nav.ProgressBar.superclass.getAutoCreate.call(this));
7012         
7013         cfg = {
7014             tag : 'div',
7015             cls : 'roo-navigation-bar-group',
7016             cn : [
7017                 {
7018                     tag : 'div',
7019                     cls : 'roo-navigation-top-bar'
7020                 },
7021                 {
7022                     tag : 'div',
7023                     cls : 'roo-navigation-bullets-bar',
7024                     cn : [
7025                         {
7026                             tag : 'ul',
7027                             cls : 'roo-navigation-bar'
7028                         }
7029                     ]
7030                 },
7031                 
7032                 {
7033                     tag : 'div',
7034                     cls : 'roo-navigation-bottom-bar'
7035                 }
7036             ]
7037             
7038         };
7039         
7040         return cfg;
7041         
7042     },
7043     
7044     initEvents: function() 
7045     {
7046         
7047     },
7048     
7049     onRender : function(ct, position) 
7050     {
7051         Roo.bootstrap.nav.ProgressBar.superclass.onRender.call(this, ct, position);
7052         
7053         if(this.bullets.length){
7054             Roo.each(this.bullets, function(b){
7055                this.addItem(b);
7056             }, this);
7057         }
7058         
7059         this.format();
7060         
7061     },
7062     
7063     addItem : function(cfg)
7064     {
7065         var item = new Roo.bootstrap.nav.ProgressItem(cfg);
7066         
7067         item.parentId = this.id;
7068         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
7069         
7070         if(cfg.html){
7071             var top = new Roo.bootstrap.Element({
7072                 tag : 'div',
7073                 cls : 'roo-navigation-bar-text'
7074             });
7075             
7076             var bottom = new Roo.bootstrap.Element({
7077                 tag : 'div',
7078                 cls : 'roo-navigation-bar-text'
7079             });
7080             
7081             top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
7082             bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
7083             
7084             var topText = new Roo.bootstrap.Element({
7085                 tag : 'span',
7086                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
7087             });
7088             
7089             var bottomText = new Roo.bootstrap.Element({
7090                 tag : 'span',
7091                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
7092             });
7093             
7094             topText.onRender(top.el, null);
7095             bottomText.onRender(bottom.el, null);
7096             
7097             item.topEl = top;
7098             item.bottomEl = bottom;
7099         }
7100         
7101         this.barItems.push(item);
7102         
7103         return item;
7104     },
7105     
7106     getActive : function()
7107     {
7108         var active = false;
7109         
7110         Roo.each(this.barItems, function(v){
7111             
7112             if (!v.isActive()) {
7113                 return;
7114             }
7115             
7116             active = v;
7117             return false;
7118             
7119         });
7120         
7121         return active;
7122     },
7123     
7124     setActiveItem : function(item)
7125     {
7126         var prev = false;
7127         
7128         Roo.each(this.barItems, function(v){
7129             if (v.rid == item.rid) {
7130                 return ;
7131             }
7132             
7133             if (v.isActive()) {
7134                 v.setActive(false);
7135                 prev = v;
7136             }
7137         });
7138
7139         item.setActive(true);
7140         
7141         this.fireEvent('changed', this, item, prev);
7142     },
7143     
7144     getBarItem: function(rid)
7145     {
7146         var ret = false;
7147         
7148         Roo.each(this.barItems, function(e) {
7149             if (e.rid != rid) {
7150                 return;
7151             }
7152             
7153             ret =  e;
7154             return false;
7155         });
7156         
7157         return ret;
7158     },
7159     
7160     indexOfItem : function(item)
7161     {
7162         var index = false;
7163         
7164         Roo.each(this.barItems, function(v, i){
7165             
7166             if (v.rid != item.rid) {
7167                 return;
7168             }
7169             
7170             index = i;
7171             return false
7172         });
7173         
7174         return index;
7175     },
7176     
7177     setActiveNext : function()
7178     {
7179         var i = this.indexOfItem(this.getActive());
7180         
7181         if (i > this.barItems.length) {
7182             return;
7183         }
7184         
7185         this.setActiveItem(this.barItems[i+1]);
7186     },
7187     
7188     setActivePrev : function()
7189     {
7190         var i = this.indexOfItem(this.getActive());
7191         
7192         if (i  < 1) {
7193             return;
7194         }
7195         
7196         this.setActiveItem(this.barItems[i-1]);
7197     },
7198     
7199     format : function()
7200     {
7201         if(!this.barItems.length){
7202             return;
7203         }
7204      
7205         var width = 100 / this.barItems.length;
7206         
7207         Roo.each(this.barItems, function(i){
7208             i.el.setStyle('width', width + '%');
7209             i.topEl.el.setStyle('width', width + '%');
7210             i.bottomEl.el.setStyle('width', width + '%');
7211         }, this);
7212         
7213     }
7214     
7215 });
7216 /*
7217  * - LGPL
7218  *
7219  * Nav Progress Item
7220  * 
7221  */
7222
7223 /**
7224  * @class Roo.bootstrap.nav.ProgressBarItem
7225  * @extends Roo.bootstrap.Component
7226  * Bootstrap NavProgressBarItem class
7227  * @cfg {String} rid the reference id
7228  * @cfg {Boolean} active (true|false) Is item active default false
7229  * @cfg {Boolean} disabled (true|false) Is item active default false
7230  * @cfg {String} html
7231  * @cfg {String} position (top|bottom) text position default bottom
7232  * @cfg {String} icon show icon instead of number
7233  * 
7234  * @constructor
7235  * Create a new NavProgressBarItem
7236  * @param {Object} config The config object
7237  */
7238 Roo.bootstrap.nav.ProgressBarItem = function(config){
7239     Roo.bootstrap.nav.ProgressBarItem.superclass.constructor.call(this, config);
7240     this.addEvents({
7241         // raw events
7242         /**
7243          * @event click
7244          * The raw click event for the entire grid.
7245          * @param {Roo.bootstrap.nav.ProgressBarItem} this
7246          * @param {Roo.EventObject} e
7247          */
7248         "click" : true
7249     });
7250    
7251 };
7252
7253 Roo.extend(Roo.bootstrap.nav.ProgressBarItem, Roo.bootstrap.Component,  {
7254     
7255     rid : '',
7256     active : false,
7257     disabled : false,
7258     html : '',
7259     position : 'bottom',
7260     icon : false,
7261     
7262     getAutoCreate : function()
7263     {
7264         var iconCls = 'roo-navigation-bar-item-icon';
7265         
7266         iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
7267         
7268         var cfg = {
7269             tag: 'li',
7270             cls: 'roo-navigation-bar-item',
7271             cn : [
7272                 {
7273                     tag : 'i',
7274                     cls : iconCls
7275                 }
7276             ]
7277         };
7278         
7279         if(this.active){
7280             cfg.cls += ' active';
7281         }
7282         if(this.disabled){
7283             cfg.cls += ' disabled';
7284         }
7285         
7286         return cfg;
7287     },
7288     
7289     disable : function()
7290     {
7291         this.setDisabled(true);
7292     },
7293     
7294     enable : function()
7295     {
7296         this.setDisabled(false);
7297     },
7298     
7299     initEvents: function() 
7300     {
7301         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
7302         
7303         this.iconEl.on('click', this.onClick, this);
7304     },
7305     
7306     onClick : function(e)
7307     {
7308         e.preventDefault();
7309         
7310         if(this.disabled){
7311             return;
7312         }
7313         
7314         if(this.fireEvent('click', this, e) === false){
7315             return;
7316         };
7317         
7318         this.parent().setActiveItem(this);
7319     },
7320     
7321     isActive: function () 
7322     {
7323         return this.active;
7324     },
7325     
7326     setActive : function(state)
7327     {
7328         if(this.active == state){
7329             return;
7330         }
7331         
7332         this.active = state;
7333         
7334         if (state) {
7335             this.el.addClass('active');
7336             return;
7337         }
7338         
7339         this.el.removeClass('active');
7340         
7341         return;
7342     },
7343     
7344     setDisabled : function(state)
7345     {
7346         if(this.disabled == state){
7347             return;
7348         }
7349         
7350         this.disabled = state;
7351         
7352         if (state) {
7353             this.el.addClass('disabled');
7354             return;
7355         }
7356         
7357         this.el.removeClass('disabled');
7358     },
7359     
7360     tooltipEl : function()
7361     {
7362         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
7363     }
7364 });
7365  
7366
7367  /*
7368  * - LGPL
7369  *
7370  *  Breadcrumb Nav
7371  * 
7372  */
7373 Roo.namespace('Roo.bootstrap.breadcrumb');
7374
7375
7376 /**
7377  * @class Roo.bootstrap.breadcrumb.Nav
7378  * @extends Roo.bootstrap.Component
7379  * Bootstrap Breadcrumb Nav Class
7380  *  
7381  * @children Roo.bootstrap.breadcrumb.Item
7382  * 
7383  * @constructor
7384  * Create a new breadcrumb.Nav
7385  * @param {Object} config The config object
7386  */
7387
7388
7389 Roo.bootstrap.breadcrumb.Nav = function(config){
7390     Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config);
7391     
7392     
7393 };
7394
7395 Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component,  {
7396     
7397     getAutoCreate : function()
7398     {
7399
7400         var cfg = {
7401             tag: 'nav',
7402             cn : [
7403                 {
7404                     tag : 'ol',
7405                     cls : 'breadcrumb'
7406                 }
7407             ]
7408             
7409         };
7410           
7411         return cfg;
7412     },
7413     
7414     initEvents: function()
7415     {
7416         this.olEl = this.el.select('ol',true).first();    
7417     },
7418     getChildContainer : function()
7419     {
7420         return this.olEl;  
7421     }
7422     
7423 });
7424
7425  /*
7426  * - LGPL
7427  *
7428  *  Breadcrumb Item
7429  * 
7430  */
7431
7432
7433 /**
7434  * @class Roo.bootstrap.breadcrumb.Nav
7435  * @extends Roo.bootstrap.Component
7436  * @children Roo.bootstrap.Component
7437  * @parent Roo.bootstrap.breadcrumb.Nav
7438  * Bootstrap Breadcrumb Nav Class
7439  *  
7440  * 
7441  * @cfg {String} html the content of the link.
7442  * @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
7443  * @cfg {Boolean} active is it active
7444
7445  * 
7446  * @constructor
7447  * Create a new breadcrumb.Nav
7448  * @param {Object} config The config object
7449  */
7450
7451 Roo.bootstrap.breadcrumb.Item = function(config){
7452     Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config);
7453     this.addEvents({
7454         // img events
7455         /**
7456          * @event click
7457          * The img click event for the img.
7458          * @param {Roo.EventObject} e
7459          */
7460         "click" : true
7461     });
7462     
7463 };
7464
7465 Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component,  {
7466     
7467     href: false,
7468     html : '',
7469     
7470     getAutoCreate : function()
7471     {
7472
7473         var cfg = {
7474             tag: 'li',
7475             cls : 'breadcrumb-item' + (this.active ? ' active' : '')
7476         };
7477         if (this.href !== false) {
7478             cfg.cn = [{
7479                 tag : 'a',
7480                 href : this.href,
7481                 html : this.html
7482             }];
7483         } else {
7484             cfg.html = this.html;
7485         }
7486         
7487         return cfg;
7488     },
7489     
7490     initEvents: function()
7491     {
7492         if (this.href) {
7493             this.el.select('a', true).first().on('click',this.onClick, this)
7494         }
7495         
7496     },
7497     onClick : function(e)
7498     {
7499         e.preventDefault();
7500         this.fireEvent('click',this,  e);
7501     }
7502     
7503 });
7504
7505  /*
7506  * - LGPL
7507  *
7508  * row
7509  * 
7510  */
7511
7512 /**
7513  * @class Roo.bootstrap.Row
7514  * @extends Roo.bootstrap.Component
7515  * @children Roo.bootstrap.Component
7516  * Bootstrap Row class (contains columns...)
7517  * 
7518  * @constructor
7519  * Create a new Row
7520  * @param {Object} config The config object
7521  */
7522
7523 Roo.bootstrap.Row = function(config){
7524     Roo.bootstrap.Row.superclass.constructor.call(this, config);
7525 };
7526
7527 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
7528     
7529     getAutoCreate : function(){
7530        return {
7531             cls: 'row clearfix'
7532        };
7533     }
7534     
7535     
7536 });
7537
7538  
7539
7540  /*
7541  * - LGPL
7542  *
7543  * pagination
7544  * 
7545  */
7546
7547 /**
7548  * @class Roo.bootstrap.Pagination
7549  * @extends Roo.bootstrap.Component
7550  * @children Roo.bootstrap.Pagination
7551  * Bootstrap Pagination class
7552  * 
7553  * @cfg {String} size (xs|sm|md|lg|xl)
7554  * @cfg {Boolean} inverse 
7555  * 
7556  * @constructor
7557  * Create a new Pagination
7558  * @param {Object} config The config object
7559  */
7560
7561 Roo.bootstrap.Pagination = function(config){
7562     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
7563 };
7564
7565 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
7566     
7567     cls: false,
7568     size: false,
7569     inverse: false,
7570     
7571     getAutoCreate : function(){
7572         var cfg = {
7573             tag: 'ul',
7574                 cls: 'pagination'
7575         };
7576         if (this.inverse) {
7577             cfg.cls += ' inverse';
7578         }
7579         if (this.html) {
7580             cfg.html=this.html;
7581         }
7582         if (this.cls) {
7583             cfg.cls += " " + this.cls;
7584         }
7585         return cfg;
7586     }
7587    
7588 });
7589
7590  
7591
7592  /*
7593  * - LGPL
7594  *
7595  * Pagination item
7596  * 
7597  */
7598
7599
7600 /**
7601  * @class Roo.bootstrap.PaginationItem
7602  * @extends Roo.bootstrap.Component
7603  * Bootstrap PaginationItem class
7604  * @cfg {String} html text
7605  * @cfg {String} href the link
7606  * @cfg {Boolean} preventDefault (true | false) default true
7607  * @cfg {Boolean} active (true | false) default false
7608  * @cfg {Boolean} disabled default false
7609  * 
7610  * 
7611  * @constructor
7612  * Create a new PaginationItem
7613  * @param {Object} config The config object
7614  */
7615
7616
7617 Roo.bootstrap.PaginationItem = function(config){
7618     Roo.bootstrap.PaginationItem.superclass.constructor.call(this, config);
7619     this.addEvents({
7620         // raw events
7621         /**
7622          * @event click
7623          * The raw click event for the entire grid.
7624          * @param {Roo.EventObject} e
7625          */
7626         "click" : true
7627     });
7628 };
7629
7630 Roo.extend(Roo.bootstrap.PaginationItem, Roo.bootstrap.Component,  {
7631     
7632     href : false,
7633     html : false,
7634     preventDefault: true,
7635     active : false,
7636     cls : false,
7637     disabled: false,
7638     
7639     getAutoCreate : function(){
7640         var cfg= {
7641             tag: 'li',
7642             cn: [
7643                 {
7644                     tag : 'a',
7645                     href : this.href ? this.href : '#',
7646                     html : this.html ? this.html : ''
7647                 }
7648             ]
7649         };
7650         
7651         if(this.cls){
7652             cfg.cls = this.cls;
7653         }
7654         
7655         if(this.disabled){
7656             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' disabled' : 'disabled';
7657         }
7658         
7659         if(this.active){
7660             cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
7661         }
7662         
7663         return cfg;
7664     },
7665     
7666     initEvents: function() {
7667         
7668         this.el.on('click', this.onClick, this);
7669         
7670     },
7671     onClick : function(e)
7672     {
7673         Roo.log('PaginationItem on click ');
7674         if(this.preventDefault){
7675             e.preventDefault();
7676         }
7677         
7678         if(this.disabled){
7679             return;
7680         }
7681         
7682         this.fireEvent('click', this, e);
7683     }
7684    
7685 });
7686
7687  
7688
7689  /*
7690  * - LGPL
7691  *
7692  * slider
7693  * 
7694  */
7695
7696
7697 /**
7698  * @class Roo.bootstrap.Slider
7699  * @extends Roo.bootstrap.Component
7700  * Bootstrap Slider class
7701  *    
7702  * @constructor
7703  * Create a new Slider
7704  * @param {Object} config The config object
7705  */
7706
7707 Roo.bootstrap.Slider = function(config){
7708     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
7709 };
7710
7711 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
7712     
7713     getAutoCreate : function(){
7714         
7715         var cfg = {
7716             tag: 'div',
7717             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
7718             cn: [
7719                 {
7720                     tag: 'a',
7721                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
7722                 }
7723             ]
7724         };
7725         
7726         return cfg;
7727     }
7728    
7729 });
7730
7731  /*
7732  * Based on:
7733  * Ext JS Library 1.1.1
7734  * Copyright(c) 2006-2007, Ext JS, LLC.
7735  *
7736  * Originally Released Under LGPL - original licence link has changed is not relivant.
7737  *
7738  * Fork - LGPL
7739  * <script type="text/javascript">
7740  */
7741  /**
7742  * @extends Roo.dd.DDProxy
7743  * @class Roo.grid.SplitDragZone
7744  * Support for Column Header resizing
7745  * @constructor
7746  * @param {Object} config
7747  */
7748 // private
7749 // This is a support class used internally by the Grid components
7750 Roo.grid.SplitDragZone = function(grid, hd, hd2){
7751     this.grid = grid;
7752     this.view = grid.getView();
7753     this.proxy = this.view.resizeProxy;
7754     Roo.grid.SplitDragZone.superclass.constructor.call(
7755         this,
7756         hd, // ID
7757         "gridSplitters" + this.grid.getGridEl().id, // SGROUP
7758         {  // CONFIG
7759             dragElId : Roo.id(this.proxy.dom),
7760             resizeFrame:false
7761         }
7762     );
7763     
7764     this.setHandleElId(Roo.id(hd));
7765     if (hd2 !== false) {
7766         this.setOuterHandleElId(Roo.id(hd2));
7767     }
7768     
7769     this.scroll = false;
7770 };
7771 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
7772     fly: Roo.Element.fly,
7773
7774     b4StartDrag : function(x, y){
7775         this.view.headersDisabled = true;
7776         var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
7777                     this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
7778         );
7779         this.proxy.setHeight(h);
7780         
7781         // for old system colWidth really stored the actual width?
7782         // in bootstrap we tried using xs/ms/etc.. to do % sizing?
7783         // which in reality did not work.. - it worked only for fixed sizes
7784         // for resizable we need to use actual sizes.
7785         var w = this.cm.getColumnWidth(this.cellIndex);
7786         if (!this.view.mainWrap) {
7787             // bootstrap.
7788             w = this.view.getHeaderIndex(this.cellIndex).getWidth();
7789         }
7790         
7791         
7792         
7793         // this was w-this.grid.minColumnWidth;
7794         // doesnt really make sense? - w = thie curren width or the rendered one?
7795         var minw = Math.max(w-this.grid.minColumnWidth, 0);
7796         this.resetConstraints();
7797         this.setXConstraint(minw, 1000);
7798         this.setYConstraint(0, 0);
7799         this.minX = x - minw;
7800         this.maxX = x + 1000;
7801         this.startPos = x;
7802         if (!this.view.mainWrap) { // this is Bootstrap code..
7803             this.getDragEl().style.display='block';
7804         }
7805         
7806         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
7807     },
7808
7809
7810     handleMouseDown : function(e){
7811         ev = Roo.EventObject.setEvent(e);
7812         var t = this.fly(ev.getTarget());
7813         if(t.hasClass("x-grid-split")){
7814             this.cellIndex = this.view.getCellIndex(t.dom);
7815             this.split = t.dom;
7816             this.cm = this.grid.colModel;
7817             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
7818                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
7819             }
7820         }
7821     },
7822
7823     endDrag : function(e){
7824         this.view.headersDisabled = false;
7825         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
7826         var diff = endX - this.startPos;
7827         // 
7828         var w = this.cm.getColumnWidth(this.cellIndex);
7829         if (!this.view.mainWrap) {
7830             w = 0;
7831         }
7832         this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
7833     },
7834
7835     autoOffset : function(){
7836         this.setDelta(0,0);
7837     }
7838 });/*
7839  * Based on:
7840  * Ext JS Library 1.1.1
7841  * Copyright(c) 2006-2007, Ext JS, LLC.
7842  *
7843  * Originally Released Under LGPL - original licence link has changed is not relivant.
7844  *
7845  * Fork - LGPL
7846  * <script type="text/javascript">
7847  */
7848
7849 /**
7850  * @class Roo.grid.AbstractSelectionModel
7851  * @extends Roo.util.Observable
7852  * @abstract
7853  * Abstract base class for grid SelectionModels.  It provides the interface that should be
7854  * implemented by descendant classes.  This class should not be directly instantiated.
7855  * @constructor
7856  */
7857 Roo.grid.AbstractSelectionModel = function(){
7858     this.locked = false;
7859     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
7860 };
7861
7862 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
7863     /** @ignore Called by the grid automatically. Do not call directly. */
7864     init : function(grid){
7865         this.grid = grid;
7866         this.initEvents();
7867     },
7868
7869     /**
7870      * Locks the selections.
7871      */
7872     lock : function(){
7873         this.locked = true;
7874     },
7875
7876     /**
7877      * Unlocks the selections.
7878      */
7879     unlock : function(){
7880         this.locked = false;
7881     },
7882
7883     /**
7884      * Returns true if the selections are locked.
7885      * @return {Boolean}
7886      */
7887     isLocked : function(){
7888         return this.locked;
7889     }
7890 });/*
7891  * Based on:
7892  * Ext JS Library 1.1.1
7893  * Copyright(c) 2006-2007, Ext JS, LLC.
7894  *
7895  * Originally Released Under LGPL - original licence link has changed is not relivant.
7896  *
7897  * Fork - LGPL
7898  * <script type="text/javascript">
7899  */
7900 /**
7901  * @extends Roo.grid.AbstractSelectionModel
7902  * @class Roo.grid.RowSelectionModel
7903  * The default SelectionModel used by {@link Roo.grid.Grid}.
7904  * It supports multiple selections and keyboard selection/navigation. 
7905  * @constructor
7906  * @param {Object} config
7907  */
7908 Roo.grid.RowSelectionModel = function(config){
7909     Roo.apply(this, config);
7910     this.selections = new Roo.util.MixedCollection(false, function(o){
7911         return o.id;
7912     });
7913
7914     this.last = false;
7915     this.lastActive = false;
7916
7917     this.addEvents({
7918         /**
7919         * @event selectionchange
7920         * Fires when the selection changes
7921         * @param {SelectionModel} this
7922         */
7923        "selectionchange" : true,
7924        /**
7925         * @event afterselectionchange
7926         * Fires after the selection changes (eg. by key press or clicking)
7927         * @param {SelectionModel} this
7928         */
7929        "afterselectionchange" : true,
7930        /**
7931         * @event beforerowselect
7932         * Fires when a row is selected being selected, return false to cancel.
7933         * @param {SelectionModel} this
7934         * @param {Number} rowIndex The selected index
7935         * @param {Boolean} keepExisting False if other selections will be cleared
7936         */
7937        "beforerowselect" : true,
7938        /**
7939         * @event rowselect
7940         * Fires when a row is selected.
7941         * @param {SelectionModel} this
7942         * @param {Number} rowIndex The selected index
7943         * @param {Roo.data.Record} r The record
7944         */
7945        "rowselect" : true,
7946        /**
7947         * @event rowdeselect
7948         * Fires when a row is deselected.
7949         * @param {SelectionModel} this
7950         * @param {Number} rowIndex The selected index
7951         */
7952         "rowdeselect" : true
7953     });
7954     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
7955     this.locked = false;
7956 };
7957
7958 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
7959     /**
7960      * @cfg {Boolean} singleSelect
7961      * True to allow selection of only one row at a time (defaults to false)
7962      */
7963     singleSelect : false,
7964
7965     // private
7966     initEvents : function(){
7967
7968         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
7969             this.grid.on("mousedown", this.handleMouseDown, this);
7970         }else{ // allow click to work like normal
7971             this.grid.on("rowclick", this.handleDragableRowClick, this);
7972         }
7973         // bootstrap does not have a view..
7974         var view = this.grid.view ? this.grid.view : this.grid;
7975         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
7976             "up" : function(e){
7977                 if(!e.shiftKey){
7978                     this.selectPrevious(e.shiftKey);
7979                 }else if(this.last !== false && this.lastActive !== false){
7980                     var last = this.last;
7981                     this.selectRange(this.last,  this.lastActive-1);
7982                     view.focusRow(this.lastActive);
7983                     if(last !== false){
7984                         this.last = last;
7985                     }
7986                 }else{
7987                     this.selectFirstRow();
7988                 }
7989                 this.fireEvent("afterselectionchange", this);
7990             },
7991             "down" : function(e){
7992                 if(!e.shiftKey){
7993                     this.selectNext(e.shiftKey);
7994                 }else if(this.last !== false && this.lastActive !== false){
7995                     var last = this.last;
7996                     this.selectRange(this.last,  this.lastActive+1);
7997                     view.focusRow(this.lastActive);
7998                     if(last !== false){
7999                         this.last = last;
8000                     }
8001                 }else{
8002                     this.selectFirstRow();
8003                 }
8004                 this.fireEvent("afterselectionchange", this);
8005             },
8006             scope: this
8007         });
8008
8009          
8010         view.on("refresh", this.onRefresh, this);
8011         view.on("rowupdated", this.onRowUpdated, this);
8012         view.on("rowremoved", this.onRemove, this);
8013     },
8014
8015     // private
8016     onRefresh : function(){
8017         var ds = this.grid.ds, i, v = this.grid.view;
8018         var s = this.selections;
8019         s.each(function(r){
8020             if((i = ds.indexOfId(r.id)) != -1){
8021                 v.onRowSelect(i);
8022                 s.add(ds.getAt(i)); // updating the selection relate data
8023             }else{
8024                 s.remove(r);
8025             }
8026         });
8027     },
8028
8029     // private
8030     onRemove : function(v, index, r){
8031         this.selections.remove(r);
8032     },
8033
8034     // private
8035     onRowUpdated : function(v, index, r){
8036         if(this.isSelected(r)){
8037             v.onRowSelect(index);
8038         }
8039     },
8040
8041     /**
8042      * Select records.
8043      * @param {Array} records The records to select
8044      * @param {Boolean} keepExisting (optional) True to keep existing selections
8045      */
8046     selectRecords : function(records, keepExisting){
8047         if(!keepExisting){
8048             this.clearSelections();
8049         }
8050         var ds = this.grid.ds;
8051         for(var i = 0, len = records.length; i < len; i++){
8052             this.selectRow(ds.indexOf(records[i]), true);
8053         }
8054     },
8055
8056     /**
8057      * Gets the number of selected rows.
8058      * @return {Number}
8059      */
8060     getCount : function(){
8061         return this.selections.length;
8062     },
8063
8064     /**
8065      * Selects the first row in the grid.
8066      */
8067     selectFirstRow : function(){
8068         this.selectRow(0);
8069     },
8070
8071     /**
8072      * Select the last row.
8073      * @param {Boolean} keepExisting (optional) True to keep existing selections
8074      */
8075     selectLastRow : function(keepExisting){
8076         this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
8077     },
8078
8079     /**
8080      * Selects the row immediately following the last selected row.
8081      * @param {Boolean} keepExisting (optional) True to keep existing selections
8082      */
8083     selectNext : function(keepExisting){
8084         if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
8085             this.selectRow(this.last+1, keepExisting);
8086             var view = this.grid.view ? this.grid.view : this.grid;
8087             view.focusRow(this.last);
8088         }
8089     },
8090
8091     /**
8092      * Selects the row that precedes the last selected row.
8093      * @param {Boolean} keepExisting (optional) True to keep existing selections
8094      */
8095     selectPrevious : function(keepExisting){
8096         if(this.last){
8097             this.selectRow(this.last-1, keepExisting);
8098             var view = this.grid.view ? this.grid.view : this.grid;
8099             view.focusRow(this.last);
8100         }
8101     },
8102
8103     /**
8104      * Returns the selected records
8105      * @return {Array} Array of selected records
8106      */
8107     getSelections : function(){
8108         return [].concat(this.selections.items);
8109     },
8110
8111     /**
8112      * Returns the first selected record.
8113      * @return {Record}
8114      */
8115     getSelected : function(){
8116         return this.selections.itemAt(0);
8117     },
8118
8119
8120     /**
8121      * Clears all selections.
8122      */
8123     clearSelections : function(fast){
8124         if(this.locked) {
8125             return;
8126         }
8127         if(fast !== true){
8128             var ds = this.grid.ds;
8129             var s = this.selections;
8130             s.each(function(r){
8131                 this.deselectRow(ds.indexOfId(r.id));
8132             }, this);
8133             s.clear();
8134         }else{
8135             this.selections.clear();
8136         }
8137         this.last = false;
8138     },
8139
8140
8141     /**
8142      * Selects all rows.
8143      */
8144     selectAll : function(){
8145         if(this.locked) {
8146             return;
8147         }
8148         this.selections.clear();
8149         for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
8150             this.selectRow(i, true);
8151         }
8152     },
8153
8154     /**
8155      * Returns True if there is a selection.
8156      * @return {Boolean}
8157      */
8158     hasSelection : function(){
8159         return this.selections.length > 0;
8160     },
8161
8162     /**
8163      * Returns True if the specified row is selected.
8164      * @param {Number/Record} record The record or index of the record to check
8165      * @return {Boolean}
8166      */
8167     isSelected : function(index){
8168         var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
8169         return (r && this.selections.key(r.id) ? true : false);
8170     },
8171
8172     /**
8173      * Returns True if the specified record id is selected.
8174      * @param {String} id The id of record to check
8175      * @return {Boolean}
8176      */
8177     isIdSelected : function(id){
8178         return (this.selections.key(id) ? true : false);
8179     },
8180
8181     // private
8182     handleMouseDown : function(e, t)
8183     {
8184         var view = this.grid.view ? this.grid.view : this.grid;
8185         var rowIndex;
8186         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
8187             return;
8188         };
8189         if(e.shiftKey && this.last !== false){
8190             var last = this.last;
8191             this.selectRange(last, rowIndex, e.ctrlKey);
8192             this.last = last; // reset the last
8193             view.focusRow(rowIndex);
8194         }else{
8195             var isSelected = this.isSelected(rowIndex);
8196             if(e.button !== 0 && isSelected){
8197                 view.focusRow(rowIndex);
8198             }else if(e.ctrlKey && isSelected){
8199                 this.deselectRow(rowIndex);
8200             }else if(!isSelected){
8201                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
8202                 view.focusRow(rowIndex);
8203             }
8204         }
8205         this.fireEvent("afterselectionchange", this);
8206     },
8207     // private
8208     handleDragableRowClick :  function(grid, rowIndex, e) 
8209     {
8210         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
8211             this.selectRow(rowIndex, false);
8212             var view = this.grid.view ? this.grid.view : this.grid;
8213             view.focusRow(rowIndex);
8214              this.fireEvent("afterselectionchange", this);
8215         }
8216     },
8217     
8218     /**
8219      * Selects multiple rows.
8220      * @param {Array} rows Array of the indexes of the row to select
8221      * @param {Boolean} keepExisting (optional) True to keep existing selections
8222      */
8223     selectRows : function(rows, keepExisting){
8224         if(!keepExisting){
8225             this.clearSelections();
8226         }
8227         for(var i = 0, len = rows.length; i < len; i++){
8228             this.selectRow(rows[i], true);
8229         }
8230     },
8231
8232     /**
8233      * Selects a range of rows. All rows in between startRow and endRow are also selected.
8234      * @param {Number} startRow The index of the first row in the range
8235      * @param {Number} endRow The index of the last row in the range
8236      * @param {Boolean} keepExisting (optional) True to retain existing selections
8237      */
8238     selectRange : function(startRow, endRow, keepExisting){
8239         if(this.locked) {
8240             return;
8241         }
8242         if(!keepExisting){
8243             this.clearSelections();
8244         }
8245         if(startRow <= endRow){
8246             for(var i = startRow; i <= endRow; i++){
8247                 this.selectRow(i, true);
8248             }
8249         }else{
8250             for(var i = startRow; i >= endRow; i--){
8251                 this.selectRow(i, true);
8252             }
8253         }
8254     },
8255
8256     /**
8257      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
8258      * @param {Number} startRow The index of the first row in the range
8259      * @param {Number} endRow The index of the last row in the range
8260      */
8261     deselectRange : function(startRow, endRow, preventViewNotify){
8262         if(this.locked) {
8263             return;
8264         }
8265         for(var i = startRow; i <= endRow; i++){
8266             this.deselectRow(i, preventViewNotify);
8267         }
8268     },
8269
8270     /**
8271      * Selects a row.
8272      * @param {Number} row The index of the row to select
8273      * @param {Boolean} keepExisting (optional) True to keep existing selections
8274      */
8275     selectRow : function(index, keepExisting, preventViewNotify){
8276         if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
8277             return;
8278         }
8279         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
8280             if(!keepExisting || this.singleSelect){
8281                 this.clearSelections();
8282             }
8283             var r = this.grid.ds.getAt(index);
8284             this.selections.add(r);
8285             this.last = this.lastActive = index;
8286             if(!preventViewNotify){
8287                 var view = this.grid.view ? this.grid.view : this.grid;
8288                 view.onRowSelect(index);
8289             }
8290             this.fireEvent("rowselect", this, index, r);
8291             this.fireEvent("selectionchange", this);
8292         }
8293     },
8294
8295     /**
8296      * Deselects a row.
8297      * @param {Number} row The index of the row to deselect
8298      */
8299     deselectRow : function(index, preventViewNotify){
8300         if(this.locked) {
8301             return;
8302         }
8303         if(this.last == index){
8304             this.last = false;
8305         }
8306         if(this.lastActive == index){
8307             this.lastActive = false;
8308         }
8309         var r = this.grid.ds.getAt(index);
8310         this.selections.remove(r);
8311         if(!preventViewNotify){
8312             var view = this.grid.view ? this.grid.view : this.grid;
8313             view.onRowDeselect(index);
8314         }
8315         this.fireEvent("rowdeselect", this, index);
8316         this.fireEvent("selectionchange", this);
8317     },
8318
8319     // private
8320     restoreLast : function(){
8321         if(this._last){
8322             this.last = this._last;
8323         }
8324     },
8325
8326     // private
8327     acceptsNav : function(row, col, cm){
8328         return !cm.isHidden(col) && cm.isCellEditable(col, row);
8329     },
8330
8331     // private
8332     onEditorKey : function(field, e){
8333         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
8334         if(k == e.TAB){
8335             e.stopEvent();
8336             ed.completeEdit();
8337             if(e.shiftKey){
8338                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
8339             }else{
8340                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
8341             }
8342         }else if(k == e.ENTER && !e.ctrlKey){
8343             e.stopEvent();
8344             ed.completeEdit();
8345             if(e.shiftKey){
8346                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
8347             }else{
8348                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
8349             }
8350         }else if(k == e.ESC){
8351             ed.cancelEdit();
8352         }
8353         if(newCell){
8354             g.startEditing(newCell[0], newCell[1]);
8355         }
8356     }
8357 });/*
8358  * Based on:
8359  * Ext JS Library 1.1.1
8360  * Copyright(c) 2006-2007, Ext JS, LLC.
8361  *
8362  * Originally Released Under LGPL - original licence link has changed is not relivant.
8363  *
8364  * Fork - LGPL
8365  * <script type="text/javascript">
8366  */
8367  
8368
8369 /**
8370  * @class Roo.grid.ColumnModel
8371  * @extends Roo.util.Observable
8372  * This is the default implementation of a ColumnModel used by the Grid. It defines
8373  * the columns in the grid.
8374  * <br>Usage:<br>
8375  <pre><code>
8376  var colModel = new Roo.grid.ColumnModel([
8377         {header: "Ticker", width: 60, sortable: true, locked: true},
8378         {header: "Company Name", width: 150, sortable: true},
8379         {header: "Market Cap.", width: 100, sortable: true},
8380         {header: "$ Sales", width: 100, sortable: true, renderer: money},
8381         {header: "Employees", width: 100, sortable: true, resizable: false}
8382  ]);
8383  </code></pre>
8384  * <p>
8385  
8386  * The config options listed for this class are options which may appear in each
8387  * individual column definition.
8388  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
8389  * @constructor
8390  * @param {Object} config An Array of column config objects. See this class's
8391  * config objects for details.
8392 */
8393 Roo.grid.ColumnModel = function(config){
8394         /**
8395      * The config passed into the constructor
8396      */
8397     this.config = []; //config;
8398     this.lookup = {};
8399
8400     // if no id, create one
8401     // if the column does not have a dataIndex mapping,
8402     // map it to the order it is in the config
8403     for(var i = 0, len = config.length; i < len; i++){
8404         this.addColumn(config[i]);
8405         
8406     }
8407
8408     /**
8409      * The width of columns which have no width specified (defaults to 100)
8410      * @type Number
8411      */
8412     this.defaultWidth = 100;
8413
8414     /**
8415      * Default sortable of columns which have no sortable specified (defaults to false)
8416      * @type Boolean
8417      */
8418     this.defaultSortable = false;
8419
8420     this.addEvents({
8421         /**
8422              * @event widthchange
8423              * Fires when the width of a column changes.
8424              * @param {ColumnModel} this
8425              * @param {Number} columnIndex The column index
8426              * @param {Number} newWidth The new width
8427              */
8428             "widthchange": true,
8429         /**
8430              * @event headerchange
8431              * Fires when the text of a header changes.
8432              * @param {ColumnModel} this
8433              * @param {Number} columnIndex The column index
8434              * @param {Number} newText The new header text
8435              */
8436             "headerchange": true,
8437         /**
8438              * @event hiddenchange
8439              * Fires when a column is hidden or "unhidden".
8440              * @param {ColumnModel} this
8441              * @param {Number} columnIndex The column index
8442              * @param {Boolean} hidden true if hidden, false otherwise
8443              */
8444             "hiddenchange": true,
8445             /**
8446          * @event columnmoved
8447          * Fires when a column is moved.
8448          * @param {ColumnModel} this
8449          * @param {Number} oldIndex
8450          * @param {Number} newIndex
8451          */
8452         "columnmoved" : true,
8453         /**
8454          * @event columlockchange
8455          * Fires when a column's locked state is changed
8456          * @param {ColumnModel} this
8457          * @param {Number} colIndex
8458          * @param {Boolean} locked true if locked
8459          */
8460         "columnlockchange" : true
8461     });
8462     Roo.grid.ColumnModel.superclass.constructor.call(this);
8463 };
8464 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
8465     /**
8466      * @cfg {String} header [required] The header text to display in the Grid view.
8467      */
8468         /**
8469      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
8470      */
8471         /**
8472      * @cfg {String} smHeader Header at Bootsrap Small width
8473      */
8474         /**
8475      * @cfg {String} mdHeader Header at Bootsrap Medium width
8476      */
8477         /**
8478      * @cfg {String} lgHeader Header at Bootsrap Large width
8479      */
8480         /**
8481      * @cfg {String} xlHeader Header at Bootsrap extra Large width
8482      */
8483     /**
8484      * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
8485      * {@link Roo.data.Record} definition from which to draw the column's value. If not
8486      * specified, the column's index is used as an index into the Record's data Array.
8487      */
8488     /**
8489      * @cfg {Number} width  The initial width in pixels of the column. Using this
8490      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
8491      */
8492     /**
8493      * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
8494      * Defaults to the value of the {@link #defaultSortable} property.
8495      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
8496      */
8497     /**
8498      * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
8499      */
8500     /**
8501      * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
8502      */
8503     /**
8504      * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
8505      */
8506     /**
8507      * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
8508      */
8509     /**
8510      * @cfg {Function} renderer A function used to generate HTML markup for a cell
8511      * given the cell's data value. See {@link #setRenderer}. If not specified, the
8512      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
8513      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
8514      */
8515        /**
8516      * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
8517      */
8518     /**
8519      * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
8520      */
8521     /**
8522      * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
8523      */
8524     /**
8525      * @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)
8526      */
8527     /**
8528      * @cfg {String} tooltip mouse over tooltip text
8529      */
8530     /**
8531      * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
8532      */
8533     /**
8534      * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
8535      */
8536     /**
8537      * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
8538      */
8539     /**
8540      * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
8541      */
8542         /**
8543      * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
8544      */
8545     /**
8546      * Returns the id of the column at the specified index.
8547      * @param {Number} index The column index
8548      * @return {String} the id
8549      */
8550     getColumnId : function(index){
8551         return this.config[index].id;
8552     },
8553
8554     /**
8555      * Returns the column for a specified id.
8556      * @param {String} id The column id
8557      * @return {Object} the column
8558      */
8559     getColumnById : function(id){
8560         return this.lookup[id];
8561     },
8562
8563     
8564     /**
8565      * Returns the column Object for a specified dataIndex.
8566      * @param {String} dataIndex The column dataIndex
8567      * @return {Object|Boolean} the column or false if not found
8568      */
8569     getColumnByDataIndex: function(dataIndex){
8570         var index = this.findColumnIndex(dataIndex);
8571         return index > -1 ? this.config[index] : false;
8572     },
8573     
8574     /**
8575      * Returns the index for a specified column id.
8576      * @param {String} id The column id
8577      * @return {Number} the index, or -1 if not found
8578      */
8579     getIndexById : function(id){
8580         for(var i = 0, len = this.config.length; i < len; i++){
8581             if(this.config[i].id == id){
8582                 return i;
8583             }
8584         }
8585         return -1;
8586     },
8587     
8588     /**
8589      * Returns the index for a specified column dataIndex.
8590      * @param {String} dataIndex The column dataIndex
8591      * @return {Number} the index, or -1 if not found
8592      */
8593     
8594     findColumnIndex : function(dataIndex){
8595         for(var i = 0, len = this.config.length; i < len; i++){
8596             if(this.config[i].dataIndex == dataIndex){
8597                 return i;
8598             }
8599         }
8600         return -1;
8601     },
8602     
8603     
8604     moveColumn : function(oldIndex, newIndex){
8605         var c = this.config[oldIndex];
8606         this.config.splice(oldIndex, 1);
8607         this.config.splice(newIndex, 0, c);
8608         this.dataMap = null;
8609         this.fireEvent("columnmoved", this, oldIndex, newIndex);
8610     },
8611
8612     isLocked : function(colIndex){
8613         return this.config[colIndex].locked === true;
8614     },
8615
8616     setLocked : function(colIndex, value, suppressEvent){
8617         if(this.isLocked(colIndex) == value){
8618             return;
8619         }
8620         this.config[colIndex].locked = value;
8621         if(!suppressEvent){
8622             this.fireEvent("columnlockchange", this, colIndex, value);
8623         }
8624     },
8625
8626     getTotalLockedWidth : function(){
8627         var totalWidth = 0;
8628         for(var i = 0; i < this.config.length; i++){
8629             if(this.isLocked(i) && !this.isHidden(i)){
8630                 this.totalWidth += this.getColumnWidth(i);
8631             }
8632         }
8633         return totalWidth;
8634     },
8635
8636     getLockedCount : function(){
8637         for(var i = 0, len = this.config.length; i < len; i++){
8638             if(!this.isLocked(i)){
8639                 return i;
8640             }
8641         }
8642         
8643         return this.config.length;
8644     },
8645
8646     /**
8647      * Returns the number of columns.
8648      * @return {Number}
8649      */
8650     getColumnCount : function(visibleOnly){
8651         if(visibleOnly === true){
8652             var c = 0;
8653             for(var i = 0, len = this.config.length; i < len; i++){
8654                 if(!this.isHidden(i)){
8655                     c++;
8656                 }
8657             }
8658             return c;
8659         }
8660         return this.config.length;
8661     },
8662
8663     /**
8664      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
8665      * @param {Function} fn
8666      * @param {Object} scope (optional)
8667      * @return {Array} result
8668      */
8669     getColumnsBy : function(fn, scope){
8670         var r = [];
8671         for(var i = 0, len = this.config.length; i < len; i++){
8672             var c = this.config[i];
8673             if(fn.call(scope||this, c, i) === true){
8674                 r[r.length] = c;
8675             }
8676         }
8677         return r;
8678     },
8679
8680     /**
8681      * Returns true if the specified column is sortable.
8682      * @param {Number} col The column index
8683      * @return {Boolean}
8684      */
8685     isSortable : function(col){
8686         if(typeof this.config[col].sortable == "undefined"){
8687             return this.defaultSortable;
8688         }
8689         return this.config[col].sortable;
8690     },
8691
8692     /**
8693      * Returns the rendering (formatting) function defined for the column.
8694      * @param {Number} col The column index.
8695      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
8696      */
8697     getRenderer : function(col){
8698         if(!this.config[col].renderer){
8699             return Roo.grid.ColumnModel.defaultRenderer;
8700         }
8701         return this.config[col].renderer;
8702     },
8703
8704     /**
8705      * Sets the rendering (formatting) function for a column.
8706      * @param {Number} col The column index
8707      * @param {Function} fn The function to use to process the cell's raw data
8708      * to return HTML markup for the grid view. The render function is called with
8709      * the following parameters:<ul>
8710      * <li>Data value.</li>
8711      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
8712      * <li>css A CSS style string to apply to the table cell.</li>
8713      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
8714      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
8715      * <li>Row index</li>
8716      * <li>Column index</li>
8717      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
8718      */
8719     setRenderer : function(col, fn){
8720         this.config[col].renderer = fn;
8721     },
8722
8723     /**
8724      * Returns the width for the specified column.
8725      * @param {Number} col The column index
8726      * @param (optional) {String} gridSize bootstrap width size.
8727      * @return {Number}
8728      */
8729     getColumnWidth : function(col, gridSize)
8730         {
8731                 var cfg = this.config[col];
8732                 
8733                 if (typeof(gridSize) == 'undefined') {
8734                         return cfg.width * 1 || this.defaultWidth;
8735                 }
8736                 if (gridSize === false) { // if we set it..
8737                         return cfg.width || false;
8738                 }
8739                 var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
8740                 
8741                 for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
8742                         if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
8743                                 continue;
8744                         }
8745                         return cfg[ sizes[i] ];
8746                 }
8747                 return 1;
8748                 
8749     },
8750
8751     /**
8752      * Sets the width for a column.
8753      * @param {Number} col The column index
8754      * @param {Number} width The new width
8755      */
8756     setColumnWidth : function(col, width, suppressEvent){
8757         this.config[col].width = width;
8758         this.totalWidth = null;
8759         if(!suppressEvent){
8760              this.fireEvent("widthchange", this, col, width);
8761         }
8762     },
8763
8764     /**
8765      * Returns the total width of all columns.
8766      * @param {Boolean} includeHidden True to include hidden column widths
8767      * @return {Number}
8768      */
8769     getTotalWidth : function(includeHidden){
8770         if(!this.totalWidth){
8771             this.totalWidth = 0;
8772             for(var i = 0, len = this.config.length; i < len; i++){
8773                 if(includeHidden || !this.isHidden(i)){
8774                     this.totalWidth += this.getColumnWidth(i);
8775                 }
8776             }
8777         }
8778         return this.totalWidth;
8779     },
8780
8781     /**
8782      * Returns the header for the specified column.
8783      * @param {Number} col The column index
8784      * @return {String}
8785      */
8786     getColumnHeader : function(col){
8787         return this.config[col].header;
8788     },
8789
8790     /**
8791      * Sets the header for a column.
8792      * @param {Number} col The column index
8793      * @param {String} header The new header
8794      */
8795     setColumnHeader : function(col, header){
8796         this.config[col].header = header;
8797         this.fireEvent("headerchange", this, col, header);
8798     },
8799
8800     /**
8801      * Returns the tooltip for the specified column.
8802      * @param {Number} col The column index
8803      * @return {String}
8804      */
8805     getColumnTooltip : function(col){
8806             return this.config[col].tooltip;
8807     },
8808     /**
8809      * Sets the tooltip for a column.
8810      * @param {Number} col The column index
8811      * @param {String} tooltip The new tooltip
8812      */
8813     setColumnTooltip : function(col, tooltip){
8814             this.config[col].tooltip = tooltip;
8815     },
8816
8817     /**
8818      * Returns the dataIndex for the specified column.
8819      * @param {Number} col The column index
8820      * @return {Number}
8821      */
8822     getDataIndex : function(col){
8823         return this.config[col].dataIndex;
8824     },
8825
8826     /**
8827      * Sets the dataIndex for a column.
8828      * @param {Number} col The column index
8829      * @param {Number} dataIndex The new dataIndex
8830      */
8831     setDataIndex : function(col, dataIndex){
8832         this.config[col].dataIndex = dataIndex;
8833     },
8834
8835     
8836     
8837     /**
8838      * Returns true if the cell is editable.
8839      * @param {Number} colIndex The column index
8840      * @param {Number} rowIndex The row index - this is nto actually used..?
8841      * @return {Boolean}
8842      */
8843     isCellEditable : function(colIndex, rowIndex){
8844         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
8845     },
8846
8847     /**
8848      * Returns the editor defined for the cell/column.
8849      * return false or null to disable editing.
8850      * @param {Number} colIndex The column index
8851      * @param {Number} rowIndex The row index
8852      * @return {Object}
8853      */
8854     getCellEditor : function(colIndex, rowIndex){
8855         return this.config[colIndex].editor;
8856     },
8857
8858     /**
8859      * Sets if a column is editable.
8860      * @param {Number} col The column index
8861      * @param {Boolean} editable True if the column is editable
8862      */
8863     setEditable : function(col, editable){
8864         this.config[col].editable = editable;
8865     },
8866
8867
8868     /**
8869      * Returns true if the column is hidden.
8870      * @param {Number} colIndex The column index
8871      * @return {Boolean}
8872      */
8873     isHidden : function(colIndex){
8874         return this.config[colIndex].hidden;
8875     },
8876
8877
8878     /**
8879      * Returns true if the column width cannot be changed
8880      */
8881     isFixed : function(colIndex){
8882         return this.config[colIndex].fixed;
8883     },
8884
8885     /**
8886      * Returns true if the column can be resized
8887      * @return {Boolean}
8888      */
8889     isResizable : function(colIndex){
8890         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
8891     },
8892     /**
8893      * Sets if a column is hidden.
8894      * @param {Number} colIndex The column index
8895      * @param {Boolean} hidden True if the column is hidden
8896      */
8897     setHidden : function(colIndex, hidden){
8898         this.config[colIndex].hidden = hidden;
8899         this.totalWidth = null;
8900         this.fireEvent("hiddenchange", this, colIndex, hidden);
8901     },
8902
8903     /**
8904      * Sets the editor for a column.
8905      * @param {Number} col The column index
8906      * @param {Object} editor The editor object
8907      */
8908     setEditor : function(col, editor){
8909         this.config[col].editor = editor;
8910     },
8911     /**
8912      * Add a column (experimental...) - defaults to adding to the end..
8913      * @param {Object} config 
8914     */
8915     addColumn : function(c)
8916     {
8917     
8918         var i = this.config.length;
8919         this.config[i] = c;
8920         
8921         if(typeof c.dataIndex == "undefined"){
8922             c.dataIndex = i;
8923         }
8924         if(typeof c.renderer == "string"){
8925             c.renderer = Roo.util.Format[c.renderer];
8926         }
8927         if(typeof c.id == "undefined"){
8928             c.id = Roo.id();
8929         }
8930         if(c.editor && c.editor.xtype){
8931             c.editor  = Roo.factory(c.editor, Roo.grid);
8932         }
8933         if(c.editor && c.editor.isFormField){
8934             c.editor = new Roo.grid.GridEditor(c.editor);
8935         }
8936         this.lookup[c.id] = c;
8937     }
8938     
8939 });
8940
8941 Roo.grid.ColumnModel.defaultRenderer = function(value)
8942 {
8943     if(typeof value == "object") {
8944         return value;
8945     }
8946         if(typeof value == "string" && value.length < 1){
8947             return "&#160;";
8948         }
8949     
8950         return String.format("{0}", value);
8951 };
8952
8953 // Alias for backwards compatibility
8954 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
8955 /*
8956  * Based on:
8957  * Ext JS Library 1.1.1
8958  * Copyright(c) 2006-2007, Ext JS, LLC.
8959  *
8960  * Originally Released Under LGPL - original licence link has changed is not relivant.
8961  *
8962  * Fork - LGPL
8963  * <script type="text/javascript">
8964  */
8965  
8966 /**
8967  * @class Roo.LoadMask
8968  * A simple utility class for generically masking elements while loading data.  If the element being masked has
8969  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
8970  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
8971  * element's UpdateManager load indicator and will be destroyed after the initial load.
8972  * @constructor
8973  * Create a new LoadMask
8974  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
8975  * @param {Object} config The config object
8976  */
8977 Roo.LoadMask = function(el, config){
8978     this.el = Roo.get(el);
8979     Roo.apply(this, config);
8980     if(this.store){
8981         this.store.on('beforeload', this.onBeforeLoad, this);
8982         this.store.on('load', this.onLoad, this);
8983         this.store.on('loadexception', this.onLoadException, this);
8984         this.removeMask = false;
8985     }else{
8986         var um = this.el.getUpdateManager();
8987         um.showLoadIndicator = false; // disable the default indicator
8988         um.on('beforeupdate', this.onBeforeLoad, this);
8989         um.on('update', this.onLoad, this);
8990         um.on('failure', this.onLoad, this);
8991         this.removeMask = true;
8992     }
8993 };
8994
8995 Roo.LoadMask.prototype = {
8996     /**
8997      * @cfg {Boolean} removeMask
8998      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
8999      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
9000      */
9001     removeMask : false,
9002     /**
9003      * @cfg {String} msg
9004      * The text to display in a centered loading message box (defaults to 'Loading...')
9005      */
9006     msg : 'Loading...',
9007     /**
9008      * @cfg {String} msgCls
9009      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
9010      */
9011     msgCls : 'x-mask-loading',
9012
9013     /**
9014      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
9015      * @type Boolean
9016      */
9017     disabled: false,
9018
9019     /**
9020      * Disables the mask to prevent it from being displayed
9021      */
9022     disable : function(){
9023        this.disabled = true;
9024     },
9025
9026     /**
9027      * Enables the mask so that it can be displayed
9028      */
9029     enable : function(){
9030         this.disabled = false;
9031     },
9032     
9033     onLoadException : function()
9034     {
9035         Roo.log(arguments);
9036         
9037         if (typeof(arguments[3]) != 'undefined') {
9038             Roo.MessageBox.alert("Error loading",arguments[3]);
9039         } 
9040         /*
9041         try {
9042             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
9043                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
9044             }   
9045         } catch(e) {
9046             
9047         }
9048         */
9049     
9050         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9051     },
9052     // private
9053     onLoad : function()
9054     {
9055         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
9056     },
9057
9058     // private
9059     onBeforeLoad : function(){
9060         if(!this.disabled){
9061             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
9062         }
9063     },
9064
9065     // private
9066     destroy : function(){
9067         if(this.store){
9068             this.store.un('beforeload', this.onBeforeLoad, this);
9069             this.store.un('load', this.onLoad, this);
9070             this.store.un('loadexception', this.onLoadException, this);
9071         }else{
9072             var um = this.el.getUpdateManager();
9073             um.un('beforeupdate', this.onBeforeLoad, this);
9074             um.un('update', this.onLoad, this);
9075             um.un('failure', this.onLoad, this);
9076         }
9077     }
9078 };/**
9079  * @class Roo.bootstrap.Table
9080  * @licence LGBL
9081  * @extends Roo.bootstrap.Component
9082  * @children Roo.bootstrap.TableBody
9083  * Bootstrap Table class.  This class represents the primary interface of a component based grid control.
9084  * Similar to Roo.grid.Grid
9085  * <pre><code>
9086  var table = Roo.factory({
9087     xtype : 'Table',
9088     xns : Roo.bootstrap,
9089     autoSizeColumns: true,
9090     
9091     
9092     store : {
9093         xtype : 'Store',
9094         xns : Roo.data,
9095         remoteSort : true,
9096         sortInfo : { direction : 'ASC', field: 'name' },
9097         proxy : {
9098            xtype : 'HttpProxy',
9099            xns : Roo.data,
9100            method : 'GET',
9101            url : 'https://example.com/some.data.url.json'
9102         },
9103         reader : {
9104            xtype : 'JsonReader',
9105            xns : Roo.data,
9106            fields : [ 'id', 'name', whatever' ],
9107            id : 'id',
9108            root : 'data'
9109         }
9110     },
9111     cm : [
9112         {
9113             xtype : 'ColumnModel',
9114             xns : Roo.grid,
9115             align : 'center',
9116             cursor : 'pointer',
9117             dataIndex : 'is_in_group',
9118             header : "Name",
9119             sortable : true,
9120             renderer : function(v, x , r) {  
9121             
9122                 return String.format("{0}", v)
9123             }
9124             width : 3
9125         } // more columns..
9126     ],
9127     selModel : {
9128         xtype : 'RowSelectionModel',
9129         xns : Roo.bootstrap.Table
9130         // you can add listeners to catch selection change here....
9131     }
9132      
9133
9134  });
9135  // set any options
9136  grid.render(Roo.get("some-div"));
9137 </code></pre>
9138
9139 Currently the Table  uses multiple headers to try and handle XL / Medium etc... styling
9140
9141
9142
9143  *
9144  * @cfg {Roo.grid.AbstractSelectionModel} sm The selection model to use (cell selection is not supported yet)
9145  * @cfg {Roo.data.Store} store The data store to use
9146  * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
9147  * 
9148  * @cfg {String} cls table class
9149  *
9150  *
9151  * @cfg {string} empty_results  Text to display for no results 
9152  * @cfg {boolean} striped Should the rows be alternative striped
9153  * @cfg {boolean} bordered Add borders to the table
9154  * @cfg {boolean} hover Add hover highlighting
9155  * @cfg {boolean} condensed Format condensed
9156  * @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,
9157  *                also adds table-responsive (see bootstrap docs for details)
9158  * @cfg {Boolean} loadMask (true|false) default false
9159  * @cfg {Boolean} footerShow (true|false) generate tfoot, default true
9160  * @cfg {Boolean} footerRow (true|false) generate tfoot with columns of values, default false
9161  * @cfg {Boolean} headerShow (true|false) generate thead, default true
9162  * @cfg {Boolean} rowSelection (true|false) default false
9163  * @cfg {Boolean} cellSelection (true|false) default false
9164  * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header (with resizable columns)
9165  * @cfg {Roo.bootstrap.PagingToolbar} footer  a paging toolbar
9166  * @cfg {Boolean} lazyLoad  auto load data while scrolling to the end (default false)
9167  * @cfg {Boolean} auto_hide_footer  auto hide footer if only one page (default false)
9168  * @cfg {Boolean} enableColumnResize default true if columns can be resized = needs scrollBody to be set to work (drag/drop)
9169  * @cfg {Boolean} disableAutoSize disable autoSize() and initCSS()
9170  *
9171  * 
9172  * @cfg {Number} minColumnWidth default 50 pixels minimum column width 
9173  * 
9174  * @constructor
9175  * Create a new Table
9176  * @param {Object} config The config object
9177  */
9178
9179 Roo.bootstrap.Table = function(config)
9180 {
9181     Roo.bootstrap.Table.superclass.constructor.call(this, config);
9182      
9183     // BC...
9184     this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
9185     this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
9186     this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
9187     this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
9188     
9189     this.view = this; // compat with grid.
9190     
9191     this.sm = this.sm || {xtype: 'RowSelectionModel'};
9192     if (this.sm) {
9193         this.sm.grid = this;
9194         this.selModel = Roo.factory(this.sm, Roo.grid);
9195         this.sm = this.selModel;
9196         this.sm.xmodule = this.xmodule || false;
9197     }
9198     
9199     if (this.cm && typeof(this.cm.config) == 'undefined') {
9200         this.colModel = new Roo.grid.ColumnModel(this.cm);
9201         this.cm = this.colModel;
9202         this.cm.xmodule = this.xmodule || false;
9203     }
9204     if (this.store) {
9205         this.store= Roo.factory(this.store, Roo.data);
9206         this.ds = this.store;
9207         this.ds.xmodule = this.xmodule || false;
9208          
9209     }
9210     if (this.footer && this.store) {
9211         this.footer.dataSource = this.ds;
9212         this.footer = Roo.factory(this.footer);
9213     }
9214     
9215     /** @private */
9216     this.addEvents({
9217         /**
9218          * @event cellclick
9219          * Fires when a cell is clicked
9220          * @param {Roo.bootstrap.Table} this
9221          * @param {Roo.Element} el
9222          * @param {Number} rowIndex
9223          * @param {Number} columnIndex
9224          * @param {Roo.EventObject} e
9225          */
9226         "cellclick" : true,
9227         /**
9228          * @event celldblclick
9229          * Fires when a cell is double clicked
9230          * @param {Roo.bootstrap.Table} this
9231          * @param {Roo.Element} el
9232          * @param {Number} rowIndex
9233          * @param {Number} columnIndex
9234          * @param {Roo.EventObject} e
9235          */
9236         "celldblclick" : true,
9237         /**
9238          * @event rowclick
9239          * Fires when a row is clicked
9240          * @param {Roo.bootstrap.Table} this
9241          * @param {Roo.Element} el
9242          * @param {Number} rowIndex
9243          * @param {Roo.EventObject} e
9244          */
9245         "rowclick" : true,
9246         /**
9247          * @event rowdblclick
9248          * Fires when a row is double clicked
9249          * @param {Roo.bootstrap.Table} this
9250          * @param {Roo.Element} el
9251          * @param {Number} rowIndex
9252          * @param {Roo.EventObject} e
9253          */
9254         "rowdblclick" : true,
9255         /**
9256          * @event mouseover
9257          * Fires when a mouseover occur
9258          * @param {Roo.bootstrap.Table} this
9259          * @param {Roo.Element} el
9260          * @param {Number} rowIndex
9261          * @param {Number} columnIndex
9262          * @param {Roo.EventObject} e
9263          */
9264         "mouseover" : true,
9265         /**
9266          * @event mouseout
9267          * Fires when a mouseout occur
9268          * @param {Roo.bootstrap.Table} this
9269          * @param {Roo.Element} el
9270          * @param {Number} rowIndex
9271          * @param {Number} columnIndex
9272          * @param {Roo.EventObject} e
9273          */
9274         "mouseout" : true,
9275         /**
9276          * @event rowclass
9277          * Fires when a row is rendered, so you can change add a style to it.
9278          * @param {Roo.bootstrap.Table} this
9279          * @param {Object} rowcfg   contains record  rowIndex colIndex and rowClass - set rowClass to add a style.
9280          */
9281         'rowclass' : true,
9282           /**
9283          * @event rowsrendered
9284          * Fires when all the  rows have been rendered
9285          * @param {Roo.bootstrap.Table} this
9286          */
9287         'rowsrendered' : true,
9288         /**
9289          * @event contextmenu
9290          * The raw contextmenu event for the entire grid.
9291          * @param {Roo.EventObject} e
9292          */
9293         "contextmenu" : true,
9294         /**
9295          * @event rowcontextmenu
9296          * Fires when a row is right clicked
9297          * @param {Roo.bootstrap.Table} this
9298          * @param {Number} rowIndex
9299          * @param {Roo.EventObject} e
9300          */
9301         "rowcontextmenu" : true,
9302         /**
9303          * @event cellcontextmenu
9304          * Fires when a cell is right clicked
9305          * @param {Roo.bootstrap.Table} this
9306          * @param {Number} rowIndex
9307          * @param {Number} cellIndex
9308          * @param {Roo.EventObject} e
9309          */
9310          "cellcontextmenu" : true,
9311          /**
9312          * @event headercontextmenu
9313          * Fires when a header is right clicked
9314          * @param {Roo.bootstrap.Table} this
9315          * @param {Number} columnIndex
9316          * @param {Roo.EventObject} e
9317          */
9318         "headercontextmenu" : true,
9319         /**
9320          * @event mousedown
9321          * The raw mousedown event for the entire grid.
9322          * @param {Roo.EventObject} e
9323          */
9324         "mousedown" : true
9325         
9326     });
9327 };
9328
9329 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
9330     
9331     cls: false,
9332     
9333     empty_results : '',
9334     striped : false,
9335     scrollBody : false,
9336     bordered: false,
9337     hover:  false,
9338     condensed : false,
9339     responsive : false,
9340     sm : false,
9341     cm : false,
9342     store : false,
9343     loadMask : false,
9344     footerShow : true,
9345     footerRow : false,
9346     headerShow : true,
9347     enableColumnResize: true,
9348     disableAutoSize: false,
9349   
9350     rowSelection : false,
9351     cellSelection : false,
9352     layout : false,
9353
9354     minColumnWidth : 50,
9355     
9356     // Roo.Element - the tbody
9357     bodyEl: false,  // <tbody> Roo.Element - thead element    
9358     headEl: false,  // <thead> Roo.Element - thead element
9359     resizeProxy : false, // proxy element for dragging?
9360
9361
9362     
9363     container: false, // used by gridpanel...
9364     
9365     lazyLoad : false,
9366     
9367     CSS : Roo.util.CSS,
9368     
9369     auto_hide_footer : false,
9370     
9371     view: false, // actually points to this..
9372     
9373     getAutoCreate : function()
9374     {
9375         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
9376         
9377         cfg = {
9378             tag: 'table',
9379             cls : 'table', 
9380             cn : []
9381         };
9382         // this get's auto added by panel.Grid
9383         if (this.scrollBody) {
9384             cfg.cls += ' table-body-fixed';
9385         }    
9386         if (this.striped) {
9387             cfg.cls += ' table-striped';
9388         }
9389         
9390         if (this.hover) {
9391             cfg.cls += ' table-hover';
9392         }
9393         if (this.bordered) {
9394             cfg.cls += ' table-bordered';
9395         }
9396         if (this.condensed) {
9397             cfg.cls += ' table-condensed';
9398         }
9399         
9400         if (this.responsive) {
9401             cfg.cls += ' table-responsive';
9402         }
9403         
9404         if (this.cls) {
9405             cfg.cls+=  ' ' +this.cls;
9406         }
9407         
9408         
9409         
9410         if (this.layout) {
9411             cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
9412         }
9413         
9414         if(this.store || this.cm){
9415             if(this.headerShow){
9416                 cfg.cn.push(this.renderHeader());
9417             }
9418             
9419             cfg.cn.push(this.renderBody());
9420             
9421             if(this.footerShow || this.footerRow){
9422                 cfg.cn.push(this.renderFooter());
9423             }
9424
9425             // where does this come from?
9426             //cfg.cls+=  ' TableGrid';
9427         }
9428         
9429         return { cn : [ cfg ] };
9430     },
9431     
9432     initEvents : function()
9433     {   
9434         if(!this.store || !this.cm){
9435             return;
9436         }
9437         if (this.selModel) {
9438             this.selModel.initEvents();
9439         }
9440         
9441         
9442         //Roo.log('initEvents with ds!!!!');
9443         
9444         this.bodyEl = this.el.select('tbody', true).first();
9445         this.headEl = this.el.select('thead', true).first();
9446         this.mainFoot = this.el.select('tfoot', true).first();
9447         
9448         
9449         
9450         
9451         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
9452             e.on('click', this.sort, this);
9453         }, this);
9454         
9455         
9456         // why is this done????? = it breaks dialogs??
9457         //this.parent().el.setStyle('position', 'relative');
9458         
9459         
9460         if (this.footer) {
9461             this.footer.parentId = this.id;
9462             this.footer.onRender(this.el.select('tfoot tr td').first(), null);
9463             
9464             if(this.lazyLoad){
9465                 this.el.select('tfoot tr td').first().addClass('hide');
9466             }
9467         } 
9468         
9469         if(this.loadMask) {
9470             this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
9471         }
9472         
9473         this.store.on('load', this.onLoad, this);
9474         this.store.on('beforeload', this.onBeforeLoad, this);
9475         this.store.on('update', this.onUpdate, this);
9476         this.store.on('add', this.onAdd, this);
9477         this.store.on("clear", this.clear, this);
9478         
9479         this.el.on("contextmenu", this.onContextMenu, this);
9480         
9481         
9482         this.cm.on("headerchange", this.onHeaderChange, this);
9483         this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
9484
9485  //?? does bodyEl get replaced on render?
9486         this.bodyEl.on("click", this.onClick, this);
9487         this.bodyEl.on("dblclick", this.onDblClick, this);        
9488         this.bodyEl.on('scroll', this.onBodyScroll, this);
9489
9490         // guessing mainbody will work - this relays usually caught by selmodel at present.
9491         this.relayEvents(this.bodyEl, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
9492   
9493   
9494         this.resizeProxy = Roo.get(document.body).createChild({ cls:"x-grid-resize-proxy", html: '&#160;' });
9495         
9496   
9497         if(this.headEl && this.enableColumnResize !== false && Roo.grid.SplitDragZone){
9498             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
9499         }
9500         
9501         this.initCSS();
9502     },
9503     // Compatibility with grid - we implement all the view features at present.
9504     getView : function()
9505     {
9506         return this;
9507     },
9508     
9509     initCSS : function()
9510     {
9511         if(this.disableAutoSize) {
9512             return;
9513         }
9514         
9515         var cm = this.cm, styles = [];
9516         this.CSS.removeStyleSheet(this.id + '-cssrules');
9517         var headHeight = this.headEl ? this.headEl.dom.clientHeight : 0;
9518         // we can honour xs/sm/md/xl  as widths...
9519         // we first have to decide what widht we are currently at...
9520         var sz = Roo.getGridSize();
9521         
9522         var total = 0;
9523         var last = -1;
9524         var cols = []; // visable cols.
9525         var total_abs = 0;
9526         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9527             var w = cm.getColumnWidth(i, false);
9528             if(cm.isHidden(i)){
9529                 cols.push( { rel : false, abs : 0 });
9530                 continue;
9531             }
9532             if (w !== false) {
9533                 cols.push( { rel : false, abs : w });
9534                 total_abs += w;
9535                 last = i; // not really..
9536                 continue;
9537             }
9538             var w = cm.getColumnWidth(i, sz);
9539             if (w > 0) {
9540                 last = i
9541             }
9542             total += w;
9543             cols.push( { rel : w, abs : false });
9544         }
9545         
9546         var avail = this.bodyEl.dom.clientWidth - total_abs;
9547         
9548         var unitWidth = Math.floor(avail / total);
9549         var rem = avail - (unitWidth * total);
9550         
9551         var hidden, width, pos = 0 , splithide , left;
9552         for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
9553             
9554             hidden = 'display:none;';
9555             left = '';
9556             width  = 'width:0px;';
9557             splithide = '';
9558             if(!cm.isHidden(i)){
9559                 hidden = '';
9560                 
9561                 
9562                 // we can honour xs/sm/md/xl ?
9563                 var w = cols[i].rel == false ? cols[i].abs : (cols[i].rel * unitWidth);
9564                 if (w===0) {
9565                     hidden = 'display:none;';
9566                 }
9567                 // width should return a small number...
9568                 if (i == last) {
9569                     w+=rem; // add the remaining with..
9570                 }
9571                 pos += w;
9572                 left = "left:" + (pos -4) + "px;";
9573                 width = "width:" + w+ "px;";
9574                 
9575             }
9576             if (this.responsive) {
9577                 width = '';
9578                 left = '';
9579                 hidden = cm.isHidden(i) ? 'display:none;' : '';
9580                 splithide = 'display: none;';
9581             }
9582             
9583             styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" );
9584             if (this.headEl) {
9585                 if (i == last) {
9586                     splithide = 'display:none;';
9587                 }
9588                 
9589                 styles.push('#' , this.id , ' .x-hcol-' , i, " { ", width, hidden," }\n",
9590                             '#' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', (headHeight - 4), "px;}\n",
9591                             // this is the popover version..
9592                             '.popover-inner #' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', 100, "%;}\n"
9593                 );
9594             }
9595             
9596         }
9597         //Roo.log(styles.join(''));
9598         this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
9599         
9600     },
9601     
9602     
9603     
9604     onContextMenu : function(e, t)
9605     {
9606         this.processEvent("contextmenu", e);
9607     },
9608     
9609     processEvent : function(name, e)
9610     {
9611         if (name != 'touchstart' ) {
9612             this.fireEvent(name, e);    
9613         }
9614         
9615         var t = e.getTarget();
9616         
9617         var cell = Roo.get(t);
9618         
9619         if(!cell){
9620             return;
9621         }
9622         
9623         if(cell.findParent('tfoot', false, true)){
9624             return;
9625         }
9626         
9627         if(cell.findParent('thead', false, true)){
9628             
9629             if(e.getTarget().nodeName.toLowerCase() != 'th'){
9630                 cell = Roo.get(t).findParent('th', false, true);
9631                 if (!cell) {
9632                     Roo.log("failed to find th in thead?");
9633                     Roo.log(e.getTarget());
9634                     return;
9635                 }
9636             }
9637             
9638             var cellIndex = cell.dom.cellIndex;
9639             
9640             var ename = name == 'touchstart' ? 'click' : name;
9641             this.fireEvent("header" + ename, this, cellIndex, e);
9642             
9643             return;
9644         }
9645         
9646         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9647             cell = Roo.get(t).findParent('td', false, true);
9648             if (!cell) {
9649                 Roo.log("failed to find th in tbody?");
9650                 Roo.log(e.getTarget());
9651                 return;
9652             }
9653         }
9654         
9655         var row = cell.findParent('tr', false, true);
9656         var cellIndex = cell.dom.cellIndex;
9657         var rowIndex = row.dom.rowIndex - 1;
9658         
9659         if(row !== false){
9660             
9661             this.fireEvent("row" + name, this, rowIndex, e);
9662             
9663             if(cell !== false){
9664             
9665                 this.fireEvent("cell" + name, this, rowIndex, cellIndex, e);
9666             }
9667         }
9668         
9669     },
9670     
9671     onMouseover : function(e, el)
9672     {
9673         var cell = Roo.get(el);
9674         
9675         if(!cell){
9676             return;
9677         }
9678         
9679         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9680             cell = cell.findParent('td', false, true);
9681         }
9682         
9683         var row = cell.findParent('tr', false, true);
9684         var cellIndex = cell.dom.cellIndex;
9685         var rowIndex = row.dom.rowIndex - 1; // start from 0
9686         
9687         this.fireEvent('mouseover', this, cell, rowIndex, cellIndex, e);
9688         
9689     },
9690     
9691     onMouseout : function(e, el)
9692     {
9693         var cell = Roo.get(el);
9694         
9695         if(!cell){
9696             return;
9697         }
9698         
9699         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9700             cell = cell.findParent('td', false, true);
9701         }
9702         
9703         var row = cell.findParent('tr', false, true);
9704         var cellIndex = cell.dom.cellIndex;
9705         var rowIndex = row.dom.rowIndex - 1; // start from 0
9706         
9707         this.fireEvent('mouseout', this, cell, rowIndex, cellIndex, e);
9708         
9709     },
9710     
9711     onClick : function(e, el)
9712     {
9713         var cell = Roo.get(el);
9714         
9715         if(!cell || (!this.cellSelection && !this.rowSelection)){
9716             return;
9717         }
9718         
9719         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9720             cell = cell.findParent('td', false, true);
9721         }
9722         
9723         if(!cell || typeof(cell) == 'undefined'){
9724             return;
9725         }
9726         
9727         var row = cell.findParent('tr', false, true);
9728         
9729         if(!row || typeof(row) == 'undefined'){
9730             return;
9731         }
9732         
9733         var cellIndex = cell.dom.cellIndex;
9734         var rowIndex = this.getRowIndex(row);
9735         
9736         // why??? - should these not be based on SelectionModel?
9737         //if(this.cellSelection){
9738             this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
9739         //}
9740         
9741         //if(this.rowSelection){
9742             this.fireEvent('rowclick', this, row, rowIndex, e);
9743         //}
9744          
9745     },
9746         
9747     onDblClick : function(e,el)
9748     {
9749         var cell = Roo.get(el);
9750         
9751         if(!cell || (!this.cellSelection && !this.rowSelection)){
9752             return;
9753         }
9754         
9755         if(e.getTarget().nodeName.toLowerCase() != 'td'){
9756             cell = cell.findParent('td', false, true);
9757         }
9758         
9759         if(!cell || typeof(cell) == 'undefined'){
9760             return;
9761         }
9762         
9763         var row = cell.findParent('tr', false, true);
9764         
9765         if(!row || typeof(row) == 'undefined'){
9766             return;
9767         }
9768         
9769         var cellIndex = cell.dom.cellIndex;
9770         var rowIndex = this.getRowIndex(row);
9771         
9772         if(this.cellSelection){
9773             this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
9774         }
9775         
9776         if(this.rowSelection){
9777             this.fireEvent('rowdblclick', this, row, rowIndex, e);
9778         }
9779     },
9780     findRowIndex : function(el)
9781     {
9782         var cell = Roo.get(el);
9783         if(!cell) {
9784             return false;
9785         }
9786         var row = cell.findParent('tr', false, true);
9787         
9788         if(!row || typeof(row) == 'undefined'){
9789             return false;
9790         }
9791         return this.getRowIndex(row);
9792     },
9793     sort : function(e,el)
9794     {
9795         var col = Roo.get(el);
9796         
9797         if(!col.hasClass('sortable')){
9798             return;
9799         }
9800         
9801         var sort = col.attr('sort');
9802         var dir = 'ASC';
9803         
9804         if(col.select('i', true).first().hasClass('fa-arrow-up')){
9805             dir = 'DESC';
9806         }
9807         
9808         this.store.sortInfo = {field : sort, direction : dir};
9809         
9810         if (this.footer) {
9811             Roo.log("calling footer first");
9812             this.footer.onClick('first');
9813         } else {
9814         
9815             this.store.load({ params : { start : 0 } });
9816         }
9817     },
9818     
9819     renderHeader : function()
9820     {
9821         var header = {
9822             tag: 'thead',
9823             cn : []
9824         };
9825         
9826         var cm = this.cm;
9827         this.totalWidth = 0;
9828         
9829         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
9830             
9831             var config = cm.config[i];
9832             
9833             var c = {
9834                 tag: 'th',
9835                 cls : 'x-hcol-' + i,
9836                 style : '',
9837                 
9838                 html: cm.getColumnHeader(i)
9839             };
9840             
9841             var tooltip = cm.getColumnTooltip(i);
9842             if (tooltip) {
9843                 c.tooltip = tooltip;
9844             }
9845             
9846             
9847             var hh = '';
9848             
9849             if(typeof(config.sortable) != 'undefined' && config.sortable){
9850                 c.cls += ' sortable';
9851                 c.html = '<i class="fa"></i>' + c.html;
9852             }
9853             
9854             // could use BS4 hidden-..-down 
9855             
9856             if(typeof(config.lgHeader) != 'undefined'){
9857                 hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
9858             }
9859             
9860             if(typeof(config.mdHeader) != 'undefined'){
9861                 hh += '<span class="hidden-xs hidden-sm hidden-lg">' + config.mdHeader + '</span>';
9862             }
9863             
9864             if(typeof(config.smHeader) != 'undefined'){
9865                 hh += '<span class="hidden-xs hidden-md hidden-lg">' + config.smHeader + '</span>';
9866             }
9867             
9868             if(typeof(config.xsHeader) != 'undefined'){
9869                 hh += '<span class="hidden-sm hidden-md hidden-lg">' + config.xsHeader + '</span>';
9870             }
9871             
9872             if(hh.length){
9873                 c.html = hh;
9874             }
9875             
9876             if(typeof(config.tooltip) != 'undefined'){
9877                 c.tooltip = config.tooltip;
9878             }
9879             
9880             if(typeof(config.colspan) != 'undefined'){
9881                 c.colspan = config.colspan;
9882             }
9883             
9884             // hidden is handled by CSS now
9885             
9886             if(typeof(config.dataIndex) != 'undefined'){
9887                 c.sort = config.dataIndex;
9888             }
9889             
9890            
9891             
9892             if(typeof(config.align) != 'undefined' && config.align.length){
9893                 c.style += ' text-align:' + config.align + ';';
9894             }
9895             
9896             /* width is done in CSS
9897              *if(typeof(config.width) != 'undefined'){
9898                 c.style += ' width:' + config.width + 'px;';
9899                 this.totalWidth += config.width;
9900             } else {
9901                 this.totalWidth += 100; // assume minimum of 100 per column?
9902             }
9903             */
9904             
9905             if(typeof(config.cls) != 'undefined'){
9906                 c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
9907             }
9908             // this is the bit that doesnt reall work at all...
9909             
9910             if (this.responsive) {
9911                  
9912             
9913                 ['xs','sm','md','lg'].map(function(size){
9914                     
9915                     if(typeof(config[size]) == 'undefined'){
9916                         return;
9917                     }
9918                      
9919                     if (!config[size]) { // 0 = hidden
9920                         // BS 4 '0' is treated as hide that column and below.
9921                         c.cls += ' hidden-' + size + ' hidden' + size + '-down';
9922                         return;
9923                     }
9924                     
9925                     c.cls += ' col-' + size + '-' + config[size] + (
9926                         size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
9927                     );
9928                     
9929                     
9930                 });
9931             }
9932             // at the end?
9933             
9934             c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
9935             
9936             
9937             
9938             
9939             header.cn.push(c)
9940         }
9941         
9942         return header;
9943     },
9944     
9945     renderBody : function()
9946     {
9947         var body = {
9948             tag: 'tbody',
9949             cn : [
9950                 {
9951                     tag: 'tr',
9952                     cn : [
9953                         {
9954                             tag : 'td',
9955                             colspan :  this.cm.getColumnCount()
9956                         }
9957                     ]
9958                 }
9959             ]
9960         };
9961         
9962         return body;
9963     },
9964     
9965     renderFooter : function()
9966     {
9967         var footer = {
9968             tag: 'tfoot',
9969             cn : [
9970                 {
9971                     tag: 'tr',
9972                     cn : [
9973                         {
9974                             tag : 'td',
9975                             colspan :  this.cm.getColumnCount()
9976                         }
9977                     ]
9978                 }
9979             ]
9980         };
9981         
9982         return footer;
9983     },
9984     
9985     onLoad : function()
9986     {
9987 //        Roo.log('ds onload');
9988         this.clear();
9989         
9990         var _this = this;
9991         var cm = this.cm;
9992         var ds = this.store;
9993         
9994         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
9995             e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
9996             if (_this.store.sortInfo) {
9997                     
9998                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
9999                     e.select('i', true).addClass(['fa-arrow-up']);
10000                 }
10001                 
10002                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
10003                     e.select('i', true).addClass(['fa-arrow-down']);
10004                 }
10005             }
10006         });
10007         
10008         var tbody =  this.bodyEl;
10009               
10010         if(ds.getCount() > 0){
10011             ds.data.each(function(d,rowIndex){
10012                 var row =  this.renderRow(cm, ds, rowIndex);
10013                 
10014                 tbody.createChild(row);
10015                 
10016                 var _this = this;
10017                 
10018                 if(row.cellObjects.length){
10019                     Roo.each(row.cellObjects, function(r){
10020                         _this.renderCellObject(r);
10021                     })
10022                 }
10023                 
10024             }, this);
10025         } else if (this.empty_results.length) {
10026             this.el.mask(this.empty_results, 'no-spinner');
10027         }
10028         
10029         var tfoot = this.el.select('tfoot', true).first();
10030         
10031         if(this.footerShow && !this.footerRow && this.auto_hide_footer && this.mainFoot){
10032             
10033             this.mainFoot.setVisibilityMode(Roo.Element.DISPLAY).hide();
10034             
10035             var total = this.ds.getTotalCount();
10036             
10037             if(this.footer.pageSize < total){
10038                 this.mainFoot.show();
10039             }
10040         }
10041
10042         if(!this.footerShow && this.footerRow) {
10043
10044             var tr = {
10045                 tag : 'tr',
10046                 cn : []
10047             };
10048
10049             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
10050                 var footer = typeof(cm.config[i].footer) == "function" ? cm.config[i].footer(ds, cm.config[i]) : cm.config[i].footer;
10051                 var td = {
10052                     tag: 'td',
10053                     cls : ' x-fcol-' + i,
10054                     html: footer
10055                 };
10056
10057                 tr.cn.push(td);
10058                 
10059             }
10060             
10061             tfoot.dom.innerHTML = '';
10062
10063             tfoot.createChild(tr);
10064         }
10065         
10066         Roo.each(this.el.select('tbody td', true).elements, function(e){
10067             e.on('mouseover', _this.onMouseover, _this);
10068         });
10069         
10070         Roo.each(this.el.select('tbody td', true).elements, function(e){
10071             e.on('mouseout', _this.onMouseout, _this);
10072         });
10073         this.fireEvent('rowsrendered', this);
10074         
10075         this.autoSize();
10076         
10077         this.initCSS(); /// resize cols
10078
10079         
10080     },
10081     
10082     
10083     onUpdate : function(ds,record)
10084     {
10085         this.refreshRow(record);
10086         this.autoSize();
10087     },
10088     
10089     onRemove : function(ds, record, index, isUpdate){
10090         if(isUpdate !== true){
10091             this.fireEvent("beforerowremoved", this, index, record);
10092         }
10093         var bt = this.bodyEl.dom;
10094         
10095         var rows = this.el.select('tbody > tr', true).elements;
10096         
10097         if(typeof(rows[index]) != 'undefined'){
10098             bt.removeChild(rows[index].dom);
10099         }
10100         
10101 //        if(bt.rows[index]){
10102 //            bt.removeChild(bt.rows[index]);
10103 //        }
10104         
10105         if(isUpdate !== true){
10106             //this.stripeRows(index);
10107             //this.syncRowHeights(index, index);
10108             //this.layout();
10109             this.fireEvent("rowremoved", this, index, record);
10110         }
10111     },
10112     
10113     onAdd : function(ds, records, rowIndex)
10114     {
10115         //Roo.log('on Add called');
10116         // - note this does not handle multiple adding very well..
10117         var bt = this.bodyEl.dom;
10118         for (var i =0 ; i < records.length;i++) {
10119             //Roo.log('call insert row Add called on ' + rowIndex + ':' + i);
10120             //Roo.log(records[i]);
10121             //Roo.log(this.store.getAt(rowIndex+i));
10122             this.insertRow(this.store, rowIndex + i, false);
10123             return;
10124         }
10125         
10126     },
10127     
10128     
10129     refreshRow : function(record){
10130         var ds = this.store, index;
10131         if(typeof record == 'number'){
10132             index = record;
10133             record = ds.getAt(index);
10134         }else{
10135             index = ds.indexOf(record);
10136             if (index < 0) {
10137                 return; // should not happen - but seems to 
10138             }
10139         }
10140         this.insertRow(ds, index, true);
10141         this.autoSize();
10142         this.onRemove(ds, record, index+1, true);
10143         this.autoSize();
10144         //this.syncRowHeights(index, index);
10145         //this.layout();
10146         this.fireEvent("rowupdated", this, index, record);
10147     },
10148     // private - called by RowSelection
10149     onRowSelect : function(rowIndex){
10150         var row = this.getRowDom(rowIndex);
10151         row.addClass(['bg-info','info']);
10152     },
10153     // private - called by RowSelection
10154     onRowDeselect : function(rowIndex)
10155     {
10156         if (rowIndex < 0) {
10157             return;
10158         }
10159         var row = this.getRowDom(rowIndex);
10160         row.removeClass(['bg-info','info']);
10161     },
10162       /**
10163      * Focuses the specified row.
10164      * @param {Number} row The row index
10165      */
10166     focusRow : function(row)
10167     {
10168         //Roo.log('GridView.focusRow');
10169         var x = this.bodyEl.dom.scrollLeft;
10170         this.focusCell(row, 0, false);
10171         this.bodyEl.dom.scrollLeft = x;
10172
10173     },
10174      /**
10175      * Focuses the specified cell.
10176      * @param {Number} row The row index
10177      * @param {Number} col The column index
10178      * @param {Boolean} hscroll false to disable horizontal scrolling
10179      */
10180     focusCell : function(row, col, hscroll)
10181     {
10182         //Roo.log('GridView.focusCell');
10183         var el = this.ensureVisible(row, col, hscroll);
10184         // not sure what focusEL achives = it's a <a> pos relative 
10185         //this.focusEl.alignTo(el, "tl-tl");
10186         //if(Roo.isGecko){
10187         //    this.focusEl.focus();
10188         //}else{
10189         //    this.focusEl.focus.defer(1, this.focusEl);
10190         //}
10191     },
10192     
10193      /**
10194      * Scrolls the specified cell into view
10195      * @param {Number} row The row index
10196      * @param {Number} col The column index
10197      * @param {Boolean} hscroll false to disable horizontal scrolling
10198      */
10199     ensureVisible : function(row, col, hscroll)
10200     {
10201         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
10202         //return null; //disable for testing.
10203         if(typeof row != "number"){
10204             row = row.rowIndex;
10205         }
10206         if(row < 0 && row >= this.ds.getCount()){
10207             return  null;
10208         }
10209         col = (col !== undefined ? col : 0);
10210         var cm = this.cm;
10211         while(cm.isHidden(col)){
10212             col++;
10213         }
10214
10215         var el = this.getCellDom(row, col);
10216         if(!el){
10217             return null;
10218         }
10219         var c = this.bodyEl.dom;
10220
10221         var ctop = parseInt(el.offsetTop, 10);
10222         var cleft = parseInt(el.offsetLeft, 10);
10223         var cbot = ctop + el.offsetHeight;
10224         var cright = cleft + el.offsetWidth;
10225
10226         //var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
10227         var ch = 0; //?? header is not withing the area?
10228         var stop = parseInt(c.scrollTop, 10);
10229         var sleft = parseInt(c.scrollLeft, 10);
10230         var sbot = stop + ch;
10231         var sright = sleft + c.clientWidth;
10232         /*
10233         Roo.log('GridView.ensureVisible:' +
10234                 ' ctop:' + ctop +
10235                 ' c.clientHeight:' + c.clientHeight +
10236                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
10237                 ' stop:' + stop +
10238                 ' cbot:' + cbot +
10239                 ' sbot:' + sbot +
10240                 ' ch:' + ch  
10241                 );
10242         */
10243         if(ctop < stop){
10244             c.scrollTop = ctop;
10245             //Roo.log("set scrolltop to ctop DISABLE?");
10246         }else if(cbot > sbot){
10247             //Roo.log("set scrolltop to cbot-ch");
10248             c.scrollTop = cbot-ch;
10249         }
10250
10251         if(hscroll !== false){
10252             if(cleft < sleft){
10253                 c.scrollLeft = cleft;
10254             }else if(cright > sright){
10255                 c.scrollLeft = cright-c.clientWidth;
10256             }
10257         }
10258
10259         return el;
10260     },
10261     
10262     
10263     insertRow : function(dm, rowIndex, isUpdate){
10264         
10265         if(!isUpdate){
10266             this.fireEvent("beforerowsinserted", this, rowIndex);
10267         }
10268             //var s = this.getScrollState();
10269         var row = this.renderRow(this.cm, this.store, rowIndex);
10270         // insert before rowIndex..
10271         var e = this.bodyEl.createChild(row,this.getRowDom(rowIndex));
10272         
10273         var _this = this;
10274                 
10275         if(row.cellObjects.length){
10276             Roo.each(row.cellObjects, function(r){
10277                 _this.renderCellObject(r);
10278             })
10279         }
10280             
10281         if(!isUpdate){
10282             this.fireEvent("rowsinserted", this, rowIndex);
10283             //this.syncRowHeights(firstRow, lastRow);
10284             //this.stripeRows(firstRow);
10285             //this.layout();
10286         }
10287         
10288     },
10289     
10290     
10291     getRowDom : function(rowIndex)
10292     {
10293         var rows = this.el.select('tbody > tr', true).elements;
10294         
10295         return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
10296         
10297     },
10298     getCellDom : function(rowIndex, colIndex)
10299     {
10300         var row = this.getRowDom(rowIndex);
10301         if (row === false) {
10302             return false;
10303         }
10304         var cols = row.select('td', true).elements;
10305         return (typeof(cols[colIndex]) == 'undefined') ? false : cols[colIndex];
10306         
10307     },
10308     
10309     // returns the object tree for a tr..
10310   
10311     
10312     renderRow : function(cm, ds, rowIndex) 
10313     {
10314         var d = ds.getAt(rowIndex);
10315         
10316         var row = {
10317             tag : 'tr',
10318             cls : 'x-row-' + rowIndex,
10319             cn : []
10320         };
10321             
10322         var cellObjects = [];
10323         
10324         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
10325             var config = cm.config[i];
10326             
10327             var renderer = cm.getRenderer(i);
10328             var value = '';
10329             var id = false;
10330             
10331             if(typeof(renderer) !== 'undefined'){
10332                 value = renderer(d.data[cm.getDataIndex(i)], false, d);
10333             }
10334             // if object are returned, then they are expected to be Roo.bootstrap.Component instances
10335             // and are rendered into the cells after the row is rendered - using the id for the element.
10336             
10337             if(typeof(value) === 'object'){
10338                 id = Roo.id();
10339                 cellObjects.push({
10340                     container : id,
10341                     cfg : value 
10342                 })
10343             }
10344             
10345             var rowcfg = {
10346                 record: d,
10347                 rowIndex : rowIndex,
10348                 colIndex : i,
10349                 rowClass : ''
10350             };
10351
10352             this.fireEvent('rowclass', this, rowcfg);
10353             
10354             var td = {
10355                 tag: 'td',
10356                 // this might end up displaying HTML?
10357                 // this is too messy... - better to only do it on columsn you know are going to be too long
10358                 //tooltip : (typeof(value) === 'object') ? '' : value,
10359                 cls : rowcfg.rowClass + ' x-col-' + i,
10360                 style: '',
10361                 html: (typeof(value) === 'object') ? '' : value
10362             };
10363             
10364             if (id) {
10365                 td.id = id;
10366             }
10367             
10368             if(typeof(config.colspan) != 'undefined'){
10369                 td.colspan = config.colspan;
10370             }
10371             
10372             
10373             
10374             if(typeof(config.align) != 'undefined' && config.align.length){
10375                 td.style += ' text-align:' + config.align + ';';
10376             }
10377             if(typeof(config.valign) != 'undefined' && config.valign.length){
10378                 td.style += ' vertical-align:' + config.valign + ';';
10379             }
10380             /*
10381             if(typeof(config.width) != 'undefined'){
10382                 td.style += ' width:' +  config.width + 'px;';
10383             }
10384             */
10385             
10386             if(typeof(config.cursor) != 'undefined'){
10387                 td.style += ' cursor:' +  config.cursor + ';';
10388             }
10389             
10390             if(typeof(config.cls) != 'undefined'){
10391                 td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
10392             }
10393             if (this.responsive) {
10394                 ['xs','sm','md','lg'].map(function(size){
10395                     
10396                     if(typeof(config[size]) == 'undefined'){
10397                         return;
10398                     }
10399                     
10400                     
10401                       
10402                     if (!config[size]) { // 0 = hidden
10403                         // BS 4 '0' is treated as hide that column and below.
10404                         td.cls += ' hidden-' + size + ' hidden' + size + '-down';
10405                         return;
10406                     }
10407                     
10408                     td.cls += ' col-' + size + '-' + config[size] + (
10409                         size == 'xs' ? (' col-' +   config[size] ) : '' // bs4 col-{num} replaces col-xs
10410                     );
10411                      
10412     
10413                 });
10414             }
10415             row.cn.push(td);
10416            
10417         }
10418         
10419         row.cellObjects = cellObjects;
10420         
10421         return row;
10422           
10423     },
10424     
10425     
10426     
10427     onBeforeLoad : function()
10428     {
10429         this.el.unmask(); // if needed.
10430     },
10431      /**
10432      * Remove all rows
10433      */
10434     clear : function()
10435     {
10436         this.el.select('tbody', true).first().dom.innerHTML = '';
10437     },
10438     /**
10439      * Show or hide a row.
10440      * @param {Number} rowIndex to show or hide
10441      * @param {Boolean} state hide
10442      */
10443     setRowVisibility : function(rowIndex, state)
10444     {
10445         var bt = this.bodyEl.dom;
10446         
10447         var rows = this.el.select('tbody > tr', true).elements;
10448         
10449         if(typeof(rows[rowIndex]) == 'undefined'){
10450             return;
10451         }
10452         rows[rowIndex][ state ? 'removeClass' : 'addClass']('d-none');
10453         
10454     },
10455     
10456     
10457     getSelectionModel : function(){
10458         if(!this.selModel){
10459             this.selModel = new Roo.bootstrap.Table.RowSelectionModel({grid: this});
10460         }
10461         return this.selModel;
10462     },
10463     /*
10464      * Render the Roo.bootstrap object from renderder
10465      */
10466     renderCellObject : function(r)
10467     {
10468         var _this = this;
10469         
10470         r.cfg.parentId = (typeof(r.container) == 'string') ? r.container : r.container.id;
10471         
10472         var t = r.cfg.render(r.container);
10473         
10474         if(r.cfg.cn){
10475             Roo.each(r.cfg.cn, function(c){
10476                 var child = {
10477                     container: t.getChildContainer(),
10478                     cfg: c
10479                 };
10480                 _this.renderCellObject(child);
10481             })
10482         }
10483     },
10484     /**
10485      * get the Row Index from a dom element.
10486      * @param {Roo.Element} row The row to look for
10487      * @returns {Number} the row
10488      */
10489     getRowIndex : function(row)
10490     {
10491         var rowIndex = -1;
10492         
10493         Roo.each(this.el.select('tbody > tr', true).elements, function(el, index){
10494             if(el != row){
10495                 return;
10496             }
10497             
10498             rowIndex = index;
10499         });
10500         
10501         return rowIndex;
10502     },
10503     /**
10504      * get the header TH element for columnIndex
10505      * @param {Number} columnIndex
10506      * @returns {Roo.Element}
10507      */
10508     getHeaderIndex: function(colIndex)
10509     {
10510         var cols = this.headEl.select('th', true).elements;
10511         return cols[colIndex]; 
10512     },
10513     /**
10514      * get the Column Index from a dom element. (using regex on x-hcol-{colid})
10515      * @param {domElement} cell to look for
10516      * @returns {Number} the column
10517      */
10518     getCellIndex : function(cell)
10519     {
10520         var id = String(cell.className).match(Roo.bootstrap.Table.cellRE);
10521         if(id){
10522             return parseInt(id[1], 10);
10523         }
10524         return 0;
10525     },
10526      /**
10527      * Returns the grid's underlying element = used by panel.Grid
10528      * @return {Element} The element
10529      */
10530     getGridEl : function(){
10531         return this.el;
10532     },
10533      /**
10534      * Forces a resize - used by panel.Grid
10535      * @return {Element} The element
10536      */
10537     autoSize : function()
10538     {
10539         if(this.disableAutoSize) {
10540             return;
10541         }
10542         //var ctr = Roo.get(this.container.dom.parentElement);
10543         var ctr = Roo.get(this.el.dom);
10544         
10545         var thd = this.getGridEl().select('thead',true).first();
10546         var tbd = this.getGridEl().select('tbody', true).first();
10547         var tfd = this.getGridEl().select('tfoot', true).first();
10548         
10549         var cw = ctr.getWidth();
10550         this.getGridEl().select('tfoot tr, tfoot  td',true).setWidth(cw);
10551         
10552         if (tbd) {
10553             
10554             tbd.setWidth(ctr.getWidth());
10555             // if the body has a max height - and then scrolls - we should perhaps set up the height here
10556             // this needs fixing for various usage - currently only hydra job advers I think..
10557             //tdb.setHeight(
10558             //        ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
10559             //); 
10560             var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
10561             cw -= barsize;
10562         }
10563         cw = Math.max(cw, this.totalWidth);
10564         this.getGridEl().select('tbody tr',true).setWidth(cw);
10565         this.initCSS();
10566         
10567         // resize 'expandable coloumn?
10568         
10569         return; // we doe not have a view in this design..
10570         
10571     },
10572     onBodyScroll: function()
10573     {
10574         //Roo.log("body scrolled');" + this.bodyEl.dom.scrollLeft);
10575         if(this.headEl){
10576             this.headEl.setStyle({
10577                 'position' : 'relative',
10578                 'left': (-1* this.bodyEl.dom.scrollLeft) + 'px'
10579             });
10580         }
10581         
10582         if(this.lazyLoad){
10583             
10584             var scrollHeight = this.bodyEl.dom.scrollHeight;
10585             
10586             var scrollTop = Math.ceil(this.bodyEl.getScroll().top);
10587             
10588             var height = this.bodyEl.getHeight();
10589             
10590             if(scrollHeight - height == scrollTop) {
10591                 
10592                 var total = this.ds.getTotalCount();
10593                 
10594                 if(this.footer.cursor + this.footer.pageSize < total){
10595                     
10596                     this.footer.ds.load({
10597                         params : {
10598                             start : this.footer.cursor + this.footer.pageSize,
10599                             limit : this.footer.pageSize
10600                         },
10601                         add : true
10602                     });
10603                 }
10604             }
10605             
10606         }
10607     },
10608     onColumnSplitterMoved : function(i, diff)
10609     {
10610         this.userResized = true;
10611         
10612         var cm = this.colModel;
10613         
10614         var w = this.getHeaderIndex(i).getWidth() + diff;
10615         
10616         
10617         cm.setColumnWidth(i, w, true);
10618         this.initCSS();
10619         //var cid = cm.getColumnId(i); << not used in this version?
10620        /* Roo.log(['#' + this.id + ' .x-col-' + i, "width", w + "px"]);
10621         
10622         this.CSS.updateRule( '#' + this.id + ' .x-col-' + i, "width", w + "px");
10623         this.CSS.updateRule('#' + this.id + ' .x-hcol-' + i, "width", w + "px");
10624         this.CSS.updateRule('#' + this.id + ' .x-grid-split-' + i, "left", w + "px");
10625 */
10626         //this.updateSplitters();
10627         //this.layout(); << ??
10628         this.fireEvent("columnresize", i, w);
10629     },
10630     onHeaderChange : function()
10631     {
10632         var header = this.renderHeader();
10633         var table = this.el.select('table', true).first();
10634         
10635         this.headEl.remove();
10636         this.headEl = table.createChild(header, this.bodyEl, false);
10637         
10638         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
10639             e.on('click', this.sort, this);
10640         }, this);
10641         
10642         if(this.enableColumnResize !== false && Roo.grid.SplitDragZone){
10643             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
10644         }
10645         
10646     },
10647     
10648     onHiddenChange : function(colModel, colIndex, hidden)
10649     {
10650         /*
10651         this.cm.setHidden()
10652         var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
10653         var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
10654         
10655         this.CSS.updateRule(thSelector, "display", "");
10656         this.CSS.updateRule(tdSelector, "display", "");
10657         
10658         if(hidden){
10659             this.CSS.updateRule(thSelector, "display", "none");
10660             this.CSS.updateRule(tdSelector, "display", "none");
10661         }
10662         */
10663         // onload calls initCSS()
10664         this.onHeaderChange();
10665         this.onLoad();
10666     },
10667     
10668     setColumnWidth: function(col_index, width)
10669     {
10670         // width = "md-2 xs-2..."
10671         if(!this.colModel.config[col_index]) {
10672             return;
10673         }
10674         
10675         var w = width.split(" ");
10676         
10677         var rows = this.el.dom.getElementsByClassName("x-col-"+col_index);
10678         
10679         var h_row = this.el.dom.getElementsByClassName("x-hcol-"+col_index);
10680         
10681         
10682         for(var j = 0; j < w.length; j++) {
10683             
10684             if(!w[j]) {
10685                 continue;
10686             }
10687             
10688             var size_cls = w[j].split("-");
10689             
10690             if(!Number.isInteger(size_cls[1] * 1)) {
10691                 continue;
10692             }
10693             
10694             if(!this.colModel.config[col_index][size_cls[0]]) {
10695                 continue;
10696             }
10697             
10698             if(!h_row[0].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10699                 continue;
10700             }
10701             
10702             h_row[0].classList.replace(
10703                 "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10704                 "col-"+size_cls[0]+"-"+size_cls[1]
10705             );
10706             
10707             for(var i = 0; i < rows.length; i++) {
10708                 
10709                 var size_cls = w[j].split("-");
10710                 
10711                 if(!Number.isInteger(size_cls[1] * 1)) {
10712                     continue;
10713                 }
10714                 
10715                 if(!this.colModel.config[col_index][size_cls[0]]) {
10716                     continue;
10717                 }
10718                 
10719                 if(!rows[i].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
10720                     continue;
10721                 }
10722                 
10723                 rows[i].classList.replace(
10724                     "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
10725                     "col-"+size_cls[0]+"-"+size_cls[1]
10726                 );
10727             }
10728             
10729             this.colModel.config[col_index][size_cls[0]] = size_cls[1];
10730         }
10731     }
10732 });
10733
10734 // currently only used to find the split on drag.. 
10735 Roo.bootstrap.Table.cellRE = /(?:.*?)x-grid-(?:hd|cell|split)-([\d]+)(?:.*?)/;
10736
10737 /**
10738  * @depricated
10739 */
10740 Roo.bootstrap.Table.AbstractSelectionModel = Roo.grid.AbstractSelectionModel;
10741 Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
10742 /*
10743  * - LGPL
10744  *
10745  * table cell
10746  * 
10747  */
10748
10749 /**
10750  * @class Roo.bootstrap.TableCell
10751  * @extends Roo.bootstrap.Component
10752  * @children Roo.bootstrap.Component
10753  * @parent Roo.bootstrap.TableRow
10754  * Bootstrap TableCell class
10755  * 
10756  * @cfg {String} html cell contain text
10757  * @cfg {String} cls cell class
10758  * @cfg {String} tag cell tag (td|th) default td
10759  * @cfg {String} abbr Specifies an abbreviated version of the content in a cell
10760  * @cfg {String} align Aligns the content in a cell
10761  * @cfg {String} axis Categorizes cells
10762  * @cfg {String} bgcolor Specifies the background color of a cell
10763  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10764  * @cfg {Number} colspan Specifies the number of columns a cell should span
10765  * @cfg {String} headers Specifies one or more header cells a cell is related to
10766  * @cfg {Number} height Sets the height of a cell
10767  * @cfg {String} nowrap Specifies that the content inside a cell should not wrap
10768  * @cfg {Number} rowspan Sets the number of rows a cell should span
10769  * @cfg {String} scope Defines a way to associate header cells and data cells in a table
10770  * @cfg {String} valign Vertical aligns the content in a cell
10771  * @cfg {Number} width Specifies the width of a cell
10772  * 
10773  * @constructor
10774  * Create a new TableCell
10775  * @param {Object} config The config object
10776  */
10777
10778 Roo.bootstrap.TableCell = function(config){
10779     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
10780 };
10781
10782 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
10783     
10784     html: false,
10785     cls: false,
10786     tag: false,
10787     abbr: false,
10788     align: false,
10789     axis: false,
10790     bgcolor: false,
10791     charoff: false,
10792     colspan: false,
10793     headers: false,
10794     height: false,
10795     nowrap: false,
10796     rowspan: false,
10797     scope: false,
10798     valign: false,
10799     width: false,
10800     
10801     
10802     getAutoCreate : function(){
10803         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
10804         
10805         cfg = {
10806             tag: 'td'
10807         };
10808         
10809         if(this.tag){
10810             cfg.tag = this.tag;
10811         }
10812         
10813         if (this.html) {
10814             cfg.html=this.html
10815         }
10816         if (this.cls) {
10817             cfg.cls=this.cls
10818         }
10819         if (this.abbr) {
10820             cfg.abbr=this.abbr
10821         }
10822         if (this.align) {
10823             cfg.align=this.align
10824         }
10825         if (this.axis) {
10826             cfg.axis=this.axis
10827         }
10828         if (this.bgcolor) {
10829             cfg.bgcolor=this.bgcolor
10830         }
10831         if (this.charoff) {
10832             cfg.charoff=this.charoff
10833         }
10834         if (this.colspan) {
10835             cfg.colspan=this.colspan
10836         }
10837         if (this.headers) {
10838             cfg.headers=this.headers
10839         }
10840         if (this.height) {
10841             cfg.height=this.height
10842         }
10843         if (this.nowrap) {
10844             cfg.nowrap=this.nowrap
10845         }
10846         if (this.rowspan) {
10847             cfg.rowspan=this.rowspan
10848         }
10849         if (this.scope) {
10850             cfg.scope=this.scope
10851         }
10852         if (this.valign) {
10853             cfg.valign=this.valign
10854         }
10855         if (this.width) {
10856             cfg.width=this.width
10857         }
10858         
10859         
10860         return cfg;
10861     }
10862    
10863 });
10864
10865  
10866
10867  /*
10868  * - LGPL
10869  *
10870  * table row
10871  * 
10872  */
10873
10874 /**
10875  * @class Roo.bootstrap.TableRow
10876  * @extends Roo.bootstrap.Component
10877  * @children Roo.bootstrap.TableCell
10878  * @parent Roo.bootstrap.TableBody
10879  * Bootstrap TableRow class
10880  * @cfg {String} cls row class
10881  * @cfg {String} align Aligns the content in a table row
10882  * @cfg {String} bgcolor Specifies a background color for a table row
10883  * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
10884  * @cfg {String} valign Vertical aligns the content in a table row
10885  * 
10886  * @constructor
10887  * Create a new TableRow
10888  * @param {Object} config The config object
10889  */
10890
10891 Roo.bootstrap.TableRow = function(config){
10892     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
10893 };
10894
10895 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
10896     
10897     cls: false,
10898     align: false,
10899     bgcolor: false,
10900     charoff: false,
10901     valign: false,
10902     
10903     getAutoCreate : function(){
10904         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
10905         
10906         cfg = {
10907             tag: 'tr'
10908         };
10909             
10910         if(this.cls){
10911             cfg.cls = this.cls;
10912         }
10913         if(this.align){
10914             cfg.align = this.align;
10915         }
10916         if(this.bgcolor){
10917             cfg.bgcolor = this.bgcolor;
10918         }
10919         if(this.charoff){
10920             cfg.charoff = this.charoff;
10921         }
10922         if(this.valign){
10923             cfg.valign = this.valign;
10924         }
10925         
10926         return cfg;
10927     }
10928    
10929 });
10930
10931  
10932
10933  /*
10934  * - LGPL
10935  *
10936  * table body
10937  * 
10938  */
10939
10940 /**
10941  * @class Roo.bootstrap.TableBody
10942  * @extends Roo.bootstrap.Component
10943  * @children Roo.bootstrap.TableRow
10944  * @parent Roo.bootstrap.Table
10945  * Bootstrap TableBody class
10946  * @cfg {String} cls element class
10947  * @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
10948  * @cfg {String} align Aligns the content inside the element
10949  * @cfg {Number} charoff Sets the number of characters the content inside the element will be aligned from the character specified by the char attribute
10950  * @cfg {String} valign Vertical aligns the content inside the <tbody> element
10951  * 
10952  * @constructor
10953  * Create a new TableBody
10954  * @param {Object} config The config object
10955  */
10956
10957 Roo.bootstrap.TableBody = function(config){
10958     Roo.bootstrap.TableBody.superclass.constructor.call(this, config);
10959 };
10960
10961 Roo.extend(Roo.bootstrap.TableBody, Roo.bootstrap.Component,  {
10962     
10963     cls: false,
10964     tag: false,
10965     align: false,
10966     charoff: false,
10967     valign: false,
10968     
10969     getAutoCreate : function(){
10970         var cfg = Roo.apply({}, Roo.bootstrap.TableBody.superclass.getAutoCreate.call(this));
10971         
10972         cfg = {
10973             tag: 'tbody'
10974         };
10975             
10976         if (this.cls) {
10977             cfg.cls=this.cls
10978         }
10979         if(this.tag){
10980             cfg.tag = this.tag;
10981         }
10982         
10983         if(this.align){
10984             cfg.align = this.align;
10985         }
10986         if(this.charoff){
10987             cfg.charoff = this.charoff;
10988         }
10989         if(this.valign){
10990             cfg.valign = this.valign;
10991         }
10992         
10993         return cfg;
10994     }
10995     
10996     
10997 //    initEvents : function()
10998 //    {
10999 //        
11000 //        if(!this.store){
11001 //            return;
11002 //        }
11003 //        
11004 //        this.store = Roo.factory(this.store, Roo.data);
11005 //        this.store.on('load', this.onLoad, this);
11006 //        
11007 //        this.store.load();
11008 //        
11009 //    },
11010 //    
11011 //    onLoad: function () 
11012 //    {   
11013 //        this.fireEvent('load', this);
11014 //    }
11015 //    
11016 //   
11017 });
11018
11019  
11020
11021  /*
11022  * Based on:
11023  * Ext JS Library 1.1.1
11024  * Copyright(c) 2006-2007, Ext JS, LLC.
11025  *
11026  * Originally Released Under LGPL - original licence link has changed is not relivant.
11027  *
11028  * Fork - LGPL
11029  * <script type="text/javascript">
11030  */
11031
11032 // as we use this in bootstrap.
11033 Roo.namespace('Roo.form');
11034  /**
11035  * @class Roo.form.Action
11036  * Internal Class used to handle form actions
11037  * @constructor
11038  * @param {Roo.form.BasicForm} el The form element or its id
11039  * @param {Object} config Configuration options
11040  */
11041
11042  
11043  
11044 // define the action interface
11045 Roo.form.Action = function(form, options){
11046     this.form = form;
11047     this.options = options || {};
11048 };
11049 /**
11050  * Client Validation Failed
11051  * @const 
11052  */
11053 Roo.form.Action.CLIENT_INVALID = 'client';
11054 /**
11055  * Server Validation Failed
11056  * @const 
11057  */
11058 Roo.form.Action.SERVER_INVALID = 'server';
11059  /**
11060  * Connect to Server Failed
11061  * @const 
11062  */
11063 Roo.form.Action.CONNECT_FAILURE = 'connect';
11064 /**
11065  * Reading Data from Server Failed
11066  * @const 
11067  */
11068 Roo.form.Action.LOAD_FAILURE = 'load';
11069
11070 Roo.form.Action.prototype = {
11071     type : 'default',
11072     failureType : undefined,
11073     response : undefined,
11074     result : undefined,
11075
11076     // interface method
11077     run : function(options){
11078
11079     },
11080
11081     // interface method
11082     success : function(response){
11083
11084     },
11085
11086     // interface method
11087     handleResponse : function(response){
11088
11089     },
11090
11091     // default connection failure
11092     failure : function(response){
11093         
11094         this.response = response;
11095         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11096         this.form.afterAction(this, false);
11097     },
11098
11099     processResponse : function(response){
11100         this.response = response;
11101         if(!response.responseText){
11102             return true;
11103         }
11104         this.result = this.handleResponse(response);
11105         return this.result;
11106     },
11107
11108     // utility functions used internally
11109     getUrl : function(appendParams){
11110         var url = this.options.url || this.form.url || this.form.el.dom.action;
11111         if(appendParams){
11112             var p = this.getParams();
11113             if(p){
11114                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11115             }
11116         }
11117         return url;
11118     },
11119
11120     getMethod : function(){
11121         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
11122     },
11123
11124     getParams : function(){
11125         var bp = this.form.baseParams;
11126         var p = this.options.params;
11127         if(p){
11128             if(typeof p == "object"){
11129                 p = Roo.urlEncode(Roo.applyIf(p, bp));
11130             }else if(typeof p == 'string' && bp){
11131                 p += '&' + Roo.urlEncode(bp);
11132             }
11133         }else if(bp){
11134             p = Roo.urlEncode(bp);
11135         }
11136         return p;
11137     },
11138
11139     createCallback : function(){
11140         return {
11141             success: this.success,
11142             failure: this.failure,
11143             scope: this,
11144             timeout: (this.form.timeout*1000),
11145             upload: this.form.fileUpload ? this.success : undefined
11146         };
11147     }
11148 };
11149
11150 Roo.form.Action.Submit = function(form, options){
11151     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
11152 };
11153
11154 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
11155     type : 'submit',
11156
11157     haveProgress : false,
11158     uploadComplete : false,
11159     
11160     // uploadProgress indicator.
11161     uploadProgress : function()
11162     {
11163         if (!this.form.progressUrl) {
11164             return;
11165         }
11166         
11167         if (!this.haveProgress) {
11168             Roo.MessageBox.progress("Uploading", "Uploading");
11169         }
11170         if (this.uploadComplete) {
11171            Roo.MessageBox.hide();
11172            return;
11173         }
11174         
11175         this.haveProgress = true;
11176    
11177         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
11178         
11179         var c = new Roo.data.Connection();
11180         c.request({
11181             url : this.form.progressUrl,
11182             params: {
11183                 id : uid
11184             },
11185             method: 'GET',
11186             success : function(req){
11187                //console.log(data);
11188                 var rdata = false;
11189                 var edata;
11190                 try  {
11191                    rdata = Roo.decode(req.responseText)
11192                 } catch (e) {
11193                     Roo.log("Invalid data from server..");
11194                     Roo.log(edata);
11195                     return;
11196                 }
11197                 if (!rdata || !rdata.success) {
11198                     Roo.log(rdata);
11199                     Roo.MessageBox.alert(Roo.encode(rdata));
11200                     return;
11201                 }
11202                 var data = rdata.data;
11203                 
11204                 if (this.uploadComplete) {
11205                    Roo.MessageBox.hide();
11206                    return;
11207                 }
11208                    
11209                 if (data){
11210                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
11211                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
11212                     );
11213                 }
11214                 this.uploadProgress.defer(2000,this);
11215             },
11216        
11217             failure: function(data) {
11218                 Roo.log('progress url failed ');
11219                 Roo.log(data);
11220             },
11221             scope : this
11222         });
11223            
11224     },
11225     
11226     
11227     run : function()
11228     {
11229         // run get Values on the form, so it syncs any secondary forms.
11230         this.form.getValues();
11231         
11232         var o = this.options;
11233         var method = this.getMethod();
11234         var isPost = method == 'POST';
11235         if(o.clientValidation === false || this.form.isValid()){
11236             
11237             if (this.form.progressUrl) {
11238                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
11239                     (new Date() * 1) + '' + Math.random());
11240                     
11241             } 
11242             
11243             
11244             Roo.Ajax.request(Roo.apply(this.createCallback(), {
11245                 form:this.form.el.dom,
11246                 url:this.getUrl(!isPost),
11247                 method: method,
11248                 params:isPost ? this.getParams() : null,
11249                 isUpload: this.form.fileUpload,
11250                 formData : this.form.formData
11251             }));
11252             
11253             this.uploadProgress();
11254
11255         }else if (o.clientValidation !== false){ // client validation failed
11256             this.failureType = Roo.form.Action.CLIENT_INVALID;
11257             this.form.afterAction(this, false);
11258         }
11259     },
11260
11261     success : function(response)
11262     {
11263         this.uploadComplete= true;
11264         if (this.haveProgress) {
11265             Roo.MessageBox.hide();
11266         }
11267         
11268         
11269         var result = this.processResponse(response);
11270         if(result === true || result.success){
11271             this.form.afterAction(this, true);
11272             return;
11273         }
11274         if(result.errors){
11275             this.form.markInvalid(result.errors);
11276             this.failureType = Roo.form.Action.SERVER_INVALID;
11277         }
11278         this.form.afterAction(this, false);
11279     },
11280     failure : function(response)
11281     {
11282         this.uploadComplete= true;
11283         if (this.haveProgress) {
11284             Roo.MessageBox.hide();
11285         }
11286         
11287         this.response = response;
11288         this.failureType = Roo.form.Action.CONNECT_FAILURE;
11289         this.form.afterAction(this, false);
11290     },
11291     
11292     handleResponse : function(response){
11293         if(this.form.errorReader){
11294             var rs = this.form.errorReader.read(response);
11295             var errors = [];
11296             if(rs.records){
11297                 for(var i = 0, len = rs.records.length; i < len; i++) {
11298                     var r = rs.records[i];
11299                     errors[i] = r.data;
11300                 }
11301             }
11302             if(errors.length < 1){
11303                 errors = null;
11304             }
11305             return {
11306                 success : rs.success,
11307                 errors : errors
11308             };
11309         }
11310         var ret = false;
11311         try {
11312             var rt = response.responseText;
11313             if (rt.match(/^\<!--\[CDATA\[/)) {
11314                 rt = rt.replace(/^\<!--\[CDATA\[/,'');
11315                 rt = rt.replace(/\]\]--\>$/,'');
11316             }
11317             
11318             ret = Roo.decode(rt);
11319         } catch (e) {
11320             ret = {
11321                 success: false,
11322                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
11323                 errors : []
11324             };
11325         }
11326         return ret;
11327         
11328     }
11329 });
11330
11331
11332 Roo.form.Action.Load = function(form, options){
11333     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
11334     this.reader = this.form.reader;
11335 };
11336
11337 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
11338     type : 'load',
11339
11340     run : function(){
11341         
11342         Roo.Ajax.request(Roo.apply(
11343                 this.createCallback(), {
11344                     method:this.getMethod(),
11345                     url:this.getUrl(false),
11346                     params:this.getParams()
11347         }));
11348     },
11349
11350     success : function(response){
11351         
11352         var result = this.processResponse(response);
11353         if(result === true || !result.success || !result.data){
11354             this.failureType = Roo.form.Action.LOAD_FAILURE;
11355             this.form.afterAction(this, false);
11356             return;
11357         }
11358         this.form.clearInvalid();
11359         this.form.setValues(result.data);
11360         this.form.afterAction(this, true);
11361     },
11362
11363     handleResponse : function(response){
11364         if(this.form.reader){
11365             var rs = this.form.reader.read(response);
11366             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
11367             return {
11368                 success : rs.success,
11369                 data : data
11370             };
11371         }
11372         return Roo.decode(response.responseText);
11373     }
11374 });
11375
11376 Roo.form.Action.ACTION_TYPES = {
11377     'load' : Roo.form.Action.Load,
11378     'submit' : Roo.form.Action.Submit
11379 };/*
11380  * - LGPL
11381  *
11382  * form
11383  *
11384  */
11385
11386 /**
11387  * @class Roo.bootstrap.form.Form
11388  * @extends Roo.bootstrap.Component
11389  * @children Roo.bootstrap.Component
11390  * Bootstrap Form class
11391  * @cfg {String} method  GET | POST (default POST)
11392  * @cfg {String} labelAlign top | left (default top)
11393  * @cfg {String} align left  | right - for navbars
11394  * @cfg {Boolean} loadMask load mask when submit (default true)
11395
11396  *
11397  * @constructor
11398  * Create a new Form
11399  * @param {Object} config The config object
11400  */
11401
11402
11403 Roo.bootstrap.form.Form = function(config){
11404     
11405     Roo.bootstrap.form.Form.superclass.constructor.call(this, config);
11406     
11407     Roo.bootstrap.form.Form.popover.apply();
11408     
11409     this.addEvents({
11410         /**
11411          * @event clientvalidation
11412          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
11413          * @param {Form} this
11414          * @param {Boolean} valid true if the form has passed client-side validation
11415          */
11416         clientvalidation: true,
11417         /**
11418          * @event beforeaction
11419          * Fires before any action is performed. Return false to cancel the action.
11420          * @param {Form} this
11421          * @param {Action} action The action to be performed
11422          */
11423         beforeaction: true,
11424         /**
11425          * @event actionfailed
11426          * Fires when an action fails.
11427          * @param {Form} this
11428          * @param {Action} action The action that failed
11429          */
11430         actionfailed : true,
11431         /**
11432          * @event actioncomplete
11433          * Fires when an action is completed.
11434          * @param {Form} this
11435          * @param {Action} action The action that completed
11436          */
11437         actioncomplete : true
11438     });
11439 };
11440
11441 Roo.extend(Roo.bootstrap.form.Form, Roo.bootstrap.Component,  {
11442
11443      /**
11444      * @cfg {String} method
11445      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
11446      */
11447     method : 'POST',
11448     /**
11449      * @cfg {String} url
11450      * The URL to use for form actions if one isn't supplied in the action options.
11451      */
11452     /**
11453      * @cfg {Boolean} fileUpload
11454      * Set to true if this form is a file upload.
11455      */
11456
11457     /**
11458      * @cfg {Object} baseParams
11459      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
11460      */
11461
11462     /**
11463      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
11464      */
11465     timeout: 30,
11466     /**
11467      * @cfg {Sting} align (left|right) for navbar forms
11468      */
11469     align : 'left',
11470
11471     // private
11472     activeAction : null,
11473
11474     /**
11475      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
11476      * element by passing it or its id or mask the form itself by passing in true.
11477      * @type Mixed
11478      */
11479     waitMsgTarget : false,
11480
11481     loadMask : true,
11482     
11483     /**
11484      * @cfg {Boolean} errorMask (true|false) default false
11485      */
11486     errorMask : false,
11487     
11488     /**
11489      * @cfg {Number} maskOffset Default 100
11490      */
11491     maskOffset : 100,
11492     
11493     /**
11494      * @cfg {Boolean} maskBody
11495      */
11496     maskBody : false,
11497
11498     getAutoCreate : function(){
11499
11500         var cfg = {
11501             tag: 'form',
11502             method : this.method || 'POST',
11503             id : this.id || Roo.id(),
11504             cls : ''
11505         };
11506         if (this.parent().xtype.match(/^Nav/)) {
11507             cfg.cls = 'navbar-form form-inline navbar-' + this.align;
11508
11509         }
11510
11511         if (this.labelAlign == 'left' ) {
11512             cfg.cls += ' form-horizontal';
11513         }
11514
11515
11516         return cfg;
11517     },
11518     initEvents : function()
11519     {
11520         this.el.on('submit', this.onSubmit, this);
11521         // this was added as random key presses on the form where triggering form submit.
11522         this.el.on('keypress', function(e) {
11523             if (e.getCharCode() != 13) {
11524                 return true;
11525             }
11526             // we might need to allow it for textareas.. and some other items.
11527             // check e.getTarget().
11528
11529             if(e.getTarget().nodeName.toLowerCase() === 'textarea'){
11530                 return true;
11531             }
11532
11533             Roo.log("keypress blocked");
11534
11535             e.preventDefault();
11536             return false;
11537         });
11538         
11539     },
11540     // private
11541     onSubmit : function(e){
11542         e.stopEvent();
11543     },
11544
11545      /**
11546      * Returns true if client-side validation on the form is successful.
11547      * @return Boolean
11548      */
11549     isValid : function(){
11550         var items = this.getItems();
11551         var valid = true;
11552         var target = false;
11553         
11554         items.each(function(f){
11555             
11556             if(f.validate()){
11557                 return;
11558             }
11559             
11560             Roo.log('invalid field: ' + f.name);
11561             
11562             valid = false;
11563
11564             if(!target && f.el.isVisible(true)){
11565                 target = f;
11566             }
11567            
11568         });
11569         
11570         if(this.errorMask && !valid){
11571             Roo.bootstrap.form.Form.popover.mask(this, target);
11572         }
11573         
11574         return valid;
11575     },
11576     
11577     /**
11578      * Returns true if any fields in this form have changed since their original load.
11579      * @return Boolean
11580      */
11581     isDirty : function(){
11582         var dirty = false;
11583         var items = this.getItems();
11584         items.each(function(f){
11585            if(f.isDirty()){
11586                dirty = true;
11587                return false;
11588            }
11589            return true;
11590         });
11591         return dirty;
11592     },
11593      /**
11594      * Performs a predefined action (submit or load) or custom actions you define on this form.
11595      * @param {String} actionName The name of the action type
11596      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
11597      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
11598      * accept other config options):
11599      * <pre>
11600 Property          Type             Description
11601 ----------------  ---------------  ----------------------------------------------------------------------------------
11602 url               String           The url for the action (defaults to the form's url)
11603 method            String           The form method to use (defaults to the form's method, or POST if not defined)
11604 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
11605 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
11606                                    validate the form on the client (defaults to false)
11607      * </pre>
11608      * @return {BasicForm} this
11609      */
11610     doAction : function(action, options){
11611         if(typeof action == 'string'){
11612             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
11613         }
11614         if(this.fireEvent('beforeaction', this, action) !== false){
11615             this.beforeAction(action);
11616             action.run.defer(100, action);
11617         }
11618         return this;
11619     },
11620
11621     // private
11622     beforeAction : function(action){
11623         var o = action.options;
11624         
11625         if(this.loadMask){
11626             
11627             if(this.maskBody){
11628                 Roo.get(document.body).mask(o.waitMsg || "Sending", 'x-mask-loading')
11629             } else {
11630                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11631             }
11632         }
11633         // not really supported yet.. ??
11634
11635         //if(this.waitMsgTarget === true){
11636         //  this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
11637         //}else if(this.waitMsgTarget){
11638         //    this.waitMsgTarget = Roo.get(this.waitMsgTarget);
11639         //    this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
11640         //}else {
11641         //    Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
11642        // }
11643
11644     },
11645
11646     // private
11647     afterAction : function(action, success){
11648         this.activeAction = null;
11649         var o = action.options;
11650
11651         if(this.loadMask){
11652             
11653             if(this.maskBody){
11654                 Roo.get(document.body).unmask();
11655             } else {
11656                 this.el.unmask();
11657             }
11658         }
11659         
11660         //if(this.waitMsgTarget === true){
11661 //            this.el.unmask();
11662         //}else if(this.waitMsgTarget){
11663         //    this.waitMsgTarget.unmask();
11664         //}else{
11665         //    Roo.MessageBox.updateProgress(1);
11666         //    Roo.MessageBox.hide();
11667        // }
11668         //
11669         if(success){
11670             if(o.reset){
11671                 this.reset();
11672             }
11673             Roo.callback(o.success, o.scope, [this, action]);
11674             this.fireEvent('actioncomplete', this, action);
11675
11676         }else{
11677
11678             // failure condition..
11679             // we have a scenario where updates need confirming.
11680             // eg. if a locking scenario exists..
11681             // we look for { errors : { needs_confirm : true }} in the response.
11682             if (
11683                 (typeof(action.result) != 'undefined')  &&
11684                 (typeof(action.result.errors) != 'undefined')  &&
11685                 (typeof(action.result.errors.needs_confirm) != 'undefined')
11686            ){
11687                 var _t = this;
11688                 Roo.log("not supported yet");
11689                  /*
11690
11691                 Roo.MessageBox.confirm(
11692                     "Change requires confirmation",
11693                     action.result.errorMsg,
11694                     function(r) {
11695                         if (r != 'yes') {
11696                             return;
11697                         }
11698                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
11699                     }
11700
11701                 );
11702                 */
11703
11704
11705                 return;
11706             }
11707
11708             Roo.callback(o.failure, o.scope, [this, action]);
11709             // show an error message if no failed handler is set..
11710             if (!this.hasListener('actionfailed')) {
11711                 Roo.log("need to add dialog support");
11712                 /*
11713                 Roo.MessageBox.alert("Error",
11714                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
11715                         action.result.errorMsg :
11716                         "Saving Failed, please check your entries or try again"
11717                 );
11718                 */
11719             }
11720
11721             this.fireEvent('actionfailed', this, action);
11722         }
11723
11724     },
11725     /**
11726      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
11727      * @param {String} id The value to search for
11728      * @return Field
11729      */
11730     findField : function(id){
11731         var items = this.getItems();
11732         var field = items.get(id);
11733         if(!field){
11734              items.each(function(f){
11735                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
11736                     field = f;
11737                     return false;
11738                 }
11739                 return true;
11740             });
11741         }
11742         return field || null;
11743     },
11744      /**
11745      * Mark fields in this form invalid in bulk.
11746      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
11747      * @return {BasicForm} this
11748      */
11749     markInvalid : function(errors){
11750         if(errors instanceof Array){
11751             for(var i = 0, len = errors.length; i < len; i++){
11752                 var fieldError = errors[i];
11753                 var f = this.findField(fieldError.id);
11754                 if(f){
11755                     f.markInvalid(fieldError.msg);
11756                 }
11757             }
11758         }else{
11759             var field, id;
11760             for(id in errors){
11761                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
11762                     field.markInvalid(errors[id]);
11763                 }
11764             }
11765         }
11766         //Roo.each(this.childForms || [], function (f) {
11767         //    f.markInvalid(errors);
11768         //});
11769
11770         return this;
11771     },
11772
11773     /**
11774      * Set values for fields in this form in bulk.
11775      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
11776      * @return {BasicForm} this
11777      */
11778     setValues : function(values){
11779         if(values instanceof Array){ // array of objects
11780             for(var i = 0, len = values.length; i < len; i++){
11781                 var v = values[i];
11782                 var f = this.findField(v.id);
11783                 if(f){
11784                     f.setValue(v.value);
11785                     if(this.trackResetOnLoad){
11786                         f.originalValue = f.getValue();
11787                     }
11788                 }
11789             }
11790         }else{ // object hash
11791             var field, id;
11792             for(id in values){
11793                 if(typeof values[id] != 'function' && (field = this.findField(id))){
11794
11795                     if (field.setFromData &&
11796                         field.valueField &&
11797                         field.displayField &&
11798                         // combos' with local stores can
11799                         // be queried via setValue()
11800                         // to set their value..
11801                         (field.store && !field.store.isLocal)
11802                         ) {
11803                         // it's a combo
11804                         var sd = { };
11805                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
11806                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
11807                         field.setFromData(sd);
11808
11809                     } else if(field.setFromData && (field.store && !field.store.isLocal)) {
11810                         
11811                         field.setFromData(values);
11812                         
11813                     } else {
11814                         field.setValue(values[id]);
11815                     }
11816
11817
11818                     if(this.trackResetOnLoad){
11819                         field.originalValue = field.getValue();
11820                     }
11821                 }
11822             }
11823         }
11824
11825         //Roo.each(this.childForms || [], function (f) {
11826         //    f.setValues(values);
11827         //});
11828
11829         return this;
11830     },
11831
11832     /**
11833      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
11834      * they are returned as an array.
11835      * @param {Boolean} asString
11836      * @return {Object}
11837      */
11838     getValues : function(asString){
11839         //if (this.childForms) {
11840             // copy values from the child forms
11841         //    Roo.each(this.childForms, function (f) {
11842         //        this.setValues(f.getValues());
11843         //    }, this);
11844         //}
11845
11846
11847
11848         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
11849         if(asString === true){
11850             return fs;
11851         }
11852         return Roo.urlDecode(fs);
11853     },
11854
11855     /**
11856      * Returns the fields in this form as an object with key/value pairs.
11857      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
11858      * @return {Object}
11859      */
11860     getFieldValues : function(with_hidden)
11861     {
11862         var items = this.getItems();
11863         var ret = {};
11864         items.each(function(f){
11865             
11866             if (!f.getName()) {
11867                 return;
11868             }
11869             
11870             var v = f.getValue();
11871             
11872             if (f.inputType =='radio') {
11873                 if (typeof(ret[f.getName()]) == 'undefined') {
11874                     ret[f.getName()] = ''; // empty..
11875                 }
11876
11877                 if (!f.el.dom.checked) {
11878                     return;
11879
11880                 }
11881                 v = f.el.dom.value;
11882
11883             }
11884             
11885             if(f.xtype == 'MoneyField'){
11886                 ret[f.currencyName] = f.getCurrency();
11887             }
11888
11889             // not sure if this supported any more..
11890             if ((typeof(v) == 'object') && f.getRawValue) {
11891                 v = f.getRawValue() ; // dates..
11892             }
11893             // combo boxes where name != hiddenName...
11894             if (f.name !== false && f.name != '' && f.name != f.getName()) {
11895                 ret[f.name] = f.getRawValue();
11896             }
11897             ret[f.getName()] = v;
11898         });
11899
11900         return ret;
11901     },
11902
11903     /**
11904      * Clears all invalid messages in this form.
11905      * @return {BasicForm} this
11906      */
11907     clearInvalid : function(){
11908         var items = this.getItems();
11909
11910         items.each(function(f){
11911            f.clearInvalid();
11912         });
11913
11914         return this;
11915     },
11916
11917     /**
11918      * Resets this form.
11919      * @return {BasicForm} this
11920      */
11921     reset : function(){
11922         var items = this.getItems();
11923         items.each(function(f){
11924             f.reset();
11925         });
11926
11927         Roo.each(this.childForms || [], function (f) {
11928             f.reset();
11929         });
11930
11931
11932         return this;
11933     },
11934     
11935     getItems : function()
11936     {
11937         var r=new Roo.util.MixedCollection(false, function(o){
11938             return o.id || (o.id = Roo.id());
11939         });
11940         var iter = function(el) {
11941             if (el.inputEl) {
11942                 r.add(el);
11943             }
11944             if (!el.items) {
11945                 return;
11946             }
11947             Roo.each(el.items,function(e) {
11948                 iter(e);
11949             });
11950         };
11951
11952         iter(this);
11953         return r;
11954     },
11955     
11956     hideFields : function(items)
11957     {
11958         Roo.each(items, function(i){
11959             
11960             var f = this.findField(i);
11961             
11962             if(!f){
11963                 return;
11964             }
11965             
11966             f.hide();
11967             
11968         }, this);
11969     },
11970     
11971     showFields : function(items)
11972     {
11973         Roo.each(items, function(i){
11974             
11975             var f = this.findField(i);
11976             
11977             if(!f){
11978                 return;
11979             }
11980             
11981             f.show();
11982             
11983         }, this);
11984     }
11985
11986 });
11987
11988 Roo.apply(Roo.bootstrap.form.Form, {
11989     
11990     popover : {
11991         
11992         padding : 5,
11993         
11994         isApplied : false,
11995         
11996         isMasked : false,
11997         
11998         form : false,
11999         
12000         target : false,
12001         
12002         toolTip : false,
12003         
12004         intervalID : false,
12005         
12006         maskEl : false,
12007         
12008         apply : function()
12009         {
12010             if(this.isApplied){
12011                 return;
12012             }
12013             
12014             this.maskEl = {
12015                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
12016                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
12017                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
12018                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
12019             };
12020             
12021             this.maskEl.top.enableDisplayMode("block");
12022             this.maskEl.left.enableDisplayMode("block");
12023             this.maskEl.bottom.enableDisplayMode("block");
12024             this.maskEl.right.enableDisplayMode("block");
12025             
12026             this.toolTip = new Roo.bootstrap.Tooltip({
12027                 cls : 'roo-form-error-popover',
12028                 alignment : {
12029                     'left' : ['r-l', [-2,0], 'right'],
12030                     'right' : ['l-r', [2,0], 'left'],
12031                     'bottom' : ['tl-bl', [0,2], 'top'],
12032                     'top' : [ 'bl-tl', [0,-2], 'bottom']
12033                 }
12034             });
12035             
12036             this.toolTip.render(Roo.get(document.body));
12037
12038             this.toolTip.el.enableDisplayMode("block");
12039             
12040             Roo.get(document.body).on('click', function(){
12041                 this.unmask();
12042             }, this);
12043             
12044             Roo.get(document.body).on('touchstart', function(){
12045                 this.unmask();
12046             }, this);
12047             
12048             this.isApplied = true
12049         },
12050         
12051         mask : function(form, target)
12052         {
12053             this.form = form;
12054             
12055             this.target = target;
12056             
12057             if(!this.form.errorMask || !target.el){
12058                 return;
12059             }
12060             
12061             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
12062             
12063             Roo.log(scrollable);
12064             
12065             var ot = this.target.el.calcOffsetsTo(scrollable);
12066             
12067             var scrollTo = ot[1] - this.form.maskOffset;
12068             
12069             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
12070             
12071             scrollable.scrollTo('top', scrollTo);
12072             
12073             var box = this.target.el.getBox();
12074             Roo.log(box);
12075             var zIndex = Roo.bootstrap.Modal.zIndex++;
12076
12077             
12078             this.maskEl.top.setStyle('position', 'absolute');
12079             this.maskEl.top.setStyle('z-index', zIndex);
12080             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
12081             this.maskEl.top.setLeft(0);
12082             this.maskEl.top.setTop(0);
12083             this.maskEl.top.show();
12084             
12085             this.maskEl.left.setStyle('position', 'absolute');
12086             this.maskEl.left.setStyle('z-index', zIndex);
12087             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
12088             this.maskEl.left.setLeft(0);
12089             this.maskEl.left.setTop(box.y - this.padding);
12090             this.maskEl.left.show();
12091
12092             this.maskEl.bottom.setStyle('position', 'absolute');
12093             this.maskEl.bottom.setStyle('z-index', zIndex);
12094             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
12095             this.maskEl.bottom.setLeft(0);
12096             this.maskEl.bottom.setTop(box.bottom + this.padding);
12097             this.maskEl.bottom.show();
12098
12099             this.maskEl.right.setStyle('position', 'absolute');
12100             this.maskEl.right.setStyle('z-index', zIndex);
12101             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
12102             this.maskEl.right.setLeft(box.right + this.padding);
12103             this.maskEl.right.setTop(box.y - this.padding);
12104             this.maskEl.right.show();
12105
12106             this.toolTip.bindEl = this.target.el;
12107
12108             this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
12109
12110             var tip = this.target.blankText;
12111
12112             if(this.target.getValue() !== '' ) {
12113                 
12114                 if (this.target.invalidText.length) {
12115                     tip = this.target.invalidText;
12116                 } else if (this.target.regexText.length){
12117                     tip = this.target.regexText;
12118                 }
12119             }
12120
12121             this.toolTip.show(tip);
12122
12123             this.intervalID = window.setInterval(function() {
12124                 Roo.bootstrap.form.Form.popover.unmask();
12125             }, 10000);
12126
12127             window.onwheel = function(){ return false;};
12128             
12129             (function(){ this.isMasked = true; }).defer(500, this);
12130             
12131         },
12132         
12133         unmask : function()
12134         {
12135             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
12136                 return;
12137             }
12138             
12139             this.maskEl.top.setStyle('position', 'absolute');
12140             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
12141             this.maskEl.top.hide();
12142
12143             this.maskEl.left.setStyle('position', 'absolute');
12144             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
12145             this.maskEl.left.hide();
12146
12147             this.maskEl.bottom.setStyle('position', 'absolute');
12148             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
12149             this.maskEl.bottom.hide();
12150
12151             this.maskEl.right.setStyle('position', 'absolute');
12152             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
12153             this.maskEl.right.hide();
12154             
12155             this.toolTip.hide();
12156             
12157             this.toolTip.el.hide();
12158             
12159             window.onwheel = function(){ return true;};
12160             
12161             if(this.intervalID){
12162                 window.clearInterval(this.intervalID);
12163                 this.intervalID = false;
12164             }
12165             
12166             this.isMasked = false;
12167             
12168         }
12169         
12170     }
12171     
12172 });
12173
12174 /*
12175  * Based on:
12176  * Ext JS Library 1.1.1
12177  * Copyright(c) 2006-2007, Ext JS, LLC.
12178  *
12179  * Originally Released Under LGPL - original licence link has changed is not relivant.
12180  *
12181  * Fork - LGPL
12182  * <script type="text/javascript">
12183  */
12184 /**
12185  * @class Roo.form.VTypes
12186  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
12187  * @static
12188  */
12189 Roo.form.VTypes = function(){
12190     // closure these in so they are only created once.
12191     var alpha = /^[a-zA-Z_]+$/;
12192     var alphanum = /^[a-zA-Z0-9_]+$/;
12193     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
12194     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
12195
12196     // All these messages and functions are configurable
12197     return {
12198         /**
12199          * The function used to validate email addresses
12200          * @param {String} value The email address
12201          */
12202         email : function(v){
12203             return email.test(v);
12204         },
12205         /**
12206          * The error text to display when the email validation function returns false
12207          * @type String
12208          */
12209         emailText : 'This field should be an e-mail address in the format "user@domain.com"',
12210         /**
12211          * The keystroke filter mask to be applied on email input
12212          * @type RegExp
12213          */
12214         emailMask : /[a-z0-9_\.\-@]/i,
12215
12216         /**
12217          * The function used to validate URLs
12218          * @param {String} value The URL
12219          */
12220         url : function(v){
12221             return url.test(v);
12222         },
12223         /**
12224          * The error text to display when the url validation function returns false
12225          * @type String
12226          */
12227         urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
12228         
12229         /**
12230          * The function used to validate alpha values
12231          * @param {String} value The value
12232          */
12233         alpha : function(v){
12234             return alpha.test(v);
12235         },
12236         /**
12237          * The error text to display when the alpha validation function returns false
12238          * @type String
12239          */
12240         alphaText : 'This field should only contain letters and _',
12241         /**
12242          * The keystroke filter mask to be applied on alpha input
12243          * @type RegExp
12244          */
12245         alphaMask : /[a-z_]/i,
12246
12247         /**
12248          * The function used to validate alphanumeric values
12249          * @param {String} value The value
12250          */
12251         alphanum : function(v){
12252             return alphanum.test(v);
12253         },
12254         /**
12255          * The error text to display when the alphanumeric validation function returns false
12256          * @type String
12257          */
12258         alphanumText : 'This field should only contain letters, numbers and _',
12259         /**
12260          * The keystroke filter mask to be applied on alphanumeric input
12261          * @type RegExp
12262          */
12263         alphanumMask : /[a-z0-9_]/i
12264     };
12265 }();/*
12266  * - LGPL
12267  *
12268  * Input
12269  * 
12270  */
12271
12272 /**
12273  * @class Roo.bootstrap.form.Input
12274  * @extends Roo.bootstrap.Component
12275  * Bootstrap Input class
12276  * @cfg {Boolean} disabled is it disabled
12277  * @cfg {String} inputType (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text)  
12278  * @cfg {String} name name of the input
12279  * @cfg {string} fieldLabel - the label associated
12280  * @cfg {string} placeholder - placeholder to put in text.
12281  * @cfg {string} before - input group add on before
12282  * @cfg {string} after - input group add on after
12283  * @cfg {string} size - (lg|sm) or leave empty..
12284  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
12285  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
12286  * @cfg {Number} md colspan out of 12 for computer-sized screens
12287  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
12288  * @cfg {string} value default value of the input
12289  * @cfg {Number} labelWidth set the width of label 
12290  * @cfg {Number} labellg set the width of label (1-12)
12291  * @cfg {Number} labelmd set the width of label (1-12)
12292  * @cfg {Number} labelsm set the width of label (1-12)
12293  * @cfg {Number} labelxs set the width of label (1-12)
12294  * @cfg {String} labelAlign (top|left)
12295  * @cfg {Boolean} readOnly Specifies that the field should be read-only
12296  * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
12297  * @cfg {String} indicatorpos (left|right) default left
12298  * @cfg {String} capture (user|camera) use for file input only. (default empty)
12299  * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
12300  * @cfg {Boolean} preventMark Do not show tick or cross if error/success
12301  * @cfg {Roo.bootstrap.Button} before Button to show before
12302  * @cfg {Roo.bootstrap.Button} afterButton to show before
12303  * @cfg {String} align (left|center|right) Default left
12304  * @cfg {Boolean} forceFeedback (true|false) Default false
12305  * 
12306  * @constructor
12307  * Create a new Input
12308  * @param {Object} config The config object
12309  */
12310
12311 Roo.bootstrap.form.Input = function(config){
12312     
12313     Roo.bootstrap.form.Input.superclass.constructor.call(this, config);
12314     
12315     this.addEvents({
12316         /**
12317          * @event focus
12318          * Fires when this field receives input focus.
12319          * @param {Roo.form.Field} this
12320          */
12321         focus : true,
12322         /**
12323          * @event blur
12324          * Fires when this field loses input focus.
12325          * @param {Roo.form.Field} this
12326          */
12327         blur : true,
12328         /**
12329          * @event specialkey
12330          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
12331          * {@link Roo.EventObject#getKey} to determine which key was pressed.
12332          * @param {Roo.form.Field} this
12333          * @param {Roo.EventObject} e The event object
12334          */
12335         specialkey : true,
12336         /**
12337          * @event change
12338          * Fires just before the field blurs if the field value has changed.
12339          * @param {Roo.form.Field} this
12340          * @param {Mixed} newValue The new value
12341          * @param {Mixed} oldValue The original value
12342          */
12343         change : true,
12344         /**
12345          * @event invalid
12346          * Fires after the field has been marked as invalid.
12347          * @param {Roo.form.Field} this
12348          * @param {String} msg The validation message
12349          */
12350         invalid : true,
12351         /**
12352          * @event valid
12353          * Fires after the field has been validated with no errors.
12354          * @param {Roo.form.Field} this
12355          */
12356         valid : true,
12357          /**
12358          * @event keyup
12359          * Fires after the key up
12360          * @param {Roo.form.Field} this
12361          * @param {Roo.EventObject}  e The event Object
12362          */
12363         keyup : true,
12364         /**
12365          * @event paste
12366          * Fires after the user pastes into input
12367          * @param {Roo.form.Field} this
12368          * @param {Roo.EventObject}  e The event Object
12369          */
12370         paste : true
12371     });
12372 };
12373
12374 Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component,  {
12375      /**
12376      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
12377       automatic validation (defaults to "keyup").
12378      */
12379     validationEvent : "keyup",
12380      /**
12381      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
12382      */
12383     validateOnBlur : true,
12384     /**
12385      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
12386      */
12387     validationDelay : 250,
12388      /**
12389      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
12390      */
12391     focusClass : "x-form-focus",  // not needed???
12392     
12393        
12394     /**
12395      * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12396      */
12397     invalidClass : "has-warning",
12398     
12399     /**
12400      * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
12401      */
12402     validClass : "has-success",
12403     
12404     /**
12405      * @cfg {Boolean} hasFeedback (true|false) default true
12406      */
12407     hasFeedback : true,
12408     
12409     /**
12410      * @cfg {String} invalidFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12411      */
12412     invalidFeedbackClass : "glyphicon-warning-sign",
12413     
12414     /**
12415      * @cfg {String} validFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
12416      */
12417     validFeedbackClass : "glyphicon-ok",
12418     
12419     /**
12420      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
12421      */
12422     selectOnFocus : false,
12423     
12424      /**
12425      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
12426      */
12427     maskRe : null,
12428        /**
12429      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
12430      */
12431     vtype : null,
12432     
12433       /**
12434      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
12435      */
12436     disableKeyFilter : false,
12437     
12438        /**
12439      * @cfg {Boolean} disabled True to disable the field (defaults to false).
12440      */
12441     disabled : false,
12442      /**
12443      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
12444      */
12445     allowBlank : true,
12446     /**
12447      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
12448      */
12449     blankText : "Please complete this mandatory field",
12450     
12451      /**
12452      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
12453      */
12454     minLength : 0,
12455     /**
12456      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
12457      */
12458     maxLength : Number.MAX_VALUE,
12459     /**
12460      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
12461      */
12462     minLengthText : "The minimum length for this field is {0}",
12463     /**
12464      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
12465      */
12466     maxLengthText : "The maximum length for this field is {0}",
12467   
12468     
12469     /**
12470      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
12471      * If available, this function will be called only after the basic validators all return true, and will be passed the
12472      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
12473      */
12474     validator : null,
12475     /**
12476      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
12477      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
12478      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
12479      */
12480     regex : null,
12481     /**
12482      * @cfg {String} regexText -- Depricated - use Invalid Text
12483      */
12484     regexText : "",
12485     
12486     /**
12487      * @cfg {String} invalidText The error text to display if {@link #validator} test fails during validation (defaults to "")
12488      */
12489     invalidText : "",
12490     
12491     
12492     
12493     autocomplete: false,
12494     
12495     
12496     fieldLabel : '',
12497     inputType : 'text',
12498     
12499     name : false,
12500     placeholder: false,
12501     before : false,
12502     after : false,
12503     size : false,
12504     hasFocus : false,
12505     preventMark: false,
12506     isFormField : true,
12507     value : '',
12508     labelWidth : 2,
12509     labelAlign : false,
12510     readOnly : false,
12511     align : false,
12512     formatedValue : false,
12513     forceFeedback : false,
12514     
12515     indicatorpos : 'left',
12516     
12517     labellg : 0,
12518     labelmd : 0,
12519     labelsm : 0,
12520     labelxs : 0,
12521     
12522     capture : '',
12523     accept : '',
12524     
12525     parentLabelAlign : function()
12526     {
12527         var parent = this;
12528         while (parent.parent()) {
12529             parent = parent.parent();
12530             if (typeof(parent.labelAlign) !='undefined') {
12531                 return parent.labelAlign;
12532             }
12533         }
12534         return 'left';
12535         
12536     },
12537     
12538     getAutoCreate : function()
12539     {
12540         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
12541         
12542         var id = Roo.id();
12543         
12544         var cfg = {};
12545         
12546         if(this.inputType != 'hidden'){
12547             cfg.cls = 'form-group' //input-group
12548         }
12549         
12550         var input =  {
12551             tag: 'input',
12552             id : id,
12553             type : this.inputType,
12554             value : this.value,
12555             cls : 'form-control',
12556             placeholder : this.placeholder || '',
12557             autocomplete : this.autocomplete || 'new-password'
12558         };
12559         if (this.inputType == 'file') {
12560             input.style = 'overflow:hidden'; // why not in CSS?
12561         }
12562         
12563         if(this.capture.length){
12564             input.capture = this.capture;
12565         }
12566         
12567         if(this.accept.length){
12568             input.accept = this.accept + "/*";
12569         }
12570         
12571         if(this.align){
12572             input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
12573         }
12574         
12575         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
12576             input.maxLength = this.maxLength;
12577         }
12578         
12579         if (this.disabled) {
12580             input.disabled=true;
12581         }
12582         
12583         if (this.readOnly) {
12584             input.readonly=true;
12585         }
12586         
12587         if (this.name) {
12588             input.name = this.name;
12589         }
12590         
12591         if (this.size) {
12592             input.cls += ' input-' + this.size;
12593         }
12594         
12595         var settings=this;
12596         ['xs','sm','md','lg'].map(function(size){
12597             if (settings[size]) {
12598                 cfg.cls += ' col-' + size + '-' + settings[size];
12599             }
12600         });
12601         
12602         var inputblock = input;
12603         
12604         var feedback = {
12605             tag: 'span',
12606             cls: 'glyphicon form-control-feedback'
12607         };
12608             
12609         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12610             
12611             inputblock = {
12612                 cls : 'has-feedback',
12613                 cn :  [
12614                     input,
12615                     feedback
12616                 ] 
12617             };  
12618         }
12619         
12620         if (this.before || this.after) {
12621             
12622             inputblock = {
12623                 cls : 'input-group',
12624                 cn :  [] 
12625             };
12626             
12627             if (this.before && typeof(this.before) == 'string') {
12628                 
12629                 inputblock.cn.push({
12630                     tag :'span',
12631                     cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
12632                     html : this.before
12633                 });
12634             }
12635             if (this.before && typeof(this.before) == 'object') {
12636                 this.before = Roo.factory(this.before);
12637                 
12638                 inputblock.cn.push({
12639                     tag :'span',
12640                     cls : 'roo-input-before input-group-prepend   input-group-' +
12641                         (this.before.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12642                 });
12643             }
12644             
12645             inputblock.cn.push(input);
12646             
12647             if (this.after && typeof(this.after) == 'string') {
12648                 inputblock.cn.push({
12649                     tag :'span',
12650                     cls : 'roo-input-after input-group-append input-group-text input-group-addon',
12651                     html : this.after
12652                 });
12653             }
12654             if (this.after && typeof(this.after) == 'object') {
12655                 this.after = Roo.factory(this.after);
12656                 
12657                 inputblock.cn.push({
12658                     tag :'span',
12659                     cls : 'roo-input-after input-group-append  input-group-' +
12660                         (this.after.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
12661                 });
12662             }
12663             
12664             if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
12665                 inputblock.cls += ' has-feedback';
12666                 inputblock.cn.push(feedback);
12667             }
12668         };
12669         var indicator = {
12670             tag : 'i',
12671             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
12672             tooltip : 'This field is required'
12673         };
12674         if (this.allowBlank ) {
12675             indicator.style = this.allowBlank ? ' display:none' : '';
12676         }
12677         if (align ==='left' && this.fieldLabel.length) {
12678             
12679             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
12680             
12681             cfg.cn = [
12682                 indicator,
12683                 {
12684                     tag: 'label',
12685                     'for' :  id,
12686                     cls : 'control-label col-form-label',
12687                     html : this.fieldLabel
12688
12689                 },
12690                 {
12691                     cls : "", 
12692                     cn: [
12693                         inputblock
12694                     ]
12695                 }
12696             ];
12697             
12698             var labelCfg = cfg.cn[1];
12699             var contentCfg = cfg.cn[2];
12700             
12701             if(this.indicatorpos == 'right'){
12702                 cfg.cn = [
12703                     {
12704                         tag: 'label',
12705                         'for' :  id,
12706                         cls : 'control-label col-form-label',
12707                         cn : [
12708                             {
12709                                 tag : 'span',
12710                                 html : this.fieldLabel
12711                             },
12712                             indicator
12713                         ]
12714                     },
12715                     {
12716                         cls : "",
12717                         cn: [
12718                             inputblock
12719                         ]
12720                     }
12721
12722                 ];
12723                 
12724                 labelCfg = cfg.cn[0];
12725                 contentCfg = cfg.cn[1];
12726             
12727             }
12728             
12729             if(this.labelWidth > 12){
12730                 labelCfg.style = "width: " + this.labelWidth + 'px';
12731             }
12732             
12733             if(this.labelWidth < 13 && this.labelmd == 0){
12734                 this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth;
12735             }
12736             
12737             if(this.labellg > 0){
12738                 labelCfg.cls += ' col-lg-' + this.labellg;
12739                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
12740             }
12741             
12742             if(this.labelmd > 0){
12743                 labelCfg.cls += ' col-md-' + this.labelmd;
12744                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
12745             }
12746             
12747             if(this.labelsm > 0){
12748                 labelCfg.cls += ' col-sm-' + this.labelsm;
12749                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
12750             }
12751             
12752             if(this.labelxs > 0){
12753                 labelCfg.cls += ' col-xs-' + this.labelxs;
12754                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
12755             }
12756             
12757             
12758         } else if ( this.fieldLabel.length) {
12759                 
12760             
12761             
12762             cfg.cn = [
12763                 {
12764                     tag : 'i',
12765                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
12766                     tooltip : 'This field is required',
12767                     style : this.allowBlank ? ' display:none' : '' 
12768                 },
12769                 {
12770                     tag: 'label',
12771                    //cls : 'input-group-addon',
12772                     html : this.fieldLabel
12773
12774                 },
12775
12776                inputblock
12777
12778            ];
12779            
12780            if(this.indicatorpos == 'right'){
12781        
12782                 cfg.cn = [
12783                     {
12784                         tag: 'label',
12785                        //cls : 'input-group-addon',
12786                         html : this.fieldLabel
12787
12788                     },
12789                     {
12790                         tag : 'i',
12791                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
12792                         tooltip : 'This field is required',
12793                         style : this.allowBlank ? ' display:none' : '' 
12794                     },
12795
12796                    inputblock
12797
12798                ];
12799
12800             }
12801
12802         } else {
12803             
12804             cfg.cn = [
12805
12806                     inputblock
12807
12808             ];
12809                 
12810                 
12811         };
12812         
12813         if (this.parentType === 'Navbar' &&  this.parent().bar) {
12814            cfg.cls += ' navbar-form';
12815         }
12816         
12817         if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
12818             // on BS4 we do this only if not form 
12819             cfg.cls += ' navbar-form';
12820             cfg.tag = 'li';
12821         }
12822         
12823         return cfg;
12824         
12825     },
12826     /**
12827      * return the real input element.
12828      */
12829     inputEl: function ()
12830     {
12831         return this.el.select('input.form-control',true).first();
12832     },
12833     
12834     tooltipEl : function()
12835     {
12836         return this.inputEl();
12837     },
12838     
12839     indicatorEl : function()
12840     {
12841         if (Roo.bootstrap.version == 4) {
12842             return false; // not enabled in v4 yet.
12843         }
12844         
12845         var indicator = this.el.select('i.roo-required-indicator',true).first();
12846         
12847         if(!indicator){
12848             return false;
12849         }
12850         
12851         return indicator;
12852         
12853     },
12854     
12855     setDisabled : function(v)
12856     {
12857         var i  = this.inputEl().dom;
12858         if (!v) {
12859             i.removeAttribute('disabled');
12860             return;
12861             
12862         }
12863         i.setAttribute('disabled','true');
12864     },
12865     initEvents : function()
12866     {
12867           
12868         this.inputEl().on("keydown" , this.fireKey,  this);
12869         this.inputEl().on("focus", this.onFocus,  this);
12870         this.inputEl().on("blur", this.onBlur,  this);
12871         
12872         this.inputEl().relayEvent('keyup', this);
12873         this.inputEl().relayEvent('paste', this);
12874         
12875         this.indicator = this.indicatorEl();
12876         
12877         if(this.indicator){
12878             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? - 
12879         }
12880  
12881         // reference to original value for reset
12882         this.originalValue = this.getValue();
12883         //Roo.form.TextField.superclass.initEvents.call(this);
12884         if(this.validationEvent == 'keyup'){
12885             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
12886             this.inputEl().on('keyup', this.filterValidation, this);
12887         }
12888         else if(this.validationEvent !== false){
12889             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
12890         }
12891         
12892         if(this.selectOnFocus){
12893             this.on("focus", this.preFocus, this);
12894             
12895         }
12896         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
12897             this.inputEl().on("keypress", this.filterKeys, this);
12898         } else {
12899             this.inputEl().relayEvent('keypress', this);
12900         }
12901        /* if(this.grow){
12902             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
12903             this.el.on("click", this.autoSize,  this);
12904         }
12905         */
12906         if(this.inputEl().is('input[type=password]') && Roo.isSafari){
12907             this.inputEl().on('keydown', this.SafariOnKeyDown, this);
12908         }
12909         
12910         if (typeof(this.before) == 'object') {
12911             this.before.render(this.el.select('.roo-input-before',true).first());
12912         }
12913         if (typeof(this.after) == 'object') {
12914             this.after.render(this.el.select('.roo-input-after',true).first());
12915         }
12916         
12917         this.inputEl().on('change', this.onChange, this);
12918         
12919     },
12920     filterValidation : function(e){
12921         if(!e.isNavKeyPress()){
12922             this.validationTask.delay(this.validationDelay);
12923         }
12924     },
12925      /**
12926      * Validates the field value
12927      * @return {Boolean} True if the value is valid, else false
12928      */
12929     validate : function(){
12930         //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
12931         if(this.disabled || this.validateValue(this.getRawValue())){
12932             this.markValid();
12933             return true;
12934         }
12935         
12936         this.markInvalid();
12937         return false;
12938     },
12939     
12940     
12941     /**
12942      * Validates a value according to the field's validation rules and marks the field as invalid
12943      * if the validation fails
12944      * @param {Mixed} value The value to validate
12945      * @return {Boolean} True if the value is valid, else false
12946      */
12947     validateValue : function(value)
12948     {
12949         if(this.getVisibilityEl().hasClass('hidden')){
12950             return true;
12951         }
12952         
12953         if(value.length < 1)  { // if it's blank
12954             if(this.allowBlank){
12955                 return true;
12956             }
12957             return false;
12958         }
12959         
12960         if(value.length < this.minLength){
12961             return false;
12962         }
12963         if(value.length > this.maxLength){
12964             return false;
12965         }
12966         if(this.vtype){
12967             var vt = Roo.form.VTypes;
12968             if(!vt[this.vtype](value, this)){
12969                 return false;
12970             }
12971         }
12972         if(typeof this.validator == "function"){
12973             var msg = this.validator(value);
12974             if (typeof(msg) == 'string') {
12975                 this.invalidText = msg;
12976             }
12977             if(msg !== true){
12978                 return false;
12979             }
12980         }
12981         
12982         if(this.regex && !this.regex.test(value)){
12983             return false;
12984         }
12985         
12986         return true;
12987     },
12988     
12989      // private
12990     fireKey : function(e){
12991         //Roo.log('field ' + e.getKey());
12992         if(e.isNavKeyPress()){
12993             this.fireEvent("specialkey", this, e);
12994         }
12995     },
12996     focus : function (selectText){
12997         if(this.rendered){
12998             this.inputEl().focus();
12999             if(selectText === true){
13000                 this.inputEl().dom.select();
13001             }
13002         }
13003         return this;
13004     } ,
13005     
13006     onFocus : function(){
13007         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
13008            // this.el.addClass(this.focusClass);
13009         }
13010         if(!this.hasFocus){
13011             this.hasFocus = true;
13012             this.startValue = this.getValue();
13013             this.fireEvent("focus", this);
13014         }
13015     },
13016     
13017     beforeBlur : Roo.emptyFn,
13018
13019     
13020     // private
13021     onBlur : function(){
13022         this.beforeBlur();
13023         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
13024             //this.el.removeClass(this.focusClass);
13025         }
13026         this.hasFocus = false;
13027         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
13028             this.validate();
13029         }
13030         var v = this.getValue();
13031         if(String(v) !== String(this.startValue)){
13032             this.fireEvent('change', this, v, this.startValue);
13033         }
13034         this.fireEvent("blur", this);
13035     },
13036     
13037     onChange : function(e)
13038     {
13039         var v = this.getValue();
13040         if(String(v) !== String(this.startValue)){
13041             this.fireEvent('change', this, v, this.startValue);
13042         }
13043         
13044     },
13045     
13046     /**
13047      * Resets the current field value to the originally loaded value and clears any validation messages
13048      */
13049     reset : function(){
13050         this.setValue(this.originalValue);
13051         this.validate();
13052     },
13053      /**
13054      * Returns the name of the field
13055      * @return {Mixed} name The name field
13056      */
13057     getName: function(){
13058         return this.name;
13059     },
13060      /**
13061      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
13062      * @return {Mixed} value The field value
13063      */
13064     getValue : function(){
13065         
13066         var v = this.inputEl().getValue();
13067         
13068         return v;
13069     },
13070     /**
13071      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
13072      * @return {Mixed} value The field value
13073      */
13074     getRawValue : function(){
13075         var v = this.inputEl().getValue();
13076         
13077         return v;
13078     },
13079     
13080     /**
13081      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
13082      * @param {Mixed} value The value to set
13083      */
13084     setRawValue : function(v){
13085         return this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13086     },
13087     
13088     selectText : function(start, end){
13089         var v = this.getRawValue();
13090         if(v.length > 0){
13091             start = start === undefined ? 0 : start;
13092             end = end === undefined ? v.length : end;
13093             var d = this.inputEl().dom;
13094             if(d.setSelectionRange){
13095                 d.setSelectionRange(start, end);
13096             }else if(d.createTextRange){
13097                 var range = d.createTextRange();
13098                 range.moveStart("character", start);
13099                 range.moveEnd("character", v.length-end);
13100                 range.select();
13101             }
13102         }
13103     },
13104     
13105     /**
13106      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
13107      * @param {Mixed} value The value to set
13108      */
13109     setValue : function(v){
13110         this.value = v;
13111         if(this.rendered){
13112             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
13113             this.validate();
13114         }
13115     },
13116     
13117     /*
13118     processValue : function(value){
13119         if(this.stripCharsRe){
13120             var newValue = value.replace(this.stripCharsRe, '');
13121             if(newValue !== value){
13122                 this.setRawValue(newValue);
13123                 return newValue;
13124             }
13125         }
13126         return value;
13127     },
13128   */
13129     preFocus : function(){
13130         
13131         if(this.selectOnFocus){
13132             this.inputEl().dom.select();
13133         }
13134     },
13135     filterKeys : function(e){
13136         var k = e.getKey();
13137         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
13138             return;
13139         }
13140         var c = e.getCharCode(), cc = String.fromCharCode(c);
13141         if(Roo.isIE && (e.isSpecialKey() || !cc)){
13142             return;
13143         }
13144         if(!this.maskRe.test(cc)){
13145             e.stopEvent();
13146         }
13147     },
13148      /**
13149      * Clear any invalid styles/messages for this field
13150      */
13151     clearInvalid : function(){
13152         
13153         if(!this.el || this.preventMark){ // not rendered
13154             return;
13155         }
13156         
13157         
13158         this.el.removeClass([this.invalidClass, 'is-invalid']);
13159         
13160         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13161             
13162             var feedback = this.el.select('.form-control-feedback', true).first();
13163             
13164             if(feedback){
13165                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13166             }
13167             
13168         }
13169         
13170         if(this.indicator){
13171             this.indicator.removeClass('visible');
13172             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13173         }
13174         
13175         this.fireEvent('valid', this);
13176     },
13177     
13178      /**
13179      * Mark this field as valid
13180      */
13181     markValid : function()
13182     {
13183         if(!this.el  || this.preventMark){ // not rendered...
13184             return;
13185         }
13186         
13187         this.el.removeClass([this.invalidClass, this.validClass]);
13188         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13189
13190         var feedback = this.el.select('.form-control-feedback', true).first();
13191             
13192         if(feedback){
13193             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13194         }
13195         
13196         if(this.indicator){
13197             this.indicator.removeClass('visible');
13198             this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13199         }
13200         
13201         if(this.disabled){
13202             return;
13203         }
13204         
13205            
13206         if(this.allowBlank && !this.getRawValue().length){
13207             return;
13208         }
13209         if (Roo.bootstrap.version == 3) {
13210             this.el.addClass(this.validClass);
13211         } else {
13212             this.inputEl().addClass('is-valid');
13213         }
13214
13215         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13216             
13217             var feedback = this.el.select('.form-control-feedback', true).first();
13218             
13219             if(feedback){
13220                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13221                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13222             }
13223             
13224         }
13225         
13226         this.fireEvent('valid', this);
13227     },
13228     
13229      /**
13230      * Mark this field as invalid
13231      * @param {String} msg The validation message
13232      */
13233     markInvalid : function(msg)
13234     {
13235         if(!this.el  || this.preventMark){ // not rendered
13236             return;
13237         }
13238         
13239         this.el.removeClass([this.invalidClass, this.validClass]);
13240         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13241         
13242         var feedback = this.el.select('.form-control-feedback', true).first();
13243             
13244         if(feedback){
13245             this.el.select('.form-control-feedback', true).first().removeClass(
13246                     [this.invalidFeedbackClass, this.validFeedbackClass]);
13247         }
13248
13249         if(this.disabled){
13250             return;
13251         }
13252         
13253         if(this.allowBlank && !this.getRawValue().length){
13254             return;
13255         }
13256         
13257         if(this.indicator){
13258             this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
13259             this.indicator.addClass('visible');
13260         }
13261         if (Roo.bootstrap.version == 3) {
13262             this.el.addClass(this.invalidClass);
13263         } else {
13264             this.inputEl().addClass('is-invalid');
13265         }
13266         
13267         
13268         
13269         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
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([this.invalidFeedbackClass, this.validFeedbackClass]);
13275                 
13276                 if(this.getValue().length || this.forceFeedback){
13277                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13278                 }
13279                 
13280             }
13281             
13282         }
13283         
13284         this.fireEvent('invalid', this, msg);
13285     },
13286     // private
13287     SafariOnKeyDown : function(event)
13288     {
13289         // this is a workaround for a password hang bug on chrome/ webkit.
13290         if (this.inputEl().dom.type != 'password') {
13291             return;
13292         }
13293         
13294         var isSelectAll = false;
13295         
13296         if(this.inputEl().dom.selectionEnd > 0){
13297             isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false;
13298         }
13299         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
13300             event.preventDefault();
13301             this.setValue('');
13302             return;
13303         }
13304         
13305         if(isSelectAll  && event.getCharCode() > 31 && !event.ctrlKey) { // not backspace and delete key (or ctrl-v)
13306             
13307             event.preventDefault();
13308             // this is very hacky as keydown always get's upper case.
13309             //
13310             var cc = String.fromCharCode(event.getCharCode());
13311             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
13312             
13313         }
13314     },
13315     adjustWidth : function(tag, w){
13316         tag = tag.toLowerCase();
13317         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
13318             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
13319                 if(tag == 'input'){
13320                     return w + 2;
13321                 }
13322                 if(tag == 'textarea'){
13323                     return w-2;
13324                 }
13325             }else if(Roo.isOpera){
13326                 if(tag == 'input'){
13327                     return w + 2;
13328                 }
13329                 if(tag == 'textarea'){
13330                     return w-2;
13331                 }
13332             }
13333         }
13334         return w;
13335     },
13336     
13337     setFieldLabel : function(v)
13338     {
13339         if(!this.rendered){
13340             return;
13341         }
13342         
13343         if(this.indicatorEl()){
13344             var ar = this.el.select('label > span',true);
13345             
13346             if (ar.elements.length) {
13347                 this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13348                 this.fieldLabel = v;
13349                 return;
13350             }
13351             
13352             var br = this.el.select('label',true);
13353             
13354             if(br.elements.length) {
13355                 this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13356                 this.fieldLabel = v;
13357                 return;
13358             }
13359             
13360             Roo.log('Cannot Found any of label > span || label in input');
13361             return;
13362         }
13363         
13364         this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
13365         this.fieldLabel = v;
13366         
13367         
13368     }
13369 });
13370
13371  
13372 /*
13373  * - LGPL
13374  *
13375  * Input
13376  * 
13377  */
13378
13379 /**
13380  * @class Roo.bootstrap.form.TextArea
13381  * @extends Roo.bootstrap.form.Input
13382  * Bootstrap TextArea class
13383  * @cfg {Number} cols Specifies the visible width of a text area
13384  * @cfg {Number} rows Specifies the visible number of lines in a text area
13385  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
13386  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
13387  * @cfg {string} html text
13388  * 
13389  * @constructor
13390  * Create a new TextArea
13391  * @param {Object} config The config object
13392  */
13393
13394 Roo.bootstrap.form.TextArea = function(config){
13395     Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config);
13396    
13397 };
13398
13399 Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input,  {
13400      
13401     cols : false,
13402     rows : 5,
13403     readOnly : false,
13404     warp : 'soft',
13405     resize : false,
13406     value: false,
13407     html: false,
13408     
13409     getAutoCreate : function(){
13410         
13411         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
13412         
13413         var id = Roo.id();
13414         
13415         var cfg = {};
13416         
13417         if(this.inputType != 'hidden'){
13418             cfg.cls = 'form-group' //input-group
13419         }
13420         
13421         var input =  {
13422             tag: 'textarea',
13423             id : id,
13424             warp : this.warp,
13425             rows : this.rows,
13426             value : this.value || '',
13427             html: this.html || '',
13428             cls : 'form-control',
13429             placeholder : this.placeholder || '' 
13430             
13431         };
13432         
13433         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
13434             input.maxLength = this.maxLength;
13435         }
13436         
13437         if(this.resize){
13438             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
13439         }
13440         
13441         if(this.cols){
13442             input.cols = this.cols;
13443         }
13444         
13445         if (this.readOnly) {
13446             input.readonly = true;
13447         }
13448         
13449         if (this.name) {
13450             input.name = this.name;
13451         }
13452         
13453         if (this.size) {
13454             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
13455         }
13456         
13457         var settings=this;
13458         ['xs','sm','md','lg'].map(function(size){
13459             if (settings[size]) {
13460                 cfg.cls += ' col-' + size + '-' + settings[size];
13461             }
13462         });
13463         
13464         var inputblock = input;
13465         
13466         if(this.hasFeedback && !this.allowBlank){
13467             
13468             var feedback = {
13469                 tag: 'span',
13470                 cls: 'glyphicon form-control-feedback'
13471             };
13472
13473             inputblock = {
13474                 cls : 'has-feedback',
13475                 cn :  [
13476                     input,
13477                     feedback
13478                 ] 
13479             };  
13480         }
13481         
13482         
13483         if (this.before || this.after) {
13484             
13485             inputblock = {
13486                 cls : 'input-group',
13487                 cn :  [] 
13488             };
13489             if (this.before) {
13490                 inputblock.cn.push({
13491                     tag :'span',
13492                     cls : 'input-group-addon',
13493                     html : this.before
13494                 });
13495             }
13496             
13497             inputblock.cn.push(input);
13498             
13499             if(this.hasFeedback && !this.allowBlank){
13500                 inputblock.cls += ' has-feedback';
13501                 inputblock.cn.push(feedback);
13502             }
13503             
13504             if (this.after) {
13505                 inputblock.cn.push({
13506                     tag :'span',
13507                     cls : 'input-group-addon',
13508                     html : this.after
13509                 });
13510             }
13511             
13512         }
13513         
13514         if (align ==='left' && this.fieldLabel.length) {
13515             cfg.cn = [
13516                 {
13517                     tag: 'label',
13518                     'for' :  id,
13519                     cls : 'control-label',
13520                     html : this.fieldLabel
13521                 },
13522                 {
13523                     cls : "",
13524                     cn: [
13525                         inputblock
13526                     ]
13527                 }
13528
13529             ];
13530             
13531             if(this.labelWidth > 12){
13532                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
13533             }
13534
13535             if(this.labelWidth < 13 && this.labelmd == 0){
13536                 this.labelmd = this.labelWidth;
13537             }
13538
13539             if(this.labellg > 0){
13540                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
13541                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
13542             }
13543
13544             if(this.labelmd > 0){
13545                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
13546                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
13547             }
13548
13549             if(this.labelsm > 0){
13550                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
13551                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
13552             }
13553
13554             if(this.labelxs > 0){
13555                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
13556                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
13557             }
13558             
13559         } else if ( this.fieldLabel.length) {
13560             cfg.cn = [
13561
13562                {
13563                    tag: 'label',
13564                    //cls : 'input-group-addon',
13565                    html : this.fieldLabel
13566
13567                },
13568
13569                inputblock
13570
13571            ];
13572
13573         } else {
13574
13575             cfg.cn = [
13576
13577                 inputblock
13578
13579             ];
13580                 
13581         }
13582         
13583         if (this.disabled) {
13584             input.disabled=true;
13585         }
13586         
13587         return cfg;
13588         
13589     },
13590     /**
13591      * return the real textarea element.
13592      */
13593     inputEl: function ()
13594     {
13595         return this.el.select('textarea.form-control',true).first();
13596     },
13597     
13598     /**
13599      * Clear any invalid styles/messages for this field
13600      */
13601     clearInvalid : function()
13602     {
13603         
13604         if(!this.el || this.preventMark){ // not rendered
13605             return;
13606         }
13607         
13608         var label = this.el.select('label', true).first();
13609         var icon = this.el.select('i.fa-star', true).first();
13610         
13611         if(label && icon){
13612             icon.remove();
13613         }
13614         this.el.removeClass( this.validClass);
13615         this.inputEl().removeClass('is-invalid');
13616          
13617         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13618             
13619             var feedback = this.el.select('.form-control-feedback', true).first();
13620             
13621             if(feedback){
13622                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
13623             }
13624             
13625         }
13626         
13627         this.fireEvent('valid', this);
13628     },
13629     
13630      /**
13631      * Mark this field as valid
13632      */
13633     markValid : function()
13634     {
13635         if(!this.el  || this.preventMark){ // not rendered
13636             return;
13637         }
13638         
13639         this.el.removeClass([this.invalidClass, this.validClass]);
13640         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13641         
13642         var feedback = this.el.select('.form-control-feedback', true).first();
13643             
13644         if(feedback){
13645             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13646         }
13647
13648         if(this.disabled || this.allowBlank){
13649             return;
13650         }
13651         
13652         var label = this.el.select('label', true).first();
13653         var icon = this.el.select('i.fa-star', true).first();
13654         
13655         if(label && icon){
13656             icon.remove();
13657         }
13658         if (Roo.bootstrap.version == 3) {
13659             this.el.addClass(this.validClass);
13660         } else {
13661             this.inputEl().addClass('is-valid');
13662         }
13663         
13664         
13665         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
13666             
13667             var feedback = this.el.select('.form-control-feedback', true).first();
13668             
13669             if(feedback){
13670                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13671                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
13672             }
13673             
13674         }
13675         
13676         this.fireEvent('valid', this);
13677     },
13678     
13679      /**
13680      * Mark this field as invalid
13681      * @param {String} msg The validation message
13682      */
13683     markInvalid : function(msg)
13684     {
13685         if(!this.el  || this.preventMark){ // not rendered
13686             return;
13687         }
13688         
13689         this.el.removeClass([this.invalidClass, this.validClass]);
13690         this.inputEl().removeClass(['is-valid', 'is-invalid']);
13691         
13692         var feedback = this.el.select('.form-control-feedback', true).first();
13693             
13694         if(feedback){
13695             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13696         }
13697
13698         if(this.disabled || this.allowBlank){
13699             return;
13700         }
13701         
13702         var label = this.el.select('label', true).first();
13703         var icon = this.el.select('i.fa-star', true).first();
13704         
13705         if(!this.getValue().length && label && !icon){
13706             this.el.createChild({
13707                 tag : 'i',
13708                 cls : 'text-danger fa fa-lg fa-star',
13709                 tooltip : 'This field is required',
13710                 style : 'margin-right:5px;'
13711             }, label, true);
13712         }
13713         
13714         if (Roo.bootstrap.version == 3) {
13715             this.el.addClass(this.invalidClass);
13716         } else {
13717             this.inputEl().addClass('is-invalid');
13718         }
13719         
13720         // fixme ... this may be depricated need to test..
13721         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
13722             
13723             var feedback = this.el.select('.form-control-feedback', true).first();
13724             
13725             if(feedback){
13726                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
13727                 
13728                 if(this.getValue().length || this.forceFeedback){
13729                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
13730                 }
13731                 
13732             }
13733             
13734         }
13735         
13736         this.fireEvent('invalid', this, msg);
13737     }
13738 });
13739
13740  
13741 /*
13742  * - LGPL
13743  *
13744  * trigger field - base class for combo..
13745  * 
13746  */
13747  
13748 /**
13749  * @class Roo.bootstrap.form.TriggerField
13750  * @extends Roo.bootstrap.form.Input
13751  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
13752  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
13753  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
13754  * for which you can provide a custom implementation.  For example:
13755  * <pre><code>
13756 var trigger = new Roo.bootstrap.form.TriggerField();
13757 trigger.onTriggerClick = myTriggerFn;
13758 trigger.applyTo('my-field');
13759 </code></pre>
13760  *
13761  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
13762  * {@link Roo.bootstrap.form.DateField} and {@link Roo.bootstrap.form.ComboBox} are perfect examples of this.
13763  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
13764  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
13765  * @cfg {String} caret (search|calendar) BS3 only - carat fa name
13766
13767  * @constructor
13768  * Create a new TriggerField.
13769  * @param {Object} config Configuration options (valid {@Roo.bootstrap.form.Input} config options will also be applied
13770  * to the base TextField)
13771  */
13772 Roo.bootstrap.form.TriggerField = function(config){
13773     this.mimicing = false;
13774     Roo.bootstrap.form.TriggerField.superclass.constructor.call(this, config);
13775 };
13776
13777 Roo.extend(Roo.bootstrap.form.TriggerField, Roo.bootstrap.form.Input,  {
13778     /**
13779      * @cfg {String} triggerClass A CSS class to apply to the trigger
13780      */
13781      /**
13782      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
13783      */
13784     hideTrigger:false,
13785
13786     /**
13787      * @cfg {Boolean} removable (true|false) special filter default false
13788      */
13789     removable : false,
13790     
13791     /** @cfg {Boolean} grow @hide */
13792     /** @cfg {Number} growMin @hide */
13793     /** @cfg {Number} growMax @hide */
13794
13795     /**
13796      * @hide 
13797      * @method
13798      */
13799     autoSize: Roo.emptyFn,
13800     // private
13801     monitorTab : true,
13802     // private
13803     deferHeight : true,
13804
13805     
13806     actionMode : 'wrap',
13807     
13808     caret : false,
13809     
13810     
13811     getAutoCreate : function(){
13812        
13813         var align = this.labelAlign || this.parentLabelAlign();
13814         
13815         var id = Roo.id();
13816         
13817         var cfg = {
13818             cls: 'form-group' //input-group
13819         };
13820         
13821         
13822         var input =  {
13823             tag: 'input',
13824             id : id,
13825             type : this.inputType,
13826             cls : 'form-control',
13827             autocomplete: 'new-password',
13828             placeholder : this.placeholder || '' 
13829             
13830         };
13831         if (this.name) {
13832             input.name = this.name;
13833         }
13834         if (this.size) {
13835             input.cls += ' input-' + this.size;
13836         }
13837         
13838         if (this.disabled) {
13839             input.disabled=true;
13840         }
13841         
13842         var inputblock = input;
13843         
13844         if(this.hasFeedback && !this.allowBlank){
13845             
13846             var feedback = {
13847                 tag: 'span',
13848                 cls: 'glyphicon form-control-feedback'
13849             };
13850             
13851             if(this.removable && !this.editable  ){
13852                 inputblock = {
13853                     cls : 'has-feedback',
13854                     cn :  [
13855                         inputblock,
13856                         {
13857                             tag: 'button',
13858                             html : 'x',
13859                             cls : 'roo-combo-removable-btn close'
13860                         },
13861                         feedback
13862                     ] 
13863                 };
13864             } else {
13865                 inputblock = {
13866                     cls : 'has-feedback',
13867                     cn :  [
13868                         inputblock,
13869                         feedback
13870                     ] 
13871                 };
13872             }
13873
13874         } else {
13875             if(this.removable && !this.editable ){
13876                 inputblock = {
13877                     cls : 'roo-removable',
13878                     cn :  [
13879                         inputblock,
13880                         {
13881                             tag: 'button',
13882                             html : 'x',
13883                             cls : 'roo-combo-removable-btn close'
13884                         }
13885                     ] 
13886                 };
13887             }
13888         }
13889         
13890         if (this.before || this.after) {
13891             
13892             inputblock = {
13893                 cls : 'input-group',
13894                 cn :  [] 
13895             };
13896             if (this.before) {
13897                 inputblock.cn.push({
13898                     tag :'span',
13899                     cls : 'input-group-addon input-group-prepend input-group-text',
13900                     html : this.before
13901                 });
13902             }
13903             
13904             inputblock.cn.push(input);
13905             
13906             if(this.hasFeedback && !this.allowBlank){
13907                 inputblock.cls += ' has-feedback';
13908                 inputblock.cn.push(feedback);
13909             }
13910             
13911             if (this.after) {
13912                 inputblock.cn.push({
13913                     tag :'span',
13914                     cls : 'input-group-addon input-group-append input-group-text',
13915                     html : this.after
13916                 });
13917             }
13918             
13919         };
13920         
13921       
13922         
13923         var ibwrap = inputblock;
13924         
13925         if(this.multiple){
13926             ibwrap = {
13927                 tag: 'ul',
13928                 cls: 'roo-select2-choices',
13929                 cn:[
13930                     {
13931                         tag: 'li',
13932                         cls: 'roo-select2-search-field',
13933                         cn: [
13934
13935                             inputblock
13936                         ]
13937                     }
13938                 ]
13939             };
13940                 
13941         }
13942         
13943         var combobox = {
13944             cls: 'roo-select2-container input-group',
13945             cn: [
13946                  {
13947                     tag: 'input',
13948                     type : 'hidden',
13949                     cls: 'form-hidden-field'
13950                 },
13951                 ibwrap
13952             ]
13953         };
13954         
13955         if(!this.multiple && this.showToggleBtn){
13956             
13957             var caret = {
13958                         tag: 'span',
13959                         cls: 'caret'
13960              };
13961             if (this.caret != false) {
13962                 caret = {
13963                      tag: 'i',
13964                      cls: 'fa fa-' + this.caret
13965                 };
13966                 
13967             }
13968             
13969             combobox.cn.push({
13970                 tag :'span',
13971                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
13972                 cn : [
13973                     Roo.bootstrap.version == 3 ? caret : '',
13974                     {
13975                         tag: 'span',
13976                         cls: 'combobox-clear',
13977                         cn  : [
13978                             {
13979                                 tag : 'i',
13980                                 cls: 'icon-remove'
13981                             }
13982                         ]
13983                     }
13984                 ]
13985
13986             })
13987         }
13988         
13989         if(this.multiple){
13990             combobox.cls += ' roo-select2-container-multi';
13991         }
13992          var indicator = {
13993             tag : 'i',
13994             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
13995             tooltip : 'This field is required'
13996         };
13997         if (Roo.bootstrap.version == 4) {
13998             indicator = {
13999                 tag : 'i',
14000                 style : 'display:none'
14001             };
14002         }
14003         
14004         
14005         if (align ==='left' && this.fieldLabel.length) {
14006             
14007             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
14008
14009             cfg.cn = [
14010                 indicator,
14011                 {
14012                     tag: 'label',
14013                     'for' :  id,
14014                     cls : 'control-label',
14015                     html : this.fieldLabel
14016
14017                 },
14018                 {
14019                     cls : "", 
14020                     cn: [
14021                         combobox
14022                     ]
14023                 }
14024
14025             ];
14026             
14027             var labelCfg = cfg.cn[1];
14028             var contentCfg = cfg.cn[2];
14029             
14030             if(this.indicatorpos == 'right'){
14031                 cfg.cn = [
14032                     {
14033                         tag: 'label',
14034                         'for' :  id,
14035                         cls : 'control-label',
14036                         cn : [
14037                             {
14038                                 tag : 'span',
14039                                 html : this.fieldLabel
14040                             },
14041                             indicator
14042                         ]
14043                     },
14044                     {
14045                         cls : "", 
14046                         cn: [
14047                             combobox
14048                         ]
14049                     }
14050
14051                 ];
14052                 
14053                 labelCfg = cfg.cn[0];
14054                 contentCfg = cfg.cn[1];
14055             }
14056             
14057             if(this.labelWidth > 12){
14058                 labelCfg.style = "width: " + this.labelWidth + 'px';
14059             }
14060             
14061             if(this.labelWidth < 13 && this.labelmd == 0){
14062                 this.labelmd = this.labelWidth;
14063             }
14064             
14065             if(this.labellg > 0){
14066                 labelCfg.cls += ' col-lg-' + this.labellg;
14067                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
14068             }
14069             
14070             if(this.labelmd > 0){
14071                 labelCfg.cls += ' col-md-' + this.labelmd;
14072                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
14073             }
14074             
14075             if(this.labelsm > 0){
14076                 labelCfg.cls += ' col-sm-' + this.labelsm;
14077                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
14078             }
14079             
14080             if(this.labelxs > 0){
14081                 labelCfg.cls += ' col-xs-' + this.labelxs;
14082                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
14083             }
14084             
14085         } else if ( this.fieldLabel.length) {
14086 //                Roo.log(" label");
14087             cfg.cn = [
14088                 indicator,
14089                {
14090                    tag: 'label',
14091                    //cls : 'input-group-addon',
14092                    html : this.fieldLabel
14093
14094                },
14095
14096                combobox
14097
14098             ];
14099             
14100             if(this.indicatorpos == 'right'){
14101                 
14102                 cfg.cn = [
14103                     {
14104                        tag: 'label',
14105                        cn : [
14106                            {
14107                                tag : 'span',
14108                                html : this.fieldLabel
14109                            },
14110                            indicator
14111                        ]
14112
14113                     },
14114                     combobox
14115
14116                 ];
14117
14118             }
14119
14120         } else {
14121             
14122 //                Roo.log(" no label && no align");
14123                 cfg = combobox
14124                      
14125                 
14126         }
14127         
14128         var settings=this;
14129         ['xs','sm','md','lg'].map(function(size){
14130             if (settings[size]) {
14131                 cfg.cls += ' col-' + size + '-' + settings[size];
14132             }
14133         });
14134         
14135         return cfg;
14136         
14137     },
14138     
14139     
14140     
14141     // private
14142     onResize : function(w, h){
14143 //        Roo.bootstrap.form.TriggerField.superclass.onResize.apply(this, arguments);
14144 //        if(typeof w == 'number'){
14145 //            var x = w - this.trigger.getWidth();
14146 //            this.inputEl().setWidth(this.adjustWidth('input', x));
14147 //            this.trigger.setStyle('left', x+'px');
14148 //        }
14149     },
14150
14151     // private
14152     adjustSize : Roo.BoxComponent.prototype.adjustSize,
14153
14154     // private
14155     getResizeEl : function(){
14156         return this.inputEl();
14157     },
14158
14159     // private
14160     getPositionEl : function(){
14161         return this.inputEl();
14162     },
14163
14164     // private
14165     alignErrorIcon : function(){
14166         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
14167     },
14168
14169     // private
14170     initEvents : function(){
14171         
14172         this.createList();
14173         
14174         Roo.bootstrap.form.TriggerField.superclass.initEvents.call(this);
14175         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
14176         if(!this.multiple && this.showToggleBtn){
14177             this.trigger = this.el.select('span.dropdown-toggle',true).first();
14178             if(this.hideTrigger){
14179                 this.trigger.setDisplayed(false);
14180             }
14181             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
14182         }
14183         
14184         if(this.multiple){
14185             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
14186         }
14187         
14188         if(this.removable && !this.editable && !this.tickable){
14189             var close = this.closeTriggerEl();
14190             
14191             if(close){
14192                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
14193                 close.on('click', this.removeBtnClick, this, close);
14194             }
14195         }
14196         
14197         //this.trigger.addClassOnOver('x-form-trigger-over');
14198         //this.trigger.addClassOnClick('x-form-trigger-click');
14199         
14200         //if(!this.width){
14201         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
14202         //}
14203     },
14204     
14205     closeTriggerEl : function()
14206     {
14207         var close = this.el.select('.roo-combo-removable-btn', true).first();
14208         return close ? close : false;
14209     },
14210     
14211     removeBtnClick : function(e, h, el)
14212     {
14213         e.preventDefault();
14214         
14215         if(this.fireEvent("remove", this) !== false){
14216             this.reset();
14217             this.fireEvent("afterremove", this)
14218         }
14219     },
14220     
14221     createList : function()
14222     {
14223         this.list = Roo.get(document.body).createChild({
14224             tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
14225             cls: 'typeahead typeahead-long dropdown-menu shadow',
14226             style: 'display:none'
14227         });
14228         
14229         this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
14230         
14231     },
14232
14233     // private
14234     initTrigger : function(){
14235        
14236     },
14237
14238     // private
14239     onDestroy : function(){
14240         if(this.trigger){
14241             this.trigger.removeAllListeners();
14242           //  this.trigger.remove();
14243         }
14244         //if(this.wrap){
14245         //    this.wrap.remove();
14246         //}
14247         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
14248     },
14249
14250     // private
14251     onFocus : function(){
14252         Roo.bootstrap.form.TriggerField.superclass.onFocus.call(this);
14253         /*
14254         if(!this.mimicing){
14255             this.wrap.addClass('x-trigger-wrap-focus');
14256             this.mimicing = true;
14257             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
14258             if(this.monitorTab){
14259                 this.el.on("keydown", this.checkTab, this);
14260             }
14261         }
14262         */
14263     },
14264
14265     // private
14266     checkTab : function(e){
14267         if(e.getKey() == e.TAB){
14268             this.triggerBlur();
14269         }
14270     },
14271
14272     // private
14273     onBlur : function(){
14274         // do nothing
14275     },
14276
14277     // private
14278     mimicBlur : function(e, t){
14279         /*
14280         if(!this.wrap.contains(t) && this.validateBlur()){
14281             this.triggerBlur();
14282         }
14283         */
14284     },
14285
14286     // private
14287     triggerBlur : function(){
14288         this.mimicing = false;
14289         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
14290         if(this.monitorTab){
14291             this.el.un("keydown", this.checkTab, this);
14292         }
14293         //this.wrap.removeClass('x-trigger-wrap-focus');
14294         Roo.bootstrap.form.TriggerField.superclass.onBlur.call(this);
14295     },
14296
14297     // private
14298     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
14299     validateBlur : function(e, t){
14300         return true;
14301     },
14302
14303     // private
14304     onDisable : function(){
14305         this.inputEl().dom.disabled = true;
14306         //Roo.bootstrap.form.TriggerField.superclass.onDisable.call(this);
14307         //if(this.wrap){
14308         //    this.wrap.addClass('x-item-disabled');
14309         //}
14310     },
14311
14312     // private
14313     onEnable : function(){
14314         this.inputEl().dom.disabled = false;
14315         //Roo.bootstrap.form.TriggerField.superclass.onEnable.call(this);
14316         //if(this.wrap){
14317         //    this.el.removeClass('x-item-disabled');
14318         //}
14319     },
14320
14321     // private
14322     onShow : function(){
14323         var ae = this.getActionEl();
14324         
14325         if(ae){
14326             ae.dom.style.display = '';
14327             ae.dom.style.visibility = 'visible';
14328         }
14329     },
14330
14331     // private
14332     
14333     onHide : function(){
14334         var ae = this.getActionEl();
14335         ae.dom.style.display = 'none';
14336     },
14337
14338     /**
14339      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
14340      * by an implementing function.
14341      * @method
14342      * @param {EventObject} e
14343      */
14344     onTriggerClick : Roo.emptyFn
14345 });
14346  
14347 /*
14348 * Licence: LGPL
14349 */
14350
14351 /**
14352  * @class Roo.bootstrap.form.CardUploader
14353  * @extends Roo.bootstrap.Button
14354  * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
14355  * @cfg {Number} errorTimeout default 3000
14356  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
14357  * @cfg {Array}  html The button text.
14358
14359  *
14360  * @constructor
14361  * Create a new CardUploader
14362  * @param {Object} config The config object
14363  */
14364
14365 Roo.bootstrap.form.CardUploader = function(config){
14366     
14367  
14368     
14369     Roo.bootstrap.form.CardUploader.superclass.constructor.call(this, config);
14370     
14371     
14372     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
14373         return r.data.id
14374      });
14375     
14376      this.addEvents({
14377          // raw events
14378         /**
14379          * @event preview
14380          * When a image is clicked on - and needs to display a slideshow or similar..
14381          * @param {Roo.bootstrap.Card} this
14382          * @param {Object} The image information data 
14383          *
14384          */
14385         'preview' : true,
14386          /**
14387          * @event download
14388          * When a the download link is clicked
14389          * @param {Roo.bootstrap.Card} this
14390          * @param {Object} The image information data  contains 
14391          */
14392         'download' : true
14393         
14394     });
14395 };
14396  
14397 Roo.extend(Roo.bootstrap.form.CardUploader, Roo.bootstrap.form.Input,  {
14398     
14399      
14400     errorTimeout : 3000,
14401      
14402     images : false,
14403    
14404     fileCollection : false,
14405     allowBlank : true,
14406     
14407     getAutoCreate : function()
14408     {
14409         
14410         var cfg =  {
14411             cls :'form-group' ,
14412             cn : [
14413                
14414                 {
14415                     tag: 'label',
14416                    //cls : 'input-group-addon',
14417                     html : this.fieldLabel
14418
14419                 },
14420
14421                 {
14422                     tag: 'input',
14423                     type : 'hidden',
14424                     name : this.name,
14425                     value : this.value,
14426                     cls : 'd-none  form-control'
14427                 },
14428                 
14429                 {
14430                     tag: 'input',
14431                     multiple : 'multiple',
14432                     type : 'file',
14433                     cls : 'd-none  roo-card-upload-selector'
14434                 },
14435                 
14436                 {
14437                     cls : 'roo-card-uploader-button-container w-100 mb-2'
14438                 },
14439                 {
14440                     cls : 'card-columns roo-card-uploader-container'
14441                 }
14442
14443             ]
14444         };
14445            
14446          
14447         return cfg;
14448     },
14449     
14450     getChildContainer : function() /// what children are added to.
14451     {
14452         return this.containerEl;
14453     },
14454    
14455     getButtonContainer : function() /// what children are added to.
14456     {
14457         return this.el.select(".roo-card-uploader-button-container").first();
14458     },
14459    
14460     initEvents : function()
14461     {
14462         
14463         Roo.bootstrap.form.Input.prototype.initEvents.call(this);
14464         
14465         var t = this;
14466         this.addxtype({
14467             xns: Roo.bootstrap,
14468
14469             xtype : 'Button',
14470             container_method : 'getButtonContainer' ,            
14471             html :  this.html, // fix changable?
14472             cls : 'w-100 ',
14473             listeners : {
14474                 'click' : function(btn, e) {
14475                     t.onClick(e);
14476                 }
14477             }
14478         });
14479         
14480         
14481         
14482         
14483         this.urlAPI = (window.createObjectURL && window) || 
14484                                 (window.URL && URL.revokeObjectURL && URL) || 
14485                                 (window.webkitURL && webkitURL);
14486                         
14487          
14488          
14489          
14490         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
14491         
14492         this.selectorEl.on('change', this.onFileSelected, this);
14493         if (this.images) {
14494             var t = this;
14495             this.images.forEach(function(img) {
14496                 t.addCard(img)
14497             });
14498             this.images = false;
14499         }
14500         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
14501          
14502        
14503     },
14504     
14505    
14506     onClick : function(e)
14507     {
14508         e.preventDefault();
14509          
14510         this.selectorEl.dom.click();
14511          
14512     },
14513     
14514     onFileSelected : function(e)
14515     {
14516         e.preventDefault();
14517         
14518         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
14519             return;
14520         }
14521         
14522         Roo.each(this.selectorEl.dom.files, function(file){    
14523             this.addFile(file);
14524         }, this);
14525          
14526     },
14527     
14528       
14529     
14530       
14531     
14532     addFile : function(file)
14533     {
14534            
14535         if(typeof(file) === 'string'){
14536             throw "Add file by name?"; // should not happen
14537             return;
14538         }
14539         
14540         if(!file || !this.urlAPI){
14541             return;
14542         }
14543         
14544         // file;
14545         // file.type;
14546         
14547         var _this = this;
14548         
14549         
14550         var url = _this.urlAPI.createObjectURL( file);
14551            
14552         this.addCard({
14553             id : Roo.bootstrap.form.CardUploader.ID--,
14554             is_uploaded : false,
14555             src : url,
14556             srcfile : file,
14557             title : file.name,
14558             mimetype : file.type,
14559             preview : false,
14560             is_deleted : 0
14561         });
14562         
14563     },
14564     
14565     /**
14566      * addCard - add an Attachment to the uploader
14567      * @param data - the data about the image to upload
14568      *
14569      * {
14570           id : 123
14571           title : "Title of file",
14572           is_uploaded : false,
14573           src : "http://.....",
14574           srcfile : { the File upload object },
14575           mimetype : file.type,
14576           preview : false,
14577           is_deleted : 0
14578           .. any other data...
14579         }
14580      *
14581      * 
14582     */
14583     
14584     addCard : function (data)
14585     {
14586         // hidden input element?
14587         // if the file is not an image...
14588         //then we need to use something other that and header_image
14589         var t = this;
14590         //   remove.....
14591         var footer = [
14592             {
14593                 xns : Roo.bootstrap,
14594                 xtype : 'CardFooter',
14595                  items: [
14596                     {
14597                         xns : Roo.bootstrap,
14598                         xtype : 'Element',
14599                         cls : 'd-flex',
14600                         items : [
14601                             
14602                             {
14603                                 xns : Roo.bootstrap,
14604                                 xtype : 'Button',
14605                                 html : String.format("<small>{0}</small>", data.title),
14606                                 cls : 'col-10 text-left',
14607                                 size: 'sm',
14608                                 weight: 'link',
14609                                 fa : 'download',
14610                                 listeners : {
14611                                     click : function() {
14612                                      
14613                                         t.fireEvent( "download", t, data );
14614                                     }
14615                                 }
14616                             },
14617                           
14618                             {
14619                                 xns : Roo.bootstrap,
14620                                 xtype : 'Button',
14621                                 style: 'max-height: 28px; ',
14622                                 size : 'sm',
14623                                 weight: 'danger',
14624                                 cls : 'col-2',
14625                                 fa : 'times',
14626                                 listeners : {
14627                                     click : function() {
14628                                         t.removeCard(data.id)
14629                                     }
14630                                 }
14631                             }
14632                         ]
14633                     }
14634                     
14635                 ] 
14636             }
14637             
14638         ];
14639         
14640         var cn = this.addxtype(
14641             {
14642                  
14643                 xns : Roo.bootstrap,
14644                 xtype : 'Card',
14645                 closeable : true,
14646                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
14647                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
14648                 header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
14649                 data : data,
14650                 html : false,
14651                  
14652                 items : footer,
14653                 initEvents : function() {
14654                     Roo.bootstrap.Card.prototype.initEvents.call(this);
14655                     var card = this;
14656                     this.imgEl = this.el.select('.card-img-top').first();
14657                     if (this.imgEl) {
14658                         this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this);
14659                         this.imgEl.set({ 'pointer' : 'cursor' });
14660                                   
14661                     }
14662                     this.getCardFooter().addClass('p-1');
14663                     
14664                   
14665                 }
14666                 
14667             }
14668         );
14669         // dont' really need ot update items.
14670         // this.items.push(cn);
14671         this.fileCollection.add(cn);
14672         
14673         if (!data.srcfile) {
14674             this.updateInput();
14675             return;
14676         }
14677             
14678         var _t = this;
14679         var reader = new FileReader();
14680         reader.addEventListener("load", function() {  
14681             data.srcdata =  reader.result;
14682             _t.updateInput();
14683         });
14684         reader.readAsDataURL(data.srcfile);
14685         
14686         
14687         
14688     },
14689     removeCard : function(id)
14690     {
14691         
14692         var card  = this.fileCollection.get(id);
14693         card.data.is_deleted = 1;
14694         card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
14695         //this.fileCollection.remove(card);
14696         //this.items = this.items.filter(function(e) { return e != card });
14697         // dont' really need ot update items.
14698         card.el.dom.parentNode.removeChild(card.el.dom);
14699         this.updateInput();
14700
14701         
14702     },
14703     reset: function()
14704     {
14705         this.fileCollection.each(function(card) {
14706             if (card.el.dom && card.el.dom.parentNode) {
14707                 card.el.dom.parentNode.removeChild(card.el.dom);
14708             }
14709         });
14710         this.fileCollection.clear();
14711         this.updateInput();
14712     },
14713     
14714     updateInput : function()
14715     {
14716          var data = [];
14717         this.fileCollection.each(function(e) {
14718             data.push(e.data);
14719             
14720         });
14721         this.inputEl().dom.value = JSON.stringify(data);
14722         
14723         
14724         
14725     }
14726     
14727     
14728 });
14729
14730
14731 Roo.bootstrap.form.CardUploader.ID = -1;/*
14732  * Based on:
14733  * Ext JS Library 1.1.1
14734  * Copyright(c) 2006-2007, Ext JS, LLC.
14735  *
14736  * Originally Released Under LGPL - original licence link has changed is not relivant.
14737  *
14738  * Fork - LGPL
14739  * <script type="text/javascript">
14740  */
14741
14742
14743 /**
14744  * @class Roo.data.SortTypes
14745  * @static
14746  * Defines the default sorting (casting?) comparison functions used when sorting data.
14747  */
14748 Roo.data.SortTypes = {
14749     /**
14750      * Default sort that does nothing
14751      * @param {Mixed} s The value being converted
14752      * @return {Mixed} The comparison value
14753      */
14754     none : function(s){
14755         return s;
14756     },
14757     
14758     /**
14759      * The regular expression used to strip tags
14760      * @type {RegExp}
14761      * @property
14762      */
14763     stripTagsRE : /<\/?[^>]+>/gi,
14764     
14765     /**
14766      * Strips all HTML tags to sort on text only
14767      * @param {Mixed} s The value being converted
14768      * @return {String} The comparison value
14769      */
14770     asText : function(s){
14771         return String(s).replace(this.stripTagsRE, "");
14772     },
14773     
14774     /**
14775      * Strips all HTML tags to sort on text only - Case insensitive
14776      * @param {Mixed} s The value being converted
14777      * @return {String} The comparison value
14778      */
14779     asUCText : function(s){
14780         return String(s).toUpperCase().replace(this.stripTagsRE, "");
14781     },
14782     
14783     /**
14784      * Case insensitive string
14785      * @param {Mixed} s The value being converted
14786      * @return {String} The comparison value
14787      */
14788     asUCString : function(s) {
14789         return String(s).toUpperCase();
14790     },
14791     
14792     /**
14793      * Date sorting
14794      * @param {Mixed} s The value being converted
14795      * @return {Number} The comparison value
14796      */
14797     asDate : function(s) {
14798         if(!s){
14799             return 0;
14800         }
14801         if(s instanceof Date){
14802             return s.getTime();
14803         }
14804         return Date.parse(String(s));
14805     },
14806     
14807     /**
14808      * Float sorting
14809      * @param {Mixed} s The value being converted
14810      * @return {Float} The comparison value
14811      */
14812     asFloat : function(s) {
14813         var val = parseFloat(String(s).replace(/,/g, ""));
14814         if(isNaN(val)) {
14815             val = 0;
14816         }
14817         return val;
14818     },
14819     
14820     /**
14821      * Integer sorting
14822      * @param {Mixed} s The value being converted
14823      * @return {Number} The comparison value
14824      */
14825     asInt : function(s) {
14826         var val = parseInt(String(s).replace(/,/g, ""));
14827         if(isNaN(val)) {
14828             val = 0;
14829         }
14830         return val;
14831     }
14832 };/*
14833  * Based on:
14834  * Ext JS Library 1.1.1
14835  * Copyright(c) 2006-2007, Ext JS, LLC.
14836  *
14837  * Originally Released Under LGPL - original licence link has changed is not relivant.
14838  *
14839  * Fork - LGPL
14840  * <script type="text/javascript">
14841  */
14842
14843 /**
14844 * @class Roo.data.Record
14845  * Instances of this class encapsulate both record <em>definition</em> information, and record
14846  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
14847  * to access Records cached in an {@link Roo.data.Store} object.<br>
14848  * <p>
14849  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
14850  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
14851  * objects.<br>
14852  * <p>
14853  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
14854  * @constructor
14855  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
14856  * {@link #create}. The parameters are the same.
14857  * @param {Array} data An associative Array of data values keyed by the field name.
14858  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
14859  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
14860  * not specified an integer id is generated.
14861  */
14862 Roo.data.Record = function(data, id){
14863     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
14864     this.data = data;
14865 };
14866
14867 /**
14868  * Generate a constructor for a specific record layout.
14869  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
14870  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
14871  * Each field definition object may contain the following properties: <ul>
14872  * <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,
14873  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
14874  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
14875  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
14876  * is being used, then this is a string containing the javascript expression to reference the data relative to 
14877  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
14878  * to the data item relative to the record element. If the mapping expression is the same as the field name,
14879  * this may be omitted.</p></li>
14880  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
14881  * <ul><li>auto (Default, implies no conversion)</li>
14882  * <li>string</li>
14883  * <li>int</li>
14884  * <li>float</li>
14885  * <li>boolean</li>
14886  * <li>date</li></ul></p></li>
14887  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
14888  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
14889  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
14890  * by the Reader into an object that will be stored in the Record. It is passed the
14891  * following parameters:<ul>
14892  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
14893  * </ul></p></li>
14894  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
14895  * </ul>
14896  * <br>usage:<br><pre><code>
14897 var TopicRecord = Roo.data.Record.create(
14898     {name: 'title', mapping: 'topic_title'},
14899     {name: 'author', mapping: 'username'},
14900     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
14901     {name: 'lastPost', mapping: 'post_time', type: 'date'},
14902     {name: 'lastPoster', mapping: 'user2'},
14903     {name: 'excerpt', mapping: 'post_text'}
14904 );
14905
14906 var myNewRecord = new TopicRecord({
14907     title: 'Do my job please',
14908     author: 'noobie',
14909     totalPosts: 1,
14910     lastPost: new Date(),
14911     lastPoster: 'Animal',
14912     excerpt: 'No way dude!'
14913 });
14914 myStore.add(myNewRecord);
14915 </code></pre>
14916  * @method create
14917  * @static
14918  */
14919 Roo.data.Record.create = function(o){
14920     var f = function(){
14921         f.superclass.constructor.apply(this, arguments);
14922     };
14923     Roo.extend(f, Roo.data.Record);
14924     var p = f.prototype;
14925     p.fields = new Roo.util.MixedCollection(false, function(field){
14926         return field.name;
14927     });
14928     for(var i = 0, len = o.length; i < len; i++){
14929         p.fields.add(new Roo.data.Field(o[i]));
14930     }
14931     f.getField = function(name){
14932         return p.fields.get(name);  
14933     };
14934     return f;
14935 };
14936
14937 Roo.data.Record.AUTO_ID = 1000;
14938 Roo.data.Record.EDIT = 'edit';
14939 Roo.data.Record.REJECT = 'reject';
14940 Roo.data.Record.COMMIT = 'commit';
14941
14942 Roo.data.Record.prototype = {
14943     /**
14944      * Readonly flag - true if this record has been modified.
14945      * @type Boolean
14946      */
14947     dirty : false,
14948     editing : false,
14949     error: null,
14950     modified: null,
14951
14952     // private
14953     join : function(store){
14954         this.store = store;
14955     },
14956
14957     /**
14958      * Set the named field to the specified value.
14959      * @param {String} name The name of the field to set.
14960      * @param {Object} value The value to set the field to.
14961      */
14962     set : function(name, value){
14963         if(this.data[name] == value){
14964             return;
14965         }
14966         this.dirty = true;
14967         if(!this.modified){
14968             this.modified = {};
14969         }
14970         if(typeof this.modified[name] == 'undefined'){
14971             this.modified[name] = this.data[name];
14972         }
14973         this.data[name] = value;
14974         if(!this.editing && this.store){
14975             this.store.afterEdit(this);
14976         }       
14977     },
14978
14979     /**
14980      * Get the value of the named field.
14981      * @param {String} name The name of the field to get the value of.
14982      * @return {Object} The value of the field.
14983      */
14984     get : function(name){
14985         return this.data[name]; 
14986     },
14987
14988     // private
14989     beginEdit : function(){
14990         this.editing = true;
14991         this.modified = {}; 
14992     },
14993
14994     // private
14995     cancelEdit : function(){
14996         this.editing = false;
14997         delete this.modified;
14998     },
14999
15000     // private
15001     endEdit : function(){
15002         this.editing = false;
15003         if(this.dirty && this.store){
15004             this.store.afterEdit(this);
15005         }
15006     },
15007
15008     /**
15009      * Usually called by the {@link Roo.data.Store} which owns the Record.
15010      * Rejects all changes made to the Record since either creation, or the last commit operation.
15011      * Modified fields are reverted to their original values.
15012      * <p>
15013      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
15014      * of reject operations.
15015      */
15016     reject : function(){
15017         var m = this.modified;
15018         for(var n in m){
15019             if(typeof m[n] != "function"){
15020                 this.data[n] = m[n];
15021             }
15022         }
15023         this.dirty = false;
15024         delete this.modified;
15025         this.editing = false;
15026         if(this.store){
15027             this.store.afterReject(this);
15028         }
15029     },
15030
15031     /**
15032      * Usually called by the {@link Roo.data.Store} which owns the Record.
15033      * Commits all changes made to the Record since either creation, or the last commit operation.
15034      * <p>
15035      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
15036      * of commit operations.
15037      */
15038     commit : function(){
15039         this.dirty = false;
15040         delete this.modified;
15041         this.editing = false;
15042         if(this.store){
15043             this.store.afterCommit(this);
15044         }
15045     },
15046
15047     // private
15048     hasError : function(){
15049         return this.error != null;
15050     },
15051
15052     // private
15053     clearError : function(){
15054         this.error = null;
15055     },
15056
15057     /**
15058      * Creates a copy of this record.
15059      * @param {String} id (optional) A new record id if you don't want to use this record's id
15060      * @return {Record}
15061      */
15062     copy : function(newId) {
15063         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
15064     }
15065 };/*
15066  * Based on:
15067  * Ext JS Library 1.1.1
15068  * Copyright(c) 2006-2007, Ext JS, LLC.
15069  *
15070  * Originally Released Under LGPL - original licence link has changed is not relivant.
15071  *
15072  * Fork - LGPL
15073  * <script type="text/javascript">
15074  */
15075
15076
15077
15078 /**
15079  * @class Roo.data.Store
15080  * @extends Roo.util.Observable
15081  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
15082  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
15083  * <p>
15084  * 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
15085  * has no knowledge of the format of the data returned by the Proxy.<br>
15086  * <p>
15087  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
15088  * instances from the data object. These records are cached and made available through accessor functions.
15089  * @constructor
15090  * Creates a new Store.
15091  * @param {Object} config A config object containing the objects needed for the Store to access data,
15092  * and read the data into Records.
15093  */
15094 Roo.data.Store = function(config){
15095     this.data = new Roo.util.MixedCollection(false);
15096     this.data.getKey = function(o){
15097         return o.id;
15098     };
15099     this.baseParams = {};
15100     // private
15101     this.paramNames = {
15102         "start" : "start",
15103         "limit" : "limit",
15104         "sort" : "sort",
15105         "dir" : "dir",
15106         "multisort" : "_multisort"
15107     };
15108
15109     if(config && config.data){
15110         this.inlineData = config.data;
15111         delete config.data;
15112     }
15113
15114     Roo.apply(this, config);
15115     
15116     if(this.reader){ // reader passed
15117         this.reader = Roo.factory(this.reader, Roo.data);
15118         this.reader.xmodule = this.xmodule || false;
15119         if(!this.recordType){
15120             this.recordType = this.reader.recordType;
15121         }
15122         if(this.reader.onMetaChange){
15123             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
15124         }
15125     }
15126
15127     if(this.recordType){
15128         this.fields = this.recordType.prototype.fields;
15129     }
15130     this.modified = [];
15131
15132     this.addEvents({
15133         /**
15134          * @event datachanged
15135          * Fires when the data cache has changed, and a widget which is using this Store
15136          * as a Record cache should refresh its view.
15137          * @param {Store} this
15138          */
15139         datachanged : true,
15140         /**
15141          * @event metachange
15142          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
15143          * @param {Store} this
15144          * @param {Object} meta The JSON metadata
15145          */
15146         metachange : true,
15147         /**
15148          * @event add
15149          * Fires when Records have been added to the Store
15150          * @param {Store} this
15151          * @param {Roo.data.Record[]} records The array of Records added
15152          * @param {Number} index The index at which the record(s) were added
15153          */
15154         add : true,
15155         /**
15156          * @event remove
15157          * Fires when a Record has been removed from the Store
15158          * @param {Store} this
15159          * @param {Roo.data.Record} record The Record that was removed
15160          * @param {Number} index The index at which the record was removed
15161          */
15162         remove : true,
15163         /**
15164          * @event update
15165          * Fires when a Record has been updated
15166          * @param {Store} this
15167          * @param {Roo.data.Record} record The Record that was updated
15168          * @param {String} operation The update operation being performed.  Value may be one of:
15169          * <pre><code>
15170  Roo.data.Record.EDIT
15171  Roo.data.Record.REJECT
15172  Roo.data.Record.COMMIT
15173          * </code></pre>
15174          */
15175         update : true,
15176         /**
15177          * @event clear
15178          * Fires when the data cache has been cleared.
15179          * @param {Store} this
15180          */
15181         clear : true,
15182         /**
15183          * @event beforeload
15184          * Fires before a request is made for a new data object.  If the beforeload handler returns false
15185          * the load action will be canceled.
15186          * @param {Store} this
15187          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15188          */
15189         beforeload : true,
15190         /**
15191          * @event beforeloadadd
15192          * Fires after a new set of Records has been loaded.
15193          * @param {Store} this
15194          * @param {Roo.data.Record[]} records The Records that were loaded
15195          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15196          */
15197         beforeloadadd : true,
15198         /**
15199          * @event load
15200          * Fires after a new set of Records has been loaded, before they are added to the store.
15201          * @param {Store} this
15202          * @param {Roo.data.Record[]} records The Records that were loaded
15203          * @param {Object} options The loading options that were specified (see {@link #load} for details)
15204          * @params {Object} return from reader
15205          */
15206         load : true,
15207         /**
15208          * @event loadexception
15209          * Fires if an exception occurs in the Proxy during loading.
15210          * Called with the signature of the Proxy's "loadexception" event.
15211          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
15212          * 
15213          * @param {Proxy} 
15214          * @param {Object} return from JsonData.reader() - success, totalRecords, records
15215          * @param {Object} load options 
15216          * @param {Object} jsonData from your request (normally this contains the Exception)
15217          */
15218         loadexception : true
15219     });
15220     
15221     if(this.proxy){
15222         this.proxy = Roo.factory(this.proxy, Roo.data);
15223         this.proxy.xmodule = this.xmodule || false;
15224         this.relayEvents(this.proxy,  ["loadexception"]);
15225     }
15226     this.sortToggle = {};
15227     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
15228
15229     Roo.data.Store.superclass.constructor.call(this);
15230
15231     if(this.inlineData){
15232         this.loadData(this.inlineData);
15233         delete this.inlineData;
15234     }
15235 };
15236
15237 Roo.extend(Roo.data.Store, Roo.util.Observable, {
15238      /**
15239     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
15240     * without a remote query - used by combo/forms at present.
15241     */
15242     
15243     /**
15244     * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
15245     */
15246     /**
15247     * @cfg {Array} data Inline data to be loaded when the store is initialized.
15248     */
15249     /**
15250     * @cfg {Roo.data.DataReader} reader [required]  The Reader object which processes the data object and returns
15251     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
15252     */
15253     /**
15254     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
15255     * on any HTTP request
15256     */
15257     /**
15258     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
15259     */
15260     /**
15261     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
15262     */
15263     multiSort: false,
15264     /**
15265     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
15266     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
15267     */
15268     remoteSort : false,
15269
15270     /**
15271     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
15272      * loaded or when a record is removed. (defaults to false).
15273     */
15274     pruneModifiedRecords : false,
15275
15276     // private
15277     lastOptions : null,
15278
15279     /**
15280      * Add Records to the Store and fires the add event.
15281      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15282      */
15283     add : function(records){
15284         records = [].concat(records);
15285         for(var i = 0, len = records.length; i < len; i++){
15286             records[i].join(this);
15287         }
15288         var index = this.data.length;
15289         this.data.addAll(records);
15290         this.fireEvent("add", this, records, index);
15291     },
15292
15293     /**
15294      * Remove a Record from the Store and fires the remove event.
15295      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
15296      */
15297     remove : function(record){
15298         var index = this.data.indexOf(record);
15299         this.data.removeAt(index);
15300  
15301         if(this.pruneModifiedRecords){
15302             this.modified.remove(record);
15303         }
15304         this.fireEvent("remove", this, record, index);
15305     },
15306
15307     /**
15308      * Remove all Records from the Store and fires the clear event.
15309      */
15310     removeAll : function(){
15311         this.data.clear();
15312         if(this.pruneModifiedRecords){
15313             this.modified = [];
15314         }
15315         this.fireEvent("clear", this);
15316     },
15317
15318     /**
15319      * Inserts Records to the Store at the given index and fires the add event.
15320      * @param {Number} index The start index at which to insert the passed Records.
15321      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
15322      */
15323     insert : function(index, records){
15324         records = [].concat(records);
15325         for(var i = 0, len = records.length; i < len; i++){
15326             this.data.insert(index, records[i]);
15327             records[i].join(this);
15328         }
15329         this.fireEvent("add", this, records, index);
15330     },
15331
15332     /**
15333      * Get the index within the cache of the passed Record.
15334      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
15335      * @return {Number} The index of the passed Record. Returns -1 if not found.
15336      */
15337     indexOf : function(record){
15338         return this.data.indexOf(record);
15339     },
15340
15341     /**
15342      * Get the index within the cache of the Record with the passed id.
15343      * @param {String} id The id of the Record to find.
15344      * @return {Number} The index of the Record. Returns -1 if not found.
15345      */
15346     indexOfId : function(id){
15347         return this.data.indexOfKey(id);
15348     },
15349
15350     /**
15351      * Get the Record with the specified id.
15352      * @param {String} id The id of the Record to find.
15353      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
15354      */
15355     getById : function(id){
15356         return this.data.key(id);
15357     },
15358
15359     /**
15360      * Get the Record at the specified index.
15361      * @param {Number} index The index of the Record to find.
15362      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
15363      */
15364     getAt : function(index){
15365         return this.data.itemAt(index);
15366     },
15367
15368     /**
15369      * Returns a range of Records between specified indices.
15370      * @param {Number} startIndex (optional) The starting index (defaults to 0)
15371      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
15372      * @return {Roo.data.Record[]} An array of Records
15373      */
15374     getRange : function(start, end){
15375         return this.data.getRange(start, end);
15376     },
15377
15378     // private
15379     storeOptions : function(o){
15380         o = Roo.apply({}, o);
15381         delete o.callback;
15382         delete o.scope;
15383         this.lastOptions = o;
15384     },
15385
15386     /**
15387      * Loads the Record cache from the configured Proxy using the configured Reader.
15388      * <p>
15389      * If using remote paging, then the first load call must specify the <em>start</em>
15390      * and <em>limit</em> properties in the options.params property to establish the initial
15391      * position within the dataset, and the number of Records to cache on each read from the Proxy.
15392      * <p>
15393      * <strong>It is important to note that for remote data sources, loading is asynchronous,
15394      * and this call will return before the new data has been loaded. Perform any post-processing
15395      * in a callback function, or in a "load" event handler.</strong>
15396      * <p>
15397      * @param {Object} options An object containing properties which control loading options:<ul>
15398      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
15399      * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
15400      * <pre>
15401                 {
15402                     data : data,  // array of key=>value data like JsonReader
15403                     total : data.length,
15404                     success : true
15405                     
15406                 }
15407         </pre>
15408             }.</li>
15409      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
15410      * passed the following arguments:<ul>
15411      * <li>r : Roo.data.Record[]</li>
15412      * <li>options: Options object from the load call</li>
15413      * <li>success: Boolean success indicator</li></ul></li>
15414      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
15415      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
15416      * </ul>
15417      */
15418     load : function(options){
15419         options = options || {};
15420         if(this.fireEvent("beforeload", this, options) !== false){
15421             this.storeOptions(options);
15422             var p = Roo.apply(options.params || {}, this.baseParams);
15423             // if meta was not loaded from remote source.. try requesting it.
15424             if (!this.reader.metaFromRemote) {
15425                 p._requestMeta = 1;
15426             }
15427             if(this.sortInfo && this.remoteSort){
15428                 var pn = this.paramNames;
15429                 p[pn["sort"]] = this.sortInfo.field;
15430                 p[pn["dir"]] = this.sortInfo.direction;
15431             }
15432             if (this.multiSort) {
15433                 var pn = this.paramNames;
15434                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
15435             }
15436             
15437             this.proxy.load(p, this.reader, this.loadRecords, this, options);
15438         }
15439     },
15440
15441     /**
15442      * Reloads the Record cache from the configured Proxy using the configured Reader and
15443      * the options from the last load operation performed.
15444      * @param {Object} options (optional) An object containing properties which may override the options
15445      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
15446      * the most recently used options are reused).
15447      */
15448     reload : function(options){
15449         this.load(Roo.applyIf(options||{}, this.lastOptions));
15450     },
15451
15452     // private
15453     // Called as a callback by the Reader during a load operation.
15454     loadRecords : function(o, options, success){
15455          
15456         if(!o){
15457             if(success !== false){
15458                 this.fireEvent("load", this, [], options, o);
15459             }
15460             if(options.callback){
15461                 options.callback.call(options.scope || this, [], options, false);
15462             }
15463             return;
15464         }
15465         // if data returned failure - throw an exception.
15466         if (o.success === false) {
15467             // show a message if no listener is registered.
15468             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
15469                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
15470             }
15471             // loadmask wil be hooked into this..
15472             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
15473             return;
15474         }
15475         var r = o.records, t = o.totalRecords || r.length;
15476         
15477         this.fireEvent("beforeloadadd", this, r, options, o);
15478         
15479         if(!options || options.add !== true){
15480             if(this.pruneModifiedRecords){
15481                 this.modified = [];
15482             }
15483             for(var i = 0, len = r.length; i < len; i++){
15484                 r[i].join(this);
15485             }
15486             if(this.snapshot){
15487                 this.data = this.snapshot;
15488                 delete this.snapshot;
15489             }
15490             this.data.clear();
15491             this.data.addAll(r);
15492             this.totalLength = t;
15493             this.applySort();
15494             this.fireEvent("datachanged", this);
15495         }else{
15496             this.totalLength = Math.max(t, this.data.length+r.length);
15497             this.add(r);
15498         }
15499         
15500         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
15501                 
15502             var e = new Roo.data.Record({});
15503
15504             e.set(this.parent.displayField, this.parent.emptyTitle);
15505             e.set(this.parent.valueField, '');
15506
15507             this.insert(0, e);
15508         }
15509             
15510         this.fireEvent("load", this, r, options, o);
15511         if(options.callback){
15512             options.callback.call(options.scope || this, r, options, true);
15513         }
15514     },
15515
15516
15517     /**
15518      * Loads data from a passed data block. A Reader which understands the format of the data
15519      * must have been configured in the constructor.
15520      * @param {Object} data The data block from which to read the Records.  The format of the data expected
15521      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
15522      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
15523      */
15524     loadData : function(o, append){
15525         var r = this.reader.readRecords(o);
15526         this.loadRecords(r, {add: append}, true);
15527     },
15528     
15529      /**
15530      * using 'cn' the nested child reader read the child array into it's child stores.
15531      * @param {Object} rec The record with a 'children array
15532      */
15533     loadDataFromChildren : function(rec)
15534     {
15535         this.loadData(this.reader.toLoadData(rec));
15536     },
15537     
15538
15539     /**
15540      * Gets the number of cached records.
15541      * <p>
15542      * <em>If using paging, this may not be the total size of the dataset. If the data object
15543      * used by the Reader contains the dataset size, then the getTotalCount() function returns
15544      * the data set size</em>
15545      */
15546     getCount : function(){
15547         return this.data.length || 0;
15548     },
15549
15550     /**
15551      * Gets the total number of records in the dataset as returned by the server.
15552      * <p>
15553      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
15554      * the dataset size</em>
15555      */
15556     getTotalCount : function(){
15557         return this.totalLength || 0;
15558     },
15559
15560     /**
15561      * Returns the sort state of the Store as an object with two properties:
15562      * <pre><code>
15563  field {String} The name of the field by which the Records are sorted
15564  direction {String} The sort order, "ASC" or "DESC"
15565      * </code></pre>
15566      */
15567     getSortState : function(){
15568         return this.sortInfo;
15569     },
15570
15571     // private
15572     applySort : function(){
15573         if(this.sortInfo && !this.remoteSort){
15574             var s = this.sortInfo, f = s.field;
15575             var st = this.fields.get(f).sortType;
15576             var fn = function(r1, r2){
15577                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
15578                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
15579             };
15580             this.data.sort(s.direction, fn);
15581             if(this.snapshot && this.snapshot != this.data){
15582                 this.snapshot.sort(s.direction, fn);
15583             }
15584         }
15585     },
15586
15587     /**
15588      * Sets the default sort column and order to be used by the next load operation.
15589      * @param {String} fieldName The name of the field to sort by.
15590      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15591      */
15592     setDefaultSort : function(field, dir){
15593         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
15594     },
15595
15596     /**
15597      * Sort the Records.
15598      * If remote sorting is used, the sort is performed on the server, and the cache is
15599      * reloaded. If local sorting is used, the cache is sorted internally.
15600      * @param {String} fieldName The name of the field to sort by.
15601      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
15602      */
15603     sort : function(fieldName, dir){
15604         var f = this.fields.get(fieldName);
15605         if(!dir){
15606             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
15607             
15608             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
15609                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
15610             }else{
15611                 dir = f.sortDir;
15612             }
15613         }
15614         this.sortToggle[f.name] = dir;
15615         this.sortInfo = {field: f.name, direction: dir};
15616         if(!this.remoteSort){
15617             this.applySort();
15618             this.fireEvent("datachanged", this);
15619         }else{
15620             this.load(this.lastOptions);
15621         }
15622     },
15623
15624     /**
15625      * Calls the specified function for each of the Records in the cache.
15626      * @param {Function} fn The function to call. The Record is passed as the first parameter.
15627      * Returning <em>false</em> aborts and exits the iteration.
15628      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
15629      */
15630     each : function(fn, scope){
15631         this.data.each(fn, scope);
15632     },
15633
15634     /**
15635      * Gets all records modified since the last commit.  Modified records are persisted across load operations
15636      * (e.g., during paging).
15637      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
15638      */
15639     getModifiedRecords : function(){
15640         return this.modified;
15641     },
15642
15643     // private
15644     createFilterFn : function(property, value, anyMatch){
15645         if(!value.exec){ // not a regex
15646             value = String(value);
15647             if(value.length == 0){
15648                 return false;
15649             }
15650             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
15651         }
15652         return function(r){
15653             return value.test(r.data[property]);
15654         };
15655     },
15656
15657     /**
15658      * Sums the value of <i>property</i> for each record between start and end and returns the result.
15659      * @param {String} property A field on your records
15660      * @param {Number} start The record index to start at (defaults to 0)
15661      * @param {Number} end The last record index to include (defaults to length - 1)
15662      * @return {Number} The sum
15663      */
15664     sum : function(property, start, end){
15665         var rs = this.data.items, v = 0;
15666         start = start || 0;
15667         end = (end || end === 0) ? end : rs.length-1;
15668
15669         for(var i = start; i <= end; i++){
15670             v += (rs[i].data[property] || 0);
15671         }
15672         return v;
15673     },
15674
15675     /**
15676      * Filter the records by a specified property.
15677      * @param {String} field A field on your records
15678      * @param {String/RegExp} value Either a string that the field
15679      * should start with or a RegExp to test against the field
15680      * @param {Boolean} anyMatch True to match any part not just the beginning
15681      */
15682     filter : function(property, value, anyMatch){
15683         var fn = this.createFilterFn(property, value, anyMatch);
15684         return fn ? this.filterBy(fn) : this.clearFilter();
15685     },
15686
15687     /**
15688      * Filter by a function. The specified function will be called with each
15689      * record in this data source. If the function returns true the record is included,
15690      * otherwise it is filtered.
15691      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15692      * @param {Object} scope (optional) The scope of the function (defaults to this)
15693      */
15694     filterBy : function(fn, scope){
15695         this.snapshot = this.snapshot || this.data;
15696         this.data = this.queryBy(fn, scope||this);
15697         this.fireEvent("datachanged", this);
15698     },
15699
15700     /**
15701      * Query the records by a specified property.
15702      * @param {String} field A field on your records
15703      * @param {String/RegExp} value Either a string that the field
15704      * should start with or a RegExp to test against the field
15705      * @param {Boolean} anyMatch True to match any part not just the beginning
15706      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15707      */
15708     query : function(property, value, anyMatch){
15709         var fn = this.createFilterFn(property, value, anyMatch);
15710         return fn ? this.queryBy(fn) : this.data.clone();
15711     },
15712
15713     /**
15714      * Query by a function. The specified function will be called with each
15715      * record in this data source. If the function returns true the record is included
15716      * in the results.
15717      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
15718      * @param {Object} scope (optional) The scope of the function (defaults to this)
15719       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
15720      **/
15721     queryBy : function(fn, scope){
15722         var data = this.snapshot || this.data;
15723         return data.filterBy(fn, scope||this);
15724     },
15725
15726     /**
15727      * Collects unique values for a particular dataIndex from this store.
15728      * @param {String} dataIndex The property to collect
15729      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
15730      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
15731      * @return {Array} An array of the unique values
15732      **/
15733     collect : function(dataIndex, allowNull, bypassFilter){
15734         var d = (bypassFilter === true && this.snapshot) ?
15735                 this.snapshot.items : this.data.items;
15736         var v, sv, r = [], l = {};
15737         for(var i = 0, len = d.length; i < len; i++){
15738             v = d[i].data[dataIndex];
15739             sv = String(v);
15740             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
15741                 l[sv] = true;
15742                 r[r.length] = v;
15743             }
15744         }
15745         return r;
15746     },
15747
15748     /**
15749      * Revert to a view of the Record cache with no filtering applied.
15750      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
15751      */
15752     clearFilter : function(suppressEvent){
15753         if(this.snapshot && this.snapshot != this.data){
15754             this.data = this.snapshot;
15755             delete this.snapshot;
15756             if(suppressEvent !== true){
15757                 this.fireEvent("datachanged", this);
15758             }
15759         }
15760     },
15761
15762     // private
15763     afterEdit : function(record){
15764         if(this.modified.indexOf(record) == -1){
15765             this.modified.push(record);
15766         }
15767         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
15768     },
15769     
15770     // private
15771     afterReject : function(record){
15772         this.modified.remove(record);
15773         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
15774     },
15775
15776     // private
15777     afterCommit : function(record){
15778         this.modified.remove(record);
15779         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
15780     },
15781
15782     /**
15783      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
15784      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
15785      */
15786     commitChanges : function(){
15787         var m = this.modified.slice(0);
15788         this.modified = [];
15789         for(var i = 0, len = m.length; i < len; i++){
15790             m[i].commit();
15791         }
15792     },
15793
15794     /**
15795      * Cancel outstanding changes on all changed records.
15796      */
15797     rejectChanges : function(){
15798         var m = this.modified.slice(0);
15799         this.modified = [];
15800         for(var i = 0, len = m.length; i < len; i++){
15801             m[i].reject();
15802         }
15803     },
15804
15805     onMetaChange : function(meta, rtype, o){
15806         this.recordType = rtype;
15807         this.fields = rtype.prototype.fields;
15808         delete this.snapshot;
15809         this.sortInfo = meta.sortInfo || this.sortInfo;
15810         this.modified = [];
15811         this.fireEvent('metachange', this, this.reader.meta);
15812     },
15813     
15814     moveIndex : function(data, type)
15815     {
15816         var index = this.indexOf(data);
15817         
15818         var newIndex = index + type;
15819         
15820         this.remove(data);
15821         
15822         this.insert(newIndex, data);
15823         
15824     }
15825 });/*
15826  * Based on:
15827  * Ext JS Library 1.1.1
15828  * Copyright(c) 2006-2007, Ext JS, LLC.
15829  *
15830  * Originally Released Under LGPL - original licence link has changed is not relivant.
15831  *
15832  * Fork - LGPL
15833  * <script type="text/javascript">
15834  */
15835
15836 /**
15837  * @class Roo.data.SimpleStore
15838  * @extends Roo.data.Store
15839  * Small helper class to make creating Stores from Array data easier.
15840  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
15841  * @cfg {Array} fields An array of field definition objects, or field name strings.
15842  * @cfg {Object} an existing reader (eg. copied from another store)
15843  * @cfg {Array} data The multi-dimensional array of data
15844  * @cfg {Roo.data.DataProxy} proxy [not-required]  
15845  * @cfg {Roo.data.Reader} reader  [not-required] 
15846  * @constructor
15847  * @param {Object} config
15848  */
15849 Roo.data.SimpleStore = function(config)
15850 {
15851     Roo.data.SimpleStore.superclass.constructor.call(this, {
15852         isLocal : true,
15853         reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
15854                 id: config.id
15855             },
15856             Roo.data.Record.create(config.fields)
15857         ),
15858         proxy : new Roo.data.MemoryProxy(config.data)
15859     });
15860     this.load();
15861 };
15862 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
15863  * Based on:
15864  * Ext JS Library 1.1.1
15865  * Copyright(c) 2006-2007, Ext JS, LLC.
15866  *
15867  * Originally Released Under LGPL - original licence link has changed is not relivant.
15868  *
15869  * Fork - LGPL
15870  * <script type="text/javascript">
15871  */
15872
15873 /**
15874 /**
15875  * @extends Roo.data.Store
15876  * @class Roo.data.JsonStore
15877  * Small helper class to make creating Stores for JSON data easier. <br/>
15878 <pre><code>
15879 var store = new Roo.data.JsonStore({
15880     url: 'get-images.php',
15881     root: 'images',
15882     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
15883 });
15884 </code></pre>
15885  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
15886  * JsonReader and HttpProxy (unless inline data is provided).</b>
15887  * @cfg {Array} fields An array of field definition objects, or field name strings.
15888  * @constructor
15889  * @param {Object} config
15890  */
15891 Roo.data.JsonStore = function(c){
15892     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
15893         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
15894         reader: new Roo.data.JsonReader(c, c.fields)
15895     }));
15896 };
15897 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
15898  * Based on:
15899  * Ext JS Library 1.1.1
15900  * Copyright(c) 2006-2007, Ext JS, LLC.
15901  *
15902  * Originally Released Under LGPL - original licence link has changed is not relivant.
15903  *
15904  * Fork - LGPL
15905  * <script type="text/javascript">
15906  */
15907
15908  
15909 Roo.data.Field = function(config){
15910     if(typeof config == "string"){
15911         config = {name: config};
15912     }
15913     Roo.apply(this, config);
15914     
15915     if(!this.type){
15916         this.type = "auto";
15917     }
15918     
15919     var st = Roo.data.SortTypes;
15920     // named sortTypes are supported, here we look them up
15921     if(typeof this.sortType == "string"){
15922         this.sortType = st[this.sortType];
15923     }
15924     
15925     // set default sortType for strings and dates
15926     if(!this.sortType){
15927         switch(this.type){
15928             case "string":
15929                 this.sortType = st.asUCString;
15930                 break;
15931             case "date":
15932                 this.sortType = st.asDate;
15933                 break;
15934             default:
15935                 this.sortType = st.none;
15936         }
15937     }
15938
15939     // define once
15940     var stripRe = /[\$,%]/g;
15941
15942     // prebuilt conversion function for this field, instead of
15943     // switching every time we're reading a value
15944     if(!this.convert){
15945         var cv, dateFormat = this.dateFormat;
15946         switch(this.type){
15947             case "":
15948             case "auto":
15949             case undefined:
15950                 cv = function(v){ return v; };
15951                 break;
15952             case "string":
15953                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
15954                 break;
15955             case "int":
15956                 cv = function(v){
15957                     return v !== undefined && v !== null && v !== '' ?
15958                            parseInt(String(v).replace(stripRe, ""), 10) : '';
15959                     };
15960                 break;
15961             case "float":
15962                 cv = function(v){
15963                     return v !== undefined && v !== null && v !== '' ?
15964                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
15965                     };
15966                 break;
15967             case "bool":
15968             case "boolean":
15969                 cv = function(v){ return v === true || v === "true" || v == 1; };
15970                 break;
15971             case "date":
15972                 cv = function(v){
15973                     if(!v){
15974                         return '';
15975                     }
15976                     if(v instanceof Date){
15977                         return v;
15978                     }
15979                     if(dateFormat){
15980                         if(dateFormat == "timestamp"){
15981                             return new Date(v*1000);
15982                         }
15983                         return Date.parseDate(v, dateFormat);
15984                     }
15985                     var parsed = Date.parse(v);
15986                     return parsed ? new Date(parsed) : null;
15987                 };
15988              break;
15989             
15990         }
15991         this.convert = cv;
15992     }
15993 };
15994
15995 Roo.data.Field.prototype = {
15996     dateFormat: null,
15997     defaultValue: "",
15998     mapping: null,
15999     sortType : null,
16000     sortDir : "ASC"
16001 };/*
16002  * Based on:
16003  * Ext JS Library 1.1.1
16004  * Copyright(c) 2006-2007, Ext JS, LLC.
16005  *
16006  * Originally Released Under LGPL - original licence link has changed is not relivant.
16007  *
16008  * Fork - LGPL
16009  * <script type="text/javascript">
16010  */
16011  
16012 // Base class for reading structured data from a data source.  This class is intended to be
16013 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
16014
16015 /**
16016  * @class Roo.data.DataReader
16017  * @abstract
16018  * Base class for reading structured data from a data source.  This class is intended to be
16019  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
16020  */
16021
16022 Roo.data.DataReader = function(meta, recordType){
16023     
16024     this.meta = meta;
16025     
16026     this.recordType = recordType instanceof Array ? 
16027         Roo.data.Record.create(recordType) : recordType;
16028 };
16029
16030 Roo.data.DataReader.prototype = {
16031     
16032     
16033     readerType : 'Data',
16034      /**
16035      * Create an empty record
16036      * @param {Object} data (optional) - overlay some values
16037      * @return {Roo.data.Record} record created.
16038      */
16039     newRow :  function(d) {
16040         var da =  {};
16041         this.recordType.prototype.fields.each(function(c) {
16042             switch( c.type) {
16043                 case 'int' : da[c.name] = 0; break;
16044                 case 'date' : da[c.name] = new Date(); break;
16045                 case 'float' : da[c.name] = 0.0; break;
16046                 case 'boolean' : da[c.name] = false; break;
16047                 default : da[c.name] = ""; break;
16048             }
16049             
16050         });
16051         return new this.recordType(Roo.apply(da, d));
16052     }
16053     
16054     
16055 };/*
16056  * Based on:
16057  * Ext JS Library 1.1.1
16058  * Copyright(c) 2006-2007, Ext JS, LLC.
16059  *
16060  * Originally Released Under LGPL - original licence link has changed is not relivant.
16061  *
16062  * Fork - LGPL
16063  * <script type="text/javascript">
16064  */
16065
16066 /**
16067  * @class Roo.data.DataProxy
16068  * @extends Roo.util.Observable
16069  * @abstract
16070  * This class is an abstract base class for implementations which provide retrieval of
16071  * unformatted data objects.<br>
16072  * <p>
16073  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
16074  * (of the appropriate type which knows how to parse the data object) to provide a block of
16075  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
16076  * <p>
16077  * Custom implementations must implement the load method as described in
16078  * {@link Roo.data.HttpProxy#load}.
16079  */
16080 Roo.data.DataProxy = function(){
16081     this.addEvents({
16082         /**
16083          * @event beforeload
16084          * Fires before a network request is made to retrieve a data object.
16085          * @param {Object} This DataProxy object.
16086          * @param {Object} params The params parameter to the load function.
16087          */
16088         beforeload : true,
16089         /**
16090          * @event load
16091          * Fires before the load method's callback is called.
16092          * @param {Object} This DataProxy object.
16093          * @param {Object} o The data object.
16094          * @param {Object} arg The callback argument object passed to the load function.
16095          */
16096         load : true,
16097         /**
16098          * @event loadexception
16099          * Fires if an Exception occurs during data retrieval.
16100          * @param {Object} This DataProxy object.
16101          * @param {Object} o The data object.
16102          * @param {Object} arg The callback argument object passed to the load function.
16103          * @param {Object} e The Exception.
16104          */
16105         loadexception : true
16106     });
16107     Roo.data.DataProxy.superclass.constructor.call(this);
16108 };
16109
16110 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
16111
16112     /**
16113      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
16114      */
16115 /*
16116  * Based on:
16117  * Ext JS Library 1.1.1
16118  * Copyright(c) 2006-2007, Ext JS, LLC.
16119  *
16120  * Originally Released Under LGPL - original licence link has changed is not relivant.
16121  *
16122  * Fork - LGPL
16123  * <script type="text/javascript">
16124  */
16125 /**
16126  * @class Roo.data.MemoryProxy
16127  * @extends Roo.data.DataProxy
16128  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
16129  * to the Reader when its load method is called.
16130  * @constructor
16131  * @param {Object} config  A config object containing the objects needed for the Store to access data,
16132  */
16133 Roo.data.MemoryProxy = function(config){
16134     var data = config;
16135     if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
16136         data = config.data;
16137     }
16138     Roo.data.MemoryProxy.superclass.constructor.call(this);
16139     this.data = data;
16140 };
16141
16142 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
16143     
16144     /**
16145      *  @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
16146      */
16147     /**
16148      * Load data from the requested source (in this case an in-memory
16149      * data object passed to the constructor), read the data object into
16150      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16151      * process that block using the passed callback.
16152      * @param {Object} params This parameter is not used by the MemoryProxy class.
16153      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16154      * object into a block of Roo.data.Records.
16155      * @param {Function} callback The function into which to pass the block of Roo.data.records.
16156      * The function must be passed <ul>
16157      * <li>The Record block object</li>
16158      * <li>The "arg" argument from the load function</li>
16159      * <li>A boolean success indicator</li>
16160      * </ul>
16161      * @param {Object} scope The scope in which to call the callback
16162      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16163      */
16164     load : function(params, reader, callback, scope, arg){
16165         params = params || {};
16166         var result;
16167         try {
16168             result = reader.readRecords(params.data ? params.data :this.data);
16169         }catch(e){
16170             this.fireEvent("loadexception", this, arg, null, e);
16171             callback.call(scope, null, arg, false);
16172             return;
16173         }
16174         callback.call(scope, result, arg, true);
16175     },
16176     
16177     // private
16178     update : function(params, records){
16179         
16180     }
16181 });/*
16182  * Based on:
16183  * Ext JS Library 1.1.1
16184  * Copyright(c) 2006-2007, Ext JS, LLC.
16185  *
16186  * Originally Released Under LGPL - original licence link has changed is not relivant.
16187  *
16188  * Fork - LGPL
16189  * <script type="text/javascript">
16190  */
16191 /**
16192  * @class Roo.data.HttpProxy
16193  * @extends Roo.data.DataProxy
16194  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
16195  * configured to reference a certain URL.<br><br>
16196  * <p>
16197  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
16198  * from which the running page was served.<br><br>
16199  * <p>
16200  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
16201  * <p>
16202  * Be aware that to enable the browser to parse an XML document, the server must set
16203  * the Content-Type header in the HTTP response to "text/xml".
16204  * @constructor
16205  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
16206  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
16207  * will be used to make the request.
16208  */
16209 Roo.data.HttpProxy = function(conn){
16210     Roo.data.HttpProxy.superclass.constructor.call(this);
16211     // is conn a conn config or a real conn?
16212     this.conn = conn;
16213     this.useAjax = !conn || !conn.events;
16214   
16215 };
16216
16217 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
16218     // thse are take from connection...
16219     
16220     /**
16221      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
16222      */
16223     /**
16224      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
16225      * extra parameters to each request made by this object. (defaults to undefined)
16226      */
16227     /**
16228      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
16229      *  to each request made by this object. (defaults to undefined)
16230      */
16231     /**
16232      * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
16233      */
16234     /**
16235      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
16236      */
16237      /**
16238      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
16239      * @type Boolean
16240      */
16241   
16242
16243     /**
16244      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
16245      * @type Boolean
16246      */
16247     /**
16248      * Return the {@link Roo.data.Connection} object being used by this Proxy.
16249      * @return {Connection} The Connection object. This object may be used to subscribe to events on
16250      * a finer-grained basis than the DataProxy events.
16251      */
16252     getConnection : function(){
16253         return this.useAjax ? Roo.Ajax : this.conn;
16254     },
16255
16256     /**
16257      * Load data from the configured {@link Roo.data.Connection}, read the data object into
16258      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
16259      * process that block using the passed callback.
16260      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16261      * for the request to the remote server.
16262      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16263      * object into a block of Roo.data.Records.
16264      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16265      * The function must be passed <ul>
16266      * <li>The Record block object</li>
16267      * <li>The "arg" argument from the load function</li>
16268      * <li>A boolean success indicator</li>
16269      * </ul>
16270      * @param {Object} scope The scope in which to call the callback
16271      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16272      */
16273     load : function(params, reader, callback, scope, arg){
16274         if(this.fireEvent("beforeload", this, params) !== false){
16275             var  o = {
16276                 params : params || {},
16277                 request: {
16278                     callback : callback,
16279                     scope : scope,
16280                     arg : arg
16281                 },
16282                 reader: reader,
16283                 callback : this.loadResponse,
16284                 scope: this
16285             };
16286             if(this.useAjax){
16287                 Roo.applyIf(o, this.conn);
16288                 if(this.activeRequest){
16289                     Roo.Ajax.abort(this.activeRequest);
16290                 }
16291                 this.activeRequest = Roo.Ajax.request(o);
16292             }else{
16293                 this.conn.request(o);
16294             }
16295         }else{
16296             callback.call(scope||this, null, arg, false);
16297         }
16298     },
16299
16300     // private
16301     loadResponse : function(o, success, response){
16302         delete this.activeRequest;
16303         if(!success){
16304             this.fireEvent("loadexception", this, o, response);
16305             o.request.callback.call(o.request.scope, null, o.request.arg, false);
16306             return;
16307         }
16308         var result;
16309         try {
16310             result = o.reader.read(response);
16311         }catch(e){
16312             o.success = false;
16313             o.raw = { errorMsg : response.responseText };
16314             this.fireEvent("loadexception", this, o, response, e);
16315             o.request.callback.call(o.request.scope, o, o.request.arg, false);
16316             return;
16317         }
16318         
16319         this.fireEvent("load", this, o, o.request.arg);
16320         o.request.callback.call(o.request.scope, result, o.request.arg, true);
16321     },
16322
16323     // private
16324     update : function(dataSet){
16325
16326     },
16327
16328     // private
16329     updateResponse : function(dataSet){
16330
16331     }
16332 });/*
16333  * Based on:
16334  * Ext JS Library 1.1.1
16335  * Copyright(c) 2006-2007, Ext JS, LLC.
16336  *
16337  * Originally Released Under LGPL - original licence link has changed is not relivant.
16338  *
16339  * Fork - LGPL
16340  * <script type="text/javascript">
16341  */
16342
16343 /**
16344  * @class Roo.data.ScriptTagProxy
16345  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
16346  * other than the originating domain of the running page.<br><br>
16347  * <p>
16348  * <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
16349  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
16350  * <p>
16351  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
16352  * source code that is used as the source inside a &lt;script> tag.<br><br>
16353  * <p>
16354  * In order for the browser to process the returned data, the server must wrap the data object
16355  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
16356  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
16357  * depending on whether the callback name was passed:
16358  * <p>
16359  * <pre><code>
16360 boolean scriptTag = false;
16361 String cb = request.getParameter("callback");
16362 if (cb != null) {
16363     scriptTag = true;
16364     response.setContentType("text/javascript");
16365 } else {
16366     response.setContentType("application/x-json");
16367 }
16368 Writer out = response.getWriter();
16369 if (scriptTag) {
16370     out.write(cb + "(");
16371 }
16372 out.print(dataBlock.toJsonString());
16373 if (scriptTag) {
16374     out.write(");");
16375 }
16376 </pre></code>
16377  *
16378  * @constructor
16379  * @param {Object} config A configuration object.
16380  */
16381 Roo.data.ScriptTagProxy = function(config){
16382     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
16383     Roo.apply(this, config);
16384     this.head = document.getElementsByTagName("head")[0];
16385 };
16386
16387 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
16388
16389 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
16390     /**
16391      * @cfg {String} url The URL from which to request the data object.
16392      */
16393     /**
16394      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
16395      */
16396     timeout : 30000,
16397     /**
16398      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
16399      * the server the name of the callback function set up by the load call to process the returned data object.
16400      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
16401      * javascript output which calls this named function passing the data object as its only parameter.
16402      */
16403     callbackParam : "callback",
16404     /**
16405      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
16406      * name to the request.
16407      */
16408     nocache : true,
16409
16410     /**
16411      * Load data from the configured URL, read the data object into
16412      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
16413      * process that block using the passed callback.
16414      * @param {Object} params An object containing properties which are to be used as HTTP parameters
16415      * for the request to the remote server.
16416      * @param {Roo.data.DataReader} reader The Reader object which converts the data
16417      * object into a block of Roo.data.Records.
16418      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
16419      * The function must be passed <ul>
16420      * <li>The Record block object</li>
16421      * <li>The "arg" argument from the load function</li>
16422      * <li>A boolean success indicator</li>
16423      * </ul>
16424      * @param {Object} scope The scope in which to call the callback
16425      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
16426      */
16427     load : function(params, reader, callback, scope, arg){
16428         if(this.fireEvent("beforeload", this, params) !== false){
16429
16430             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
16431
16432             var url = this.url;
16433             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
16434             if(this.nocache){
16435                 url += "&_dc=" + (new Date().getTime());
16436             }
16437             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
16438             var trans = {
16439                 id : transId,
16440                 cb : "stcCallback"+transId,
16441                 scriptId : "stcScript"+transId,
16442                 params : params,
16443                 arg : arg,
16444                 url : url,
16445                 callback : callback,
16446                 scope : scope,
16447                 reader : reader
16448             };
16449             var conn = this;
16450
16451             window[trans.cb] = function(o){
16452                 conn.handleResponse(o, trans);
16453             };
16454
16455             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
16456
16457             if(this.autoAbort !== false){
16458                 this.abort();
16459             }
16460
16461             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
16462
16463             var script = document.createElement("script");
16464             script.setAttribute("src", url);
16465             script.setAttribute("type", "text/javascript");
16466             script.setAttribute("id", trans.scriptId);
16467             this.head.appendChild(script);
16468
16469             this.trans = trans;
16470         }else{
16471             callback.call(scope||this, null, arg, false);
16472         }
16473     },
16474
16475     // private
16476     isLoading : function(){
16477         return this.trans ? true : false;
16478     },
16479
16480     /**
16481      * Abort the current server request.
16482      */
16483     abort : function(){
16484         if(this.isLoading()){
16485             this.destroyTrans(this.trans);
16486         }
16487     },
16488
16489     // private
16490     destroyTrans : function(trans, isLoaded){
16491         this.head.removeChild(document.getElementById(trans.scriptId));
16492         clearTimeout(trans.timeoutId);
16493         if(isLoaded){
16494             window[trans.cb] = undefined;
16495             try{
16496                 delete window[trans.cb];
16497             }catch(e){}
16498         }else{
16499             // if hasn't been loaded, wait for load to remove it to prevent script error
16500             window[trans.cb] = function(){
16501                 window[trans.cb] = undefined;
16502                 try{
16503                     delete window[trans.cb];
16504                 }catch(e){}
16505             };
16506         }
16507     },
16508
16509     // private
16510     handleResponse : function(o, trans){
16511         this.trans = false;
16512         this.destroyTrans(trans, true);
16513         var result;
16514         try {
16515             result = trans.reader.readRecords(o);
16516         }catch(e){
16517             this.fireEvent("loadexception", this, o, trans.arg, e);
16518             trans.callback.call(trans.scope||window, null, trans.arg, false);
16519             return;
16520         }
16521         this.fireEvent("load", this, o, trans.arg);
16522         trans.callback.call(trans.scope||window, result, trans.arg, true);
16523     },
16524
16525     // private
16526     handleFailure : function(trans){
16527         this.trans = false;
16528         this.destroyTrans(trans, false);
16529         this.fireEvent("loadexception", this, null, trans.arg);
16530         trans.callback.call(trans.scope||window, null, trans.arg, false);
16531     }
16532 });/*
16533  * Based on:
16534  * Ext JS Library 1.1.1
16535  * Copyright(c) 2006-2007, Ext JS, LLC.
16536  *
16537  * Originally Released Under LGPL - original licence link has changed is not relivant.
16538  *
16539  * Fork - LGPL
16540  * <script type="text/javascript">
16541  */
16542
16543 /**
16544  * @class Roo.data.JsonReader
16545  * @extends Roo.data.DataReader
16546  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
16547  * based on mappings in a provided Roo.data.Record constructor.
16548  * 
16549  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
16550  * in the reply previously. 
16551  * 
16552  * <p>
16553  * Example code:
16554  * <pre><code>
16555 var RecordDef = Roo.data.Record.create([
16556     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
16557     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
16558 ]);
16559 var myReader = new Roo.data.JsonReader({
16560     totalProperty: "results",    // The property which contains the total dataset size (optional)
16561     root: "rows",                // The property which contains an Array of row objects
16562     id: "id"                     // The property within each row object that provides an ID for the record (optional)
16563 }, RecordDef);
16564 </code></pre>
16565  * <p>
16566  * This would consume a JSON file like this:
16567  * <pre><code>
16568 { 'results': 2, 'rows': [
16569     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
16570     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
16571 }
16572 </code></pre>
16573  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
16574  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
16575  * paged from the remote server.
16576  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
16577  * @cfg {String} root name of the property which contains the Array of row objects.
16578  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16579  * @cfg {Array} fields Array of field definition objects
16580  * @constructor
16581  * Create a new JsonReader
16582  * @param {Object} meta Metadata configuration options
16583  * @param {Object} recordType Either an Array of field definition objects,
16584  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
16585  */
16586 Roo.data.JsonReader = function(meta, recordType){
16587     
16588     meta = meta || {};
16589     // set some defaults:
16590     Roo.applyIf(meta, {
16591         totalProperty: 'total',
16592         successProperty : 'success',
16593         root : 'data',
16594         id : 'id'
16595     });
16596     
16597     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16598 };
16599 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
16600     
16601     readerType : 'Json',
16602     
16603     /**
16604      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
16605      * Used by Store query builder to append _requestMeta to params.
16606      * 
16607      */
16608     metaFromRemote : false,
16609     /**
16610      * This method is only used by a DataProxy which has retrieved data from a remote server.
16611      * @param {Object} response The XHR object which contains the JSON data in its responseText.
16612      * @return {Object} data A data block which is used by an Roo.data.Store object as
16613      * a cache of Roo.data.Records.
16614      */
16615     read : function(response){
16616         var json = response.responseText;
16617        
16618         var o = /* eval:var:o */ eval("("+json+")");
16619         if(!o) {
16620             throw {message: "JsonReader.read: Json object not found"};
16621         }
16622         
16623         if(o.metaData){
16624             
16625             delete this.ef;
16626             this.metaFromRemote = true;
16627             this.meta = o.metaData;
16628             this.recordType = Roo.data.Record.create(o.metaData.fields);
16629             this.onMetaChange(this.meta, this.recordType, o);
16630         }
16631         return this.readRecords(o);
16632     },
16633
16634     // private function a store will implement
16635     onMetaChange : function(meta, recordType, o){
16636
16637     },
16638
16639     /**
16640          * @ignore
16641          */
16642     simpleAccess: function(obj, subsc) {
16643         return obj[subsc];
16644     },
16645
16646         /**
16647          * @ignore
16648          */
16649     getJsonAccessor: function(){
16650         var re = /[\[\.]/;
16651         return function(expr) {
16652             try {
16653                 return(re.test(expr))
16654                     ? new Function("obj", "return obj." + expr)
16655                     : function(obj){
16656                         return obj[expr];
16657                     };
16658             } catch(e){}
16659             return Roo.emptyFn;
16660         };
16661     }(),
16662
16663     /**
16664      * Create a data block containing Roo.data.Records from an XML document.
16665      * @param {Object} o An object which contains an Array of row objects in the property specified
16666      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
16667      * which contains the total size of the dataset.
16668      * @return {Object} data A data block which is used by an Roo.data.Store object as
16669      * a cache of Roo.data.Records.
16670      */
16671     readRecords : function(o){
16672         /**
16673          * After any data loads, the raw JSON data is available for further custom processing.
16674          * @type Object
16675          */
16676         this.o = o;
16677         var s = this.meta, Record = this.recordType,
16678             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
16679
16680 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
16681         if (!this.ef) {
16682             if(s.totalProperty) {
16683                     this.getTotal = this.getJsonAccessor(s.totalProperty);
16684                 }
16685                 if(s.successProperty) {
16686                     this.getSuccess = this.getJsonAccessor(s.successProperty);
16687                 }
16688                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
16689                 if (s.id) {
16690                         var g = this.getJsonAccessor(s.id);
16691                         this.getId = function(rec) {
16692                                 var r = g(rec);  
16693                                 return (r === undefined || r === "") ? null : r;
16694                         };
16695                 } else {
16696                         this.getId = function(){return null;};
16697                 }
16698             this.ef = [];
16699             for(var jj = 0; jj < fl; jj++){
16700                 f = fi[jj];
16701                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
16702                 this.ef[jj] = this.getJsonAccessor(map);
16703             }
16704         }
16705
16706         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
16707         if(s.totalProperty){
16708             var vt = parseInt(this.getTotal(o), 10);
16709             if(!isNaN(vt)){
16710                 totalRecords = vt;
16711             }
16712         }
16713         if(s.successProperty){
16714             var vs = this.getSuccess(o);
16715             if(vs === false || vs === 'false'){
16716                 success = false;
16717             }
16718         }
16719         var records = [];
16720         for(var i = 0; i < c; i++){
16721             var n = root[i];
16722             var values = {};
16723             var id = this.getId(n);
16724             for(var j = 0; j < fl; j++){
16725                 f = fi[j];
16726                                 var v = this.ef[j](n);
16727                                 if (!f.convert) {
16728                                         Roo.log('missing convert for ' + f.name);
16729                                         Roo.log(f);
16730                                         continue;
16731                                 }
16732                                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
16733             }
16734                         if (!Record) {
16735                                 return {
16736                                         raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
16737                                         success : false,
16738                                         records : [],
16739                                         totalRecords : 0
16740                                 };
16741                         }
16742             var record = new Record(values, id);
16743             record.json = n;
16744             records[i] = record;
16745         }
16746         return {
16747             raw : o,
16748             success : success,
16749             records : records,
16750             totalRecords : totalRecords
16751         };
16752     },
16753     // used when loading children.. @see loadDataFromChildren
16754     toLoadData: function(rec)
16755     {
16756         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16757         var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16758         return { data : data, total : data.length };
16759         
16760     }
16761 });/*
16762  * Based on:
16763  * Ext JS Library 1.1.1
16764  * Copyright(c) 2006-2007, Ext JS, LLC.
16765  *
16766  * Originally Released Under LGPL - original licence link has changed is not relivant.
16767  *
16768  * Fork - LGPL
16769  * <script type="text/javascript">
16770  */
16771
16772 /**
16773  * @class Roo.data.ArrayReader
16774  * @extends Roo.data.DataReader
16775  * Data reader class to create an Array of Roo.data.Record objects from an Array.
16776  * Each element of that Array represents a row of data fields. The
16777  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
16778  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
16779  * <p>
16780  * Example code:.
16781  * <pre><code>
16782 var RecordDef = Roo.data.Record.create([
16783     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
16784     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
16785 ]);
16786 var myReader = new Roo.data.ArrayReader({
16787     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
16788 }, RecordDef);
16789 </code></pre>
16790  * <p>
16791  * This would consume an Array like this:
16792  * <pre><code>
16793 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
16794   </code></pre>
16795  
16796  * @constructor
16797  * Create a new JsonReader
16798  * @param {Object} meta Metadata configuration options.
16799  * @param {Object|Array} recordType Either an Array of field definition objects
16800  * 
16801  * @cfg {Array} fields Array of field definition objects
16802  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
16803  * as specified to {@link Roo.data.Record#create},
16804  * or an {@link Roo.data.Record} object
16805  *
16806  * 
16807  * created using {@link Roo.data.Record#create}.
16808  */
16809 Roo.data.ArrayReader = function(meta, recordType)
16810 {    
16811     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
16812 };
16813
16814 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
16815     
16816       /**
16817      * Create a data block containing Roo.data.Records from an XML document.
16818      * @param {Object} o An Array of row objects which represents the dataset.
16819      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
16820      * a cache of Roo.data.Records.
16821      */
16822     readRecords : function(o)
16823     {
16824         var sid = this.meta ? this.meta.id : null;
16825         var recordType = this.recordType, fields = recordType.prototype.fields;
16826         var records = [];
16827         var root = o;
16828         for(var i = 0; i < root.length; i++){
16829             var n = root[i];
16830             var values = {};
16831             var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
16832             for(var j = 0, jlen = fields.length; j < jlen; j++){
16833                 var f = fields.items[j];
16834                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
16835                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
16836                 v = f.convert(v);
16837                 values[f.name] = v;
16838             }
16839             var record = new recordType(values, id);
16840             record.json = n;
16841             records[records.length] = record;
16842         }
16843         return {
16844             records : records,
16845             totalRecords : records.length
16846         };
16847     },
16848     // used when loading children.. @see loadDataFromChildren
16849     toLoadData: function(rec)
16850     {
16851         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
16852         return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
16853         
16854     }
16855     
16856     
16857 });/*
16858  * - LGPL
16859  * * 
16860  */
16861
16862 /**
16863  * @class Roo.bootstrap.form.ComboBox
16864  * @extends Roo.bootstrap.form.TriggerField
16865  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
16866  * @cfg {Boolean} append (true|false) default false
16867  * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
16868  * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
16869  * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
16870  * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
16871  * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
16872  * @cfg {Boolean} animate default true
16873  * @cfg {Boolean} emptyResultText only for touch device
16874  * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
16875  * @cfg {String} emptyTitle default ''
16876  * @cfg {Number} width fixed with? experimental
16877  * @constructor
16878  * Create a new ComboBox.
16879  * @param {Object} config Configuration options
16880  */
16881 Roo.bootstrap.form.ComboBox = function(config){
16882     Roo.bootstrap.form.ComboBox.superclass.constructor.call(this, config);
16883     this.addEvents({
16884         /**
16885          * @event expand
16886          * Fires when the dropdown list is expanded
16887         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16888         */
16889         'expand' : true,
16890         /**
16891          * @event collapse
16892          * Fires when the dropdown list is collapsed
16893         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16894         */
16895         'collapse' : true,
16896         /**
16897          * @event beforeselect
16898          * Fires before a list item is selected. Return false to cancel the selection.
16899         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16900         * @param {Roo.data.Record} record The data record returned from the underlying store
16901         * @param {Number} index The index of the selected item in the dropdown list
16902         */
16903         'beforeselect' : true,
16904         /**
16905          * @event select
16906          * Fires when a list item is selected
16907         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16908         * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
16909         * @param {Number} index The index of the selected item in the dropdown list
16910         */
16911         'select' : true,
16912         /**
16913          * @event beforequery
16914          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
16915          * The event object passed has these properties:
16916         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16917         * @param {String} query The query
16918         * @param {Boolean} forceAll true to force "all" query
16919         * @param {Boolean} cancel true to cancel the query
16920         * @param {Object} e The query event object
16921         */
16922         'beforequery': true,
16923          /**
16924          * @event add
16925          * Fires when the 'add' icon is pressed (add a listener to enable add button)
16926         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16927         */
16928         'add' : true,
16929         /**
16930          * @event edit
16931          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
16932         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16933         * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
16934         */
16935         'edit' : true,
16936         /**
16937          * @event remove
16938          * Fires when the remove value from the combobox array
16939         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16940         */
16941         'remove' : true,
16942         /**
16943          * @event afterremove
16944          * Fires when the remove value from the combobox array
16945         * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16946         */
16947         'afterremove' : true,
16948         /**
16949          * @event specialfilter
16950          * Fires when specialfilter
16951             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16952             */
16953         'specialfilter' : true,
16954         /**
16955          * @event tick
16956          * Fires when tick the element
16957             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16958             */
16959         'tick' : true,
16960         /**
16961          * @event touchviewdisplay
16962          * Fires when touch view require special display (default is using displayField)
16963             * @param {Roo.bootstrap.form.ComboBox} combo This combo box
16964             * @param {Object} cfg set html .
16965             */
16966         'touchviewdisplay' : true
16967         
16968     });
16969     
16970     this.item = [];
16971     this.tickItems = [];
16972     
16973     this.selectedIndex = -1;
16974     if(this.mode == 'local'){
16975         if(config.queryDelay === undefined){
16976             this.queryDelay = 10;
16977         }
16978         if(config.minChars === undefined){
16979             this.minChars = 0;
16980         }
16981     }
16982 };
16983
16984 Roo.extend(Roo.bootstrap.form.ComboBox, Roo.bootstrap.form.TriggerField, {
16985      
16986     /**
16987      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
16988      * rendering into an Roo.Editor, defaults to false)
16989      */
16990     /**
16991      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
16992      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
16993      */
16994     /**
16995      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
16996      */
16997     /**
16998      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
16999      * the dropdown list (defaults to undefined, with no header element)
17000      */
17001
17002      /**
17003      * @cfg {String/Roo.Template} tpl The template to use to render the output default is  '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' 
17004      */
17005      
17006      /**
17007      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
17008      */
17009     listWidth: undefined,
17010     /**
17011      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
17012      * mode = 'remote' or 'text' if mode = 'local')
17013      */
17014     displayField: undefined,
17015     
17016     /**
17017      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
17018      * mode = 'remote' or 'value' if mode = 'local'). 
17019      * Note: use of a valueField requires the user make a selection
17020      * in order for a value to be mapped.
17021      */
17022     valueField: undefined,
17023     /**
17024      * @cfg {String} modalTitle The title of the dialog that pops up on mobile views.
17025      */
17026     modalTitle : '',
17027     
17028     /**
17029      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
17030      * field's data value (defaults to the underlying DOM element's name)
17031      */
17032     hiddenName: undefined,
17033     /**
17034      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
17035      */
17036     listClass: '',
17037     /**
17038      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
17039      */
17040     selectedClass: 'active',
17041     
17042     /**
17043      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
17044      */
17045     shadow:'sides',
17046     /**
17047      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
17048      * anchor positions (defaults to 'tl-bl')
17049      */
17050     listAlign: 'tl-bl?',
17051     /**
17052      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
17053      */
17054     maxHeight: 300,
17055     /**
17056      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
17057      * query specified by the allQuery config option (defaults to 'query')
17058      */
17059     triggerAction: 'query',
17060     /**
17061      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
17062      * (defaults to 4, does not apply if editable = false)
17063      */
17064     minChars : 4,
17065     /**
17066      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
17067      * delay (typeAheadDelay) if it matches a known value (defaults to false)
17068      */
17069     typeAhead: false,
17070     /**
17071      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
17072      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
17073      */
17074     queryDelay: 500,
17075     /**
17076      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
17077      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
17078      */
17079     pageSize: 0,
17080     /**
17081      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
17082      * when editable = true (defaults to false)
17083      */
17084     selectOnFocus:false,
17085     /**
17086      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
17087      */
17088     queryParam: 'query',
17089     /**
17090      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
17091      * when mode = 'remote' (defaults to 'Loading...')
17092      */
17093     loadingText: 'Loading...',
17094     /**
17095      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
17096      */
17097     resizable: false,
17098     /**
17099      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
17100      */
17101     handleHeight : 8,
17102     /**
17103      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
17104      * traditional select (defaults to true)
17105      */
17106     editable: true,
17107     /**
17108      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
17109      */
17110     allQuery: '',
17111     /**
17112      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
17113      */
17114     mode: 'remote',
17115     /**
17116      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
17117      * listWidth has a higher value)
17118      */
17119     minListWidth : 70,
17120     /**
17121      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
17122      * allow the user to set arbitrary text into the field (defaults to false)
17123      */
17124     forceSelection:false,
17125     /**
17126      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
17127      * if typeAhead = true (defaults to 250)
17128      */
17129     typeAheadDelay : 250,
17130     /**
17131      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
17132      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
17133      */
17134     valueNotFoundText : undefined,
17135     /**
17136      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
17137      */
17138     blockFocus : false,
17139     
17140     /**
17141      * @cfg {Boolean} disableClear Disable showing of clear button.
17142      */
17143     disableClear : false,
17144     /**
17145      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
17146      */
17147     alwaysQuery : false,
17148     
17149     /**
17150      * @cfg {Boolean} multiple  (true|false) ComboBobArray, default false
17151      */
17152     multiple : false,
17153     
17154     /**
17155      * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
17156      */
17157     invalidClass : "has-warning",
17158     
17159     /**
17160      * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
17161      */
17162     validClass : "has-success",
17163     
17164     /**
17165      * @cfg {Boolean} specialFilter (true|false) special filter default false
17166      */
17167     specialFilter : false,
17168     
17169     /**
17170      * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true
17171      */
17172     mobileTouchView : true,
17173     
17174     /**
17175      * @cfg {Boolean} useNativeIOS (true|false) render it as classic select for ios, not support dynamic load data (default false)
17176      */
17177     useNativeIOS : false,
17178     
17179     /**
17180      * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view
17181      */
17182     mobile_restrict_height : false,
17183     
17184     ios_options : false,
17185     
17186     //private
17187     addicon : false,
17188     editicon: false,
17189     
17190     page: 0,
17191     hasQuery: false,
17192     append: false,
17193     loadNext: false,
17194     autoFocus : true,
17195     tickable : false,
17196     btnPosition : 'right',
17197     triggerList : true,
17198     showToggleBtn : true,
17199     animate : true,
17200     emptyResultText: 'Empty',
17201     triggerText : 'Select',
17202     emptyTitle : '',
17203     width : false,
17204     
17205     // element that contains real text value.. (when hidden is used..)
17206     
17207     getAutoCreate : function()
17208     {   
17209         var cfg = false;
17210         //render
17211         /*
17212          * Render classic select for iso
17213          */
17214         
17215         if(Roo.isIOS && this.useNativeIOS){
17216             cfg = this.getAutoCreateNativeIOS();
17217             return cfg;
17218         }
17219         
17220         /*
17221          * Touch Devices
17222          */
17223         
17224         if(Roo.isTouch && this.mobileTouchView){
17225             cfg = this.getAutoCreateTouchView();
17226             return cfg;;
17227         }
17228         
17229         /*
17230          *  Normal ComboBox
17231          */
17232         if(!this.tickable){
17233             cfg = Roo.bootstrap.form.ComboBox.superclass.getAutoCreate.call(this);
17234             return cfg;
17235         }
17236         
17237         /*
17238          *  ComboBox with tickable selections
17239          */
17240              
17241         var align = this.labelAlign || this.parentLabelAlign();
17242         
17243         cfg = {
17244             cls : 'form-group roo-combobox-tickable' //input-group
17245         };
17246         
17247         var btn_text_select = '';
17248         var btn_text_done = '';
17249         var btn_text_cancel = '';
17250         
17251         if (this.btn_text_show) {
17252             btn_text_select = 'Select';
17253             btn_text_done = 'Done';
17254             btn_text_cancel = 'Cancel'; 
17255         }
17256         
17257         var buttons = {
17258             tag : 'div',
17259             cls : 'tickable-buttons',
17260             cn : [
17261                 {
17262                     tag : 'button',
17263                     type : 'button',
17264                     cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
17265                     //html : this.triggerText
17266                     html: btn_text_select
17267                 },
17268                 {
17269                     tag : 'button',
17270                     type : 'button',
17271                     name : 'ok',
17272                     cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
17273                     //html : 'Done'
17274                     html: btn_text_done
17275                 },
17276                 {
17277                     tag : 'button',
17278                     type : 'button',
17279                     name : 'cancel',
17280                     cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
17281                     //html : 'Cancel'
17282                     html: btn_text_cancel
17283                 }
17284             ]
17285         };
17286         
17287         if(this.editable){
17288             buttons.cn.unshift({
17289                 tag: 'input',
17290                 cls: 'roo-select2-search-field-input'
17291             });
17292         }
17293         
17294         var _this = this;
17295         
17296         Roo.each(buttons.cn, function(c){
17297             if (_this.size) {
17298                 c.cls += ' btn-' + _this.size;
17299             }
17300
17301             if (_this.disabled) {
17302                 c.disabled = true;
17303             }
17304         });
17305         
17306         var box = {
17307             tag: 'div',
17308             style : 'display: contents',
17309             cn: [
17310                 {
17311                     tag: 'input',
17312                     type : 'hidden',
17313                     cls: 'form-hidden-field'
17314                 },
17315                 {
17316                     tag: 'ul',
17317                     cls: 'roo-select2-choices',
17318                     cn:[
17319                         {
17320                             tag: 'li',
17321                             cls: 'roo-select2-search-field',
17322                             cn: [
17323                                 buttons
17324                             ]
17325                         }
17326                     ]
17327                 }
17328             ]
17329         };
17330         
17331         var combobox = {
17332             cls: 'roo-select2-container input-group roo-select2-container-multi',
17333             cn: [
17334                 
17335                 box
17336 //                {
17337 //                    tag: 'ul',
17338 //                    cls: 'typeahead typeahead-long dropdown-menu',
17339 //                    style: 'display:none; max-height:' + this.maxHeight + 'px;'
17340 //                }
17341             ]
17342         };
17343         
17344         if(this.hasFeedback && !this.allowBlank){
17345             
17346             var feedback = {
17347                 tag: 'span',
17348                 cls: 'glyphicon form-control-feedback'
17349             };
17350
17351             combobox.cn.push(feedback);
17352         }
17353         
17354         
17355         
17356         var indicator = {
17357             tag : 'i',
17358             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
17359             tooltip : 'This field is required'
17360         };
17361         if (Roo.bootstrap.version == 4) {
17362             indicator = {
17363                 tag : 'i',
17364                 style : 'display:none'
17365             };
17366         }
17367         if (align ==='left' && this.fieldLabel.length) {
17368             
17369             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
17370             
17371             cfg.cn = [
17372                 indicator,
17373                 {
17374                     tag: 'label',
17375                     'for' :  id,
17376                     cls : 'control-label col-form-label',
17377                     html : this.fieldLabel
17378
17379                 },
17380                 {
17381                     cls : "", 
17382                     cn: [
17383                         combobox
17384                     ]
17385                 }
17386
17387             ];
17388             
17389             var labelCfg = cfg.cn[1];
17390             var contentCfg = cfg.cn[2];
17391             
17392
17393             if(this.indicatorpos == 'right'){
17394                 
17395                 cfg.cn = [
17396                     {
17397                         tag: 'label',
17398                         'for' :  id,
17399                         cls : 'control-label col-form-label',
17400                         cn : [
17401                             {
17402                                 tag : 'span',
17403                                 html : this.fieldLabel
17404                             },
17405                             indicator
17406                         ]
17407                     },
17408                     {
17409                         cls : "",
17410                         cn: [
17411                             combobox
17412                         ]
17413                     }
17414
17415                 ];
17416                 
17417                 
17418                 
17419                 labelCfg = cfg.cn[0];
17420                 contentCfg = cfg.cn[1];
17421             
17422             }
17423             
17424             if(this.labelWidth > 12){
17425                 labelCfg.style = "width: " + this.labelWidth + 'px';
17426             }
17427             if(this.width * 1 > 0){
17428                 contentCfg.style = "width: " + this.width + 'px';
17429             }
17430             if(this.labelWidth < 13 && this.labelmd == 0){
17431                 this.labelmd = this.labelWidth;
17432             }
17433             
17434             if(this.labellg > 0){
17435                 labelCfg.cls += ' col-lg-' + this.labellg;
17436                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
17437             }
17438             
17439             if(this.labelmd > 0){
17440                 labelCfg.cls += ' col-md-' + this.labelmd;
17441                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
17442             }
17443             
17444             if(this.labelsm > 0){
17445                 labelCfg.cls += ' col-sm-' + this.labelsm;
17446                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
17447             }
17448             
17449             if(this.labelxs > 0){
17450                 labelCfg.cls += ' col-xs-' + this.labelxs;
17451                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
17452             }
17453                 
17454                 
17455         } else if ( this.fieldLabel.length) {
17456 //                Roo.log(" label");
17457                  cfg.cn = [
17458                    indicator,
17459                     {
17460                         tag: 'label',
17461                         //cls : 'input-group-addon',
17462                         html : this.fieldLabel
17463                     },
17464                     combobox
17465                 ];
17466                 
17467                 if(this.indicatorpos == 'right'){
17468                     cfg.cn = [
17469                         {
17470                             tag: 'label',
17471                             //cls : 'input-group-addon',
17472                             html : this.fieldLabel
17473                         },
17474                         indicator,
17475                         combobox
17476                     ];
17477                     
17478                 }
17479
17480         } else {
17481             
17482 //                Roo.log(" no label && no align");
17483                 cfg = combobox
17484                      
17485                 
17486         }
17487          
17488         var settings=this;
17489         ['xs','sm','md','lg'].map(function(size){
17490             if (settings[size]) {
17491                 cfg.cls += ' col-' + size + '-' + settings[size];
17492             }
17493         });
17494         
17495         return cfg;
17496         
17497     },
17498     
17499     _initEventsCalled : false,
17500     
17501     // private
17502     initEvents: function()
17503     {   
17504         if (this._initEventsCalled) { // as we call render... prevent looping...
17505             return;
17506         }
17507         this._initEventsCalled = true;
17508         
17509         if (!this.store) {
17510             throw "can not find store for combo";
17511         }
17512         
17513         this.indicator = this.indicatorEl();
17514         
17515         this.store = Roo.factory(this.store, Roo.data);
17516         this.store.parent = this;
17517         
17518         // if we are building from html. then this element is so complex, that we can not really
17519         // use the rendered HTML.
17520         // so we have to trash and replace the previous code.
17521         if (Roo.XComponent.build_from_html) {
17522             // remove this element....
17523             var e = this.el.dom, k=0;
17524             while (e ) { e = e.previousSibling;  ++k;}
17525
17526             this.el.remove();
17527             
17528             this.el=false;
17529             this.rendered = false;
17530             
17531             this.render(this.parent().getChildContainer(true), k);
17532         }
17533         
17534         if(Roo.isIOS && this.useNativeIOS){
17535             this.initIOSView();
17536             return;
17537         }
17538         
17539         /*
17540          * Touch Devices
17541          */
17542         
17543         if(Roo.isTouch && this.mobileTouchView){
17544             this.initTouchView();
17545             return;
17546         }
17547         
17548         if(this.tickable){
17549             this.initTickableEvents();
17550             return;
17551         }
17552         
17553         Roo.bootstrap.form.ComboBox.superclass.initEvents.call(this);
17554         
17555         if(this.hiddenName){
17556             
17557             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17558             
17559             this.hiddenField.dom.value =
17560                 this.hiddenValue !== undefined ? this.hiddenValue :
17561                 this.value !== undefined ? this.value : '';
17562
17563             // prevent input submission
17564             this.el.dom.removeAttribute('name');
17565             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17566              
17567              
17568         }
17569         //if(Roo.isGecko){
17570         //    this.el.dom.setAttribute('autocomplete', 'off');
17571         //}
17572         
17573         var cls = 'x-combo-list';
17574         
17575         //this.list = new Roo.Layer({
17576         //    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
17577         //});
17578         
17579         var _this = this;
17580         
17581         (function(){
17582             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17583             _this.list.setWidth(lw);
17584         }).defer(100);
17585         
17586         this.list.on('mouseover', this.onViewOver, this);
17587         this.list.on('mousemove', this.onViewMove, this);
17588         this.list.on('scroll', this.onViewScroll, this);
17589         
17590         /*
17591         this.list.swallowEvent('mousewheel');
17592         this.assetHeight = 0;
17593
17594         if(this.title){
17595             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
17596             this.assetHeight += this.header.getHeight();
17597         }
17598
17599         this.innerList = this.list.createChild({cls:cls+'-inner'});
17600         this.innerList.on('mouseover', this.onViewOver, this);
17601         this.innerList.on('mousemove', this.onViewMove, this);
17602         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17603         
17604         if(this.allowBlank && !this.pageSize && !this.disableClear){
17605             this.footer = this.list.createChild({cls:cls+'-ft'});
17606             this.pageTb = new Roo.Toolbar(this.footer);
17607            
17608         }
17609         if(this.pageSize){
17610             this.footer = this.list.createChild({cls:cls+'-ft'});
17611             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
17612                     {pageSize: this.pageSize});
17613             
17614         }
17615         
17616         if (this.pageTb && this.allowBlank && !this.disableClear) {
17617             var _this = this;
17618             this.pageTb.add(new Roo.Toolbar.Fill(), {
17619                 cls: 'x-btn-icon x-btn-clear',
17620                 text: '&#160;',
17621                 handler: function()
17622                 {
17623                     _this.collapse();
17624                     _this.clearValue();
17625                     _this.onSelect(false, -1);
17626                 }
17627             });
17628         }
17629         if (this.footer) {
17630             this.assetHeight += this.footer.getHeight();
17631         }
17632         */
17633             
17634         if(!this.tpl){
17635             this.tpl = Roo.bootstrap.version == 4 ?
17636                 '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' :  // 4 does not need <li> and it get's really confisued.
17637                 '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
17638         }
17639
17640         this.view = new Roo.View(this.list, this.tpl, {
17641             singleSelect:true, store: this.store, selectedClass: this.selectedClass
17642         });
17643         //this.view.wrapEl.setDisplayed(false);
17644         this.view.on('click', this.onViewClick, this);
17645         
17646         
17647         this.store.on('beforeload', this.onBeforeLoad, this);
17648         this.store.on('load', this.onLoad, this);
17649         this.store.on('loadexception', this.onLoadException, this);
17650         /*
17651         if(this.resizable){
17652             this.resizer = new Roo.Resizable(this.list,  {
17653                pinned:true, handles:'se'
17654             });
17655             this.resizer.on('resize', function(r, w, h){
17656                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
17657                 this.listWidth = w;
17658                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
17659                 this.restrictHeight();
17660             }, this);
17661             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
17662         }
17663         */
17664         if(!this.editable){
17665             this.editable = true;
17666             this.setEditable(false);
17667         }
17668         
17669         /*
17670         
17671         if (typeof(this.events.add.listeners) != 'undefined') {
17672             
17673             this.addicon = this.wrap.createChild(
17674                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
17675        
17676             this.addicon.on('click', function(e) {
17677                 this.fireEvent('add', this);
17678             }, this);
17679         }
17680         if (typeof(this.events.edit.listeners) != 'undefined') {
17681             
17682             this.editicon = this.wrap.createChild(
17683                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
17684             if (this.addicon) {
17685                 this.editicon.setStyle('margin-left', '40px');
17686             }
17687             this.editicon.on('click', function(e) {
17688                 
17689                 // we fire even  if inothing is selected..
17690                 this.fireEvent('edit', this, this.lastData );
17691                 
17692             }, this);
17693         }
17694         */
17695         
17696         this.keyNav = new Roo.KeyNav(this.inputEl(), {
17697             "up" : function(e){
17698                 this.inKeyMode = true;
17699                 this.selectPrev();
17700             },
17701
17702             "down" : function(e){
17703                 if(!this.isExpanded()){
17704                     this.onTriggerClick();
17705                 }else{
17706                     this.inKeyMode = true;
17707                     this.selectNext();
17708                 }
17709             },
17710
17711             "enter" : function(e){
17712 //                this.onViewClick();
17713                 //return true;
17714                 this.collapse();
17715                 
17716                 if(this.fireEvent("specialkey", this, e)){
17717                     this.onViewClick(false);
17718                 }
17719                 
17720                 return true;
17721             },
17722
17723             "esc" : function(e){
17724                 this.collapse();
17725             },
17726
17727             "tab" : function(e){
17728                 this.collapse();
17729                 
17730                 if(this.fireEvent("specialkey", this, e)){
17731                     this.onViewClick(false);
17732                 }
17733                 
17734                 return true;
17735             },
17736
17737             scope : this,
17738
17739             doRelay : function(foo, bar, hname){
17740                 if(hname == 'down' || this.scope.isExpanded()){
17741                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17742                 }
17743                 return true;
17744             },
17745
17746             forceKeyDown: true
17747         });
17748         
17749         
17750         this.queryDelay = Math.max(this.queryDelay || 10,
17751                 this.mode == 'local' ? 10 : 250);
17752         
17753         
17754         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17755         
17756         if(this.typeAhead){
17757             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17758         }
17759         if(this.editable !== false){
17760             this.inputEl().on("keyup", this.onKeyUp, this);
17761         }
17762         if(this.forceSelection){
17763             this.inputEl().on('blur', this.doForce, this);
17764         }
17765         
17766         if(this.multiple){
17767             this.choices = this.el.select('ul.roo-select2-choices', true).first();
17768             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17769         }
17770     },
17771     
17772     initTickableEvents: function()
17773     {   
17774         this.createList();
17775         
17776         if(this.hiddenName){
17777             
17778             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17779             
17780             this.hiddenField.dom.value =
17781                 this.hiddenValue !== undefined ? this.hiddenValue :
17782                 this.value !== undefined ? this.value : '';
17783
17784             // prevent input submission
17785             this.el.dom.removeAttribute('name');
17786             this.hiddenField.dom.setAttribute('name', this.hiddenName);
17787              
17788              
17789         }
17790         
17791 //        this.list = this.el.select('ul.dropdown-menu',true).first();
17792         
17793         this.choices = this.el.select('ul.roo-select2-choices', true).first();
17794         this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17795         if(this.triggerList){
17796             this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
17797         }
17798          
17799         this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
17800         this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
17801         
17802         this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
17803         this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
17804         
17805         this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
17806         this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
17807         
17808         this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
17809         this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
17810         this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
17811         
17812         this.okBtn.hide();
17813         this.cancelBtn.hide();
17814         
17815         var _this = this;
17816         
17817         (function(){
17818             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
17819             _this.list.setWidth(lw);
17820         }).defer(100);
17821         
17822         this.list.on('mouseover', this.onViewOver, this);
17823         this.list.on('mousemove', this.onViewMove, this);
17824         
17825         this.list.on('scroll', this.onViewScroll, this);
17826         
17827         if(!this.tpl){
17828             this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}"' + 
17829                 'type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
17830         }
17831
17832         this.view = new Roo.View(this.list, this.tpl, {
17833             singleSelect:true,
17834             tickable:true,
17835             parent:this,
17836             store: this.store,
17837             selectedClass: this.selectedClass
17838         });
17839         
17840         //this.view.wrapEl.setDisplayed(false);
17841         this.view.on('click', this.onViewClick, this);
17842         
17843         
17844         
17845         this.store.on('beforeload', this.onBeforeLoad, this);
17846         this.store.on('load', this.onLoad, this);
17847         this.store.on('loadexception', this.onLoadException, this);
17848         
17849         if(this.editable){
17850             this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
17851                 "up" : function(e){
17852                     this.inKeyMode = true;
17853                     this.selectPrev();
17854                 },
17855
17856                 "down" : function(e){
17857                     this.inKeyMode = true;
17858                     this.selectNext();
17859                 },
17860
17861                 "enter" : function(e){
17862                     if(this.fireEvent("specialkey", this, e)){
17863                         this.onViewClick(false);
17864                     }
17865                     
17866                     return true;
17867                 },
17868
17869                 "esc" : function(e){
17870                     this.onTickableFooterButtonClick(e, false, false);
17871                 },
17872
17873                 "tab" : function(e){
17874                     this.fireEvent("specialkey", this, e);
17875                     
17876                     this.onTickableFooterButtonClick(e, false, false);
17877                     
17878                     return true;
17879                 },
17880
17881                 scope : this,
17882
17883                 doRelay : function(e, fn, key){
17884                     if(this.scope.isExpanded()){
17885                        return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
17886                     }
17887                     return true;
17888                 },
17889
17890                 forceKeyDown: true
17891             });
17892         }
17893         
17894         this.queryDelay = Math.max(this.queryDelay || 10,
17895                 this.mode == 'local' ? 10 : 250);
17896         
17897         
17898         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
17899         
17900         if(this.typeAhead){
17901             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
17902         }
17903         
17904         if(this.editable !== false){
17905             this.tickableInputEl().on("keyup", this.onKeyUp, this);
17906         }
17907         
17908         this.indicator = this.indicatorEl();
17909         
17910         if(this.indicator){
17911             this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
17912             this.indicator.hide();
17913         }
17914         
17915     },
17916
17917     onDestroy : function(){
17918         if(this.view){
17919             this.view.setStore(null);
17920             this.view.el.removeAllListeners();
17921             this.view.el.remove();
17922             this.view.purgeListeners();
17923         }
17924         if(this.list){
17925             this.list.dom.innerHTML  = '';
17926         }
17927         
17928         if(this.store){
17929             this.store.un('beforeload', this.onBeforeLoad, this);
17930             this.store.un('load', this.onLoad, this);
17931             this.store.un('loadexception', this.onLoadException, this);
17932         }
17933         Roo.bootstrap.form.ComboBox.superclass.onDestroy.call(this);
17934     },
17935
17936     // private
17937     fireKey : function(e){
17938         if(e.isNavKeyPress() && !this.list.isVisible()){
17939             this.fireEvent("specialkey", this, e);
17940         }
17941     },
17942
17943     // private
17944     onResize: function(w, h)
17945     {
17946         
17947         
17948 //        Roo.bootstrap.form.ComboBox.superclass.onResize.apply(this, arguments);
17949 //        
17950 //        if(typeof w != 'number'){
17951 //            // we do not handle it!?!?
17952 //            return;
17953 //        }
17954 //        var tw = this.trigger.getWidth();
17955 //       // tw += this.addicon ? this.addicon.getWidth() : 0;
17956 //       // tw += this.editicon ? this.editicon.getWidth() : 0;
17957 //        var x = w - tw;
17958 //        this.inputEl().setWidth( this.adjustWidth('input', x));
17959 //            
17960 //        //this.trigger.setStyle('left', x+'px');
17961 //        
17962 //        if(this.list && this.listWidth === undefined){
17963 //            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
17964 //            this.list.setWidth(lw);
17965 //            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
17966 //        }
17967         
17968     
17969         
17970     },
17971
17972     /**
17973      * Allow or prevent the user from directly editing the field text.  If false is passed,
17974      * the user will only be able to select from the items defined in the dropdown list.  This method
17975      * is the runtime equivalent of setting the 'editable' config option at config time.
17976      * @param {Boolean} value True to allow the user to directly edit the field text
17977      */
17978     setEditable : function(value){
17979         if(value == this.editable){
17980             return;
17981         }
17982         this.editable = value;
17983         if(!value){
17984             this.inputEl().dom.setAttribute('readOnly', true);
17985             this.inputEl().on('mousedown', this.onTriggerClick,  this);
17986             this.inputEl().addClass('x-combo-noedit');
17987         }else{
17988             this.inputEl().dom.removeAttribute('readOnly');
17989             this.inputEl().un('mousedown', this.onTriggerClick,  this);
17990             this.inputEl().removeClass('x-combo-noedit');
17991         }
17992     },
17993
17994     // private
17995     
17996     onBeforeLoad : function(combo,opts){
17997         if(!this.hasFocus){
17998             return;
17999         }
18000          if (!opts.add) {
18001             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
18002          }
18003         this.restrictHeight();
18004         this.selectedIndex = -1;
18005     },
18006
18007     // private
18008     onLoad : function(){
18009         
18010         this.hasQuery = false;
18011         
18012         if(!this.hasFocus){
18013             return;
18014         }
18015         
18016         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
18017             this.loading.hide();
18018         }
18019         
18020         if(this.store.getCount() > 0){
18021             
18022             this.expand();
18023             this.restrictHeight();
18024             if(this.lastQuery == this.allQuery){
18025                 if(this.editable && !this.tickable){
18026                     this.inputEl().dom.select();
18027                 }
18028                 
18029                 if(
18030                     !this.selectByValue(this.value, true) &&
18031                     this.autoFocus && 
18032                     (
18033                         !this.store.lastOptions ||
18034                         typeof(this.store.lastOptions.add) == 'undefined' || 
18035                         this.store.lastOptions.add != true
18036                     )
18037                 ){
18038                     this.select(0, true);
18039                 }
18040             }else{
18041                 if(this.autoFocus){
18042                     this.selectNext();
18043                 }
18044                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
18045                     this.taTask.delay(this.typeAheadDelay);
18046                 }
18047             }
18048         }else{
18049             this.onEmptyResults();
18050         }
18051         
18052         //this.el.focus();
18053     },
18054     // private
18055     onLoadException : function()
18056     {
18057         this.hasQuery = false;
18058         
18059         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
18060             this.loading.hide();
18061         }
18062         
18063         if(this.tickable && this.editable){
18064             return;
18065         }
18066         
18067         this.collapse();
18068         // only causes errors at present
18069         //Roo.log(this.store.reader.jsonData);
18070         //if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
18071             // fixme
18072             //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
18073         //}
18074         
18075         
18076     },
18077     // private
18078     onTypeAhead : function(){
18079         if(this.store.getCount() > 0){
18080             var r = this.store.getAt(0);
18081             var newValue = r.data[this.displayField];
18082             var len = newValue.length;
18083             var selStart = this.getRawValue().length;
18084             
18085             if(selStart != len){
18086                 this.setRawValue(newValue);
18087                 this.selectText(selStart, newValue.length);
18088             }
18089         }
18090     },
18091
18092     // private
18093     onSelect : function(record, index){
18094         
18095         if(this.fireEvent('beforeselect', this, record, index) !== false){
18096         
18097             this.setFromData(index > -1 ? record.data : false);
18098             
18099             this.collapse();
18100             this.fireEvent('select', this, record, index);
18101         }
18102     },
18103
18104     /**
18105      * Returns the currently selected field value or empty string if no value is set.
18106      * @return {String} value The selected value
18107      */
18108     getValue : function()
18109     {
18110         if(Roo.isIOS && this.useNativeIOS){
18111             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.valueField];
18112         }
18113         
18114         if(this.multiple){
18115             return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
18116         }
18117         
18118         if(this.valueField){
18119             return typeof this.value != 'undefined' ? this.value : '';
18120         }else{
18121             return Roo.bootstrap.form.ComboBox.superclass.getValue.call(this);
18122         }
18123     },
18124     
18125     getRawValue : function()
18126     {
18127         if(Roo.isIOS && this.useNativeIOS){
18128             return this.ios_options[this.inputEl().dom.selectedIndex].data[this.displayField];
18129         }
18130         
18131         var v = this.inputEl().getValue();
18132         
18133         return v;
18134     },
18135
18136     /**
18137      * Clears any text/value currently set in the field
18138      */
18139     clearValue : function(){
18140         
18141         if(this.hiddenField){
18142             this.hiddenField.dom.value = '';
18143         }
18144         this.value = '';
18145         this.setRawValue('');
18146         this.lastSelectionText = '';
18147         this.lastData = false;
18148         
18149         var close = this.closeTriggerEl();
18150         
18151         if(close){
18152             close.hide();
18153         }
18154         
18155         this.validate();
18156         
18157     },
18158
18159     /**
18160      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
18161      * will be displayed in the field.  If the value does not match the data value of an existing item,
18162      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
18163      * Otherwise the field will be blank (although the value will still be set).
18164      * @param {String} value The value to match
18165      */
18166     setValue : function(v)
18167     {
18168         if(Roo.isIOS && this.useNativeIOS){
18169             this.setIOSValue(v);
18170             return;
18171         }
18172         
18173         if(this.multiple){
18174             this.syncValue();
18175             return;
18176         }
18177         
18178         var text = v;
18179         if(this.valueField){
18180             var r = this.findRecord(this.valueField, v);
18181             if(r){
18182                 text = r.data[this.displayField];
18183             }else if(this.valueNotFoundText !== undefined){
18184                 text = this.valueNotFoundText;
18185             }
18186         }
18187         this.lastSelectionText = text;
18188         if(this.hiddenField){
18189             this.hiddenField.dom.value = v;
18190         }
18191         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, text);
18192         this.value = v;
18193         
18194         var close = this.closeTriggerEl();
18195         
18196         if(close){
18197             (v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
18198         }
18199         
18200         this.validate();
18201     },
18202     /**
18203      * @property {Object} the last set data for the element
18204      */
18205     
18206     lastData : false,
18207     /**
18208      * Sets the value of the field based on a object which is related to the record format for the store.
18209      * @param {Object} value the value to set as. or false on reset?
18210      */
18211     setFromData : function(o){
18212         
18213         if(this.multiple){
18214             this.addItem(o);
18215             return;
18216         }
18217             
18218         var dv = ''; // display value
18219         var vv = ''; // value value..
18220         this.lastData = o;
18221         if (this.displayField) {
18222             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18223         } else {
18224             // this is an error condition!!!
18225             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18226         }
18227         
18228         if(this.valueField){
18229             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
18230         }
18231         
18232         var close = this.closeTriggerEl();
18233         
18234         if(close){
18235             if(dv.length || vv * 1 > 0){
18236                 close.show() ;
18237                 this.blockFocus=true;
18238             } else {
18239                 close.hide();
18240             }             
18241         }
18242         
18243         if(this.hiddenField){
18244             this.hiddenField.dom.value = vv;
18245             
18246             this.lastSelectionText = dv;
18247             Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18248             this.value = vv;
18249             return;
18250         }
18251         // no hidden field.. - we store the value in 'value', but still display
18252         // display field!!!!
18253         this.lastSelectionText = dv;
18254         Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
18255         this.value = vv;
18256         
18257         
18258         
18259     },
18260     // private
18261     reset : function(){
18262         // overridden so that last data is reset..
18263         
18264         if(this.multiple){
18265             this.clearItem();
18266             return;
18267         }
18268         
18269         this.setValue(this.originalValue);
18270         //this.clearInvalid();
18271         this.lastData = false;
18272         if (this.view) {
18273             this.view.clearSelections();
18274         }
18275         
18276         this.validate();
18277     },
18278     // private
18279     findRecord : function(prop, value){
18280         var record;
18281         if(this.store.getCount() > 0){
18282             this.store.each(function(r){
18283                 if(r.data[prop] == value){
18284                     record = r;
18285                     return false;
18286                 }
18287                 return true;
18288             });
18289         }
18290         return record;
18291     },
18292     
18293     getName: function()
18294     {
18295         // returns hidden if it's set..
18296         if (!this.rendered) {return ''};
18297         return !this.hiddenName && this.inputEl().dom.name  ? this.inputEl().dom.name : (this.hiddenName || '');
18298         
18299     },
18300     // private
18301     onViewMove : function(e, t){
18302         this.inKeyMode = false;
18303     },
18304
18305     // private
18306     onViewOver : function(e, t){
18307         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
18308             return;
18309         }
18310         var item = this.view.findItemFromChild(t);
18311         
18312         if(item){
18313             var index = this.view.indexOf(item);
18314             this.select(index, false);
18315         }
18316     },
18317
18318     // private
18319     onViewClick : function(view, doFocus, el, e)
18320     {
18321         var index = this.view.getSelectedIndexes()[0];
18322         
18323         var r = this.store.getAt(index);
18324         
18325         if(this.tickable){
18326             
18327             if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
18328                 return;
18329             }
18330             
18331             var rm = false;
18332             var _this = this;
18333             
18334             Roo.each(this.tickItems, function(v,k){
18335                 
18336                 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
18337                     Roo.log(v);
18338                     _this.tickItems.splice(k, 1);
18339                     
18340                     if(typeof(e) == 'undefined' && view == false){
18341                         Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
18342                     }
18343                     
18344                     rm = true;
18345                     return;
18346                 }
18347             });
18348             
18349             if(rm){
18350                 return;
18351             }
18352             
18353             if(this.fireEvent('tick', this, r, index, Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked) !== false){
18354                 this.tickItems.push(r.data);
18355             }
18356             
18357             if(typeof(e) == 'undefined' && view == false){
18358                 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
18359             }
18360                     
18361             return;
18362         }
18363         
18364         if(r){
18365             this.onSelect(r, index);
18366         }
18367         if(doFocus !== false && !this.blockFocus){
18368             this.inputEl().focus();
18369         }
18370     },
18371
18372     // private
18373     restrictHeight : function(){
18374         //this.innerList.dom.style.height = '';
18375         //var inner = this.innerList.dom;
18376         //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
18377         //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
18378         //this.list.beginUpdate();
18379         //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
18380         this.list.alignTo(this.inputEl(), this.listAlign);
18381         this.list.alignTo(this.inputEl(), this.listAlign);
18382         //this.list.endUpdate();
18383     },
18384
18385     // private
18386     onEmptyResults : function(){
18387         
18388         if(this.tickable && this.editable){
18389             this.hasFocus = false;
18390             this.restrictHeight();
18391             return;
18392         }
18393         
18394         this.collapse();
18395     },
18396
18397     /**
18398      * Returns true if the dropdown list is expanded, else false.
18399      */
18400     isExpanded : function(){
18401         return this.list.isVisible();
18402     },
18403
18404     /**
18405      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
18406      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18407      * @param {String} value The data value of the item to select
18408      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18409      * selected item if it is not currently in view (defaults to true)
18410      * @return {Boolean} True if the value matched an item in the list, else false
18411      */
18412     selectByValue : function(v, scrollIntoView){
18413         if(v !== undefined && v !== null){
18414             var r = this.findRecord(this.valueField || this.displayField, v);
18415             if(r){
18416                 this.select(this.store.indexOf(r), scrollIntoView);
18417                 return true;
18418             }
18419         }
18420         return false;
18421     },
18422
18423     /**
18424      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
18425      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
18426      * @param {Number} index The zero-based index of the list item to select
18427      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
18428      * selected item if it is not currently in view (defaults to true)
18429      */
18430     select : function(index, scrollIntoView){
18431         this.selectedIndex = index;
18432         this.view.select(index);
18433         if(scrollIntoView !== false){
18434             var el = this.view.getNode(index);
18435             /*
18436              * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
18437              */
18438             if(el){
18439                 this.list.scrollChildIntoView(el, false);
18440             }
18441         }
18442     },
18443
18444     // private
18445     selectNext : function(){
18446         var ct = this.store.getCount();
18447         if(ct > 0){
18448             if(this.selectedIndex == -1){
18449                 this.select(0);
18450             }else if(this.selectedIndex < ct-1){
18451                 this.select(this.selectedIndex+1);
18452             }
18453         }
18454     },
18455
18456     // private
18457     selectPrev : function(){
18458         var ct = this.store.getCount();
18459         if(ct > 0){
18460             if(this.selectedIndex == -1){
18461                 this.select(0);
18462             }else if(this.selectedIndex != 0){
18463                 this.select(this.selectedIndex-1);
18464             }
18465         }
18466     },
18467
18468     // private
18469     onKeyUp : function(e){
18470         if(this.editable !== false && !e.isSpecialKey()){
18471             this.lastKey = e.getKey();
18472             this.dqTask.delay(this.queryDelay);
18473         }
18474     },
18475
18476     // private
18477     validateBlur : function(){
18478         return !this.list || !this.list.isVisible();   
18479     },
18480
18481     // private
18482     initQuery : function(){
18483         
18484         var v = this.getRawValue();
18485         
18486         if(this.tickable && this.editable){
18487             v = this.tickableInputEl().getValue();
18488         }
18489         
18490         this.doQuery(v);
18491     },
18492
18493     // private
18494     doForce : function(){
18495         if(this.inputEl().dom.value.length > 0){
18496             this.inputEl().dom.value =
18497                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
18498              
18499         }
18500     },
18501
18502     /**
18503      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
18504      * query allowing the query action to be canceled if needed.
18505      * @param {String} query The SQL query to execute
18506      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
18507      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
18508      * saved in the current store (defaults to false)
18509      */
18510     doQuery : function(q, forceAll){
18511         
18512         if(q === undefined || q === null){
18513             q = '';
18514         }
18515         var qe = {
18516             query: q,
18517             forceAll: forceAll,
18518             combo: this,
18519             cancel:false
18520         };
18521         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
18522             return false;
18523         }
18524         q = qe.query;
18525         
18526         forceAll = qe.forceAll;
18527         if(forceAll === true || (q.length >= this.minChars)){
18528             
18529             this.hasQuery = true;
18530             
18531             if(this.lastQuery != q || this.alwaysQuery){
18532                 this.lastQuery = q;
18533                 if(this.mode == 'local'){
18534                     this.selectedIndex = -1;
18535                     if(forceAll){
18536                         this.store.clearFilter();
18537                     }else{
18538                         
18539                         if(this.specialFilter){
18540                             this.fireEvent('specialfilter', this);
18541                             this.onLoad();
18542                             return;
18543                         }
18544                         
18545                         this.store.filter(this.displayField, q);
18546                     }
18547                     
18548                     this.store.fireEvent("datachanged", this.store);
18549                     
18550                     this.onLoad();
18551                     
18552                     
18553                 }else{
18554                     
18555                     this.store.baseParams[this.queryParam] = q;
18556                     
18557                     var options = {params : this.getParams(q)};
18558                     
18559                     if(this.loadNext){
18560                         options.add = true;
18561                         options.params.start = this.page * this.pageSize;
18562                     }
18563                     
18564                     this.store.load(options);
18565                     
18566                     /*
18567                      *  this code will make the page width larger, at the beginning, the list not align correctly, 
18568                      *  we should expand the list on onLoad
18569                      *  so command out it
18570                      */
18571 //                    this.expand();
18572                 }
18573             }else{
18574                 this.selectedIndex = -1;
18575                 this.onLoad();   
18576             }
18577         }
18578         
18579         this.loadNext = false;
18580     },
18581     
18582     // private
18583     getParams : function(q){
18584         var p = {};
18585         //p[this.queryParam] = q;
18586         
18587         if(this.pageSize){
18588             p.start = 0;
18589             p.limit = this.pageSize;
18590         }
18591         return p;
18592     },
18593
18594     /**
18595      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
18596      */
18597     collapse : function(){
18598         if(!this.isExpanded()){
18599             return;
18600         }
18601         
18602         this.list.hide();
18603         
18604         this.hasFocus = false;
18605         
18606         if(this.tickable){
18607             this.okBtn.hide();
18608             this.cancelBtn.hide();
18609             this.trigger.show();
18610             
18611             if(this.editable){
18612                 this.tickableInputEl().dom.value = '';
18613                 this.tickableInputEl().blur();
18614             }
18615             
18616         }
18617         
18618         Roo.get(document).un('mousedown', this.collapseIf, this);
18619         Roo.get(document).un('mousewheel', this.collapseIf, this);
18620         if (!this.editable) {
18621             Roo.get(document).un('keydown', this.listKeyPress, this);
18622         }
18623         this.fireEvent('collapse', this);
18624         
18625         this.validate();
18626     },
18627
18628     // private
18629     collapseIf : function(e){
18630         var in_combo  = e.within(this.el);
18631         var in_list =  e.within(this.list);
18632         var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
18633         
18634         if (in_combo || in_list || is_list) {
18635             //e.stopPropagation();
18636             return;
18637         }
18638         
18639         if(this.tickable){
18640             this.onTickableFooterButtonClick(e, false, false);
18641         }
18642
18643         this.collapse();
18644         
18645     },
18646
18647     /**
18648      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
18649      */
18650     expand : function(){
18651        
18652         if(this.isExpanded() || !this.hasFocus){
18653             return;
18654         }
18655         
18656         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
18657         this.list.setWidth(lw);
18658         
18659         Roo.log('expand');
18660         
18661         this.list.show();
18662         
18663         this.restrictHeight();
18664         
18665         if(this.tickable){
18666             
18667             this.tickItems = Roo.apply([], this.item);
18668             
18669             this.okBtn.show();
18670             this.cancelBtn.show();
18671             this.trigger.hide();
18672             
18673             if(this.editable){
18674                 this.tickableInputEl().focus();
18675             }
18676             
18677         }
18678         
18679         Roo.get(document).on('mousedown', this.collapseIf, this);
18680         Roo.get(document).on('mousewheel', this.collapseIf, this);
18681         if (!this.editable) {
18682             Roo.get(document).on('keydown', this.listKeyPress, this);
18683         }
18684         
18685         this.fireEvent('expand', this);
18686     },
18687
18688     // private
18689     // Implements the default empty TriggerField.onTriggerClick function
18690     onTriggerClick : function(e)
18691     {
18692         Roo.log('trigger click');
18693         
18694         if(this.disabled || !this.triggerList){
18695             return;
18696         }
18697         
18698         this.page = 0;
18699         this.loadNext = false;
18700         
18701         if(this.isExpanded()){
18702             this.collapse();
18703             if (!this.blockFocus) {
18704                 this.inputEl().focus();
18705             }
18706             
18707         }else {
18708             this.hasFocus = true;
18709             if(this.triggerAction == 'all') {
18710                 this.doQuery(this.allQuery, true);
18711             } else {
18712                 this.doQuery(this.getRawValue());
18713             }
18714             if (!this.blockFocus) {
18715                 this.inputEl().focus();
18716             }
18717         }
18718     },
18719     
18720     onTickableTriggerClick : function(e)
18721     {
18722         if(this.disabled){
18723             return;
18724         }
18725         
18726         this.page = 0;
18727         this.loadNext = false;
18728         this.hasFocus = true;
18729         
18730         if(this.triggerAction == 'all') {
18731             this.doQuery(this.allQuery, true);
18732         } else {
18733             this.doQuery(this.getRawValue());
18734         }
18735     },
18736     
18737     onSearchFieldClick : function(e)
18738     {
18739         if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
18740             this.onTickableFooterButtonClick(e, false, false);
18741             return;
18742         }
18743         
18744         if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
18745             return;
18746         }
18747         
18748         this.page = 0;
18749         this.loadNext = false;
18750         this.hasFocus = true;
18751         
18752         if(this.triggerAction == 'all') {
18753             this.doQuery(this.allQuery, true);
18754         } else {
18755             this.doQuery(this.getRawValue());
18756         }
18757     },
18758     
18759     listKeyPress : function(e)
18760     {
18761         //Roo.log('listkeypress');
18762         // scroll to first matching element based on key pres..
18763         if (e.isSpecialKey()) {
18764             return false;
18765         }
18766         var k = String.fromCharCode(e.getKey()).toUpperCase();
18767         //Roo.log(k);
18768         var match  = false;
18769         var csel = this.view.getSelectedNodes();
18770         var cselitem = false;
18771         if (csel.length) {
18772             var ix = this.view.indexOf(csel[0]);
18773             cselitem  = this.store.getAt(ix);
18774             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
18775                 cselitem = false;
18776             }
18777             
18778         }
18779         
18780         this.store.each(function(v) { 
18781             if (cselitem) {
18782                 // start at existing selection.
18783                 if (cselitem.id == v.id) {
18784                     cselitem = false;
18785                 }
18786                 return true;
18787             }
18788                 
18789             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
18790                 match = this.store.indexOf(v);
18791                 return false;
18792             }
18793             return true;
18794         }, this);
18795         
18796         if (match === false) {
18797             return true; // no more action?
18798         }
18799         // scroll to?
18800         this.view.select(match);
18801         var sn = Roo.get(this.view.getSelectedNodes()[0]);
18802         sn.scrollIntoView(sn.dom.parentNode, false);
18803     },
18804     
18805     onViewScroll : function(e, t){
18806         
18807         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){
18808             return;
18809         }
18810         
18811         this.hasQuery = true;
18812         
18813         this.loading = this.list.select('.loading', true).first();
18814         
18815         if(this.loading === null){
18816             this.list.createChild({
18817                 tag: 'div',
18818                 cls: 'loading roo-select2-more-results roo-select2-active',
18819                 html: 'Loading more results...'
18820             });
18821             
18822             this.loading = this.list.select('.loading', true).first();
18823             
18824             this.loading.setVisibilityMode(Roo.Element.DISPLAY);
18825             
18826             this.loading.hide();
18827         }
18828         
18829         this.loading.show();
18830         
18831         var _combo = this;
18832         
18833         this.page++;
18834         this.loadNext = true;
18835         
18836         (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
18837         
18838         return;
18839     },
18840     
18841     addItem : function(o)
18842     {   
18843         var dv = ''; // display value
18844         
18845         if (this.displayField) {
18846             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
18847         } else {
18848             // this is an error condition!!!
18849             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
18850         }
18851         
18852         if(!dv.length){
18853             return;
18854         }
18855         
18856         var choice = this.choices.createChild({
18857             tag: 'li',
18858             cls: 'roo-select2-search-choice',
18859             cn: [
18860                 {
18861                     tag: 'div',
18862                     html: dv
18863                 },
18864                 {
18865                     tag: 'a',
18866                     href: '#',
18867                     cls: 'roo-select2-search-choice-close fa fa-times',
18868                     tabindex: '-1'
18869                 }
18870             ]
18871             
18872         }, this.searchField);
18873         
18874         var close = choice.select('a.roo-select2-search-choice-close', true).first();
18875         
18876         close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
18877         
18878         this.item.push(o);
18879         
18880         this.lastData = o;
18881         
18882         this.syncValue();
18883         
18884         this.inputEl().dom.value = '';
18885         
18886         this.validate();
18887     },
18888     
18889     onRemoveItem : function(e, _self, o)
18890     {
18891         e.preventDefault();
18892         
18893         this.lastItem = Roo.apply([], this.item);
18894         
18895         var index = this.item.indexOf(o.data) * 1;
18896         
18897         if( index < 0){
18898             Roo.log('not this item?!');
18899             return;
18900         }
18901         
18902         this.item.splice(index, 1);
18903         o.item.remove();
18904         
18905         this.syncValue();
18906         
18907         this.fireEvent('remove', this, e);
18908         
18909         this.validate();
18910         
18911     },
18912     
18913     syncValue : function()
18914     {
18915         if(!this.item.length){
18916             this.clearValue();
18917             return;
18918         }
18919             
18920         var value = [];
18921         var _this = this;
18922         Roo.each(this.item, function(i){
18923             if(_this.valueField){
18924                 value.push(i[_this.valueField]);
18925                 return;
18926             }
18927
18928             value.push(i);
18929         });
18930
18931         this.value = value.join(',');
18932
18933         if(this.hiddenField){
18934             this.hiddenField.dom.value = this.value;
18935         }
18936         
18937         this.store.fireEvent("datachanged", this.store);
18938         
18939         this.validate();
18940     },
18941     
18942     clearItem : function()
18943     {
18944         if(!this.multiple){
18945             return;
18946         }
18947         
18948         this.item = [];
18949         
18950         Roo.each(this.choices.select('>li.roo-select2-search-choice', true).elements, function(c){
18951            c.remove();
18952         });
18953         
18954         this.syncValue();
18955         
18956         this.validate();
18957         
18958         if(this.tickable && !Roo.isTouch){
18959             this.view.refresh();
18960         }
18961     },
18962     
18963     inputEl: function ()
18964     {
18965         if(Roo.isIOS && this.useNativeIOS){
18966             return this.el.select('select.roo-ios-select', true).first();
18967         }
18968         
18969         if(Roo.isTouch && this.mobileTouchView){
18970             return this.el.select('input.form-control',true).first();
18971         }
18972         
18973         if(this.tickable){
18974             return this.searchField;
18975         }
18976         
18977         return this.el.select('input.form-control',true).first();
18978     },
18979     
18980     onTickableFooterButtonClick : function(e, btn, el)
18981     {
18982         e.preventDefault();
18983         
18984         this.lastItem = Roo.apply([], this.item);
18985         
18986         if(btn && btn.name == 'cancel'){
18987             this.tickItems = Roo.apply([], this.item);
18988             this.collapse();
18989             return;
18990         }
18991         
18992         this.clearItem();
18993         
18994         var _this = this;
18995         
18996         Roo.each(this.tickItems, function(o){
18997             _this.addItem(o);
18998         });
18999         
19000         this.collapse();
19001         
19002     },
19003     
19004     validate : function()
19005     {
19006         if(this.getVisibilityEl().hasClass('hidden')){
19007             return true;
19008         }
19009         
19010         var v = this.getRawValue();
19011         
19012         if(this.multiple){
19013             v = this.getValue();
19014         }
19015         
19016         if(this.disabled || this.allowBlank || v.length){
19017             this.markValid();
19018             return true;
19019         }
19020         
19021         this.markInvalid();
19022         return false;
19023     },
19024     
19025     tickableInputEl : function()
19026     {
19027         if(!this.tickable || !this.editable){
19028             return this.inputEl();
19029         }
19030         
19031         return this.inputEl().select('.roo-select2-search-field-input', true).first();
19032     },
19033     
19034     
19035     getAutoCreateTouchView : function()
19036     {
19037         var id = Roo.id();
19038         
19039         var cfg = {
19040             cls: 'form-group' //input-group
19041         };
19042         
19043         var input =  {
19044             tag: 'input',
19045             id : id,
19046             type : this.inputType,
19047             cls : 'form-control x-combo-noedit',
19048             autocomplete: 'new-password',
19049             placeholder : this.placeholder || '',
19050             readonly : true
19051         };
19052         
19053         if (this.name) {
19054             input.name = this.name;
19055         }
19056         
19057         if (this.size) {
19058             input.cls += ' input-' + this.size;
19059         }
19060         
19061         if (this.disabled) {
19062             input.disabled = true;
19063         }
19064         
19065         var inputblock = {
19066             cls : 'roo-combobox-wrap',
19067             cn : [
19068                 input
19069             ]
19070         };
19071         
19072         if(this.before){
19073             inputblock.cls += ' input-group';
19074             
19075             inputblock.cn.unshift({
19076                 tag :'span',
19077                 cls : 'input-group-addon input-group-prepend input-group-text',
19078                 html : this.before
19079             });
19080         }
19081         
19082         if(this.removable && !this.multiple){
19083             inputblock.cls += ' roo-removable';
19084             
19085             inputblock.cn.push({
19086                 tag: 'button',
19087                 html : 'x',
19088                 cls : 'roo-combo-removable-btn close'
19089             });
19090         }
19091
19092         if(this.hasFeedback && !this.allowBlank){
19093             
19094             inputblock.cls += ' has-feedback';
19095             
19096             inputblock.cn.push({
19097                 tag: 'span',
19098                 cls: 'glyphicon form-control-feedback'
19099             });
19100             
19101         }
19102         
19103         if (this.after) {
19104             
19105             inputblock.cls += (this.before) ? '' : ' input-group';
19106             
19107             inputblock.cn.push({
19108                 tag :'span',
19109                 cls : 'input-group-addon input-group-append input-group-text',
19110                 html : this.after
19111             });
19112         }
19113
19114         
19115         var ibwrap = inputblock;
19116         
19117         if(this.multiple){
19118             ibwrap = {
19119                 tag: 'ul',
19120                 cls: 'roo-select2-choices',
19121                 cn:[
19122                     {
19123                         tag: 'li',
19124                         cls: 'roo-select2-search-field',
19125                         cn: [
19126
19127                             inputblock
19128                         ]
19129                     }
19130                 ]
19131             };
19132         
19133             
19134         }
19135         
19136         var combobox = {
19137             cls: 'roo-select2-container input-group roo-touchview-combobox ',
19138             cn: [
19139                 {
19140                     tag: 'input',
19141                     type : 'hidden',
19142                     cls: 'form-hidden-field'
19143                 },
19144                 ibwrap
19145             ]
19146         };
19147         
19148         if(!this.multiple && this.showToggleBtn){
19149             
19150             var caret = {
19151                 cls: 'caret'
19152             };
19153             
19154             if (this.caret != false) {
19155                 caret = {
19156                      tag: 'i',
19157                      cls: 'fa fa-' + this.caret
19158                 };
19159                 
19160             }
19161             
19162             combobox.cn.push({
19163                 tag :'span',
19164                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
19165                 cn : [
19166                     Roo.bootstrap.version == 3 ? caret : '',
19167                     {
19168                         tag: 'span',
19169                         cls: 'combobox-clear',
19170                         cn  : [
19171                             {
19172                                 tag : 'i',
19173                                 cls: 'icon-remove'
19174                             }
19175                         ]
19176                     }
19177                 ]
19178
19179             })
19180         }
19181         
19182         if(this.multiple){
19183             combobox.cls += ' roo-select2-container-multi';
19184         }
19185         
19186         var required =  this.allowBlank ?  {
19187                     tag : 'i',
19188                     style: 'display: none'
19189                 } : {
19190                    tag : 'i',
19191                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
19192                    tooltip : 'This field is required'
19193                 };
19194         
19195         var align = this.labelAlign || this.parentLabelAlign();
19196         
19197         if (align ==='left' && this.fieldLabel.length) {
19198
19199             cfg.cn = [
19200                 required,
19201                 {
19202                     tag: 'label',
19203                     cls : 'control-label col-form-label',
19204                     html : this.fieldLabel
19205
19206                 },
19207                 {
19208                     cls : 'roo-combobox-wrap ', 
19209                     cn: [
19210                         combobox
19211                     ]
19212                 }
19213             ];
19214             
19215             var labelCfg = cfg.cn[1];
19216             var contentCfg = cfg.cn[2];
19217             
19218
19219             if(this.indicatorpos == 'right'){
19220                 cfg.cn = [
19221                     {
19222                         tag: 'label',
19223                         'for' :  id,
19224                         cls : 'control-label col-form-label',
19225                         cn : [
19226                             {
19227                                 tag : 'span',
19228                                 html : this.fieldLabel
19229                             },
19230                             required
19231                         ]
19232                     },
19233                     {
19234                         cls : "roo-combobox-wrap ",
19235                         cn: [
19236                             combobox
19237                         ]
19238                     }
19239
19240                 ];
19241                 
19242                 labelCfg = cfg.cn[0];
19243                 contentCfg = cfg.cn[1];
19244             }
19245             
19246            
19247             
19248             if(this.labelWidth > 12){
19249                 labelCfg.style = "width: " + this.labelWidth + 'px';
19250             }
19251            
19252             if(this.labelWidth < 13 && this.labelmd == 0){
19253                 this.labelmd = this.labelWidth;
19254             }
19255             
19256             if(this.labellg > 0){
19257                 labelCfg.cls += ' col-lg-' + this.labellg;
19258                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
19259             }
19260             
19261             if(this.labelmd > 0){
19262                 labelCfg.cls += ' col-md-' + this.labelmd;
19263                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
19264             }
19265             
19266             if(this.labelsm > 0){
19267                 labelCfg.cls += ' col-sm-' + this.labelsm;
19268                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
19269             }
19270             
19271             if(this.labelxs > 0){
19272                 labelCfg.cls += ' col-xs-' + this.labelxs;
19273                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
19274             }
19275                 
19276                 
19277         } else if ( this.fieldLabel.length) {
19278             cfg.cn = [
19279                required,
19280                 {
19281                     tag: 'label',
19282                     cls : 'control-label',
19283                     html : this.fieldLabel
19284
19285                 },
19286                 {
19287                     cls : '', 
19288                     cn: [
19289                         combobox
19290                     ]
19291                 }
19292             ];
19293             
19294             if(this.indicatorpos == 'right'){
19295                 cfg.cn = [
19296                     {
19297                         tag: 'label',
19298                         cls : 'control-label',
19299                         html : this.fieldLabel,
19300                         cn : [
19301                             required
19302                         ]
19303                     },
19304                     {
19305                         cls : '', 
19306                         cn: [
19307                             combobox
19308                         ]
19309                     }
19310                 ];
19311             }
19312         } else {
19313             cfg.cn = combobox;    
19314         }
19315         
19316         
19317         var settings = this;
19318         
19319         ['xs','sm','md','lg'].map(function(size){
19320             if (settings[size]) {
19321                 cfg.cls += ' col-' + size + '-' + settings[size];
19322             }
19323         });
19324         
19325         return cfg;
19326     },
19327     
19328     initTouchView : function()
19329     {
19330         this.renderTouchView();
19331         
19332         this.touchViewEl.on('scroll', function(){
19333             this.el.dom.scrollTop = 0;
19334         }, this);
19335         
19336         this.originalValue = this.getValue();
19337         
19338         this.triggerEl = this.el.select('span.dropdown-toggle',true).first();
19339         
19340         this.inputEl().on("click", this.showTouchView, this);
19341         if (this.triggerEl) {
19342             this.triggerEl.on("click", this.showTouchView, this);
19343         }
19344         
19345         
19346         this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
19347         this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
19348         
19349         this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' });
19350         
19351         this.store.on('beforeload', this.onTouchViewBeforeLoad, this);
19352         this.store.on('load', this.onTouchViewLoad, this);
19353         this.store.on('loadexception', this.onTouchViewLoadException, this);
19354         
19355         if(this.hiddenName){
19356             
19357             this.hiddenField = this.el.select('input.form-hidden-field',true).first();
19358             
19359             this.hiddenField.dom.value =
19360                 this.hiddenValue !== undefined ? this.hiddenValue :
19361                 this.value !== undefined ? this.value : '';
19362         
19363             this.el.dom.removeAttribute('name');
19364             this.hiddenField.dom.setAttribute('name', this.hiddenName);
19365         }
19366         
19367         if(this.multiple){
19368             this.choices = this.el.select('ul.roo-select2-choices', true).first();
19369             this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
19370         }
19371         
19372         if(this.removable && !this.multiple){
19373             var close = this.closeTriggerEl();
19374             if(close){
19375                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
19376                 close.on('click', this.removeBtnClick, this, close);
19377             }
19378         }
19379         /*
19380          * fix the bug in Safari iOS8
19381          */
19382         this.inputEl().on("focus", function(e){
19383             document.activeElement.blur();
19384         }, this);
19385         
19386         this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
19387         
19388         return;
19389         
19390         
19391     },
19392     
19393     renderTouchView : function()
19394     {
19395         this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.form.ComboBox.touchViewTemplate);
19396         this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19397         
19398         this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
19399         this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19400         
19401         this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first();
19402         this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19403         this.touchViewBodyEl.setStyle('overflow', 'auto');
19404         
19405         this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first();
19406         this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19407         
19408         this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first();
19409         this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
19410         
19411     },
19412     
19413     showTouchView : function()
19414     {
19415         if(this.disabled){
19416             return;
19417         }
19418         
19419         this.touchViewHeaderEl.hide();
19420
19421         if(this.modalTitle.length){
19422             this.touchViewHeaderEl.dom.innerHTML = this.modalTitle;
19423             this.touchViewHeaderEl.show();
19424         }
19425
19426         this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
19427         this.touchViewEl.show();
19428
19429         this.touchViewEl.select('.modal-dialog', true).first().setStyle({ margin : '0px', width : '100%'});
19430         
19431         //this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(
19432         //        Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
19433
19434         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19435
19436         if(this.modalTitle.length){
19437             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19438         }
19439         
19440         this.touchViewBodyEl.setHeight(bodyHeight);
19441
19442         if(this.animate){
19443             var _this = this;
19444             (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
19445         }else{
19446             this.touchViewEl.addClass(['in','show']);
19447         }
19448         
19449         if(this._touchViewMask){
19450             Roo.get(document.body).addClass("x-body-masked");
19451             this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
19452             this._touchViewMask.setStyle('z-index', 10000);
19453             this._touchViewMask.addClass('show');
19454         }
19455         
19456         this.doTouchViewQuery();
19457         
19458     },
19459     
19460     hideTouchView : function()
19461     {
19462         this.touchViewEl.removeClass(['in','show']);
19463
19464         if(this.animate){
19465             var _this = this;
19466             (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150);
19467         }else{
19468             this.touchViewEl.setStyle('display', 'none');
19469         }
19470         
19471         if(this._touchViewMask){
19472             this._touchViewMask.removeClass('show');
19473             Roo.get(document.body).removeClass("x-body-masked");
19474         }
19475     },
19476     
19477     setTouchViewValue : function()
19478     {
19479         if(this.multiple){
19480             this.clearItem();
19481         
19482             var _this = this;
19483
19484             Roo.each(this.tickItems, function(o){
19485                 this.addItem(o);
19486             }, this);
19487         }
19488         
19489         this.hideTouchView();
19490     },
19491     
19492     doTouchViewQuery : function()
19493     {
19494         var qe = {
19495             query: '',
19496             forceAll: true,
19497             combo: this,
19498             cancel:false
19499         };
19500         
19501         if(this.fireEvent('beforequery', qe) ===false || qe.cancel){
19502             return false;
19503         }
19504         
19505         if(!this.alwaysQuery || this.mode == 'local'){
19506             this.onTouchViewLoad();
19507             return;
19508         }
19509         
19510         this.store.load();
19511     },
19512     
19513     onTouchViewBeforeLoad : function(combo,opts)
19514     {
19515         return;
19516     },
19517
19518     // private
19519     onTouchViewLoad : function()
19520     {
19521         if(this.store.getCount() < 1){
19522             this.onTouchViewEmptyResults();
19523             return;
19524         }
19525         
19526         this.clearTouchView();
19527         
19528         var rawValue = this.getRawValue();
19529         
19530         var template = (this.multiple) ? Roo.bootstrap.form.ComboBox.listItemCheckbox : Roo.bootstrap.form.ComboBox.listItemRadio;
19531         
19532         this.tickItems = [];
19533         
19534         this.store.data.each(function(d, rowIndex){
19535             var row = this.touchViewListGroup.createChild(template);
19536             
19537             if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){
19538                 row.addClass(d.data.cls);
19539             }
19540             
19541             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19542                 var cfg = {
19543                     data : d.data,
19544                     html : d.data[this.displayField]
19545                 };
19546                 
19547                 if(this.fireEvent('touchviewdisplay', this, cfg) !== false){
19548                     row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html;
19549                 }
19550             }
19551             row.removeClass('selected');
19552             if(!this.multiple && this.valueField &&
19553                     typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue())
19554             {
19555                 // radio buttons..
19556                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19557                 row.addClass('selected');
19558             }
19559             
19560             if(this.multiple && this.valueField &&
19561                     typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1)
19562             {
19563                 
19564                 // checkboxes...
19565                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19566                 this.tickItems.push(d.data);
19567             }
19568             
19569             row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex});
19570             
19571         }, this);
19572         
19573         var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first();
19574         
19575         var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
19576
19577         if(this.modalTitle.length){
19578             bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
19579         }
19580
19581         var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2;
19582         
19583         if(this.mobile_restrict_height && listHeight < bodyHeight){
19584             this.touchViewBodyEl.setHeight(listHeight);
19585         }
19586         
19587         var _this = this;
19588         
19589         if(firstChecked && listHeight > bodyHeight){
19590             (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500);
19591         }
19592         
19593     },
19594     
19595     onTouchViewLoadException : function()
19596     {
19597         this.hideTouchView();
19598     },
19599     
19600     onTouchViewEmptyResults : function()
19601     {
19602         this.clearTouchView();
19603         
19604         this.touchViewListGroup.createChild(Roo.bootstrap.form.ComboBox.emptyResult);
19605         
19606         this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
19607         
19608     },
19609     
19610     clearTouchView : function()
19611     {
19612         this.touchViewListGroup.dom.innerHTML = '';
19613     },
19614     
19615     onTouchViewClick : function(e, el, o)
19616     {
19617         e.preventDefault();
19618         
19619         var row = o.row;
19620         var rowIndex = o.rowIndex;
19621         
19622         var r = this.store.getAt(rowIndex);
19623         
19624         if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){
19625             
19626             if(!this.multiple){
19627                 Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
19628                     c.dom.removeAttribute('checked');
19629                 }, this);
19630
19631                 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19632
19633                 this.setFromData(r.data);
19634
19635                 var close = this.closeTriggerEl();
19636
19637                 if(close){
19638                     close.show();
19639                 }
19640
19641                 this.hideTouchView();
19642
19643                 this.fireEvent('select', this, r, rowIndex);
19644
19645                 return;
19646             }
19647
19648             if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
19649                 row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
19650                 this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
19651                 return;
19652             }
19653
19654             row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
19655             this.addItem(r.data);
19656             this.tickItems.push(r.data);
19657         }
19658     },
19659     
19660     getAutoCreateNativeIOS : function()
19661     {
19662         var cfg = {
19663             cls: 'form-group' //input-group,
19664         };
19665         
19666         var combobox =  {
19667             tag: 'select',
19668             cls : 'roo-ios-select'
19669         };
19670         
19671         if (this.name) {
19672             combobox.name = this.name;
19673         }
19674         
19675         if (this.disabled) {
19676             combobox.disabled = true;
19677         }
19678         
19679         var settings = this;
19680         
19681         ['xs','sm','md','lg'].map(function(size){
19682             if (settings[size]) {
19683                 cfg.cls += ' col-' + size + '-' + settings[size];
19684             }
19685         });
19686         
19687         cfg.cn = combobox;
19688         
19689         return cfg;
19690         
19691     },
19692     
19693     initIOSView : function()
19694     {
19695         this.store.on('load', this.onIOSViewLoad, this);
19696         
19697         return;
19698     },
19699     
19700     onIOSViewLoad : function()
19701     {
19702         if(this.store.getCount() < 1){
19703             return;
19704         }
19705         
19706         this.clearIOSView();
19707         
19708         if(this.allowBlank) {
19709             
19710             var default_text = '-- SELECT --';
19711             
19712             if(this.placeholder.length){
19713                 default_text = this.placeholder;
19714             }
19715             
19716             if(this.emptyTitle.length){
19717                 default_text += ' - ' + this.emptyTitle + ' -';
19718             }
19719             
19720             var opt = this.inputEl().createChild({
19721                 tag: 'option',
19722                 value : 0,
19723                 html : default_text
19724             });
19725             
19726             var o = {};
19727             o[this.valueField] = 0;
19728             o[this.displayField] = default_text;
19729             
19730             this.ios_options.push({
19731                 data : o,
19732                 el : opt
19733             });
19734             
19735         }
19736         
19737         this.store.data.each(function(d, rowIndex){
19738             
19739             var html = '';
19740             
19741             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
19742                 html = d.data[this.displayField];
19743             }
19744             
19745             var value = '';
19746             
19747             if(this.valueField && typeof(d.data[this.valueField]) != 'undefined'){
19748                 value = d.data[this.valueField];
19749             }
19750             
19751             var option = {
19752                 tag: 'option',
19753                 value : value,
19754                 html : html
19755             };
19756             
19757             if(this.value == d.data[this.valueField]){
19758                 option['selected'] = true;
19759             }
19760             
19761             var opt = this.inputEl().createChild(option);
19762             
19763             this.ios_options.push({
19764                 data : d.data,
19765                 el : opt
19766             });
19767             
19768         }, this);
19769         
19770         this.inputEl().on('change', function(){
19771            this.fireEvent('select', this);
19772         }, this);
19773         
19774     },
19775     
19776     clearIOSView: function()
19777     {
19778         this.inputEl().dom.innerHTML = '';
19779         
19780         this.ios_options = [];
19781     },
19782     
19783     setIOSValue: function(v)
19784     {
19785         this.value = v;
19786         
19787         if(!this.ios_options){
19788             return;
19789         }
19790         
19791         Roo.each(this.ios_options, function(opts){
19792            
19793            opts.el.dom.removeAttribute('selected');
19794            
19795            if(opts.data[this.valueField] != v){
19796                return;
19797            }
19798            
19799            opts.el.dom.setAttribute('selected', true);
19800            
19801         }, this);
19802     }
19803
19804     /** 
19805     * @cfg {Boolean} grow 
19806     * @hide 
19807     */
19808     /** 
19809     * @cfg {Number} growMin 
19810     * @hide 
19811     */
19812     /** 
19813     * @cfg {Number} growMax 
19814     * @hide 
19815     */
19816     /**
19817      * @hide
19818      * @method autoSize
19819      */
19820 });
19821
19822 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19823     
19824     header : {
19825         tag: 'div',
19826         cls: 'modal-header',
19827         cn: [
19828             {
19829                 tag: 'h4',
19830                 cls: 'modal-title'
19831             }
19832         ]
19833     },
19834     
19835     body : {
19836         tag: 'div',
19837         cls: 'modal-body',
19838         cn: [
19839             {
19840                 tag: 'ul',
19841                 cls: 'list-group'
19842             }
19843         ]
19844     },
19845     
19846     listItemRadio : {
19847         tag: 'li',
19848         cls: 'list-group-item',
19849         cn: [
19850             {
19851                 tag: 'span',
19852                 cls: 'roo-combobox-list-group-item-value'
19853             },
19854             {
19855                 tag: 'div',
19856                 cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',
19857                 cn: [
19858                     {
19859                         tag: 'input',
19860                         type: 'radio'
19861                     },
19862                     {
19863                         tag: 'label'
19864                     }
19865                 ]
19866             }
19867         ]
19868     },
19869     
19870     listItemCheckbox : {
19871         tag: 'li',
19872         cls: 'list-group-item',
19873         cn: [
19874             {
19875                 tag: 'span',
19876                 cls: 'roo-combobox-list-group-item-value'
19877             },
19878             {
19879                 tag: 'div',
19880                 cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',
19881                 cn: [
19882                     {
19883                         tag: 'input',
19884                         type: 'checkbox'
19885                     },
19886                     {
19887                         tag: 'label'
19888                     }
19889                 ]
19890             }
19891         ]
19892     },
19893     
19894     emptyResult : {
19895         tag: 'div',
19896         cls: 'alert alert-danger roo-combobox-touch-view-empty-result'
19897     },
19898     
19899     footer : {
19900         tag: 'div',
19901         cls: 'modal-footer',
19902         cn: [
19903             {
19904                 tag: 'div',
19905                 cls: 'row',
19906                 cn: [
19907                     {
19908                         tag: 'div',
19909                         cls: 'col-xs-6 text-left',
19910                         cn: {
19911                             tag: 'button',
19912                             cls: 'btn btn-danger roo-touch-view-cancel',
19913                             html: 'Cancel'
19914                         }
19915                     },
19916                     {
19917                         tag: 'div',
19918                         cls: 'col-xs-6 text-right',
19919                         cn: {
19920                             tag: 'button',
19921                             cls: 'btn btn-success roo-touch-view-ok',
19922                             html: 'OK'
19923                         }
19924                     }
19925                 ]
19926             }
19927         ]
19928         
19929     }
19930 });
19931
19932 Roo.apply(Roo.bootstrap.form.ComboBox,  {
19933     
19934     touchViewTemplate : {
19935         tag: 'div',
19936         cls: 'modal fade roo-combobox-touch-view',
19937         cn: [
19938             {
19939                 tag: 'div',
19940                 cls: 'modal-dialog',
19941                 style : 'position:fixed', // we have to fix position....
19942                 cn: [
19943                     {
19944                         tag: 'div',
19945                         cls: 'modal-content',
19946                         cn: [
19947                             Roo.bootstrap.form.ComboBox.header,
19948                             Roo.bootstrap.form.ComboBox.body,
19949                             Roo.bootstrap.form.ComboBox.footer
19950                         ]
19951                     }
19952                 ]
19953             }
19954         ]
19955     }
19956 });/*
19957  * Based on:
19958  * Ext JS Library 1.1.1
19959  * Copyright(c) 2006-2007, Ext JS, LLC.
19960  *
19961  * Originally Released Under LGPL - original licence link has changed is not relivant.
19962  *
19963  * Fork - LGPL
19964  * <script type="text/javascript">
19965  */
19966
19967 /**
19968  * @class Roo.View
19969  * @extends Roo.util.Observable
19970  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
19971  * This class also supports single and multi selection modes. <br>
19972  * Create a data model bound view:
19973  <pre><code>
19974  var store = new Roo.data.Store(...);
19975
19976  var view = new Roo.View({
19977     el : "my-element",
19978     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
19979  
19980     singleSelect: true,
19981     selectedClass: "ydataview-selected",
19982     store: store
19983  });
19984
19985  // listen for node click?
19986  view.on("click", function(vw, index, node, e){
19987  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
19988  });
19989
19990  // load XML data
19991  dataModel.load("foobar.xml");
19992  </code></pre>
19993  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
19994  * <br><br>
19995  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
19996  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
19997  * 
19998  * Note: old style constructor is still suported (container, template, config)
19999  * 
20000  * @constructor
20001  * Create a new View
20002  * @param {Object} config The config object
20003  * 
20004  */
20005 Roo.View = function(config, depreciated_tpl, depreciated_config){
20006     
20007     this.parent = false;
20008     
20009     if (typeof(depreciated_tpl) == 'undefined') {
20010         // new way.. - universal constructor.
20011         Roo.apply(this, config);
20012         this.el  = Roo.get(this.el);
20013     } else {
20014         // old format..
20015         this.el  = Roo.get(config);
20016         this.tpl = depreciated_tpl;
20017         Roo.apply(this, depreciated_config);
20018     }
20019     this.wrapEl  = this.el.wrap().wrap();
20020     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
20021     
20022     
20023     if(typeof(this.tpl) == "string"){
20024         this.tpl = new Roo.Template(this.tpl);
20025     } else {
20026         // support xtype ctors..
20027         this.tpl = new Roo.factory(this.tpl, Roo);
20028     }
20029     
20030     
20031     this.tpl.compile();
20032     
20033     /** @private */
20034     this.addEvents({
20035         /**
20036          * @event beforeclick
20037          * Fires before a click is processed. Returns false to cancel the default action.
20038          * @param {Roo.View} this
20039          * @param {Number} index The index of the target node
20040          * @param {HTMLElement} node The target node
20041          * @param {Roo.EventObject} e The raw event object
20042          */
20043             "beforeclick" : true,
20044         /**
20045          * @event click
20046          * Fires when a template node is clicked.
20047          * @param {Roo.View} this
20048          * @param {Number} index The index of the target node
20049          * @param {HTMLElement} node The target node
20050          * @param {Roo.EventObject} e The raw event object
20051          */
20052             "click" : true,
20053         /**
20054          * @event dblclick
20055          * Fires when a template node is double clicked.
20056          * @param {Roo.View} this
20057          * @param {Number} index The index of the target node
20058          * @param {HTMLElement} node The target node
20059          * @param {Roo.EventObject} e The raw event object
20060          */
20061             "dblclick" : true,
20062         /**
20063          * @event contextmenu
20064          * Fires when a template node is right clicked.
20065          * @param {Roo.View} this
20066          * @param {Number} index The index of the target node
20067          * @param {HTMLElement} node The target node
20068          * @param {Roo.EventObject} e The raw event object
20069          */
20070             "contextmenu" : true,
20071         /**
20072          * @event selectionchange
20073          * Fires when the selected nodes change.
20074          * @param {Roo.View} this
20075          * @param {Array} selections Array of the selected nodes
20076          */
20077             "selectionchange" : true,
20078     
20079         /**
20080          * @event beforeselect
20081          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
20082          * @param {Roo.View} this
20083          * @param {HTMLElement} node The node to be selected
20084          * @param {Array} selections Array of currently selected nodes
20085          */
20086             "beforeselect" : true,
20087         /**
20088          * @event preparedata
20089          * Fires on every row to render, to allow you to change the data.
20090          * @param {Roo.View} this
20091          * @param {Object} data to be rendered (change this)
20092          */
20093           "preparedata" : true
20094           
20095           
20096         });
20097
20098
20099
20100     this.el.on({
20101         "click": this.onClick,
20102         "dblclick": this.onDblClick,
20103         "contextmenu": this.onContextMenu,
20104         scope:this
20105     });
20106
20107     this.selections = [];
20108     this.nodes = [];
20109     this.cmp = new Roo.CompositeElementLite([]);
20110     if(this.store){
20111         this.store = Roo.factory(this.store, Roo.data);
20112         this.setStore(this.store, true);
20113     }
20114     
20115     if ( this.footer && this.footer.xtype) {
20116            
20117          var fctr = this.wrapEl.appendChild(document.createElement("div"));
20118         
20119         this.footer.dataSource = this.store;
20120         this.footer.container = fctr;
20121         this.footer = Roo.factory(this.footer, Roo);
20122         fctr.insertFirst(this.el);
20123         
20124         // this is a bit insane - as the paging toolbar seems to detach the el..
20125 //        dom.parentNode.parentNode.parentNode
20126          // they get detached?
20127     }
20128     
20129     
20130     Roo.View.superclass.constructor.call(this);
20131     
20132     
20133 };
20134
20135 Roo.extend(Roo.View, Roo.util.Observable, {
20136     
20137      /**
20138      * @cfg {Roo.data.Store} store Data store to load data from.
20139      */
20140     store : false,
20141     
20142     /**
20143      * @cfg {String|Roo.Element} el The container element.
20144      */
20145     el : '',
20146     
20147     /**
20148      * @cfg {String|Roo.Template} tpl The template used by this View 
20149      */
20150     tpl : false,
20151     /**
20152      * @cfg {String} dataName the named area of the template to use as the data area
20153      *                          Works with domtemplates roo-name="name"
20154      */
20155     dataName: false,
20156     /**
20157      * @cfg {String} selectedClass The css class to add to selected nodes
20158      */
20159     selectedClass : "x-view-selected",
20160      /**
20161      * @cfg {String} emptyText The empty text to show when nothing is loaded.
20162      */
20163     emptyText : "",
20164     
20165     /**
20166      * @cfg {String} text to display on mask (default Loading)
20167      */
20168     mask : false,
20169     /**
20170      * @cfg {Boolean} multiSelect Allow multiple selection
20171      */
20172     multiSelect : false,
20173     /**
20174      * @cfg {Boolean} singleSelect Allow single selection
20175      */
20176     singleSelect:  false,
20177     
20178     /**
20179      * @cfg {Boolean} toggleSelect - selecting 
20180      */
20181     toggleSelect : false,
20182     
20183     /**
20184      * @cfg {Boolean} tickable - selecting 
20185      */
20186     tickable : false,
20187     
20188     /**
20189      * Returns the element this view is bound to.
20190      * @return {Roo.Element}
20191      */
20192     getEl : function(){
20193         return this.wrapEl;
20194     },
20195     
20196     
20197
20198     /**
20199      * Refreshes the view. - called by datachanged on the store. - do not call directly.
20200      */
20201     refresh : function(){
20202         //Roo.log('refresh');
20203         var t = this.tpl;
20204         
20205         // if we are using something like 'domtemplate', then
20206         // the what gets used is:
20207         // t.applySubtemplate(NAME, data, wrapping data..)
20208         // the outer template then get' applied with
20209         //     the store 'extra data'
20210         // and the body get's added to the
20211         //      roo-name="data" node?
20212         //      <span class='roo-tpl-{name}'></span> ?????
20213         
20214         
20215         
20216         this.clearSelections();
20217         this.el.update("");
20218         var html = [];
20219         var records = this.store.getRange();
20220         if(records.length < 1) {
20221             
20222             // is this valid??  = should it render a template??
20223             
20224             this.el.update(this.emptyText);
20225             return;
20226         }
20227         var el = this.el;
20228         if (this.dataName) {
20229             this.el.update(t.apply(this.store.meta)); //????
20230             el = this.el.child('.roo-tpl-' + this.dataName);
20231         }
20232         
20233         for(var i = 0, len = records.length; i < len; i++){
20234             var data = this.prepareData(records[i].data, i, records[i]);
20235             this.fireEvent("preparedata", this, data, i, records[i]);
20236             
20237             var d = Roo.apply({}, data);
20238             
20239             if(this.tickable){
20240                 Roo.apply(d, {'roo-id' : Roo.id()});
20241                 
20242                 var _this = this;
20243             
20244                 Roo.each(this.parent.item, function(item){
20245                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
20246                         return;
20247                     }
20248                     Roo.apply(d, {'roo-data-checked' : 'checked'});
20249                 });
20250             }
20251             
20252             html[html.length] = Roo.util.Format.trim(
20253                 this.dataName ?
20254                     t.applySubtemplate(this.dataName, d, this.store.meta) :
20255                     t.apply(d)
20256             );
20257         }
20258         
20259         
20260         
20261         el.update(html.join(""));
20262         this.nodes = el.dom.childNodes;
20263         this.updateIndexes(0);
20264     },
20265     
20266
20267     /**
20268      * Function to override to reformat the data that is sent to
20269      * the template for each node.
20270      * DEPRICATED - use the preparedata event handler.
20271      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
20272      * a JSON object for an UpdateManager bound view).
20273      */
20274     prepareData : function(data, index, record)
20275     {
20276         this.fireEvent("preparedata", this, data, index, record);
20277         return data;
20278     },
20279
20280     onUpdate : function(ds, record){
20281         // Roo.log('on update');   
20282         this.clearSelections();
20283         var index = this.store.indexOf(record);
20284         var n = this.nodes[index];
20285         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
20286         n.parentNode.removeChild(n);
20287         this.updateIndexes(index, index);
20288     },
20289
20290     
20291     
20292 // --------- FIXME     
20293     onAdd : function(ds, records, index)
20294     {
20295         //Roo.log(['on Add', ds, records, index] );        
20296         this.clearSelections();
20297         if(this.nodes.length == 0){
20298             this.refresh();
20299             return;
20300         }
20301         var n = this.nodes[index];
20302         for(var i = 0, len = records.length; i < len; i++){
20303             var d = this.prepareData(records[i].data, i, records[i]);
20304             if(n){
20305                 this.tpl.insertBefore(n, d);
20306             }else{
20307                 
20308                 this.tpl.append(this.el, d);
20309             }
20310         }
20311         this.updateIndexes(index);
20312     },
20313
20314     onRemove : function(ds, record, index){
20315        // Roo.log('onRemove');
20316         this.clearSelections();
20317         var el = this.dataName  ?
20318             this.el.child('.roo-tpl-' + this.dataName) :
20319             this.el; 
20320         
20321         el.dom.removeChild(this.nodes[index]);
20322         this.updateIndexes(index);
20323     },
20324
20325     /**
20326      * Refresh an individual node.
20327      * @param {Number} index
20328      */
20329     refreshNode : function(index){
20330         this.onUpdate(this.store, this.store.getAt(index));
20331     },
20332
20333     updateIndexes : function(startIndex, endIndex){
20334         var ns = this.nodes;
20335         startIndex = startIndex || 0;
20336         endIndex = endIndex || ns.length - 1;
20337         for(var i = startIndex; i <= endIndex; i++){
20338             ns[i].nodeIndex = i;
20339         }
20340     },
20341
20342     /**
20343      * Changes the data store this view uses and refresh the view.
20344      * @param {Store} store
20345      */
20346     setStore : function(store, initial){
20347         if(!initial && this.store){
20348             this.store.un("datachanged", this.refresh);
20349             this.store.un("add", this.onAdd);
20350             this.store.un("remove", this.onRemove);
20351             this.store.un("update", this.onUpdate);
20352             this.store.un("clear", this.refresh);
20353             this.store.un("beforeload", this.onBeforeLoad);
20354             this.store.un("load", this.onLoad);
20355             this.store.un("loadexception", this.onLoad);
20356         }
20357         if(store){
20358           
20359             store.on("datachanged", this.refresh, this);
20360             store.on("add", this.onAdd, this);
20361             store.on("remove", this.onRemove, this);
20362             store.on("update", this.onUpdate, this);
20363             store.on("clear", this.refresh, this);
20364             store.on("beforeload", this.onBeforeLoad, this);
20365             store.on("load", this.onLoad, this);
20366             store.on("loadexception", this.onLoad, this);
20367         }
20368         
20369         if(store){
20370             this.refresh();
20371         }
20372     },
20373     /**
20374      * onbeforeLoad - masks the loading area.
20375      *
20376      */
20377     onBeforeLoad : function(store,opts)
20378     {
20379          //Roo.log('onBeforeLoad');   
20380         if (!opts.add) {
20381             this.el.update("");
20382         }
20383         this.el.mask(this.mask ? this.mask : "Loading" ); 
20384     },
20385     onLoad : function ()
20386     {
20387         this.el.unmask();
20388     },
20389     
20390
20391     /**
20392      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
20393      * @param {HTMLElement} node
20394      * @return {HTMLElement} The template node
20395      */
20396     findItemFromChild : function(node){
20397         var el = this.dataName  ?
20398             this.el.child('.roo-tpl-' + this.dataName,true) :
20399             this.el.dom; 
20400         
20401         if(!node || node.parentNode == el){
20402                     return node;
20403             }
20404             var p = node.parentNode;
20405             while(p && p != el){
20406             if(p.parentNode == el){
20407                 return p;
20408             }
20409             p = p.parentNode;
20410         }
20411             return null;
20412     },
20413
20414     /** @ignore */
20415     onClick : function(e){
20416         var item = this.findItemFromChild(e.getTarget());
20417         if(item){
20418             var index = this.indexOf(item);
20419             if(this.onItemClick(item, index, e) !== false){
20420                 this.fireEvent("click", this, index, item, e);
20421             }
20422         }else{
20423             this.clearSelections();
20424         }
20425     },
20426
20427     /** @ignore */
20428     onContextMenu : function(e){
20429         var item = this.findItemFromChild(e.getTarget());
20430         if(item){
20431             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
20432         }
20433     },
20434
20435     /** @ignore */
20436     onDblClick : function(e){
20437         var item = this.findItemFromChild(e.getTarget());
20438         if(item){
20439             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
20440         }
20441     },
20442
20443     onItemClick : function(item, index, e)
20444     {
20445         if(this.fireEvent("beforeclick", this, index, item, e) === false){
20446             return false;
20447         }
20448         if (this.toggleSelect) {
20449             var m = this.isSelected(item) ? 'unselect' : 'select';
20450             //Roo.log(m);
20451             var _t = this;
20452             _t[m](item, true, false);
20453             return true;
20454         }
20455         if(this.multiSelect || this.singleSelect){
20456             if(this.multiSelect && e.shiftKey && this.lastSelection){
20457                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
20458             }else{
20459                 this.select(item, this.multiSelect && e.ctrlKey);
20460                 this.lastSelection = item;
20461             }
20462             
20463             if(!this.tickable){
20464                 e.preventDefault();
20465             }
20466             
20467         }
20468         return true;
20469     },
20470
20471     /**
20472      * Get the number of selected nodes.
20473      * @return {Number}
20474      */
20475     getSelectionCount : function(){
20476         return this.selections.length;
20477     },
20478
20479     /**
20480      * Get the currently selected nodes.
20481      * @return {Array} An array of HTMLElements
20482      */
20483     getSelectedNodes : function(){
20484         return this.selections;
20485     },
20486
20487     /**
20488      * Get the indexes of the selected nodes.
20489      * @return {Array}
20490      */
20491     getSelectedIndexes : function(){
20492         var indexes = [], s = this.selections;
20493         for(var i = 0, len = s.length; i < len; i++){
20494             indexes.push(s[i].nodeIndex);
20495         }
20496         return indexes;
20497     },
20498
20499     /**
20500      * Clear all selections
20501      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
20502      */
20503     clearSelections : function(suppressEvent){
20504         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
20505             this.cmp.elements = this.selections;
20506             this.cmp.removeClass(this.selectedClass);
20507             this.selections = [];
20508             if(!suppressEvent){
20509                 this.fireEvent("selectionchange", this, this.selections);
20510             }
20511         }
20512     },
20513
20514     /**
20515      * Returns true if the passed node is selected
20516      * @param {HTMLElement/Number} node The node or node index
20517      * @return {Boolean}
20518      */
20519     isSelected : function(node){
20520         var s = this.selections;
20521         if(s.length < 1){
20522             return false;
20523         }
20524         node = this.getNode(node);
20525         return s.indexOf(node) !== -1;
20526     },
20527
20528     /**
20529      * Selects nodes.
20530      * @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
20531      * @param {Boolean} keepExisting (optional) true to keep existing selections
20532      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20533      */
20534     select : function(nodeInfo, keepExisting, suppressEvent){
20535         if(nodeInfo instanceof Array){
20536             if(!keepExisting){
20537                 this.clearSelections(true);
20538             }
20539             for(var i = 0, len = nodeInfo.length; i < len; i++){
20540                 this.select(nodeInfo[i], true, true);
20541             }
20542             return;
20543         } 
20544         var node = this.getNode(nodeInfo);
20545         if(!node || this.isSelected(node)){
20546             return; // already selected.
20547         }
20548         if(!keepExisting){
20549             this.clearSelections(true);
20550         }
20551         
20552         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
20553             Roo.fly(node).addClass(this.selectedClass);
20554             this.selections.push(node);
20555             if(!suppressEvent){
20556                 this.fireEvent("selectionchange", this, this.selections);
20557             }
20558         }
20559         
20560         
20561     },
20562       /**
20563      * Unselects nodes.
20564      * @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
20565      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
20566      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
20567      */
20568     unselect : function(nodeInfo, keepExisting, suppressEvent)
20569     {
20570         if(nodeInfo instanceof Array){
20571             Roo.each(this.selections, function(s) {
20572                 this.unselect(s, nodeInfo);
20573             }, this);
20574             return;
20575         }
20576         var node = this.getNode(nodeInfo);
20577         if(!node || !this.isSelected(node)){
20578             //Roo.log("not selected");
20579             return; // not selected.
20580         }
20581         // fireevent???
20582         var ns = [];
20583         Roo.each(this.selections, function(s) {
20584             if (s == node ) {
20585                 Roo.fly(node).removeClass(this.selectedClass);
20586
20587                 return;
20588             }
20589             ns.push(s);
20590         },this);
20591         
20592         this.selections= ns;
20593         this.fireEvent("selectionchange", this, this.selections);
20594     },
20595
20596     /**
20597      * Gets a template node.
20598      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20599      * @return {HTMLElement} The node or null if it wasn't found
20600      */
20601     getNode : function(nodeInfo){
20602         if(typeof nodeInfo == "string"){
20603             return document.getElementById(nodeInfo);
20604         }else if(typeof nodeInfo == "number"){
20605             return this.nodes[nodeInfo];
20606         }
20607         return nodeInfo;
20608     },
20609
20610     /**
20611      * Gets a range template nodes.
20612      * @param {Number} startIndex
20613      * @param {Number} endIndex
20614      * @return {Array} An array of nodes
20615      */
20616     getNodes : function(start, end){
20617         var ns = this.nodes;
20618         start = start || 0;
20619         end = typeof end == "undefined" ? ns.length - 1 : end;
20620         var nodes = [];
20621         if(start <= end){
20622             for(var i = start; i <= end; i++){
20623                 nodes.push(ns[i]);
20624             }
20625         } else{
20626             for(var i = start; i >= end; i--){
20627                 nodes.push(ns[i]);
20628             }
20629         }
20630         return nodes;
20631     },
20632
20633     /**
20634      * Finds the index of the passed node
20635      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
20636      * @return {Number} The index of the node or -1
20637      */
20638     indexOf : function(node){
20639         node = this.getNode(node);
20640         if(typeof node.nodeIndex == "number"){
20641             return node.nodeIndex;
20642         }
20643         var ns = this.nodes;
20644         for(var i = 0, len = ns.length; i < len; i++){
20645             if(ns[i] == node){
20646                 return i;
20647             }
20648         }
20649         return -1;
20650     }
20651 });
20652 /*
20653  * - LGPL
20654  *
20655  * based on jquery fullcalendar
20656  * 
20657  */
20658
20659 Roo.bootstrap = Roo.bootstrap || {};
20660 /**
20661  * @class Roo.bootstrap.Calendar
20662  * @extends Roo.bootstrap.Component
20663  * Bootstrap Calendar class
20664  * @cfg {Boolean} loadMask (true|false) default false
20665  * @cfg {Object} header generate the user specific header of the calendar, default false
20666
20667  * @constructor
20668  * Create a new Container
20669  * @param {Object} config The config object
20670  */
20671
20672
20673
20674 Roo.bootstrap.Calendar = function(config){
20675     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
20676      this.addEvents({
20677         /**
20678              * @event select
20679              * Fires when a date is selected
20680              * @param {DatePicker} this
20681              * @param {Date} date The selected date
20682              */
20683         'select': true,
20684         /**
20685              * @event monthchange
20686              * Fires when the displayed month changes 
20687              * @param {DatePicker} this
20688              * @param {Date} date The selected month
20689              */
20690         'monthchange': true,
20691         /**
20692              * @event evententer
20693              * Fires when mouse over an event
20694              * @param {Calendar} this
20695              * @param {event} Event
20696              */
20697         'evententer': true,
20698         /**
20699              * @event eventleave
20700              * Fires when the mouse leaves an
20701              * @param {Calendar} this
20702              * @param {event}
20703              */
20704         'eventleave': true,
20705         /**
20706              * @event eventclick
20707              * Fires when the mouse click an
20708              * @param {Calendar} this
20709              * @param {event}
20710              */
20711         'eventclick': true
20712         
20713     });
20714
20715 };
20716
20717 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
20718     
20719           /**
20720      * @cfg {Roo.data.Store} store
20721      * The data source for the calendar
20722      */
20723         store : false,
20724      /**
20725      * @cfg {Number} startDay
20726      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
20727      */
20728     startDay : 0,
20729     
20730     loadMask : false,
20731     
20732     header : false,
20733       
20734     getAutoCreate : function(){
20735         
20736         
20737         var fc_button = function(name, corner, style, content ) {
20738             return Roo.apply({},{
20739                 tag : 'span',
20740                 cls : 'fc-button fc-button-'+name+' fc-state-default ' + 
20741                          (corner.length ?
20742                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
20743                             ''
20744                         ),
20745                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
20746                 unselectable: 'on'
20747             });
20748         };
20749         
20750         var header = {};
20751         
20752         if(!this.header){
20753             header = {
20754                 tag : 'table',
20755                 cls : 'fc-header',
20756                 style : 'width:100%',
20757                 cn : [
20758                     {
20759                         tag: 'tr',
20760                         cn : [
20761                             {
20762                                 tag : 'td',
20763                                 cls : 'fc-header-left',
20764                                 cn : [
20765                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
20766                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
20767                                     { tag: 'span', cls: 'fc-header-space' },
20768                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
20769
20770
20771                                 ]
20772                             },
20773
20774                             {
20775                                 tag : 'td',
20776                                 cls : 'fc-header-center',
20777                                 cn : [
20778                                     {
20779                                         tag: 'span',
20780                                         cls: 'fc-header-title',
20781                                         cn : {
20782                                             tag: 'H2',
20783                                             html : 'month / year'
20784                                         }
20785                                     }
20786
20787                                 ]
20788                             },
20789                             {
20790                                 tag : 'td',
20791                                 cls : 'fc-header-right',
20792                                 cn : [
20793                               /*      fc_button('month', 'left', '', 'month' ),
20794                                     fc_button('week', '', '', 'week' ),
20795                                     fc_button('day', 'right', '', 'day' )
20796                                 */    
20797
20798                                 ]
20799                             }
20800
20801                         ]
20802                     }
20803                 ]
20804             };
20805         }
20806         
20807         header = this.header;
20808         
20809        
20810         var cal_heads = function() {
20811             var ret = [];
20812             // fixme - handle this.
20813             
20814             for (var i =0; i < Date.dayNames.length; i++) {
20815                 var d = Date.dayNames[i];
20816                 ret.push({
20817                     tag: 'th',
20818                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
20819                     html : d.substring(0,3)
20820                 });
20821                 
20822             }
20823             ret[0].cls += ' fc-first';
20824             ret[6].cls += ' fc-last';
20825             return ret;
20826         };
20827         var cal_cell = function(n) {
20828             return  {
20829                 tag: 'td',
20830                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
20831                 cn : [
20832                     {
20833                         cn : [
20834                             {
20835                                 cls: 'fc-day-number',
20836                                 html: 'D'
20837                             },
20838                             {
20839                                 cls: 'fc-day-content',
20840                              
20841                                 cn : [
20842                                      {
20843                                         style: 'position: relative;' // height: 17px;
20844                                     }
20845                                 ]
20846                             }
20847                             
20848                             
20849                         ]
20850                     }
20851                 ]
20852                 
20853             }
20854         };
20855         var cal_rows = function() {
20856             
20857             var ret = [];
20858             for (var r = 0; r < 6; r++) {
20859                 var row= {
20860                     tag : 'tr',
20861                     cls : 'fc-week',
20862                     cn : []
20863                 };
20864                 
20865                 for (var i =0; i < Date.dayNames.length; i++) {
20866                     var d = Date.dayNames[i];
20867                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
20868
20869                 }
20870                 row.cn[0].cls+=' fc-first';
20871                 row.cn[0].cn[0].style = 'min-height:90px';
20872                 row.cn[6].cls+=' fc-last';
20873                 ret.push(row);
20874                 
20875             }
20876             ret[0].cls += ' fc-first';
20877             ret[4].cls += ' fc-prev-last';
20878             ret[5].cls += ' fc-last';
20879             return ret;
20880             
20881         };
20882         
20883         var cal_table = {
20884             tag: 'table',
20885             cls: 'fc-border-separate',
20886             style : 'width:100%',
20887             cellspacing  : 0,
20888             cn : [
20889                 { 
20890                     tag: 'thead',
20891                     cn : [
20892                         { 
20893                             tag: 'tr',
20894                             cls : 'fc-first fc-last',
20895                             cn : cal_heads()
20896                         }
20897                     ]
20898                 },
20899                 { 
20900                     tag: 'tbody',
20901                     cn : cal_rows()
20902                 }
20903                   
20904             ]
20905         };
20906          
20907          var cfg = {
20908             cls : 'fc fc-ltr',
20909             cn : [
20910                 header,
20911                 {
20912                     cls : 'fc-content',
20913                     style : "position: relative;",
20914                     cn : [
20915                         {
20916                             cls : 'fc-view fc-view-month fc-grid',
20917                             style : 'position: relative',
20918                             unselectable : 'on',
20919                             cn : [
20920                                 {
20921                                     cls : 'fc-event-container',
20922                                     style : 'position:absolute;z-index:8;top:0;left:0;'
20923                                 },
20924                                 cal_table
20925                             ]
20926                         }
20927                     ]
20928     
20929                 }
20930            ] 
20931             
20932         };
20933         
20934          
20935         
20936         return cfg;
20937     },
20938     
20939     
20940     initEvents : function()
20941     {
20942         if(!this.store){
20943             throw "can not find store for calendar";
20944         }
20945         
20946         var mark = {
20947             tag: "div",
20948             cls:"x-dlg-mask",
20949             style: "text-align:center",
20950             cn: [
20951                 {
20952                     tag: "div",
20953                     style: "background-color:white;width:50%;margin:250 auto",
20954                     cn: [
20955                         {
20956                             tag: "img",
20957                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif' 
20958                         },
20959                         {
20960                             tag: "span",
20961                             html: "Loading"
20962                         }
20963                         
20964                     ]
20965                 }
20966             ]
20967         };
20968         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
20969         
20970         var size = this.el.select('.fc-content', true).first().getSize();
20971         this.maskEl.setSize(size.width, size.height);
20972         this.maskEl.enableDisplayMode("block");
20973         if(!this.loadMask){
20974             this.maskEl.hide();
20975         }
20976         
20977         this.store = Roo.factory(this.store, Roo.data);
20978         this.store.on('load', this.onLoad, this);
20979         this.store.on('beforeload', this.onBeforeLoad, this);
20980         
20981         this.resize();
20982         
20983         this.cells = this.el.select('.fc-day',true);
20984         //Roo.log(this.cells);
20985         this.textNodes = this.el.query('.fc-day-number');
20986         this.cells.addClassOnOver('fc-state-hover');
20987         
20988         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
20989         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
20990         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
20991         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
20992         
20993         this.on('monthchange', this.onMonthChange, this);
20994         
20995         this.update(new Date().clearTime());
20996     },
20997     
20998     resize : function() {
20999         var sz  = this.el.getSize();
21000         
21001         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
21002         this.el.select('.fc-day-content div',true).setHeight(34);
21003     },
21004     
21005     
21006     // private
21007     showPrevMonth : function(e){
21008         this.update(this.activeDate.add("mo", -1));
21009     },
21010     showToday : function(e){
21011         this.update(new Date().clearTime());
21012     },
21013     // private
21014     showNextMonth : function(e){
21015         this.update(this.activeDate.add("mo", 1));
21016     },
21017
21018     // private
21019     showPrevYear : function(){
21020         this.update(this.activeDate.add("y", -1));
21021     },
21022
21023     // private
21024     showNextYear : function(){
21025         this.update(this.activeDate.add("y", 1));
21026     },
21027
21028     
21029    // private
21030     update : function(date)
21031     {
21032         var vd = this.activeDate;
21033         this.activeDate = date;
21034 //        if(vd && this.el){
21035 //            var t = date.getTime();
21036 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
21037 //                Roo.log('using add remove');
21038 //                
21039 //                this.fireEvent('monthchange', this, date);
21040 //                
21041 //                this.cells.removeClass("fc-state-highlight");
21042 //                this.cells.each(function(c){
21043 //                   if(c.dateValue == t){
21044 //                       c.addClass("fc-state-highlight");
21045 //                       setTimeout(function(){
21046 //                            try{c.dom.firstChild.focus();}catch(e){}
21047 //                       }, 50);
21048 //                       return false;
21049 //                   }
21050 //                   return true;
21051 //                });
21052 //                return;
21053 //            }
21054 //        }
21055         
21056         var days = date.getDaysInMonth();
21057         
21058         var firstOfMonth = date.getFirstDateOfMonth();
21059         var startingPos = firstOfMonth.getDay()-this.startDay;
21060         
21061         if(startingPos < this.startDay){
21062             startingPos += 7;
21063         }
21064         
21065         var pm = date.add(Date.MONTH, -1);
21066         var prevStart = pm.getDaysInMonth()-startingPos;
21067 //        
21068         this.cells = this.el.select('.fc-day',true);
21069         this.textNodes = this.el.query('.fc-day-number');
21070         this.cells.addClassOnOver('fc-state-hover');
21071         
21072         var cells = this.cells.elements;
21073         var textEls = this.textNodes;
21074         
21075         Roo.each(cells, function(cell){
21076             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
21077         });
21078         
21079         days += startingPos;
21080
21081         // convert everything to numbers so it's fast
21082         var day = 86400000;
21083         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
21084         //Roo.log(d);
21085         //Roo.log(pm);
21086         //Roo.log(prevStart);
21087         
21088         var today = new Date().clearTime().getTime();
21089         var sel = date.clearTime().getTime();
21090         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
21091         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
21092         var ddMatch = this.disabledDatesRE;
21093         var ddText = this.disabledDatesText;
21094         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
21095         var ddaysText = this.disabledDaysText;
21096         var format = this.format;
21097         
21098         var setCellClass = function(cal, cell){
21099             cell.row = 0;
21100             cell.events = [];
21101             cell.more = [];
21102             //Roo.log('set Cell Class');
21103             cell.title = "";
21104             var t = d.getTime();
21105             
21106             //Roo.log(d);
21107             
21108             cell.dateValue = t;
21109             if(t == today){
21110                 cell.className += " fc-today";
21111                 cell.className += " fc-state-highlight";
21112                 cell.title = cal.todayText;
21113             }
21114             if(t == sel){
21115                 // disable highlight in other month..
21116                 //cell.className += " fc-state-highlight";
21117                 
21118             }
21119             // disabling
21120             if(t < min) {
21121                 cell.className = " fc-state-disabled";
21122                 cell.title = cal.minText;
21123                 return;
21124             }
21125             if(t > max) {
21126                 cell.className = " fc-state-disabled";
21127                 cell.title = cal.maxText;
21128                 return;
21129             }
21130             if(ddays){
21131                 if(ddays.indexOf(d.getDay()) != -1){
21132                     cell.title = ddaysText;
21133                     cell.className = " fc-state-disabled";
21134                 }
21135             }
21136             if(ddMatch && format){
21137                 var fvalue = d.dateFormat(format);
21138                 if(ddMatch.test(fvalue)){
21139                     cell.title = ddText.replace("%0", fvalue);
21140                     cell.className = " fc-state-disabled";
21141                 }
21142             }
21143             
21144             if (!cell.initialClassName) {
21145                 cell.initialClassName = cell.dom.className;
21146             }
21147             
21148             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
21149         };
21150
21151         var i = 0;
21152         
21153         for(; i < startingPos; i++) {
21154             textEls[i].innerHTML = (++prevStart);
21155             d.setDate(d.getDate()+1);
21156             
21157             cells[i].className = "fc-past fc-other-month";
21158             setCellClass(this, cells[i]);
21159         }
21160         
21161         var intDay = 0;
21162         
21163         for(; i < days; i++){
21164             intDay = i - startingPos + 1;
21165             textEls[i].innerHTML = (intDay);
21166             d.setDate(d.getDate()+1);
21167             
21168             cells[i].className = ''; // "x-date-active";
21169             setCellClass(this, cells[i]);
21170         }
21171         var extraDays = 0;
21172         
21173         for(; i < 42; i++) {
21174             textEls[i].innerHTML = (++extraDays);
21175             d.setDate(d.getDate()+1);
21176             
21177             cells[i].className = "fc-future fc-other-month";
21178             setCellClass(this, cells[i]);
21179         }
21180         
21181         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
21182         
21183         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
21184         
21185         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
21186         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
21187         
21188         if(totalRows != 6){
21189             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
21190             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
21191         }
21192         
21193         this.fireEvent('monthchange', this, date);
21194         
21195         
21196         /*
21197         if(!this.internalRender){
21198             var main = this.el.dom.firstChild;
21199             var w = main.offsetWidth;
21200             this.el.setWidth(w + this.el.getBorderWidth("lr"));
21201             Roo.fly(main).setWidth(w);
21202             this.internalRender = true;
21203             // opera does not respect the auto grow header center column
21204             // then, after it gets a width opera refuses to recalculate
21205             // without a second pass
21206             if(Roo.isOpera && !this.secondPass){
21207                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
21208                 this.secondPass = true;
21209                 this.update.defer(10, this, [date]);
21210             }
21211         }
21212         */
21213         
21214     },
21215     
21216     findCell : function(dt) {
21217         dt = dt.clearTime().getTime();
21218         var ret = false;
21219         this.cells.each(function(c){
21220             //Roo.log("check " +c.dateValue + '?=' + dt);
21221             if(c.dateValue == dt){
21222                 ret = c;
21223                 return false;
21224             }
21225             return true;
21226         });
21227         
21228         return ret;
21229     },
21230     
21231     findCells : function(ev) {
21232         var s = ev.start.clone().clearTime().getTime();
21233        // Roo.log(s);
21234         var e= ev.end.clone().clearTime().getTime();
21235        // Roo.log(e);
21236         var ret = [];
21237         this.cells.each(function(c){
21238              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
21239             
21240             if(c.dateValue > e){
21241                 return ;
21242             }
21243             if(c.dateValue < s){
21244                 return ;
21245             }
21246             ret.push(c);
21247         });
21248         
21249         return ret;    
21250     },
21251     
21252 //    findBestRow: function(cells)
21253 //    {
21254 //        var ret = 0;
21255 //        
21256 //        for (var i =0 ; i < cells.length;i++) {
21257 //            ret  = Math.max(cells[i].rows || 0,ret);
21258 //        }
21259 //        return ret;
21260 //        
21261 //    },
21262     
21263     
21264     addItem : function(ev)
21265     {
21266         // look for vertical location slot in
21267         var cells = this.findCells(ev);
21268         
21269 //        ev.row = this.findBestRow(cells);
21270         
21271         // work out the location.
21272         
21273         var crow = false;
21274         var rows = [];
21275         for(var i =0; i < cells.length; i++) {
21276             
21277             cells[i].row = cells[0].row;
21278             
21279             if(i == 0){
21280                 cells[i].row = cells[i].row + 1;
21281             }
21282             
21283             if (!crow) {
21284                 crow = {
21285                     start : cells[i],
21286                     end :  cells[i]
21287                 };
21288                 continue;
21289             }
21290             if (crow.start.getY() == cells[i].getY()) {
21291                 // on same row.
21292                 crow.end = cells[i];
21293                 continue;
21294             }
21295             // different row.
21296             rows.push(crow);
21297             crow = {
21298                 start: cells[i],
21299                 end : cells[i]
21300             };
21301             
21302         }
21303         
21304         rows.push(crow);
21305         ev.els = [];
21306         ev.rows = rows;
21307         ev.cells = cells;
21308         
21309         cells[0].events.push(ev);
21310         
21311         this.calevents.push(ev);
21312     },
21313     
21314     clearEvents: function() {
21315         
21316         if(!this.calevents){
21317             return;
21318         }
21319         
21320         Roo.each(this.cells.elements, function(c){
21321             c.row = 0;
21322             c.events = [];
21323             c.more = [];
21324         });
21325         
21326         Roo.each(this.calevents, function(e) {
21327             Roo.each(e.els, function(el) {
21328                 el.un('mouseenter' ,this.onEventEnter, this);
21329                 el.un('mouseleave' ,this.onEventLeave, this);
21330                 el.remove();
21331             },this);
21332         },this);
21333         
21334         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
21335             e.remove();
21336         });
21337         
21338     },
21339     
21340     renderEvents: function()
21341     {   
21342         var _this = this;
21343         
21344         this.cells.each(function(c) {
21345             
21346             if(c.row < 5){
21347                 return;
21348             }
21349             
21350             var ev = c.events;
21351             
21352             var r = 4;
21353             if(c.row != c.events.length){
21354                 r = 4 - (4 - (c.row - c.events.length));
21355             }
21356             
21357             c.events = ev.slice(0, r);
21358             c.more = ev.slice(r);
21359             
21360             if(c.more.length && c.more.length == 1){
21361                 c.events.push(c.more.pop());
21362             }
21363             
21364             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
21365             
21366         });
21367             
21368         this.cells.each(function(c) {
21369             
21370             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
21371             
21372             
21373             for (var e = 0; e < c.events.length; e++){
21374                 var ev = c.events[e];
21375                 var rows = ev.rows;
21376                 
21377                 for(var i = 0; i < rows.length; i++) {
21378                 
21379                     // how many rows should it span..
21380
21381                     var  cfg = {
21382                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
21383                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
21384
21385                         unselectable : "on",
21386                         cn : [
21387                             {
21388                                 cls: 'fc-event-inner',
21389                                 cn : [
21390     //                                {
21391     //                                  tag:'span',
21392     //                                  cls: 'fc-event-time',
21393     //                                  html : cells.length > 1 ? '' : ev.time
21394     //                                },
21395                                     {
21396                                       tag:'span',
21397                                       cls: 'fc-event-title',
21398                                       html : String.format('{0}', ev.title)
21399                                     }
21400
21401
21402                                 ]
21403                             },
21404                             {
21405                                 cls: 'ui-resizable-handle ui-resizable-e',
21406                                 html : '&nbsp;&nbsp;&nbsp'
21407                             }
21408
21409                         ]
21410                     };
21411
21412                     if (i == 0) {
21413                         cfg.cls += ' fc-event-start';
21414                     }
21415                     if ((i+1) == rows.length) {
21416                         cfg.cls += ' fc-event-end';
21417                     }
21418
21419                     var ctr = _this.el.select('.fc-event-container',true).first();
21420                     var cg = ctr.createChild(cfg);
21421
21422                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
21423                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
21424
21425                     var r = (c.more.length) ? 1 : 0;
21426                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);    
21427                     cg.setWidth(ebox.right - sbox.x -2);
21428
21429                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
21430                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
21431                     cg.on('click', _this.onEventClick, _this, ev);
21432
21433                     ev.els.push(cg);
21434                     
21435                 }
21436                 
21437             }
21438             
21439             
21440             if(c.more.length){
21441                 var  cfg = {
21442                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
21443                     style : 'position: absolute',
21444                     unselectable : "on",
21445                     cn : [
21446                         {
21447                             cls: 'fc-event-inner',
21448                             cn : [
21449                                 {
21450                                   tag:'span',
21451                                   cls: 'fc-event-title',
21452                                   html : 'More'
21453                                 }
21454
21455
21456                             ]
21457                         },
21458                         {
21459                             cls: 'ui-resizable-handle ui-resizable-e',
21460                             html : '&nbsp;&nbsp;&nbsp'
21461                         }
21462
21463                     ]
21464                 };
21465
21466                 var ctr = _this.el.select('.fc-event-container',true).first();
21467                 var cg = ctr.createChild(cfg);
21468
21469                 var sbox = c.select('.fc-day-content',true).first().getBox();
21470                 var ebox = c.select('.fc-day-content',true).first().getBox();
21471                 //Roo.log(cg);
21472                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);    
21473                 cg.setWidth(ebox.right - sbox.x -2);
21474
21475                 cg.on('click', _this.onMoreEventClick, _this, c.more);
21476                 
21477             }
21478             
21479         });
21480         
21481         
21482         
21483     },
21484     
21485     onEventEnter: function (e, el,event,d) {
21486         this.fireEvent('evententer', this, el, event);
21487     },
21488     
21489     onEventLeave: function (e, el,event,d) {
21490         this.fireEvent('eventleave', this, el, event);
21491     },
21492     
21493     onEventClick: function (e, el,event,d) {
21494         this.fireEvent('eventclick', this, el, event);
21495     },
21496     
21497     onMonthChange: function () {
21498         this.store.load();
21499     },
21500     
21501     onMoreEventClick: function(e, el, more)
21502     {
21503         var _this = this;
21504         
21505         this.calpopover.placement = 'right';
21506         this.calpopover.setTitle('More');
21507         
21508         this.calpopover.setContent('');
21509         
21510         var ctr = this.calpopover.el.select('.popover-content', true).first();
21511         
21512         Roo.each(more, function(m){
21513             var cfg = {
21514                 cls : 'fc-event-hori fc-event-draggable',
21515                 html : m.title
21516             };
21517             var cg = ctr.createChild(cfg);
21518             
21519             cg.on('click', _this.onEventClick, _this, m);
21520         });
21521         
21522         this.calpopover.show(el);
21523         
21524         
21525     },
21526     
21527     onLoad: function () 
21528     {   
21529         this.calevents = [];
21530         var cal = this;
21531         
21532         if(this.store.getCount() > 0){
21533             this.store.data.each(function(d){
21534                cal.addItem({
21535                     id : d.data.id,
21536                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
21537                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
21538                     time : d.data.start_time,
21539                     title : d.data.title,
21540                     description : d.data.description,
21541                     venue : d.data.venue
21542                 });
21543             });
21544         }
21545         
21546         this.renderEvents();
21547         
21548         if(this.calevents.length && this.loadMask){
21549             this.maskEl.hide();
21550         }
21551     },
21552     
21553     onBeforeLoad: function()
21554     {
21555         this.clearEvents();
21556         if(this.loadMask){
21557             this.maskEl.show();
21558         }
21559     }
21560 });
21561
21562  
21563  /*
21564  * - LGPL
21565  *
21566  * element
21567  * 
21568  */
21569
21570 /**
21571  * @class Roo.bootstrap.Popover
21572  * @extends Roo.bootstrap.Component
21573  * @parent none builder
21574  * @children Roo.bootstrap.Component
21575  * Bootstrap Popover class
21576  * @cfg {String} html contents of the popover   (or false to use children..)
21577  * @cfg {String} title of popover (or false to hide)
21578  * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed
21579  * @cfg {String} trigger click || hover (or false to trigger manually)
21580  * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event.
21581  * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element
21582  *      - if false and it has a 'parent' then it will be automatically added to that element
21583  *      - if string - Roo.get  will be called 
21584  * @cfg {Number} delay - delay before showing
21585  
21586  * @constructor
21587  * Create a new Popover
21588  * @param {Object} config The config object
21589  */
21590
21591 Roo.bootstrap.Popover = function(config){
21592     Roo.bootstrap.Popover.superclass.constructor.call(this, config);
21593     
21594     this.addEvents({
21595         // raw events
21596          /**
21597          * @event show
21598          * After the popover show
21599          * 
21600          * @param {Roo.bootstrap.Popover} this
21601          */
21602         "show" : true,
21603         /**
21604          * @event hide
21605          * After the popover hide
21606          * 
21607          * @param {Roo.bootstrap.Popover} this
21608          */
21609         "hide" : true
21610     });
21611 };
21612
21613 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
21614     
21615     title: false,
21616     html: false,
21617     
21618     placement : 'right',
21619     trigger : 'hover', // hover
21620     modal : false,
21621     delay : 0,
21622     
21623     over: false,
21624     
21625     can_build_overlaid : false,
21626     
21627     maskEl : false, // the mask element
21628     headerEl : false,
21629     contentEl : false,
21630     alignEl : false, // when show is called with an element - this get's stored.
21631     
21632     getChildContainer : function()
21633     {
21634         return this.contentEl;
21635         
21636     },
21637     getPopoverHeader : function()
21638     {
21639         this.title = true; // flag not to hide it..
21640         this.headerEl.addClass('p-0');
21641         return this.headerEl
21642     },
21643     
21644     
21645     getAutoCreate : function(){
21646          
21647         var cfg = {
21648            cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''),
21649            style: 'display:block',
21650            cn : [
21651                 {
21652                     cls : 'arrow'
21653                 },
21654                 {
21655                     cls : 'popover-inner ',
21656                     cn : [
21657                         {
21658                             tag: 'h3',
21659                             cls: 'popover-title popover-header',
21660                             html : this.title === false ? '' : this.title
21661                         },
21662                         {
21663                             cls : 'popover-content popover-body '  + (this.cls || ''),
21664                             html : this.html || ''
21665                         }
21666                     ]
21667                     
21668                 }
21669            ]
21670         };
21671         
21672         return cfg;
21673     },
21674     /**
21675      * @param {string} the title
21676      */
21677     setTitle: function(str)
21678     {
21679         this.title = str;
21680         if (this.el) {
21681             this.headerEl.dom.innerHTML = str;
21682         }
21683         
21684     },
21685     /**
21686      * @param {string} the body content
21687      */
21688     setContent: function(str)
21689     {
21690         this.html = str;
21691         if (this.contentEl) {
21692             this.contentEl.dom.innerHTML = str;
21693         }
21694         
21695     },
21696     // as it get's added to the bottom of the page.
21697     onRender : function(ct, position)
21698     {
21699         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
21700         
21701         
21702         
21703         if(!this.el){
21704             var cfg = Roo.apply({},  this.getAutoCreate());
21705             cfg.id = Roo.id();
21706             
21707             if (this.cls) {
21708                 cfg.cls += ' ' + this.cls;
21709             }
21710             if (this.style) {
21711                 cfg.style = this.style;
21712             }
21713             //Roo.log("adding to ");
21714             this.el = Roo.get(document.body).createChild(cfg, position);
21715 //            Roo.log(this.el);
21716         }
21717         
21718         this.contentEl = this.el.select('.popover-content',true).first();
21719         this.headerEl =  this.el.select('.popover-title',true).first();
21720         
21721         var nitems = [];
21722         if(typeof(this.items) != 'undefined'){
21723             var items = this.items;
21724             delete this.items;
21725
21726             for(var i =0;i < items.length;i++) {
21727                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
21728             }
21729         }
21730
21731         this.items = nitems;
21732         
21733         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
21734         Roo.EventManager.onWindowResize(this.resizeMask, this, true);
21735         
21736         
21737         
21738         this.initEvents();
21739     },
21740     
21741     resizeMask : function()
21742     {
21743         this.maskEl.setSize(
21744             Roo.lib.Dom.getViewWidth(true),
21745             Roo.lib.Dom.getViewHeight(true)
21746         );
21747     },
21748     
21749     initEvents : function()
21750     {
21751         
21752         if (!this.modal) { 
21753             Roo.bootstrap.Popover.register(this);
21754         }
21755          
21756         this.arrowEl = this.el.select('.arrow',true).first();
21757         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
21758         this.el.enableDisplayMode('block');
21759         this.el.hide();
21760  
21761         
21762         if (this.over === false && !this.parent()) {
21763             return; 
21764         }
21765         if (this.triggers === false) {
21766             return;
21767         }
21768          
21769         // support parent
21770         var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over);
21771         var triggers = this.trigger ? this.trigger.split(' ') : [];
21772         Roo.each(triggers, function(trigger) {
21773         
21774             if (trigger == 'click') {
21775                 on_el.on('click', this.toggle, this);
21776             } else if (trigger != 'manual') {
21777                 var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin';
21778                 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
21779       
21780                 on_el.on(eventIn  ,this.enter, this);
21781                 on_el.on(eventOut, this.leave, this);
21782             }
21783         }, this);
21784     },
21785     
21786     
21787     // private
21788     timeout : null,
21789     hoverState : null,
21790     
21791     toggle : function () {
21792         this.hoverState == 'in' ? this.leave() : this.enter();
21793     },
21794     
21795     enter : function () {
21796         
21797         clearTimeout(this.timeout);
21798     
21799         this.hoverState = 'in';
21800     
21801         if (!this.delay || !this.delay.show) {
21802             this.show();
21803             return;
21804         }
21805         var _t = this;
21806         this.timeout = setTimeout(function () {
21807             if (_t.hoverState == 'in') {
21808                 _t.show();
21809             }
21810         }, this.delay.show)
21811     },
21812     
21813     leave : function() {
21814         clearTimeout(this.timeout);
21815     
21816         this.hoverState = 'out';
21817     
21818         if (!this.delay || !this.delay.hide) {
21819             this.hide();
21820             return;
21821         }
21822         var _t = this;
21823         this.timeout = setTimeout(function () {
21824             if (_t.hoverState == 'out') {
21825                 _t.hide();
21826             }
21827         }, this.delay.hide)
21828     },
21829     
21830     /**
21831      * update the position of the dialog
21832      * normally this is needed if the popover get's bigger - due to a Table reload etc..
21833      * 
21834      *
21835      */
21836     
21837     doAlign : function()
21838     {
21839         
21840         if (this.alignEl) {
21841             this.updatePosition(this.placement, true);
21842              
21843         } else {
21844             // this is usually just done by the builder = to show the popoup in the middle of the scren.
21845             var es = this.el.getSize();
21846             var x = Roo.lib.Dom.getViewWidth()/2;
21847             var y = Roo.lib.Dom.getViewHeight()/2;
21848             this.el.setXY([ x-(es.width/2),  y-(es.height/2)] );
21849             
21850         }
21851
21852          
21853          
21854         
21855         
21856     },
21857     
21858     /**
21859      * Show the popover
21860      * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
21861      * @param {string} (left|right|top|bottom) position
21862      */
21863     show : function (on_el, placement)
21864     {
21865         this.placement = typeof(placement) == 'undefined' ?  this.placement   : placement;
21866         on_el = on_el || false; // default to false
21867          
21868         if (!on_el) {
21869             if (this.parent() && (this.over == 'parent' || (this.over === false))) {
21870                 on_el = this.parent().el;
21871             } else if (this.over) {
21872                 on_el = Roo.get(this.over);
21873             }
21874             
21875         }
21876         
21877         this.alignEl = Roo.get( on_el );
21878
21879         if (!this.el) {
21880             this.render(document.body);
21881         }
21882         
21883         
21884          
21885         
21886         if (this.title === false) {
21887             this.headerEl.hide();
21888         }
21889         
21890        
21891         this.el.show();
21892         this.el.dom.style.display = 'block';
21893          
21894         this.doAlign();
21895         
21896         //var arrow = this.el.select('.arrow',true).first();
21897         //arrow.set(align[2], 
21898         
21899         this.el.addClass('in');
21900         
21901          
21902         
21903         this.hoverState = 'in';
21904         
21905         if (this.modal) {
21906             this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
21907             this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21908             this.maskEl.dom.style.display = 'block';
21909             this.maskEl.addClass('show');
21910         }
21911         this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
21912  
21913         this.fireEvent('show', this);
21914         
21915     },
21916     /**
21917      * fire this manually after loading a grid in the table for example
21918      * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one)
21919      * @param {Boolean} try and move it if we cant get right position.
21920      */
21921     updatePosition : function(placement, try_move)
21922     {
21923         // allow for calling with no parameters
21924         placement = placement   ? placement :  this.placement;
21925         try_move = typeof(try_move) == 'undefined' ? true : try_move;
21926         
21927         this.el.removeClass([
21928             'fade','top','bottom', 'left', 'right','in',
21929             'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right'
21930         ]);
21931         this.el.addClass(placement + ' bs-popover-' + placement);
21932         
21933         if (!this.alignEl ) {
21934             return false;
21935         }
21936         
21937         switch (placement) {
21938             case 'right':
21939                 var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]);
21940                 var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]);
21941                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21942                     //normal display... or moved up/down.
21943                     this.el.setXY(offset);
21944                     var xy = this.alignEl.getAnchorXY('tr', false);
21945                     xy[0]+=2;xy[1]+=5;
21946                     this.arrowEl.setXY(xy);
21947                     return true;
21948                 }
21949                 // continue through...
21950                 return this.updatePosition('left', false);
21951                 
21952             
21953             case 'left':
21954                 var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]);
21955                 var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]);
21956                 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
21957                     //normal display... or moved up/down.
21958                     this.el.setXY(offset);
21959                     var xy = this.alignEl.getAnchorXY('tl', false);
21960                     xy[0]-=10;xy[1]+=5; // << fix me
21961                     this.arrowEl.setXY(xy);
21962                     return true;
21963                 }
21964                 // call self...
21965                 return this.updatePosition('right', false);
21966             
21967             case 'top':
21968                 var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,-10]);
21969                 var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,-10]);
21970                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21971                     //normal display... or moved up/down.
21972                     this.el.setXY(offset);
21973                     var xy = this.alignEl.getAnchorXY('t', false);
21974                     xy[1]-=10; // << fix me
21975                     this.arrowEl.setXY(xy);
21976                     return true;
21977                 }
21978                 // fall through
21979                return this.updatePosition('bottom', false);
21980             
21981             case 'bottom':
21982                  var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,10]);
21983                 var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,10]);
21984                 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
21985                     //normal display... or moved up/down.
21986                     this.el.setXY(offset);
21987                     var xy = this.alignEl.getAnchorXY('b', false);
21988                      xy[1]+=2; // << fix me
21989                     this.arrowEl.setXY(xy);
21990                     return true;
21991                 }
21992                 // fall through
21993                 return this.updatePosition('top', false);
21994                 
21995             
21996         }
21997         
21998         
21999         return false;
22000     },
22001     
22002     hide : function()
22003     {
22004         this.el.setXY([0,0]);
22005         this.el.removeClass('in');
22006         this.el.hide();
22007         this.hoverState = null;
22008         this.maskEl.hide(); // always..
22009         this.fireEvent('hide', this);
22010     }
22011     
22012 });
22013
22014
22015 Roo.apply(Roo.bootstrap.Popover, {
22016
22017     alignment : {
22018         'left' : ['r-l', [-10,0], 'left bs-popover-left'],
22019         'right' : ['l-br', [10,0], 'right bs-popover-right'],
22020         'bottom' : ['t-b', [0,10], 'top bs-popover-top'],
22021         'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom']
22022     },
22023     
22024     zIndex : 20001,
22025
22026     clickHander : false,
22027     
22028     
22029
22030     onMouseDown : function(e)
22031     {
22032         if (this.popups.length &&  !e.getTarget(".roo-popover")) {
22033             /// what is nothing is showing..
22034             this.hideAll();
22035         }
22036          
22037     },
22038     
22039     
22040     popups : [],
22041     
22042     register : function(popup)
22043     {
22044         if (!Roo.bootstrap.Popover.clickHandler) {
22045             Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
22046         }
22047         // hide other popups.
22048         popup.on('show', Roo.bootstrap.Popover.onShow,  popup);
22049         popup.on('hide', Roo.bootstrap.Popover.onHide,  popup);
22050         this.hideAll(); //<< why?
22051         //this.popups.push(popup);
22052     },
22053     hideAll : function()
22054     {
22055         this.popups.forEach(function(p) {
22056             p.hide();
22057         });
22058     },
22059     onShow : function() {
22060         Roo.bootstrap.Popover.popups.push(this);
22061     },
22062     onHide : function() {
22063         Roo.bootstrap.Popover.popups.remove(this);
22064     } 
22065
22066 });
22067 /**
22068  * @class Roo.bootstrap.PopoverNav
22069  * @extends Roo.bootstrap.nav.Simplebar
22070  * @parent Roo.bootstrap.Popover
22071  * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container
22072  * @licence LGPL
22073  * Bootstrap Popover header navigation class
22074  * FIXME? should this go under nav?
22075  *
22076  * 
22077  * @constructor
22078  * Create a new Popover Header Navigation 
22079  * @param {Object} config The config object
22080  */
22081
22082 Roo.bootstrap.PopoverNav = function(config){
22083     Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config);
22084 };
22085
22086 Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.nav.Simplebar,  {
22087     
22088     
22089     container_method : 'getPopoverHeader' 
22090     
22091      
22092     
22093     
22094    
22095 });
22096
22097  
22098
22099  /*
22100  * - LGPL
22101  *
22102  * Progress
22103  * 
22104  */
22105
22106 /**
22107  * @class Roo.bootstrap.Progress
22108  * @extends Roo.bootstrap.Component
22109  * @children Roo.bootstrap.ProgressBar
22110  * Bootstrap Progress class
22111  * @cfg {Boolean} striped striped of the progress bar
22112  * @cfg {Boolean} active animated of the progress bar
22113  * 
22114  * 
22115  * @constructor
22116  * Create a new Progress
22117  * @param {Object} config The config object
22118  */
22119
22120 Roo.bootstrap.Progress = function(config){
22121     Roo.bootstrap.Progress.superclass.constructor.call(this, config);
22122 };
22123
22124 Roo.extend(Roo.bootstrap.Progress, Roo.bootstrap.Component,  {
22125     
22126     striped : false,
22127     active: false,
22128     
22129     getAutoCreate : function(){
22130         var cfg = {
22131             tag: 'div',
22132             cls: 'progress'
22133         };
22134         
22135         
22136         if(this.striped){
22137             cfg.cls += ' progress-striped';
22138         }
22139       
22140         if(this.active){
22141             cfg.cls += ' active';
22142         }
22143         
22144         
22145         return cfg;
22146     }
22147    
22148 });
22149
22150  
22151
22152  /*
22153  * - LGPL
22154  *
22155  * ProgressBar
22156  * 
22157  */
22158
22159 /**
22160  * @class Roo.bootstrap.ProgressBar
22161  * @extends Roo.bootstrap.Component
22162  * Bootstrap ProgressBar class
22163  * @cfg {Number} aria_valuenow aria-value now
22164  * @cfg {Number} aria_valuemin aria-value min
22165  * @cfg {Number} aria_valuemax aria-value max
22166  * @cfg {String} label label for the progress bar
22167  * @cfg {String} panel (success | info | warning | danger )
22168  * @cfg {String} role role of the progress bar
22169  * @cfg {String} sr_only text
22170  * 
22171  * 
22172  * @constructor
22173  * Create a new ProgressBar
22174  * @param {Object} config The config object
22175  */
22176
22177 Roo.bootstrap.ProgressBar = function(config){
22178     Roo.bootstrap.ProgressBar.superclass.constructor.call(this, config);
22179 };
22180
22181 Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component,  {
22182     
22183     aria_valuenow : 0,
22184     aria_valuemin : 0,
22185     aria_valuemax : 100,
22186     label : false,
22187     panel : false,
22188     role : false,
22189     sr_only: false,
22190     
22191     getAutoCreate : function()
22192     {
22193         
22194         var cfg = {
22195             tag: 'div',
22196             cls: 'progress-bar',
22197             style: 'width:' + Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%'
22198         };
22199         
22200         if(this.sr_only){
22201             cfg.cn = {
22202                 tag: 'span',
22203                 cls: 'sr-only',
22204                 html: this.sr_only
22205             }
22206         }
22207         
22208         if(this.role){
22209             cfg.role = this.role;
22210         }
22211         
22212         if(this.aria_valuenow){
22213             cfg['aria-valuenow'] = this.aria_valuenow;
22214         }
22215         
22216         if(this.aria_valuemin){
22217             cfg['aria-valuemin'] = this.aria_valuemin;
22218         }
22219         
22220         if(this.aria_valuemax){
22221             cfg['aria-valuemax'] = this.aria_valuemax;
22222         }
22223         
22224         if(this.label && !this.sr_only){
22225             cfg.html = this.label;
22226         }
22227         
22228         if(this.panel){
22229             cfg.cls += ' progress-bar-' + this.panel;
22230         }
22231         
22232         return cfg;
22233     },
22234     
22235     update : function(aria_valuenow)
22236     {
22237         this.aria_valuenow = aria_valuenow;
22238         
22239         this.el.setStyle('width', Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%');
22240     }
22241    
22242 });
22243
22244  
22245
22246  /**
22247  * @class Roo.bootstrap.TabGroup
22248  * @extends Roo.bootstrap.Column
22249  * @children Roo.bootstrap.TabPanel
22250  * Bootstrap Column class
22251  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
22252  * @cfg {Boolean} carousel true to make the group behave like a carousel
22253  * @cfg {Boolean} bullets show bullets for the panels
22254  * @cfg {Boolean} autoslide (true|false) auto slide .. default false
22255  * @cfg {Number} timer auto slide timer .. default 0 millisecond
22256  * @cfg {Boolean} showarrow (true|false) show arrow default true
22257  * 
22258  * @constructor
22259  * Create a new TabGroup
22260  * @param {Object} config The config object
22261  */
22262
22263 Roo.bootstrap.TabGroup = function(config){
22264     Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
22265     if (!this.navId) {
22266         this.navId = Roo.id();
22267     }
22268     this.tabs = [];
22269     Roo.bootstrap.TabGroup.register(this);
22270     
22271 };
22272
22273 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
22274     
22275     carousel : false,
22276     transition : false,
22277     bullets : 0,
22278     timer : 0,
22279     autoslide : false,
22280     slideFn : false,
22281     slideOnTouch : false,
22282     showarrow : true,
22283     
22284     getAutoCreate : function()
22285     {
22286         var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
22287         
22288         cfg.cls += ' tab-content';
22289         
22290         if (this.carousel) {
22291             cfg.cls += ' carousel slide';
22292             
22293             cfg.cn = [{
22294                cls : 'carousel-inner',
22295                cn : []
22296             }];
22297         
22298             if(this.bullets  && !Roo.isTouch){
22299                 
22300                 var bullets = {
22301                     cls : 'carousel-bullets',
22302                     cn : []
22303                 };
22304                
22305                 if(this.bullets_cls){
22306                     bullets.cls = bullets.cls + ' ' + this.bullets_cls;
22307                 }
22308                 
22309                 bullets.cn.push({
22310                     cls : 'clear'
22311                 });
22312                 
22313                 cfg.cn[0].cn.push(bullets);
22314             }
22315             
22316             if(this.showarrow){
22317                 cfg.cn[0].cn.push({
22318                     tag : 'div',
22319                     class : 'carousel-arrow',
22320                     cn : [
22321                         {
22322                             tag : 'div',
22323                             class : 'carousel-prev',
22324                             cn : [
22325                                 {
22326                                     tag : 'i',
22327                                     class : 'fa fa-chevron-left'
22328                                 }
22329                             ]
22330                         },
22331                         {
22332                             tag : 'div',
22333                             class : 'carousel-next',
22334                             cn : [
22335                                 {
22336                                     tag : 'i',
22337                                     class : 'fa fa-chevron-right'
22338                                 }
22339                             ]
22340                         }
22341                     ]
22342                 });
22343             }
22344             
22345         }
22346         
22347         return cfg;
22348     },
22349     
22350     initEvents:  function()
22351     {
22352 //        if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
22353 //            this.el.on("touchstart", this.onTouchStart, this);
22354 //        }
22355         
22356         if(this.autoslide){
22357             var _this = this;
22358             
22359             this.slideFn = window.setInterval(function() {
22360                 _this.showPanelNext();
22361             }, this.timer);
22362         }
22363         
22364         if(this.showarrow){
22365             this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
22366             this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
22367         }
22368         
22369         
22370     },
22371     
22372 //    onTouchStart : function(e, el, o)
22373 //    {
22374 //        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
22375 //            return;
22376 //        }
22377 //        
22378 //        this.showPanelNext();
22379 //    },
22380     
22381     
22382     getChildContainer : function()
22383     {
22384         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
22385     },
22386     
22387     /**
22388     * register a Navigation item
22389     * @param {Roo.bootstrap.nav.Item} the navitem to add
22390     */
22391     register : function(item)
22392     {
22393         this.tabs.push( item);
22394         item.navId = this.navId; // not really needed..
22395         this.addBullet();
22396     
22397     },
22398     
22399     getActivePanel : function()
22400     {
22401         var r = false;
22402         Roo.each(this.tabs, function(t) {
22403             if (t.active) {
22404                 r = t;
22405                 return false;
22406             }
22407             return null;
22408         });
22409         return r;
22410         
22411     },
22412     getPanelByName : function(n)
22413     {
22414         var r = false;
22415         Roo.each(this.tabs, function(t) {
22416             if (t.tabId == n) {
22417                 r = t;
22418                 return false;
22419             }
22420             return null;
22421         });
22422         return r;
22423     },
22424     indexOfPanel : function(p)
22425     {
22426         var r = false;
22427         Roo.each(this.tabs, function(t,i) {
22428             if (t.tabId == p.tabId) {
22429                 r = i;
22430                 return false;
22431             }
22432             return null;
22433         });
22434         return r;
22435     },
22436     /**
22437      * show a specific panel
22438      * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
22439      * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
22440      */
22441     showPanel : function (pan)
22442     {
22443         if(this.transition || typeof(pan) == 'undefined'){
22444             Roo.log("waiting for the transitionend");
22445             return false;
22446         }
22447         
22448         if (typeof(pan) == 'number') {
22449             pan = this.tabs[pan];
22450         }
22451         
22452         if (typeof(pan) == 'string') {
22453             pan = this.getPanelByName(pan);
22454         }
22455         
22456         var cur = this.getActivePanel();
22457         
22458         if(!pan || !cur){
22459             Roo.log('pan or acitve pan is undefined');
22460             return false;
22461         }
22462         
22463         if (pan.tabId == this.getActivePanel().tabId) {
22464             return true;
22465         }
22466         
22467         if (false === cur.fireEvent('beforedeactivate')) {
22468             return false;
22469         }
22470         
22471         if(this.bullets > 0 && !Roo.isTouch){
22472             this.setActiveBullet(this.indexOfPanel(pan));
22473         }
22474         
22475         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
22476             
22477             //class="carousel-item carousel-item-next carousel-item-left"
22478             
22479             this.transition = true;
22480             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
22481             var lr = dir == 'next' ? 'left' : 'right';
22482             pan.el.addClass(dir); // or prev
22483             pan.el.addClass('carousel-item-' + dir); // or prev
22484             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
22485             cur.el.addClass(lr); // or right
22486             pan.el.addClass(lr);
22487             cur.el.addClass('carousel-item-' +lr); // or right
22488             pan.el.addClass('carousel-item-' +lr);
22489             
22490             
22491             var _this = this;
22492             cur.el.on('transitionend', function() {
22493                 Roo.log("trans end?");
22494                 
22495                 pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
22496                 pan.setActive(true);
22497                 
22498                 cur.el.removeClass([lr, 'carousel-item-' + lr]);
22499                 cur.setActive(false);
22500                 
22501                 _this.transition = false;
22502                 
22503             }, this, { single:  true } );
22504             
22505             return true;
22506         }
22507         
22508         cur.setActive(false);
22509         pan.setActive(true);
22510         
22511         return true;
22512         
22513     },
22514     showPanelNext : function()
22515     {
22516         var i = this.indexOfPanel(this.getActivePanel());
22517         
22518         if (i >= this.tabs.length - 1 && !this.autoslide) {
22519             return;
22520         }
22521         
22522         if (i >= this.tabs.length - 1 && this.autoslide) {
22523             i = -1;
22524         }
22525         
22526         this.showPanel(this.tabs[i+1]);
22527     },
22528     
22529     showPanelPrev : function()
22530     {
22531         var i = this.indexOfPanel(this.getActivePanel());
22532         
22533         if (i  < 1 && !this.autoslide) {
22534             return;
22535         }
22536         
22537         if (i < 1 && this.autoslide) {
22538             i = this.tabs.length;
22539         }
22540         
22541         this.showPanel(this.tabs[i-1]);
22542     },
22543     
22544     
22545     addBullet: function()
22546     {
22547         if(!this.bullets || Roo.isTouch){
22548             return;
22549         }
22550         var ctr = this.el.select('.carousel-bullets',true).first();
22551         var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
22552         var bullet = ctr.createChild({
22553             cls : 'bullet bullet-' + i
22554         },ctr.dom.lastChild);
22555         
22556         
22557         var _this = this;
22558         
22559         bullet.on('click', (function(e, el, o, ii, t){
22560
22561             e.preventDefault();
22562
22563             this.showPanel(ii);
22564
22565             if(this.autoslide && this.slideFn){
22566                 clearInterval(this.slideFn);
22567                 this.slideFn = window.setInterval(function() {
22568                     _this.showPanelNext();
22569                 }, this.timer);
22570             }
22571
22572         }).createDelegate(this, [i, bullet], true));
22573                 
22574         
22575     },
22576      
22577     setActiveBullet : function(i)
22578     {
22579         if(Roo.isTouch){
22580             return;
22581         }
22582         
22583         Roo.each(this.el.select('.bullet', true).elements, function(el){
22584             el.removeClass('selected');
22585         });
22586
22587         var bullet = this.el.select('.bullet-' + i, true).first();
22588         
22589         if(!bullet){
22590             return;
22591         }
22592         
22593         bullet.addClass('selected');
22594     }
22595     
22596     
22597   
22598 });
22599
22600  
22601
22602  
22603  
22604 Roo.apply(Roo.bootstrap.TabGroup, {
22605     
22606     groups: {},
22607      /**
22608     * register a Navigation Group
22609     * @param {Roo.bootstrap.nav.Group} the navgroup to add
22610     */
22611     register : function(navgrp)
22612     {
22613         this.groups[navgrp.navId] = navgrp;
22614         
22615     },
22616     /**
22617     * fetch a Navigation Group based on the navigation ID
22618     * if one does not exist , it will get created.
22619     * @param {string} the navgroup to add
22620     * @returns {Roo.bootstrap.nav.Group} the navgroup 
22621     */
22622     get: function(navId) {
22623         if (typeof(this.groups[navId]) == 'undefined') {
22624             this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
22625         }
22626         return this.groups[navId] ;
22627     }
22628     
22629     
22630     
22631 });
22632
22633  /*
22634  * - LGPL
22635  *
22636  * TabPanel
22637  * 
22638  */
22639
22640 /**
22641  * @class Roo.bootstrap.TabPanel
22642  * @extends Roo.bootstrap.Component
22643  * @children Roo.bootstrap.Component
22644  * Bootstrap TabPanel class
22645  * @cfg {Boolean} active panel active
22646  * @cfg {String} html panel content
22647  * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
22648  * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
22649  * @cfg {String} href click to link..
22650  * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
22651  * 
22652  * 
22653  * @constructor
22654  * Create a new TabPanel
22655  * @param {Object} config The config object
22656  */
22657
22658 Roo.bootstrap.TabPanel = function(config){
22659     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
22660     this.addEvents({
22661         /**
22662              * @event changed
22663              * Fires when the active status changes
22664              * @param {Roo.bootstrap.TabPanel} this
22665              * @param {Boolean} state the new state
22666             
22667          */
22668         'changed': true,
22669         /**
22670              * @event beforedeactivate
22671              * Fires before a tab is de-activated - can be used to do validation on a form.
22672              * @param {Roo.bootstrap.TabPanel} this
22673              * @return {Boolean} false if there is an error
22674             
22675          */
22676         'beforedeactivate': true
22677      });
22678     
22679     this.tabId = this.tabId || Roo.id();
22680   
22681 };
22682
22683 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
22684     
22685     active: false,
22686     html: false,
22687     tabId: false,
22688     navId : false,
22689     href : '',
22690     touchSlide : false,
22691     getAutoCreate : function(){
22692         
22693         
22694         var cfg = {
22695             tag: 'div',
22696             // item is needed for carousel - not sure if it has any effect otherwise
22697             cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
22698             html: this.html || ''
22699         };
22700         
22701         if(this.active){
22702             cfg.cls += ' active';
22703         }
22704         
22705         if(this.tabId){
22706             cfg.tabId = this.tabId;
22707         }
22708         
22709         
22710         
22711         return cfg;
22712     },
22713     
22714     initEvents:  function()
22715     {
22716         var p = this.parent();
22717         
22718         this.navId = this.navId || p.navId;
22719         
22720         if (typeof(this.navId) != 'undefined') {
22721             // not really needed.. but just in case.. parent should be a NavGroup.
22722             var tg = Roo.bootstrap.TabGroup.get(this.navId);
22723             
22724             tg.register(this);
22725             
22726             var i = tg.tabs.length - 1;
22727             
22728             if(this.active && tg.bullets > 0 && i < tg.bullets){
22729                 tg.setActiveBullet(i);
22730             }
22731         }
22732         
22733         this.el.on('click', this.onClick, this);
22734         
22735         if(Roo.isTouch && this.touchSlide){
22736             this.el.on("touchstart", this.onTouchStart, this);
22737             this.el.on("touchmove", this.onTouchMove, this);
22738             this.el.on("touchend", this.onTouchEnd, this);
22739         }
22740         
22741     },
22742     
22743     onRender : function(ct, position)
22744     {
22745         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
22746     },
22747     
22748     setActive : function(state)
22749     {
22750         Roo.log("panel - set active " + this.tabId + "=" + state);
22751         
22752         this.active = state;
22753         if (!state) {
22754             this.el.removeClass('active');
22755             
22756         } else  if (!this.el.hasClass('active')) {
22757             this.el.addClass('active');
22758         }
22759         
22760         this.fireEvent('changed', this, state);
22761     },
22762     
22763     onClick : function(e)
22764     {
22765         e.preventDefault();
22766         
22767         if(!this.href.length){
22768             return;
22769         }
22770         
22771         window.location.href = this.href;
22772     },
22773     
22774     startX : 0,
22775     startY : 0,
22776     endX : 0,
22777     endY : 0,
22778     swiping : false,
22779     
22780     onTouchStart : function(e)
22781     {
22782         this.swiping = false;
22783         
22784         this.startX = e.browserEvent.touches[0].clientX;
22785         this.startY = e.browserEvent.touches[0].clientY;
22786     },
22787     
22788     onTouchMove : function(e)
22789     {
22790         this.swiping = true;
22791         
22792         this.endX = e.browserEvent.touches[0].clientX;
22793         this.endY = e.browserEvent.touches[0].clientY;
22794     },
22795     
22796     onTouchEnd : function(e)
22797     {
22798         if(!this.swiping){
22799             this.onClick(e);
22800             return;
22801         }
22802         
22803         var tabGroup = this.parent();
22804         
22805         if(this.endX > this.startX){ // swiping right
22806             tabGroup.showPanelPrev();
22807             return;
22808         }
22809         
22810         if(this.startX > this.endX){ // swiping left
22811             tabGroup.showPanelNext();
22812             return;
22813         }
22814     }
22815     
22816     
22817 });
22818  
22819
22820  
22821
22822  /*
22823  * - LGPL
22824  *
22825  * DateField
22826  * 
22827  */
22828
22829 /**
22830  * @class Roo.bootstrap.form.DateField
22831  * @extends Roo.bootstrap.form.Input
22832  * Bootstrap DateField class
22833  * @cfg {Number} weekStart default 0
22834  * @cfg {String} viewMode default empty, (months|years)
22835  * @cfg {String} minViewMode default empty, (months|years)
22836  * @cfg {Number} startDate default -Infinity
22837  * @cfg {Number} endDate default Infinity
22838  * @cfg {Boolean} todayHighlight default false
22839  * @cfg {Boolean} todayBtn default false
22840  * @cfg {Boolean} calendarWeeks default false
22841  * @cfg {Object} daysOfWeekDisabled default empty
22842  * @cfg {Boolean} singleMode default false (true | false)
22843  * 
22844  * @cfg {Boolean} keyboardNavigation default true
22845  * @cfg {String} language default en
22846  * 
22847  * @constructor
22848  * Create a new DateField
22849  * @param {Object} config The config object
22850  */
22851
22852 Roo.bootstrap.form.DateField = function(config){
22853     Roo.bootstrap.form.DateField.superclass.constructor.call(this, config);
22854      this.addEvents({
22855             /**
22856              * @event show
22857              * Fires when this field show.
22858              * @param {Roo.bootstrap.form.DateField} this
22859              * @param {Mixed} date The date value
22860              */
22861             show : true,
22862             /**
22863              * @event show
22864              * Fires when this field hide.
22865              * @param {Roo.bootstrap.form.DateField} this
22866              * @param {Mixed} date The date value
22867              */
22868             hide : true,
22869             /**
22870              * @event select
22871              * Fires when select a date.
22872              * @param {Roo.bootstrap.form.DateField} this
22873              * @param {Mixed} date The date value
22874              */
22875             select : true,
22876             /**
22877              * @event beforeselect
22878              * Fires when before select a date.
22879              * @param {Roo.bootstrap.form.DateField} this
22880              * @param {Mixed} date The date value
22881              */
22882             beforeselect : true
22883         });
22884 };
22885
22886 Roo.extend(Roo.bootstrap.form.DateField, Roo.bootstrap.form.Input,  {
22887     
22888     /**
22889      * @cfg {String} format
22890      * The default date format string which can be overriden for localization support.  The format must be
22891      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
22892      */
22893     format : "m/d/y",
22894     /**
22895      * @cfg {String} altFormats
22896      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
22897      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
22898      */
22899     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
22900     
22901     weekStart : 0,
22902     
22903     viewMode : '',
22904     
22905     minViewMode : '',
22906     
22907     todayHighlight : false,
22908     
22909     todayBtn: false,
22910     
22911     language: 'en',
22912     
22913     keyboardNavigation: true,
22914     
22915     calendarWeeks: false,
22916     
22917     startDate: -Infinity,
22918     
22919     endDate: Infinity,
22920     
22921     daysOfWeekDisabled: [],
22922     
22923     _events: [],
22924     
22925     singleMode : false,
22926     
22927     UTCDate: function()
22928     {
22929         return new Date(Date.UTC.apply(Date, arguments));
22930     },
22931     
22932     UTCToday: function()
22933     {
22934         var today = new Date();
22935         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
22936     },
22937     
22938     getDate: function() {
22939             var d = this.getUTCDate();
22940             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
22941     },
22942     
22943     getUTCDate: function() {
22944             return this.date;
22945     },
22946     
22947     setDate: function(d) {
22948             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
22949     },
22950     
22951     setUTCDate: function(d) {
22952             this.date = d;
22953             this.setValue(this.formatDate(this.date));
22954     },
22955         
22956     onRender: function(ct, position)
22957     {
22958         
22959         Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position);
22960         
22961         this.language = this.language || 'en';
22962         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0];
22963         this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en";
22964         
22965         this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false;
22966         this.format = this.format || 'm/d/y';
22967         this.isInline = false;
22968         this.isInput = true;
22969         this.component = this.el.select('.add-on', true).first() || false;
22970         this.component = (this.component && this.component.length === 0) ? false : this.component;
22971         this.hasInput = this.component && this.inputEl().length;
22972         
22973         if (typeof(this.minViewMode === 'string')) {
22974             switch (this.minViewMode) {
22975                 case 'months':
22976                     this.minViewMode = 1;
22977                     break;
22978                 case 'years':
22979                     this.minViewMode = 2;
22980                     break;
22981                 default:
22982                     this.minViewMode = 0;
22983                     break;
22984             }
22985         }
22986         
22987         if (typeof(this.viewMode === 'string')) {
22988             switch (this.viewMode) {
22989                 case 'months':
22990                     this.viewMode = 1;
22991                     break;
22992                 case 'years':
22993                     this.viewMode = 2;
22994                     break;
22995                 default:
22996                     this.viewMode = 0;
22997                     break;
22998             }
22999         }
23000                 
23001         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.DateField.template);
23002         
23003 //        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.form.DateField.template);
23004         
23005         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23006         
23007         this.picker().on('mousedown', this.onMousedown, this);
23008         this.picker().on('click', this.onClick, this);
23009         
23010         this.picker().addClass('datepicker-dropdown');
23011         
23012         this.startViewMode = this.viewMode;
23013         
23014         if(this.singleMode){
23015             Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
23016                 v.setVisibilityMode(Roo.Element.DISPLAY);
23017                 v.hide();
23018             });
23019             
23020             Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
23021                 v.setStyle('width', '189px');
23022             });
23023         }
23024         
23025         Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
23026             if(!this.calendarWeeks){
23027                 v.remove();
23028                 return;
23029             }
23030             
23031             v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
23032             v.attr('colspan', function(i, val){
23033                 return parseInt(val) + 1;
23034             });
23035         });
23036                         
23037         
23038         this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
23039         
23040         this.setStartDate(this.startDate);
23041         this.setEndDate(this.endDate);
23042         
23043         this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
23044         
23045         this.fillDow();
23046         this.fillMonths();
23047         this.update();
23048         this.showMode();
23049         
23050         if(this.isInline) {
23051             this.showPopup();
23052         }
23053     },
23054     
23055     picker : function()
23056     {
23057         return this.pickerEl;
23058 //        return this.el.select('.datepicker', true).first();
23059     },
23060     
23061     fillDow: function()
23062     {
23063         var dowCnt = this.weekStart;
23064         
23065         var dow = {
23066             tag: 'tr',
23067             cn: [
23068                 
23069             ]
23070         };
23071         
23072         if(this.calendarWeeks){
23073             dow.cn.push({
23074                 tag: 'th',
23075                 cls: 'cw',
23076                 html: '&nbsp;'
23077             })
23078         }
23079         
23080         while (dowCnt < this.weekStart + 7) {
23081             dow.cn.push({
23082                 tag: 'th',
23083                 cls: 'dow',
23084                 html: Roo.bootstrap.form.DateField.dates[this.language].daysMin[(dowCnt++)%7]
23085             });
23086         }
23087         
23088         this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
23089     },
23090     
23091     fillMonths: function()
23092     {    
23093         var i = 0;
23094         var months = this.picker().select('>.datepicker-months td', true).first();
23095         
23096         months.dom.innerHTML = '';
23097         
23098         while (i < 12) {
23099             var month = {
23100                 tag: 'span',
23101                 cls: 'month',
23102                 html: Roo.bootstrap.form.DateField.dates[this.language].monthsShort[i++]
23103             };
23104             
23105             months.createChild(month);
23106         }
23107         
23108     },
23109     
23110     update: function()
23111     {
23112         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;
23113         
23114         if (this.date < this.startDate) {
23115             this.viewDate = new Date(this.startDate);
23116         } else if (this.date > this.endDate) {
23117             this.viewDate = new Date(this.endDate);
23118         } else {
23119             this.viewDate = new Date(this.date);
23120         }
23121         
23122         this.fill();
23123     },
23124     
23125     fill: function() 
23126     {
23127         var d = new Date(this.viewDate),
23128                 year = d.getUTCFullYear(),
23129                 month = d.getUTCMonth(),
23130                 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
23131                 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
23132                 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
23133                 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
23134                 currentDate = this.date && this.date.valueOf(),
23135                 today = this.UTCToday();
23136         
23137         this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year;
23138         
23139 //        this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
23140         
23141 //        this.picker.select('>tfoot th.today').
23142 //                                              .text(dates[this.language].today)
23143 //                                              .toggle(this.todayBtn !== false);
23144     
23145         this.updateNavArrows();
23146         this.fillMonths();
23147                                                 
23148         var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
23149         
23150         day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
23151          
23152         prevMonth.setUTCDate(day);
23153         
23154         prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
23155         
23156         var nextMonth = new Date(prevMonth);
23157         
23158         nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
23159         
23160         nextMonth = nextMonth.valueOf();
23161         
23162         var fillMonths = false;
23163         
23164         this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
23165         
23166         while(prevMonth.valueOf() <= nextMonth) {
23167             var clsName = '';
23168             
23169             if (prevMonth.getUTCDay() === this.weekStart) {
23170                 if(fillMonths){
23171                     this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
23172                 }
23173                     
23174                 fillMonths = {
23175                     tag: 'tr',
23176                     cn: []
23177                 };
23178                 
23179                 if(this.calendarWeeks){
23180                     // ISO 8601: First week contains first thursday.
23181                     // ISO also states week starts on Monday, but we can be more abstract here.
23182                     var
23183                     // Start of current week: based on weekstart/current date
23184                     ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
23185                     // Thursday of this week
23186                     th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
23187                     // First Thursday of year, year from thursday
23188                     yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
23189                     // Calendar week: ms between thursdays, div ms per day, div 7 days
23190                     calWeek =  (th - yth) / 864e5 / 7 + 1;
23191                     
23192                     fillMonths.cn.push({
23193                         tag: 'td',
23194                         cls: 'cw',
23195                         html: calWeek
23196                     });
23197                 }
23198             }
23199             
23200             if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
23201                 clsName += ' old';
23202             } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
23203                 clsName += ' new';
23204             }
23205             if (this.todayHighlight &&
23206                 prevMonth.getUTCFullYear() == today.getFullYear() &&
23207                 prevMonth.getUTCMonth() == today.getMonth() &&
23208                 prevMonth.getUTCDate() == today.getDate()) {
23209                 clsName += ' today';
23210             }
23211             
23212             if (currentDate && prevMonth.valueOf() === currentDate) {
23213                 clsName += ' active';
23214             }
23215             
23216             if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
23217                     this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
23218                     clsName += ' disabled';
23219             }
23220             
23221             fillMonths.cn.push({
23222                 tag: 'td',
23223                 cls: 'day ' + clsName,
23224                 html: prevMonth.getDate()
23225             });
23226             
23227             prevMonth.setDate(prevMonth.getDate()+1);
23228         }
23229           
23230         var currentYear = this.date && this.date.getUTCFullYear();
23231         var currentMonth = this.date && this.date.getUTCMonth();
23232         
23233         this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
23234         
23235         Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
23236             v.removeClass('active');
23237             
23238             if(currentYear === year && k === currentMonth){
23239                 v.addClass('active');
23240             }
23241             
23242             if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
23243                 v.addClass('disabled');
23244             }
23245             
23246         });
23247         
23248         
23249         year = parseInt(year/10, 10) * 10;
23250         
23251         this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
23252         
23253         this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
23254         
23255         year -= 1;
23256         for (var i = -1; i < 11; i++) {
23257             this.picker().select('>.datepicker-years tbody td',true).first().createChild({
23258                 tag: 'span',
23259                 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
23260                 html: year
23261             });
23262             
23263             year += 1;
23264         }
23265     },
23266     
23267     showMode: function(dir) 
23268     {
23269         if (dir) {
23270             this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
23271         }
23272         
23273         Roo.each(this.picker().select('>div',true).elements, function(v){
23274             v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
23275             v.hide();
23276         });
23277         this.picker().select('>.datepicker-'+Roo.bootstrap.form.DateField.modes[this.viewMode].clsName, true).first().show();
23278     },
23279     
23280     place: function()
23281     {
23282         if(this.isInline) {
23283             return;
23284         }
23285         
23286         this.picker().removeClass(['bottom', 'top']);
23287         
23288         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
23289             /*
23290              * place to the top of element!
23291              *
23292              */
23293             
23294             this.picker().addClass('top');
23295             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
23296             
23297             return;
23298         }
23299         
23300         this.picker().addClass('bottom');
23301         
23302         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
23303     },
23304     
23305     parseDate : function(value)
23306     {
23307         if(!value || value instanceof Date){
23308             return value;
23309         }
23310         var v = Date.parseDate(value, this.format);
23311         if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
23312             v = Date.parseDate(value, 'Y-m-d');
23313         }
23314         if(!v && this.altFormats){
23315             if(!this.altFormatsArray){
23316                 this.altFormatsArray = this.altFormats.split("|");
23317             }
23318             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
23319                 v = Date.parseDate(value, this.altFormatsArray[i]);
23320             }
23321         }
23322         return v;
23323     },
23324     
23325     formatDate : function(date, fmt)
23326     {   
23327         return (!date || !(date instanceof Date)) ?
23328         date : date.dateFormat(fmt || this.format);
23329     },
23330     
23331     onFocus : function()
23332     {
23333         Roo.bootstrap.form.DateField.superclass.onFocus.call(this);
23334         this.showPopup();
23335     },
23336     
23337     onBlur : function()
23338     {
23339         Roo.bootstrap.form.DateField.superclass.onBlur.call(this);
23340         
23341         var d = this.inputEl().getValue();
23342         
23343         this.setValue(d);
23344                 
23345         this.hidePopup();
23346     },
23347     
23348     showPopup : function()
23349     {
23350         this.picker().show();
23351         this.update();
23352         this.place();
23353         
23354         this.fireEvent('showpopup', this, this.date);
23355     },
23356     
23357     hidePopup : function()
23358     {
23359         if(this.isInline) {
23360             return;
23361         }
23362         this.picker().hide();
23363         this.viewMode = this.startViewMode;
23364         this.showMode();
23365         
23366         this.fireEvent('hidepopup', this, this.date);
23367         
23368     },
23369     
23370     onMousedown: function(e)
23371     {
23372         e.stopPropagation();
23373         e.preventDefault();
23374     },
23375     
23376     keyup: function(e)
23377     {
23378         Roo.bootstrap.form.DateField.superclass.keyup.call(this);
23379         this.update();
23380     },
23381
23382     setValue: function(v)
23383     {
23384         if(this.fireEvent('beforeselect', this, v) !== false){
23385             var d = new Date(this.parseDate(v) ).clearTime();
23386         
23387             if(isNaN(d.getTime())){
23388                 this.date = this.viewDate = '';
23389                 Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23390                 return;
23391             }
23392
23393             v = this.formatDate(d);
23394
23395             Roo.bootstrap.form.DateField.superclass.setValue.call(this, v);
23396
23397             this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
23398
23399             this.update();
23400
23401             this.fireEvent('select', this, this.date);
23402         }
23403     },
23404     
23405     getValue: function()
23406     {
23407         return this.formatDate(this.date);
23408     },
23409     
23410     fireKey: function(e)
23411     {
23412         if (!this.picker().isVisible()){
23413             if (e.keyCode == 27) { // allow escape to hide and re-show picker
23414                 this.showPopup();
23415             }
23416             return;
23417         }
23418         
23419         var dateChanged = false,
23420         dir, day, month,
23421         newDate, newViewDate;
23422         
23423         switch(e.keyCode){
23424             case 27: // escape
23425                 this.hidePopup();
23426                 e.preventDefault();
23427                 break;
23428             case 37: // left
23429             case 39: // right
23430                 if (!this.keyboardNavigation) {
23431                     break;
23432                 }
23433                 dir = e.keyCode == 37 ? -1 : 1;
23434                 
23435                 if (e.ctrlKey){
23436                     newDate = this.moveYear(this.date, dir);
23437                     newViewDate = this.moveYear(this.viewDate, dir);
23438                 } else if (e.shiftKey){
23439                     newDate = this.moveMonth(this.date, dir);
23440                     newViewDate = this.moveMonth(this.viewDate, dir);
23441                 } else {
23442                     newDate = new Date(this.date);
23443                     newDate.setUTCDate(this.date.getUTCDate() + dir);
23444                     newViewDate = new Date(this.viewDate);
23445                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
23446                 }
23447                 if (this.dateWithinRange(newDate)){
23448                     this.date = newDate;
23449                     this.viewDate = newViewDate;
23450                     this.setValue(this.formatDate(this.date));
23451 //                    this.update();
23452                     e.preventDefault();
23453                     dateChanged = true;
23454                 }
23455                 break;
23456             case 38: // up
23457             case 40: // down
23458                 if (!this.keyboardNavigation) {
23459                     break;
23460                 }
23461                 dir = e.keyCode == 38 ? -1 : 1;
23462                 if (e.ctrlKey){
23463                     newDate = this.moveYear(this.date, dir);
23464                     newViewDate = this.moveYear(this.viewDate, dir);
23465                 } else if (e.shiftKey){
23466                     newDate = this.moveMonth(this.date, dir);
23467                     newViewDate = this.moveMonth(this.viewDate, dir);
23468                 } else {
23469                     newDate = new Date(this.date);
23470                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
23471                     newViewDate = new Date(this.viewDate);
23472                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
23473                 }
23474                 if (this.dateWithinRange(newDate)){
23475                     this.date = newDate;
23476                     this.viewDate = newViewDate;
23477                     this.setValue(this.formatDate(this.date));
23478 //                    this.update();
23479                     e.preventDefault();
23480                     dateChanged = true;
23481                 }
23482                 break;
23483             case 13: // enter
23484                 this.setValue(this.formatDate(this.date));
23485                 this.hidePopup();
23486                 e.preventDefault();
23487                 break;
23488             case 9: // tab
23489                 this.setValue(this.formatDate(this.date));
23490                 this.hidePopup();
23491                 break;
23492             case 16: // shift
23493             case 17: // ctrl
23494             case 18: // alt
23495                 break;
23496             default :
23497                 this.hidePopup();
23498                 
23499         }
23500     },
23501     
23502     
23503     onClick: function(e) 
23504     {
23505         e.stopPropagation();
23506         e.preventDefault();
23507         
23508         var target = e.getTarget();
23509         
23510         if(target.nodeName.toLowerCase() === 'i'){
23511             target = Roo.get(target).dom.parentNode;
23512         }
23513         
23514         var nodeName = target.nodeName;
23515         var className = target.className;
23516         var html = target.innerHTML;
23517         //Roo.log(nodeName);
23518         
23519         switch(nodeName.toLowerCase()) {
23520             case 'th':
23521                 switch(className) {
23522                     case 'switch':
23523                         this.showMode(1);
23524                         break;
23525                     case 'prev':
23526                     case 'next':
23527                         var dir = Roo.bootstrap.form.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
23528                         switch(this.viewMode){
23529                                 case 0:
23530                                         this.viewDate = this.moveMonth(this.viewDate, dir);
23531                                         break;
23532                                 case 1:
23533                                 case 2:
23534                                         this.viewDate = this.moveYear(this.viewDate, dir);
23535                                         break;
23536                         }
23537                         this.fill();
23538                         break;
23539                     case 'today':
23540                         var date = new Date();
23541                         this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
23542 //                        this.fill()
23543                         this.setValue(this.formatDate(this.date));
23544                         
23545                         this.hidePopup();
23546                         break;
23547                 }
23548                 break;
23549             case 'span':
23550                 if (className.indexOf('disabled') < 0) {
23551                 if (!this.viewDate) {
23552                     this.viewDate = new Date();
23553                 }
23554                 this.viewDate.setUTCDate(1);
23555                     if (className.indexOf('month') > -1) {
23556                         this.viewDate.setUTCMonth(Roo.bootstrap.form.DateField.dates[this.language].monthsShort.indexOf(html));
23557                     } else {
23558                         var year = parseInt(html, 10) || 0;
23559                         this.viewDate.setUTCFullYear(year);
23560                         
23561                     }
23562                     
23563                     if(this.singleMode){
23564                         this.setValue(this.formatDate(this.viewDate));
23565                         this.hidePopup();
23566                         return;
23567                     }
23568                     
23569                     this.showMode(-1);
23570                     this.fill();
23571                 }
23572                 break;
23573                 
23574             case 'td':
23575                 //Roo.log(className);
23576                 if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
23577                     var day = parseInt(html, 10) || 1;
23578                     var year =  (this.viewDate || new Date()).getUTCFullYear(),
23579                         month = (this.viewDate || new Date()).getUTCMonth();
23580
23581                     if (className.indexOf('old') > -1) {
23582                         if(month === 0 ){
23583                             month = 11;
23584                             year -= 1;
23585                         }else{
23586                             month -= 1;
23587                         }
23588                     } else if (className.indexOf('new') > -1) {
23589                         if (month == 11) {
23590                             month = 0;
23591                             year += 1;
23592                         } else {
23593                             month += 1;
23594                         }
23595                     }
23596                     //Roo.log([year,month,day]);
23597                     this.date = this.UTCDate(year, month, day,0,0,0,0);
23598                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
23599 //                    this.fill();
23600                     //Roo.log(this.formatDate(this.date));
23601                     this.setValue(this.formatDate(this.date));
23602                     this.hidePopup();
23603                 }
23604                 break;
23605         }
23606     },
23607     
23608     setStartDate: function(startDate)
23609     {
23610         this.startDate = startDate || -Infinity;
23611         if (this.startDate !== -Infinity) {
23612             this.startDate = this.parseDate(this.startDate);
23613         }
23614         this.update();
23615         this.updateNavArrows();
23616     },
23617
23618     setEndDate: function(endDate)
23619     {
23620         this.endDate = endDate || Infinity;
23621         if (this.endDate !== Infinity) {
23622             this.endDate = this.parseDate(this.endDate);
23623         }
23624         this.update();
23625         this.updateNavArrows();
23626     },
23627     
23628     setDaysOfWeekDisabled: function(daysOfWeekDisabled)
23629     {
23630         this.daysOfWeekDisabled = daysOfWeekDisabled || [];
23631         if (typeof(this.daysOfWeekDisabled) !== 'object') {
23632             this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
23633         }
23634         this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
23635             return parseInt(d, 10);
23636         });
23637         this.update();
23638         this.updateNavArrows();
23639     },
23640     
23641     updateNavArrows: function() 
23642     {
23643         if(this.singleMode){
23644             return;
23645         }
23646         
23647         var d = new Date(this.viewDate),
23648         year = d.getUTCFullYear(),
23649         month = d.getUTCMonth();
23650         
23651         Roo.each(this.picker().select('.prev', true).elements, function(v){
23652             v.show();
23653             switch (this.viewMode) {
23654                 case 0:
23655
23656                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
23657                         v.hide();
23658                     }
23659                     break;
23660                 case 1:
23661                 case 2:
23662                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
23663                         v.hide();
23664                     }
23665                     break;
23666             }
23667         });
23668         
23669         Roo.each(this.picker().select('.next', true).elements, function(v){
23670             v.show();
23671             switch (this.viewMode) {
23672                 case 0:
23673
23674                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
23675                         v.hide();
23676                     }
23677                     break;
23678                 case 1:
23679                 case 2:
23680                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
23681                         v.hide();
23682                     }
23683                     break;
23684             }
23685         })
23686     },
23687     
23688     moveMonth: function(date, dir)
23689     {
23690         if (!dir) {
23691             return date;
23692         }
23693         var new_date = new Date(date.valueOf()),
23694         day = new_date.getUTCDate(),
23695         month = new_date.getUTCMonth(),
23696         mag = Math.abs(dir),
23697         new_month, test;
23698         dir = dir > 0 ? 1 : -1;
23699         if (mag == 1){
23700             test = dir == -1
23701             // If going back one month, make sure month is not current month
23702             // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
23703             ? function(){
23704                 return new_date.getUTCMonth() == month;
23705             }
23706             // If going forward one month, make sure month is as expected
23707             // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
23708             : function(){
23709                 return new_date.getUTCMonth() != new_month;
23710             };
23711             new_month = month + dir;
23712             new_date.setUTCMonth(new_month);
23713             // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
23714             if (new_month < 0 || new_month > 11) {
23715                 new_month = (new_month + 12) % 12;
23716             }
23717         } else {
23718             // For magnitudes >1, move one month at a time...
23719             for (var i=0; i<mag; i++) {
23720                 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
23721                 new_date = this.moveMonth(new_date, dir);
23722             }
23723             // ...then reset the day, keeping it in the new month
23724             new_month = new_date.getUTCMonth();
23725             new_date.setUTCDate(day);
23726             test = function(){
23727                 return new_month != new_date.getUTCMonth();
23728             };
23729         }
23730         // Common date-resetting loop -- if date is beyond end of month, make it
23731         // end of month
23732         while (test()){
23733             new_date.setUTCDate(--day);
23734             new_date.setUTCMonth(new_month);
23735         }
23736         return new_date;
23737     },
23738
23739     moveYear: function(date, dir)
23740     {
23741         return this.moveMonth(date, dir*12);
23742     },
23743
23744     dateWithinRange: function(date)
23745     {
23746         return date >= this.startDate && date <= this.endDate;
23747     },
23748
23749     
23750     remove: function() 
23751     {
23752         this.picker().remove();
23753     },
23754     
23755     validateValue : function(value)
23756     {
23757         if(this.getVisibilityEl().hasClass('hidden')){
23758             return true;
23759         }
23760         
23761         if(value.length < 1)  {
23762             if(this.allowBlank){
23763                 return true;
23764             }
23765             return false;
23766         }
23767         
23768         if(value.length < this.minLength){
23769             return false;
23770         }
23771         if(value.length > this.maxLength){
23772             return false;
23773         }
23774         if(this.vtype){
23775             var vt = Roo.form.VTypes;
23776             if(!vt[this.vtype](value, this)){
23777                 return false;
23778             }
23779         }
23780         if(typeof this.validator == "function"){
23781             var msg = this.validator(value);
23782             if(msg !== true){
23783                 return false;
23784             }
23785         }
23786         
23787         if(this.regex && !this.regex.test(value)){
23788             return false;
23789         }
23790         
23791         if(typeof(this.parseDate(value)) == 'undefined'){
23792             return false;
23793         }
23794         
23795         if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) {
23796             return false;
23797         }      
23798         
23799         if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) {
23800             return false;
23801         } 
23802         
23803         
23804         return true;
23805     },
23806     
23807     reset : function()
23808     {
23809         this.date = this.viewDate = '';
23810         
23811         Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
23812     }
23813    
23814 });
23815
23816 Roo.apply(Roo.bootstrap.form.DateField,  {
23817     
23818     head : {
23819         tag: 'thead',
23820         cn: [
23821         {
23822             tag: 'tr',
23823             cn: [
23824             {
23825                 tag: 'th',
23826                 cls: 'prev',
23827                 html: '<i class="fa fa-arrow-left"/>'
23828             },
23829             {
23830                 tag: 'th',
23831                 cls: 'switch',
23832                 colspan: '5'
23833             },
23834             {
23835                 tag: 'th',
23836                 cls: 'next',
23837                 html: '<i class="fa fa-arrow-right"/>'
23838             }
23839
23840             ]
23841         }
23842         ]
23843     },
23844     
23845     content : {
23846         tag: 'tbody',
23847         cn: [
23848         {
23849             tag: 'tr',
23850             cn: [
23851             {
23852                 tag: 'td',
23853                 colspan: '7'
23854             }
23855             ]
23856         }
23857         ]
23858     },
23859     
23860     footer : {
23861         tag: 'tfoot',
23862         cn: [
23863         {
23864             tag: 'tr',
23865             cn: [
23866             {
23867                 tag: 'th',
23868                 colspan: '7',
23869                 cls: 'today'
23870             }
23871                     
23872             ]
23873         }
23874         ]
23875     },
23876     
23877     dates:{
23878         en: {
23879             days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
23880             daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
23881             daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
23882             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
23883             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
23884             today: "Today"
23885         }
23886     },
23887     
23888     modes: [
23889     {
23890         clsName: 'days',
23891         navFnc: 'Month',
23892         navStep: 1
23893     },
23894     {
23895         clsName: 'months',
23896         navFnc: 'FullYear',
23897         navStep: 1
23898     },
23899     {
23900         clsName: 'years',
23901         navFnc: 'FullYear',
23902         navStep: 10
23903     }]
23904 });
23905
23906 Roo.apply(Roo.bootstrap.form.DateField,  {
23907   
23908     template : {
23909         tag: 'div',
23910         cls: 'datepicker dropdown-menu roo-dynamic shadow',
23911         cn: [
23912         {
23913             tag: 'div',
23914             cls: 'datepicker-days',
23915             cn: [
23916             {
23917                 tag: 'table',
23918                 cls: 'table-condensed',
23919                 cn:[
23920                 Roo.bootstrap.form.DateField.head,
23921                 {
23922                     tag: 'tbody'
23923                 },
23924                 Roo.bootstrap.form.DateField.footer
23925                 ]
23926             }
23927             ]
23928         },
23929         {
23930             tag: 'div',
23931             cls: 'datepicker-months',
23932             cn: [
23933             {
23934                 tag: 'table',
23935                 cls: 'table-condensed',
23936                 cn:[
23937                 Roo.bootstrap.form.DateField.head,
23938                 Roo.bootstrap.form.DateField.content,
23939                 Roo.bootstrap.form.DateField.footer
23940                 ]
23941             }
23942             ]
23943         },
23944         {
23945             tag: 'div',
23946             cls: 'datepicker-years',
23947             cn: [
23948             {
23949                 tag: 'table',
23950                 cls: 'table-condensed',
23951                 cn:[
23952                 Roo.bootstrap.form.DateField.head,
23953                 Roo.bootstrap.form.DateField.content,
23954                 Roo.bootstrap.form.DateField.footer
23955                 ]
23956             }
23957             ]
23958         }
23959         ]
23960     }
23961 });
23962
23963  
23964
23965  /*
23966  * - LGPL
23967  *
23968  * TimeField
23969  * 
23970  */
23971
23972 /**
23973  * @class Roo.bootstrap.form.TimeField
23974  * @extends Roo.bootstrap.form.Input
23975  * Bootstrap DateField class
23976  * @cfg {Number} minuteStep the minutes goes up/down by a fixed number, default 1
23977  * 
23978  * 
23979  * @constructor
23980  * Create a new TimeField
23981  * @param {Object} config The config object
23982  */
23983
23984 Roo.bootstrap.form.TimeField = function(config){
23985     Roo.bootstrap.form.TimeField.superclass.constructor.call(this, config);
23986     this.addEvents({
23987             /**
23988              * @event show
23989              * Fires when this field show.
23990              * @param {Roo.bootstrap.form.DateField} thisthis
23991              * @param {Mixed} date The date value
23992              */
23993             show : true,
23994             /**
23995              * @event show
23996              * Fires when this field hide.
23997              * @param {Roo.bootstrap.form.DateField} this
23998              * @param {Mixed} date The date value
23999              */
24000             hide : true,
24001             /**
24002              * @event select
24003              * Fires when select a date.
24004              * @param {Roo.bootstrap.form.DateField} this
24005              * @param {Mixed} date The date value
24006              */
24007             select : true
24008         });
24009 };
24010
24011 Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input,  {
24012     
24013     /**
24014      * @cfg {String} format
24015      * The default time format string which can be overriden for localization support.  The format must be
24016      * valid according to {@link Date#parseDate} (defaults to 'H:i').
24017      */
24018     format : "H:i",
24019     minuteStep : 1,
24020
24021     getAutoCreate : function()
24022     {
24023         this.after = '<i class="fa far fa-clock"></i>';
24024         return Roo.bootstrap.form.TimeField.superclass.getAutoCreate.call(this);
24025         
24026          
24027     },
24028     onRender: function(ct, position)
24029     {
24030         
24031         Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position);
24032                 
24033         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template);
24034         
24035         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24036         
24037         this.pop = this.picker().select('>.datepicker-time',true).first();
24038         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24039         
24040         this.picker().on('mousedown', this.onMousedown, this);
24041         this.picker().on('click', this.onClick, this);
24042         
24043         this.picker().addClass('datepicker-dropdown');
24044     
24045         this.fillTime();
24046         this.update();
24047             
24048         this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this);
24049         this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this);
24050         this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
24051         this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
24052         this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
24053         this.pop.select('button.ok', true).first().on('click', this.setTime, this);
24054
24055     },
24056     
24057     fireKey: function(e){
24058         if (!this.picker().isVisible()){
24059             if (e.keyCode == 27) { // allow escape to hide and re-show picker
24060                 this.show();
24061             }
24062             return;
24063         }
24064
24065         e.preventDefault();
24066         
24067         switch(e.keyCode){
24068             case 27: // escape
24069                 this.hide();
24070                 break;
24071             case 37: // left
24072             case 39: // right
24073                 this.onTogglePeriod();
24074                 break;
24075             case 38: // up
24076                 this.onIncrementMinutes();
24077                 break;
24078             case 40: // down
24079                 this.onDecrementMinutes();
24080                 break;
24081             case 13: // enter
24082             case 9: // tab
24083                 this.setTime();
24084                 break;
24085         }
24086     },
24087     
24088     onClick: function(e) {
24089         e.stopPropagation();
24090         e.preventDefault();
24091     },
24092     
24093     picker : function()
24094     {
24095         return this.pickerEl;
24096     },
24097     
24098     fillTime: function()
24099     {    
24100         var time = this.pop.select('tbody', true).first();
24101         
24102         time.dom.innerHTML = '';
24103         
24104         time.createChild({
24105             tag: 'tr',
24106             cn: [
24107                 {
24108                     tag: 'td',
24109                     cn: [
24110                         {
24111                             tag: 'a',
24112                             href: '#',
24113                             cls: 'btn',
24114                             cn: [
24115                                 {
24116                                     tag: 'i',
24117                                     cls: 'hours-up fa fas fa-chevron-up'
24118                                 }
24119                             ]
24120                         } 
24121                     ]
24122                 },
24123                 {
24124                     tag: 'td',
24125                     cls: 'separator'
24126                 },
24127                 {
24128                     tag: 'td',
24129                     cn: [
24130                         {
24131                             tag: 'a',
24132                             href: '#',
24133                             cls: 'btn',
24134                             cn: [
24135                                 {
24136                                     tag: 'i',
24137                                     cls: 'minutes-up fa fas fa-chevron-up'
24138                                 }
24139                             ]
24140                         }
24141                     ]
24142                 },
24143                 {
24144                     tag: 'td',
24145                     cls: 'separator'
24146                 }
24147             ]
24148         });
24149         
24150         time.createChild({
24151             tag: 'tr',
24152             cn: [
24153                 {
24154                     tag: 'td',
24155                     cn: [
24156                         {
24157                             tag: 'span',
24158                             cls: 'timepicker-hour',
24159                             html: '00'
24160                         }  
24161                     ]
24162                 },
24163                 {
24164                     tag: 'td',
24165                     cls: 'separator',
24166                     html: ':'
24167                 },
24168                 {
24169                     tag: 'td',
24170                     cn: [
24171                         {
24172                             tag: 'span',
24173                             cls: 'timepicker-minute',
24174                             html: '00'
24175                         }  
24176                     ]
24177                 },
24178                 {
24179                     tag: 'td',
24180                     cls: 'separator'
24181                 },
24182                 {
24183                     tag: 'td',
24184                     cn: [
24185                         {
24186                             tag: 'button',
24187                             type: 'button',
24188                             cls: 'btn btn-primary period',
24189                             html: 'AM'
24190                             
24191                         }
24192                     ]
24193                 }
24194             ]
24195         });
24196         
24197         time.createChild({
24198             tag: 'tr',
24199             cn: [
24200                 {
24201                     tag: 'td',
24202                     cn: [
24203                         {
24204                             tag: 'a',
24205                             href: '#',
24206                             cls: 'btn',
24207                             cn: [
24208                                 {
24209                                     tag: 'span',
24210                                     cls: 'hours-down fa fas fa-chevron-down'
24211                                 }
24212                             ]
24213                         }
24214                     ]
24215                 },
24216                 {
24217                     tag: 'td',
24218                     cls: 'separator'
24219                 },
24220                 {
24221                     tag: 'td',
24222                     cn: [
24223                         {
24224                             tag: 'a',
24225                             href: '#',
24226                             cls: 'btn',
24227                             cn: [
24228                                 {
24229                                     tag: 'span',
24230                                     cls: 'minutes-down fa fas fa-chevron-down'
24231                                 }
24232                             ]
24233                         }
24234                     ]
24235                 },
24236                 {
24237                     tag: 'td',
24238                     cls: 'separator'
24239                 }
24240             ]
24241         });
24242         
24243     },
24244     
24245     update: function()
24246     {
24247         
24248         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
24249         
24250         this.fill();
24251     },
24252     
24253     fill: function() 
24254     {
24255         var hours = this.time.getHours();
24256         var minutes = this.time.getMinutes();
24257         var period = 'AM';
24258         
24259         if(hours > 11){
24260             period = 'PM';
24261         }
24262         
24263         if(hours == 0){
24264             hours = 12;
24265         }
24266         
24267         
24268         if(hours > 12){
24269             hours = hours - 12;
24270         }
24271         
24272         if(hours < 10){
24273             hours = '0' + hours;
24274         }
24275         
24276         if(minutes < 10){
24277             minutes = '0' + minutes;
24278         }
24279         
24280         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
24281         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
24282         this.pop.select('button', true).first().dom.innerHTML = period;
24283         
24284     },
24285     
24286     place: function()
24287     {   
24288         this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
24289         
24290         var cls = ['bottom'];
24291         
24292         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
24293             cls.pop();
24294             cls.push('top');
24295         }
24296         
24297         cls.push('right');
24298         
24299         if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
24300             cls.pop();
24301             cls.push('left');
24302         }
24303         //this.picker().setXY(20000,20000);
24304         this.picker().addClass(cls.join('-'));
24305         
24306         var _this = this;
24307         
24308         Roo.each(cls, function(c){
24309             if(c == 'bottom'){
24310                 (function() {
24311                  //  
24312                 }).defer(200);
24313                  _this.picker().alignTo(_this.inputEl(),   "tr-br", [0, 10], false);
24314                 //_this.picker().setTop(_this.inputEl().getHeight());
24315                 return;
24316             }
24317             if(c == 'top'){
24318                  _this.picker().alignTo(_this.inputEl(),   "br-tr", [0, 10], false);
24319                 
24320                 //_this.picker().setTop(0 - _this.picker().getHeight());
24321                 return;
24322             }
24323             /*
24324             if(c == 'left'){
24325                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
24326                 return;
24327             }
24328             if(c == 'right'){
24329                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
24330                 return;
24331             }
24332             */
24333         });
24334         
24335     },
24336   
24337     onFocus : function()
24338     {
24339         Roo.bootstrap.form.TimeField.superclass.onFocus.call(this);
24340         this.show();
24341     },
24342     
24343     onBlur : function()
24344     {
24345         Roo.bootstrap.form.TimeField.superclass.onBlur.call(this);
24346         this.hide();
24347     },
24348     
24349     show : function()
24350     {
24351         this.picker().show();
24352         this.pop.show();
24353         this.update();
24354         this.place();
24355         
24356         this.fireEvent('show', this, this.date);
24357     },
24358     
24359     hide : function()
24360     {
24361         this.picker().hide();
24362         this.pop.hide();
24363         
24364         this.fireEvent('hide', this, this.date);
24365     },
24366     
24367     setTime : function()
24368     {
24369         this.hide();
24370         this.setValue(this.time.format(this.format));
24371         
24372         this.fireEvent('select', this, this.date);
24373         
24374         
24375     },
24376     
24377     onMousedown: function(e){
24378         e.stopPropagation();
24379         e.preventDefault();
24380     },
24381     
24382     onIncrementHours: function()
24383     {
24384         Roo.log('onIncrementHours');
24385         this.time = this.time.add(Date.HOUR, 1);
24386         this.update();
24387         
24388     },
24389     
24390     onDecrementHours: function()
24391     {
24392         Roo.log('onDecrementHours');
24393         this.time = this.time.add(Date.HOUR, -1);
24394         this.update();
24395     },
24396     
24397     onIncrementMinutes: function()
24398     {
24399         Roo.log('onIncrementMinutes');
24400         this.time = this.time.add(Date.MINUTE, this.minuteStep);
24401         this.update();
24402     },
24403     
24404     onDecrementMinutes: function()
24405     {
24406         Roo.log('onDecrementMinutes');
24407         this.time = this.time.add(Date.MINUTE, -1 * this.minuteStep);
24408         this.update();
24409     },
24410     
24411     onTogglePeriod: function()
24412     {
24413         Roo.log('onTogglePeriod');
24414         this.time = this.time.add(Date.HOUR, 12);
24415         this.update();
24416     }
24417     
24418    
24419 });
24420  
24421
24422 Roo.apply(Roo.bootstrap.form.TimeField,  {
24423   
24424     template : {
24425         tag: 'div',
24426         cls: 'datepicker dropdown-menu',
24427         cn: [
24428             {
24429                 tag: 'div',
24430                 cls: 'datepicker-time',
24431                 cn: [
24432                 {
24433                     tag: 'table',
24434                     cls: 'table-condensed',
24435                     cn:[
24436                         {
24437                             tag: 'tbody',
24438                             cn: [
24439                                 {
24440                                     tag: 'tr',
24441                                     cn: [
24442                                     {
24443                                         tag: 'td',
24444                                         colspan: '7'
24445                                     }
24446                                     ]
24447                                 }
24448                             ]
24449                         },
24450                         {
24451                             tag: 'tfoot',
24452                             cn: [
24453                                 {
24454                                     tag: 'tr',
24455                                     cn: [
24456                                     {
24457                                         tag: 'th',
24458                                         colspan: '7',
24459                                         cls: '',
24460                                         cn: [
24461                                             {
24462                                                 tag: 'button',
24463                                                 cls: 'btn btn-info ok',
24464                                                 html: 'OK'
24465                                             }
24466                                         ]
24467                                     }
24468                     
24469                                     ]
24470                                 }
24471                             ]
24472                         }
24473                     ]
24474                 }
24475                 ]
24476             }
24477         ]
24478     }
24479 });
24480
24481  
24482
24483  /*
24484  * - LGPL
24485  *
24486  * MonthField
24487  * 
24488  */
24489
24490 /**
24491  * @class Roo.bootstrap.form.MonthField
24492  * @extends Roo.bootstrap.form.Input
24493  * Bootstrap MonthField class
24494  * 
24495  * @cfg {String} language default en
24496  * 
24497  * @constructor
24498  * Create a new MonthField
24499  * @param {Object} config The config object
24500  */
24501
24502 Roo.bootstrap.form.MonthField = function(config){
24503     Roo.bootstrap.form.MonthField.superclass.constructor.call(this, config);
24504     
24505     this.addEvents({
24506         /**
24507          * @event show
24508          * Fires when this field show.
24509          * @param {Roo.bootstrap.form.MonthField} this
24510          * @param {Mixed} date The date value
24511          */
24512         show : true,
24513         /**
24514          * @event show
24515          * Fires when this field hide.
24516          * @param {Roo.bootstrap.form.MonthField} this
24517          * @param {Mixed} date The date value
24518          */
24519         hide : true,
24520         /**
24521          * @event select
24522          * Fires when select a date.
24523          * @param {Roo.bootstrap.form.MonthField} this
24524          * @param {String} oldvalue The old value
24525          * @param {String} newvalue The new value
24526          */
24527         select : true
24528     });
24529 };
24530
24531 Roo.extend(Roo.bootstrap.form.MonthField, Roo.bootstrap.form.Input,  {
24532     
24533     onRender: function(ct, position)
24534     {
24535         
24536         Roo.bootstrap.form.MonthField.superclass.onRender.call(this, ct, position);
24537         
24538         this.language = this.language || 'en';
24539         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : this.language.split('-')[0];
24540         this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : "en";
24541         
24542         this.isRTL = Roo.bootstrap.form.MonthField.dates[this.language].rtl || false;
24543         this.isInline = false;
24544         this.isInput = true;
24545         this.component = this.el.select('.add-on', true).first() || false;
24546         this.component = (this.component && this.component.length === 0) ? false : this.component;
24547         this.hasInput = this.component && this.inputEL().length;
24548         
24549         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.MonthField.template);
24550         
24551         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
24552         
24553         this.picker().on('mousedown', this.onMousedown, this);
24554         this.picker().on('click', this.onClick, this);
24555         
24556         this.picker().addClass('datepicker-dropdown');
24557         
24558         Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
24559             v.setStyle('width', '189px');
24560         });
24561         
24562         this.fillMonths();
24563         
24564         this.update();
24565         
24566         if(this.isInline) {
24567             this.show();
24568         }
24569         
24570     },
24571     
24572     setValue: function(v, suppressEvent)
24573     {   
24574         var o = this.getValue();
24575         
24576         Roo.bootstrap.form.MonthField.superclass.setValue.call(this, v);
24577         
24578         this.update();
24579
24580         if(suppressEvent !== true){
24581             this.fireEvent('select', this, o, v);
24582         }
24583         
24584     },
24585     
24586     getValue: function()
24587     {
24588         return this.value;
24589     },
24590     
24591     onClick: function(e) 
24592     {
24593         e.stopPropagation();
24594         e.preventDefault();
24595         
24596         var target = e.getTarget();
24597         
24598         if(target.nodeName.toLowerCase() === 'i'){
24599             target = Roo.get(target).dom.parentNode;
24600         }
24601         
24602         var nodeName = target.nodeName;
24603         var className = target.className;
24604         var html = target.innerHTML;
24605         
24606         if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
24607             return;
24608         }
24609         
24610         this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].monthsShort.indexOf(html);
24611         
24612         this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24613         
24614         this.hide();
24615                         
24616     },
24617     
24618     picker : function()
24619     {
24620         return this.pickerEl;
24621     },
24622     
24623     fillMonths: function()
24624     {    
24625         var i = 0;
24626         var months = this.picker().select('>.datepicker-months td', true).first();
24627         
24628         months.dom.innerHTML = '';
24629         
24630         while (i < 12) {
24631             var month = {
24632                 tag: 'span',
24633                 cls: 'month',
24634                 html: Roo.bootstrap.form.MonthField.dates[this.language].monthsShort[i++]
24635             };
24636             
24637             months.createChild(month);
24638         }
24639         
24640     },
24641     
24642     update: function()
24643     {
24644         var _this = this;
24645         
24646         if(typeof(this.vIndex) == 'undefined' && this.value.length){
24647             this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].months.indexOf(this.value);
24648         }
24649         
24650         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
24651             e.removeClass('active');
24652             
24653             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
24654                 e.addClass('active');
24655             }
24656         })
24657     },
24658     
24659     place: function()
24660     {
24661         if(this.isInline) {
24662             return;
24663         }
24664         
24665         this.picker().removeClass(['bottom', 'top']);
24666         
24667         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
24668             /*
24669              * place to the top of element!
24670              *
24671              */
24672             
24673             this.picker().addClass('top');
24674             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
24675             
24676             return;
24677         }
24678         
24679         this.picker().addClass('bottom');
24680         
24681         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
24682     },
24683     
24684     onFocus : function()
24685     {
24686         Roo.bootstrap.form.MonthField.superclass.onFocus.call(this);
24687         this.show();
24688     },
24689     
24690     onBlur : function()
24691     {
24692         Roo.bootstrap.form.MonthField.superclass.onBlur.call(this);
24693         
24694         var d = this.inputEl().getValue();
24695         
24696         this.setValue(d);
24697                 
24698         this.hide();
24699     },
24700     
24701     show : function()
24702     {
24703         this.picker().show();
24704         this.picker().select('>.datepicker-months', true).first().show();
24705         this.update();
24706         this.place();
24707         
24708         this.fireEvent('show', this, this.date);
24709     },
24710     
24711     hide : function()
24712     {
24713         if(this.isInline) {
24714             return;
24715         }
24716         this.picker().hide();
24717         this.fireEvent('hide', this, this.date);
24718         
24719     },
24720     
24721     onMousedown: function(e)
24722     {
24723         e.stopPropagation();
24724         e.preventDefault();
24725     },
24726     
24727     keyup: function(e)
24728     {
24729         Roo.bootstrap.form.MonthField.superclass.keyup.call(this);
24730         this.update();
24731     },
24732
24733     fireKey: function(e)
24734     {
24735         if (!this.picker().isVisible()){
24736             if (e.keyCode == 27)   {// allow escape to hide and re-show picker
24737                 this.show();
24738             }
24739             return;
24740         }
24741         
24742         var dir;
24743         
24744         switch(e.keyCode){
24745             case 27: // escape
24746                 this.hide();
24747                 e.preventDefault();
24748                 break;
24749             case 37: // left
24750             case 39: // right
24751                 dir = e.keyCode == 37 ? -1 : 1;
24752                 
24753                 this.vIndex = this.vIndex + dir;
24754                 
24755                 if(this.vIndex < 0){
24756                     this.vIndex = 0;
24757                 }
24758                 
24759                 if(this.vIndex > 11){
24760                     this.vIndex = 11;
24761                 }
24762                 
24763                 if(isNaN(this.vIndex)){
24764                     this.vIndex = 0;
24765                 }
24766                 
24767                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24768                 
24769                 break;
24770             case 38: // up
24771             case 40: // down
24772                 
24773                 dir = e.keyCode == 38 ? -1 : 1;
24774                 
24775                 this.vIndex = this.vIndex + dir * 4;
24776                 
24777                 if(this.vIndex < 0){
24778                     this.vIndex = 0;
24779                 }
24780                 
24781                 if(this.vIndex > 11){
24782                     this.vIndex = 11;
24783                 }
24784                 
24785                 if(isNaN(this.vIndex)){
24786                     this.vIndex = 0;
24787                 }
24788                 
24789                 this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24790                 break;
24791                 
24792             case 13: // enter
24793                 
24794                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24795                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24796                 }
24797                 
24798                 this.hide();
24799                 e.preventDefault();
24800                 break;
24801             case 9: // tab
24802                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
24803                     this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
24804                 }
24805                 this.hide();
24806                 break;
24807             case 16: // shift
24808             case 17: // ctrl
24809             case 18: // alt
24810                 break;
24811             default :
24812                 this.hide();
24813                 
24814         }
24815     },
24816     
24817     remove: function() 
24818     {
24819         this.picker().remove();
24820     }
24821    
24822 });
24823
24824 Roo.apply(Roo.bootstrap.form.MonthField,  {
24825     
24826     content : {
24827         tag: 'tbody',
24828         cn: [
24829         {
24830             tag: 'tr',
24831             cn: [
24832             {
24833                 tag: 'td',
24834                 colspan: '7'
24835             }
24836             ]
24837         }
24838         ]
24839     },
24840     
24841     dates:{
24842         en: {
24843             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
24844             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
24845         }
24846     }
24847 });
24848
24849 Roo.apply(Roo.bootstrap.form.MonthField,  {
24850   
24851     template : {
24852         tag: 'div',
24853         cls: 'datepicker dropdown-menu roo-dynamic',
24854         cn: [
24855             {
24856                 tag: 'div',
24857                 cls: 'datepicker-months',
24858                 cn: [
24859                 {
24860                     tag: 'table',
24861                     cls: 'table-condensed',
24862                     cn:[
24863                         Roo.bootstrap.form.DateField.content
24864                     ]
24865                 }
24866                 ]
24867             }
24868         ]
24869     }
24870 });
24871
24872  
24873
24874  
24875  /*
24876  * - LGPL
24877  *
24878  * CheckBox
24879  * 
24880  */
24881
24882 /**
24883  * @class Roo.bootstrap.form.CheckBox
24884  * @extends Roo.bootstrap.form.Input
24885  * Bootstrap CheckBox class
24886  * 
24887  * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
24888  * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
24889  * @cfg {String} boxLabel The text that appears beside the checkbox
24890  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
24891  * @cfg {Boolean} checked initnal the element
24892  * @cfg {Boolean} inline inline the element (default false)
24893  * @cfg {String} groupId the checkbox group id // normal just use for checkbox
24894  * @cfg {String} tooltip label tooltip
24895  * 
24896  * @constructor
24897  * Create a new CheckBox
24898  * @param {Object} config The config object
24899  */
24900
24901 Roo.bootstrap.form.CheckBox = function(config){
24902     Roo.bootstrap.form.CheckBox.superclass.constructor.call(this, config);
24903    
24904     this.addEvents({
24905         /**
24906         * @event check
24907         * Fires when the element is checked or unchecked.
24908         * @param {Roo.bootstrap.form.CheckBox} this This input
24909         * @param {Boolean} checked The new checked value
24910         */
24911        check : true,
24912        /**
24913         * @event click
24914         * Fires when the element is click.
24915         * @param {Roo.bootstrap.form.CheckBox} this This input
24916         */
24917        click : true
24918     });
24919     
24920 };
24921
24922 Roo.extend(Roo.bootstrap.form.CheckBox, Roo.bootstrap.form.Input,  {
24923   
24924     inputType: 'checkbox',
24925     inputValue: 1,
24926     valueOff: 0,
24927     boxLabel: false,
24928     checked: false,
24929     weight : false,
24930     inline: false,
24931     tooltip : '',
24932     
24933     // checkbox success does not make any sense really.. 
24934     invalidClass : "",
24935     validClass : "",
24936     
24937     
24938     getAutoCreate : function()
24939     {
24940         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
24941         
24942         var id = Roo.id();
24943         
24944         var cfg = {};
24945         
24946         cfg.cls = 'form-group form-check ' + this.inputType; //input-group
24947         
24948         if(this.inline){
24949             cfg.cls += ' ' + this.inputType + '-inline  form-check-inline';
24950         }
24951         
24952         var input =  {
24953             tag: 'input',
24954             id : id,
24955             type : this.inputType,
24956             value : this.inputValue,
24957             cls : 'roo-' + this.inputType, //'form-box',
24958             placeholder : this.placeholder || ''
24959             
24960         };
24961         
24962         if(this.inputType != 'radio'){
24963             var hidden =  {
24964                 tag: 'input',
24965                 type : 'hidden',
24966                 cls : 'roo-hidden-value',
24967                 value : this.checked ? this.inputValue : this.valueOff
24968             };
24969         }
24970         
24971             
24972         if (this.weight) { // Validity check?
24973             cfg.cls += " " + this.inputType + "-" + this.weight;
24974         }
24975         
24976         if (this.disabled) {
24977             input.disabled=true;
24978         }
24979         
24980         if(this.checked){
24981             input.checked = this.checked;
24982         }
24983         
24984         if (this.name) {
24985             
24986             input.name = this.name;
24987             
24988             if(this.inputType != 'radio'){
24989                 hidden.name = this.name;
24990                 input.name = '_hidden_' + this.name;
24991             }
24992         }
24993         
24994         if (this.size) {
24995             input.cls += ' input-' + this.size;
24996         }
24997         
24998         var settings=this;
24999         
25000         ['xs','sm','md','lg'].map(function(size){
25001             if (settings[size]) {
25002                 cfg.cls += ' col-' + size + '-' + settings[size];
25003             }
25004         });
25005         
25006         var inputblock = input;
25007          
25008         if (this.before || this.after) {
25009             
25010             inputblock = {
25011                 cls : 'input-group',
25012                 cn :  [] 
25013             };
25014             
25015             if (this.before) {
25016                 inputblock.cn.push({
25017                     tag :'span',
25018                     cls : 'input-group-addon',
25019                     html : this.before
25020                 });
25021             }
25022             
25023             inputblock.cn.push(input);
25024             
25025             if(this.inputType != 'radio'){
25026                 inputblock.cn.push(hidden);
25027             }
25028             
25029             if (this.after) {
25030                 inputblock.cn.push({
25031                     tag :'span',
25032                     cls : 'input-group-addon',
25033                     html : this.after
25034                 });
25035             }
25036             
25037         }
25038         var boxLabelCfg = false;
25039         
25040         if(this.boxLabel){
25041            
25042             boxLabelCfg = {
25043                 tag: 'label',
25044                 //'for': id, // box label is handled by onclick - so no for...
25045                 cls: 'box-label',
25046                 html: this.boxLabel
25047             };
25048             if(this.tooltip){
25049                 boxLabelCfg.tooltip = this.tooltip;
25050             }
25051              
25052         }
25053         
25054         
25055         if (align ==='left' && this.fieldLabel.length) {
25056 //                Roo.log("left and has label");
25057             cfg.cn = [
25058                 {
25059                     tag: 'label',
25060                     'for' :  id,
25061                     cls : 'control-label',
25062                     html : this.fieldLabel
25063                 },
25064                 {
25065                     cls : "", 
25066                     cn: [
25067                         inputblock
25068                     ]
25069                 }
25070             ];
25071             
25072             if (boxLabelCfg) {
25073                 cfg.cn[1].cn.push(boxLabelCfg);
25074             }
25075             
25076             if(this.labelWidth > 12){
25077                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
25078             }
25079             
25080             if(this.labelWidth < 13 && this.labelmd == 0){
25081                 this.labelmd = this.labelWidth;
25082             }
25083             
25084             if(this.labellg > 0){
25085                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
25086                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
25087             }
25088             
25089             if(this.labelmd > 0){
25090                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
25091                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
25092             }
25093             
25094             if(this.labelsm > 0){
25095                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
25096                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
25097             }
25098             
25099             if(this.labelxs > 0){
25100                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
25101                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
25102             }
25103             
25104         } else if ( this.fieldLabel.length) {
25105 //                Roo.log(" label");
25106                 cfg.cn = [
25107                    
25108                     {
25109                         tag: this.boxLabel ? 'span' : 'label',
25110                         'for': id,
25111                         cls: 'control-label box-input-label',
25112                         //cls : 'input-group-addon',
25113                         html : this.fieldLabel
25114                     },
25115                     
25116                     inputblock
25117                     
25118                 ];
25119                 if (boxLabelCfg) {
25120                     cfg.cn.push(boxLabelCfg);
25121                 }
25122
25123         } else {
25124             
25125 //                Roo.log(" no label && no align");
25126                 cfg.cn = [  inputblock ] ;
25127                 if (boxLabelCfg) {
25128                     cfg.cn.push(boxLabelCfg);
25129                 }
25130
25131                 
25132         }
25133         
25134        
25135         
25136         if(this.inputType != 'radio'){
25137             cfg.cn.push(hidden);
25138         }
25139         
25140         return cfg;
25141         
25142     },
25143     
25144     /**
25145      * return the real input element.
25146      */
25147     inputEl: function ()
25148     {
25149         return this.el.select('input.roo-' + this.inputType,true).first();
25150     },
25151     hiddenEl: function ()
25152     {
25153         return this.el.select('input.roo-hidden-value',true).first();
25154     },
25155     
25156     labelEl: function()
25157     {
25158         return this.el.select('label.control-label',true).first();
25159     },
25160     /* depricated... */
25161     
25162     label: function()
25163     {
25164         return this.labelEl();
25165     },
25166     
25167     boxLabelEl: function()
25168     {
25169         return this.el.select('label.box-label',true).first();
25170     },
25171     
25172     initEvents : function()
25173     {
25174 //        Roo.bootstrap.form.CheckBox.superclass.initEvents.call(this);
25175         
25176         this.inputEl().on('click', this.onClick,  this);
25177         
25178         if (this.boxLabel) { 
25179             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
25180         }
25181         
25182         this.startValue = this.getValue();
25183         
25184         if(this.groupId){
25185             Roo.bootstrap.form.CheckBox.register(this);
25186         }
25187     },
25188     
25189     onClick : function(e)
25190     {   
25191         if(this.fireEvent('click', this, e) !== false){
25192             this.setChecked(!this.checked);
25193         }
25194         
25195     },
25196     
25197     setChecked : function(state,suppressEvent)
25198     {
25199         this.startValue = this.getValue();
25200
25201         if(this.inputType == 'radio'){
25202             
25203             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25204                 e.dom.checked = false;
25205             });
25206             
25207             this.inputEl().dom.checked = true;
25208             
25209             this.inputEl().dom.value = this.inputValue;
25210             
25211             if(suppressEvent !== true){
25212                 this.fireEvent('check', this, true);
25213             }
25214             
25215             this.validate();
25216             
25217             return;
25218         }
25219         
25220         this.checked = state;
25221         
25222         this.inputEl().dom.checked = state;
25223         
25224         
25225         this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
25226         
25227         if(suppressEvent !== true){
25228             this.fireEvent('check', this, state);
25229         }
25230         
25231         this.validate();
25232     },
25233     
25234     getValue : function()
25235     {
25236         if(this.inputType == 'radio'){
25237             return this.getGroupValue();
25238         }
25239         
25240         return this.hiddenEl().dom.value;
25241         
25242     },
25243     
25244     getGroupValue : function()
25245     {
25246         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
25247             return '';
25248         }
25249         
25250         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
25251     },
25252     
25253     setValue : function(v,suppressEvent)
25254     {
25255         if(this.inputType == 'radio'){
25256             this.setGroupValue(v, suppressEvent);
25257             return;
25258         }
25259         
25260         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
25261         
25262         this.validate();
25263     },
25264     
25265     setGroupValue : function(v, suppressEvent)
25266     {
25267         this.startValue = this.getValue();
25268         
25269         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25270             e.dom.checked = false;
25271             
25272             if(e.dom.value == v){
25273                 e.dom.checked = true;
25274             }
25275         });
25276         
25277         if(suppressEvent !== true){
25278             this.fireEvent('check', this, true);
25279         }
25280
25281         this.validate();
25282         
25283         return;
25284     },
25285     
25286     validate : function()
25287     {
25288         if(this.getVisibilityEl().hasClass('hidden')){
25289             return true;
25290         }
25291         
25292         if(
25293                 this.disabled || 
25294                 (this.inputType == 'radio' && this.validateRadio()) ||
25295                 (this.inputType == 'checkbox' && this.validateCheckbox())
25296         ){
25297             this.markValid();
25298             return true;
25299         }
25300         
25301         this.markInvalid();
25302         return false;
25303     },
25304     
25305     validateRadio : function()
25306     {
25307         if(this.getVisibilityEl().hasClass('hidden')){
25308             return true;
25309         }
25310         
25311         if(this.allowBlank){
25312             return true;
25313         }
25314         
25315         var valid = false;
25316         
25317         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25318             if(!e.dom.checked){
25319                 return;
25320             }
25321             
25322             valid = true;
25323             
25324             return false;
25325         });
25326         
25327         return valid;
25328     },
25329     
25330     validateCheckbox : function()
25331     {
25332         if(!this.groupId){
25333             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
25334             //return (this.getValue() == this.inputValue) ? true : false;
25335         }
25336         
25337         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25338         
25339         if(!group){
25340             return false;
25341         }
25342         
25343         var r = false;
25344         
25345         for(var i in group){
25346             if(group[i].el.isVisible(true)){
25347                 r = false;
25348                 break;
25349             }
25350             
25351             r = true;
25352         }
25353         
25354         for(var i in group){
25355             if(r){
25356                 break;
25357             }
25358             
25359             r = (group[i].getValue() == group[i].inputValue) ? true : false;
25360         }
25361         
25362         return r;
25363     },
25364     
25365     /**
25366      * Mark this field as valid
25367      */
25368     markValid : function()
25369     {
25370         var _this = this;
25371         
25372         this.fireEvent('valid', this);
25373         
25374         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25375         
25376         if(this.groupId){
25377             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25378         }
25379         
25380         if(label){
25381             label.markValid();
25382         }
25383
25384         if(this.inputType == 'radio'){
25385             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25386                 var fg = e.findParent('.form-group', false, true);
25387                 if (Roo.bootstrap.version == 3) {
25388                     fg.removeClass([_this.invalidClass, _this.validClass]);
25389                     fg.addClass(_this.validClass);
25390                 } else {
25391                     fg.removeClass(['is-valid', 'is-invalid']);
25392                     fg.addClass('is-valid');
25393                 }
25394             });
25395             
25396             return;
25397         }
25398
25399         if(!this.groupId){
25400             var fg = this.el.findParent('.form-group', false, true);
25401             if (Roo.bootstrap.version == 3) {
25402                 fg.removeClass([this.invalidClass, this.validClass]);
25403                 fg.addClass(this.validClass);
25404             } else {
25405                 fg.removeClass(['is-valid', 'is-invalid']);
25406                 fg.addClass('is-valid');
25407             }
25408             return;
25409         }
25410         
25411         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25412         
25413         if(!group){
25414             return;
25415         }
25416         
25417         for(var i in group){
25418             var fg = group[i].el.findParent('.form-group', false, true);
25419             if (Roo.bootstrap.version == 3) {
25420                 fg.removeClass([this.invalidClass, this.validClass]);
25421                 fg.addClass(this.validClass);
25422             } else {
25423                 fg.removeClass(['is-valid', 'is-invalid']);
25424                 fg.addClass('is-valid');
25425             }
25426         }
25427     },
25428     
25429      /**
25430      * Mark this field as invalid
25431      * @param {String} msg The validation message
25432      */
25433     markInvalid : function(msg)
25434     {
25435         if(this.allowBlank){
25436             return;
25437         }
25438         
25439         var _this = this;
25440         
25441         this.fireEvent('invalid', this, msg);
25442         
25443         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25444         
25445         if(this.groupId){
25446             label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
25447         }
25448         
25449         if(label){
25450             label.markInvalid();
25451         }
25452             
25453         if(this.inputType == 'radio'){
25454             
25455             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25456                 var fg = e.findParent('.form-group', false, true);
25457                 if (Roo.bootstrap.version == 3) {
25458                     fg.removeClass([_this.invalidClass, _this.validClass]);
25459                     fg.addClass(_this.invalidClass);
25460                 } else {
25461                     fg.removeClass(['is-invalid', 'is-valid']);
25462                     fg.addClass('is-invalid');
25463                 }
25464             });
25465             
25466             return;
25467         }
25468         
25469         if(!this.groupId){
25470             var fg = this.el.findParent('.form-group', false, true);
25471             if (Roo.bootstrap.version == 3) {
25472                 fg.removeClass([_this.invalidClass, _this.validClass]);
25473                 fg.addClass(_this.invalidClass);
25474             } else {
25475                 fg.removeClass(['is-invalid', 'is-valid']);
25476                 fg.addClass('is-invalid');
25477             }
25478             return;
25479         }
25480         
25481         var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
25482         
25483         if(!group){
25484             return;
25485         }
25486         
25487         for(var i in group){
25488             var fg = group[i].el.findParent('.form-group', false, true);
25489             if (Roo.bootstrap.version == 3) {
25490                 fg.removeClass([_this.invalidClass, _this.validClass]);
25491                 fg.addClass(_this.invalidClass);
25492             } else {
25493                 fg.removeClass(['is-invalid', 'is-valid']);
25494                 fg.addClass('is-invalid');
25495             }
25496         }
25497         
25498     },
25499     
25500     clearInvalid : function()
25501     {
25502         Roo.bootstrap.form.Input.prototype.clearInvalid.call(this);
25503         
25504         // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
25505         
25506         var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
25507         
25508         if (label && label.iconEl) {
25509             label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
25510             label.iconEl.removeClass(['is-invalid', 'is-valid']);
25511         }
25512     },
25513     
25514     disable : function()
25515     {
25516         if(this.inputType != 'radio'){
25517             Roo.bootstrap.form.CheckBox.superclass.disable.call(this);
25518             return;
25519         }
25520         
25521         var _this = this;
25522         
25523         if(this.rendered){
25524             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25525                 _this.getActionEl().addClass(this.disabledClass);
25526                 e.dom.disabled = true;
25527             });
25528         }
25529         
25530         this.disabled = true;
25531         this.fireEvent("disable", this);
25532         return this;
25533     },
25534
25535     enable : function()
25536     {
25537         if(this.inputType != 'radio'){
25538             Roo.bootstrap.form.CheckBox.superclass.enable.call(this);
25539             return;
25540         }
25541         
25542         var _this = this;
25543         
25544         if(this.rendered){
25545             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
25546                 _this.getActionEl().removeClass(this.disabledClass);
25547                 e.dom.disabled = false;
25548             });
25549         }
25550         
25551         this.disabled = false;
25552         this.fireEvent("enable", this);
25553         return this;
25554     },
25555     
25556     setBoxLabel : function(v)
25557     {
25558         this.boxLabel = v;
25559         
25560         if(this.rendered){
25561             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25562         }
25563     }
25564
25565 });
25566
25567 Roo.apply(Roo.bootstrap.form.CheckBox, {
25568     
25569     groups: {},
25570     
25571      /**
25572     * register a CheckBox Group
25573     * @param {Roo.bootstrap.form.CheckBox} the CheckBox to add
25574     */
25575     register : function(checkbox)
25576     {
25577         if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
25578             this.groups[checkbox.groupId] = {};
25579         }
25580         
25581         if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
25582             return;
25583         }
25584         
25585         this.groups[checkbox.groupId][checkbox.name] = checkbox;
25586         
25587     },
25588     /**
25589     * fetch a CheckBox Group based on the group ID
25590     * @param {string} the group ID
25591     * @returns {Roo.bootstrap.form.CheckBox} the CheckBox group
25592     */
25593     get: function(groupId) {
25594         if (typeof(this.groups[groupId]) == 'undefined') {
25595             return false;
25596         }
25597         
25598         return this.groups[groupId] ;
25599     }
25600     
25601     
25602 });
25603 /*
25604  * - LGPL
25605  *
25606  * RadioItem
25607  * 
25608  */
25609
25610 /**
25611  * @class Roo.bootstrap.form.Radio
25612  * @extends Roo.bootstrap.Component
25613  * Bootstrap Radio class
25614  * @cfg {String} boxLabel - the label associated
25615  * @cfg {String} value - the value of radio
25616  * 
25617  * @constructor
25618  * Create a new Radio
25619  * @param {Object} config The config object
25620  */
25621 Roo.bootstrap.form.Radio = function(config){
25622     Roo.bootstrap.form.Radio.superclass.constructor.call(this, config);
25623     
25624 };
25625
25626 Roo.extend(Roo.bootstrap.form.Radio, Roo.bootstrap.Component, {
25627     
25628     boxLabel : '',
25629     
25630     value : '',
25631     
25632     getAutoCreate : function()
25633     {
25634         var cfg = {
25635             tag : 'div',
25636             cls : 'form-group radio',
25637             cn : [
25638                 {
25639                     tag : 'label',
25640                     cls : 'box-label',
25641                     html : this.boxLabel
25642                 }
25643             ]
25644         };
25645         
25646         return cfg;
25647     },
25648     
25649     initEvents : function() 
25650     {
25651         this.parent().register(this);
25652         
25653         this.el.on('click', this.onClick, this);
25654         
25655     },
25656     
25657     onClick : function(e)
25658     {
25659         if(this.parent().fireEvent('click', this.parent(), this, e) !== false){
25660             this.setChecked(true);
25661         }
25662     },
25663     
25664     setChecked : function(state, suppressEvent)
25665     {
25666         this.parent().setValue(this.value, suppressEvent);
25667         
25668     },
25669     
25670     setBoxLabel : function(v)
25671     {
25672         this.boxLabel = v;
25673         
25674         if(this.rendered){
25675             this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
25676         }
25677     }
25678     
25679 });
25680  
25681
25682  /*
25683  * - LGPL
25684  *
25685  * Input
25686  * 
25687  */
25688
25689 /**
25690  * @class Roo.bootstrap.form.SecurePass
25691  * @extends Roo.bootstrap.form.Input
25692  * Bootstrap SecurePass class
25693  *
25694  * 
25695  * @constructor
25696  * Create a new SecurePass
25697  * @param {Object} config The config object
25698  */
25699  
25700 Roo.bootstrap.form.SecurePass = function (config) {
25701     // these go here, so the translation tool can replace them..
25702     this.errors = {
25703         PwdEmpty: "Please type a password, and then retype it to confirm.",
25704         PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25705         PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25706         PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25707         IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25708         FNInPwd: "Your password can't contain your first name. Please type a different password.",
25709         LNInPwd: "Your password can't contain your last name. Please type a different password.",
25710         TooWeak: "Your password is Too Weak."
25711     },
25712     this.meterLabel = "Password strength:";
25713     this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
25714     this.meterClass = [
25715         "roo-password-meter-tooweak", 
25716         "roo-password-meter-weak", 
25717         "roo-password-meter-medium", 
25718         "roo-password-meter-strong", 
25719         "roo-password-meter-grey"
25720     ];
25721     
25722     this.errors = {};
25723     
25724     Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config);
25725 }
25726
25727 Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, {
25728     /**
25729      * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
25730      * {
25731      *  PwdEmpty: "Please type a password, and then retype it to confirm.",
25732      *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
25733      *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
25734      *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
25735      *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
25736      *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
25737      *  LNInPwd: "Your password can't contain your last name. Please type a different password."
25738      * })
25739      */
25740     // private
25741     
25742     meterWidth: 300,
25743     errorMsg :'',    
25744     errors: false,
25745     imageRoot: '/',
25746     /**
25747      * @cfg {String/Object} Label for the strength meter (defaults to
25748      * 'Password strength:')
25749      */
25750     // private
25751     meterLabel: '',
25752     /**
25753      * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
25754      * ['Weak', 'Medium', 'Strong'])
25755      */
25756     // private    
25757     pwdStrengths: false,    
25758     // private
25759     strength: 0,
25760     // private
25761     _lastPwd: null,
25762     // private
25763     kCapitalLetter: 0,
25764     kSmallLetter: 1,
25765     kDigit: 2,
25766     kPunctuation: 3,
25767     
25768     insecure: false,
25769     // private
25770     initEvents: function ()
25771     {
25772         Roo.bootstrap.form.SecurePass.superclass.initEvents.call(this);
25773
25774         if (this.el.is('input[type=password]') && Roo.isSafari) {
25775             this.el.on('keydown', this.SafariOnKeyDown, this);
25776         }
25777
25778         this.el.on('keyup', this.checkStrength, this, {buffer: 50});
25779     },
25780     // private
25781     onRender: function (ct, position)
25782     {
25783         Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position);
25784         this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
25785         this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
25786
25787         this.trigger.createChild({
25788                    cn: [
25789                     {
25790                     //id: 'PwdMeter',
25791                     tag: 'div',
25792                     cls: 'roo-password-meter-grey col-xs-12',
25793                     style: {
25794                         //width: 0,
25795                         //width: this.meterWidth + 'px'                                                
25796                         }
25797                     },
25798                     {                            
25799                          cls: 'roo-password-meter-text'                          
25800                     }
25801                 ]            
25802         });
25803
25804          
25805         if (this.hideTrigger) {
25806             this.trigger.setDisplayed(false);
25807         }
25808         this.setSize(this.width || '', this.height || '');
25809     },
25810     // private
25811     onDestroy: function ()
25812     {
25813         if (this.trigger) {
25814             this.trigger.removeAllListeners();
25815             this.trigger.remove();
25816         }
25817         if (this.wrap) {
25818             this.wrap.remove();
25819         }
25820         Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
25821     },
25822     // private
25823     checkStrength: function ()
25824     {
25825         var pwd = this.inputEl().getValue();
25826         if (pwd == this._lastPwd) {
25827             return;
25828         }
25829
25830         var strength;
25831         if (this.ClientSideStrongPassword(pwd)) {
25832             strength = 3;
25833         } else if (this.ClientSideMediumPassword(pwd)) {
25834             strength = 2;
25835         } else if (this.ClientSideWeakPassword(pwd)) {
25836             strength = 1;
25837         } else {
25838             strength = 0;
25839         }
25840         
25841         Roo.log('strength1: ' + strength);
25842         
25843         //var pm = this.trigger.child('div/div/div').dom;
25844         var pm = this.trigger.child('div/div');
25845         pm.removeClass(this.meterClass);
25846         pm.addClass(this.meterClass[strength]);
25847                 
25848         
25849         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25850                 
25851         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25852         
25853         this._lastPwd = pwd;
25854     },
25855     reset: function ()
25856     {
25857         Roo.bootstrap.form.SecurePass.superclass.reset.call(this);
25858         
25859         this._lastPwd = '';
25860         
25861         var pm = this.trigger.child('div/div');
25862         pm.removeClass(this.meterClass);
25863         pm.addClass('roo-password-meter-grey');        
25864         
25865         
25866         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25867         
25868         pt.innerHTML = '';
25869         this.inputEl().dom.type='password';
25870     },
25871     // private
25872     validateValue: function (value)
25873     {
25874         if (!Roo.bootstrap.form.SecurePass.superclass.validateValue.call(this, value)) {
25875             return false;
25876         }
25877         if (value.length == 0) {
25878             if (this.allowBlank) {
25879                 this.clearInvalid();
25880                 return true;
25881             }
25882
25883             this.markInvalid(this.errors.PwdEmpty);
25884             this.errorMsg = this.errors.PwdEmpty;
25885             return false;
25886         }
25887         
25888         if(this.insecure){
25889             return true;
25890         }
25891         
25892         if (!value.match(/[\x21-\x7e]+/)) {
25893             this.markInvalid(this.errors.PwdBadChar);
25894             this.errorMsg = this.errors.PwdBadChar;
25895             return false;
25896         }
25897         if (value.length < 6) {
25898             this.markInvalid(this.errors.PwdShort);
25899             this.errorMsg = this.errors.PwdShort;
25900             return false;
25901         }
25902         if (value.length > 16) {
25903             this.markInvalid(this.errors.PwdLong);
25904             this.errorMsg = this.errors.PwdLong;
25905             return false;
25906         }
25907         var strength;
25908         if (this.ClientSideStrongPassword(value)) {
25909             strength = 3;
25910         } else if (this.ClientSideMediumPassword(value)) {
25911             strength = 2;
25912         } else if (this.ClientSideWeakPassword(value)) {
25913             strength = 1;
25914         } else {
25915             strength = 0;
25916         }
25917
25918         
25919         if (strength < 2) {
25920             //this.markInvalid(this.errors.TooWeak);
25921             this.errorMsg = this.errors.TooWeak;
25922             //return false;
25923         }
25924         
25925         
25926         console.log('strength2: ' + strength);
25927         
25928         //var pm = this.trigger.child('div/div/div').dom;
25929         
25930         var pm = this.trigger.child('div/div');
25931         pm.removeClass(this.meterClass);
25932         pm.addClass(this.meterClass[strength]);
25933                 
25934         var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
25935                 
25936         pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
25937         
25938         this.errorMsg = ''; 
25939         return true;
25940     },
25941     // private
25942     CharacterSetChecks: function (type)
25943     {
25944         this.type = type;
25945         this.fResult = false;
25946     },
25947     // private
25948     isctype: function (character, type)
25949     {
25950         switch (type) {  
25951             case this.kCapitalLetter:
25952                 if (character >= 'A' && character <= 'Z') {
25953                     return true;
25954                 }
25955                 break;
25956             
25957             case this.kSmallLetter:
25958                 if (character >= 'a' && character <= 'z') {
25959                     return true;
25960                 }
25961                 break;
25962             
25963             case this.kDigit:
25964                 if (character >= '0' && character <= '9') {
25965                     return true;
25966                 }
25967                 break;
25968             
25969             case this.kPunctuation:
25970                 if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
25971                     return true;
25972                 }
25973                 break;
25974             
25975             default:
25976                 return false;
25977         }
25978
25979     },
25980     // private
25981     IsLongEnough: function (pwd, size)
25982     {
25983         return !(pwd == null || isNaN(size) || pwd.length < size);
25984     },
25985     // private
25986     SpansEnoughCharacterSets: function (word, nb)
25987     {
25988         if (!this.IsLongEnough(word, nb))
25989         {
25990             return false;
25991         }
25992
25993         var characterSetChecks = new Array(
25994             new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
25995             new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation)
25996         );
25997         
25998         for (var index = 0; index < word.length; ++index) {
25999             for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
26000                 if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
26001                     characterSetChecks[nCharSet].fResult = true;
26002                     break;
26003                 }
26004             }
26005         }
26006
26007         var nCharSets = 0;
26008         for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
26009             if (characterSetChecks[nCharSet].fResult) {
26010                 ++nCharSets;
26011             }
26012         }
26013
26014         if (nCharSets < nb) {
26015             return false;
26016         }
26017         return true;
26018     },
26019     // private
26020     ClientSideStrongPassword: function (pwd)
26021     {
26022         return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
26023     },
26024     // private
26025     ClientSideMediumPassword: function (pwd)
26026     {
26027         return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
26028     },
26029     // private
26030     ClientSideWeakPassword: function (pwd)
26031     {
26032         return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
26033     }
26034           
26035 });Roo.rtf = {}; // namespace
26036 Roo.rtf.Hex = function(hex)
26037 {
26038     this.hexstr = hex;
26039 };
26040 Roo.rtf.Paragraph = function(opts)
26041 {
26042     this.content = []; ///??? is that used?
26043 };Roo.rtf.Span = function(opts)
26044 {
26045     this.value = opts.value;
26046 };
26047
26048 Roo.rtf.Group = function(parent)
26049 {
26050     // we dont want to acutally store parent - it will make debug a nightmare..
26051     this.content = [];
26052     this.cn  = [];
26053      
26054        
26055     
26056 };
26057
26058 Roo.rtf.Group.prototype = {
26059     ignorable : false,
26060     content: false,
26061     cn: false,
26062     addContent : function(node) {
26063         // could set styles...
26064         this.content.push(node);
26065     },
26066     addChild : function(cn)
26067     {
26068         this.cn.push(cn);
26069     },
26070     // only for images really...
26071     toDataURL : function()
26072     {
26073         var mimetype = false;
26074         switch(true) {
26075             case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
26076                 mimetype = "image/png";
26077                 break;
26078              case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
26079                 mimetype = "image/jpeg";
26080                 break;
26081             default :
26082                 return 'about:blank'; // ?? error?
26083         }
26084         
26085         
26086         var hexstring = this.content[this.content.length-1].value;
26087         
26088         return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
26089             return String.fromCharCode(parseInt(a, 16));
26090         }).join(""));
26091     }
26092     
26093 };
26094 // this looks like it's normally the {rtf{ .... }}
26095 Roo.rtf.Document = function()
26096 {
26097     // we dont want to acutally store parent - it will make debug a nightmare..
26098     this.rtlch  = [];
26099     this.content = [];
26100     this.cn = [];
26101     
26102 };
26103 Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
26104     addChild : function(cn)
26105     {
26106         this.cn.push(cn);
26107         switch(cn.type) {
26108             case 'rtlch': // most content seems to be inside this??
26109             case 'listtext':
26110             case 'shpinst':
26111                 this.rtlch.push(cn);
26112                 return;
26113             default:
26114                 this[cn.type] = cn;
26115         }
26116         
26117     },
26118     
26119     getElementsByType : function(type)
26120     {
26121         var ret =  [];
26122         this._getElementsByType(type, ret, this.cn, 'rtf');
26123         return ret;
26124     },
26125     _getElementsByType : function (type, ret, search_array, path)
26126     {
26127         search_array.forEach(function(n,i) {
26128             if (n.type == type) {
26129                 n.path = path + '/' + n.type + ':' + i;
26130                 ret.push(n);
26131             }
26132             if (n.cn.length > 0) {
26133                 this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
26134             }
26135         },this);
26136     }
26137     
26138 });
26139  
26140 Roo.rtf.Ctrl = function(opts)
26141 {
26142     this.value = opts.value;
26143     this.param = opts.param;
26144 };
26145 /**
26146  *
26147  *
26148  * based on this https://github.com/iarna/rtf-parser
26149  * it's really only designed to extract pict from pasted RTF 
26150  *
26151  * usage:
26152  *
26153  *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
26154  *  
26155  *
26156  */
26157
26158  
26159
26160
26161
26162 Roo.rtf.Parser = function(text) {
26163     //super({objectMode: true})
26164     this.text = '';
26165     this.parserState = this.parseText;
26166     
26167     // these are for interpeter...
26168     this.doc = {};
26169     ///this.parserState = this.parseTop
26170     this.groupStack = [];
26171     this.hexStore = [];
26172     this.doc = false;
26173     
26174     this.groups = []; // where we put the return.
26175     
26176     for (var ii = 0; ii < text.length; ++ii) {
26177         ++this.cpos;
26178         
26179         if (text[ii] === '\n') {
26180             ++this.row;
26181             this.col = 1;
26182         } else {
26183             ++this.col;
26184         }
26185         this.parserState(text[ii]);
26186     }
26187     
26188     
26189     
26190 };
26191 Roo.rtf.Parser.prototype = {
26192     text : '', // string being parsed..
26193     controlWord : '',
26194     controlWordParam :  '',
26195     hexChar : '',
26196     doc : false,
26197     group: false,
26198     groupStack : false,
26199     hexStore : false,
26200     
26201     
26202     cpos : 0, 
26203     row : 1, // reportin?
26204     col : 1, //
26205
26206      
26207     push : function (el)
26208     {
26209         var m = 'cmd'+ el.type;
26210         if (typeof(this[m]) == 'undefined') {
26211             Roo.log('invalid cmd:' + el.type);
26212             return;
26213         }
26214         this[m](el);
26215         //Roo.log(el);
26216     },
26217     flushHexStore : function()
26218     {
26219         if (this.hexStore.length < 1) {
26220             return;
26221         }
26222         var hexstr = this.hexStore.map(
26223             function(cmd) {
26224                 return cmd.value;
26225         }).join('');
26226         
26227         this.group.addContent( new Roo.rtf.Hex( hexstr ));
26228               
26229             
26230         this.hexStore.splice(0)
26231         
26232     },
26233     
26234     cmdgroupstart : function()
26235     {
26236         this.flushHexStore();
26237         if (this.group) {
26238             this.groupStack.push(this.group);
26239         }
26240          // parent..
26241         if (this.doc === false) {
26242             this.group = this.doc = new Roo.rtf.Document();
26243             return;
26244             
26245         }
26246         this.group = new Roo.rtf.Group(this.group);
26247     },
26248     cmdignorable : function()
26249     {
26250         this.flushHexStore();
26251         this.group.ignorable = true;
26252     },
26253     cmdendparagraph : function()
26254     {
26255         this.flushHexStore();
26256         this.group.addContent(new Roo.rtf.Paragraph());
26257     },
26258     cmdgroupend : function ()
26259     {
26260         this.flushHexStore();
26261         var endingGroup = this.group;
26262         
26263         
26264         this.group = this.groupStack.pop();
26265         if (this.group) {
26266             this.group.addChild(endingGroup);
26267         }
26268         
26269         
26270         
26271         var doc = this.group || this.doc;
26272         //if (endingGroup instanceof FontTable) {
26273         //  doc.fonts = endingGroup.table
26274         //} else if (endingGroup instanceof ColorTable) {
26275         //  doc.colors = endingGroup.table
26276         //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
26277         if (endingGroup.ignorable === false) {
26278             //code
26279             this.groups.push(endingGroup);
26280            // Roo.log( endingGroup );
26281         }
26282             //Roo.each(endingGroup.content, function(item)) {
26283             //    doc.addContent(item);
26284             //}
26285             //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
26286         //}
26287     },
26288     cmdtext : function (cmd)
26289     {
26290         this.flushHexStore();
26291         if (!this.group) { // an RTF fragment, missing the {\rtf1 header
26292             //this.group = this.doc
26293             return;  // we really don't care about stray text...
26294         }
26295         this.group.addContent(new Roo.rtf.Span(cmd));
26296     },
26297     cmdcontrolword : function (cmd)
26298     {
26299         this.flushHexStore();
26300         if (!this.group.type) {
26301             this.group.type = cmd.value;
26302             return;
26303         }
26304         this.group.addContent(new Roo.rtf.Ctrl(cmd));
26305         // we actually don't care about ctrl words...
26306         return ;
26307         /*
26308         var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
26309         if (this[method]) {
26310             this[method](cmd.param)
26311         } else {
26312             if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
26313         }
26314         */
26315     },
26316     cmdhexchar : function(cmd) {
26317         this.hexStore.push(cmd);
26318     },
26319     cmderror : function(cmd) {
26320         throw cmd.value;
26321     },
26322     
26323     /*
26324       _flush (done) {
26325         if (this.text !== '\u0000') this.emitText()
26326         done()
26327       }
26328       */
26329       
26330       
26331     parseText : function(c)
26332     {
26333         if (c === '\\') {
26334             this.parserState = this.parseEscapes;
26335         } else if (c === '{') {
26336             this.emitStartGroup();
26337         } else if (c === '}') {
26338             this.emitEndGroup();
26339         } else if (c === '\x0A' || c === '\x0D') {
26340             // cr/lf are noise chars
26341         } else {
26342             this.text += c;
26343         }
26344     },
26345     
26346     parseEscapes: function (c)
26347     {
26348         if (c === '\\' || c === '{' || c === '}') {
26349             this.text += c;
26350             this.parserState = this.parseText;
26351         } else {
26352             this.parserState = this.parseControlSymbol;
26353             this.parseControlSymbol(c);
26354         }
26355     },
26356     parseControlSymbol: function(c)
26357     {
26358         if (c === '~') {
26359             this.text += '\u00a0'; // nbsp
26360             this.parserState = this.parseText
26361         } else if (c === '-') {
26362              this.text += '\u00ad'; // soft hyphen
26363         } else if (c === '_') {
26364             this.text += '\u2011'; // non-breaking hyphen
26365         } else if (c === '*') {
26366             this.emitIgnorable();
26367             this.parserState = this.parseText;
26368         } else if (c === "'") {
26369             this.parserState = this.parseHexChar;
26370         } else if (c === '|') { // formula cacter
26371             this.emitFormula();
26372             this.parserState = this.parseText;
26373         } else if (c === ':') { // subentry in an index entry
26374             this.emitIndexSubEntry();
26375             this.parserState = this.parseText;
26376         } else if (c === '\x0a') {
26377             this.emitEndParagraph();
26378             this.parserState = this.parseText;
26379         } else if (c === '\x0d') {
26380             this.emitEndParagraph();
26381             this.parserState = this.parseText;
26382         } else {
26383             this.parserState = this.parseControlWord;
26384             this.parseControlWord(c);
26385         }
26386     },
26387     parseHexChar: function (c)
26388     {
26389         if (/^[A-Fa-f0-9]$/.test(c)) {
26390             this.hexChar += c;
26391             if (this.hexChar.length >= 2) {
26392               this.emitHexChar();
26393               this.parserState = this.parseText;
26394             }
26395             return;
26396         }
26397         this.emitError("Invalid character \"" + c + "\" in hex literal.");
26398         this.parserState = this.parseText;
26399         
26400     },
26401     parseControlWord : function(c)
26402     {
26403         if (c === ' ') {
26404             this.emitControlWord();
26405             this.parserState = this.parseText;
26406         } else if (/^[-\d]$/.test(c)) {
26407             this.parserState = this.parseControlWordParam;
26408             this.controlWordParam += c;
26409         } else if (/^[A-Za-z]$/.test(c)) {
26410           this.controlWord += c;
26411         } else {
26412           this.emitControlWord();
26413           this.parserState = this.parseText;
26414           this.parseText(c);
26415         }
26416     },
26417     parseControlWordParam : function (c) {
26418         if (/^\d$/.test(c)) {
26419           this.controlWordParam += c;
26420         } else if (c === ' ') {
26421           this.emitControlWord();
26422           this.parserState = this.parseText;
26423         } else {
26424           this.emitControlWord();
26425           this.parserState = this.parseText;
26426           this.parseText(c);
26427         }
26428     },
26429     
26430     
26431     
26432     
26433     emitText : function () {
26434         if (this.text === '') {
26435             return;
26436         }
26437         this.push({
26438             type: 'text',
26439             value: this.text,
26440             pos: this.cpos,
26441             row: this.row,
26442             col: this.col
26443         });
26444         this.text = ''
26445     },
26446     emitControlWord : function ()
26447     {
26448         this.emitText();
26449         if (this.controlWord === '') {
26450             // do we want to track this - it seems just to cause problems.
26451             //this.emitError('empty control word');
26452         } else {
26453             this.push({
26454                   type: 'controlword',
26455                   value: this.controlWord,
26456                   param: this.controlWordParam !== '' && Number(this.controlWordParam),
26457                   pos: this.cpos,
26458                   row: this.row,
26459                   col: this.col
26460             });
26461         }
26462         this.controlWord = '';
26463         this.controlWordParam = '';
26464     },
26465     emitStartGroup : function ()
26466     {
26467         this.emitText();
26468         this.push({
26469             type: 'groupstart',
26470             pos: this.cpos,
26471             row: this.row,
26472             col: this.col
26473         });
26474     },
26475     emitEndGroup : function ()
26476     {
26477         this.emitText();
26478         this.push({
26479             type: 'groupend',
26480             pos: this.cpos,
26481             row: this.row,
26482             col: this.col
26483         });
26484     },
26485     emitIgnorable : function ()
26486     {
26487         this.emitText();
26488         this.push({
26489             type: 'ignorable',
26490             pos: this.cpos,
26491             row: this.row,
26492             col: this.col
26493         });
26494     },
26495     emitHexChar : function ()
26496     {
26497         this.emitText();
26498         this.push({
26499             type: 'hexchar',
26500             value: this.hexChar,
26501             pos: this.cpos,
26502             row: this.row,
26503             col: this.col
26504         });
26505         this.hexChar = ''
26506     },
26507     emitError : function (message)
26508     {
26509       this.emitText();
26510       this.push({
26511             type: 'error',
26512             value: message,
26513             row: this.row,
26514             col: this.col,
26515             char: this.cpos //,
26516             //stack: new Error().stack
26517         });
26518     },
26519     emitEndParagraph : function () {
26520         this.emitText();
26521         this.push({
26522             type: 'endparagraph',
26523             pos: this.cpos,
26524             row: this.row,
26525             col: this.col
26526         });
26527     }
26528      
26529 } ;
26530 Roo.htmleditor = {};
26531  
26532 /**
26533  * @class Roo.htmleditor.Filter
26534  * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
26535  * @cfg {DomElement} node The node to iterate and filter
26536  * @cfg {boolean|String|Array} tag Tags to replace 
26537  * @constructor
26538  * Create a new Filter.
26539  * @param {Object} config Configuration options
26540  */
26541
26542
26543
26544 Roo.htmleditor.Filter = function(cfg) {
26545     Roo.apply(this.cfg);
26546     // this does not actually call walk as it's really just a abstract class
26547 }
26548
26549
26550 Roo.htmleditor.Filter.prototype = {
26551     
26552     node: false,
26553     
26554     tag: false,
26555
26556     // overrride to do replace comments.
26557     replaceComment : false,
26558     
26559     // overrride to do replace or do stuff with tags..
26560     replaceTag : false,
26561     
26562     walk : function(dom)
26563     {
26564         Roo.each( Array.from(dom.childNodes), function( e ) {
26565             switch(true) {
26566                 
26567                 case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
26568                     this.replaceComment(e);
26569                     return;
26570                 
26571                 case e.nodeType != 1: //not a node.
26572                     return;
26573                 
26574                 case this.tag === true: // everything
26575                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
26576                 case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
26577                 case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
26578                 case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
26579                     if (this.replaceTag && false === this.replaceTag(e)) {
26580                         return;
26581                     }
26582                     if (e.hasChildNodes()) {
26583                         this.walk(e);
26584                     }
26585                     return;
26586                 
26587                 default:    // tags .. that do not match.
26588                     if (e.hasChildNodes()) {
26589                         this.walk(e);
26590                     }
26591             }
26592             
26593         }, this);
26594         
26595     },
26596     
26597     
26598     removeNodeKeepChildren : function( node)
26599     {
26600     
26601         ar = Array.from(node.childNodes);
26602         for (var i = 0; i < ar.length; i++) {
26603          
26604             node.removeChild(ar[i]);
26605             // what if we need to walk these???
26606             node.parentNode.insertBefore(ar[i], node);
26607            
26608         }
26609         node.parentNode.removeChild(node);
26610     }
26611 }; 
26612
26613 /**
26614  * @class Roo.htmleditor.FilterAttributes
26615  * clean attributes and  styles including http:// etc.. in attribute
26616  * @constructor
26617 * Run a new Attribute Filter
26618 * @param {Object} config Configuration options
26619  */
26620 Roo.htmleditor.FilterAttributes = function(cfg)
26621 {
26622     Roo.apply(this, cfg);
26623     this.attrib_black = this.attrib_black || [];
26624     this.attrib_white = this.attrib_white || [];
26625
26626     this.attrib_clean = this.attrib_clean || [];
26627     this.style_white = this.style_white || [];
26628     this.style_black = this.style_black || [];
26629     this.walk(cfg.node);
26630 }
26631
26632 Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
26633 {
26634     tag: true, // all tags
26635     
26636     attrib_black : false, // array
26637     attrib_clean : false,
26638     attrib_white : false,
26639
26640     style_white : false,
26641     style_black : false,
26642      
26643      
26644     replaceTag : function(node)
26645     {
26646         if (!node.attributes || !node.attributes.length) {
26647             return true;
26648         }
26649         
26650         for (var i = node.attributes.length-1; i > -1 ; i--) {
26651             var a = node.attributes[i];
26652             //console.log(a);
26653             if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
26654                 node.removeAttribute(a.name);
26655                 continue;
26656             }
26657             
26658             
26659             
26660             if (a.name.toLowerCase().substr(0,2)=='on')  {
26661                 node.removeAttribute(a.name);
26662                 continue;
26663             }
26664             
26665             
26666             if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
26667                 node.removeAttribute(a.name);
26668                 continue;
26669             }
26670             if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
26671                 this.cleanAttr(node,a.name,a.value); // fixme..
26672                 continue;
26673             }
26674             if (a.name == 'style') {
26675                 this.cleanStyle(node,a.name,a.value);
26676                 continue;
26677             }
26678             /// clean up MS crap..
26679             // tecnically this should be a list of valid class'es..
26680             
26681             
26682             if (a.name == 'class') {
26683                 if (a.value.match(/^Mso/)) {
26684                     node.removeAttribute('class');
26685                 }
26686                 
26687                 if (a.value.match(/^body$/)) {
26688                     node.removeAttribute('class');
26689                 }
26690                 continue;
26691             }
26692             
26693             
26694             // style cleanup!?
26695             // class cleanup?
26696             
26697         }
26698         return true; // clean children
26699     },
26700         
26701     cleanAttr: function(node, n,v)
26702     {
26703         
26704         if (v.match(/^\./) || v.match(/^\//)) {
26705             return;
26706         }
26707         if (v.match(/^(http|https):\/\//)
26708             || v.match(/^mailto:/) 
26709             || v.match(/^ftp:/)
26710             || v.match(/^data:/)
26711             ) {
26712             return;
26713         }
26714         if (v.match(/^#/)) {
26715             return;
26716         }
26717         if (v.match(/^\{/)) { // allow template editing.
26718             return;
26719         }
26720 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
26721         node.removeAttribute(n);
26722         
26723     },
26724     cleanStyle : function(node,  n,v)
26725     {
26726         if (v.match(/expression/)) { //XSS?? should we even bother..
26727             node.removeAttribute(n);
26728             return;
26729         }
26730         
26731         var parts = v.split(/;/);
26732         var clean = [];
26733         
26734         Roo.each(parts, function(p) {
26735             p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
26736             if (!p.length) {
26737                 return true;
26738             }
26739             var l = p.split(':').shift().replace(/\s+/g,'');
26740             l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
26741             
26742             if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
26743                 return true;
26744             }
26745             //Roo.log()
26746             // only allow 'c whitelisted system attributes'
26747             if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
26748                 return true;
26749             }
26750             
26751             
26752             clean.push(p);
26753             return true;
26754         },this);
26755         if (clean.length) { 
26756             node.setAttribute(n, clean.join(';'));
26757         } else {
26758             node.removeAttribute(n);
26759         }
26760         
26761     }
26762         
26763         
26764         
26765     
26766 });/**
26767  * @class Roo.htmleditor.FilterBlack
26768  * remove blacklisted elements.
26769  * @constructor
26770  * Run a new Blacklisted Filter
26771  * @param {Object} config Configuration options
26772  */
26773
26774 Roo.htmleditor.FilterBlack = function(cfg)
26775 {
26776     Roo.apply(this, cfg);
26777     this.walk(cfg.node);
26778 }
26779
26780 Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
26781 {
26782     tag : true, // all elements.
26783    
26784     replaceTag : function(n)
26785     {
26786         n.parentNode.removeChild(n);
26787     }
26788 });
26789 /**
26790  * @class Roo.htmleditor.FilterComment
26791  * remove comments.
26792  * @constructor
26793 * Run a new Comments Filter
26794 * @param {Object} config Configuration options
26795  */
26796 Roo.htmleditor.FilterComment = function(cfg)
26797 {
26798     this.walk(cfg.node);
26799 }
26800
26801 Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
26802 {
26803   
26804     replaceComment : function(n)
26805     {
26806         n.parentNode.removeChild(n);
26807     }
26808 });/**
26809  * @class Roo.htmleditor.FilterKeepChildren
26810  * remove tags but keep children
26811  * @constructor
26812  * Run a new Keep Children Filter
26813  * @param {Object} config Configuration options
26814  */
26815
26816 Roo.htmleditor.FilterKeepChildren = function(cfg)
26817 {
26818     Roo.apply(this, cfg);
26819     if (this.tag === false) {
26820         return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
26821     }
26822     // hacky?
26823     if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
26824         this.cleanNamespace = true;
26825     }
26826         
26827     this.walk(cfg.node);
26828 }
26829
26830 Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
26831 {
26832     cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
26833   
26834     replaceTag : function(node)
26835     {
26836         // walk children...
26837         //Roo.log(node.tagName);
26838         var ar = Array.from(node.childNodes);
26839         //remove first..
26840         
26841         for (var i = 0; i < ar.length; i++) {
26842             var e = ar[i];
26843             if (e.nodeType == 1) {
26844                 if (
26845                     (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
26846                     || // array and it matches
26847                     (typeof(this.tag) == 'string' && this.tag == e.tagName)
26848                     ||
26849                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
26850                     ||
26851                     (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
26852                 ) {
26853                     this.replaceTag(ar[i]); // child is blacklisted as well...
26854                     continue;
26855                 }
26856             }
26857         }  
26858         ar = Array.from(node.childNodes);
26859         for (var i = 0; i < ar.length; i++) {
26860          
26861             node.removeChild(ar[i]);
26862             // what if we need to walk these???
26863             node.parentNode.insertBefore(ar[i], node);
26864             if (this.tag !== false) {
26865                 this.walk(ar[i]);
26866                 
26867             }
26868         }
26869         //Roo.log("REMOVE:" + node.tagName);
26870         node.parentNode.removeChild(node);
26871         return false; // don't walk children
26872         
26873         
26874     }
26875 });/**
26876  * @class Roo.htmleditor.FilterParagraph
26877  * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
26878  * like on 'push' to remove the <p> tags and replace them with line breaks.
26879  * @constructor
26880  * Run a new Paragraph Filter
26881  * @param {Object} config Configuration options
26882  */
26883
26884 Roo.htmleditor.FilterParagraph = function(cfg)
26885 {
26886     // no need to apply config.
26887     this.walk(cfg.node);
26888 }
26889
26890 Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
26891 {
26892     
26893      
26894     tag : 'P',
26895     
26896      
26897     replaceTag : function(node)
26898     {
26899         
26900         if (node.childNodes.length == 1 &&
26901             node.childNodes[0].nodeType == 3 &&
26902             node.childNodes[0].textContent.trim().length < 1
26903             ) {
26904             // remove and replace with '<BR>';
26905             node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
26906             return false; // no need to walk..
26907         }
26908         var ar = Array.from(node.childNodes);
26909         for (var i = 0; i < ar.length; i++) {
26910             node.removeChild(ar[i]);
26911             // what if we need to walk these???
26912             node.parentNode.insertBefore(ar[i], node);
26913         }
26914         // now what about this?
26915         // <p> &nbsp; </p>
26916         
26917         // double BR.
26918         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26919         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
26920         node.parentNode.removeChild(node);
26921         
26922         return false;
26923
26924     }
26925     
26926 });/**
26927  * @class Roo.htmleditor.FilterSpan
26928  * filter span's with no attributes out..
26929  * @constructor
26930  * Run a new Span Filter
26931  * @param {Object} config Configuration options
26932  */
26933
26934 Roo.htmleditor.FilterSpan = function(cfg)
26935 {
26936     // no need to apply config.
26937     this.walk(cfg.node);
26938 }
26939
26940 Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
26941 {
26942      
26943     tag : 'SPAN',
26944      
26945  
26946     replaceTag : function(node)
26947     {
26948         if (node.attributes && node.attributes.length > 0) {
26949             return true; // walk if there are any.
26950         }
26951         Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
26952         return false;
26953      
26954     }
26955     
26956 });/**
26957  * @class Roo.htmleditor.FilterTableWidth
26958   try and remove table width data - as that frequently messes up other stuff.
26959  * 
26960  *      was cleanTableWidths.
26961  *
26962  * Quite often pasting from word etc.. results in tables with column and widths.
26963  * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
26964  *
26965  * @constructor
26966  * Run a new Table Filter
26967  * @param {Object} config Configuration options
26968  */
26969
26970 Roo.htmleditor.FilterTableWidth = function(cfg)
26971 {
26972     // no need to apply config.
26973     this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
26974     this.walk(cfg.node);
26975 }
26976
26977 Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
26978 {
26979      
26980      
26981     
26982     replaceTag: function(node) {
26983         
26984         
26985       
26986         if (node.hasAttribute('width')) {
26987             node.removeAttribute('width');
26988         }
26989         
26990          
26991         if (node.hasAttribute("style")) {
26992             // pretty basic...
26993             
26994             var styles = node.getAttribute("style").split(";");
26995             var nstyle = [];
26996             Roo.each(styles, function(s) {
26997                 if (!s.match(/:/)) {
26998                     return;
26999                 }
27000                 var kv = s.split(":");
27001                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
27002                     return;
27003                 }
27004                 // what ever is left... we allow.
27005                 nstyle.push(s);
27006             });
27007             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
27008             if (!nstyle.length) {
27009                 node.removeAttribute('style');
27010             }
27011         }
27012         
27013         return true; // continue doing children..
27014     }
27015 });/**
27016  * @class Roo.htmleditor.FilterWord
27017  * try and clean up all the mess that Word generates.
27018  * 
27019  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
27020  
27021  * @constructor
27022  * Run a new Span Filter
27023  * @param {Object} config Configuration options
27024  */
27025
27026 Roo.htmleditor.FilterWord = function(cfg)
27027 {
27028     // no need to apply config.
27029     this.replaceDocBullets(cfg.node);
27030     
27031     this.replaceAname(cfg.node);
27032     // this is disabled as the removal is done by other filters;
27033    // this.walk(cfg.node);
27034     
27035     
27036 }
27037
27038 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
27039 {
27040     tag: true,
27041      
27042     
27043     /**
27044      * Clean up MS wordisms...
27045      */
27046     replaceTag : function(node)
27047     {
27048          
27049         // no idea what this does - span with text, replaceds with just text.
27050         if(
27051                 node.nodeName == 'SPAN' &&
27052                 !node.hasAttributes() &&
27053                 node.childNodes.length == 1 &&
27054                 node.firstChild.nodeName == "#text"  
27055         ) {
27056             var textNode = node.firstChild;
27057             node.removeChild(textNode);
27058             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
27059                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
27060             }
27061             node.parentNode.insertBefore(textNode, node);
27062             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
27063                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
27064             }
27065             
27066             node.parentNode.removeChild(node);
27067             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
27068         }
27069         
27070    
27071         
27072         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
27073             node.parentNode.removeChild(node);
27074             return false; // dont do chidlren
27075         }
27076         //Roo.log(node.tagName);
27077         // remove - but keep children..
27078         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
27079             //Roo.log('-- removed');
27080             while (node.childNodes.length) {
27081                 var cn = node.childNodes[0];
27082                 node.removeChild(cn);
27083                 node.parentNode.insertBefore(cn, node);
27084                 // move node to parent - and clean it..
27085                 if (cn.nodeType == 1) {
27086                     this.replaceTag(cn);
27087                 }
27088                 
27089             }
27090             node.parentNode.removeChild(node);
27091             /// no need to iterate chidlren = it's got none..
27092             //this.iterateChildren(node, this.cleanWord);
27093             return false; // no need to iterate children.
27094         }
27095         // clean styles
27096         if (node.className.length) {
27097             
27098             var cn = node.className.split(/\W+/);
27099             var cna = [];
27100             Roo.each(cn, function(cls) {
27101                 if (cls.match(/Mso[a-zA-Z]+/)) {
27102                     return;
27103                 }
27104                 cna.push(cls);
27105             });
27106             node.className = cna.length ? cna.join(' ') : '';
27107             if (!cna.length) {
27108                 node.removeAttribute("class");
27109             }
27110         }
27111         
27112         if (node.hasAttribute("lang")) {
27113             node.removeAttribute("lang");
27114         }
27115         
27116         if (node.hasAttribute("style")) {
27117             
27118             var styles = node.getAttribute("style").split(";");
27119             var nstyle = [];
27120             Roo.each(styles, function(s) {
27121                 if (!s.match(/:/)) {
27122                     return;
27123                 }
27124                 var kv = s.split(":");
27125                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
27126                     return;
27127                 }
27128                 // what ever is left... we allow.
27129                 nstyle.push(s);
27130             });
27131             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
27132             if (!nstyle.length) {
27133                 node.removeAttribute('style');
27134             }
27135         }
27136         return true; // do children
27137         
27138         
27139         
27140     },
27141     
27142     styleToObject: function(node)
27143     {
27144         var styles = (node.getAttribute("style") || '').split(";");
27145         var ret = {};
27146         Roo.each(styles, function(s) {
27147             if (!s.match(/:/)) {
27148                 return;
27149             }
27150             var kv = s.split(":");
27151              
27152             // what ever is left... we allow.
27153             ret[kv[0].trim()] = kv[1];
27154         });
27155         return ret;
27156     },
27157     
27158     
27159     replaceAname : function (doc)
27160     {
27161         // replace all the a/name without..
27162         var aa = Array.from(doc.getElementsByTagName('a'));
27163         for (var i = 0; i  < aa.length; i++) {
27164             var a = aa[i];
27165             if (a.hasAttribute("name")) {
27166                 a.removeAttribute("name");
27167             }
27168             if (a.hasAttribute("href")) {
27169                 continue;
27170             }
27171             // reparent children.
27172             this.removeNodeKeepChildren(a);
27173             
27174         }
27175         
27176         
27177         
27178     },
27179
27180     
27181     
27182     replaceDocBullets : function(doc)
27183     {
27184         // this is a bit odd - but it appears some indents use ql-indent-1
27185          //Roo.log(doc.innerHTML);
27186         
27187         var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
27188         for( var i = 0; i < listpara.length; i ++) {
27189             listpara[i].className = "MsoListParagraph";
27190         }
27191         
27192         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
27193         for( var i = 0; i < listpara.length; i ++) {
27194             listpara[i].className = "MsoListParagraph";
27195         }
27196         listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
27197         for( var i = 0; i < listpara.length; i ++) {
27198             listpara[i].className = "MsoListParagraph";
27199         }
27200         listpara =  Array.from(doc.getElementsByClassName('ql-indent-1'));
27201         for( var i = 0; i < listpara.length; i ++) {
27202             listpara[i].className = "MsoListParagraph";
27203         }
27204         
27205         // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
27206         var htwo =  Array.from(doc.getElementsByTagName('h2'));
27207         for( var i = 0; i < htwo.length; i ++) {
27208             if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
27209                 htwo[i].className = "MsoListParagraph";
27210             }
27211         }
27212         listpara =  Array.from(doc.getElementsByClassName('MsoNormal'));
27213         for( var i = 0; i < listpara.length; i ++) {
27214             if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
27215                 listpara[i].className = "MsoListParagraph";
27216             } else {
27217                 listpara[i].className = "MsoNormalx";
27218             }
27219         }
27220        
27221         listpara = doc.getElementsByClassName('MsoListParagraph');
27222         // Roo.log(doc.innerHTML);
27223         
27224         
27225         
27226         while(listpara.length) {
27227             
27228             this.replaceDocBullet(listpara.item(0));
27229         }
27230       
27231     },
27232     
27233      
27234     
27235     replaceDocBullet : function(p)
27236     {
27237         // gather all the siblings.
27238         var ns = p,
27239             parent = p.parentNode,
27240             doc = parent.ownerDocument,
27241             items = [];
27242             
27243         var listtype = 'ul';   
27244         while (ns) {
27245             if (ns.nodeType != 1) {
27246                 ns = ns.nextSibling;
27247                 continue;
27248             }
27249             if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
27250                 break;
27251             }
27252             var spans = ns.getElementsByTagName('span');
27253             if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
27254                 items.push(ns);
27255                 ns = ns.nextSibling;
27256                 has_list = true;
27257                 if (spans.length && spans[0].hasAttribute('style')) {
27258                     var  style = this.styleToObject(spans[0]);
27259                     if (typeof(style['font-family']) != 'undefined' && !style['font-family'].match(/Symbol/)) {
27260                         listtype = 'ol';
27261                     }
27262                 }
27263                 
27264                 continue;
27265             }
27266             var spans = ns.getElementsByTagName('span');
27267             if (!spans.length) {
27268                 break;
27269             }
27270             var has_list  = false;
27271             for(var i = 0; i < spans.length; i++) {
27272                 if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
27273                     has_list = true;
27274                     break;
27275                 }
27276             }
27277             if (!has_list) {
27278                 break;
27279             }
27280             items.push(ns);
27281             ns = ns.nextSibling;
27282             
27283             
27284         }
27285         if (!items.length) {
27286             ns.className = "";
27287             return;
27288         }
27289         
27290         var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
27291         parent.insertBefore(ul, p);
27292         var lvl = 0;
27293         var stack = [ ul ];
27294         var last_li = false;
27295         
27296         var margin_to_depth = {};
27297         max_margins = -1;
27298         
27299         items.forEach(function(n, ipos) {
27300             //Roo.log("got innertHMLT=" + n.innerHTML);
27301             
27302             var spans = n.getElementsByTagName('span');
27303             if (!spans.length) {
27304                 //Roo.log("No spans found");
27305                  
27306                 parent.removeChild(n);
27307                 
27308                 
27309                 return; // skip it...
27310             }
27311            
27312                 
27313             var num = 1;
27314             var style = {};
27315             for(var i = 0; i < spans.length; i++) {
27316             
27317                 style = this.styleToObject(spans[i]);
27318                 if (typeof(style['mso-list']) == 'undefined') {
27319                     continue;
27320                 }
27321                 if (listtype == 'ol') {
27322                    num = spans[i].innerText.replace(/[^0-9]+]/g,'')  * 1;
27323                 }
27324                 spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
27325                 break;
27326             }
27327             //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
27328             style = this.styleToObject(n); // mo-list is from the parent node.
27329             if (typeof(style['mso-list']) == 'undefined') {
27330                 //Roo.log("parent is missing level");
27331                   
27332                 parent.removeChild(n);
27333                  
27334                 return;
27335             }
27336             
27337             var margin = style['margin-left'];
27338             if (typeof(margin_to_depth[margin]) == 'undefined') {
27339                 max_margins++;
27340                 margin_to_depth[margin] = max_margins;
27341             }
27342             nlvl = margin_to_depth[margin] ;
27343              
27344             if (nlvl > lvl) {
27345                 //new indent
27346                 var nul = doc.createElement(listtype); // what about number lists...
27347                 if (!last_li) {
27348                     last_li = doc.createElement('li');
27349                     stack[lvl].appendChild(last_li);
27350                 }
27351                 last_li.appendChild(nul);
27352                 stack[nlvl] = nul;
27353                 
27354             }
27355             lvl = nlvl;
27356             
27357             // not starting at 1..
27358             if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
27359                 stack[nlvl].setAttribute("start", num);
27360             }
27361             
27362             var nli = stack[nlvl].appendChild(doc.createElement('li'));
27363             last_li = nli;
27364             nli.innerHTML = n.innerHTML;
27365             //Roo.log("innerHTML = " + n.innerHTML);
27366             parent.removeChild(n);
27367             
27368              
27369              
27370             
27371         },this);
27372         
27373         
27374         
27375         
27376     }
27377     
27378     
27379     
27380 });
27381 /**
27382  * @class Roo.htmleditor.FilterStyleToTag
27383  * part of the word stuff... - certain 'styles' should be converted to tags.
27384  * eg.
27385  *   font-weight: bold -> bold
27386  *   ?? super / subscrit etc..
27387  * 
27388  * @constructor
27389 * Run a new style to tag filter.
27390 * @param {Object} config Configuration options
27391  */
27392 Roo.htmleditor.FilterStyleToTag = function(cfg)
27393 {
27394     
27395     this.tags = {
27396         B  : [ 'fontWeight' , 'bold'],
27397         I :  [ 'fontStyle' , 'italic'],
27398         //pre :  [ 'font-style' , 'italic'],
27399         // h1.. h6 ?? font-size?
27400         SUP : [ 'verticalAlign' , 'super' ],
27401         SUB : [ 'verticalAlign' , 'sub' ]
27402         
27403         
27404     };
27405     
27406     Roo.apply(this, cfg);
27407      
27408     
27409     this.walk(cfg.node);
27410     
27411     
27412     
27413 }
27414
27415
27416 Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
27417 {
27418     tag: true, // all tags
27419     
27420     tags : false,
27421     
27422     
27423     replaceTag : function(node)
27424     {
27425         
27426         
27427         if (node.getAttribute("style") === null) {
27428             return true;
27429         }
27430         var inject = [];
27431         for (var k in this.tags) {
27432             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
27433                 inject.push(k);
27434                 node.style.removeProperty(this.tags[k][0]);
27435             }
27436         }
27437         if (!inject.length) {
27438             return true; 
27439         }
27440         var cn = Array.from(node.childNodes);
27441         var nn = node;
27442         Roo.each(inject, function(t) {
27443             var nc = node.ownerDocument.createElement(t);
27444             nn.appendChild(nc);
27445             nn = nc;
27446         });
27447         for(var i = 0;i < cn.length;cn++) {
27448             node.removeChild(cn[i]);
27449             nn.appendChild(cn[i]);
27450         }
27451         return true /// iterate thru
27452     }
27453     
27454 })/**
27455  * @class Roo.htmleditor.FilterLongBr
27456  * BR/BR/BR - keep a maximum of 2...
27457  * @constructor
27458  * Run a new Long BR Filter
27459  * @param {Object} config Configuration options
27460  */
27461
27462 Roo.htmleditor.FilterLongBr = function(cfg)
27463 {
27464     // no need to apply config.
27465     this.walk(cfg.node);
27466 }
27467
27468 Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
27469 {
27470     
27471      
27472     tag : 'BR',
27473     
27474      
27475     replaceTag : function(node)
27476     {
27477         
27478         var ps = node.nextSibling;
27479         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
27480             ps = ps.nextSibling;
27481         }
27482         
27483         if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
27484             node.parentNode.removeChild(node); // remove last BR inside one fo these tags
27485             return false;
27486         }
27487         
27488         if (!ps || ps.nodeType != 1) {
27489             return false;
27490         }
27491         
27492         if (!ps || ps.tagName != 'BR') {
27493            
27494             return false;
27495         }
27496         
27497         
27498         
27499         
27500         
27501         if (!node.previousSibling) {
27502             return false;
27503         }
27504         var ps = node.previousSibling;
27505         
27506         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
27507             ps = ps.previousSibling;
27508         }
27509         if (!ps || ps.nodeType != 1) {
27510             return false;
27511         }
27512         // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
27513         if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
27514             return false;
27515         }
27516         
27517         node.parentNode.removeChild(node); // remove me...
27518         
27519         return false; // no need to do children
27520
27521     }
27522     
27523 }); 
27524
27525 /**
27526  * @class Roo.htmleditor.FilterBlock
27527  * removes id / data-block and contenteditable that are associated with blocks
27528  * usage should be done on a cloned copy of the dom
27529  * @constructor
27530 * Run a new Attribute Filter { node : xxxx }}
27531 * @param {Object} config Configuration options
27532  */
27533 Roo.htmleditor.FilterBlock = function(cfg)
27534 {
27535     Roo.apply(this, cfg);
27536     var qa = cfg.node.querySelectorAll;
27537     this.removeAttributes('data-block');
27538     this.removeAttributes('contenteditable');
27539     this.removeAttributes('id');
27540     
27541 }
27542
27543 Roo.apply(Roo.htmleditor.FilterBlock.prototype,
27544 {
27545     node: true, // all tags
27546      
27547      
27548     removeAttributes : function(attr)
27549     {
27550         var ar = this.node.querySelectorAll('*[' + attr + ']');
27551         for (var i =0;i<ar.length;i++) {
27552             ar[i].removeAttribute(attr);
27553         }
27554     }
27555         
27556         
27557         
27558     
27559 });
27560 /***
27561  * This is based loosely on tinymce 
27562  * @class Roo.htmleditor.TidySerializer
27563  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
27564  * @constructor
27565  * @method Serializer
27566  * @param {Object} settings Name/value settings object.
27567  */
27568
27569
27570 Roo.htmleditor.TidySerializer = function(settings)
27571 {
27572     Roo.apply(this, settings);
27573     
27574     this.writer = new Roo.htmleditor.TidyWriter(settings);
27575     
27576     
27577
27578 };
27579 Roo.htmleditor.TidySerializer.prototype = {
27580     
27581     /**
27582      * @param {boolean} inner do the inner of the node.
27583      */
27584     inner : false,
27585     
27586     writer : false,
27587     
27588     /**
27589     * Serializes the specified node into a string.
27590     *
27591     * @example
27592     * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
27593     * @method serialize
27594     * @param {DomElement} node Node instance to serialize.
27595     * @return {String} String with HTML based on DOM tree.
27596     */
27597     serialize : function(node) {
27598         
27599         // = settings.validate;
27600         var writer = this.writer;
27601         var self  = this;
27602         this.handlers = {
27603             // #text
27604             3: function(node) {
27605                 
27606                 writer.text(node.nodeValue, node);
27607             },
27608             // #comment
27609             8: function(node) {
27610                 writer.comment(node.nodeValue);
27611             },
27612             // Processing instruction
27613             7: function(node) {
27614                 writer.pi(node.name, node.nodeValue);
27615             },
27616             // Doctype
27617             10: function(node) {
27618                 writer.doctype(node.nodeValue);
27619             },
27620             // CDATA
27621             4: function(node) {
27622                 writer.cdata(node.nodeValue);
27623             },
27624             // Document fragment
27625             11: function(node) {
27626                 node = node.firstChild;
27627                 if (!node) {
27628                     return;
27629                 }
27630                 while(node) {
27631                     self.walk(node);
27632                     node = node.nextSibling
27633                 }
27634             }
27635         };
27636         writer.reset();
27637         1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
27638         return writer.getContent();
27639     },
27640
27641     walk: function(node)
27642     {
27643         var attrName, attrValue, sortedAttrs, i, l, elementRule,
27644             handler = this.handlers[node.nodeType];
27645             
27646         if (handler) {
27647             handler(node);
27648             return;
27649         }
27650     
27651         var name = node.nodeName;
27652         var isEmpty = node.childNodes.length < 1;
27653       
27654         var writer = this.writer;
27655         var attrs = node.attributes;
27656         // Sort attributes
27657         
27658         writer.start(node.nodeName, attrs, isEmpty, node);
27659         if (isEmpty) {
27660             return;
27661         }
27662         node = node.firstChild;
27663         if (!node) {
27664             writer.end(name);
27665             return;
27666         }
27667         while (node) {
27668             this.walk(node);
27669             node = node.nextSibling;
27670         }
27671         writer.end(name);
27672         
27673     
27674     }
27675     // Serialize element and treat all non elements as fragments
27676    
27677 }; 
27678
27679 /***
27680  * This is based loosely on tinymce 
27681  * @class Roo.htmleditor.TidyWriter
27682  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
27683  *
27684  * Known issues?
27685  * - not tested much with 'PRE' formated elements.
27686  * 
27687  *
27688  *
27689  */
27690
27691 Roo.htmleditor.TidyWriter = function(settings)
27692 {
27693     
27694     // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
27695     Roo.apply(this, settings);
27696     this.html = [];
27697     this.state = [];
27698      
27699     this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
27700   
27701 }
27702 Roo.htmleditor.TidyWriter.prototype = {
27703
27704  
27705     state : false,
27706     
27707     indent :  '  ',
27708     
27709     // part of state...
27710     indentstr : '',
27711     in_pre: false,
27712     in_inline : false,
27713     last_inline : false,
27714     encode : false,
27715      
27716     
27717             /**
27718     * Writes the a start element such as <p id="a">.
27719     *
27720     * @method start
27721     * @param {String} name Name of the element.
27722     * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
27723     * @param {Boolean} empty Optional empty state if the tag should end like <br />.
27724     */
27725     start: function(name, attrs, empty, node)
27726     {
27727         var i, l, attr, value;
27728         
27729         // there are some situations where adding line break && indentation will not work. will not work.
27730         // <span / b / i ... formating?
27731         
27732         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
27733         var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
27734         
27735         var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
27736         
27737         var add_lb = name == 'BR' ? false : in_inline;
27738         
27739         if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
27740             i_inline = false;
27741         }
27742
27743         var indentstr =  this.indentstr;
27744         
27745         // e_inline = elements that can be inline, but still allow \n before and after?
27746         // only 'BR' ??? any others?
27747         
27748         // ADD LINE BEFORE tage
27749         if (!this.in_pre) {
27750             if (in_inline) {
27751                 //code
27752                 if (name == 'BR') {
27753                     this.addLine();
27754                 } else if (this.lastElementEndsWS()) {
27755                     this.addLine();
27756                 } else{
27757                     // otherwise - no new line. (and dont indent.)
27758                     indentstr = '';
27759                 }
27760                 
27761             } else {
27762                 this.addLine();
27763             }
27764         } else {
27765             indentstr = '';
27766         }
27767         
27768         this.html.push(indentstr + '<', name.toLowerCase());
27769         
27770         if (attrs) {
27771             for (i = 0, l = attrs.length; i < l; i++) {
27772                 attr = attrs[i];
27773                 this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
27774             }
27775         }
27776      
27777         if (empty) {
27778             if (is_short) {
27779                 this.html[this.html.length] = '/>';
27780             } else {
27781                 this.html[this.html.length] = '></' + name.toLowerCase() + '>';
27782             }
27783             var e_inline = name == 'BR' ? false : this.in_inline;
27784             
27785             if (!e_inline && !this.in_pre) {
27786                 this.addLine();
27787             }
27788             return;
27789         
27790         }
27791         // not empty..
27792         this.html[this.html.length] = '>';
27793         
27794         // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
27795         /*
27796         if (!in_inline && !in_pre) {
27797             var cn = node.firstChild;
27798             while(cn) {
27799                 if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
27800                     in_inline = true
27801                     break;
27802                 }
27803                 cn = cn.nextSibling;
27804             }
27805              
27806         }
27807         */
27808         
27809         
27810         this.pushState({
27811             indentstr : in_pre   ? '' : (this.indentstr + this.indent),
27812             in_pre : in_pre,
27813             in_inline :  in_inline
27814         });
27815         // add a line after if we are not in a
27816         
27817         if (!in_inline && !in_pre) {
27818             this.addLine();
27819         }
27820         
27821             
27822          
27823         
27824     },
27825     
27826     lastElementEndsWS : function()
27827     {
27828         var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
27829         if (value === false) {
27830             return true;
27831         }
27832         return value.match(/\s+$/);
27833         
27834     },
27835     
27836     /**
27837      * Writes the a end element such as </p>.
27838      *
27839      * @method end
27840      * @param {String} name Name of the element.
27841      */
27842     end: function(name) {
27843         var value;
27844         this.popState();
27845         var indentstr = '';
27846         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
27847         
27848         if (!this.in_pre && !in_inline) {
27849             this.addLine();
27850             indentstr  = this.indentstr;
27851         }
27852         this.html.push(indentstr + '</', name.toLowerCase(), '>');
27853         this.last_inline = in_inline;
27854         
27855         // pop the indent state..
27856     },
27857     /**
27858      * Writes a text node.
27859      *
27860      * In pre - we should not mess with the contents.
27861      * 
27862      *
27863      * @method text
27864      * @param {String} text String to write out.
27865      * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
27866      */
27867     text: function(in_text, node)
27868     {
27869         // if not in whitespace critical
27870         if (in_text.length < 1) {
27871             return;
27872         }
27873         var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
27874         
27875         if (this.in_pre) {
27876             this.html[this.html.length] =  text;
27877             return;   
27878         }
27879         
27880         if (this.in_inline) {
27881             text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
27882             if (text != ' ') {
27883                 text = text.replace(/\s+/,' ');  // all white space to single white space
27884                 
27885                     
27886                 // if next tag is '<BR>', then we can trim right..
27887                 if (node.nextSibling &&
27888                     node.nextSibling.nodeType == 1 &&
27889                     node.nextSibling.nodeName == 'BR' )
27890                 {
27891                     text = text.replace(/\s+$/g,'');
27892                 }
27893                 // if previous tag was a BR, we can also trim..
27894                 if (node.previousSibling &&
27895                     node.previousSibling.nodeType == 1 &&
27896                     node.previousSibling.nodeName == 'BR' )
27897                 {
27898                     text = this.indentstr +  text.replace(/^\s+/g,'');
27899                 }
27900                 if (text.match(/\n/)) {
27901                     text = text.replace(
27902                         /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
27903                     );
27904                     // remoeve the last whitespace / line break.
27905                     text = text.replace(/\n\s+$/,'');
27906                 }
27907                 // repace long lines
27908                 
27909             }
27910              
27911             this.html[this.html.length] =  text;
27912             return;   
27913         }
27914         // see if previous element was a inline element.
27915         var indentstr = this.indentstr;
27916    
27917         text = text.replace(/\s+/g," "); // all whitespace into single white space.
27918         
27919         // should trim left?
27920         if (node.previousSibling &&
27921             node.previousSibling.nodeType == 1 &&
27922             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
27923         {
27924             indentstr = '';
27925             
27926         } else {
27927             this.addLine();
27928             text = text.replace(/^\s+/,''); // trim left
27929           
27930         }
27931         // should trim right?
27932         if (node.nextSibling &&
27933             node.nextSibling.nodeType == 1 &&
27934             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
27935         {
27936           // noop
27937             
27938         }  else {
27939             text = text.replace(/\s+$/,''); // trim right
27940         }
27941          
27942               
27943         
27944         
27945         
27946         if (text.length < 1) {
27947             return;
27948         }
27949         if (!text.match(/\n/)) {
27950             this.html.push(indentstr + text);
27951             return;
27952         }
27953         
27954         text = this.indentstr + text.replace(
27955             /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
27956         );
27957         // remoeve the last whitespace / line break.
27958         text = text.replace(/\s+$/,''); 
27959         
27960         this.html.push(text);
27961         
27962         // split and indent..
27963         
27964         
27965     },
27966     /**
27967      * Writes a cdata node such as <![CDATA[data]]>.
27968      *
27969      * @method cdata
27970      * @param {String} text String to write out inside the cdata.
27971      */
27972     cdata: function(text) {
27973         this.html.push('<![CDATA[', text, ']]>');
27974     },
27975     /**
27976     * Writes a comment node such as <!-- Comment -->.
27977     *
27978     * @method cdata
27979     * @param {String} text String to write out inside the comment.
27980     */
27981    comment: function(text) {
27982        this.html.push('<!--', text, '-->');
27983    },
27984     /**
27985      * Writes a PI node such as <?xml attr="value" ?>.
27986      *
27987      * @method pi
27988      * @param {String} name Name of the pi.
27989      * @param {String} text String to write out inside the pi.
27990      */
27991     pi: function(name, text) {
27992         text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
27993         this.indent != '' && this.html.push('\n');
27994     },
27995     /**
27996      * Writes a doctype node such as <!DOCTYPE data>.
27997      *
27998      * @method doctype
27999      * @param {String} text String to write out inside the doctype.
28000      */
28001     doctype: function(text) {
28002         this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
28003     },
28004     /**
28005      * Resets the internal buffer if one wants to reuse the writer.
28006      *
28007      * @method reset
28008      */
28009     reset: function() {
28010         this.html.length = 0;
28011         this.state = [];
28012         this.pushState({
28013             indentstr : '',
28014             in_pre : false, 
28015             in_inline : false
28016         })
28017     },
28018     /**
28019      * Returns the contents that got serialized.
28020      *
28021      * @method getContent
28022      * @return {String} HTML contents that got written down.
28023      */
28024     getContent: function() {
28025         return this.html.join('').replace(/\n$/, '');
28026     },
28027     
28028     pushState : function(cfg)
28029     {
28030         this.state.push(cfg);
28031         Roo.apply(this, cfg);
28032     },
28033     
28034     popState : function()
28035     {
28036         if (this.state.length < 1) {
28037             return; // nothing to push
28038         }
28039         var cfg = {
28040             in_pre: false,
28041             indentstr : ''
28042         };
28043         this.state.pop();
28044         if (this.state.length > 0) {
28045             cfg = this.state[this.state.length-1]; 
28046         }
28047         Roo.apply(this, cfg);
28048     },
28049     
28050     addLine: function()
28051     {
28052         if (this.html.length < 1) {
28053             return;
28054         }
28055         
28056         
28057         var value = this.html[this.html.length - 1];
28058         if (value.length > 0 && '\n' !== value) {
28059             this.html.push('\n');
28060         }
28061     }
28062     
28063     
28064 //'pre script noscript style textarea video audio iframe object code'
28065 // shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
28066 // inline 
28067 };
28068
28069 Roo.htmleditor.TidyWriter.inline_elements = [
28070         'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
28071         'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
28072 ];
28073 Roo.htmleditor.TidyWriter.shortend_elements = [
28074     'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
28075     'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
28076 ];
28077
28078 Roo.htmleditor.TidyWriter.whitespace_elements = [
28079     'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
28080 ];/***
28081  * This is based loosely on tinymce 
28082  * @class Roo.htmleditor.TidyEntities
28083  * @static
28084  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
28085  *
28086  * Not 100% sure this is actually used or needed.
28087  */
28088
28089 Roo.htmleditor.TidyEntities = {
28090     
28091     /**
28092      * initialize data..
28093      */
28094     init : function (){
28095      
28096         this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
28097        
28098     },
28099
28100
28101     buildEntitiesLookup: function(items, radix) {
28102         var i, chr, entity, lookup = {};
28103         if (!items) {
28104             return {};
28105         }
28106         items = typeof(items) == 'string' ? items.split(',') : items;
28107         radix = radix || 10;
28108         // Build entities lookup table
28109         for (i = 0; i < items.length; i += 2) {
28110             chr = String.fromCharCode(parseInt(items[i], radix));
28111             // Only add non base entities
28112             if (!this.baseEntities[chr]) {
28113                 entity = '&' + items[i + 1] + ';';
28114                 lookup[chr] = entity;
28115                 lookup[entity] = chr;
28116             }
28117         }
28118         return lookup;
28119         
28120     },
28121     
28122     asciiMap : {
28123             128: '€',
28124             130: '‚',
28125             131: 'ƒ',
28126             132: '„',
28127             133: '…',
28128             134: '†',
28129             135: '‡',
28130             136: 'ˆ',
28131             137: '‰',
28132             138: 'Š',
28133             139: '‹',
28134             140: 'Œ',
28135             142: 'Ž',
28136             145: '‘',
28137             146: '’',
28138             147: '“',
28139             148: '”',
28140             149: '•',
28141             150: '–',
28142             151: '—',
28143             152: '˜',
28144             153: '™',
28145             154: 'š',
28146             155: '›',
28147             156: 'œ',
28148             158: 'ž',
28149             159: 'Ÿ'
28150     },
28151     // Raw entities
28152     baseEntities : {
28153         '"': '&quot;',
28154         // Needs to be escaped since the YUI compressor would otherwise break the code
28155         '\'': '&#39;',
28156         '<': '&lt;',
28157         '>': '&gt;',
28158         '&': '&amp;',
28159         '`': '&#96;'
28160     },
28161     // Reverse lookup table for raw entities
28162     reverseEntities : {
28163         '&lt;': '<',
28164         '&gt;': '>',
28165         '&amp;': '&',
28166         '&quot;': '"',
28167         '&apos;': '\''
28168     },
28169     
28170     attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
28171     textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
28172     rawCharsRegExp : /[<>&\"\']/g,
28173     entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
28174     namedEntities  : false,
28175     namedEntitiesData : [ 
28176         '50',
28177         'nbsp',
28178         '51',
28179         'iexcl',
28180         '52',
28181         'cent',
28182         '53',
28183         'pound',
28184         '54',
28185         'curren',
28186         '55',
28187         'yen',
28188         '56',
28189         'brvbar',
28190         '57',
28191         'sect',
28192         '58',
28193         'uml',
28194         '59',
28195         'copy',
28196         '5a',
28197         'ordf',
28198         '5b',
28199         'laquo',
28200         '5c',
28201         'not',
28202         '5d',
28203         'shy',
28204         '5e',
28205         'reg',
28206         '5f',
28207         'macr',
28208         '5g',
28209         'deg',
28210         '5h',
28211         'plusmn',
28212         '5i',
28213         'sup2',
28214         '5j',
28215         'sup3',
28216         '5k',
28217         'acute',
28218         '5l',
28219         'micro',
28220         '5m',
28221         'para',
28222         '5n',
28223         'middot',
28224         '5o',
28225         'cedil',
28226         '5p',
28227         'sup1',
28228         '5q',
28229         'ordm',
28230         '5r',
28231         'raquo',
28232         '5s',
28233         'frac14',
28234         '5t',
28235         'frac12',
28236         '5u',
28237         'frac34',
28238         '5v',
28239         'iquest',
28240         '60',
28241         'Agrave',
28242         '61',
28243         'Aacute',
28244         '62',
28245         'Acirc',
28246         '63',
28247         'Atilde',
28248         '64',
28249         'Auml',
28250         '65',
28251         'Aring',
28252         '66',
28253         'AElig',
28254         '67',
28255         'Ccedil',
28256         '68',
28257         'Egrave',
28258         '69',
28259         'Eacute',
28260         '6a',
28261         'Ecirc',
28262         '6b',
28263         'Euml',
28264         '6c',
28265         'Igrave',
28266         '6d',
28267         'Iacute',
28268         '6e',
28269         'Icirc',
28270         '6f',
28271         'Iuml',
28272         '6g',
28273         'ETH',
28274         '6h',
28275         'Ntilde',
28276         '6i',
28277         'Ograve',
28278         '6j',
28279         'Oacute',
28280         '6k',
28281         'Ocirc',
28282         '6l',
28283         'Otilde',
28284         '6m',
28285         'Ouml',
28286         '6n',
28287         'times',
28288         '6o',
28289         'Oslash',
28290         '6p',
28291         'Ugrave',
28292         '6q',
28293         'Uacute',
28294         '6r',
28295         'Ucirc',
28296         '6s',
28297         'Uuml',
28298         '6t',
28299         'Yacute',
28300         '6u',
28301         'THORN',
28302         '6v',
28303         'szlig',
28304         '70',
28305         'agrave',
28306         '71',
28307         'aacute',
28308         '72',
28309         'acirc',
28310         '73',
28311         'atilde',
28312         '74',
28313         'auml',
28314         '75',
28315         'aring',
28316         '76',
28317         'aelig',
28318         '77',
28319         'ccedil',
28320         '78',
28321         'egrave',
28322         '79',
28323         'eacute',
28324         '7a',
28325         'ecirc',
28326         '7b',
28327         'euml',
28328         '7c',
28329         'igrave',
28330         '7d',
28331         'iacute',
28332         '7e',
28333         'icirc',
28334         '7f',
28335         'iuml',
28336         '7g',
28337         'eth',
28338         '7h',
28339         'ntilde',
28340         '7i',
28341         'ograve',
28342         '7j',
28343         'oacute',
28344         '7k',
28345         'ocirc',
28346         '7l',
28347         'otilde',
28348         '7m',
28349         'ouml',
28350         '7n',
28351         'divide',
28352         '7o',
28353         'oslash',
28354         '7p',
28355         'ugrave',
28356         '7q',
28357         'uacute',
28358         '7r',
28359         'ucirc',
28360         '7s',
28361         'uuml',
28362         '7t',
28363         'yacute',
28364         '7u',
28365         'thorn',
28366         '7v',
28367         'yuml',
28368         'ci',
28369         'fnof',
28370         'sh',
28371         'Alpha',
28372         'si',
28373         'Beta',
28374         'sj',
28375         'Gamma',
28376         'sk',
28377         'Delta',
28378         'sl',
28379         'Epsilon',
28380         'sm',
28381         'Zeta',
28382         'sn',
28383         'Eta',
28384         'so',
28385         'Theta',
28386         'sp',
28387         'Iota',
28388         'sq',
28389         'Kappa',
28390         'sr',
28391         'Lambda',
28392         'ss',
28393         'Mu',
28394         'st',
28395         'Nu',
28396         'su',
28397         'Xi',
28398         'sv',
28399         'Omicron',
28400         't0',
28401         'Pi',
28402         't1',
28403         'Rho',
28404         't3',
28405         'Sigma',
28406         't4',
28407         'Tau',
28408         't5',
28409         'Upsilon',
28410         't6',
28411         'Phi',
28412         't7',
28413         'Chi',
28414         't8',
28415         'Psi',
28416         't9',
28417         'Omega',
28418         'th',
28419         'alpha',
28420         'ti',
28421         'beta',
28422         'tj',
28423         'gamma',
28424         'tk',
28425         'delta',
28426         'tl',
28427         'epsilon',
28428         'tm',
28429         'zeta',
28430         'tn',
28431         'eta',
28432         'to',
28433         'theta',
28434         'tp',
28435         'iota',
28436         'tq',
28437         'kappa',
28438         'tr',
28439         'lambda',
28440         'ts',
28441         'mu',
28442         'tt',
28443         'nu',
28444         'tu',
28445         'xi',
28446         'tv',
28447         'omicron',
28448         'u0',
28449         'pi',
28450         'u1',
28451         'rho',
28452         'u2',
28453         'sigmaf',
28454         'u3',
28455         'sigma',
28456         'u4',
28457         'tau',
28458         'u5',
28459         'upsilon',
28460         'u6',
28461         'phi',
28462         'u7',
28463         'chi',
28464         'u8',
28465         'psi',
28466         'u9',
28467         'omega',
28468         'uh',
28469         'thetasym',
28470         'ui',
28471         'upsih',
28472         'um',
28473         'piv',
28474         '812',
28475         'bull',
28476         '816',
28477         'hellip',
28478         '81i',
28479         'prime',
28480         '81j',
28481         'Prime',
28482         '81u',
28483         'oline',
28484         '824',
28485         'frasl',
28486         '88o',
28487         'weierp',
28488         '88h',
28489         'image',
28490         '88s',
28491         'real',
28492         '892',
28493         'trade',
28494         '89l',
28495         'alefsym',
28496         '8cg',
28497         'larr',
28498         '8ch',
28499         'uarr',
28500         '8ci',
28501         'rarr',
28502         '8cj',
28503         'darr',
28504         '8ck',
28505         'harr',
28506         '8dl',
28507         'crarr',
28508         '8eg',
28509         'lArr',
28510         '8eh',
28511         'uArr',
28512         '8ei',
28513         'rArr',
28514         '8ej',
28515         'dArr',
28516         '8ek',
28517         'hArr',
28518         '8g0',
28519         'forall',
28520         '8g2',
28521         'part',
28522         '8g3',
28523         'exist',
28524         '8g5',
28525         'empty',
28526         '8g7',
28527         'nabla',
28528         '8g8',
28529         'isin',
28530         '8g9',
28531         'notin',
28532         '8gb',
28533         'ni',
28534         '8gf',
28535         'prod',
28536         '8gh',
28537         'sum',
28538         '8gi',
28539         'minus',
28540         '8gn',
28541         'lowast',
28542         '8gq',
28543         'radic',
28544         '8gt',
28545         'prop',
28546         '8gu',
28547         'infin',
28548         '8h0',
28549         'ang',
28550         '8h7',
28551         'and',
28552         '8h8',
28553         'or',
28554         '8h9',
28555         'cap',
28556         '8ha',
28557         'cup',
28558         '8hb',
28559         'int',
28560         '8hk',
28561         'there4',
28562         '8hs',
28563         'sim',
28564         '8i5',
28565         'cong',
28566         '8i8',
28567         'asymp',
28568         '8j0',
28569         'ne',
28570         '8j1',
28571         'equiv',
28572         '8j4',
28573         'le',
28574         '8j5',
28575         'ge',
28576         '8k2',
28577         'sub',
28578         '8k3',
28579         'sup',
28580         '8k4',
28581         'nsub',
28582         '8k6',
28583         'sube',
28584         '8k7',
28585         'supe',
28586         '8kl',
28587         'oplus',
28588         '8kn',
28589         'otimes',
28590         '8l5',
28591         'perp',
28592         '8m5',
28593         'sdot',
28594         '8o8',
28595         'lceil',
28596         '8o9',
28597         'rceil',
28598         '8oa',
28599         'lfloor',
28600         '8ob',
28601         'rfloor',
28602         '8p9',
28603         'lang',
28604         '8pa',
28605         'rang',
28606         '9ea',
28607         'loz',
28608         '9j0',
28609         'spades',
28610         '9j3',
28611         'clubs',
28612         '9j5',
28613         'hearts',
28614         '9j6',
28615         'diams',
28616         'ai',
28617         'OElig',
28618         'aj',
28619         'oelig',
28620         'b0',
28621         'Scaron',
28622         'b1',
28623         'scaron',
28624         'bo',
28625         'Yuml',
28626         'm6',
28627         'circ',
28628         'ms',
28629         'tilde',
28630         '802',
28631         'ensp',
28632         '803',
28633         'emsp',
28634         '809',
28635         'thinsp',
28636         '80c',
28637         'zwnj',
28638         '80d',
28639         'zwj',
28640         '80e',
28641         'lrm',
28642         '80f',
28643         'rlm',
28644         '80j',
28645         'ndash',
28646         '80k',
28647         'mdash',
28648         '80o',
28649         'lsquo',
28650         '80p',
28651         'rsquo',
28652         '80q',
28653         'sbquo',
28654         '80s',
28655         'ldquo',
28656         '80t',
28657         'rdquo',
28658         '80u',
28659         'bdquo',
28660         '810',
28661         'dagger',
28662         '811',
28663         'Dagger',
28664         '81g',
28665         'permil',
28666         '81p',
28667         'lsaquo',
28668         '81q',
28669         'rsaquo',
28670         '85c',
28671         'euro'
28672     ],
28673
28674          
28675     /**
28676      * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
28677      *
28678      * @method encodeRaw
28679      * @param {String} text Text to encode.
28680      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28681      * @return {String} Entity encoded text.
28682      */
28683     encodeRaw: function(text, attr)
28684     {
28685         var t = this;
28686         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28687             return t.baseEntities[chr] || chr;
28688         });
28689     },
28690     /**
28691      * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
28692      * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
28693      * and is exposed as the DOMUtils.encode function.
28694      *
28695      * @method encodeAllRaw
28696      * @param {String} text Text to encode.
28697      * @return {String} Entity encoded text.
28698      */
28699     encodeAllRaw: function(text) {
28700         var t = this;
28701         return ('' + text).replace(this.rawCharsRegExp, function(chr) {
28702             return t.baseEntities[chr] || chr;
28703         });
28704     },
28705     /**
28706      * Encodes the specified string using numeric entities. The core entities will be
28707      * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
28708      *
28709      * @method encodeNumeric
28710      * @param {String} text Text to encode.
28711      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28712      * @return {String} Entity encoded text.
28713      */
28714     encodeNumeric: function(text, attr) {
28715         var t = this;
28716         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28717             // Multi byte sequence convert it to a single entity
28718             if (chr.length > 1) {
28719                 return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
28720             }
28721             return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
28722         });
28723     },
28724     /**
28725      * Encodes the specified string using named entities. The core entities will be encoded
28726      * as named ones but all non lower ascii characters will be encoded into named entities.
28727      *
28728      * @method encodeNamed
28729      * @param {String} text Text to encode.
28730      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
28731      * @param {Object} entities Optional parameter with entities to use.
28732      * @return {String} Entity encoded text.
28733      */
28734     encodeNamed: function(text, attr, entities) {
28735         var t = this;
28736         entities = entities || this.namedEntities;
28737         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
28738             return t.baseEntities[chr] || entities[chr] || chr;
28739         });
28740     },
28741     /**
28742      * Returns an encode function based on the name(s) and it's optional entities.
28743      *
28744      * @method getEncodeFunc
28745      * @param {String} name Comma separated list of encoders for example named,numeric.
28746      * @param {String} entities Optional parameter with entities to use instead of the built in set.
28747      * @return {function} Encode function to be used.
28748      */
28749     getEncodeFunc: function(name, entities) {
28750         entities = this.buildEntitiesLookup(entities) || this.namedEntities;
28751         var t = this;
28752         function encodeNamedAndNumeric(text, attr) {
28753             return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
28754                 return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
28755             });
28756         }
28757
28758         function encodeCustomNamed(text, attr) {
28759             return t.encodeNamed(text, attr, entities);
28760         }
28761         // Replace + with , to be compatible with previous TinyMCE versions
28762         name = this.makeMap(name.replace(/\+/g, ','));
28763         // Named and numeric encoder
28764         if (name.named && name.numeric) {
28765             return this.encodeNamedAndNumeric;
28766         }
28767         // Named encoder
28768         if (name.named) {
28769             // Custom names
28770             if (entities) {
28771                 return encodeCustomNamed;
28772             }
28773             return this.encodeNamed;
28774         }
28775         // Numeric
28776         if (name.numeric) {
28777             return this.encodeNumeric;
28778         }
28779         // Raw encoder
28780         return this.encodeRaw;
28781     },
28782     /**
28783      * Decodes the specified string, this will replace entities with raw UTF characters.
28784      *
28785      * @method decode
28786      * @param {String} text Text to entity decode.
28787      * @return {String} Entity decoded string.
28788      */
28789     decode: function(text)
28790     {
28791         var  t = this;
28792         return text.replace(this.entityRegExp, function(all, numeric) {
28793             if (numeric) {
28794                 numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
28795                 // Support upper UTF
28796                 if (numeric > 65535) {
28797                     numeric -= 65536;
28798                     return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
28799                 }
28800                 return t.asciiMap[numeric] || String.fromCharCode(numeric);
28801             }
28802             return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
28803         });
28804     },
28805     nativeDecode : function (text) {
28806         return text;
28807     },
28808     makeMap : function (items, delim, map) {
28809                 var i;
28810                 items = items || [];
28811                 delim = delim || ',';
28812                 if (typeof items == "string") {
28813                         items = items.split(delim);
28814                 }
28815                 map = map || {};
28816                 i = items.length;
28817                 while (i--) {
28818                         map[items[i]] = {};
28819                 }
28820                 return map;
28821         }
28822 };
28823     
28824     
28825     
28826 Roo.htmleditor.TidyEntities.init();
28827 /**
28828  * @class Roo.htmleditor.KeyEnter
28829  * Handle Enter press..
28830  * @cfg {Roo.HtmlEditorCore} core the editor.
28831  * @constructor
28832  * Create a new Filter.
28833  * @param {Object} config Configuration options
28834  */
28835
28836
28837
28838
28839
28840 Roo.htmleditor.KeyEnter = function(cfg) {
28841     Roo.apply(this, cfg);
28842     // this does not actually call walk as it's really just a abstract class
28843  
28844     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
28845 }
28846
28847 //Roo.htmleditor.KeyEnter.i = 0;
28848
28849
28850 Roo.htmleditor.KeyEnter.prototype = {
28851     
28852     core : false,
28853     
28854     keypress : function(e)
28855     {
28856         if (e.charCode != 13 && e.charCode != 10) {
28857             Roo.log([e.charCode,e]);
28858             return true;
28859         }
28860         e.preventDefault();
28861         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
28862         var doc = this.core.doc;
28863           //add a new line
28864        
28865     
28866         var sel = this.core.getSelection();
28867         var range = sel.getRangeAt(0);
28868         var n = range.commonAncestorContainer;
28869         var pc = range.closest([ 'ol', 'ul']);
28870         var pli = range.closest('li');
28871         if (!pc || e.ctrlKey) {
28872             // on it list, or ctrl pressed.
28873             if (!e.ctrlKey) {
28874                 sel.insertNode('br', 'after'); 
28875             } else {
28876                 // only do this if we have ctrl key..
28877                 var br = doc.createElement('br');
28878                 br.className = 'clear';
28879                 br.setAttribute('style', 'clear: both');
28880                 sel.insertNode(br, 'after'); 
28881             }
28882             
28883          
28884             this.core.undoManager.addEvent();
28885             this.core.fireEditorEvent(e);
28886             return false;
28887         }
28888         
28889         // deal with <li> insetion
28890         if (pli.innerText.trim() == '' &&
28891             pli.previousSibling &&
28892             pli.previousSibling.nodeName == 'LI' &&
28893             pli.previousSibling.innerText.trim() ==  '') {
28894             pli.parentNode.removeChild(pli.previousSibling);
28895             sel.cursorAfter(pc);
28896             this.core.undoManager.addEvent();
28897             this.core.fireEditorEvent(e);
28898             return false;
28899         }
28900     
28901         var li = doc.createElement('LI');
28902         li.innerHTML = '&nbsp;';
28903         if (!pli || !pli.firstSibling) {
28904             pc.appendChild(li);
28905         } else {
28906             pli.parentNode.insertBefore(li, pli.firstSibling);
28907         }
28908         sel.cursorText (li.firstChild);
28909       
28910         this.core.undoManager.addEvent();
28911         this.core.fireEditorEvent(e);
28912
28913         return false;
28914         
28915     
28916         
28917         
28918          
28919     }
28920 };
28921      
28922 /**
28923  * @class Roo.htmleditor.Block
28924  * Base class for html editor blocks - do not use it directly .. extend it..
28925  * @cfg {DomElement} node The node to apply stuff to.
28926  * @cfg {String} friendly_name the name that appears in the context bar about this block
28927  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
28928  
28929  * @constructor
28930  * Create a new Filter.
28931  * @param {Object} config Configuration options
28932  */
28933
28934 Roo.htmleditor.Block  = function(cfg)
28935 {
28936     // do nothing .. should not be called really.
28937 }
28938 /**
28939  * factory method to get the block from an element (using cache if necessary)
28940  * @static
28941  * @param {HtmlElement} the dom element
28942  */
28943 Roo.htmleditor.Block.factory = function(node)
28944 {
28945     var cc = Roo.htmleditor.Block.cache;
28946     var id = Roo.get(node).id;
28947     if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
28948         Roo.htmleditor.Block.cache[id].readElement(node);
28949         return Roo.htmleditor.Block.cache[id];
28950     }
28951     var db  = node.getAttribute('data-block');
28952     if (!db) {
28953         db = node.nodeName.toLowerCase().toUpperCaseFirst();
28954     }
28955     var cls = Roo.htmleditor['Block' + db];
28956     if (typeof(cls) == 'undefined') {
28957         //Roo.log(node.getAttribute('data-block'));
28958         Roo.log("OOps missing block : " + 'Block' + db);
28959         return false;
28960     }
28961     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
28962     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
28963 };
28964
28965 /**
28966  * initalize all Elements from content that are 'blockable'
28967  * @static
28968  * @param the body element
28969  */
28970 Roo.htmleditor.Block.initAll = function(body, type)
28971 {
28972     if (typeof(type) == 'undefined') {
28973         var ia = Roo.htmleditor.Block.initAll;
28974         ia(body,'table');
28975         ia(body,'td');
28976         ia(body,'figure');
28977         return;
28978     }
28979     Roo.each(Roo.get(body).query(type), function(e) {
28980         Roo.htmleditor.Block.factory(e);    
28981     },this);
28982 };
28983 // question goes here... do we need to clear out this cache sometimes?
28984 // or show we make it relivant to the htmleditor.
28985 Roo.htmleditor.Block.cache = {};
28986
28987 Roo.htmleditor.Block.prototype = {
28988     
28989     node : false,
28990     
28991      // used by context menu
28992     friendly_name : 'Based Block',
28993     
28994     // text for button to delete this element
28995     deleteTitle : false,
28996     
28997     context : false,
28998     /**
28999      * Update a node with values from this object
29000      * @param {DomElement} node
29001      */
29002     updateElement : function(node)
29003     {
29004         Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
29005     },
29006      /**
29007      * convert to plain HTML for calling insertAtCursor..
29008      */
29009     toHTML : function()
29010     {
29011         return Roo.DomHelper.markup(this.toObject());
29012     },
29013     /**
29014      * used by readEleemnt to extract data from a node
29015      * may need improving as it's pretty basic
29016      
29017      * @param {DomElement} node
29018      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
29019      * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
29020      * @param {String} style the style property - eg. text-align
29021      */
29022     getVal : function(node, tag, attr, style)
29023     {
29024         var n = node;
29025         if (tag !== true && n.tagName != tag.toUpperCase()) {
29026             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
29027             // but kiss for now.
29028             n = node.getElementsByTagName(tag).item(0);
29029         }
29030         if (!n) {
29031             return '';
29032         }
29033         if (attr === false) {
29034             return n;
29035         }
29036         if (attr == 'html') {
29037             return n.innerHTML;
29038         }
29039         if (attr == 'style') {
29040             return n.style[style]; 
29041         }
29042         
29043         return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
29044             
29045     },
29046     /**
29047      * create a DomHelper friendly object - for use with 
29048      * Roo.DomHelper.markup / overwrite / etc..
29049      * (override this)
29050      */
29051     toObject : function()
29052     {
29053         return {};
29054     },
29055       /**
29056      * Read a node that has a 'data-block' property - and extract the values from it.
29057      * @param {DomElement} node - the node
29058      */
29059     readElement : function(node)
29060     {
29061         
29062     } 
29063     
29064     
29065 };
29066
29067  
29068
29069 /**
29070  * @class Roo.htmleditor.BlockFigure
29071  * Block that has an image and a figcaption
29072  * @cfg {String} image_src the url for the image
29073  * @cfg {String} align (left|right) alignment for the block default left
29074  * @cfg {String} caption the text to appear below  (and in the alt tag)
29075  * @cfg {String} caption_display (block|none) display or not the caption
29076  * @cfg {String|number} image_width the width of the image number or %?
29077  * @cfg {String|number} image_height the height of the image number or %?
29078  * 
29079  * @constructor
29080  * Create a new Filter.
29081  * @param {Object} config Configuration options
29082  */
29083
29084 Roo.htmleditor.BlockFigure = function(cfg)
29085 {
29086     if (cfg.node) {
29087         this.readElement(cfg.node);
29088         this.updateElement(cfg.node);
29089     }
29090     Roo.apply(this, cfg);
29091 }
29092 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
29093  
29094     
29095     // setable values.
29096     image_src: '',
29097     align: 'center',
29098     caption : '',
29099     caption_display : 'block',
29100     width : '100%',
29101     cls : '',
29102     href: '',
29103     video_url : '',
29104     
29105     // margin: '2%', not used
29106     
29107     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
29108
29109     
29110     // used by context menu
29111     friendly_name : 'Image with caption',
29112     deleteTitle : "Delete Image and Caption",
29113     
29114     contextMenu : function(toolbar)
29115     {
29116         
29117         var block = function() {
29118             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
29119         };
29120         
29121         
29122         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
29123         
29124         var syncValue = toolbar.editorcore.syncValue;
29125         
29126         var fields = {};
29127         
29128         return [
29129              {
29130                 xtype : 'TextItem',
29131                 text : "Source: ",
29132                 xns : rooui.Toolbar  //Boostrap?
29133             },
29134             {
29135                 xtype : 'Button',
29136                 text: 'Change Image URL',
29137                  
29138                 listeners : {
29139                     click: function (btn, state)
29140                     {
29141                         var b = block();
29142                         
29143                         Roo.MessageBox.show({
29144                             title : "Image Source URL",
29145                             msg : "Enter the url for the image",
29146                             buttons: Roo.MessageBox.OKCANCEL,
29147                             fn: function(btn, val){
29148                                 if (btn != 'ok') {
29149                                     return;
29150                                 }
29151                                 b.image_src = val;
29152                                 b.updateElement();
29153                                 syncValue();
29154                                 toolbar.editorcore.onEditorEvent();
29155                             },
29156                             minWidth:250,
29157                             prompt:true,
29158                             //multiline: multiline,
29159                             modal : true,
29160                             value : b.image_src
29161                         });
29162                     }
29163                 },
29164                 xns : rooui.Toolbar
29165             },
29166          
29167             {
29168                 xtype : 'Button',
29169                 text: 'Change Link URL',
29170                  
29171                 listeners : {
29172                     click: function (btn, state)
29173                     {
29174                         var b = block();
29175                         
29176                         Roo.MessageBox.show({
29177                             title : "Link URL",
29178                             msg : "Enter the url for the link - leave blank to have no link",
29179                             buttons: Roo.MessageBox.OKCANCEL,
29180                             fn: function(btn, val){
29181                                 if (btn != 'ok') {
29182                                     return;
29183                                 }
29184                                 b.href = val;
29185                                 b.updateElement();
29186                                 syncValue();
29187                                 toolbar.editorcore.onEditorEvent();
29188                             },
29189                             minWidth:250,
29190                             prompt:true,
29191                             //multiline: multiline,
29192                             modal : true,
29193                             value : b.href
29194                         });
29195                     }
29196                 },
29197                 xns : rooui.Toolbar
29198             },
29199             {
29200                 xtype : 'Button',
29201                 text: 'Show Video URL',
29202                  
29203                 listeners : {
29204                     click: function (btn, state)
29205                     {
29206                         Roo.MessageBox.alert("Video URL",
29207                             block().video_url == '' ? 'This image is not linked ot a video' :
29208                                 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
29209                     }
29210                 },
29211                 xns : rooui.Toolbar
29212             },
29213             
29214             
29215             {
29216                 xtype : 'TextItem',
29217                 text : "Width: ",
29218                 xns : rooui.Toolbar  //Boostrap?
29219             },
29220             {
29221                 xtype : 'ComboBox',
29222                 allowBlank : false,
29223                 displayField : 'val',
29224                 editable : true,
29225                 listWidth : 100,
29226                 triggerAction : 'all',
29227                 typeAhead : true,
29228                 valueField : 'val',
29229                 width : 70,
29230                 name : 'width',
29231                 listeners : {
29232                     select : function (combo, r, index)
29233                     {
29234                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29235                         var b = block();
29236                         b.width = r.get('val');
29237                         b.updateElement();
29238                         syncValue();
29239                         toolbar.editorcore.onEditorEvent();
29240                     }
29241                 },
29242                 xns : rooui.form,
29243                 store : {
29244                     xtype : 'SimpleStore',
29245                     data : [
29246                         ['100%'],
29247                         ['80%'],
29248                         ['50%'],
29249                         ['20%'],
29250                         ['10%']
29251                     ],
29252                     fields : [ 'val'],
29253                     xns : Roo.data
29254                 }
29255             },
29256             {
29257                 xtype : 'TextItem',
29258                 text : "Align: ",
29259                 xns : rooui.Toolbar  //Boostrap?
29260             },
29261             {
29262                 xtype : 'ComboBox',
29263                 allowBlank : false,
29264                 displayField : 'val',
29265                 editable : true,
29266                 listWidth : 100,
29267                 triggerAction : 'all',
29268                 typeAhead : true,
29269                 valueField : 'val',
29270                 width : 70,
29271                 name : 'align',
29272                 listeners : {
29273                     select : function (combo, r, index)
29274                     {
29275                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29276                         var b = block();
29277                         b.align = r.get('val');
29278                         b.updateElement();
29279                         syncValue();
29280                         toolbar.editorcore.onEditorEvent();
29281                     }
29282                 },
29283                 xns : rooui.form,
29284                 store : {
29285                     xtype : 'SimpleStore',
29286                     data : [
29287                         ['left'],
29288                         ['right'],
29289                         ['center']
29290                     ],
29291                     fields : [ 'val'],
29292                     xns : Roo.data
29293                 }
29294             },
29295             
29296             
29297             {
29298                 xtype : 'Button',
29299                 text: 'Hide Caption',
29300                 name : 'caption_display',
29301                 pressed : false,
29302                 enableToggle : true,
29303                 setValue : function(v) {
29304                     // this trigger toggle.
29305                      
29306                     this.setText(v ? "Hide Caption" : "Show Caption");
29307                     this.setPressed(v != 'block');
29308                 },
29309                 listeners : {
29310                     toggle: function (btn, state)
29311                     {
29312                         var b  = block();
29313                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
29314                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
29315                         b.updateElement();
29316                         syncValue();
29317                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29318                         toolbar.editorcore.onEditorEvent();
29319                     }
29320                 },
29321                 xns : rooui.Toolbar
29322             }
29323         ];
29324         
29325     },
29326     /**
29327      * create a DomHelper friendly object - for use with
29328      * Roo.DomHelper.markup / overwrite / etc..
29329      */
29330     toObject : function()
29331     {
29332         var d = document.createElement('div');
29333         d.innerHTML = this.caption;
29334         
29335         var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
29336         
29337         var iw = this.align == 'center' ? this.width : '100%';
29338         var img =   {
29339             tag : 'img',
29340             contenteditable : 'false',
29341             src : this.image_src,
29342             alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
29343             style: {
29344                 width : iw,
29345                 maxWidth : iw + ' !important', // this is not getting rendered?
29346                 margin : m  
29347                 
29348             }
29349         };
29350         /*
29351         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
29352                     '<a href="{2}">' + 
29353                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
29354                     '</a>' + 
29355                 '</div>',
29356         */
29357                 
29358         if (this.href.length > 0) {
29359             img = {
29360                 tag : 'a',
29361                 href: this.href,
29362                 contenteditable : 'true',
29363                 cn : [
29364                     img
29365                 ]
29366             };
29367         }
29368         
29369         
29370         if (this.video_url.length > 0) {
29371             img = {
29372                 tag : 'div',
29373                 cls : this.cls,
29374                 frameborder : 0,
29375                 allowfullscreen : true,
29376                 width : 420,  // these are for video tricks - that we replace the outer
29377                 height : 315,
29378                 src : this.video_url,
29379                 cn : [
29380                     img
29381                 ]
29382             };
29383         }
29384         // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
29385         var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
29386         
29387   
29388         var ret =   {
29389             tag: 'figure',
29390             'data-block' : 'Figure',
29391             'data-width' : this.width, 
29392             contenteditable : 'false',
29393             
29394             style : {
29395                 display: 'block',
29396                 float :  this.align ,
29397                 maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
29398                 width : this.align == 'center' ? '100%' : this.width,
29399                 margin:  '0px',
29400                 padding: this.align == 'center' ? '0' : '0 10px' ,
29401                 textAlign : this.align   // seems to work for email..
29402                 
29403             },
29404            
29405             
29406             align : this.align,
29407             cn : [
29408                 img,
29409               
29410                 {
29411                     tag: 'figcaption',
29412                     'data-display' : this.caption_display,
29413                     style : {
29414                         textAlign : 'left',
29415                         fontSize : '16px',
29416                         lineHeight : '24px',
29417                         display : this.caption_display,
29418                         maxWidth : (this.align == 'center' ?  this.width : '100%' ) + ' !important',
29419                         margin: m,
29420                         width: this.align == 'center' ?  this.width : '100%' 
29421                     
29422                          
29423                     },
29424                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
29425                     cn : [
29426                         {
29427                             tag: 'div',
29428                             style  : {
29429                                 marginTop : '16px',
29430                                 textAlign : 'left'
29431                             },
29432                             align: 'left',
29433                             cn : [
29434                                 {
29435                                     // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
29436                                     tag : 'i',
29437                                     contenteditable : true,
29438                                     html : captionhtml
29439                                 }
29440                                 
29441                             ]
29442                         }
29443                         
29444                     ]
29445                     
29446                 }
29447             ]
29448         };
29449         return ret;
29450          
29451     },
29452     
29453     readElement : function(node)
29454     {
29455         // this should not really come from the link...
29456         this.video_url = this.getVal(node, 'div', 'src');
29457         this.cls = this.getVal(node, 'div', 'class');
29458         this.href = this.getVal(node, 'a', 'href');
29459         
29460         
29461         this.image_src = this.getVal(node, 'img', 'src');
29462          
29463         this.align = this.getVal(node, 'figure', 'align');
29464         var figcaption = this.getVal(node, 'figcaption', false);
29465         if (figcaption !== '') {
29466             this.caption = this.getVal(figcaption, 'i', 'html');
29467         }
29468         
29469
29470         this.caption_display = this.getVal(node, 'figcaption', 'data-display');
29471         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
29472         this.width = this.getVal(node, true, 'data-width');
29473         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
29474         
29475     },
29476     removeNode : function()
29477     {
29478         return this.node;
29479     }
29480     
29481   
29482    
29483      
29484     
29485     
29486     
29487     
29488 })
29489
29490  
29491
29492 /**
29493  * @class Roo.htmleditor.BlockTable
29494  * Block that manages a table
29495  * 
29496  * @constructor
29497  * Create a new Filter.
29498  * @param {Object} config Configuration options
29499  */
29500
29501 Roo.htmleditor.BlockTable = function(cfg)
29502 {
29503     if (cfg.node) {
29504         this.readElement(cfg.node);
29505         this.updateElement(cfg.node);
29506     }
29507     Roo.apply(this, cfg);
29508     if (!cfg.node) {
29509         this.rows = [];
29510         for(var r = 0; r < this.no_row; r++) {
29511             this.rows[r] = [];
29512             for(var c = 0; c < this.no_col; c++) {
29513                 this.rows[r][c] = this.emptyCell();
29514             }
29515         }
29516     }
29517     
29518     
29519 }
29520 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
29521  
29522     rows : false,
29523     no_col : 1,
29524     no_row : 1,
29525     
29526     
29527     width: '100%',
29528     
29529     // used by context menu
29530     friendly_name : 'Table',
29531     deleteTitle : 'Delete Table',
29532     // context menu is drawn once..
29533     
29534     contextMenu : function(toolbar)
29535     {
29536         
29537         var block = function() {
29538             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
29539         };
29540         
29541         
29542         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
29543         
29544         var syncValue = toolbar.editorcore.syncValue;
29545         
29546         var fields = {};
29547         
29548         return [
29549             {
29550                 xtype : 'TextItem',
29551                 text : "Width: ",
29552                 xns : rooui.Toolbar  //Boostrap?
29553             },
29554             {
29555                 xtype : 'ComboBox',
29556                 allowBlank : false,
29557                 displayField : 'val',
29558                 editable : true,
29559                 listWidth : 100,
29560                 triggerAction : 'all',
29561                 typeAhead : true,
29562                 valueField : 'val',
29563                 width : 100,
29564                 name : 'width',
29565                 listeners : {
29566                     select : function (combo, r, index)
29567                     {
29568                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29569                         var b = block();
29570                         b.width = r.get('val');
29571                         b.updateElement();
29572                         syncValue();
29573                         toolbar.editorcore.onEditorEvent();
29574                     }
29575                 },
29576                 xns : rooui.form,
29577                 store : {
29578                     xtype : 'SimpleStore',
29579                     data : [
29580                         ['100%'],
29581                         ['auto']
29582                     ],
29583                     fields : [ 'val'],
29584                     xns : Roo.data
29585                 }
29586             },
29587             // -------- Cols
29588             
29589             {
29590                 xtype : 'TextItem',
29591                 text : "Columns: ",
29592                 xns : rooui.Toolbar  //Boostrap?
29593             },
29594          
29595             {
29596                 xtype : 'Button',
29597                 text: '-',
29598                 listeners : {
29599                     click : function (_self, e)
29600                     {
29601                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29602                         block().removeColumn();
29603                         syncValue();
29604                         toolbar.editorcore.onEditorEvent();
29605                     }
29606                 },
29607                 xns : rooui.Toolbar
29608             },
29609             {
29610                 xtype : 'Button',
29611                 text: '+',
29612                 listeners : {
29613                     click : function (_self, e)
29614                     {
29615                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29616                         block().addColumn();
29617                         syncValue();
29618                         toolbar.editorcore.onEditorEvent();
29619                     }
29620                 },
29621                 xns : rooui.Toolbar
29622             },
29623             // -------- ROWS
29624             {
29625                 xtype : 'TextItem',
29626                 text : "Rows: ",
29627                 xns : rooui.Toolbar  //Boostrap?
29628             },
29629          
29630             {
29631                 xtype : 'Button',
29632                 text: '-',
29633                 listeners : {
29634                     click : function (_self, e)
29635                     {
29636                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
29637                         block().removeRow();
29638                         syncValue();
29639                         toolbar.editorcore.onEditorEvent();
29640                     }
29641                 },
29642                 xns : rooui.Toolbar
29643             },
29644             {
29645                 xtype : 'Button',
29646                 text: '+',
29647                 listeners : {
29648                     click : function (_self, e)
29649                     {
29650                         block().addRow();
29651                         syncValue();
29652                         toolbar.editorcore.onEditorEvent();
29653                     }
29654                 },
29655                 xns : rooui.Toolbar
29656             },
29657             // -------- ROWS
29658             {
29659                 xtype : 'Button',
29660                 text: 'Reset Column Widths',
29661                 listeners : {
29662                     
29663                     click : function (_self, e)
29664                     {
29665                         block().resetWidths();
29666                         syncValue();
29667                         toolbar.editorcore.onEditorEvent();
29668                     }
29669                 },
29670                 xns : rooui.Toolbar
29671             } 
29672             
29673             
29674             
29675         ];
29676         
29677     },
29678     
29679     
29680   /**
29681      * create a DomHelper friendly object - for use with
29682      * Roo.DomHelper.markup / overwrite / etc..
29683      * ?? should it be called with option to hide all editing features?
29684      */
29685     toObject : function()
29686     {
29687         
29688         var ret = {
29689             tag : 'table',
29690             contenteditable : 'false', // this stops cell selection from picking the table.
29691             'data-block' : 'Table',
29692             style : {
29693                 width:  this.width,
29694                 border : 'solid 1px #000', // ??? hard coded?
29695                 'border-collapse' : 'collapse' 
29696             },
29697             cn : [
29698                 { tag : 'tbody' , cn : [] }
29699             ]
29700         };
29701         
29702         // do we have a head = not really 
29703         var ncols = 0;
29704         Roo.each(this.rows, function( row ) {
29705             var tr = {
29706                 tag: 'tr',
29707                 style : {
29708                     margin: '6px',
29709                     border : 'solid 1px #000',
29710                     textAlign : 'left' 
29711                 },
29712                 cn : [ ]
29713             };
29714             
29715             ret.cn[0].cn.push(tr);
29716             // does the row have any properties? ?? height?
29717             var nc = 0;
29718             Roo.each(row, function( cell ) {
29719                 
29720                 var td = {
29721                     tag : 'td',
29722                     contenteditable :  'true',
29723                     'data-block' : 'Td',
29724                     html : cell.html,
29725                     style : cell.style
29726                 };
29727                 if (cell.colspan > 1) {
29728                     td.colspan = cell.colspan ;
29729                     nc += cell.colspan;
29730                 } else {
29731                     nc++;
29732                 }
29733                 if (cell.rowspan > 1) {
29734                     td.rowspan = cell.rowspan ;
29735                 }
29736                 
29737                 
29738                 // widths ?
29739                 tr.cn.push(td);
29740                     
29741                 
29742             }, this);
29743             ncols = Math.max(nc, ncols);
29744             
29745             
29746         }, this);
29747         // add the header row..
29748         
29749         ncols++;
29750          
29751         
29752         return ret;
29753          
29754     },
29755     
29756     readElement : function(node)
29757     {
29758         node  = node ? node : this.node ;
29759         this.width = this.getVal(node, true, 'style', 'width') || '100%';
29760         
29761         this.rows = [];
29762         this.no_row = 0;
29763         var trs = Array.from(node.rows);
29764         trs.forEach(function(tr) {
29765             var row =  [];
29766             this.rows.push(row);
29767             
29768             this.no_row++;
29769             var no_column = 0;
29770             Array.from(tr.cells).forEach(function(td) {
29771                 
29772                 var add = {
29773                     colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
29774                     rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
29775                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
29776                     html : td.innerHTML
29777                 };
29778                 no_column += add.colspan;
29779                      
29780                 
29781                 row.push(add);
29782                 
29783                 
29784             },this);
29785             this.no_col = Math.max(this.no_col, no_column);
29786             
29787             
29788         },this);
29789         
29790         
29791     },
29792     normalizeRows: function()
29793     {
29794         var ret= [];
29795         var rid = -1;
29796         this.rows.forEach(function(row) {
29797             rid++;
29798             ret[rid] = [];
29799             row = this.normalizeRow(row);
29800             var cid = 0;
29801             row.forEach(function(c) {
29802                 while (typeof(ret[rid][cid]) != 'undefined') {
29803                     cid++;
29804                 }
29805                 if (typeof(ret[rid]) == 'undefined') {
29806                     ret[rid] = [];
29807                 }
29808                 ret[rid][cid] = c;
29809                 c.row = rid;
29810                 c.col = cid;
29811                 if (c.rowspan < 2) {
29812                     return;
29813                 }
29814                 
29815                 for(var i = 1 ;i < c.rowspan; i++) {
29816                     if (typeof(ret[rid+i]) == 'undefined') {
29817                         ret[rid+i] = [];
29818                     }
29819                     ret[rid+i][cid] = c;
29820                 }
29821             });
29822         }, this);
29823         return ret;
29824     
29825     },
29826     
29827     normalizeRow: function(row)
29828     {
29829         var ret= [];
29830         row.forEach(function(c) {
29831             if (c.colspan < 2) {
29832                 ret.push(c);
29833                 return;
29834             }
29835             for(var i =0 ;i < c.colspan; i++) {
29836                 ret.push(c);
29837             }
29838         });
29839         return ret;
29840     
29841     },
29842     
29843     deleteColumn : function(sel)
29844     {
29845         if (!sel || sel.type != 'col') {
29846             return;
29847         }
29848         if (this.no_col < 2) {
29849             return;
29850         }
29851         
29852         this.rows.forEach(function(row) {
29853             var cols = this.normalizeRow(row);
29854             var col = cols[sel.col];
29855             if (col.colspan > 1) {
29856                 col.colspan --;
29857             } else {
29858                 row.remove(col);
29859             }
29860             
29861         }, this);
29862         this.no_col--;
29863         
29864     },
29865     removeColumn : function()
29866     {
29867         this.deleteColumn({
29868             type: 'col',
29869             col : this.no_col-1
29870         });
29871         this.updateElement();
29872     },
29873     
29874      
29875     addColumn : function()
29876     {
29877         
29878         this.rows.forEach(function(row) {
29879             row.push(this.emptyCell());
29880            
29881         }, this);
29882         this.updateElement();
29883     },
29884     
29885     deleteRow : function(sel)
29886     {
29887         if (!sel || sel.type != 'row') {
29888             return;
29889         }
29890         
29891         if (this.no_row < 2) {
29892             return;
29893         }
29894         
29895         var rows = this.normalizeRows();
29896         
29897         
29898         rows[sel.row].forEach(function(col) {
29899             if (col.rowspan > 1) {
29900                 col.rowspan--;
29901             } else {
29902                 col.remove = 1; // flage it as removed.
29903             }
29904             
29905         }, this);
29906         var newrows = [];
29907         this.rows.forEach(function(row) {
29908             newrow = [];
29909             row.forEach(function(c) {
29910                 if (typeof(c.remove) == 'undefined') {
29911                     newrow.push(c);
29912                 }
29913                 
29914             });
29915             if (newrow.length > 0) {
29916                 newrows.push(row);
29917             }
29918         });
29919         this.rows =  newrows;
29920         
29921         
29922         
29923         this.no_row--;
29924         this.updateElement();
29925         
29926     },
29927     removeRow : function()
29928     {
29929         this.deleteRow({
29930             type: 'row',
29931             row : this.no_row-1
29932         });
29933         
29934     },
29935     
29936      
29937     addRow : function()
29938     {
29939         
29940         var row = [];
29941         for (var i = 0; i < this.no_col; i++ ) {
29942             
29943             row.push(this.emptyCell());
29944            
29945         }
29946         this.rows.push(row);
29947         this.updateElement();
29948         
29949     },
29950      
29951     // the default cell object... at present...
29952     emptyCell : function() {
29953         return (new Roo.htmleditor.BlockTd({})).toObject();
29954         
29955      
29956     },
29957     
29958     removeNode : function()
29959     {
29960         return this.node;
29961     },
29962     
29963     
29964     
29965     resetWidths : function()
29966     {
29967         Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
29968             var nn = Roo.htmleditor.Block.factory(n);
29969             nn.width = '';
29970             nn.updateElement(n);
29971         });
29972     }
29973     
29974     
29975     
29976     
29977 })
29978
29979 /**
29980  *
29981  * editing a TD?
29982  *
29983  * since selections really work on the table cell, then editing really should work from there
29984  *
29985  * The original plan was to support merging etc... - but that may not be needed yet..
29986  *
29987  * So this simple version will support:
29988  *   add/remove cols
29989  *   adjust the width +/-
29990  *   reset the width...
29991  *   
29992  *
29993  */
29994
29995
29996  
29997
29998 /**
29999  * @class Roo.htmleditor.BlockTable
30000  * Block that manages a table
30001  * 
30002  * @constructor
30003  * Create a new Filter.
30004  * @param {Object} config Configuration options
30005  */
30006
30007 Roo.htmleditor.BlockTd = function(cfg)
30008 {
30009     if (cfg.node) {
30010         this.readElement(cfg.node);
30011         this.updateElement(cfg.node);
30012     }
30013     Roo.apply(this, cfg);
30014      
30015     
30016     
30017 }
30018 Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
30019  
30020     node : false,
30021     
30022     width: '',
30023     textAlign : 'left',
30024     valign : 'top',
30025     
30026     colspan : 1,
30027     rowspan : 1,
30028     
30029     
30030     // used by context menu
30031     friendly_name : 'Table Cell',
30032     deleteTitle : false, // use our customer delete
30033     
30034     // context menu is drawn once..
30035     
30036     contextMenu : function(toolbar)
30037     {
30038         
30039         var cell = function() {
30040             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
30041         };
30042         
30043         var table = function() {
30044             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
30045         };
30046         
30047         var lr = false;
30048         var saveSel = function()
30049         {
30050             lr = toolbar.editorcore.getSelection().getRangeAt(0);
30051         }
30052         var restoreSel = function()
30053         {
30054             if (lr) {
30055                 (function() {
30056                     toolbar.editorcore.focus();
30057                     var cr = toolbar.editorcore.getSelection();
30058                     cr.removeAllRanges();
30059                     cr.addRange(lr);
30060                     toolbar.editorcore.onEditorEvent();
30061                 }).defer(10, this);
30062                 
30063                 
30064             }
30065         }
30066         
30067         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
30068         
30069         var syncValue = toolbar.editorcore.syncValue;
30070         
30071         var fields = {};
30072         
30073         return [
30074             {
30075                 xtype : 'Button',
30076                 text : 'Edit Table',
30077                 listeners : {
30078                     click : function() {
30079                         var t = toolbar.tb.selectedNode.closest('table');
30080                         toolbar.editorcore.selectNode(t);
30081                         toolbar.editorcore.onEditorEvent();                        
30082                     }
30083                 }
30084                 
30085             },
30086               
30087            
30088              
30089             {
30090                 xtype : 'TextItem',
30091                 text : "Column Width: ",
30092                  xns : rooui.Toolbar 
30093                
30094             },
30095             {
30096                 xtype : 'Button',
30097                 text: '-',
30098                 listeners : {
30099                     click : function (_self, e)
30100                     {
30101                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30102                         cell().shrinkColumn();
30103                         syncValue();
30104                          toolbar.editorcore.onEditorEvent();
30105                     }
30106                 },
30107                 xns : rooui.Toolbar
30108             },
30109             {
30110                 xtype : 'Button',
30111                 text: '+',
30112                 listeners : {
30113                     click : function (_self, e)
30114                     {
30115                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30116                         cell().growColumn();
30117                         syncValue();
30118                         toolbar.editorcore.onEditorEvent();
30119                     }
30120                 },
30121                 xns : rooui.Toolbar
30122             },
30123             
30124             {
30125                 xtype : 'TextItem',
30126                 text : "Vertical Align: ",
30127                 xns : rooui.Toolbar  //Boostrap?
30128             },
30129             {
30130                 xtype : 'ComboBox',
30131                 allowBlank : false,
30132                 displayField : 'val',
30133                 editable : true,
30134                 listWidth : 100,
30135                 triggerAction : 'all',
30136                 typeAhead : true,
30137                 valueField : 'val',
30138                 width : 100,
30139                 name : 'valign',
30140                 listeners : {
30141                     select : function (combo, r, index)
30142                     {
30143                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30144                         var b = cell();
30145                         b.valign = r.get('val');
30146                         b.updateElement();
30147                         syncValue();
30148                         toolbar.editorcore.onEditorEvent();
30149                     }
30150                 },
30151                 xns : rooui.form,
30152                 store : {
30153                     xtype : 'SimpleStore',
30154                     data : [
30155                         ['top'],
30156                         ['middle'],
30157                         ['bottom'] // there are afew more... 
30158                     ],
30159                     fields : [ 'val'],
30160                     xns : Roo.data
30161                 }
30162             },
30163             
30164             {
30165                 xtype : 'TextItem',
30166                 text : "Merge Cells: ",
30167                  xns : rooui.Toolbar 
30168                
30169             },
30170             
30171             
30172             {
30173                 xtype : 'Button',
30174                 text: 'Right',
30175                 listeners : {
30176                     click : function (_self, e)
30177                     {
30178                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30179                         cell().mergeRight();
30180                         //block().growColumn();
30181                         syncValue();
30182                         toolbar.editorcore.onEditorEvent();
30183                     }
30184                 },
30185                 xns : rooui.Toolbar
30186             },
30187              
30188             {
30189                 xtype : 'Button',
30190                 text: 'Below',
30191                 listeners : {
30192                     click : function (_self, e)
30193                     {
30194                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30195                         cell().mergeBelow();
30196                         //block().growColumn();
30197                         syncValue();
30198                         toolbar.editorcore.onEditorEvent();
30199                     }
30200                 },
30201                 xns : rooui.Toolbar
30202             },
30203             {
30204                 xtype : 'TextItem',
30205                 text : "| ",
30206                  xns : rooui.Toolbar 
30207                
30208             },
30209             
30210             {
30211                 xtype : 'Button',
30212                 text: 'Split',
30213                 listeners : {
30214                     click : function (_self, e)
30215                     {
30216                         //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30217                         cell().split();
30218                         syncValue();
30219                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
30220                         toolbar.editorcore.onEditorEvent();
30221                                              
30222                     }
30223                 },
30224                 xns : rooui.Toolbar
30225             },
30226             {
30227                 xtype : 'Fill',
30228                 xns : rooui.Toolbar 
30229                
30230             },
30231         
30232           
30233             {
30234                 xtype : 'Button',
30235                 text: 'Delete',
30236                  
30237                 xns : rooui.Toolbar,
30238                 menu : {
30239                     xtype : 'Menu',
30240                     xns : rooui.menu,
30241                     items : [
30242                         {
30243                             xtype : 'Item',
30244                             html: 'Column',
30245                             listeners : {
30246                                 click : function (_self, e)
30247                                 {
30248                                     var t = table();
30249                                     
30250                                     cell().deleteColumn();
30251                                     syncValue();
30252                                     toolbar.editorcore.selectNode(t.node);
30253                                     toolbar.editorcore.onEditorEvent();   
30254                                 }
30255                             },
30256                             xns : rooui.menu
30257                         },
30258                         {
30259                             xtype : 'Item',
30260                             html: 'Row',
30261                             listeners : {
30262                                 click : function (_self, e)
30263                                 {
30264                                     var t = table();
30265                                     cell().deleteRow();
30266                                     syncValue();
30267                                     
30268                                     toolbar.editorcore.selectNode(t.node);
30269                                     toolbar.editorcore.onEditorEvent();   
30270                                                          
30271                                 }
30272                             },
30273                             xns : rooui.menu
30274                         },
30275                        {
30276                             xtype : 'Separator',
30277                             xns : rooui.menu
30278                         },
30279                         {
30280                             xtype : 'Item',
30281                             html: 'Table',
30282                             listeners : {
30283                                 click : function (_self, e)
30284                                 {
30285                                     var t = table();
30286                                     var nn = t.node.nextSibling || t.node.previousSibling;
30287                                     t.node.parentNode.removeChild(t.node);
30288                                     if (nn) { 
30289                                         toolbar.editorcore.selectNode(nn, true);
30290                                     }
30291                                     toolbar.editorcore.onEditorEvent();   
30292                                                          
30293                                 }
30294                             },
30295                             xns : rooui.menu
30296                         }
30297                     ]
30298                 }
30299             }
30300             
30301             // align... << fixme
30302             
30303         ];
30304         
30305     },
30306     
30307     
30308   /**
30309      * create a DomHelper friendly object - for use with
30310      * Roo.DomHelper.markup / overwrite / etc..
30311      * ?? should it be called with option to hide all editing features?
30312      */
30313  /**
30314      * create a DomHelper friendly object - for use with
30315      * Roo.DomHelper.markup / overwrite / etc..
30316      * ?? should it be called with option to hide all editing features?
30317      */
30318     toObject : function()
30319     {
30320         var ret = {
30321             tag : 'td',
30322             contenteditable : 'true', // this stops cell selection from picking the table.
30323             'data-block' : 'Td',
30324             valign : this.valign,
30325             style : {  
30326                 'text-align' :  this.textAlign,
30327                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
30328                 'border-collapse' : 'collapse',
30329                 padding : '6px', // 8 for desktop / 4 for mobile
30330                 'vertical-align': this.valign
30331             },
30332             html : this.html
30333         };
30334         if (this.width != '') {
30335             ret.width = this.width;
30336             ret.style.width = this.width;
30337         }
30338         
30339         
30340         if (this.colspan > 1) {
30341             ret.colspan = this.colspan ;
30342         } 
30343         if (this.rowspan > 1) {
30344             ret.rowspan = this.rowspan ;
30345         }
30346         
30347            
30348         
30349         return ret;
30350          
30351     },
30352     
30353     readElement : function(node)
30354     {
30355         node  = node ? node : this.node ;
30356         this.width = node.style.width;
30357         this.colspan = Math.max(1,1*node.getAttribute('colspan'));
30358         this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
30359         this.html = node.innerHTML;
30360         if (node.style.textAlign != '') {
30361             this.textAlign = node.style.textAlign;
30362         }
30363         
30364         
30365     },
30366      
30367     // the default cell object... at present...
30368     emptyCell : function() {
30369         return {
30370             colspan :  1,
30371             rowspan :  1,
30372             textAlign : 'left',
30373             html : "&nbsp;" // is this going to be editable now?
30374         };
30375      
30376     },
30377     
30378     removeNode : function()
30379     {
30380         return this.node.closest('table');
30381          
30382     },
30383     
30384     cellData : false,
30385     
30386     colWidths : false,
30387     
30388     toTableArray  : function()
30389     {
30390         var ret = [];
30391         var tab = this.node.closest('tr').closest('table');
30392         Array.from(tab.rows).forEach(function(r, ri){
30393             ret[ri] = [];
30394         });
30395         var rn = 0;
30396         this.colWidths = [];
30397         var all_auto = true;
30398         Array.from(tab.rows).forEach(function(r, ri){
30399             
30400             var cn = 0;
30401             Array.from(r.cells).forEach(function(ce, ci){
30402                 var c =  {
30403                     cell : ce,
30404                     row : rn,
30405                     col: cn,
30406                     colspan : ce.colSpan,
30407                     rowspan : ce.rowSpan
30408                 };
30409                 if (ce.isEqualNode(this.node)) {
30410                     this.cellData = c;
30411                 }
30412                 // if we have been filled up by a row?
30413                 if (typeof(ret[rn][cn]) != 'undefined') {
30414                     while(typeof(ret[rn][cn]) != 'undefined') {
30415                         cn++;
30416                     }
30417                     c.col = cn;
30418                 }
30419                 
30420                 if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
30421                     this.colWidths[cn] =   ce.style.width;
30422                     if (this.colWidths[cn] != '') {
30423                         all_auto = false;
30424                     }
30425                 }
30426                 
30427                 
30428                 if (c.colspan < 2 && c.rowspan < 2 ) {
30429                     ret[rn][cn] = c;
30430                     cn++;
30431                     return;
30432                 }
30433                 for(var j = 0; j < c.rowspan; j++) {
30434                     if (typeof(ret[rn+j]) == 'undefined') {
30435                         continue; // we have a problem..
30436                     }
30437                     ret[rn+j][cn] = c;
30438                     for(var i = 0; i < c.colspan; i++) {
30439                         ret[rn+j][cn+i] = c;
30440                     }
30441                 }
30442                 
30443                 cn += c.colspan;
30444             }, this);
30445             rn++;
30446         }, this);
30447         
30448         // initalize widths.?
30449         // either all widths or no widths..
30450         if (all_auto) {
30451             this.colWidths[0] = false; // no widths flag.
30452         }
30453         
30454         
30455         return ret;
30456         
30457     },
30458     
30459     
30460     
30461     
30462     mergeRight: function()
30463     {
30464          
30465         // get the contents of the next cell along..
30466         var tr = this.node.closest('tr');
30467         var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
30468         if (i >= tr.childNodes.length - 1) {
30469             return; // no cells on right to merge with.
30470         }
30471         var table = this.toTableArray();
30472         
30473         if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
30474             return; // nothing right?
30475         }
30476         var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
30477         // right cell - must be same rowspan and on the same row.
30478         if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
30479             return; // right hand side is not same rowspan.
30480         }
30481         
30482         
30483         
30484         this.node.innerHTML += ' ' + rc.cell.innerHTML;
30485         tr.removeChild(rc.cell);
30486         this.colspan += rc.colspan;
30487         this.node.setAttribute('colspan', this.colspan);
30488
30489         var table = this.toTableArray();
30490         this.normalizeWidths(table);
30491         this.updateWidths(table);
30492     },
30493     
30494     
30495     mergeBelow : function()
30496     {
30497         var table = this.toTableArray();
30498         if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
30499             return; // no row below
30500         }
30501         if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
30502             return; // nothing right?
30503         }
30504         var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
30505         
30506         if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
30507             return; // right hand side is not same rowspan.
30508         }
30509         this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
30510         rc.cell.parentNode.removeChild(rc.cell);
30511         this.rowspan += rc.rowspan;
30512         this.node.setAttribute('rowspan', this.rowspan);
30513     },
30514     
30515     split: function()
30516     {
30517         if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
30518             return;
30519         }
30520         var table = this.toTableArray();
30521         var cd = this.cellData;
30522         this.rowspan = 1;
30523         this.colspan = 1;
30524         
30525         for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
30526              
30527             
30528             for(var c = cd.col; c < cd.col + cd.colspan; c++) {
30529                 if (r == cd.row && c == cd.col) {
30530                     this.node.removeAttribute('rowspan');
30531                     this.node.removeAttribute('colspan');
30532                 }
30533                  
30534                 var ntd = this.node.cloneNode(); // which col/row should be 0..
30535                 ntd.removeAttribute('id'); 
30536                 ntd.style.width  = this.colWidths[c];
30537                 ntd.innerHTML = '';
30538                 table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
30539             }
30540             
30541         }
30542         this.redrawAllCells(table);
30543         
30544     },
30545     
30546     
30547     
30548     redrawAllCells: function(table)
30549     {
30550         
30551          
30552         var tab = this.node.closest('tr').closest('table');
30553         var ctr = tab.rows[0].parentNode;
30554         Array.from(tab.rows).forEach(function(r, ri){
30555             
30556             Array.from(r.cells).forEach(function(ce, ci){
30557                 ce.parentNode.removeChild(ce);
30558             });
30559             r.parentNode.removeChild(r);
30560         });
30561         for(var r = 0 ; r < table.length; r++) {
30562             var re = tab.rows[r];
30563             
30564             var re = tab.ownerDocument.createElement('tr');
30565             ctr.appendChild(re);
30566             for(var c = 0 ; c < table[r].length; c++) {
30567                 if (table[r][c].cell === false) {
30568                     continue;
30569                 }
30570                 
30571                 re.appendChild(table[r][c].cell);
30572                  
30573                 table[r][c].cell = false;
30574             }
30575         }
30576         
30577     },
30578     updateWidths : function(table)
30579     {
30580         for(var r = 0 ; r < table.length; r++) {
30581            
30582             for(var c = 0 ; c < table[r].length; c++) {
30583                 if (table[r][c].cell === false) {
30584                     continue;
30585                 }
30586                 
30587                 if (this.colWidths[0] != false && table[r][c].colspan < 2) {
30588                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
30589                     el.width = Math.floor(this.colWidths[c])  +'%';
30590                     el.updateElement(el.node);
30591                 }
30592                 if (this.colWidths[0] != false && table[r][c].colspan > 1) {
30593                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
30594                     var width = 0;
30595                     for(var i = 0; i < table[r][c].colspan; i ++) {
30596                         width += Math.floor(this.colWidths[c + i]);
30597                     }
30598                     el.width = width  +'%';
30599                     el.updateElement(el.node);
30600                 }
30601                 table[r][c].cell = false; // done
30602             }
30603         }
30604     },
30605     normalizeWidths : function(table)
30606     {
30607         if (this.colWidths[0] === false) {
30608             var nw = 100.0 / this.colWidths.length;
30609             this.colWidths.forEach(function(w,i) {
30610                 this.colWidths[i] = nw;
30611             },this);
30612             return;
30613         }
30614     
30615         var t = 0, missing = [];
30616         
30617         this.colWidths.forEach(function(w,i) {
30618             //if you mix % and
30619             this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
30620             var add =  this.colWidths[i];
30621             if (add > 0) {
30622                 t+=add;
30623                 return;
30624             }
30625             missing.push(i);
30626             
30627             
30628         },this);
30629         var nc = this.colWidths.length;
30630         if (missing.length) {
30631             var mult = (nc - missing.length) / (1.0 * nc);
30632             var t = mult * t;
30633             var ew = (100 -t) / (1.0 * missing.length);
30634             this.colWidths.forEach(function(w,i) {
30635                 if (w > 0) {
30636                     this.colWidths[i] = w * mult;
30637                     return;
30638                 }
30639                 
30640                 this.colWidths[i] = ew;
30641             }, this);
30642             // have to make up numbers..
30643              
30644         }
30645         // now we should have all the widths..
30646         
30647     
30648     },
30649     
30650     shrinkColumn : function()
30651     {
30652         var table = this.toTableArray();
30653         this.normalizeWidths(table);
30654         var col = this.cellData.col;
30655         var nw = this.colWidths[col] * 0.8;
30656         if (nw < 5) {
30657             return;
30658         }
30659         var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
30660         this.colWidths.forEach(function(w,i) {
30661             if (i == col) {
30662                  this.colWidths[i] = nw;
30663                 return;
30664             }
30665             this.colWidths[i] += otherAdd
30666         }, this);
30667         this.updateWidths(table);
30668          
30669     },
30670     growColumn : function()
30671     {
30672         var table = this.toTableArray();
30673         this.normalizeWidths(table);
30674         var col = this.cellData.col;
30675         var nw = this.colWidths[col] * 1.2;
30676         if (nw > 90) {
30677             return;
30678         }
30679         var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
30680         this.colWidths.forEach(function(w,i) {
30681             if (i == col) {
30682                 this.colWidths[i] = nw;
30683                 return;
30684             }
30685             this.colWidths[i] -= otherSub
30686         }, this);
30687         this.updateWidths(table);
30688          
30689     },
30690     deleteRow : function()
30691     {
30692         // delete this rows 'tr'
30693         // if any of the cells in this row have a rowspan > 1 && row!= this row..
30694         // then reduce the rowspan.
30695         var table = this.toTableArray();
30696         // this.cellData.row;
30697         for (var i =0;i< table[this.cellData.row].length ; i++) {
30698             var c = table[this.cellData.row][i];
30699             if (c.row != this.cellData.row) {
30700                 
30701                 c.rowspan--;
30702                 c.cell.setAttribute('rowspan', c.rowspan);
30703                 continue;
30704             }
30705             if (c.rowspan > 1) {
30706                 c.rowspan--;
30707                 c.cell.setAttribute('rowspan', c.rowspan);
30708             }
30709         }
30710         table.splice(this.cellData.row,1);
30711         this.redrawAllCells(table);
30712         
30713     },
30714     deleteColumn : function()
30715     {
30716         var table = this.toTableArray();
30717         
30718         for (var i =0;i< table.length ; i++) {
30719             var c = table[i][this.cellData.col];
30720             if (c.col != this.cellData.col) {
30721                 table[i][this.cellData.col].colspan--;
30722             } else if (c.colspan > 1) {
30723                 c.colspan--;
30724                 c.cell.setAttribute('colspan', c.colspan);
30725             }
30726             table[i].splice(this.cellData.col,1);
30727         }
30728         
30729         this.redrawAllCells(table);
30730     }
30731     
30732     
30733     
30734     
30735 })
30736
30737 //<script type="text/javascript">
30738
30739 /*
30740  * Based  Ext JS Library 1.1.1
30741  * Copyright(c) 2006-2007, Ext JS, LLC.
30742  * LGPL
30743  *
30744  */
30745  
30746 /**
30747  * @class Roo.HtmlEditorCore
30748  * @extends Roo.Component
30749  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
30750  *
30751  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
30752  */
30753
30754 Roo.HtmlEditorCore = function(config){
30755     
30756     
30757     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
30758     
30759     
30760     this.addEvents({
30761         /**
30762          * @event initialize
30763          * Fires when the editor is fully initialized (including the iframe)
30764          * @param {Roo.HtmlEditorCore} this
30765          */
30766         initialize: true,
30767         /**
30768          * @event activate
30769          * Fires when the editor is first receives the focus. Any insertion must wait
30770          * until after this event.
30771          * @param {Roo.HtmlEditorCore} this
30772          */
30773         activate: true,
30774          /**
30775          * @event beforesync
30776          * Fires before the textarea is updated with content from the editor iframe. Return false
30777          * to cancel the sync.
30778          * @param {Roo.HtmlEditorCore} this
30779          * @param {String} html
30780          */
30781         beforesync: true,
30782          /**
30783          * @event beforepush
30784          * Fires before the iframe editor is updated with content from the textarea. Return false
30785          * to cancel the push.
30786          * @param {Roo.HtmlEditorCore} this
30787          * @param {String} html
30788          */
30789         beforepush: true,
30790          /**
30791          * @event sync
30792          * Fires when the textarea is updated with content from the editor iframe.
30793          * @param {Roo.HtmlEditorCore} this
30794          * @param {String} html
30795          */
30796         sync: true,
30797          /**
30798          * @event push
30799          * Fires when the iframe editor is updated with content from the textarea.
30800          * @param {Roo.HtmlEditorCore} this
30801          * @param {String} html
30802          */
30803         push: true,
30804         
30805         /**
30806          * @event editorevent
30807          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
30808          * @param {Roo.HtmlEditorCore} this
30809          */
30810         editorevent: true 
30811          
30812         
30813     });
30814     
30815     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
30816     
30817     // defaults : white / black...
30818     this.applyBlacklists();
30819     
30820     
30821     
30822 };
30823
30824
30825 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
30826
30827
30828      /**
30829      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
30830      */
30831     
30832     owner : false,
30833     
30834      /**
30835      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
30836      *                        Roo.resizable.
30837      */
30838     resizable : false,
30839      /**
30840      * @cfg {Number} height (in pixels)
30841      */   
30842     height: 300,
30843    /**
30844      * @cfg {Number} width (in pixels)
30845      */   
30846     width: 500,
30847      /**
30848      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
30849      *         if you are doing an email editor, this probably needs disabling, it's designed
30850      */
30851     autoClean: true,
30852     
30853     /**
30854      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
30855      */
30856     enableBlocks : true,
30857     /**
30858      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
30859      * 
30860      */
30861     stylesheets: false,
30862      /**
30863      * @cfg {String} language default en - language of text (usefull for rtl languages)
30864      * 
30865      */
30866     language: 'en',
30867     
30868     /**
30869      * @cfg {boolean} allowComments - default false - allow comments in HTML source
30870      *          - by default they are stripped - if you are editing email you may need this.
30871      */
30872     allowComments: false,
30873     // id of frame..
30874     frameId: false,
30875     
30876     // private properties
30877     validationEvent : false,
30878     deferHeight: true,
30879     initialized : false,
30880     activated : false,
30881     sourceEditMode : false,
30882     onFocus : Roo.emptyFn,
30883     iframePad:3,
30884     hideMode:'offsets',
30885     
30886     clearUp: true,
30887     
30888     // blacklist + whitelisted elements..
30889     black: false,
30890     white: false,
30891      
30892     bodyCls : '',
30893
30894     
30895     undoManager : false,
30896     /**
30897      * Protected method that will not generally be called directly. It
30898      * is called when the editor initializes the iframe with HTML contents. Override this method if you
30899      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
30900      */
30901     getDocMarkup : function(){
30902         // body styles..
30903         var st = '';
30904         
30905         // inherit styels from page...?? 
30906         if (this.stylesheets === false) {
30907             
30908             Roo.get(document.head).select('style').each(function(node) {
30909                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
30910             });
30911             
30912             Roo.get(document.head).select('link').each(function(node) { 
30913                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
30914             });
30915             
30916         } else if (!this.stylesheets.length) {
30917                 // simple..
30918                 st = '<style type="text/css">' +
30919                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
30920                    '</style>';
30921         } else {
30922             for (var i in this.stylesheets) {
30923                 if (typeof(this.stylesheets[i]) != 'string') {
30924                     continue;
30925                 }
30926                 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
30927             }
30928             
30929         }
30930         
30931         st +=  '<style type="text/css">' +
30932             'IMG { cursor: pointer } ' +
30933         '</style>';
30934         
30935         st += '<meta name="google" content="notranslate">';
30936         
30937         var cls = 'notranslate roo-htmleditor-body';
30938         
30939         if(this.bodyCls.length){
30940             cls += ' ' + this.bodyCls;
30941         }
30942         
30943         return '<html  class="notranslate" translate="no"><head>' + st  +
30944             //<style type="text/css">' +
30945             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
30946             //'</style>' +
30947             ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
30948     },
30949
30950     // private
30951     onRender : function(ct, position)
30952     {
30953         var _t = this;
30954         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
30955         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
30956         
30957         
30958         this.el.dom.style.border = '0 none';
30959         this.el.dom.setAttribute('tabIndex', -1);
30960         this.el.addClass('x-hidden hide');
30961         
30962         
30963         
30964         if(Roo.isIE){ // fix IE 1px bogus margin
30965             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
30966         }
30967        
30968         
30969         this.frameId = Roo.id();
30970         
30971          
30972         
30973         var iframe = this.owner.wrap.createChild({
30974             tag: 'iframe',
30975             cls: 'form-control', // bootstrap..
30976             id: this.frameId,
30977             name: this.frameId,
30978             frameBorder : 'no',
30979             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
30980         }, this.el
30981         );
30982         
30983         
30984         this.iframe = iframe.dom;
30985
30986         this.assignDocWin();
30987         
30988         this.doc.designMode = 'on';
30989        
30990         this.doc.open();
30991         this.doc.write(this.getDocMarkup());
30992         this.doc.close();
30993
30994         
30995         var task = { // must defer to wait for browser to be ready
30996             run : function(){
30997                 //console.log("run task?" + this.doc.readyState);
30998                 this.assignDocWin();
30999                 if(this.doc.body || this.doc.readyState == 'complete'){
31000                     try {
31001                         this.doc.designMode="on";
31002                         
31003                     } catch (e) {
31004                         return;
31005                     }
31006                     Roo.TaskMgr.stop(task);
31007                     this.initEditor.defer(10, this);
31008                 }
31009             },
31010             interval : 10,
31011             duration: 10000,
31012             scope: this
31013         };
31014         Roo.TaskMgr.start(task);
31015
31016     },
31017
31018     // private
31019     onResize : function(w, h)
31020     {
31021          Roo.log('resize: ' +w + ',' + h );
31022         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
31023         if(!this.iframe){
31024             return;
31025         }
31026         if(typeof w == 'number'){
31027             
31028             this.iframe.style.width = w + 'px';
31029         }
31030         if(typeof h == 'number'){
31031             
31032             this.iframe.style.height = h + 'px';
31033             if(this.doc){
31034                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
31035             }
31036         }
31037         
31038     },
31039
31040     /**
31041      * Toggles the editor between standard and source edit mode.
31042      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
31043      */
31044     toggleSourceEdit : function(sourceEditMode){
31045         
31046         this.sourceEditMode = sourceEditMode === true;
31047         
31048         if(this.sourceEditMode){
31049  
31050             Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
31051             
31052         }else{
31053             Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
31054             //this.iframe.className = '';
31055             this.deferFocus();
31056         }
31057         //this.setSize(this.owner.wrap.getSize());
31058         //this.fireEvent('editmodechange', this, this.sourceEditMode);
31059     },
31060
31061     
31062   
31063
31064     /**
31065      * Protected method that will not generally be called directly. If you need/want
31066      * custom HTML cleanup, this is the method you should override.
31067      * @param {String} html The HTML to be cleaned
31068      * return {String} The cleaned HTML
31069      */
31070     cleanHtml : function(html)
31071     {
31072         html = String(html);
31073         if(html.length > 5){
31074             if(Roo.isSafari){ // strip safari nonsense
31075                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
31076             }
31077         }
31078         if(html == '&nbsp;'){
31079             html = '';
31080         }
31081         return html;
31082     },
31083
31084     /**
31085      * HTML Editor -> Textarea
31086      * Protected method that will not generally be called directly. Syncs the contents
31087      * of the editor iframe with the textarea.
31088      */
31089     syncValue : function()
31090     {
31091         //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
31092         if(this.initialized){
31093             
31094             if (this.undoManager) {
31095                 this.undoManager.addEvent();
31096             }
31097
31098             
31099             var bd = (this.doc.body || this.doc.documentElement);
31100            
31101             
31102             var sel = this.win.getSelection();
31103             
31104             var div = document.createElement('div');
31105             div.innerHTML = bd.innerHTML;
31106             var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
31107             if (gtx.length > 0) {
31108                 var rm = gtx.item(0).parentNode;
31109                 rm.parentNode.removeChild(rm);
31110             }
31111             
31112            
31113             if (this.enableBlocks) {
31114                 new Roo.htmleditor.FilterBlock({ node : div });
31115             }
31116             
31117             var html = div.innerHTML;
31118             
31119             //?? tidy?
31120             if (this.autoClean) {
31121                 
31122                 new Roo.htmleditor.FilterAttributes({
31123                     node : div,
31124                     attrib_white : [
31125                             'href',
31126                             'src',
31127                             'name',
31128                             'align',
31129                             'colspan',
31130                             'rowspan',
31131                             'data-display',
31132                             'data-width',
31133                             'start' ,
31134                             'style',
31135                             // youtube embed.
31136                             'class',
31137                             'allowfullscreen',
31138                             'frameborder',
31139                             'width',
31140                             'height',
31141                             'alt'
31142                             ],
31143                     attrib_clean : ['href', 'src' ] 
31144                 });
31145                 
31146                 var tidy = new Roo.htmleditor.TidySerializer({
31147                     inner:  true
31148                 });
31149                 html  = tidy.serialize(div);
31150                 
31151             }
31152             
31153             
31154             if(Roo.isSafari){
31155                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
31156                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
31157                 if(m && m[1]){
31158                     html = '<div style="'+m[0]+'">' + html + '</div>';
31159                 }
31160             }
31161             html = this.cleanHtml(html);
31162             // fix up the special chars.. normaly like back quotes in word...
31163             // however we do not want to do this with chinese..
31164             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
31165                 
31166                 var cc = match.charCodeAt();
31167
31168                 // Get the character value, handling surrogate pairs
31169                 if (match.length == 2) {
31170                     // It's a surrogate pair, calculate the Unicode code point
31171                     var high = match.charCodeAt(0) - 0xD800;
31172                     var low  = match.charCodeAt(1) - 0xDC00;
31173                     cc = (high * 0x400) + low + 0x10000;
31174                 }  else if (
31175                     (cc >= 0x4E00 && cc < 0xA000 ) ||
31176                     (cc >= 0x3400 && cc < 0x4E00 ) ||
31177                     (cc >= 0xf900 && cc < 0xfb00 )
31178                 ) {
31179                         return match;
31180                 }  
31181          
31182                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
31183                 return "&#" + cc + ";";
31184                 
31185                 
31186             });
31187             
31188             
31189              
31190             if(this.owner.fireEvent('beforesync', this, html) !== false){
31191                 this.el.dom.value = html;
31192                 this.owner.fireEvent('sync', this, html);
31193             }
31194         }
31195     },
31196
31197     /**
31198      * TEXTAREA -> EDITABLE
31199      * Protected method that will not generally be called directly. Pushes the value of the textarea
31200      * into the iframe editor.
31201      */
31202     pushValue : function()
31203     {
31204         //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
31205         if(this.initialized){
31206             var v = this.el.dom.value.trim();
31207             
31208             
31209             if(this.owner.fireEvent('beforepush', this, v) !== false){
31210                 var d = (this.doc.body || this.doc.documentElement);
31211                 d.innerHTML = v;
31212                  
31213                 this.el.dom.value = d.innerHTML;
31214                 this.owner.fireEvent('push', this, v);
31215             }
31216             if (this.autoClean) {
31217                 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
31218                 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
31219             }
31220             if (this.enableBlocks) {
31221                 Roo.htmleditor.Block.initAll(this.doc.body);
31222             }
31223             
31224             this.updateLanguage();
31225             
31226             var lc = this.doc.body.lastChild;
31227             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
31228                 // add an extra line at the end.
31229                 this.doc.body.appendChild(this.doc.createElement('br'));
31230             }
31231             
31232             
31233         }
31234     },
31235
31236     // private
31237     deferFocus : function(){
31238         this.focus.defer(10, this);
31239     },
31240
31241     // doc'ed in Field
31242     focus : function(){
31243         if(this.win && !this.sourceEditMode){
31244             this.win.focus();
31245         }else{
31246             this.el.focus();
31247         }
31248     },
31249     
31250     assignDocWin: function()
31251     {
31252         var iframe = this.iframe;
31253         
31254          if(Roo.isIE){
31255             this.doc = iframe.contentWindow.document;
31256             this.win = iframe.contentWindow;
31257         } else {
31258 //            if (!Roo.get(this.frameId)) {
31259 //                return;
31260 //            }
31261 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
31262 //            this.win = Roo.get(this.frameId).dom.contentWindow;
31263             
31264             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
31265                 return;
31266             }
31267             
31268             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
31269             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
31270         }
31271     },
31272     
31273     // private
31274     initEditor : function(){
31275         //console.log("INIT EDITOR");
31276         this.assignDocWin();
31277         
31278         
31279         
31280         this.doc.designMode="on";
31281         this.doc.open();
31282         this.doc.write(this.getDocMarkup());
31283         this.doc.close();
31284         
31285         var dbody = (this.doc.body || this.doc.documentElement);
31286         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
31287         // this copies styles from the containing element into thsi one..
31288         // not sure why we need all of this..
31289         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
31290         
31291         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
31292         //ss['background-attachment'] = 'fixed'; // w3c
31293         dbody.bgProperties = 'fixed'; // ie
31294         dbody.setAttribute("translate", "no");
31295         
31296         //Roo.DomHelper.applyStyles(dbody, ss);
31297         Roo.EventManager.on(this.doc, {
31298              
31299             'mouseup': this.onEditorEvent,
31300             'dblclick': this.onEditorEvent,
31301             'click': this.onEditorEvent,
31302             'keyup': this.onEditorEvent,
31303             
31304             buffer:100,
31305             scope: this
31306         });
31307         Roo.EventManager.on(this.doc, {
31308             'paste': this.onPasteEvent,
31309             scope : this
31310         });
31311         if(Roo.isGecko){
31312             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
31313         }
31314         //??? needed???
31315         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
31316             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
31317         }
31318         this.initialized = true;
31319
31320         
31321         // initialize special key events - enter
31322         new Roo.htmleditor.KeyEnter({core : this});
31323         
31324          
31325         
31326         this.owner.fireEvent('initialize', this);
31327         this.pushValue();
31328     },
31329     // this is to prevent a href clicks resulting in a redirect?
31330    
31331     onPasteEvent : function(e,v)
31332     {
31333         // I think we better assume paste is going to be a dirty load of rubish from word..
31334         
31335         // even pasting into a 'email version' of this widget will have to clean up that mess.
31336         var cd = (e.browserEvent.clipboardData || window.clipboardData);
31337         
31338         // check what type of paste - if it's an image, then handle it differently.
31339         if (cd.files && cd.files.length > 0) {
31340             // pasting images?
31341             var urlAPI = (window.createObjectURL && window) || 
31342                 (window.URL && URL.revokeObjectURL && URL) || 
31343                 (window.webkitURL && webkitURL);
31344     
31345             var url = urlAPI.createObjectURL( cd.files[0]);
31346             this.insertAtCursor('<img src=" + url + ">');
31347             return false;
31348         }
31349         if (cd.types.indexOf('text/html') < 0 ) {
31350             return false;
31351         }
31352         var images = [];
31353         var html = cd.getData('text/html'); // clipboard event
31354         if (cd.types.indexOf('text/rtf') > -1) {
31355             var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
31356             images = parser.doc ? parser.doc.getElementsByType('pict') : [];
31357         }
31358         //Roo.log(images);
31359         //Roo.log(imgs);
31360         // fixme..
31361         images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
31362                        .map(function(g) { return g.toDataURL(); })
31363                        .filter(function(g) { return g != 'about:blank'; });
31364         
31365         //Roo.log(html);
31366         html = this.cleanWordChars(html);
31367         
31368         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
31369         
31370         
31371         var sn = this.getParentElement();
31372         // check if d contains a table, and prevent nesting??
31373         //Roo.log(d.getElementsByTagName('table'));
31374         //Roo.log(sn);
31375         //Roo.log(sn.closest('table'));
31376         if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
31377             e.preventDefault();
31378             this.insertAtCursor("You can not nest tables");
31379             //Roo.log("prevent?"); // fixme - 
31380             return false;
31381         }
31382         
31383         
31384         
31385         if (images.length > 0) {
31386             // replace all v:imagedata - with img.
31387             var ar = Array.from(d.getElementsByTagName('v:imagedata'));
31388             Roo.each(ar, function(node) {
31389                 node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
31390                 node.parentNode.removeChild(node);
31391             });
31392             
31393             
31394             Roo.each(d.getElementsByTagName('img'), function(img, i) {
31395                 img.setAttribute('src', images[i]);
31396             });
31397         }
31398         if (this.autoClean) {
31399             new Roo.htmleditor.FilterWord({ node : d });
31400             
31401             new Roo.htmleditor.FilterStyleToTag({ node : d });
31402             new Roo.htmleditor.FilterAttributes({
31403                 node : d,
31404                 attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width', 'start'],
31405                 attrib_clean : ['href', 'src' ] 
31406             });
31407             new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
31408             // should be fonts..
31409             new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
31410             new Roo.htmleditor.FilterParagraph({ node : d });
31411             new Roo.htmleditor.FilterSpan({ node : d });
31412             new Roo.htmleditor.FilterLongBr({ node : d });
31413             new Roo.htmleditor.FilterComment({ node : d });
31414             
31415             
31416         }
31417         if (this.enableBlocks) {
31418                 
31419             Array.from(d.getElementsByTagName('img')).forEach(function(img) {
31420                 if (img.closest('figure')) { // assume!! that it's aready
31421                     return;
31422                 }
31423                 var fig  = new Roo.htmleditor.BlockFigure({
31424                     image_src  : img.src
31425                 });
31426                 fig.updateElement(img); // replace it..
31427                 
31428             });
31429         }
31430         
31431         
31432         this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
31433         if (this.enableBlocks) {
31434             Roo.htmleditor.Block.initAll(this.doc.body);
31435         }
31436          
31437         
31438         e.preventDefault();
31439         return false;
31440         // default behaveiour should be our local cleanup paste? (optional?)
31441         // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
31442         //this.owner.fireEvent('paste', e, v);
31443     },
31444     // private
31445     onDestroy : function(){
31446         
31447         
31448         
31449         if(this.rendered){
31450             
31451             //for (var i =0; i < this.toolbars.length;i++) {
31452             //    // fixme - ask toolbars for heights?
31453             //    this.toolbars[i].onDestroy();
31454            // }
31455             
31456             //this.wrap.dom.innerHTML = '';
31457             //this.wrap.remove();
31458         }
31459     },
31460
31461     // private
31462     onFirstFocus : function(){
31463         
31464         this.assignDocWin();
31465         this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
31466         
31467         this.activated = true;
31468          
31469     
31470         if(Roo.isGecko){ // prevent silly gecko errors
31471             this.win.focus();
31472             var s = this.win.getSelection();
31473             if(!s.focusNode || s.focusNode.nodeType != 3){
31474                 var r = s.getRangeAt(0);
31475                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
31476                 r.collapse(true);
31477                 this.deferFocus();
31478             }
31479             try{
31480                 this.execCmd('useCSS', true);
31481                 this.execCmd('styleWithCSS', false);
31482             }catch(e){}
31483         }
31484         this.owner.fireEvent('activate', this);
31485     },
31486
31487     // private
31488     adjustFont: function(btn){
31489         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
31490         //if(Roo.isSafari){ // safari
31491         //    adjust *= 2;
31492        // }
31493         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
31494         if(Roo.isSafari){ // safari
31495             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
31496             v =  (v < 10) ? 10 : v;
31497             v =  (v > 48) ? 48 : v;
31498             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
31499             
31500         }
31501         
31502         
31503         v = Math.max(1, v+adjust);
31504         
31505         this.execCmd('FontSize', v  );
31506     },
31507
31508     onEditorEvent : function(e)
31509     {
31510          
31511         
31512         if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
31513             return; // we do not handle this.. (undo manager does..)
31514         }
31515         // in theory this detects if the last element is not a br, then we try and do that.
31516         // its so clicking in space at bottom triggers adding a br and moving the cursor.
31517         if (e &&
31518             e.target.nodeName == 'BODY' &&
31519             e.type == "mouseup" &&
31520             this.doc.body.lastChild
31521            ) {
31522             var lc = this.doc.body.lastChild;
31523             // gtx-trans is google translate plugin adding crap.
31524             while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
31525                 lc = lc.previousSibling;
31526             }
31527             if (lc.nodeType == 1 && lc.nodeName != 'BR') {
31528             // if last element is <BR> - then dont do anything.
31529             
31530                 var ns = this.doc.createElement('br');
31531                 this.doc.body.appendChild(ns);
31532                 range = this.doc.createRange();
31533                 range.setStartAfter(ns);
31534                 range.collapse(true);
31535                 var sel = this.win.getSelection();
31536                 sel.removeAllRanges();
31537                 sel.addRange(range);
31538             }
31539         }
31540         
31541         
31542         
31543         this.fireEditorEvent(e);
31544       //  this.updateToolbar();
31545         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
31546     },
31547     
31548     fireEditorEvent: function(e)
31549     {
31550         this.owner.fireEvent('editorevent', this, e);
31551     },
31552
31553     insertTag : function(tg)
31554     {
31555         // could be a bit smarter... -> wrap the current selected tRoo..
31556         if (tg.toLowerCase() == 'span' ||
31557             tg.toLowerCase() == 'code' ||
31558             tg.toLowerCase() == 'sup' ||
31559             tg.toLowerCase() == 'sub' 
31560             ) {
31561             
31562             range = this.createRange(this.getSelection());
31563             var wrappingNode = this.doc.createElement(tg.toLowerCase());
31564             wrappingNode.appendChild(range.extractContents());
31565             range.insertNode(wrappingNode);
31566
31567             return;
31568             
31569             
31570             
31571         }
31572         this.execCmd("formatblock",   tg);
31573         this.undoManager.addEvent(); 
31574     },
31575     
31576     insertText : function(txt)
31577     {
31578         
31579         
31580         var range = this.createRange();
31581         range.deleteContents();
31582                //alert(Sender.getAttribute('label'));
31583                
31584         range.insertNode(this.doc.createTextNode(txt));
31585         this.undoManager.addEvent();
31586     } ,
31587     
31588      
31589
31590     /**
31591      * Executes a Midas editor command on the editor document and performs necessary focus and
31592      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
31593      * @param {String} cmd The Midas command
31594      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
31595      */
31596     relayCmd : function(cmd, value)
31597     {
31598         
31599         switch (cmd) {
31600             case 'justifyleft':
31601             case 'justifyright':
31602             case 'justifycenter':
31603                 // if we are in a cell, then we will adjust the
31604                 var n = this.getParentElement();
31605                 var td = n.closest('td');
31606                 if (td) {
31607                     var bl = Roo.htmleditor.Block.factory(td);
31608                     bl.textAlign = cmd.replace('justify','');
31609                     bl.updateElement();
31610                     this.owner.fireEvent('editorevent', this);
31611                     return;
31612                 }
31613                 this.execCmd('styleWithCSS', true); // 
31614                 break;
31615             case 'bold':
31616             case 'italic':
31617                 // if there is no selection, then we insert, and set the curson inside it..
31618                 this.execCmd('styleWithCSS', false); 
31619                 break;
31620                 
31621         
31622             default:
31623                 break;
31624         }
31625         
31626         
31627         this.win.focus();
31628         this.execCmd(cmd, value);
31629         this.owner.fireEvent('editorevent', this);
31630         //this.updateToolbar();
31631         this.owner.deferFocus();
31632     },
31633
31634     /**
31635      * Executes a Midas editor command directly on the editor document.
31636      * For visual commands, you should use {@link #relayCmd} instead.
31637      * <b>This should only be called after the editor is initialized.</b>
31638      * @param {String} cmd The Midas command
31639      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
31640      */
31641     execCmd : function(cmd, value){
31642         this.doc.execCommand(cmd, false, value === undefined ? null : value);
31643         this.syncValue();
31644     },
31645  
31646  
31647    
31648     /**
31649      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
31650      * to insert tRoo.
31651      * @param {String} text | dom node.. 
31652      */
31653     insertAtCursor : function(text)
31654     {
31655         
31656         if(!this.activated){
31657             return;
31658         }
31659          
31660         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
31661             this.win.focus();
31662             
31663             
31664             // from jquery ui (MIT licenced)
31665             var range, node;
31666             var win = this.win;
31667             
31668             if (win.getSelection && win.getSelection().getRangeAt) {
31669                 
31670                 // delete the existing?
31671                 
31672                 this.createRange(this.getSelection()).deleteContents();
31673                 range = win.getSelection().getRangeAt(0);
31674                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
31675                 range.insertNode(node);
31676                 range = range.cloneRange();
31677                 range.collapse(false);
31678                  
31679                 win.getSelection().removeAllRanges();
31680                 win.getSelection().addRange(range);
31681                 
31682                 
31683                 
31684             } else if (win.document.selection && win.document.selection.createRange) {
31685                 // no firefox support
31686                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
31687                 win.document.selection.createRange().pasteHTML(txt);
31688             
31689             } else {
31690                 // no firefox support
31691                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
31692                 this.execCmd('InsertHTML', txt);
31693             } 
31694             this.syncValue();
31695             
31696             this.deferFocus();
31697         }
31698     },
31699  // private
31700     mozKeyPress : function(e){
31701         if(e.ctrlKey){
31702             var c = e.getCharCode(), cmd;
31703           
31704             if(c > 0){
31705                 c = String.fromCharCode(c).toLowerCase();
31706                 switch(c){
31707                     case 'b':
31708                         cmd = 'bold';
31709                         break;
31710                     case 'i':
31711                         cmd = 'italic';
31712                         break;
31713                     
31714                     case 'u':
31715                         cmd = 'underline';
31716                         break;
31717                     
31718                     //case 'v':
31719                       //  this.cleanUpPaste.defer(100, this);
31720                       //  return;
31721                         
31722                 }
31723                 if(cmd){
31724                     
31725                     this.relayCmd(cmd);
31726                     //this.win.focus();
31727                     //this.execCmd(cmd);
31728                     //this.deferFocus();
31729                     e.preventDefault();
31730                 }
31731                 
31732             }
31733         }
31734     },
31735
31736     // private
31737     fixKeys : function(){ // load time branching for fastest keydown performance
31738         
31739         
31740         if(Roo.isIE){
31741             return function(e){
31742                 var k = e.getKey(), r;
31743                 if(k == e.TAB){
31744                     e.stopEvent();
31745                     r = this.doc.selection.createRange();
31746                     if(r){
31747                         r.collapse(true);
31748                         r.pasteHTML('&#160;&#160;&#160;&#160;');
31749                         this.deferFocus();
31750                     }
31751                     return;
31752                 }
31753                 /// this is handled by Roo.htmleditor.KeyEnter
31754                  /*
31755                 if(k == e.ENTER){
31756                     r = this.doc.selection.createRange();
31757                     if(r){
31758                         var target = r.parentElement();
31759                         if(!target || target.tagName.toLowerCase() != 'li'){
31760                             e.stopEvent();
31761                             r.pasteHTML('<br/>');
31762                             r.collapse(false);
31763                             r.select();
31764                         }
31765                     }
31766                 }
31767                 */
31768                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31769                 //    this.cleanUpPaste.defer(100, this);
31770                 //    return;
31771                 //}
31772                 
31773                 
31774             };
31775         }else if(Roo.isOpera){
31776             return function(e){
31777                 var k = e.getKey();
31778                 if(k == e.TAB){
31779                     e.stopEvent();
31780                     this.win.focus();
31781                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
31782                     this.deferFocus();
31783                 }
31784                
31785                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31786                 //    this.cleanUpPaste.defer(100, this);
31787                  //   return;
31788                 //}
31789                 
31790             };
31791         }else if(Roo.isSafari){
31792             return function(e){
31793                 var k = e.getKey();
31794                 
31795                 if(k == e.TAB){
31796                     e.stopEvent();
31797                     this.execCmd('InsertText','\t');
31798                     this.deferFocus();
31799                     return;
31800                 }
31801                  this.mozKeyPress(e);
31802                 
31803                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
31804                  //   this.cleanUpPaste.defer(100, this);
31805                  //   return;
31806                // }
31807                 
31808              };
31809         }
31810     }(),
31811     
31812     getAllAncestors: function()
31813     {
31814         var p = this.getSelectedNode();
31815         var a = [];
31816         if (!p) {
31817             a.push(p); // push blank onto stack..
31818             p = this.getParentElement();
31819         }
31820         
31821         
31822         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
31823             a.push(p);
31824             p = p.parentNode;
31825         }
31826         a.push(this.doc.body);
31827         return a;
31828     },
31829     lastSel : false,
31830     lastSelNode : false,
31831     
31832     
31833     getSelection : function() 
31834     {
31835         this.assignDocWin();
31836         return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
31837     },
31838     /**
31839      * Select a dom node
31840      * @param {DomElement} node the node to select
31841      */
31842     selectNode : function(node, collapse)
31843     {
31844         var nodeRange = node.ownerDocument.createRange();
31845         try {
31846             nodeRange.selectNode(node);
31847         } catch (e) {
31848             nodeRange.selectNodeContents(node);
31849         }
31850         if (collapse === true) {
31851             nodeRange.collapse(true);
31852         }
31853         //
31854         var s = this.win.getSelection();
31855         s.removeAllRanges();
31856         s.addRange(nodeRange);
31857     },
31858     
31859     getSelectedNode: function() 
31860     {
31861         // this may only work on Gecko!!!
31862         
31863         // should we cache this!!!!
31864         
31865          
31866          
31867         var range = this.createRange(this.getSelection()).cloneRange();
31868         
31869         if (Roo.isIE) {
31870             var parent = range.parentElement();
31871             while (true) {
31872                 var testRange = range.duplicate();
31873                 testRange.moveToElementText(parent);
31874                 if (testRange.inRange(range)) {
31875                     break;
31876                 }
31877                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
31878                     break;
31879                 }
31880                 parent = parent.parentElement;
31881             }
31882             return parent;
31883         }
31884         
31885         // is ancestor a text element.
31886         var ac =  range.commonAncestorContainer;
31887         if (ac.nodeType == 3) {
31888             ac = ac.parentNode;
31889         }
31890         
31891         var ar = ac.childNodes;
31892          
31893         var nodes = [];
31894         var other_nodes = [];
31895         var has_other_nodes = false;
31896         for (var i=0;i<ar.length;i++) {
31897             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
31898                 continue;
31899             }
31900             // fullly contained node.
31901             
31902             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
31903                 nodes.push(ar[i]);
31904                 continue;
31905             }
31906             
31907             // probably selected..
31908             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
31909                 other_nodes.push(ar[i]);
31910                 continue;
31911             }
31912             // outer..
31913             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
31914                 continue;
31915             }
31916             
31917             
31918             has_other_nodes = true;
31919         }
31920         if (!nodes.length && other_nodes.length) {
31921             nodes= other_nodes;
31922         }
31923         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
31924             return false;
31925         }
31926         
31927         return nodes[0];
31928     },
31929     
31930     
31931     createRange: function(sel)
31932     {
31933         // this has strange effects when using with 
31934         // top toolbar - not sure if it's a great idea.
31935         //this.editor.contentWindow.focus();
31936         if (typeof sel != "undefined") {
31937             try {
31938                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
31939             } catch(e) {
31940                 return this.doc.createRange();
31941             }
31942         } else {
31943             return this.doc.createRange();
31944         }
31945     },
31946     getParentElement: function()
31947     {
31948         
31949         this.assignDocWin();
31950         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
31951         
31952         var range = this.createRange(sel);
31953          
31954         try {
31955             var p = range.commonAncestorContainer;
31956             while (p.nodeType == 3) { // text node
31957                 p = p.parentNode;
31958             }
31959             return p;
31960         } catch (e) {
31961             return null;
31962         }
31963     
31964     },
31965     /***
31966      *
31967      * Range intersection.. the hard stuff...
31968      *  '-1' = before
31969      *  '0' = hits..
31970      *  '1' = after.
31971      *         [ -- selected range --- ]
31972      *   [fail]                        [fail]
31973      *
31974      *    basically..
31975      *      if end is before start or  hits it. fail.
31976      *      if start is after end or hits it fail.
31977      *
31978      *   if either hits (but other is outside. - then it's not 
31979      *   
31980      *    
31981      **/
31982     
31983     
31984     // @see http://www.thismuchiknow.co.uk/?p=64.
31985     rangeIntersectsNode : function(range, node)
31986     {
31987         var nodeRange = node.ownerDocument.createRange();
31988         try {
31989             nodeRange.selectNode(node);
31990         } catch (e) {
31991             nodeRange.selectNodeContents(node);
31992         }
31993     
31994         var rangeStartRange = range.cloneRange();
31995         rangeStartRange.collapse(true);
31996     
31997         var rangeEndRange = range.cloneRange();
31998         rangeEndRange.collapse(false);
31999     
32000         var nodeStartRange = nodeRange.cloneRange();
32001         nodeStartRange.collapse(true);
32002     
32003         var nodeEndRange = nodeRange.cloneRange();
32004         nodeEndRange.collapse(false);
32005     
32006         return rangeStartRange.compareBoundaryPoints(
32007                  Range.START_TO_START, nodeEndRange) == -1 &&
32008                rangeEndRange.compareBoundaryPoints(
32009                  Range.START_TO_START, nodeStartRange) == 1;
32010         
32011          
32012     },
32013     rangeCompareNode : function(range, node)
32014     {
32015         var nodeRange = node.ownerDocument.createRange();
32016         try {
32017             nodeRange.selectNode(node);
32018         } catch (e) {
32019             nodeRange.selectNodeContents(node);
32020         }
32021         
32022         
32023         range.collapse(true);
32024     
32025         nodeRange.collapse(true);
32026      
32027         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
32028         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
32029          
32030         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
32031         
32032         var nodeIsBefore   =  ss == 1;
32033         var nodeIsAfter    = ee == -1;
32034         
32035         if (nodeIsBefore && nodeIsAfter) {
32036             return 0; // outer
32037         }
32038         if (!nodeIsBefore && nodeIsAfter) {
32039             return 1; //right trailed.
32040         }
32041         
32042         if (nodeIsBefore && !nodeIsAfter) {
32043             return 2;  // left trailed.
32044         }
32045         // fully contined.
32046         return 3;
32047     },
32048  
32049     cleanWordChars : function(input) {// change the chars to hex code
32050         
32051        var swapCodes  = [ 
32052             [    8211, "&#8211;" ], 
32053             [    8212, "&#8212;" ], 
32054             [    8216,  "'" ],  
32055             [    8217, "'" ],  
32056             [    8220, '"' ],  
32057             [    8221, '"' ],  
32058             [    8226, "*" ],  
32059             [    8230, "..." ]
32060         ]; 
32061         var output = input;
32062         Roo.each(swapCodes, function(sw) { 
32063             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
32064             
32065             output = output.replace(swapper, sw[1]);
32066         });
32067         
32068         return output;
32069     },
32070     
32071      
32072     
32073         
32074     
32075     cleanUpChild : function (node)
32076     {
32077         
32078         new Roo.htmleditor.FilterComment({node : node});
32079         new Roo.htmleditor.FilterAttributes({
32080                 node : node,
32081                 attrib_black : this.ablack,
32082                 attrib_clean : this.aclean,
32083                 style_white : this.cwhite,
32084                 style_black : this.cblack
32085         });
32086         new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
32087         new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
32088          
32089         
32090     },
32091     
32092     /**
32093      * Clean up MS wordisms...
32094      * @deprecated - use filter directly
32095      */
32096     cleanWord : function(node)
32097     {
32098         new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
32099         new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
32100         
32101     },
32102    
32103     
32104     /**
32105
32106      * @deprecated - use filters
32107      */
32108     cleanTableWidths : function(node)
32109     {
32110         new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
32111         
32112  
32113     },
32114     
32115      
32116         
32117     applyBlacklists : function()
32118     {
32119         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
32120         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
32121         
32122         this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
32123         this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
32124         this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
32125         
32126         this.white = [];
32127         this.black = [];
32128         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
32129             if (b.indexOf(tag) > -1) {
32130                 return;
32131             }
32132             this.white.push(tag);
32133             
32134         }, this);
32135         
32136         Roo.each(w, function(tag) {
32137             if (b.indexOf(tag) > -1) {
32138                 return;
32139             }
32140             if (this.white.indexOf(tag) > -1) {
32141                 return;
32142             }
32143             this.white.push(tag);
32144             
32145         }, this);
32146         
32147         
32148         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
32149             if (w.indexOf(tag) > -1) {
32150                 return;
32151             }
32152             this.black.push(tag);
32153             
32154         }, this);
32155         
32156         Roo.each(b, function(tag) {
32157             if (w.indexOf(tag) > -1) {
32158                 return;
32159             }
32160             if (this.black.indexOf(tag) > -1) {
32161                 return;
32162             }
32163             this.black.push(tag);
32164             
32165         }, this);
32166         
32167         
32168         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
32169         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
32170         
32171         this.cwhite = [];
32172         this.cblack = [];
32173         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
32174             if (b.indexOf(tag) > -1) {
32175                 return;
32176             }
32177             this.cwhite.push(tag);
32178             
32179         }, this);
32180         
32181         Roo.each(w, function(tag) {
32182             if (b.indexOf(tag) > -1) {
32183                 return;
32184             }
32185             if (this.cwhite.indexOf(tag) > -1) {
32186                 return;
32187             }
32188             this.cwhite.push(tag);
32189             
32190         }, this);
32191         
32192         
32193         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
32194             if (w.indexOf(tag) > -1) {
32195                 return;
32196             }
32197             this.cblack.push(tag);
32198             
32199         }, this);
32200         
32201         Roo.each(b, function(tag) {
32202             if (w.indexOf(tag) > -1) {
32203                 return;
32204             }
32205             if (this.cblack.indexOf(tag) > -1) {
32206                 return;
32207             }
32208             this.cblack.push(tag);
32209             
32210         }, this);
32211     },
32212     
32213     setStylesheets : function(stylesheets)
32214     {
32215         if(typeof(stylesheets) == 'string'){
32216             Roo.get(this.iframe.contentDocument.head).createChild({
32217                 tag : 'link',
32218                 rel : 'stylesheet',
32219                 type : 'text/css',
32220                 href : stylesheets
32221             });
32222             
32223             return;
32224         }
32225         var _this = this;
32226      
32227         Roo.each(stylesheets, function(s) {
32228             if(!s.length){
32229                 return;
32230             }
32231             
32232             Roo.get(_this.iframe.contentDocument.head).createChild({
32233                 tag : 'link',
32234                 rel : 'stylesheet',
32235                 type : 'text/css',
32236                 href : s
32237             });
32238         });
32239
32240         
32241     },
32242     
32243     
32244     updateLanguage : function()
32245     {
32246         if (!this.iframe || !this.iframe.contentDocument) {
32247             return;
32248         }
32249         Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
32250     },
32251     
32252     
32253     removeStylesheets : function()
32254     {
32255         var _this = this;
32256         
32257         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
32258             s.remove();
32259         });
32260     },
32261     
32262     setStyle : function(style)
32263     {
32264         Roo.get(this.iframe.contentDocument.head).createChild({
32265             tag : 'style',
32266             type : 'text/css',
32267             html : style
32268         });
32269
32270         return;
32271     }
32272     
32273     // hide stuff that is not compatible
32274     /**
32275      * @event blur
32276      * @hide
32277      */
32278     /**
32279      * @event change
32280      * @hide
32281      */
32282     /**
32283      * @event focus
32284      * @hide
32285      */
32286     /**
32287      * @event specialkey
32288      * @hide
32289      */
32290     /**
32291      * @cfg {String} fieldClass @hide
32292      */
32293     /**
32294      * @cfg {String} focusClass @hide
32295      */
32296     /**
32297      * @cfg {String} autoCreate @hide
32298      */
32299     /**
32300      * @cfg {String} inputType @hide
32301      */
32302     /**
32303      * @cfg {String} invalidClass @hide
32304      */
32305     /**
32306      * @cfg {String} invalidText @hide
32307      */
32308     /**
32309      * @cfg {String} msgFx @hide
32310      */
32311     /**
32312      * @cfg {String} validateOnBlur @hide
32313      */
32314 });
32315
32316 Roo.HtmlEditorCore.white = [
32317         'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
32318         
32319        'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
32320        'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
32321        'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
32322        'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
32323        'TABLE',   'UL',         'XMP', 
32324        
32325        'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
32326       'THEAD',   'TR', 
32327      
32328       'DIR', 'MENU', 'OL', 'UL', 'DL',
32329        
32330       'EMBED',  'OBJECT'
32331 ];
32332
32333
32334 Roo.HtmlEditorCore.black = [
32335     //    'embed',  'object', // enable - backend responsiblity to clean thiese
32336         'APPLET', // 
32337         'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
32338         'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
32339         'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
32340         'SCRIPT', 'STYLE' ,'TITLE',  'XML',
32341         //'FONT' // CLEAN LATER..
32342         'COLGROUP', 'COL'   // messy tables.
32343         
32344         
32345 ];
32346 Roo.HtmlEditorCore.clean = [ // ?? needed???
32347      'SCRIPT', 'STYLE', 'TITLE', 'XML'
32348 ];
32349 Roo.HtmlEditorCore.tag_remove = [
32350     'FONT', 'TBODY'  
32351 ];
32352 // attributes..
32353
32354 Roo.HtmlEditorCore.ablack = [
32355     'on'
32356 ];
32357     
32358 Roo.HtmlEditorCore.aclean = [ 
32359     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
32360 ];
32361
32362 // protocols..
32363 Roo.HtmlEditorCore.pwhite= [
32364         'http',  'https',  'mailto'
32365 ];
32366
32367 // white listed style attributes.
32368 Roo.HtmlEditorCore.cwhite= [
32369       //  'text-align', /// default is to allow most things..
32370       
32371          
32372 //        'font-size'//??
32373 ];
32374
32375 // black listed style attributes.
32376 Roo.HtmlEditorCore.cblack= [
32377       //  'font-size' -- this can be set by the project 
32378 ];
32379
32380
32381
32382
32383     /*
32384  * - LGPL
32385  *
32386  * HtmlEditor
32387  * 
32388  */
32389
32390 /**
32391  * @class Roo.bootstrap.form.HtmlEditor
32392  * @extends Roo.bootstrap.form.TextArea
32393  * Bootstrap HtmlEditor class
32394
32395  * @constructor
32396  * Create a new HtmlEditor
32397  * @param {Object} config The config object
32398  */
32399
32400 Roo.bootstrap.form.HtmlEditor = function(config){
32401     Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
32402     if (!this.toolbars) {
32403         this.toolbars = [];
32404     }
32405     
32406     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
32407     this.addEvents({
32408             /**
32409              * @event initialize
32410              * Fires when the editor is fully initialized (including the iframe)
32411              * @param {HtmlEditor} this
32412              */
32413             initialize: true,
32414             /**
32415              * @event activate
32416              * Fires when the editor is first receives the focus. Any insertion must wait
32417              * until after this event.
32418              * @param {HtmlEditor} this
32419              */
32420             activate: true,
32421              /**
32422              * @event beforesync
32423              * Fires before the textarea is updated with content from the editor iframe. Return false
32424              * to cancel the sync.
32425              * @param {HtmlEditor} this
32426              * @param {String} html
32427              */
32428             beforesync: true,
32429              /**
32430              * @event beforepush
32431              * Fires before the iframe editor is updated with content from the textarea. Return false
32432              * to cancel the push.
32433              * @param {HtmlEditor} this
32434              * @param {String} html
32435              */
32436             beforepush: true,
32437              /**
32438              * @event sync
32439              * Fires when the textarea is updated with content from the editor iframe.
32440              * @param {HtmlEditor} this
32441              * @param {String} html
32442              */
32443             sync: true,
32444              /**
32445              * @event push
32446              * Fires when the iframe editor is updated with content from the textarea.
32447              * @param {HtmlEditor} this
32448              * @param {String} html
32449              */
32450             push: true,
32451              /**
32452              * @event editmodechange
32453              * Fires when the editor switches edit modes
32454              * @param {HtmlEditor} this
32455              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
32456              */
32457             editmodechange: true,
32458             /**
32459              * @event editorevent
32460              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
32461              * @param {HtmlEditor} this
32462              */
32463             editorevent: true,
32464             /**
32465              * @event firstfocus
32466              * Fires when on first focus - needed by toolbars..
32467              * @param {HtmlEditor} this
32468              */
32469             firstfocus: true,
32470             /**
32471              * @event autosave
32472              * Auto save the htmlEditor value as a file into Events
32473              * @param {HtmlEditor} this
32474              */
32475             autosave: true,
32476             /**
32477              * @event savedpreview
32478              * preview the saved version of htmlEditor
32479              * @param {HtmlEditor} this
32480              */
32481             savedpreview: true
32482         });
32483 };
32484
32485
32486 Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea,  {
32487     
32488     
32489       /**
32490      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
32491      */
32492     toolbars : false,
32493     
32494      /**
32495     * @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
32496     */
32497     btns : [],
32498    
32499      /**
32500      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
32501      *                        Roo.resizable.
32502      */
32503     resizable : false,
32504      /**
32505      * @cfg {Number} height (in pixels)
32506      */   
32507     height: 300,
32508    /**
32509      * @cfg {Number} width (in pixels)
32510      */   
32511     width: false,
32512     
32513     /**
32514      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
32515      * 
32516      */
32517     stylesheets: false,
32518     
32519     // id of frame..
32520     frameId: false,
32521     
32522     // private properties
32523     validationEvent : false,
32524     deferHeight: true,
32525     initialized : false,
32526     activated : false,
32527     
32528     onFocus : Roo.emptyFn,
32529     iframePad:3,
32530     hideMode:'offsets',
32531     
32532     tbContainer : false,
32533     
32534     bodyCls : '',
32535     
32536     toolbarContainer :function() {
32537         return this.wrap.select('.x-html-editor-tb',true).first();
32538     },
32539
32540     /**
32541      * Protected method that will not generally be called directly. It
32542      * is called when the editor creates its toolbar. Override this method if you need to
32543      * add custom toolbar buttons.
32544      * @param {HtmlEditor} editor
32545      */
32546     createToolbar : function(){
32547         Roo.log('renewing');
32548         Roo.log("create toolbars");
32549         
32550         this.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard({editor: this} ) ];
32551         this.toolbars[0].render(this.toolbarContainer());
32552         
32553         return;
32554         
32555 //        if (!editor.toolbars || !editor.toolbars.length) {
32556 //            editor.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard() ]; // can be empty?
32557 //        }
32558 //        
32559 //        for (var i =0 ; i < editor.toolbars.length;i++) {
32560 //            editor.toolbars[i] = Roo.factory(
32561 //                    typeof(editor.toolbars[i]) == 'string' ?
32562 //                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
32563 //                Roo.bootstrap.form.HtmlEditor);
32564 //            editor.toolbars[i].init(editor);
32565 //        }
32566     },
32567
32568      
32569     // private
32570     onRender : function(ct, position)
32571     {
32572        // Roo.log("Call onRender: " + this.xtype);
32573         var _t = this;
32574         Roo.bootstrap.form.HtmlEditor.superclass.onRender.call(this, ct, position);
32575       
32576         this.wrap = this.inputEl().wrap({
32577             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
32578         });
32579         
32580         this.editorcore.onRender(ct, position);
32581          
32582         if (this.resizable) {
32583             this.resizeEl = new Roo.Resizable(this.wrap, {
32584                 pinned : true,
32585                 wrap: true,
32586                 dynamic : true,
32587                 minHeight : this.height,
32588                 height: this.height,
32589                 handles : this.resizable,
32590                 width: this.width,
32591                 listeners : {
32592                     resize : function(r, w, h) {
32593                         _t.onResize(w,h); // -something
32594                     }
32595                 }
32596             });
32597             
32598         }
32599         this.createToolbar(this);
32600        
32601         
32602         if(!this.width && this.resizable){
32603             this.setSize(this.wrap.getSize());
32604         }
32605         if (this.resizeEl) {
32606             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
32607             // should trigger onReize..
32608         }
32609         
32610     },
32611
32612     // private
32613     onResize : function(w, h)
32614     {
32615         Roo.log('resize: ' +w + ',' + h );
32616         Roo.bootstrap.form.HtmlEditor.superclass.onResize.apply(this, arguments);
32617         var ew = false;
32618         var eh = false;
32619         
32620         if(this.inputEl() ){
32621             if(typeof w == 'number'){
32622                 var aw = w - this.wrap.getFrameWidth('lr');
32623                 this.inputEl().setWidth(this.adjustWidth('textarea', aw));
32624                 ew = aw;
32625             }
32626             if(typeof h == 'number'){
32627                  var tbh = -11;  // fixme it needs to tool bar size!
32628                 for (var i =0; i < this.toolbars.length;i++) {
32629                     // fixme - ask toolbars for heights?
32630                     tbh += this.toolbars[i].el.getHeight();
32631                     //if (this.toolbars[i].footer) {
32632                     //    tbh += this.toolbars[i].footer.el.getHeight();
32633                     //}
32634                 }
32635               
32636                 
32637                 
32638                 
32639                 
32640                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
32641                 ah -= 5; // knock a few pixes off for look..
32642                 this.inputEl().setHeight(this.adjustWidth('textarea', ah));
32643                 var eh = ah;
32644             }
32645         }
32646         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
32647         this.editorcore.onResize(ew,eh);
32648         
32649     },
32650
32651     /**
32652      * Toggles the editor between standard and source edit mode.
32653      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
32654      */
32655     toggleSourceEdit : function(sourceEditMode)
32656     {
32657         this.editorcore.toggleSourceEdit(sourceEditMode);
32658         
32659         if(this.editorcore.sourceEditMode){
32660             Roo.log('editor - showing textarea');
32661             
32662 //            Roo.log('in');
32663 //            Roo.log(this.syncValue());
32664             this.syncValue();
32665             this.inputEl().removeClass(['hide', 'x-hidden']);
32666             this.inputEl().dom.removeAttribute('tabIndex');
32667             this.inputEl().focus();
32668         }else{
32669             Roo.log('editor - hiding textarea');
32670 //            Roo.log('out')
32671 //            Roo.log(this.pushValue()); 
32672             this.pushValue();
32673             
32674             this.inputEl().addClass(['hide', 'x-hidden']);
32675             this.inputEl().dom.setAttribute('tabIndex', -1);
32676             //this.deferFocus();
32677         }
32678          
32679         if(this.resizable){
32680             this.setSize(this.wrap.getSize());
32681         }
32682         
32683         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
32684     },
32685  
32686     // private (for BoxComponent)
32687     adjustSize : Roo.BoxComponent.prototype.adjustSize,
32688
32689     // private (for BoxComponent)
32690     getResizeEl : function(){
32691         return this.wrap;
32692     },
32693
32694     // private (for BoxComponent)
32695     getPositionEl : function(){
32696         return this.wrap;
32697     },
32698
32699     // private
32700     initEvents : function(){
32701         this.originalValue = this.getValue();
32702     },
32703
32704 //    /**
32705 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
32706 //     * @method
32707 //     */
32708 //    markInvalid : Roo.emptyFn,
32709 //    /**
32710 //     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
32711 //     * @method
32712 //     */
32713 //    clearInvalid : Roo.emptyFn,
32714
32715     setValue : function(v){
32716         Roo.bootstrap.form.HtmlEditor.superclass.setValue.call(this, v);
32717         this.editorcore.pushValue();
32718     },
32719
32720      
32721     // private
32722     deferFocus : function(){
32723         this.focus.defer(10, this);
32724     },
32725
32726     // doc'ed in Field
32727     focus : function(){
32728         this.editorcore.focus();
32729         
32730     },
32731       
32732
32733     // private
32734     onDestroy : function(){
32735         
32736         
32737         
32738         if(this.rendered){
32739             
32740             for (var i =0; i < this.toolbars.length;i++) {
32741                 // fixme - ask toolbars for heights?
32742                 this.toolbars[i].onDestroy();
32743             }
32744             
32745             this.wrap.dom.innerHTML = '';
32746             this.wrap.remove();
32747         }
32748     },
32749
32750     // private
32751     onFirstFocus : function(){
32752         //Roo.log("onFirstFocus");
32753         this.editorcore.onFirstFocus();
32754          for (var i =0; i < this.toolbars.length;i++) {
32755             this.toolbars[i].onFirstFocus();
32756         }
32757         
32758     },
32759     
32760     // private
32761     syncValue : function()
32762     {   
32763         this.editorcore.syncValue();
32764     },
32765     
32766     pushValue : function()
32767     {   
32768         this.editorcore.pushValue();
32769     }
32770      
32771     
32772     // hide stuff that is not compatible
32773     /**
32774      * @event blur
32775      * @hide
32776      */
32777     /**
32778      * @event change
32779      * @hide
32780      */
32781     /**
32782      * @event focus
32783      * @hide
32784      */
32785     /**
32786      * @event specialkey
32787      * @hide
32788      */
32789     /**
32790      * @cfg {String} fieldClass @hide
32791      */
32792     /**
32793      * @cfg {String} focusClass @hide
32794      */
32795     /**
32796      * @cfg {String} autoCreate @hide
32797      */
32798     /**
32799      * @cfg {String} inputType @hide
32800      */
32801      
32802     /**
32803      * @cfg {String} invalidText @hide
32804      */
32805     /**
32806      * @cfg {String} msgFx @hide
32807      */
32808     /**
32809      * @cfg {String} validateOnBlur @hide
32810      */
32811 });
32812  
32813     
32814    
32815    
32816    
32817       
32818 Roo.namespace('Roo.bootstrap.form.HtmlEditor');
32819 /**
32820  * @class Roo.bootstrap.form.HtmlEditorToolbarStandard
32821  * @parent Roo.bootstrap.form.HtmlEditor
32822  * @extends Roo.bootstrap.nav.Simplebar
32823  * Basic Toolbar
32824  * 
32825  * @example
32826  * Usage:
32827  *
32828  new Roo.bootstrap.form.HtmlEditor({
32829     ....
32830     toolbars : [
32831         new Roo.bootstrap.form.HtmlEditorToolbarStandard({
32832             disable : { fonts: 1 , format: 1, ..., ... , ...],
32833             btns : [ .... ]
32834         })
32835     }
32836      
32837  * 
32838  * @cfg {Object} disable List of elements to disable..
32839  * @cfg {Array} btns List of additional buttons.
32840  * 
32841  * 
32842  * NEEDS Extra CSS? 
32843  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
32844  */
32845  
32846 Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
32847 {
32848     
32849     Roo.apply(this, config);
32850     
32851     // default disabled, based on 'good practice'..
32852     this.disable = this.disable || {};
32853     Roo.applyIf(this.disable, {
32854         fontSize : true,
32855         colors : true,
32856         specialElements : true
32857     });
32858     Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.constructor.call(this, config);
32859     
32860     this.editor = config.editor;
32861     this.editorcore = config.editor.editorcore;
32862     
32863     this.buttons   = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
32864     
32865     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
32866     // dont call parent... till later.
32867 }
32868 Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simplebar,  {
32869      
32870     bar : true,
32871     
32872     editor : false,
32873     editorcore : false,
32874     
32875     
32876     formats : [
32877         "p" ,  
32878         "h1","h2","h3","h4","h5","h6", 
32879         "pre", "code", 
32880         "abbr", "acronym", "address", "cite", "samp", "var",
32881         'div','span'
32882     ],
32883     
32884     onRender : function(ct, position)
32885     {
32886        // Roo.log("Call onRender: " + this.xtype);
32887         
32888        Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.onRender.call(this, ct, position);
32889        Roo.log(this.el);
32890        this.el.dom.style.marginBottom = '0';
32891        var _this = this;
32892        var editorcore = this.editorcore;
32893        var editor= this.editor;
32894        
32895        var children = [];
32896        var btn = function(id,cmd , toggle, handler, html){
32897        
32898             var  event = toggle ? 'toggle' : 'click';
32899        
32900             var a = {
32901                 size : 'sm',
32902                 xtype: 'Button',
32903                 xns: Roo.bootstrap,
32904                 //glyphicon : id,
32905                 fa: id,
32906                 cmd : id || cmd,
32907                 enableToggle:toggle !== false,
32908                 html : html || '',
32909                 pressed : toggle ? false : null,
32910                 listeners : {}
32911             };
32912             a.listeners[toggle ? 'toggle' : 'click'] = function() {
32913                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
32914             };
32915             children.push(a);
32916             return a;
32917        }
32918        
32919     //    var cb_box = function...
32920         
32921         var style = {
32922                 xtype: 'Button',
32923                 size : 'sm',
32924                 xns: Roo.bootstrap,
32925                 fa : 'font',
32926                 //html : 'submit'
32927                 menu : {
32928                     xtype: 'Menu',
32929                     xns: Roo.bootstrap,
32930                     items:  []
32931                 }
32932         };
32933         Roo.each(this.formats, function(f) {
32934             style.menu.items.push({
32935                 xtype :'MenuItem',
32936                 xns: Roo.bootstrap,
32937                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
32938                 tagname : f,
32939                 listeners : {
32940                     click : function()
32941                     {
32942                         editorcore.insertTag(this.tagname);
32943                         editor.focus();
32944                     }
32945                 }
32946                 
32947             });
32948         });
32949         children.push(style);   
32950         
32951         btn('bold',false,true);
32952         btn('italic',false,true);
32953         btn('align-left', 'justifyleft',true);
32954         btn('align-center', 'justifycenter',true);
32955         btn('align-right' , 'justifyright',true);
32956         btn('link', false, false, function(btn) {
32957             //Roo.log("create link?");
32958             var url = prompt(this.createLinkText, this.defaultLinkValue);
32959             if(url && url != 'http:/'+'/'){
32960                 this.editorcore.relayCmd('createlink', url);
32961             }
32962         }),
32963         btn('list','insertunorderedlist',true);
32964         btn('pencil', false,true, function(btn){
32965                 Roo.log(this);
32966                 this.toggleSourceEdit(btn.pressed);
32967         });
32968         
32969         if (this.editor.btns.length > 0) {
32970             for (var i = 0; i<this.editor.btns.length; i++) {
32971                 children.push(this.editor.btns[i]);
32972             }
32973         }
32974         
32975         /*
32976         var cog = {
32977                 xtype: 'Button',
32978                 size : 'sm',
32979                 xns: Roo.bootstrap,
32980                 glyphicon : 'cog',
32981                 //html : 'submit'
32982                 menu : {
32983                     xtype: 'Menu',
32984                     xns: Roo.bootstrap,
32985                     items:  []
32986                 }
32987         };
32988         
32989         cog.menu.items.push({
32990             xtype :'MenuItem',
32991             xns: Roo.bootstrap,
32992             html : Clean styles,
32993             tagname : f,
32994             listeners : {
32995                 click : function()
32996                 {
32997                     editorcore.insertTag(this.tagname);
32998                     editor.focus();
32999                 }
33000             }
33001             
33002         });
33003        */
33004         
33005          
33006        this.xtype = 'NavSimplebar';
33007         
33008         for(var i=0;i< children.length;i++) {
33009             
33010             this.buttons.add(this.addxtypeChild(children[i]));
33011             
33012         }
33013         
33014         editor.on('editorevent', this.updateToolbar, this);
33015     },
33016     onBtnClick : function(id)
33017     {
33018        this.editorcore.relayCmd(id);
33019        this.editorcore.focus();
33020     },
33021     
33022     /**
33023      * Protected method that will not generally be called directly. It triggers
33024      * a toolbar update by reading the markup state of the current selection in the editor.
33025      */
33026     updateToolbar: function(){
33027
33028         if(!this.editorcore.activated){
33029             this.editor.onFirstFocus(); // is this neeed?
33030             return;
33031         }
33032
33033         var btns = this.buttons; 
33034         var doc = this.editorcore.doc;
33035         btns.get('bold').setActive(doc.queryCommandState('bold'));
33036         btns.get('italic').setActive(doc.queryCommandState('italic'));
33037         //btns.get('underline').setActive(doc.queryCommandState('underline'));
33038         
33039         btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
33040         btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
33041         btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
33042         
33043         //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
33044         btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
33045          /*
33046         
33047         var ans = this.editorcore.getAllAncestors();
33048         if (this.formatCombo) {
33049             
33050             
33051             var store = this.formatCombo.store;
33052             this.formatCombo.setValue("");
33053             for (var i =0; i < ans.length;i++) {
33054                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
33055                     // select it..
33056                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
33057                     break;
33058                 }
33059             }
33060         }
33061         
33062         
33063         
33064         // hides menus... - so this cant be on a menu...
33065         Roo.bootstrap.MenuMgr.hideAll();
33066         */
33067         Roo.bootstrap.menu.Manager.hideAll();
33068         //this.editorsyncValue();
33069     },
33070     onFirstFocus: function() {
33071         this.buttons.each(function(item){
33072            item.enable();
33073         });
33074     },
33075     toggleSourceEdit : function(sourceEditMode){
33076         
33077           
33078         if(sourceEditMode){
33079             Roo.log("disabling buttons");
33080            this.buttons.each( function(item){
33081                 if(item.cmd != 'pencil'){
33082                     item.disable();
33083                 }
33084             });
33085           
33086         }else{
33087             Roo.log("enabling buttons");
33088             if(this.editorcore.initialized){
33089                 this.buttons.each( function(item){
33090                     item.enable();
33091                 });
33092             }
33093             
33094         }
33095         Roo.log("calling toggole on editor");
33096         // tell the editor that it's been pressed..
33097         this.editor.toggleSourceEdit(sourceEditMode);
33098        
33099     }
33100 });
33101
33102
33103
33104
33105  
33106 /*
33107  * - LGPL
33108  */
33109
33110 /**
33111  * @class Roo.bootstrap.form.Markdown
33112  * @extends Roo.bootstrap.form.TextArea
33113  * Bootstrap Showdown editable area
33114  * @cfg {string} content
33115  * 
33116  * @constructor
33117  * Create a new Showdown
33118  */
33119
33120 Roo.bootstrap.form.Markdown = function(config){
33121     Roo.bootstrap.form.Markdown.superclass.constructor.call(this, config);
33122    
33123 };
33124
33125 Roo.extend(Roo.bootstrap.form.Markdown, Roo.bootstrap.form.TextArea,  {
33126     
33127     editing :false,
33128     
33129     initEvents : function()
33130     {
33131         
33132         Roo.bootstrap.form.TextArea.prototype.initEvents.call(this);
33133         this.markdownEl = this.el.createChild({
33134             cls : 'roo-markdown-area'
33135         });
33136         this.inputEl().addClass('d-none');
33137         if (this.getValue() == '') {
33138             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
33139             
33140         } else {
33141             this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
33142         }
33143         this.markdownEl.on('click', this.toggleTextEdit, this);
33144         this.on('blur', this.toggleTextEdit, this);
33145         this.on('specialkey', this.resizeTextArea, this);
33146     },
33147     
33148     toggleTextEdit : function()
33149     {
33150         var sh = this.markdownEl.getHeight();
33151         this.inputEl().addClass('d-none');
33152         this.markdownEl.addClass('d-none');
33153         if (!this.editing) {
33154             // show editor?
33155             this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
33156             this.inputEl().removeClass('d-none');
33157             this.inputEl().focus();
33158             this.editing = true;
33159             return;
33160         }
33161         // show showdown...
33162         this.updateMarkdown();
33163         this.markdownEl.removeClass('d-none');
33164         this.editing = false;
33165         return;
33166     },
33167     updateMarkdown : function()
33168     {
33169         if (this.getValue() == '') {
33170             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
33171             return;
33172         }
33173  
33174         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
33175     },
33176     
33177     resizeTextArea: function () {
33178         
33179         var sh = 100;
33180         Roo.log([sh, this.getValue().split("\n").length * 30]);
33181         this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
33182     },
33183     setValue : function(val)
33184     {
33185         Roo.bootstrap.form.TextArea.prototype.setValue.call(this,val);
33186         if (!this.editing) {
33187             this.updateMarkdown();
33188         }
33189         
33190     },
33191     focus : function()
33192     {
33193         if (!this.editing) {
33194             this.toggleTextEdit();
33195         }
33196         
33197     }
33198
33199
33200 });/*
33201  * Based on:
33202  * Ext JS Library 1.1.1
33203  * Copyright(c) 2006-2007, Ext JS, LLC.
33204  *
33205  * Originally Released Under LGPL - original licence link has changed is not relivant.
33206  *
33207  * Fork - LGPL
33208  * <script type="text/javascript">
33209  */
33210  
33211 /**
33212  * @class Roo.bootstrap.PagingToolbar
33213  * @extends Roo.bootstrap.nav.Simplebar
33214  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
33215  * @constructor
33216  * Create a new PagingToolbar
33217  * @param {Object} config The config object
33218  * @param {Roo.data.Store} store
33219  */
33220 Roo.bootstrap.PagingToolbar = function(config)
33221 {
33222     // old args format still supported... - xtype is prefered..
33223         // created from xtype...
33224     
33225     this.ds = config.dataSource;
33226     
33227     if (config.store && !this.ds) {
33228         this.store= Roo.factory(config.store, Roo.data);
33229         this.ds = this.store;
33230         this.ds.xmodule = this.xmodule || false;
33231     }
33232     
33233     this.toolbarItems = [];
33234     if (config.items) {
33235         this.toolbarItems = config.items;
33236     }
33237     
33238     Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
33239     
33240     this.cursor = 0;
33241     
33242     if (this.ds) { 
33243         this.bind(this.ds);
33244     }
33245     
33246     if (Roo.bootstrap.version == 4) {
33247         this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
33248     } else {
33249         this.navgroup = new Roo.bootstrap.nav.Group({ cls: 'pagination' });
33250     }
33251     
33252 };
33253
33254 Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.nav.Simplebar, {
33255     /**
33256      * @cfg {Roo.bootstrap.Button} buttons[]
33257      * Buttons for the toolbar
33258      */
33259      /**
33260      * @cfg {Roo.data.Store} store
33261      * The underlying data store providing the paged data
33262      */
33263     /**
33264      * @cfg {String/HTMLElement/Element} container
33265      * container The id or element that will contain the toolbar
33266      */
33267     /**
33268      * @cfg {Boolean} displayInfo
33269      * True to display the displayMsg (defaults to false)
33270      */
33271     /**
33272      * @cfg {Number} pageSize
33273      * The number of records to display per page (defaults to 20)
33274      */
33275     pageSize: 20,
33276     /**
33277      * @cfg {String} displayMsg
33278      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
33279      */
33280     displayMsg : 'Displaying {0} - {1} of {2}',
33281     /**
33282      * @cfg {String} emptyMsg
33283      * The message to display when no records are found (defaults to "No data to display")
33284      */
33285     emptyMsg : 'No data to display',
33286     /**
33287      * Customizable piece of the default paging text (defaults to "Page")
33288      * @type String
33289      */
33290     beforePageText : "Page",
33291     /**
33292      * Customizable piece of the default paging text (defaults to "of %0")
33293      * @type String
33294      */
33295     afterPageText : "of {0}",
33296     /**
33297      * Customizable piece of the default paging text (defaults to "First Page")
33298      * @type String
33299      */
33300     firstText : "First Page",
33301     /**
33302      * Customizable piece of the default paging text (defaults to "Previous Page")
33303      * @type String
33304      */
33305     prevText : "Previous Page",
33306     /**
33307      * Customizable piece of the default paging text (defaults to "Next Page")
33308      * @type String
33309      */
33310     nextText : "Next Page",
33311     /**
33312      * Customizable piece of the default paging text (defaults to "Last Page")
33313      * @type String
33314      */
33315     lastText : "Last Page",
33316     /**
33317      * Customizable piece of the default paging text (defaults to "Refresh")
33318      * @type String
33319      */
33320     refreshText : "Refresh",
33321
33322     buttons : false,
33323     // private
33324     onRender : function(ct, position) 
33325     {
33326         Roo.bootstrap.PagingToolbar.superclass.onRender.call(this, ct, position);
33327         this.navgroup.parentId = this.id;
33328         this.navgroup.onRender(this.el, null);
33329         // add the buttons to the navgroup
33330         
33331         if(this.displayInfo){
33332             this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
33333             this.displayEl = this.el.select('.x-paging-info', true).first();
33334 //            var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
33335 //            this.displayEl = navel.el.select('span',true).first();
33336         }
33337         
33338         var _this = this;
33339         
33340         if(this.buttons){
33341             Roo.each(_this.buttons, function(e){ // this might need to use render????
33342                Roo.factory(e).render(_this.el);
33343             });
33344         }
33345             
33346         Roo.each(_this.toolbarItems, function(e) {
33347             _this.navgroup.addItem(e);
33348         });
33349         
33350         
33351         this.first = this.navgroup.addItem({
33352             tooltip: this.firstText,
33353             cls: "prev btn-outline-secondary",
33354             html : ' <i class="fa fa-step-backward"></i>',
33355             disabled: true,
33356             preventDefault: true,
33357             listeners : { click : this.onClick.createDelegate(this, ["first"]) }
33358         });
33359         
33360         this.prev =  this.navgroup.addItem({
33361             tooltip: this.prevText,
33362             cls: "prev btn-outline-secondary",
33363             html : ' <i class="fa fa-backward"></i>',
33364             disabled: true,
33365             preventDefault: true,
33366             listeners : { click :  this.onClick.createDelegate(this, ["prev"]) }
33367         });
33368     //this.addSeparator();
33369         
33370         
33371         var field = this.navgroup.addItem( {
33372             tagtype : 'span',
33373             cls : 'x-paging-position  btn-outline-secondary',
33374              disabled: true,
33375             html : this.beforePageText  +
33376                 '<input type="text" size="3" value="1" class="x-grid-page-number">' +
33377                 '<span class="x-paging-after">' +  String.format(this.afterPageText, 1) + '</span>'
33378          } ); //?? escaped?
33379         
33380         this.field = field.el.select('input', true).first();
33381         this.field.on("keydown", this.onPagingKeydown, this);
33382         this.field.on("focus", function(){this.dom.select();});
33383     
33384     
33385         this.afterTextEl =  field.el.select('.x-paging-after',true).first();
33386         //this.field.setHeight(18);
33387         //this.addSeparator();
33388         this.next = this.navgroup.addItem({
33389             tooltip: this.nextText,
33390             cls: "next btn-outline-secondary",
33391             html : ' <i class="fa fa-forward"></i>',
33392             disabled: true,
33393             preventDefault: true,
33394             listeners : { click :  this.onClick.createDelegate(this, ["next"]) }
33395         });
33396         this.last = this.navgroup.addItem({
33397             tooltip: this.lastText,
33398             html : ' <i class="fa fa-step-forward"></i>',
33399             cls: "next btn-outline-secondary",
33400             disabled: true,
33401             preventDefault: true,
33402             listeners : { click :  this.onClick.createDelegate(this, ["last"]) }
33403         });
33404     //this.addSeparator();
33405         this.loading = this.navgroup.addItem({
33406             tooltip: this.refreshText,
33407             cls: "btn-outline-secondary",
33408             html : ' <i class="fa fa-refresh"></i>',
33409             preventDefault: true,
33410             listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
33411         });
33412         
33413     },
33414
33415     // private
33416     updateInfo : function(){
33417         if(this.displayEl){
33418             var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
33419             var msg = count == 0 ?
33420                 this.emptyMsg :
33421                 String.format(
33422                     this.displayMsg,
33423                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
33424                 );
33425             this.displayEl.update(msg);
33426         }
33427     },
33428
33429     // private
33430     onLoad : function(ds, r, o)
33431     {
33432         this.cursor = o.params && o.params.start ? o.params.start : 0;
33433         
33434         var d = this.getPageData(),
33435             ap = d.activePage,
33436             ps = d.pages;
33437         
33438         
33439         this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
33440         this.field.dom.value = ap;
33441         this.first.setDisabled(ap == 1);
33442         this.prev.setDisabled(ap == 1);
33443         this.next.setDisabled(ap == ps);
33444         this.last.setDisabled(ap == ps);
33445         this.loading.enable();
33446         this.updateInfo();
33447     },
33448
33449     // private
33450     getPageData : function(){
33451         var total = this.ds.getTotalCount();
33452         return {
33453             total : total,
33454             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
33455             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
33456         };
33457     },
33458
33459     // private
33460     onLoadError : function(proxy, o){
33461         this.loading.enable();
33462         if (this.ds.events.loadexception.listeners.length  < 2) {
33463             // nothing has been assigned to loadexception except this...
33464             // so 
33465             Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
33466
33467         }
33468     },
33469
33470     // private
33471     onPagingKeydown : function(e){
33472         var k = e.getKey();
33473         var d = this.getPageData();
33474         if(k == e.RETURN){
33475             var v = this.field.dom.value, pageNum;
33476             if(!v || isNaN(pageNum = parseInt(v, 10))){
33477                 this.field.dom.value = d.activePage;
33478                 return;
33479             }
33480             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
33481             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
33482             e.stopEvent();
33483         }
33484         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))
33485         {
33486           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
33487           this.field.dom.value = pageNum;
33488           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
33489           e.stopEvent();
33490         }
33491         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
33492         {
33493           var v = this.field.dom.value, pageNum; 
33494           var increment = (e.shiftKey) ? 10 : 1;
33495           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
33496                 increment *= -1;
33497           }
33498           if(!v || isNaN(pageNum = parseInt(v, 10))) {
33499             this.field.dom.value = d.activePage;
33500             return;
33501           }
33502           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
33503           {
33504             this.field.dom.value = parseInt(v, 10) + increment;
33505             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
33506             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
33507           }
33508           e.stopEvent();
33509         }
33510     },
33511
33512     // private
33513     beforeLoad : function(){
33514         if(this.loading){
33515             this.loading.disable();
33516         }
33517     },
33518
33519     // private
33520     onClick : function(which){
33521         
33522         var ds = this.ds;
33523         if (!ds) {
33524             return;
33525         }
33526         
33527         switch(which){
33528             case "first":
33529                 ds.load({params:{start: 0, limit: this.pageSize}});
33530             break;
33531             case "prev":
33532                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
33533             break;
33534             case "next":
33535                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
33536             break;
33537             case "last":
33538                 var total = ds.getTotalCount();
33539                 var extra = total % this.pageSize;
33540                 var lastStart = extra ? (total - extra) : total-this.pageSize;
33541                 ds.load({params:{start: lastStart, limit: this.pageSize}});
33542             break;
33543             case "refresh":
33544                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
33545             break;
33546         }
33547     },
33548
33549     /**
33550      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
33551      * @param {Roo.data.Store} store The data store to unbind
33552      */
33553     unbind : function(ds){
33554         ds.un("beforeload", this.beforeLoad, this);
33555         ds.un("load", this.onLoad, this);
33556         ds.un("loadexception", this.onLoadError, this);
33557         ds.un("remove", this.updateInfo, this);
33558         ds.un("add", this.updateInfo, this);
33559         this.ds = undefined;
33560     },
33561
33562     /**
33563      * Binds the paging toolbar to the specified {@link Roo.data.Store}
33564      * @param {Roo.data.Store} store The data store to bind
33565      */
33566     bind : function(ds){
33567         ds.on("beforeload", this.beforeLoad, this);
33568         ds.on("load", this.onLoad, this);
33569         ds.on("loadexception", this.onLoadError, this);
33570         ds.on("remove", this.updateInfo, this);
33571         ds.on("add", this.updateInfo, this);
33572         this.ds = ds;
33573     }
33574 });/*
33575  * - LGPL
33576  *
33577  * element
33578  * 
33579  */
33580
33581 /**
33582  * @class Roo.bootstrap.MessageBar
33583  * @extends Roo.bootstrap.Component
33584  * Bootstrap MessageBar class
33585  * @cfg {String} html contents of the MessageBar
33586  * @cfg {String} weight (info | success | warning | danger) default info
33587  * @cfg {String} beforeClass insert the bar before the given class
33588  * @cfg {Boolean} closable (true | false) default false
33589  * @cfg {Boolean} fixed (true | false) default false, fix the bar at the top
33590  * 
33591  * @constructor
33592  * Create a new Element
33593  * @param {Object} config The config object
33594  */
33595
33596 Roo.bootstrap.MessageBar = function(config){
33597     Roo.bootstrap.MessageBar.superclass.constructor.call(this, config);
33598 };
33599
33600 Roo.extend(Roo.bootstrap.MessageBar, Roo.bootstrap.Component,  {
33601     
33602     html: '',
33603     weight: 'info',
33604     closable: false,
33605     fixed: false,
33606     beforeClass: 'bootstrap-sticky-wrap',
33607     
33608     getAutoCreate : function(){
33609         
33610         var cfg = {
33611             tag: 'div',
33612             cls: 'alert alert-dismissable alert-' + this.weight,
33613             cn: [
33614                 {
33615                     tag: 'span',
33616                     cls: 'message',
33617                     html: this.html || ''
33618                 }
33619             ]
33620         };
33621         
33622         if(this.fixed){
33623             cfg.cls += ' alert-messages-fixed';
33624         }
33625         
33626         if(this.closable){
33627             cfg.cn.push({
33628                 tag: 'button',
33629                 cls: 'close',
33630                 html: 'x'
33631             });
33632         }
33633         
33634         return cfg;
33635     },
33636     
33637     onRender : function(ct, position)
33638     {
33639         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
33640         
33641         if(!this.el){
33642             var cfg = Roo.apply({},  this.getAutoCreate());
33643             cfg.id = Roo.id();
33644             
33645             if (this.cls) {
33646                 cfg.cls += ' ' + this.cls;
33647             }
33648             if (this.style) {
33649                 cfg.style = this.style;
33650             }
33651             this.el = Roo.get(document.body).createChild(cfg, Roo.select('.'+this.beforeClass, true).first());
33652             
33653             this.el.setVisibilityMode(Roo.Element.DISPLAY);
33654         }
33655         
33656         this.el.select('>button.close').on('click', this.hide, this);
33657         
33658     },
33659     
33660     show : function()
33661     {
33662         if (!this.rendered) {
33663             this.render();
33664         }
33665         
33666         this.el.show();
33667         
33668         this.fireEvent('show', this);
33669         
33670     },
33671     
33672     hide : function()
33673     {
33674         if (!this.rendered) {
33675             this.render();
33676         }
33677         
33678         this.el.hide();
33679         
33680         this.fireEvent('hide', this);
33681     },
33682     
33683     update : function()
33684     {
33685 //        var e = this.el.dom.firstChild;
33686 //        
33687 //        if(this.closable){
33688 //            e = e.nextSibling;
33689 //        }
33690 //        
33691 //        e.data = this.html || '';
33692
33693         this.el.select('>.message', true).first().dom.innerHTML = this.html || '';
33694     }
33695    
33696 });
33697
33698  
33699
33700      /*
33701  * - LGPL
33702  *
33703  * Graph
33704  * 
33705  */
33706
33707
33708 /**
33709  * @class Roo.bootstrap.Graph
33710  * @extends Roo.bootstrap.Component
33711  * Bootstrap Graph class
33712 > Prameters
33713  -sm {number} sm 4
33714  -md {number} md 5
33715  @cfg {String} graphtype  bar | vbar | pie
33716  @cfg {number} g_x coodinator | centre x (pie)
33717  @cfg {number} g_y coodinator | centre y (pie)
33718  @cfg {number} g_r radius (pie)
33719  @cfg {number} g_height height of the chart (respected by all elements in the set)
33720  @cfg {number} g_width width of the chart (respected by all elements in the set)
33721  @cfg {Object} title The title of the chart
33722     
33723  -{Array}  values
33724  -opts (object) options for the chart 
33725      o {
33726      o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
33727      o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
33728      o vgutter (number)
33729      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.
33730      o stacked (boolean) whether or not to tread values as in a stacked bar chart
33731      o to
33732      o stretch (boolean)
33733      o }
33734  -opts (object) options for the pie
33735      o{
33736      o cut
33737      o startAngle (number)
33738      o endAngle (number)
33739      } 
33740  *
33741  * @constructor
33742  * Create a new Input
33743  * @param {Object} config The config object
33744  */
33745
33746 Roo.bootstrap.Graph = function(config){
33747     Roo.bootstrap.Graph.superclass.constructor.call(this, config);
33748     
33749     this.addEvents({
33750         // img events
33751         /**
33752          * @event click
33753          * The img click event for the img.
33754          * @param {Roo.EventObject} e
33755          */
33756         "click" : true
33757     });
33758 };
33759
33760 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
33761     
33762     sm: 4,
33763     md: 5,
33764     graphtype: 'bar',
33765     g_height: 250,
33766     g_width: 400,
33767     g_x: 50,
33768     g_y: 50,
33769     g_r: 30,
33770     opts:{
33771         //g_colors: this.colors,
33772         g_type: 'soft',
33773         g_gutter: '20%'
33774
33775     },
33776     title : false,
33777
33778     getAutoCreate : function(){
33779         
33780         var cfg = {
33781             tag: 'div',
33782             html : null
33783         };
33784         
33785         
33786         return  cfg;
33787     },
33788
33789     onRender : function(ct,position){
33790         
33791         
33792         Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
33793         
33794         if (typeof(Raphael) == 'undefined') {
33795             Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
33796             return;
33797         }
33798         
33799         this.raphael = Raphael(this.el.dom);
33800         
33801                     // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
33802                     // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
33803                     // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
33804                     // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
33805                 /*
33806                 r.text(160, 10, "Single Series Chart").attr(txtattr);
33807                 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
33808                 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
33809                 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
33810                 
33811                 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
33812                 r.barchart(330, 10, 300, 220, data1);
33813                 r.barchart(10, 250, 300, 220, data2, {stacked: true});
33814                 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
33815                 */
33816                 
33817                 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
33818                 // r.barchart(30, 30, 560, 250,  xdata, {
33819                 //    labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
33820                 //     axis : "0 0 1 1",
33821                 //     axisxlabels :  xdata
33822                 //     //yvalues : cols,
33823                    
33824                 // });
33825 //        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
33826 //        
33827 //        this.load(null,xdata,{
33828 //                axis : "0 0 1 1",
33829 //                axisxlabels :  xdata
33830 //                });
33831
33832     },
33833
33834     load : function(graphtype,xdata,opts)
33835     {
33836         this.raphael.clear();
33837         if(!graphtype) {
33838             graphtype = this.graphtype;
33839         }
33840         if(!opts){
33841             opts = this.opts;
33842         }
33843         var r = this.raphael,
33844             fin = function () {
33845                 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
33846             },
33847             fout = function () {
33848                 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
33849             },
33850             pfin = function() {
33851                 this.sector.stop();
33852                 this.sector.scale(1.1, 1.1, this.cx, this.cy);
33853
33854                 if (this.label) {
33855                     this.label[0].stop();
33856                     this.label[0].attr({ r: 7.5 });
33857                     this.label[1].attr({ "font-weight": 800 });
33858                 }
33859             },
33860             pfout = function() {
33861                 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
33862
33863                 if (this.label) {
33864                     this.label[0].animate({ r: 5 }, 500, "bounce");
33865                     this.label[1].attr({ "font-weight": 400 });
33866                 }
33867             };
33868
33869         switch(graphtype){
33870             case 'bar':
33871                 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
33872                 break;
33873             case 'hbar':
33874                 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
33875                 break;
33876             case 'pie':
33877 //                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west", 
33878 //                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
33879 //            
33880                 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
33881                 
33882                 break;
33883
33884         }
33885         
33886         if(this.title){
33887             this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
33888         }
33889         
33890     },
33891     
33892     setTitle: function(o)
33893     {
33894         this.title = o;
33895     },
33896     
33897     initEvents: function() {
33898         
33899         if(!this.href){
33900             this.el.on('click', this.onClick, this);
33901         }
33902     },
33903     
33904     onClick : function(e)
33905     {
33906         Roo.log('img onclick');
33907         this.fireEvent('click', this, e);
33908     }
33909    
33910 });
33911
33912  
33913 Roo.bootstrap.dash = {};/*
33914  * - LGPL
33915  *
33916  * numberBox
33917  * 
33918  */
33919 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
33920
33921 /**
33922  * @class Roo.bootstrap.dash.NumberBox
33923  * @extends Roo.bootstrap.Component
33924  * Bootstrap NumberBox class
33925  * @cfg {String} headline Box headline
33926  * @cfg {String} content Box content
33927  * @cfg {String} icon Box icon
33928  * @cfg {String} footer Footer text
33929  * @cfg {String} fhref Footer href
33930  * 
33931  * @constructor
33932  * Create a new NumberBox
33933  * @param {Object} config The config object
33934  */
33935
33936
33937 Roo.bootstrap.dash.NumberBox = function(config){
33938     Roo.bootstrap.dash.NumberBox.superclass.constructor.call(this, config);
33939     
33940 };
33941
33942 Roo.extend(Roo.bootstrap.dash.NumberBox, Roo.bootstrap.Component,  {
33943     
33944     headline : '',
33945     content : '',
33946     icon : '',
33947     footer : '',
33948     fhref : '',
33949     ficon : '',
33950     
33951     getAutoCreate : function(){
33952         
33953         var cfg = {
33954             tag : 'div',
33955             cls : 'small-box ',
33956             cn : [
33957                 {
33958                     tag : 'div',
33959                     cls : 'inner',
33960                     cn :[
33961                         {
33962                             tag : 'h3',
33963                             cls : 'roo-headline',
33964                             html : this.headline
33965                         },
33966                         {
33967                             tag : 'p',
33968                             cls : 'roo-content',
33969                             html : this.content
33970                         }
33971                     ]
33972                 }
33973             ]
33974         };
33975         
33976         if(this.icon){
33977             cfg.cn.push({
33978                 tag : 'div',
33979                 cls : 'icon',
33980                 cn :[
33981                     {
33982                         tag : 'i',
33983                         cls : 'ion ' + this.icon
33984                     }
33985                 ]
33986             });
33987         }
33988         
33989         if(this.footer){
33990             var footer = {
33991                 tag : 'a',
33992                 cls : 'small-box-footer',
33993                 href : this.fhref || '#',
33994                 html : this.footer
33995             };
33996             
33997             cfg.cn.push(footer);
33998             
33999         }
34000         
34001         return  cfg;
34002     },
34003
34004     onRender : function(ct,position){
34005         Roo.bootstrap.dash.NumberBox.superclass.onRender.call(this,ct,position);
34006
34007
34008        
34009                 
34010     },
34011
34012     setHeadline: function (value)
34013     {
34014         this.el.select('.roo-headline',true).first().dom.innerHTML = value;
34015     },
34016     
34017     setFooter: function (value, href)
34018     {
34019         this.el.select('a.small-box-footer',true).first().dom.innerHTML = value;
34020         
34021         if(href){
34022             this.el.select('a.small-box-footer',true).first().attr('href', href);
34023         }
34024         
34025     },
34026
34027     setContent: function (value)
34028     {
34029         this.el.select('.roo-content',true).first().dom.innerHTML = value;
34030     },
34031
34032     initEvents: function() 
34033     {   
34034         
34035     }
34036     
34037 });
34038
34039  
34040 /*
34041  * - LGPL
34042  *
34043  * TabBox
34044  * 
34045  */
34046 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
34047
34048 /**
34049  * @class Roo.bootstrap.dash.TabBox
34050  * @extends Roo.bootstrap.Component
34051  * @children Roo.bootstrap.dash.TabPane
34052  * Bootstrap TabBox class
34053  * @cfg {String} title Title of the TabBox
34054  * @cfg {String} icon Icon of the TabBox
34055  * @cfg {Boolean} showtabs (true|false) show the tabs default true
34056  * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
34057  * 
34058  * @constructor
34059  * Create a new TabBox
34060  * @param {Object} config The config object
34061  */
34062
34063
34064 Roo.bootstrap.dash.TabBox = function(config){
34065     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
34066     this.addEvents({
34067         // raw events
34068         /**
34069          * @event addpane
34070          * When a pane is added
34071          * @param {Roo.bootstrap.dash.TabPane} pane
34072          */
34073         "addpane" : true,
34074         /**
34075          * @event activatepane
34076          * When a pane is activated
34077          * @param {Roo.bootstrap.dash.TabPane} pane
34078          */
34079         "activatepane" : true
34080         
34081          
34082     });
34083     
34084     this.panes = [];
34085 };
34086
34087 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
34088
34089     title : '',
34090     icon : false,
34091     showtabs : true,
34092     tabScrollable : false,
34093     
34094     getChildContainer : function()
34095     {
34096         return this.el.select('.tab-content', true).first();
34097     },
34098     
34099     getAutoCreate : function(){
34100         
34101         var header = {
34102             tag: 'li',
34103             cls: 'pull-left header',
34104             html: this.title,
34105             cn : []
34106         };
34107         
34108         if(this.icon){
34109             header.cn.push({
34110                 tag: 'i',
34111                 cls: 'fa ' + this.icon
34112             });
34113         }
34114         
34115         var h = {
34116             tag: 'ul',
34117             cls: 'nav nav-tabs pull-right',
34118             cn: [
34119                 header
34120             ]
34121         };
34122         
34123         if(this.tabScrollable){
34124             h = {
34125                 tag: 'div',
34126                 cls: 'tab-header',
34127                 cn: [
34128                     {
34129                         tag: 'ul',
34130                         cls: 'nav nav-tabs pull-right',
34131                         cn: [
34132                             header
34133                         ]
34134                     }
34135                 ]
34136             };
34137         }
34138         
34139         var cfg = {
34140             tag: 'div',
34141             cls: 'nav-tabs-custom',
34142             cn: [
34143                 h,
34144                 {
34145                     tag: 'div',
34146                     cls: 'tab-content no-padding',
34147                     cn: []
34148                 }
34149             ]
34150         };
34151
34152         return  cfg;
34153     },
34154     initEvents : function()
34155     {
34156         //Roo.log('add add pane handler');
34157         this.on('addpane', this.onAddPane, this);
34158     },
34159      /**
34160      * Updates the box title
34161      * @param {String} html to set the title to.
34162      */
34163     setTitle : function(value)
34164     {
34165         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
34166     },
34167     onAddPane : function(pane)
34168     {
34169         this.panes.push(pane);
34170         //Roo.log('addpane');
34171         //Roo.log(pane);
34172         // tabs are rendere left to right..
34173         if(!this.showtabs){
34174             return;
34175         }
34176         
34177         var ctr = this.el.select('.nav-tabs', true).first();
34178          
34179          
34180         var existing = ctr.select('.nav-tab',true);
34181         var qty = existing.getCount();;
34182         
34183         
34184         var tab = ctr.createChild({
34185             tag : 'li',
34186             cls : 'nav-tab' + (qty ? '' : ' active'),
34187             cn : [
34188                 {
34189                     tag : 'a',
34190                     href:'#',
34191                     html : pane.title
34192                 }
34193             ]
34194         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
34195         pane.tab = tab;
34196         
34197         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
34198         if (!qty) {
34199             pane.el.addClass('active');
34200         }
34201         
34202                 
34203     },
34204     onTabClick : function(ev,un,ob,pane)
34205     {
34206         //Roo.log('tab - prev default');
34207         ev.preventDefault();
34208         
34209         
34210         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
34211         pane.tab.addClass('active');
34212         //Roo.log(pane.title);
34213         this.getChildContainer().select('.tab-pane',true).removeClass('active');
34214         // technically we should have a deactivate event.. but maybe add later.
34215         // and it should not de-activate the selected tab...
34216         this.fireEvent('activatepane', pane);
34217         pane.el.addClass('active');
34218         pane.fireEvent('activate');
34219         
34220         
34221     },
34222     
34223     getActivePane : function()
34224     {
34225         var r = false;
34226         Roo.each(this.panes, function(p) {
34227             if(p.el.hasClass('active')){
34228                 r = p;
34229                 return false;
34230             }
34231             
34232             return;
34233         });
34234         
34235         return r;
34236     }
34237     
34238     
34239 });
34240
34241  
34242 /*
34243  * - LGPL
34244  *
34245  * Tab pane
34246  * 
34247  */
34248 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
34249 /**
34250  * @class Roo.bootstrap.TabPane
34251  * @extends Roo.bootstrap.Component
34252  * @children  Roo.bootstrap.Graph Roo.bootstrap.Column
34253  * Bootstrap TabPane class
34254  * @cfg {Boolean} active (false | true) Default false
34255  * @cfg {String} title title of panel
34256
34257  * 
34258  * @constructor
34259  * Create a new TabPane
34260  * @param {Object} config The config object
34261  */
34262
34263 Roo.bootstrap.dash.TabPane = function(config){
34264     Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
34265     
34266     this.addEvents({
34267         // raw events
34268         /**
34269          * @event activate
34270          * When a pane is activated
34271          * @param {Roo.bootstrap.dash.TabPane} pane
34272          */
34273         "activate" : true
34274          
34275     });
34276 };
34277
34278 Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component,  {
34279     
34280     active : false,
34281     title : '',
34282     
34283     // the tabBox that this is attached to.
34284     tab : false,
34285      
34286     getAutoCreate : function() 
34287     {
34288         var cfg = {
34289             tag: 'div',
34290             cls: 'tab-pane'
34291         };
34292         
34293         if(this.active){
34294             cfg.cls += ' active';
34295         }
34296         
34297         return cfg;
34298     },
34299     initEvents  : function()
34300     {
34301         //Roo.log('trigger add pane handler');
34302         this.parent().fireEvent('addpane', this)
34303     },
34304     
34305      /**
34306      * Updates the tab title 
34307      * @param {String} html to set the title to.
34308      */
34309     setTitle: function(str)
34310     {
34311         if (!this.tab) {
34312             return;
34313         }
34314         this.title = str;
34315         this.tab.select('a', true).first().dom.innerHTML = str;
34316         
34317     }
34318     
34319     
34320     
34321 });
34322
34323  
34324
34325
34326  /*
34327  * - LGPL
34328  *
34329  * Tooltip
34330  * 
34331  */
34332
34333 /**
34334  * @class Roo.bootstrap.Tooltip
34335  * Bootstrap Tooltip class
34336  * This is basic at present - all componets support it by default, however they should add tooltipEl() method
34337  * to determine which dom element triggers the tooltip.
34338  * 
34339  * It needs to add support for additional attributes like tooltip-position
34340  * 
34341  * @constructor
34342  * Create a new Toolti
34343  * @param {Object} config The config object
34344  */
34345
34346 Roo.bootstrap.Tooltip = function(config){
34347     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
34348     
34349     this.alignment = Roo.bootstrap.Tooltip.alignment;
34350     
34351     if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
34352         this.alignment = config.alignment;
34353     }
34354     
34355 };
34356
34357 Roo.apply(Roo.bootstrap.Tooltip, {
34358     /**
34359      * @function init initialize tooltip monitoring.
34360      * @static
34361      */
34362     currentEl : false,
34363     currentTip : false,
34364     currentRegion : false,
34365     
34366     //  init : delay?
34367     
34368     init : function()
34369     {
34370         Roo.get(document).on('mouseover', this.enter ,this);
34371         Roo.get(document).on('mouseout', this.leave, this);
34372          
34373         
34374         this.currentTip = new Roo.bootstrap.Tooltip();
34375     },
34376     
34377     enter : function(ev)
34378     {
34379         var dom = ev.getTarget();
34380         
34381         //Roo.log(['enter',dom]);
34382         var el = Roo.fly(dom);
34383         if (this.currentEl) {
34384             //Roo.log(dom);
34385             //Roo.log(this.currentEl);
34386             //Roo.log(this.currentEl.contains(dom));
34387             if (this.currentEl == el) {
34388                 return;
34389             }
34390             if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
34391                 return;
34392             }
34393
34394         }
34395         
34396         if (this.currentTip.el) {
34397             this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
34398         }    
34399         //Roo.log(ev);
34400         
34401         if(!el || el.dom == document){
34402             return;
34403         }
34404         
34405         var bindEl = el; 
34406         var pel = false;
34407         if (!el.attr('tooltip')) {
34408             pel = el.findParent("[tooltip]");
34409             if (pel) {
34410                 bindEl = Roo.get(pel);
34411             }
34412         }
34413         
34414        
34415         
34416         // you can not look for children, as if el is the body.. then everythign is the child..
34417         if (!pel && !el.attr('tooltip')) { //
34418             if (!el.select("[tooltip]").elements.length) {
34419                 return;
34420             }
34421             // is the mouse over this child...?
34422             bindEl = el.select("[tooltip]").first();
34423             var xy = ev.getXY();
34424             if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
34425                 //Roo.log("not in region.");
34426                 return;
34427             }
34428             //Roo.log("child element over..");
34429             
34430         }
34431         this.currentEl = el;
34432         this.currentTip.bind(bindEl);
34433         this.currentRegion = Roo.lib.Region.getRegion(dom);
34434         this.currentTip.enter();
34435         
34436     },
34437     leave : function(ev)
34438     {
34439         var dom = ev.getTarget();
34440         //Roo.log(['leave',dom]);
34441         if (!this.currentEl) {
34442             return;
34443         }
34444         
34445         
34446         if (dom != this.currentEl.dom) {
34447             return;
34448         }
34449         var xy = ev.getXY();
34450         if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0]  ))) {
34451             return;
34452         }
34453         // only activate leave if mouse cursor is outside... bounding box..
34454         
34455         
34456         
34457         
34458         if (this.currentTip) {
34459             this.currentTip.leave();
34460         }
34461         //Roo.log('clear currentEl');
34462         this.currentEl = false;
34463         
34464         
34465     },
34466     alignment : {
34467         'left' : ['r-l', [-2,0], 'right'],
34468         'right' : ['l-r', [2,0], 'left'],
34469         'bottom' : ['t-b', [0,2], 'top'],
34470         'top' : [ 'b-t', [0,-2], 'bottom']
34471     }
34472     
34473 });
34474
34475
34476 Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
34477     
34478     
34479     bindEl : false,
34480     
34481     delay : null, // can be { show : 300 , hide: 500}
34482     
34483     timeout : null,
34484     
34485     hoverState : null, //???
34486     
34487     placement : 'bottom', 
34488     
34489     alignment : false,
34490     
34491     getAutoCreate : function(){
34492     
34493         var cfg = {
34494            cls : 'tooltip',   
34495            role : 'tooltip',
34496            cn : [
34497                 {
34498                     cls : 'tooltip-arrow arrow'
34499                 },
34500                 {
34501                     cls : 'tooltip-inner'
34502                 }
34503            ]
34504         };
34505         
34506         return cfg;
34507     },
34508     bind : function(el)
34509     {
34510         this.bindEl = el;
34511     },
34512     
34513     initEvents : function()
34514     {
34515         this.arrowEl = this.el.select('.arrow', true).first();
34516         this.innerEl = this.el.select('.tooltip-inner', true).first();
34517     },
34518     
34519     enter : function () {
34520        
34521         if (this.timeout != null) {
34522             clearTimeout(this.timeout);
34523         }
34524         
34525         this.hoverState = 'in';
34526          //Roo.log("enter - show");
34527         if (!this.delay || !this.delay.show) {
34528             this.show();
34529             return;
34530         }
34531         var _t = this;
34532         this.timeout = setTimeout(function () {
34533             if (_t.hoverState == 'in') {
34534                 _t.show();
34535             }
34536         }, this.delay.show);
34537     },
34538     leave : function()
34539     {
34540         clearTimeout(this.timeout);
34541     
34542         this.hoverState = 'out';
34543          if (!this.delay || !this.delay.hide) {
34544             this.hide();
34545             return;
34546         }
34547        
34548         var _t = this;
34549         this.timeout = setTimeout(function () {
34550             //Roo.log("leave - timeout");
34551             
34552             if (_t.hoverState == 'out') {
34553                 _t.hide();
34554                 Roo.bootstrap.Tooltip.currentEl = false;
34555             }
34556         }, delay);
34557     },
34558     
34559     show : function (msg)
34560     {
34561         if (!this.el) {
34562             this.render(document.body);
34563         }
34564         // set content.
34565         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
34566         
34567         var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
34568         
34569         this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
34570         
34571         this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
34572                              'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
34573
34574         if(this.bindEl.attr('tooltip-class')) {
34575             this.el.addClass(this.bindEl.attr('tooltip-class'));
34576         }
34577         
34578         var placement = typeof this.placement == 'function' ?
34579             this.placement.call(this, this.el, on_el) :
34580             this.placement;
34581         
34582         if(this.bindEl.attr('tooltip-placement')) {
34583             placement = this.bindEl.attr('tooltip-placement');
34584         }
34585             
34586         var autoToken = /\s?auto?\s?/i;
34587         var autoPlace = autoToken.test(placement);
34588         if (autoPlace) {
34589             placement = placement.replace(autoToken, '') || 'top';
34590         }
34591         
34592         //this.el.detach()
34593         //this.el.setXY([0,0]);
34594         this.el.show();
34595         //this.el.dom.style.display='block';
34596         
34597         //this.el.appendTo(on_el);
34598         
34599         var p = this.getPosition();
34600         var box = this.el.getBox();
34601         
34602         if (autoPlace) {
34603             // fixme..
34604         }
34605         
34606         var align = this.alignment[placement];
34607         
34608         var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
34609         
34610         if(placement == 'top' || placement == 'bottom'){
34611             if(xy[0] < 0){
34612                 placement = 'right';
34613             }
34614             
34615             if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
34616                 placement = 'left';
34617             }
34618             
34619             var scroll = Roo.select('body', true).first().getScroll();
34620             
34621             if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
34622                 placement = 'top';
34623             }
34624             
34625             align = this.alignment[placement];
34626             
34627             this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
34628             
34629         }
34630         
34631         var elems = document.getElementsByTagName('div');
34632         var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
34633         for (var i = 0; i < elems.length; i++) {
34634           var zindex = Number.parseInt(
34635                 document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
34636                 10
34637           );
34638           if (zindex > highest) {
34639             highest = zindex;
34640           }
34641         }
34642         
34643         
34644         
34645         this.el.dom.style.zIndex = highest;
34646         
34647         this.el.alignTo(this.bindEl, align[0],align[1]);
34648         //var arrow = this.el.select('.arrow',true).first();
34649         //arrow.set(align[2], 
34650         
34651         this.el.addClass(placement);
34652         this.el.addClass("bs-tooltip-"+ placement);
34653         
34654         this.el.addClass('in fade show');
34655         
34656         this.hoverState = null;
34657         
34658         if (this.el.hasClass('fade')) {
34659             // fade it?
34660         }
34661         
34662         
34663         
34664         
34665         
34666     },
34667     hide : function()
34668     {
34669          
34670         if (!this.el) {
34671             return;
34672         }
34673         //this.el.setXY([0,0]);
34674         if(this.bindEl.attr('tooltip-class')) {
34675             this.el.removeClass(this.bindEl.attr('tooltip-class'));
34676         }
34677         this.el.removeClass(['show', 'in']);
34678         //this.el.hide();
34679         
34680     }
34681     
34682 });
34683  
34684
34685  /*
34686  * - LGPL
34687  *
34688  * Location Picker
34689  * 
34690  */
34691
34692 /**
34693  * @class Roo.bootstrap.LocationPicker
34694  * @extends Roo.bootstrap.Component
34695  * Bootstrap LocationPicker class
34696  * @cfg {Number} latitude Position when init default 0
34697  * @cfg {Number} longitude Position when init default 0
34698  * @cfg {Number} zoom default 15
34699  * @cfg {String} mapTypeId default google.maps.MapTypeId.ROADMAP
34700  * @cfg {Boolean} mapTypeControl default false
34701  * @cfg {Boolean} disableDoubleClickZoom default false
34702  * @cfg {Boolean} scrollwheel default true
34703  * @cfg {Boolean} streetViewControl default false
34704  * @cfg {Number} radius default 0
34705  * @cfg {String} locationName
34706  * @cfg {Boolean} draggable default true
34707  * @cfg {Boolean} enableAutocomplete default false
34708  * @cfg {Boolean} enableReverseGeocode default true
34709  * @cfg {String} markerTitle
34710  * 
34711  * @constructor
34712  * Create a new LocationPicker
34713  * @param {Object} config The config object
34714  */
34715
34716
34717 Roo.bootstrap.LocationPicker = function(config){
34718     
34719     Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
34720     
34721     this.addEvents({
34722         /**
34723          * @event initial
34724          * Fires when the picker initialized.
34725          * @param {Roo.bootstrap.LocationPicker} this
34726          * @param {Google Location} location
34727          */
34728         initial : true,
34729         /**
34730          * @event positionchanged
34731          * Fires when the picker position changed.
34732          * @param {Roo.bootstrap.LocationPicker} this
34733          * @param {Google Location} location
34734          */
34735         positionchanged : true,
34736         /**
34737          * @event resize
34738          * Fires when the map resize.
34739          * @param {Roo.bootstrap.LocationPicker} this
34740          */
34741         resize : true,
34742         /**
34743          * @event show
34744          * Fires when the map show.
34745          * @param {Roo.bootstrap.LocationPicker} this
34746          */
34747         show : true,
34748         /**
34749          * @event hide
34750          * Fires when the map hide.
34751          * @param {Roo.bootstrap.LocationPicker} this
34752          */
34753         hide : true,
34754         /**
34755          * @event mapClick
34756          * Fires when click the map.
34757          * @param {Roo.bootstrap.LocationPicker} this
34758          * @param {Map event} e
34759          */
34760         mapClick : true,
34761         /**
34762          * @event mapRightClick
34763          * Fires when right click the map.
34764          * @param {Roo.bootstrap.LocationPicker} this
34765          * @param {Map event} e
34766          */
34767         mapRightClick : true,
34768         /**
34769          * @event markerClick
34770          * Fires when click the marker.
34771          * @param {Roo.bootstrap.LocationPicker} this
34772          * @param {Map event} e
34773          */
34774         markerClick : true,
34775         /**
34776          * @event markerRightClick
34777          * Fires when right click the marker.
34778          * @param {Roo.bootstrap.LocationPicker} this
34779          * @param {Map event} e
34780          */
34781         markerRightClick : true,
34782         /**
34783          * @event OverlayViewDraw
34784          * Fires when OverlayView Draw
34785          * @param {Roo.bootstrap.LocationPicker} this
34786          */
34787         OverlayViewDraw : true,
34788         /**
34789          * @event OverlayViewOnAdd
34790          * Fires when OverlayView Draw
34791          * @param {Roo.bootstrap.LocationPicker} this
34792          */
34793         OverlayViewOnAdd : true,
34794         /**
34795          * @event OverlayViewOnRemove
34796          * Fires when OverlayView Draw
34797          * @param {Roo.bootstrap.LocationPicker} this
34798          */
34799         OverlayViewOnRemove : true,
34800         /**
34801          * @event OverlayViewShow
34802          * Fires when OverlayView Draw
34803          * @param {Roo.bootstrap.LocationPicker} this
34804          * @param {Pixel} cpx
34805          */
34806         OverlayViewShow : true,
34807         /**
34808          * @event OverlayViewHide
34809          * Fires when OverlayView Draw
34810          * @param {Roo.bootstrap.LocationPicker} this
34811          */
34812         OverlayViewHide : true,
34813         /**
34814          * @event loadexception
34815          * Fires when load google lib failed.
34816          * @param {Roo.bootstrap.LocationPicker} this
34817          */
34818         loadexception : true
34819     });
34820         
34821 };
34822
34823 Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
34824     
34825     gMapContext: false,
34826     
34827     latitude: 0,
34828     longitude: 0,
34829     zoom: 15,
34830     mapTypeId: false,
34831     mapTypeControl: false,
34832     disableDoubleClickZoom: false,
34833     scrollwheel: true,
34834     streetViewControl: false,
34835     radius: 0,
34836     locationName: '',
34837     draggable: true,
34838     enableAutocomplete: false,
34839     enableReverseGeocode: true,
34840     markerTitle: '',
34841     
34842     getAutoCreate: function()
34843     {
34844
34845         var cfg = {
34846             tag: 'div',
34847             cls: 'roo-location-picker'
34848         };
34849         
34850         return cfg
34851     },
34852     
34853     initEvents: function(ct, position)
34854     {       
34855         if(!this.el.getWidth() || this.isApplied()){
34856             return;
34857         }
34858         
34859         this.el.setVisibilityMode(Roo.Element.DISPLAY);
34860         
34861         this.initial();
34862     },
34863     
34864     initial: function()
34865     {
34866         if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
34867             this.fireEvent('loadexception', this);
34868             return;
34869         }
34870         
34871         if(!this.mapTypeId){
34872             this.mapTypeId = google.maps.MapTypeId.ROADMAP;
34873         }
34874         
34875         this.gMapContext = this.GMapContext();
34876         
34877         this.initOverlayView();
34878         
34879         this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
34880         
34881         var _this = this;
34882                 
34883         google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
34884             _this.setPosition(_this.gMapContext.marker.position);
34885         });
34886         
34887         google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
34888             _this.fireEvent('mapClick', this, event);
34889             
34890         });
34891
34892         google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
34893             _this.fireEvent('mapRightClick', this, event);
34894             
34895         });
34896         
34897         google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
34898             _this.fireEvent('markerClick', this, event);
34899             
34900         });
34901
34902         google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
34903             _this.fireEvent('markerRightClick', this, event);
34904             
34905         });
34906         
34907         this.setPosition(this.gMapContext.location);
34908         
34909         this.fireEvent('initial', this, this.gMapContext.location);
34910     },
34911     
34912     initOverlayView: function()
34913     {
34914         var _this = this;
34915         
34916         Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
34917             
34918             draw: function()
34919             {
34920                 _this.fireEvent('OverlayViewDraw', _this);
34921             },
34922             
34923             onAdd: function()
34924             {
34925                 _this.fireEvent('OverlayViewOnAdd', _this);
34926             },
34927             
34928             onRemove: function()
34929             {
34930                 _this.fireEvent('OverlayViewOnRemove', _this);
34931             },
34932             
34933             show: function(cpx)
34934             {
34935                 _this.fireEvent('OverlayViewShow', _this, cpx);
34936             },
34937             
34938             hide: function()
34939             {
34940                 _this.fireEvent('OverlayViewHide', _this);
34941             }
34942             
34943         });
34944     },
34945     
34946     fromLatLngToContainerPixel: function(event)
34947     {
34948         return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
34949     },
34950     
34951     isApplied: function() 
34952     {
34953         return this.getGmapContext() == false ? false : true;
34954     },
34955     
34956     getGmapContext: function() 
34957     {
34958         return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
34959     },
34960     
34961     GMapContext: function() 
34962     {
34963         var position = new google.maps.LatLng(this.latitude, this.longitude);
34964         
34965         var _map = new google.maps.Map(this.el.dom, {
34966             center: position,
34967             zoom: this.zoom,
34968             mapTypeId: this.mapTypeId,
34969             mapTypeControl: this.mapTypeControl,
34970             disableDoubleClickZoom: this.disableDoubleClickZoom,
34971             scrollwheel: this.scrollwheel,
34972             streetViewControl: this.streetViewControl,
34973             locationName: this.locationName,
34974             draggable: this.draggable,
34975             enableAutocomplete: this.enableAutocomplete,
34976             enableReverseGeocode: this.enableReverseGeocode
34977         });
34978         
34979         var _marker = new google.maps.Marker({
34980             position: position,
34981             map: _map,
34982             title: this.markerTitle,
34983             draggable: this.draggable
34984         });
34985         
34986         return {
34987             map: _map,
34988             marker: _marker,
34989             circle: null,
34990             location: position,
34991             radius: this.radius,
34992             locationName: this.locationName,
34993             addressComponents: {
34994                 formatted_address: null,
34995                 addressLine1: null,
34996                 addressLine2: null,
34997                 streetName: null,
34998                 streetNumber: null,
34999                 city: null,
35000                 district: null,
35001                 state: null,
35002                 stateOrProvince: null
35003             },
35004             settings: this,
35005             domContainer: this.el.dom,
35006             geodecoder: new google.maps.Geocoder()
35007         };
35008     },
35009     
35010     drawCircle: function(center, radius, options) 
35011     {
35012         if (this.gMapContext.circle != null) {
35013             this.gMapContext.circle.setMap(null);
35014         }
35015         if (radius > 0) {
35016             radius *= 1;
35017             options = Roo.apply({}, options, {
35018                 strokeColor: "#0000FF",
35019                 strokeOpacity: .35,
35020                 strokeWeight: 2,
35021                 fillColor: "#0000FF",
35022                 fillOpacity: .2
35023             });
35024             
35025             options.map = this.gMapContext.map;
35026             options.radius = radius;
35027             options.center = center;
35028             this.gMapContext.circle = new google.maps.Circle(options);
35029             return this.gMapContext.circle;
35030         }
35031         
35032         return null;
35033     },
35034     
35035     setPosition: function(location) 
35036     {
35037         this.gMapContext.location = location;
35038         this.gMapContext.marker.setPosition(location);
35039         this.gMapContext.map.panTo(location);
35040         this.drawCircle(location, this.gMapContext.radius, {});
35041         
35042         var _this = this;
35043         
35044         if (this.gMapContext.settings.enableReverseGeocode) {
35045             this.gMapContext.geodecoder.geocode({
35046                 latLng: this.gMapContext.location
35047             }, function(results, status) {
35048                 
35049                 if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
35050                     _this.gMapContext.locationName = results[0].formatted_address;
35051                     _this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
35052                     
35053                     _this.fireEvent('positionchanged', this, location);
35054                 }
35055             });
35056             
35057             return;
35058         }
35059         
35060         this.fireEvent('positionchanged', this, location);
35061     },
35062     
35063     resize: function()
35064     {
35065         google.maps.event.trigger(this.gMapContext.map, "resize");
35066         
35067         this.gMapContext.map.setCenter(this.gMapContext.marker.position);
35068         
35069         this.fireEvent('resize', this);
35070     },
35071     
35072     setPositionByLatLng: function(latitude, longitude)
35073     {
35074         this.setPosition(new google.maps.LatLng(latitude, longitude));
35075     },
35076     
35077     getCurrentPosition: function() 
35078     {
35079         return {
35080             latitude: this.gMapContext.location.lat(),
35081             longitude: this.gMapContext.location.lng()
35082         };
35083     },
35084     
35085     getAddressName: function() 
35086     {
35087         return this.gMapContext.locationName;
35088     },
35089     
35090     getAddressComponents: function() 
35091     {
35092         return this.gMapContext.addressComponents;
35093     },
35094     
35095     address_component_from_google_geocode: function(address_components) 
35096     {
35097         var result = {};
35098         
35099         for (var i = 0; i < address_components.length; i++) {
35100             var component = address_components[i];
35101             if (component.types.indexOf("postal_code") >= 0) {
35102                 result.postalCode = component.short_name;
35103             } else if (component.types.indexOf("street_number") >= 0) {
35104                 result.streetNumber = component.short_name;
35105             } else if (component.types.indexOf("route") >= 0) {
35106                 result.streetName = component.short_name;
35107             } else if (component.types.indexOf("neighborhood") >= 0) {
35108                 result.city = component.short_name;
35109             } else if (component.types.indexOf("locality") >= 0) {
35110                 result.city = component.short_name;
35111             } else if (component.types.indexOf("sublocality") >= 0) {
35112                 result.district = component.short_name;
35113             } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
35114                 result.stateOrProvince = component.short_name;
35115             } else if (component.types.indexOf("country") >= 0) {
35116                 result.country = component.short_name;
35117             }
35118         }
35119         
35120         result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
35121         result.addressLine2 = "";
35122         return result;
35123     },
35124     
35125     setZoomLevel: function(zoom)
35126     {
35127         this.gMapContext.map.setZoom(zoom);
35128     },
35129     
35130     show: function()
35131     {
35132         if(!this.el){
35133             return;
35134         }
35135         
35136         this.el.show();
35137         
35138         this.resize();
35139         
35140         this.fireEvent('show', this);
35141     },
35142     
35143     hide: function()
35144     {
35145         if(!this.el){
35146             return;
35147         }
35148         
35149         this.el.hide();
35150         
35151         this.fireEvent('hide', this);
35152     }
35153     
35154 });
35155
35156 Roo.apply(Roo.bootstrap.LocationPicker, {
35157     
35158     OverlayView : function(map, options)
35159     {
35160         options = options || {};
35161         
35162         this.setMap(map);
35163     }
35164     
35165     
35166 });/**
35167  * @class Roo.bootstrap.Alert
35168  * @extends Roo.bootstrap.Component
35169  * Bootstrap Alert class - shows an alert area box
35170  * eg
35171  * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
35172   Enter a valid email address
35173 </div>
35174  * @licence LGPL
35175  * @cfg {String} title The title of alert
35176  * @cfg {String} html The content of alert
35177  * @cfg {String} weight (success|info|warning|danger) Weight of the message
35178  * @cfg {String} fa font-awesomeicon
35179  * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
35180  * @cfg {Boolean} close true to show a x closer
35181  * 
35182  * 
35183  * @constructor
35184  * Create a new alert
35185  * @param {Object} config The config object
35186  */
35187
35188
35189 Roo.bootstrap.Alert = function(config){
35190     Roo.bootstrap.Alert.superclass.constructor.call(this, config);
35191     
35192 };
35193
35194 Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
35195     
35196     title: '',
35197     html: '',
35198     weight: false,
35199     fa: false,
35200     faicon: false, // BC
35201     close : false,
35202     
35203     
35204     getAutoCreate : function()
35205     {
35206         
35207         var cfg = {
35208             tag : 'div',
35209             cls : 'alert',
35210             cn : [
35211                 {
35212                     tag: 'button',
35213                     type :  "button",
35214                     cls: "close",
35215                     html : '×',
35216                     style : this.close ? '' : 'display:none'
35217                 },
35218                 {
35219                     tag : 'i',
35220                     cls : 'roo-alert-icon'
35221                     
35222                 },
35223                 {
35224                     tag : 'b',
35225                     cls : 'roo-alert-title',
35226                     html : this.title
35227                 },
35228                 {
35229                     tag : 'span',
35230                     cls : 'roo-alert-text',
35231                     html : this.html
35232                 }
35233             ]
35234         };
35235         
35236         if(this.faicon){
35237             cfg.cn[0].cls += ' fa ' + this.faicon;
35238         }
35239         if(this.fa){
35240             cfg.cn[0].cls += ' fa ' + this.fa;
35241         }
35242         
35243         if(this.weight){
35244             cfg.cls += ' alert-' + this.weight;
35245         }
35246         
35247         return cfg;
35248     },
35249     
35250     initEvents: function() 
35251     {
35252         this.el.setVisibilityMode(Roo.Element.DISPLAY);
35253         this.titleEl =  this.el.select('.roo-alert-title',true).first();
35254         this.iconEl = this.el.select('.roo-alert-icon',true).first();
35255         this.htmlEl = this.el.select('.roo-alert-text',true).first();
35256         if (this.seconds > 0) {
35257             this.hide.defer(this.seconds, this);
35258         }
35259     },
35260     /**
35261      * Set the Title Message HTML
35262      * @param {String} html
35263      */
35264     setTitle : function(str)
35265     {
35266         this.titleEl.dom.innerHTML = str;
35267     },
35268      
35269      /**
35270      * Set the Body Message HTML
35271      * @param {String} html
35272      */
35273     setHtml : function(str)
35274     {
35275         this.htmlEl.dom.innerHTML = str;
35276     },
35277     /**
35278      * Set the Weight of the alert
35279      * @param {String} (success|info|warning|danger) weight
35280      */
35281     
35282     setWeight : function(weight)
35283     {
35284         if(this.weight){
35285             this.el.removeClass('alert-' + this.weight);
35286         }
35287         
35288         this.weight = weight;
35289         
35290         this.el.addClass('alert-' + this.weight);
35291     },
35292       /**
35293      * Set the Icon of the alert
35294      * @param {String} see fontawsome names (name without the 'fa-' bit)
35295      */
35296     setIcon : function(icon)
35297     {
35298         if(this.faicon){
35299             this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
35300         }
35301         
35302         this.faicon = icon;
35303         
35304         this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
35305     },
35306     /**
35307      * Hide the Alert
35308      */
35309     hide: function() 
35310     {
35311         this.el.hide();   
35312     },
35313     /**
35314      * Show the Alert
35315      */
35316     show: function() 
35317     {  
35318         this.el.show();   
35319     }
35320     
35321 });
35322
35323  
35324 /*
35325 * Licence: LGPL
35326 */
35327
35328 /**
35329  * @class Roo.bootstrap.UploadCropbox
35330  * @extends Roo.bootstrap.Component
35331  * Bootstrap UploadCropbox class
35332  * @cfg {String} emptyText show when image has been loaded
35333  * @cfg {String} rotateNotify show when image too small to rotate
35334  * @cfg {Number} errorTimeout default 3000
35335  * @cfg {Number} minWidth default 300
35336  * @cfg {Number} minHeight default 300
35337  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
35338  * @cfg {Boolean} isDocument (true|false) default false
35339  * @cfg {String} url action url
35340  * @cfg {String} paramName default 'imageUpload'
35341  * @cfg {String} method default POST
35342  * @cfg {Boolean} loadMask (true|false) default true
35343  * @cfg {Boolean} loadingText default 'Loading...'
35344  * 
35345  * @constructor
35346  * Create a new UploadCropbox
35347  * @param {Object} config The config object
35348  */
35349
35350 Roo.bootstrap.UploadCropbox = function(config){
35351     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
35352     
35353     this.addEvents({
35354         /**
35355          * @event beforeselectfile
35356          * Fire before select file
35357          * @param {Roo.bootstrap.UploadCropbox} this
35358          */
35359         "beforeselectfile" : true,
35360         /**
35361          * @event initial
35362          * Fire after initEvent
35363          * @param {Roo.bootstrap.UploadCropbox} this
35364          */
35365         "initial" : true,
35366         /**
35367          * @event crop
35368          * Fire after initEvent
35369          * @param {Roo.bootstrap.UploadCropbox} this
35370          * @param {String} data
35371          */
35372         "crop" : true,
35373         /**
35374          * @event prepare
35375          * Fire when preparing the file data
35376          * @param {Roo.bootstrap.UploadCropbox} this
35377          * @param {Object} file
35378          */
35379         "prepare" : true,
35380         /**
35381          * @event exception
35382          * Fire when get exception
35383          * @param {Roo.bootstrap.UploadCropbox} this
35384          * @param {XMLHttpRequest} xhr
35385          */
35386         "exception" : true,
35387         /**
35388          * @event beforeloadcanvas
35389          * Fire before load the canvas
35390          * @param {Roo.bootstrap.UploadCropbox} this
35391          * @param {String} src
35392          */
35393         "beforeloadcanvas" : true,
35394         /**
35395          * @event trash
35396          * Fire when trash image
35397          * @param {Roo.bootstrap.UploadCropbox} this
35398          */
35399         "trash" : true,
35400         /**
35401          * @event download
35402          * Fire when download the image
35403          * @param {Roo.bootstrap.UploadCropbox} this
35404          */
35405         "download" : true,
35406         /**
35407          * @event footerbuttonclick
35408          * Fire when footerbuttonclick
35409          * @param {Roo.bootstrap.UploadCropbox} this
35410          * @param {String} type
35411          */
35412         "footerbuttonclick" : true,
35413         /**
35414          * @event resize
35415          * Fire when resize
35416          * @param {Roo.bootstrap.UploadCropbox} this
35417          */
35418         "resize" : true,
35419         /**
35420          * @event rotate
35421          * Fire when rotate the image
35422          * @param {Roo.bootstrap.UploadCropbox} this
35423          * @param {String} pos
35424          */
35425         "rotate" : true,
35426         /**
35427          * @event inspect
35428          * Fire when inspect the file
35429          * @param {Roo.bootstrap.UploadCropbox} this
35430          * @param {Object} file
35431          */
35432         "inspect" : true,
35433         /**
35434          * @event upload
35435          * Fire when xhr upload the file
35436          * @param {Roo.bootstrap.UploadCropbox} this
35437          * @param {Object} data
35438          */
35439         "upload" : true,
35440         /**
35441          * @event arrange
35442          * Fire when arrange the file data
35443          * @param {Roo.bootstrap.UploadCropbox} this
35444          * @param {Object} formData
35445          */
35446         "arrange" : true
35447     });
35448     
35449     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
35450 };
35451
35452 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
35453     
35454     emptyText : 'Click to upload image',
35455     rotateNotify : 'Image is too small to rotate',
35456     errorTimeout : 3000,
35457     scale : 0,
35458     baseScale : 1,
35459     rotate : 0,
35460     dragable : false,
35461     pinching : false,
35462     mouseX : 0,
35463     mouseY : 0,
35464     cropData : false,
35465     minWidth : 300,
35466     minHeight : 300,
35467     file : false,
35468     exif : {},
35469     baseRotate : 1,
35470     cropType : 'image/jpeg',
35471     buttons : false,
35472     canvasLoaded : false,
35473     isDocument : false,
35474     method : 'POST',
35475     paramName : 'imageUpload',
35476     loadMask : true,
35477     loadingText : 'Loading...',
35478     maskEl : false,
35479     
35480     getAutoCreate : function()
35481     {
35482         var cfg = {
35483             tag : 'div',
35484             cls : 'roo-upload-cropbox',
35485             cn : [
35486                 {
35487                     tag : 'input',
35488                     cls : 'roo-upload-cropbox-selector',
35489                     type : 'file'
35490                 },
35491                 {
35492                     tag : 'div',
35493                     cls : 'roo-upload-cropbox-body',
35494                     style : 'cursor:pointer',
35495                     cn : [
35496                         {
35497                             tag : 'div',
35498                             cls : 'roo-upload-cropbox-preview'
35499                         },
35500                         {
35501                             tag : 'div',
35502                             cls : 'roo-upload-cropbox-thumb'
35503                         },
35504                         {
35505                             tag : 'div',
35506                             cls : 'roo-upload-cropbox-empty-notify',
35507                             html : this.emptyText
35508                         },
35509                         {
35510                             tag : 'div',
35511                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
35512                             html : this.rotateNotify
35513                         }
35514                     ]
35515                 },
35516                 {
35517                     tag : 'div',
35518                     cls : 'roo-upload-cropbox-footer',
35519                     cn : {
35520                         tag : 'div',
35521                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
35522                         cn : []
35523                     }
35524                 }
35525             ]
35526         };
35527         
35528         return cfg;
35529     },
35530     
35531     onRender : function(ct, position)
35532     {
35533         Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
35534         
35535         if (this.buttons.length) {
35536             
35537             Roo.each(this.buttons, function(bb) {
35538                 
35539                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
35540                 
35541                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
35542                 
35543             }, this);
35544         }
35545         
35546         if(this.loadMask){
35547             this.maskEl = this.el;
35548         }
35549     },
35550     
35551     initEvents : function()
35552     {
35553         this.urlAPI = (window.createObjectURL && window) || 
35554                                 (window.URL && URL.revokeObjectURL && URL) || 
35555                                 (window.webkitURL && webkitURL);
35556                         
35557         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
35558         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35559         
35560         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
35561         this.selectorEl.hide();
35562         
35563         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
35564         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35565         
35566         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
35567         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35568         this.thumbEl.hide();
35569         
35570         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
35571         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35572         
35573         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
35574         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35575         this.errorEl.hide();
35576         
35577         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
35578         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
35579         this.footerEl.hide();
35580         
35581         this.setThumbBoxSize();
35582         
35583         this.bind();
35584         
35585         this.resize();
35586         
35587         this.fireEvent('initial', this);
35588     },
35589
35590     bind : function()
35591     {
35592         var _this = this;
35593         
35594         window.addEventListener("resize", function() { _this.resize(); } );
35595         
35596         this.bodyEl.on('click', this.beforeSelectFile, this);
35597         
35598         if(Roo.isTouch){
35599             this.bodyEl.on('touchstart', this.onTouchStart, this);
35600             this.bodyEl.on('touchmove', this.onTouchMove, this);
35601             this.bodyEl.on('touchend', this.onTouchEnd, this);
35602         }
35603         
35604         if(!Roo.isTouch){
35605             this.bodyEl.on('mousedown', this.onMouseDown, this);
35606             this.bodyEl.on('mousemove', this.onMouseMove, this);
35607             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
35608             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
35609             Roo.get(document).on('mouseup', this.onMouseUp, this);
35610         }
35611         
35612         this.selectorEl.on('change', this.onFileSelected, this);
35613     },
35614     
35615     reset : function()
35616     {    
35617         this.scale = 0;
35618         this.baseScale = 1;
35619         this.rotate = 0;
35620         this.baseRotate = 1;
35621         this.dragable = false;
35622         this.pinching = false;
35623         this.mouseX = 0;
35624         this.mouseY = 0;
35625         this.cropData = false;
35626         this.notifyEl.dom.innerHTML = this.emptyText;
35627         
35628         this.selectorEl.dom.value = '';
35629         
35630     },
35631     
35632     resize : function()
35633     {
35634         if(this.fireEvent('resize', this) != false){
35635             this.setThumbBoxPosition();
35636             this.setCanvasPosition();
35637         }
35638     },
35639     
35640     onFooterButtonClick : function(e, el, o, type)
35641     {
35642         switch (type) {
35643             case 'rotate-left' :
35644                 this.onRotateLeft(e);
35645                 break;
35646             case 'rotate-right' :
35647                 this.onRotateRight(e);
35648                 break;
35649             case 'picture' :
35650                 this.beforeSelectFile(e);
35651                 break;
35652             case 'trash' :
35653                 this.trash(e);
35654                 break;
35655             case 'crop' :
35656                 this.crop(e);
35657                 break;
35658             case 'download' :
35659                 this.download(e);
35660                 break;
35661             default :
35662                 break;
35663         }
35664         
35665         this.fireEvent('footerbuttonclick', this, type);
35666     },
35667     
35668     beforeSelectFile : function(e)
35669     {
35670         e.preventDefault();
35671         
35672         if(this.fireEvent('beforeselectfile', this) != false){
35673             this.selectorEl.dom.click();
35674         }
35675     },
35676     
35677     onFileSelected : function(e)
35678     {
35679         e.preventDefault();
35680         
35681         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
35682             return;
35683         }
35684         
35685         var file = this.selectorEl.dom.files[0];
35686         
35687         if(this.fireEvent('inspect', this, file) != false){
35688             this.prepare(file);
35689         }
35690         
35691     },
35692     
35693     trash : function(e)
35694     {
35695         this.fireEvent('trash', this);
35696     },
35697     
35698     download : function(e)
35699     {
35700         this.fireEvent('download', this);
35701     },
35702     
35703     loadCanvas : function(src)
35704     {   
35705         if(this.fireEvent('beforeloadcanvas', this, src) != false){
35706             
35707             this.reset();
35708             
35709             this.imageEl = document.createElement('img');
35710             
35711             var _this = this;
35712             
35713             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
35714             
35715             this.imageEl.src = src;
35716         }
35717     },
35718     
35719     onLoadCanvas : function()
35720     {   
35721         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
35722         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
35723         
35724         this.bodyEl.un('click', this.beforeSelectFile, this);
35725         
35726         this.notifyEl.hide();
35727         this.thumbEl.show();
35728         this.footerEl.show();
35729         
35730         this.baseRotateLevel();
35731         
35732         if(this.isDocument){
35733             this.setThumbBoxSize();
35734         }
35735         
35736         this.setThumbBoxPosition();
35737         
35738         this.baseScaleLevel();
35739         
35740         this.draw();
35741         
35742         this.resize();
35743         
35744         this.canvasLoaded = true;
35745         
35746         if(this.loadMask){
35747             this.maskEl.unmask();
35748         }
35749         
35750     },
35751     
35752     setCanvasPosition : function()
35753     {   
35754         if(!this.canvasEl){
35755             return;
35756         }
35757         
35758         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
35759         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
35760         
35761         this.previewEl.setLeft(pw);
35762         this.previewEl.setTop(ph);
35763         
35764     },
35765     
35766     onMouseDown : function(e)
35767     {   
35768         e.stopEvent();
35769         
35770         this.dragable = true;
35771         this.pinching = false;
35772         
35773         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
35774             this.dragable = false;
35775             return;
35776         }
35777         
35778         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
35779         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
35780         
35781     },
35782     
35783     onMouseMove : function(e)
35784     {   
35785         e.stopEvent();
35786         
35787         if(!this.canvasLoaded){
35788             return;
35789         }
35790         
35791         if (!this.dragable){
35792             return;
35793         }
35794         
35795         var minX = Math.ceil(this.thumbEl.getLeft(true));
35796         var minY = Math.ceil(this.thumbEl.getTop(true));
35797         
35798         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
35799         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
35800         
35801         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
35802         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
35803         
35804         x = x - this.mouseX;
35805         y = y - this.mouseY;
35806         
35807         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
35808         var bgY = Math.ceil(y + this.previewEl.getTop(true));
35809         
35810         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
35811         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
35812         
35813         this.previewEl.setLeft(bgX);
35814         this.previewEl.setTop(bgY);
35815         
35816         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
35817         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
35818     },
35819     
35820     onMouseUp : function(e)
35821     {   
35822         e.stopEvent();
35823         
35824         this.dragable = false;
35825     },
35826     
35827     onMouseWheel : function(e)
35828     {   
35829         e.stopEvent();
35830         
35831         this.startScale = this.scale;
35832         
35833         this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
35834         
35835         if(!this.zoomable()){
35836             this.scale = this.startScale;
35837             return;
35838         }
35839         
35840         this.draw();
35841         
35842         return;
35843     },
35844     
35845     zoomable : function()
35846     {
35847         var minScale = this.thumbEl.getWidth() / this.minWidth;
35848         
35849         if(this.minWidth < this.minHeight){
35850             minScale = this.thumbEl.getHeight() / this.minHeight;
35851         }
35852         
35853         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
35854         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
35855         
35856         if(
35857                 this.isDocument &&
35858                 (this.rotate == 0 || this.rotate == 180) && 
35859                 (
35860                     width > this.imageEl.OriginWidth || 
35861                     height > this.imageEl.OriginHeight ||
35862                     (width < this.minWidth && height < this.minHeight)
35863                 )
35864         ){
35865             return false;
35866         }
35867         
35868         if(
35869                 this.isDocument &&
35870                 (this.rotate == 90 || this.rotate == 270) && 
35871                 (
35872                     width > this.imageEl.OriginWidth || 
35873                     height > this.imageEl.OriginHeight ||
35874                     (width < this.minHeight && height < this.minWidth)
35875                 )
35876         ){
35877             return false;
35878         }
35879         
35880         if(
35881                 !this.isDocument &&
35882                 (this.rotate == 0 || this.rotate == 180) && 
35883                 (
35884                     width < this.minWidth || 
35885                     width > this.imageEl.OriginWidth || 
35886                     height < this.minHeight || 
35887                     height > this.imageEl.OriginHeight
35888                 )
35889         ){
35890             return false;
35891         }
35892         
35893         if(
35894                 !this.isDocument &&
35895                 (this.rotate == 90 || this.rotate == 270) && 
35896                 (
35897                     width < this.minHeight || 
35898                     width > this.imageEl.OriginWidth || 
35899                     height < this.minWidth || 
35900                     height > this.imageEl.OriginHeight
35901                 )
35902         ){
35903             return false;
35904         }
35905         
35906         return true;
35907         
35908     },
35909     
35910     onRotateLeft : function(e)
35911     {   
35912         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
35913             
35914             var minScale = this.thumbEl.getWidth() / this.minWidth;
35915             
35916             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
35917             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
35918             
35919             this.startScale = this.scale;
35920             
35921             while (this.getScaleLevel() < minScale){
35922             
35923                 this.scale = this.scale + 1;
35924                 
35925                 if(!this.zoomable()){
35926                     break;
35927                 }
35928                 
35929                 if(
35930                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
35931                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
35932                 ){
35933                     continue;
35934                 }
35935                 
35936                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
35937
35938                 this.draw();
35939                 
35940                 return;
35941             }
35942             
35943             this.scale = this.startScale;
35944             
35945             this.onRotateFail();
35946             
35947             return false;
35948         }
35949         
35950         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
35951
35952         if(this.isDocument){
35953             this.setThumbBoxSize();
35954             this.setThumbBoxPosition();
35955             this.setCanvasPosition();
35956         }
35957         
35958         this.draw();
35959         
35960         this.fireEvent('rotate', this, 'left');
35961         
35962     },
35963     
35964     onRotateRight : function(e)
35965     {
35966         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
35967             
35968             var minScale = this.thumbEl.getWidth() / this.minWidth;
35969         
35970             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
35971             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
35972             
35973             this.startScale = this.scale;
35974             
35975             while (this.getScaleLevel() < minScale){
35976             
35977                 this.scale = this.scale + 1;
35978                 
35979                 if(!this.zoomable()){
35980                     break;
35981                 }
35982                 
35983                 if(
35984                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
35985                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
35986                 ){
35987                     continue;
35988                 }
35989                 
35990                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
35991
35992                 this.draw();
35993                 
35994                 return;
35995             }
35996             
35997             this.scale = this.startScale;
35998             
35999             this.onRotateFail();
36000             
36001             return false;
36002         }
36003         
36004         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
36005
36006         if(this.isDocument){
36007             this.setThumbBoxSize();
36008             this.setThumbBoxPosition();
36009             this.setCanvasPosition();
36010         }
36011         
36012         this.draw();
36013         
36014         this.fireEvent('rotate', this, 'right');
36015     },
36016     
36017     onRotateFail : function()
36018     {
36019         this.errorEl.show(true);
36020         
36021         var _this = this;
36022         
36023         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
36024     },
36025     
36026     draw : function()
36027     {
36028         this.previewEl.dom.innerHTML = '';
36029         
36030         var canvasEl = document.createElement("canvas");
36031         
36032         var contextEl = canvasEl.getContext("2d");
36033         
36034         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36035         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36036         var center = this.imageEl.OriginWidth / 2;
36037         
36038         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
36039             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36040             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36041             center = this.imageEl.OriginHeight / 2;
36042         }
36043         
36044         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
36045         
36046         contextEl.translate(center, center);
36047         contextEl.rotate(this.rotate * Math.PI / 180);
36048
36049         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
36050         
36051         this.canvasEl = document.createElement("canvas");
36052         
36053         this.contextEl = this.canvasEl.getContext("2d");
36054         
36055         switch (this.rotate) {
36056             case 0 :
36057                 
36058                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36059                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36060                 
36061                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36062                 
36063                 break;
36064             case 90 : 
36065                 
36066                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36067                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36068                 
36069                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36070                     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);
36071                     break;
36072                 }
36073                 
36074                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36075                 
36076                 break;
36077             case 180 :
36078                 
36079                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
36080                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
36081                 
36082                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36083                     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);
36084                     break;
36085                 }
36086                 
36087                 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);
36088                 
36089                 break;
36090             case 270 :
36091                 
36092                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
36093                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
36094         
36095                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36096                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
36097                     break;
36098                 }
36099                 
36100                 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);
36101                 
36102                 break;
36103             default : 
36104                 break;
36105         }
36106         
36107         this.previewEl.appendChild(this.canvasEl);
36108         
36109         this.setCanvasPosition();
36110     },
36111     
36112     crop : function()
36113     {
36114         if(!this.canvasLoaded){
36115             return;
36116         }
36117         
36118         var imageCanvas = document.createElement("canvas");
36119         
36120         var imageContext = imageCanvas.getContext("2d");
36121         
36122         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
36123         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
36124         
36125         var center = imageCanvas.width / 2;
36126         
36127         imageContext.translate(center, center);
36128         
36129         imageContext.rotate(this.rotate * Math.PI / 180);
36130         
36131         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
36132         
36133         var canvas = document.createElement("canvas");
36134         
36135         var context = canvas.getContext("2d");
36136                 
36137         canvas.width = this.minWidth;
36138         canvas.height = this.minHeight;
36139
36140         switch (this.rotate) {
36141             case 0 :
36142                 
36143                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
36144                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
36145                 
36146                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36147                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36148                 
36149                 var targetWidth = this.minWidth - 2 * x;
36150                 var targetHeight = this.minHeight - 2 * y;
36151                 
36152                 var scale = 1;
36153                 
36154                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36155                     scale = targetWidth / width;
36156                 }
36157                 
36158                 if(x > 0 && y == 0){
36159                     scale = targetHeight / height;
36160                 }
36161                 
36162                 if(x > 0 && y > 0){
36163                     scale = targetWidth / width;
36164                     
36165                     if(width < height){
36166                         scale = targetHeight / height;
36167                     }
36168                 }
36169                 
36170                 context.scale(scale, scale);
36171                 
36172                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36173                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36174
36175                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36176                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36177
36178                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36179                 
36180                 break;
36181             case 90 : 
36182                 
36183                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
36184                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
36185                 
36186                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36187                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36188                 
36189                 var targetWidth = this.minWidth - 2 * x;
36190                 var targetHeight = this.minHeight - 2 * y;
36191                 
36192                 var scale = 1;
36193                 
36194                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36195                     scale = targetWidth / width;
36196                 }
36197                 
36198                 if(x > 0 && y == 0){
36199                     scale = targetHeight / height;
36200                 }
36201                 
36202                 if(x > 0 && y > 0){
36203                     scale = targetWidth / width;
36204                     
36205                     if(width < height){
36206                         scale = targetHeight / height;
36207                     }
36208                 }
36209                 
36210                 context.scale(scale, scale);
36211                 
36212                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36213                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36214
36215                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36216                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36217                 
36218                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
36219                 
36220                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36221                 
36222                 break;
36223             case 180 :
36224                 
36225                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
36226                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
36227                 
36228                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36229                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36230                 
36231                 var targetWidth = this.minWidth - 2 * x;
36232                 var targetHeight = this.minHeight - 2 * y;
36233                 
36234                 var scale = 1;
36235                 
36236                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36237                     scale = targetWidth / width;
36238                 }
36239                 
36240                 if(x > 0 && y == 0){
36241                     scale = targetHeight / height;
36242                 }
36243                 
36244                 if(x > 0 && y > 0){
36245                     scale = targetWidth / width;
36246                     
36247                     if(width < height){
36248                         scale = targetHeight / height;
36249                     }
36250                 }
36251                 
36252                 context.scale(scale, scale);
36253                 
36254                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36255                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36256
36257                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36258                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36259
36260                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
36261                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
36262                 
36263                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36264                 
36265                 break;
36266             case 270 :
36267                 
36268                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
36269                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
36270                 
36271                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
36272                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
36273                 
36274                 var targetWidth = this.minWidth - 2 * x;
36275                 var targetHeight = this.minHeight - 2 * y;
36276                 
36277                 var scale = 1;
36278                 
36279                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
36280                     scale = targetWidth / width;
36281                 }
36282                 
36283                 if(x > 0 && y == 0){
36284                     scale = targetHeight / height;
36285                 }
36286                 
36287                 if(x > 0 && y > 0){
36288                     scale = targetWidth / width;
36289                     
36290                     if(width < height){
36291                         scale = targetHeight / height;
36292                     }
36293                 }
36294                 
36295                 context.scale(scale, scale);
36296                 
36297                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
36298                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
36299
36300                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
36301                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
36302                 
36303                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
36304                 
36305                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
36306                 
36307                 break;
36308             default : 
36309                 break;
36310         }
36311         
36312         this.cropData = canvas.toDataURL(this.cropType);
36313         
36314         if(this.fireEvent('crop', this, this.cropData) !== false){
36315             this.process(this.file, this.cropData);
36316         }
36317         
36318         return;
36319         
36320     },
36321     
36322     setThumbBoxSize : function()
36323     {
36324         var width, height;
36325         
36326         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
36327             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
36328             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
36329             
36330             this.minWidth = width;
36331             this.minHeight = height;
36332             
36333             if(this.rotate == 90 || this.rotate == 270){
36334                 this.minWidth = height;
36335                 this.minHeight = width;
36336             }
36337         }
36338         
36339         height = 300;
36340         width = Math.ceil(this.minWidth * height / this.minHeight);
36341         
36342         if(this.minWidth > this.minHeight){
36343             width = 300;
36344             height = Math.ceil(this.minHeight * width / this.minWidth);
36345         }
36346         
36347         this.thumbEl.setStyle({
36348             width : width + 'px',
36349             height : height + 'px'
36350         });
36351
36352         return;
36353             
36354     },
36355     
36356     setThumbBoxPosition : function()
36357     {
36358         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
36359         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
36360         
36361         this.thumbEl.setLeft(x);
36362         this.thumbEl.setTop(y);
36363         
36364     },
36365     
36366     baseRotateLevel : function()
36367     {
36368         this.baseRotate = 1;
36369         
36370         if(
36371                 typeof(this.exif) != 'undefined' &&
36372                 typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
36373                 [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
36374         ){
36375             this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
36376         }
36377         
36378         this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
36379         
36380     },
36381     
36382     baseScaleLevel : function()
36383     {
36384         var width, height;
36385         
36386         if(this.isDocument){
36387             
36388             if(this.baseRotate == 6 || this.baseRotate == 8){
36389             
36390                 height = this.thumbEl.getHeight();
36391                 this.baseScale = height / this.imageEl.OriginWidth;
36392
36393                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
36394                     width = this.thumbEl.getWidth();
36395                     this.baseScale = width / this.imageEl.OriginHeight;
36396                 }
36397
36398                 return;
36399             }
36400
36401             height = this.thumbEl.getHeight();
36402             this.baseScale = height / this.imageEl.OriginHeight;
36403
36404             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
36405                 width = this.thumbEl.getWidth();
36406                 this.baseScale = width / this.imageEl.OriginWidth;
36407             }
36408
36409             return;
36410         }
36411         
36412         if(this.baseRotate == 6 || this.baseRotate == 8){
36413             
36414             width = this.thumbEl.getHeight();
36415             this.baseScale = width / this.imageEl.OriginHeight;
36416             
36417             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
36418                 height = this.thumbEl.getWidth();
36419                 this.baseScale = height / this.imageEl.OriginHeight;
36420             }
36421             
36422             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36423                 height = this.thumbEl.getWidth();
36424                 this.baseScale = height / this.imageEl.OriginHeight;
36425                 
36426                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
36427                     width = this.thumbEl.getHeight();
36428                     this.baseScale = width / this.imageEl.OriginWidth;
36429                 }
36430             }
36431             
36432             return;
36433         }
36434         
36435         width = this.thumbEl.getWidth();
36436         this.baseScale = width / this.imageEl.OriginWidth;
36437         
36438         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
36439             height = this.thumbEl.getHeight();
36440             this.baseScale = height / this.imageEl.OriginHeight;
36441         }
36442         
36443         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
36444             
36445             height = this.thumbEl.getHeight();
36446             this.baseScale = height / this.imageEl.OriginHeight;
36447             
36448             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
36449                 width = this.thumbEl.getWidth();
36450                 this.baseScale = width / this.imageEl.OriginWidth;
36451             }
36452             
36453         }
36454         
36455         return;
36456     },
36457     
36458     getScaleLevel : function()
36459     {
36460         return this.baseScale * Math.pow(1.1, this.scale);
36461     },
36462     
36463     onTouchStart : function(e)
36464     {
36465         if(!this.canvasLoaded){
36466             this.beforeSelectFile(e);
36467             return;
36468         }
36469         
36470         var touches = e.browserEvent.touches;
36471         
36472         if(!touches){
36473             return;
36474         }
36475         
36476         if(touches.length == 1){
36477             this.onMouseDown(e);
36478             return;
36479         }
36480         
36481         if(touches.length != 2){
36482             return;
36483         }
36484         
36485         var coords = [];
36486         
36487         for(var i = 0, finger; finger = touches[i]; i++){
36488             coords.push(finger.pageX, finger.pageY);
36489         }
36490         
36491         var x = Math.pow(coords[0] - coords[2], 2);
36492         var y = Math.pow(coords[1] - coords[3], 2);
36493         
36494         this.startDistance = Math.sqrt(x + y);
36495         
36496         this.startScale = this.scale;
36497         
36498         this.pinching = true;
36499         this.dragable = false;
36500         
36501     },
36502     
36503     onTouchMove : function(e)
36504     {
36505         if(!this.pinching && !this.dragable){
36506             return;
36507         }
36508         
36509         var touches = e.browserEvent.touches;
36510         
36511         if(!touches){
36512             return;
36513         }
36514         
36515         if(this.dragable){
36516             this.onMouseMove(e);
36517             return;
36518         }
36519         
36520         var coords = [];
36521         
36522         for(var i = 0, finger; finger = touches[i]; i++){
36523             coords.push(finger.pageX, finger.pageY);
36524         }
36525         
36526         var x = Math.pow(coords[0] - coords[2], 2);
36527         var y = Math.pow(coords[1] - coords[3], 2);
36528         
36529         this.endDistance = Math.sqrt(x + y);
36530         
36531         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
36532         
36533         if(!this.zoomable()){
36534             this.scale = this.startScale;
36535             return;
36536         }
36537         
36538         this.draw();
36539         
36540     },
36541     
36542     onTouchEnd : function(e)
36543     {
36544         this.pinching = false;
36545         this.dragable = false;
36546         
36547     },
36548     
36549     process : function(file, crop)
36550     {
36551         if(this.loadMask){
36552             this.maskEl.mask(this.loadingText);
36553         }
36554         
36555         this.xhr = new XMLHttpRequest();
36556         
36557         file.xhr = this.xhr;
36558
36559         this.xhr.open(this.method, this.url, true);
36560         
36561         var headers = {
36562             "Accept": "application/json",
36563             "Cache-Control": "no-cache",
36564             "X-Requested-With": "XMLHttpRequest"
36565         };
36566         
36567         for (var headerName in headers) {
36568             var headerValue = headers[headerName];
36569             if (headerValue) {
36570                 this.xhr.setRequestHeader(headerName, headerValue);
36571             }
36572         }
36573         
36574         var _this = this;
36575         
36576         this.xhr.onload = function()
36577         {
36578             _this.xhrOnLoad(_this.xhr);
36579         }
36580         
36581         this.xhr.onerror = function()
36582         {
36583             _this.xhrOnError(_this.xhr);
36584         }
36585         
36586         var formData = new FormData();
36587
36588         formData.append('returnHTML', 'NO');
36589         
36590         if(crop){
36591             formData.append('crop', crop);
36592         }
36593         
36594         if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
36595             formData.append(this.paramName, file, file.name);
36596         }
36597         
36598         if(typeof(file.filename) != 'undefined'){
36599             formData.append('filename', file.filename);
36600         }
36601         
36602         if(typeof(file.mimetype) != 'undefined'){
36603             formData.append('mimetype', file.mimetype);
36604         }
36605         
36606         if(this.fireEvent('arrange', this, formData) != false){
36607             this.xhr.send(formData);
36608         };
36609     },
36610     
36611     xhrOnLoad : function(xhr)
36612     {
36613         if(this.loadMask){
36614             this.maskEl.unmask();
36615         }
36616         
36617         if (xhr.readyState !== 4) {
36618             this.fireEvent('exception', this, xhr);
36619             return;
36620         }
36621
36622         var response = Roo.decode(xhr.responseText);
36623         
36624         if(!response.success){
36625             this.fireEvent('exception', this, xhr);
36626             return;
36627         }
36628         
36629         var response = Roo.decode(xhr.responseText);
36630         
36631         this.fireEvent('upload', this, response);
36632         
36633     },
36634     
36635     xhrOnError : function()
36636     {
36637         if(this.loadMask){
36638             this.maskEl.unmask();
36639         }
36640         
36641         Roo.log('xhr on error');
36642         
36643         var response = Roo.decode(xhr.responseText);
36644           
36645         Roo.log(response);
36646         
36647     },
36648     
36649     prepare : function(file)
36650     {   
36651         if(this.loadMask){
36652             this.maskEl.mask(this.loadingText);
36653         }
36654         
36655         this.file = false;
36656         this.exif = {};
36657         
36658         if(typeof(file) === 'string'){
36659             this.loadCanvas(file);
36660             return;
36661         }
36662         
36663         if(!file || !this.urlAPI){
36664             return;
36665         }
36666         
36667         this.file = file;
36668         this.cropType = file.type;
36669         
36670         var _this = this;
36671         
36672         if(this.fireEvent('prepare', this, this.file) != false){
36673             
36674             var reader = new FileReader();
36675             
36676             reader.onload = function (e) {
36677                 if (e.target.error) {
36678                     Roo.log(e.target.error);
36679                     return;
36680                 }
36681                 
36682                 var buffer = e.target.result,
36683                     dataView = new DataView(buffer),
36684                     offset = 2,
36685                     maxOffset = dataView.byteLength - 4,
36686                     markerBytes,
36687                     markerLength;
36688                 
36689                 if (dataView.getUint16(0) === 0xffd8) {
36690                     while (offset < maxOffset) {
36691                         markerBytes = dataView.getUint16(offset);
36692                         
36693                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
36694                             markerLength = dataView.getUint16(offset + 2) + 2;
36695                             if (offset + markerLength > dataView.byteLength) {
36696                                 Roo.log('Invalid meta data: Invalid segment size.');
36697                                 break;
36698                             }
36699                             
36700                             if(markerBytes == 0xffe1){
36701                                 _this.parseExifData(
36702                                     dataView,
36703                                     offset,
36704                                     markerLength
36705                                 );
36706                             }
36707                             
36708                             offset += markerLength;
36709                             
36710                             continue;
36711                         }
36712                         
36713                         break;
36714                     }
36715                     
36716                 }
36717                 
36718                 var url = _this.urlAPI.createObjectURL(_this.file);
36719                 
36720                 _this.loadCanvas(url);
36721                 
36722                 return;
36723             }
36724             
36725             reader.readAsArrayBuffer(this.file);
36726             
36727         }
36728         
36729     },
36730     
36731     parseExifData : function(dataView, offset, length)
36732     {
36733         var tiffOffset = offset + 10,
36734             littleEndian,
36735             dirOffset;
36736     
36737         if (dataView.getUint32(offset + 4) !== 0x45786966) {
36738             // No Exif data, might be XMP data instead
36739             return;
36740         }
36741         
36742         // Check for the ASCII code for "Exif" (0x45786966):
36743         if (dataView.getUint32(offset + 4) !== 0x45786966) {
36744             // No Exif data, might be XMP data instead
36745             return;
36746         }
36747         if (tiffOffset + 8 > dataView.byteLength) {
36748             Roo.log('Invalid Exif data: Invalid segment size.');
36749             return;
36750         }
36751         // Check for the two null bytes:
36752         if (dataView.getUint16(offset + 8) !== 0x0000) {
36753             Roo.log('Invalid Exif data: Missing byte alignment offset.');
36754             return;
36755         }
36756         // Check the byte alignment:
36757         switch (dataView.getUint16(tiffOffset)) {
36758         case 0x4949:
36759             littleEndian = true;
36760             break;
36761         case 0x4D4D:
36762             littleEndian = false;
36763             break;
36764         default:
36765             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
36766             return;
36767         }
36768         // Check for the TIFF tag marker (0x002A):
36769         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
36770             Roo.log('Invalid Exif data: Missing TIFF marker.');
36771             return;
36772         }
36773         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
36774         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
36775         
36776         this.parseExifTags(
36777             dataView,
36778             tiffOffset,
36779             tiffOffset + dirOffset,
36780             littleEndian
36781         );
36782     },
36783     
36784     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
36785     {
36786         var tagsNumber,
36787             dirEndOffset,
36788             i;
36789         if (dirOffset + 6 > dataView.byteLength) {
36790             Roo.log('Invalid Exif data: Invalid directory offset.');
36791             return;
36792         }
36793         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
36794         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
36795         if (dirEndOffset + 4 > dataView.byteLength) {
36796             Roo.log('Invalid Exif data: Invalid directory size.');
36797             return;
36798         }
36799         for (i = 0; i < tagsNumber; i += 1) {
36800             this.parseExifTag(
36801                 dataView,
36802                 tiffOffset,
36803                 dirOffset + 2 + 12 * i, // tag offset
36804                 littleEndian
36805             );
36806         }
36807         // Return the offset to the next directory:
36808         return dataView.getUint32(dirEndOffset, littleEndian);
36809     },
36810     
36811     parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
36812     {
36813         var tag = dataView.getUint16(offset, littleEndian);
36814         
36815         this.exif[tag] = this.getExifValue(
36816             dataView,
36817             tiffOffset,
36818             offset,
36819             dataView.getUint16(offset + 2, littleEndian), // tag type
36820             dataView.getUint32(offset + 4, littleEndian), // tag length
36821             littleEndian
36822         );
36823     },
36824     
36825     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
36826     {
36827         var tagType = Roo.bootstrap.UploadCropbox.exifTagTypes[type],
36828             tagSize,
36829             dataOffset,
36830             values,
36831             i,
36832             str,
36833             c;
36834     
36835         if (!tagType) {
36836             Roo.log('Invalid Exif data: Invalid tag type.');
36837             return;
36838         }
36839         
36840         tagSize = tagType.size * length;
36841         // Determine if the value is contained in the dataOffset bytes,
36842         // or if the value at the dataOffset is a pointer to the actual data:
36843         dataOffset = tagSize > 4 ?
36844                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
36845         if (dataOffset + tagSize > dataView.byteLength) {
36846             Roo.log('Invalid Exif data: Invalid data offset.');
36847             return;
36848         }
36849         if (length === 1) {
36850             return tagType.getValue(dataView, dataOffset, littleEndian);
36851         }
36852         values = [];
36853         for (i = 0; i < length; i += 1) {
36854             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
36855         }
36856         
36857         if (tagType.ascii) {
36858             str = '';
36859             // Concatenate the chars:
36860             for (i = 0; i < values.length; i += 1) {
36861                 c = values[i];
36862                 // Ignore the terminating NULL byte(s):
36863                 if (c === '\u0000') {
36864                     break;
36865                 }
36866                 str += c;
36867             }
36868             return str;
36869         }
36870         return values;
36871     }
36872     
36873 });
36874
36875 Roo.apply(Roo.bootstrap.UploadCropbox, {
36876     tags : {
36877         'Orientation': 0x0112
36878     },
36879     
36880     Orientation: {
36881             1: 0, //'top-left',
36882 //            2: 'top-right',
36883             3: 180, //'bottom-right',
36884 //            4: 'bottom-left',
36885 //            5: 'left-top',
36886             6: 90, //'right-top',
36887 //            7: 'right-bottom',
36888             8: 270 //'left-bottom'
36889     },
36890     
36891     exifTagTypes : {
36892         // byte, 8-bit unsigned int:
36893         1: {
36894             getValue: function (dataView, dataOffset) {
36895                 return dataView.getUint8(dataOffset);
36896             },
36897             size: 1
36898         },
36899         // ascii, 8-bit byte:
36900         2: {
36901             getValue: function (dataView, dataOffset) {
36902                 return String.fromCharCode(dataView.getUint8(dataOffset));
36903             },
36904             size: 1,
36905             ascii: true
36906         },
36907         // short, 16 bit int:
36908         3: {
36909             getValue: function (dataView, dataOffset, littleEndian) {
36910                 return dataView.getUint16(dataOffset, littleEndian);
36911             },
36912             size: 2
36913         },
36914         // long, 32 bit int:
36915         4: {
36916             getValue: function (dataView, dataOffset, littleEndian) {
36917                 return dataView.getUint32(dataOffset, littleEndian);
36918             },
36919             size: 4
36920         },
36921         // rational = two long values, first is numerator, second is denominator:
36922         5: {
36923             getValue: function (dataView, dataOffset, littleEndian) {
36924                 return dataView.getUint32(dataOffset, littleEndian) /
36925                     dataView.getUint32(dataOffset + 4, littleEndian);
36926             },
36927             size: 8
36928         },
36929         // slong, 32 bit signed int:
36930         9: {
36931             getValue: function (dataView, dataOffset, littleEndian) {
36932                 return dataView.getInt32(dataOffset, littleEndian);
36933             },
36934             size: 4
36935         },
36936         // srational, two slongs, first is numerator, second is denominator:
36937         10: {
36938             getValue: function (dataView, dataOffset, littleEndian) {
36939                 return dataView.getInt32(dataOffset, littleEndian) /
36940                     dataView.getInt32(dataOffset + 4, littleEndian);
36941             },
36942             size: 8
36943         }
36944     },
36945     
36946     footer : {
36947         STANDARD : [
36948             {
36949                 tag : 'div',
36950                 cls : 'btn-group roo-upload-cropbox-rotate-left',
36951                 action : 'rotate-left',
36952                 cn : [
36953                     {
36954                         tag : 'button',
36955                         cls : 'btn btn-default',
36956                         html : '<i class="fa fa-undo"></i>'
36957                     }
36958                 ]
36959             },
36960             {
36961                 tag : 'div',
36962                 cls : 'btn-group roo-upload-cropbox-picture',
36963                 action : 'picture',
36964                 cn : [
36965                     {
36966                         tag : 'button',
36967                         cls : 'btn btn-default',
36968                         html : '<i class="fa fa-picture-o"></i>'
36969                     }
36970                 ]
36971             },
36972             {
36973                 tag : 'div',
36974                 cls : 'btn-group roo-upload-cropbox-rotate-right',
36975                 action : 'rotate-right',
36976                 cn : [
36977                     {
36978                         tag : 'button',
36979                         cls : 'btn btn-default',
36980                         html : '<i class="fa fa-repeat"></i>'
36981                     }
36982                 ]
36983             }
36984         ],
36985         DOCUMENT : [
36986             {
36987                 tag : 'div',
36988                 cls : 'btn-group roo-upload-cropbox-rotate-left',
36989                 action : 'rotate-left',
36990                 cn : [
36991                     {
36992                         tag : 'button',
36993                         cls : 'btn btn-default',
36994                         html : '<i class="fa fa-undo"></i>'
36995                     }
36996                 ]
36997             },
36998             {
36999                 tag : 'div',
37000                 cls : 'btn-group roo-upload-cropbox-download',
37001                 action : 'download',
37002                 cn : [
37003                     {
37004                         tag : 'button',
37005                         cls : 'btn btn-default',
37006                         html : '<i class="fa fa-download"></i>'
37007                     }
37008                 ]
37009             },
37010             {
37011                 tag : 'div',
37012                 cls : 'btn-group roo-upload-cropbox-crop',
37013                 action : 'crop',
37014                 cn : [
37015                     {
37016                         tag : 'button',
37017                         cls : 'btn btn-default',
37018                         html : '<i class="fa fa-crop"></i>'
37019                     }
37020                 ]
37021             },
37022             {
37023                 tag : 'div',
37024                 cls : 'btn-group roo-upload-cropbox-trash',
37025                 action : 'trash',
37026                 cn : [
37027                     {
37028                         tag : 'button',
37029                         cls : 'btn btn-default',
37030                         html : '<i class="fa fa-trash"></i>'
37031                     }
37032                 ]
37033             },
37034             {
37035                 tag : 'div',
37036                 cls : 'btn-group roo-upload-cropbox-rotate-right',
37037                 action : 'rotate-right',
37038                 cn : [
37039                     {
37040                         tag : 'button',
37041                         cls : 'btn btn-default',
37042                         html : '<i class="fa fa-repeat"></i>'
37043                     }
37044                 ]
37045             }
37046         ],
37047         ROTATOR : [
37048             {
37049                 tag : 'div',
37050                 cls : 'btn-group roo-upload-cropbox-rotate-left',
37051                 action : 'rotate-left',
37052                 cn : [
37053                     {
37054                         tag : 'button',
37055                         cls : 'btn btn-default',
37056                         html : '<i class="fa fa-undo"></i>'
37057                     }
37058                 ]
37059             },
37060             {
37061                 tag : 'div',
37062                 cls : 'btn-group roo-upload-cropbox-rotate-right',
37063                 action : 'rotate-right',
37064                 cn : [
37065                     {
37066                         tag : 'button',
37067                         cls : 'btn btn-default',
37068                         html : '<i class="fa fa-repeat"></i>'
37069                     }
37070                 ]
37071             }
37072         ]
37073     }
37074 });
37075
37076 /*
37077 * Licence: LGPL
37078 */
37079
37080 /**
37081  * @class Roo.bootstrap.DocumentManager
37082  * @extends Roo.bootstrap.Component
37083  * Bootstrap DocumentManager class
37084  * @cfg {String} paramName default 'imageUpload'
37085  * @cfg {String} toolTipName default 'filename'
37086  * @cfg {String} method default POST
37087  * @cfg {String} url action url
37088  * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
37089  * @cfg {Boolean} multiple multiple upload default true
37090  * @cfg {Number} thumbSize default 300
37091  * @cfg {String} fieldLabel
37092  * @cfg {Number} labelWidth default 4
37093  * @cfg {String} labelAlign (left|top) default left
37094  * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
37095 * @cfg {Number} labellg set the width of label (1-12)
37096  * @cfg {Number} labelmd set the width of label (1-12)
37097  * @cfg {Number} labelsm set the width of label (1-12)
37098  * @cfg {Number} labelxs set the width of label (1-12)
37099  * 
37100  * @constructor
37101  * Create a new DocumentManager
37102  * @param {Object} config The config object
37103  */
37104
37105 Roo.bootstrap.DocumentManager = function(config){
37106     Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
37107     
37108     this.files = [];
37109     this.delegates = [];
37110     
37111     this.addEvents({
37112         /**
37113          * @event initial
37114          * Fire when initial the DocumentManager
37115          * @param {Roo.bootstrap.DocumentManager} this
37116          */
37117         "initial" : true,
37118         /**
37119          * @event inspect
37120          * inspect selected file
37121          * @param {Roo.bootstrap.DocumentManager} this
37122          * @param {File} file
37123          */
37124         "inspect" : true,
37125         /**
37126          * @event exception
37127          * Fire when xhr load exception
37128          * @param {Roo.bootstrap.DocumentManager} this
37129          * @param {XMLHttpRequest} xhr
37130          */
37131         "exception" : true,
37132         /**
37133          * @event afterupload
37134          * Fire when xhr load exception
37135          * @param {Roo.bootstrap.DocumentManager} this
37136          * @param {XMLHttpRequest} xhr
37137          */
37138         "afterupload" : true,
37139         /**
37140          * @event prepare
37141          * prepare the form data
37142          * @param {Roo.bootstrap.DocumentManager} this
37143          * @param {Object} formData
37144          */
37145         "prepare" : true,
37146         /**
37147          * @event remove
37148          * Fire when remove the file
37149          * @param {Roo.bootstrap.DocumentManager} this
37150          * @param {Object} file
37151          */
37152         "remove" : true,
37153         /**
37154          * @event refresh
37155          * Fire after refresh the file
37156          * @param {Roo.bootstrap.DocumentManager} this
37157          */
37158         "refresh" : true,
37159         /**
37160          * @event click
37161          * Fire after click the image
37162          * @param {Roo.bootstrap.DocumentManager} this
37163          * @param {Object} file
37164          */
37165         "click" : true,
37166         /**
37167          * @event edit
37168          * Fire when upload a image and editable set to true
37169          * @param {Roo.bootstrap.DocumentManager} this
37170          * @param {Object} file
37171          */
37172         "edit" : true,
37173         /**
37174          * @event beforeselectfile
37175          * Fire before select file
37176          * @param {Roo.bootstrap.DocumentManager} this
37177          */
37178         "beforeselectfile" : true,
37179         /**
37180          * @event process
37181          * Fire before process file
37182          * @param {Roo.bootstrap.DocumentManager} this
37183          * @param {Object} file
37184          */
37185         "process" : true,
37186         /**
37187          * @event previewrendered
37188          * Fire when preview rendered
37189          * @param {Roo.bootstrap.DocumentManager} this
37190          * @param {Object} file
37191          */
37192         "previewrendered" : true,
37193         /**
37194          */
37195         "previewResize" : true
37196         
37197     });
37198 };
37199
37200 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
37201     
37202     boxes : 0,
37203     inputName : '',
37204     thumbSize : 300,
37205     multiple : true,
37206     files : false,
37207     method : 'POST',
37208     url : '',
37209     paramName : 'imageUpload',
37210     toolTipName : 'filename',
37211     fieldLabel : '',
37212     labelWidth : 4,
37213     labelAlign : 'left',
37214     editable : true,
37215     delegates : false,
37216     xhr : false, 
37217     
37218     labellg : 0,
37219     labelmd : 0,
37220     labelsm : 0,
37221     labelxs : 0,
37222     
37223     getAutoCreate : function()
37224     {   
37225         var managerWidget = {
37226             tag : 'div',
37227             cls : 'roo-document-manager',
37228             cn : [
37229                 {
37230                     tag : 'input',
37231                     cls : 'roo-document-manager-selector',
37232                     type : 'file'
37233                 },
37234                 {
37235                     tag : 'div',
37236                     cls : 'roo-document-manager-uploader',
37237                     cn : [
37238                         {
37239                             tag : 'div',
37240                             cls : 'roo-document-manager-upload-btn',
37241                             html : '<i class="fa fa-plus"></i>'
37242                         }
37243                     ]
37244                     
37245                 }
37246             ]
37247         };
37248         
37249         var content = [
37250             {
37251                 tag : 'div',
37252                 cls : 'column col-md-12',
37253                 cn : managerWidget
37254             }
37255         ];
37256         
37257         if(this.fieldLabel.length){
37258             
37259             content = [
37260                 {
37261                     tag : 'div',
37262                     cls : 'column col-md-12',
37263                     html : this.fieldLabel
37264                 },
37265                 {
37266                     tag : 'div',
37267                     cls : 'column col-md-12',
37268                     cn : managerWidget
37269                 }
37270             ];
37271
37272             if(this.labelAlign == 'left'){
37273                 content = [
37274                     {
37275                         tag : 'div',
37276                         cls : 'column',
37277                         html : this.fieldLabel
37278                     },
37279                     {
37280                         tag : 'div',
37281                         cls : 'column',
37282                         cn : managerWidget
37283                     }
37284                 ];
37285                 
37286                 if(this.labelWidth > 12){
37287                     content[0].style = "width: " + this.labelWidth + 'px';
37288                 }
37289
37290                 if(this.labelWidth < 13 && this.labelmd == 0){
37291                     this.labelmd = this.labelWidth;
37292                 }
37293
37294                 if(this.labellg > 0){
37295                     content[0].cls += ' col-lg-' + this.labellg;
37296                     content[1].cls += ' col-lg-' + (12 - this.labellg);
37297                 }
37298
37299                 if(this.labelmd > 0){
37300                     content[0].cls += ' col-md-' + this.labelmd;
37301                     content[1].cls += ' col-md-' + (12 - this.labelmd);
37302                 }
37303
37304                 if(this.labelsm > 0){
37305                     content[0].cls += ' col-sm-' + this.labelsm;
37306                     content[1].cls += ' col-sm-' + (12 - this.labelsm);
37307                 }
37308
37309                 if(this.labelxs > 0){
37310                     content[0].cls += ' col-xs-' + this.labelxs;
37311                     content[1].cls += ' col-xs-' + (12 - this.labelxs);
37312                 }
37313                 
37314             }
37315         }
37316         
37317         var cfg = {
37318             tag : 'div',
37319             cls : 'row clearfix',
37320             cn : content
37321         };
37322         
37323         return cfg;
37324         
37325     },
37326     
37327     initEvents : function()
37328     {
37329         this.managerEl = this.el.select('.roo-document-manager', true).first();
37330         this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37331         
37332         this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
37333         this.selectorEl.hide();
37334         
37335         if(this.multiple){
37336             this.selectorEl.attr('multiple', 'multiple');
37337         }
37338         
37339         this.selectorEl.on('change', this.onFileSelected, this);
37340         
37341         this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
37342         this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37343         
37344         this.uploader.on('click', this.onUploaderClick, this);
37345         
37346         this.renderProgressDialog();
37347         
37348         var _this = this;
37349         
37350         window.addEventListener("resize", function() { _this.refresh(); } );
37351         
37352         this.fireEvent('initial', this);
37353     },
37354     
37355     renderProgressDialog : function()
37356     {
37357         var _this = this;
37358         
37359         this.progressDialog = new Roo.bootstrap.Modal({
37360             cls : 'roo-document-manager-progress-dialog',
37361             allow_close : false,
37362             animate : false,
37363             title : '',
37364             buttons : [
37365                 {
37366                     name  :'cancel',
37367                     weight : 'danger',
37368                     html : 'Cancel'
37369                 }
37370             ], 
37371             listeners : { 
37372                 btnclick : function() {
37373                     _this.uploadCancel();
37374                     this.hide();
37375                 }
37376             }
37377         });
37378          
37379         this.progressDialog.render(Roo.get(document.body));
37380          
37381         this.progress = new Roo.bootstrap.Progress({
37382             cls : 'roo-document-manager-progress',
37383             active : true,
37384             striped : true
37385         });
37386         
37387         this.progress.render(this.progressDialog.getChildContainer());
37388         
37389         this.progressBar = new Roo.bootstrap.ProgressBar({
37390             cls : 'roo-document-manager-progress-bar',
37391             aria_valuenow : 0,
37392             aria_valuemin : 0,
37393             aria_valuemax : 12,
37394             panel : 'success'
37395         });
37396         
37397         this.progressBar.render(this.progress.getChildContainer());
37398     },
37399     
37400     onUploaderClick : function(e)
37401     {
37402         e.preventDefault();
37403      
37404         if(this.fireEvent('beforeselectfile', this) != false){
37405             this.selectorEl.dom.click();
37406         }
37407         
37408     },
37409     
37410     onFileSelected : function(e)
37411     {
37412         e.preventDefault();
37413         
37414         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
37415             return;
37416         }
37417         
37418         Roo.each(this.selectorEl.dom.files, function(file){
37419             if(this.fireEvent('inspect', this, file) != false){
37420                 this.files.push(file);
37421             }
37422         }, this);
37423         
37424         this.queue();
37425         
37426     },
37427     
37428     queue : function()
37429     {
37430         this.selectorEl.dom.value = '';
37431         
37432         if(!this.files || !this.files.length){
37433             return;
37434         }
37435         
37436         if(this.boxes > 0 && this.files.length > this.boxes){
37437             this.files = this.files.slice(0, this.boxes);
37438         }
37439         
37440         this.uploader.show();
37441         
37442         if(this.boxes > 0 && this.files.length > this.boxes - 1){
37443             this.uploader.hide();
37444         }
37445         
37446         var _this = this;
37447         
37448         var files = [];
37449         
37450         var docs = [];
37451         
37452         Roo.each(this.files, function(file){
37453             
37454             if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
37455                 var f = this.renderPreview(file);
37456                 files.push(f);
37457                 return;
37458             }
37459             
37460             if(file.type.indexOf('image') != -1){
37461                 this.delegates.push(
37462                     (function(){
37463                         _this.process(file);
37464                     }).createDelegate(this)
37465                 );
37466         
37467                 return;
37468             }
37469             
37470             docs.push(
37471                 (function(){
37472                     _this.process(file);
37473                 }).createDelegate(this)
37474             );
37475             
37476         }, this);
37477         
37478         this.files = files;
37479         
37480         this.delegates = this.delegates.concat(docs);
37481         
37482         if(!this.delegates.length){
37483             this.refresh();
37484             return;
37485         }
37486         
37487         this.progressBar.aria_valuemax = this.delegates.length;
37488         
37489         this.arrange();
37490         
37491         return;
37492     },
37493     
37494     arrange : function()
37495     {
37496         if(!this.delegates.length){
37497             this.progressDialog.hide();
37498             this.refresh();
37499             return;
37500         }
37501         
37502         var delegate = this.delegates.shift();
37503         
37504         this.progressDialog.show();
37505         
37506         this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
37507         
37508         this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
37509         
37510         delegate();
37511     },
37512     
37513     refresh : function()
37514     {
37515         this.uploader.show();
37516         
37517         if(this.boxes > 0 && this.files.length > this.boxes - 1){
37518             this.uploader.hide();
37519         }
37520         
37521         Roo.isTouch ? this.closable(false) : this.closable(true);
37522         
37523         this.fireEvent('refresh', this);
37524     },
37525     
37526     onRemove : function(e, el, o)
37527     {
37528         e.preventDefault();
37529         
37530         this.fireEvent('remove', this, o);
37531         
37532     },
37533     
37534     remove : function(o)
37535     {
37536         var files = [];
37537         
37538         Roo.each(this.files, function(file){
37539             if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
37540                 files.push(file);
37541                 return;
37542             }
37543
37544             o.target.remove();
37545
37546         }, this);
37547         
37548         this.files = files;
37549         
37550         this.refresh();
37551     },
37552     
37553     clear : function()
37554     {
37555         Roo.each(this.files, function(file){
37556             if(!file.target){
37557                 return;
37558             }
37559             
37560             file.target.remove();
37561
37562         }, this);
37563         
37564         this.files = [];
37565         
37566         this.refresh();
37567     },
37568     
37569     onClick : function(e, el, o)
37570     {
37571         e.preventDefault();
37572         
37573         this.fireEvent('click', this, o);
37574         
37575     },
37576     
37577     closable : function(closable)
37578     {
37579         Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
37580             
37581             el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
37582             
37583             if(closable){
37584                 el.show();
37585                 return;
37586             }
37587             
37588             el.hide();
37589             
37590         }, this);
37591     },
37592     
37593     xhrOnLoad : function(xhr)
37594     {
37595         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
37596             el.remove();
37597         }, this);
37598         
37599         if (xhr.readyState !== 4) {
37600             this.arrange();
37601             this.fireEvent('exception', this, xhr);
37602             return;
37603         }
37604
37605         var response = Roo.decode(xhr.responseText);
37606         
37607         if(!response.success){
37608             this.arrange();
37609             this.fireEvent('exception', this, xhr);
37610             return;
37611         }
37612         
37613         var file = this.renderPreview(response.data);
37614         
37615         this.files.push(file);
37616         
37617         this.arrange();
37618         
37619         this.fireEvent('afterupload', this, xhr);
37620         
37621     },
37622     
37623     xhrOnError : function(xhr)
37624     {
37625         Roo.log('xhr on error');
37626         
37627         var response = Roo.decode(xhr.responseText);
37628           
37629         Roo.log(response);
37630         
37631         this.arrange();
37632     },
37633     
37634     process : function(file)
37635     {
37636         if(this.fireEvent('process', this, file) !== false){
37637             if(this.editable && file.type.indexOf('image') != -1){
37638                 this.fireEvent('edit', this, file);
37639                 return;
37640             }
37641
37642             this.uploadStart(file, false);
37643
37644             return;
37645         }
37646         
37647     },
37648     
37649     uploadStart : function(file, crop)
37650     {
37651         this.xhr = new XMLHttpRequest();
37652         
37653         if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
37654             this.arrange();
37655             return;
37656         }
37657         
37658         file.xhr = this.xhr;
37659             
37660         this.managerEl.createChild({
37661             tag : 'div',
37662             cls : 'roo-document-manager-loading',
37663             cn : [
37664                 {
37665                     tag : 'div',
37666                     tooltip : file.name,
37667                     cls : 'roo-document-manager-thumb',
37668                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
37669                 }
37670             ]
37671
37672         });
37673
37674         this.xhr.open(this.method, this.url, true);
37675         
37676         var headers = {
37677             "Accept": "application/json",
37678             "Cache-Control": "no-cache",
37679             "X-Requested-With": "XMLHttpRequest"
37680         };
37681         
37682         for (var headerName in headers) {
37683             var headerValue = headers[headerName];
37684             if (headerValue) {
37685                 this.xhr.setRequestHeader(headerName, headerValue);
37686             }
37687         }
37688         
37689         var _this = this;
37690         
37691         this.xhr.onload = function()
37692         {
37693             _this.xhrOnLoad(_this.xhr);
37694         }
37695         
37696         this.xhr.onerror = function()
37697         {
37698             _this.xhrOnError(_this.xhr);
37699         }
37700         
37701         var formData = new FormData();
37702
37703         formData.append('returnHTML', 'NO');
37704         
37705         if(crop){
37706             formData.append('crop', crop);
37707         }
37708         
37709         formData.append(this.paramName, file, file.name);
37710         
37711         var options = {
37712             file : file, 
37713             manually : false
37714         };
37715         
37716         if(this.fireEvent('prepare', this, formData, options) != false){
37717             
37718             if(options.manually){
37719                 return;
37720             }
37721             
37722             this.xhr.send(formData);
37723             return;
37724         };
37725         
37726         this.uploadCancel();
37727     },
37728     
37729     uploadCancel : function()
37730     {
37731         if (this.xhr) {
37732             this.xhr.abort();
37733         }
37734         
37735         this.delegates = [];
37736         
37737         Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
37738             el.remove();
37739         }, this);
37740         
37741         this.arrange();
37742     },
37743     
37744     renderPreview : function(file)
37745     {
37746         if(typeof(file.target) != 'undefined' && file.target){
37747             return file;
37748         }
37749         
37750         var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
37751         
37752         var previewEl = this.managerEl.createChild({
37753             tag : 'div',
37754             cls : 'roo-document-manager-preview',
37755             cn : [
37756                 {
37757                     tag : 'div',
37758                     tooltip : file[this.toolTipName],
37759                     cls : 'roo-document-manager-thumb',
37760                     html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
37761                 },
37762                 {
37763                     tag : 'button',
37764                     cls : 'close',
37765                     html : '<i class="fa fa-times-circle"></i>'
37766                 }
37767             ]
37768         });
37769
37770         var close = previewEl.select('button.close', true).first();
37771
37772         close.on('click', this.onRemove, this, file);
37773
37774         file.target = previewEl;
37775
37776         var image = previewEl.select('img', true).first();
37777         
37778         var _this = this;
37779         
37780         image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
37781         
37782         image.on('click', this.onClick, this, file);
37783         
37784         this.fireEvent('previewrendered', this, file);
37785         
37786         return file;
37787         
37788     },
37789     
37790     onPreviewLoad : function(file, image)
37791     {
37792         if(typeof(file.target) == 'undefined' || !file.target){
37793             return;
37794         }
37795         
37796         var width = image.dom.naturalWidth || image.dom.width;
37797         var height = image.dom.naturalHeight || image.dom.height;
37798         
37799         if(!this.previewResize) {
37800             return;
37801         }
37802         
37803         if(width > height){
37804             file.target.addClass('wide');
37805             return;
37806         }
37807         
37808         file.target.addClass('tall');
37809         return;
37810         
37811     },
37812     
37813     uploadFromSource : function(file, crop)
37814     {
37815         this.xhr = new XMLHttpRequest();
37816         
37817         this.managerEl.createChild({
37818             tag : 'div',
37819             cls : 'roo-document-manager-loading',
37820             cn : [
37821                 {
37822                     tag : 'div',
37823                     tooltip : file.name,
37824                     cls : 'roo-document-manager-thumb',
37825                     html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
37826                 }
37827             ]
37828
37829         });
37830
37831         this.xhr.open(this.method, this.url, true);
37832         
37833         var headers = {
37834             "Accept": "application/json",
37835             "Cache-Control": "no-cache",
37836             "X-Requested-With": "XMLHttpRequest"
37837         };
37838         
37839         for (var headerName in headers) {
37840             var headerValue = headers[headerName];
37841             if (headerValue) {
37842                 this.xhr.setRequestHeader(headerName, headerValue);
37843             }
37844         }
37845         
37846         var _this = this;
37847         
37848         this.xhr.onload = function()
37849         {
37850             _this.xhrOnLoad(_this.xhr);
37851         }
37852         
37853         this.xhr.onerror = function()
37854         {
37855             _this.xhrOnError(_this.xhr);
37856         }
37857         
37858         var formData = new FormData();
37859
37860         formData.append('returnHTML', 'NO');
37861         
37862         formData.append('crop', crop);
37863         
37864         if(typeof(file.filename) != 'undefined'){
37865             formData.append('filename', file.filename);
37866         }
37867         
37868         if(typeof(file.mimetype) != 'undefined'){
37869             formData.append('mimetype', file.mimetype);
37870         }
37871         
37872         Roo.log(formData);
37873         
37874         if(this.fireEvent('prepare', this, formData) != false){
37875             this.xhr.send(formData);
37876         };
37877     }
37878 });
37879
37880 /*
37881 * Licence: LGPL
37882 */
37883
37884 /**
37885  * @class Roo.bootstrap.DocumentViewer
37886  * @extends Roo.bootstrap.Component
37887  * Bootstrap DocumentViewer class
37888  * @cfg {Boolean} showDownload (true|false) show download button (default true)
37889  * @cfg {Boolean} showTrash (true|false) show trash button (default true)
37890  * 
37891  * @constructor
37892  * Create a new DocumentViewer
37893  * @param {Object} config The config object
37894  */
37895
37896 Roo.bootstrap.DocumentViewer = function(config){
37897     Roo.bootstrap.DocumentViewer.superclass.constructor.call(this, config);
37898     
37899     this.addEvents({
37900         /**
37901          * @event initial
37902          * Fire after initEvent
37903          * @param {Roo.bootstrap.DocumentViewer} this
37904          */
37905         "initial" : true,
37906         /**
37907          * @event click
37908          * Fire after click
37909          * @param {Roo.bootstrap.DocumentViewer} this
37910          */
37911         "click" : true,
37912         /**
37913          * @event download
37914          * Fire after download button
37915          * @param {Roo.bootstrap.DocumentViewer} this
37916          */
37917         "download" : true,
37918         /**
37919          * @event trash
37920          * Fire after trash button
37921          * @param {Roo.bootstrap.DocumentViewer} this
37922          */
37923         "trash" : true
37924         
37925     });
37926 };
37927
37928 Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component,  {
37929     
37930     showDownload : true,
37931     
37932     showTrash : true,
37933     
37934     getAutoCreate : function()
37935     {
37936         var cfg = {
37937             tag : 'div',
37938             cls : 'roo-document-viewer',
37939             cn : [
37940                 {
37941                     tag : 'div',
37942                     cls : 'roo-document-viewer-body',
37943                     cn : [
37944                         {
37945                             tag : 'div',
37946                             cls : 'roo-document-viewer-thumb',
37947                             cn : [
37948                                 {
37949                                     tag : 'img',
37950                                     cls : 'roo-document-viewer-image'
37951                                 }
37952                             ]
37953                         }
37954                     ]
37955                 },
37956                 {
37957                     tag : 'div',
37958                     cls : 'roo-document-viewer-footer',
37959                     cn : {
37960                         tag : 'div',
37961                         cls : 'btn-group btn-group-justified roo-document-viewer-btn-group',
37962                         cn : [
37963                             {
37964                                 tag : 'div',
37965                                 cls : 'btn-group roo-document-viewer-download',
37966                                 cn : [
37967                                     {
37968                                         tag : 'button',
37969                                         cls : 'btn btn-default',
37970                                         html : '<i class="fa fa-download"></i>'
37971                                     }
37972                                 ]
37973                             },
37974                             {
37975                                 tag : 'div',
37976                                 cls : 'btn-group roo-document-viewer-trash',
37977                                 cn : [
37978                                     {
37979                                         tag : 'button',
37980                                         cls : 'btn btn-default',
37981                                         html : '<i class="fa fa-trash"></i>'
37982                                     }
37983                                 ]
37984                             }
37985                         ]
37986                     }
37987                 }
37988             ]
37989         };
37990         
37991         return cfg;
37992     },
37993     
37994     initEvents : function()
37995     {
37996         this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
37997         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
37998         
37999         this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
38000         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
38001         
38002         this.imageEl = this.el.select('.roo-document-viewer-image', true).first();
38003         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
38004         
38005         this.footerEl = this.el.select('.roo-document-viewer-footer', true).first();
38006         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
38007         
38008         this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
38009         this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
38010         
38011         this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
38012         this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
38013         
38014         this.bodyEl.on('click', this.onClick, this);
38015         this.downloadBtn.on('click', this.onDownload, this);
38016         this.trashBtn.on('click', this.onTrash, this);
38017         
38018         this.downloadBtn.hide();
38019         this.trashBtn.hide();
38020         
38021         if(this.showDownload){
38022             this.downloadBtn.show();
38023         }
38024         
38025         if(this.showTrash){
38026             this.trashBtn.show();
38027         }
38028         
38029         if(!this.showDownload && !this.showTrash) {
38030             this.footerEl.hide();
38031         }
38032         
38033     },
38034     
38035     initial : function()
38036     {
38037         this.fireEvent('initial', this);
38038         
38039     },
38040     
38041     onClick : function(e)
38042     {
38043         e.preventDefault();
38044         
38045         this.fireEvent('click', this);
38046     },
38047     
38048     onDownload : function(e)
38049     {
38050         e.preventDefault();
38051         
38052         this.fireEvent('download', this);
38053     },
38054     
38055     onTrash : function(e)
38056     {
38057         e.preventDefault();
38058         
38059         this.fireEvent('trash', this);
38060     }
38061     
38062 });
38063 /*
38064  * - LGPL
38065  *
38066  * FieldLabel
38067  * 
38068  */
38069
38070 /**
38071  * @class Roo.bootstrap.form.FieldLabel
38072  * @extends Roo.bootstrap.Component
38073  * Bootstrap FieldLabel class
38074  * @cfg {String} html contents of the element
38075  * @cfg {String} tag tag of the element default label
38076  * @cfg {String} cls class of the element
38077  * @cfg {String} target label target 
38078  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
38079  * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
38080  * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
38081  * @cfg {String} iconTooltip default "This field is required"
38082  * @cfg {String} indicatorpos (left|right) default left
38083  * 
38084  * @constructor
38085  * Create a new FieldLabel
38086  * @param {Object} config The config object
38087  */
38088
38089 Roo.bootstrap.form.FieldLabel = function(config){
38090     Roo.bootstrap.Element.superclass.constructor.call(this, config);
38091     
38092     this.addEvents({
38093             /**
38094              * @event invalid
38095              * Fires after the field has been marked as invalid.
38096              * @param {Roo.form.FieldLabel} this
38097              * @param {String} msg The validation message
38098              */
38099             invalid : true,
38100             /**
38101              * @event valid
38102              * Fires after the field has been validated with no errors.
38103              * @param {Roo.form.FieldLabel} this
38104              */
38105             valid : true
38106         });
38107 };
38108
38109 Roo.extend(Roo.bootstrap.form.FieldLabel, Roo.bootstrap.Component,  {
38110     
38111     tag: 'label',
38112     cls: '',
38113     html: '',
38114     target: '',
38115     allowBlank : true,
38116     invalidClass : 'has-warning',
38117     validClass : 'has-success',
38118     iconTooltip : 'This field is required',
38119     indicatorpos : 'left',
38120     
38121     getAutoCreate : function(){
38122         
38123         var cls = "";
38124         if (!this.allowBlank) {
38125             cls  = "visible";
38126         }
38127         
38128         var cfg = {
38129             tag : this.tag,
38130             cls : 'roo-bootstrap-field-label ' + this.cls,
38131             for : this.target,
38132             cn : [
38133                 {
38134                     tag : 'i',
38135                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
38136                     tooltip : this.iconTooltip
38137                 },
38138                 {
38139                     tag : 'span',
38140                     html : this.html
38141                 }
38142             ] 
38143         };
38144         
38145         if(this.indicatorpos == 'right'){
38146             var cfg = {
38147                 tag : this.tag,
38148                 cls : 'roo-bootstrap-field-label ' + this.cls,
38149                 for : this.target,
38150                 cn : [
38151                     {
38152                         tag : 'span',
38153                         html : this.html
38154                     },
38155                     {
38156                         tag : 'i',
38157                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
38158                         tooltip : this.iconTooltip
38159                     }
38160                 ] 
38161             };
38162         }
38163         
38164         return cfg;
38165     },
38166     
38167     initEvents: function() 
38168     {
38169         Roo.bootstrap.Element.superclass.initEvents.call(this);
38170         
38171         this.indicator = this.indicatorEl();
38172         
38173         if(this.indicator){
38174             this.indicator.removeClass('visible');
38175             this.indicator.addClass('invisible');
38176         }
38177         
38178         Roo.bootstrap.form.FieldLabel.register(this);
38179     },
38180     
38181     indicatorEl : function()
38182     {
38183         var indicator = this.el.select('i.roo-required-indicator',true).first();
38184         
38185         if(!indicator){
38186             return false;
38187         }
38188         
38189         return indicator;
38190         
38191     },
38192     
38193     /**
38194      * Mark this field as valid
38195      */
38196     markValid : function()
38197     {
38198         if(this.indicator){
38199             this.indicator.removeClass('visible');
38200             this.indicator.addClass('invisible');
38201         }
38202         if (Roo.bootstrap.version == 3) {
38203             this.el.removeClass(this.invalidClass);
38204             this.el.addClass(this.validClass);
38205         } else {
38206             this.el.removeClass('is-invalid');
38207             this.el.addClass('is-valid');
38208         }
38209         
38210         
38211         this.fireEvent('valid', this);
38212     },
38213     
38214     /**
38215      * Mark this field as invalid
38216      * @param {String} msg The validation message
38217      */
38218     markInvalid : function(msg)
38219     {
38220         if(this.indicator){
38221             this.indicator.removeClass('invisible');
38222             this.indicator.addClass('visible');
38223         }
38224           if (Roo.bootstrap.version == 3) {
38225             this.el.removeClass(this.validClass);
38226             this.el.addClass(this.invalidClass);
38227         } else {
38228             this.el.removeClass('is-valid');
38229             this.el.addClass('is-invalid');
38230         }
38231         
38232         
38233         this.fireEvent('invalid', this, msg);
38234     }
38235     
38236    
38237 });
38238
38239 Roo.apply(Roo.bootstrap.form.FieldLabel, {
38240     
38241     groups: {},
38242     
38243      /**
38244     * register a FieldLabel Group
38245     * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add
38246     */
38247     register : function(label)
38248     {
38249         if(this.groups.hasOwnProperty(label.target)){
38250             return;
38251         }
38252      
38253         this.groups[label.target] = label;
38254         
38255     },
38256     /**
38257     * fetch a FieldLabel Group based on the target
38258     * @param {string} target
38259     * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group
38260     */
38261     get: function(target) {
38262         if (typeof(this.groups[target]) == 'undefined') {
38263             return false;
38264         }
38265         
38266         return this.groups[target] ;
38267     }
38268 });
38269
38270  
38271
38272  /*
38273  * - LGPL
38274  *
38275  * page DateSplitField.
38276  * 
38277  */
38278
38279
38280 /**
38281  * @class Roo.bootstrap.form.DateSplitField
38282  * @extends Roo.bootstrap.Component
38283  * Bootstrap DateSplitField class
38284  * @cfg {string} fieldLabel - the label associated
38285  * @cfg {Number} labelWidth set the width of label (0-12)
38286  * @cfg {String} labelAlign (top|left)
38287  * @cfg {Boolean} dayAllowBlank (true|false) default false
38288  * @cfg {Boolean} monthAllowBlank (true|false) default false
38289  * @cfg {Boolean} yearAllowBlank (true|false) default false
38290  * @cfg {string} dayPlaceholder 
38291  * @cfg {string} monthPlaceholder
38292  * @cfg {string} yearPlaceholder
38293  * @cfg {string} dayFormat default 'd'
38294  * @cfg {string} monthFormat default 'm'
38295  * @cfg {string} yearFormat default 'Y'
38296  * @cfg {Number} labellg set the width of label (1-12)
38297  * @cfg {Number} labelmd set the width of label (1-12)
38298  * @cfg {Number} labelsm set the width of label (1-12)
38299  * @cfg {Number} labelxs set the width of label (1-12)
38300
38301  *     
38302  * @constructor
38303  * Create a new DateSplitField
38304  * @param {Object} config The config object
38305  */
38306
38307 Roo.bootstrap.form.DateSplitField = function(config){
38308     Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config);
38309     
38310     this.addEvents({
38311         // raw events
38312          /**
38313          * @event years
38314          * getting the data of years
38315          * @param {Roo.bootstrap.form.DateSplitField} this
38316          * @param {Object} years
38317          */
38318         "years" : true,
38319         /**
38320          * @event days
38321          * getting the data of days
38322          * @param {Roo.bootstrap.form.DateSplitField} this
38323          * @param {Object} days
38324          */
38325         "days" : true,
38326         /**
38327          * @event invalid
38328          * Fires after the field has been marked as invalid.
38329          * @param {Roo.form.Field} this
38330          * @param {String} msg The validation message
38331          */
38332         invalid : true,
38333        /**
38334          * @event valid
38335          * Fires after the field has been validated with no errors.
38336          * @param {Roo.form.Field} this
38337          */
38338         valid : true
38339     });
38340 };
38341
38342 Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component,  {
38343     
38344     fieldLabel : '',
38345     labelAlign : 'top',
38346     labelWidth : 3,
38347     dayAllowBlank : false,
38348     monthAllowBlank : false,
38349     yearAllowBlank : false,
38350     dayPlaceholder : '',
38351     monthPlaceholder : '',
38352     yearPlaceholder : '',
38353     dayFormat : 'd',
38354     monthFormat : 'm',
38355     yearFormat : 'Y',
38356     isFormField : true,
38357     labellg : 0,
38358     labelmd : 0,
38359     labelsm : 0,
38360     labelxs : 0,
38361     
38362     getAutoCreate : function()
38363     {
38364         var cfg = {
38365             tag : 'div',
38366             cls : 'row roo-date-split-field-group',
38367             cn : [
38368                 {
38369                     tag : 'input',
38370                     type : 'hidden',
38371                     cls : 'form-hidden-field roo-date-split-field-group-value',
38372                     name : this.name
38373                 }
38374             ]
38375         };
38376         
38377         var labelCls = 'col-md-12';
38378         var contentCls = 'col-md-4';
38379         
38380         if(this.fieldLabel){
38381             
38382             var label = {
38383                 tag : 'div',
38384                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
38385                 cn : [
38386                     {
38387                         tag : 'label',
38388                         html : this.fieldLabel
38389                     }
38390                 ]
38391             };
38392             
38393             if(this.labelAlign == 'left'){
38394             
38395                 if(this.labelWidth > 12){
38396                     label.style = "width: " + this.labelWidth + 'px';
38397                 }
38398
38399                 if(this.labelWidth < 13 && this.labelmd == 0){
38400                     this.labelmd = this.labelWidth;
38401                 }
38402
38403                 if(this.labellg > 0){
38404                     labelCls = ' col-lg-' + this.labellg;
38405                     contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
38406                 }
38407
38408                 if(this.labelmd > 0){
38409                     labelCls = ' col-md-' + this.labelmd;
38410                     contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
38411                 }
38412
38413                 if(this.labelsm > 0){
38414                     labelCls = ' col-sm-' + this.labelsm;
38415                     contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
38416                 }
38417
38418                 if(this.labelxs > 0){
38419                     labelCls = ' col-xs-' + this.labelxs;
38420                     contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
38421                 }
38422             }
38423             
38424             label.cls += ' ' + labelCls;
38425             
38426             cfg.cn.push(label);
38427         }
38428         
38429         Roo.each(['day', 'month', 'year'], function(t){
38430             cfg.cn.push({
38431                 tag : 'div',
38432                 cls : 'column roo-date-split-field-' + t + ' ' + contentCls
38433             });
38434         }, this);
38435         
38436         return cfg;
38437     },
38438     
38439     inputEl: function ()
38440     {
38441         return this.el.select('.roo-date-split-field-group-value', true).first();
38442     },
38443     
38444     onRender : function(ct, position) 
38445     {
38446         var _this = this;
38447         
38448         Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
38449         
38450         this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
38451         
38452         this.dayField = new Roo.bootstrap.form.ComboBox({
38453             allowBlank : this.dayAllowBlank,
38454             alwaysQuery : true,
38455             displayField : 'value',
38456             editable : false,
38457             fieldLabel : '',
38458             forceSelection : true,
38459             mode : 'local',
38460             placeholder : this.dayPlaceholder,
38461             selectOnFocus : true,
38462             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
38463             triggerAction : 'all',
38464             typeAhead : true,
38465             valueField : 'value',
38466             store : new Roo.data.SimpleStore({
38467                 data : (function() {    
38468                     var days = [];
38469                     _this.fireEvent('days', _this, days);
38470                     return days;
38471                 })(),
38472                 fields : [ 'value' ]
38473             }),
38474             listeners : {
38475                 select : function (_self, record, index)
38476                 {
38477                     _this.setValue(_this.getValue());
38478                 }
38479             }
38480         });
38481
38482         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
38483         
38484         this.monthField = new Roo.bootstrap.form.MonthField({
38485             after : '<i class=\"fa fa-calendar\"></i>',
38486             allowBlank : this.monthAllowBlank,
38487             placeholder : this.monthPlaceholder,
38488             readOnly : true,
38489             listeners : {
38490                 render : function (_self)
38491                 {
38492                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
38493                         e.preventDefault();
38494                         _self.focus();
38495                     });
38496                 },
38497                 select : function (_self, oldvalue, newvalue)
38498                 {
38499                     _this.setValue(_this.getValue());
38500                 }
38501             }
38502         });
38503         
38504         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
38505         
38506         this.yearField = new Roo.bootstrap.form.ComboBox({
38507             allowBlank : this.yearAllowBlank,
38508             alwaysQuery : true,
38509             displayField : 'value',
38510             editable : false,
38511             fieldLabel : '',
38512             forceSelection : true,
38513             mode : 'local',
38514             placeholder : this.yearPlaceholder,
38515             selectOnFocus : true,
38516             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
38517             triggerAction : 'all',
38518             typeAhead : true,
38519             valueField : 'value',
38520             store : new Roo.data.SimpleStore({
38521                 data : (function() {
38522                     var years = [];
38523                     _this.fireEvent('years', _this, years);
38524                     return years;
38525                 })(),
38526                 fields : [ 'value' ]
38527             }),
38528             listeners : {
38529                 select : function (_self, record, index)
38530                 {
38531                     _this.setValue(_this.getValue());
38532                 }
38533             }
38534         });
38535
38536         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
38537     },
38538     
38539     setValue : function(v, format)
38540     {
38541         this.inputEl.dom.value = v;
38542         
38543         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
38544         
38545         var d = Date.parseDate(v, f);
38546         
38547         if(!d){
38548             this.validate();
38549             return;
38550         }
38551         
38552         this.setDay(d.format(this.dayFormat));
38553         this.setMonth(d.format(this.monthFormat));
38554         this.setYear(d.format(this.yearFormat));
38555         
38556         this.validate();
38557         
38558         return;
38559     },
38560     
38561     setDay : function(v)
38562     {
38563         this.dayField.setValue(v);
38564         this.inputEl.dom.value = this.getValue();
38565         this.validate();
38566         return;
38567     },
38568     
38569     setMonth : function(v)
38570     {
38571         this.monthField.setValue(v, true);
38572         this.inputEl.dom.value = this.getValue();
38573         this.validate();
38574         return;
38575     },
38576     
38577     setYear : function(v)
38578     {
38579         this.yearField.setValue(v);
38580         this.inputEl.dom.value = this.getValue();
38581         this.validate();
38582         return;
38583     },
38584     
38585     getDay : function()
38586     {
38587         return this.dayField.getValue();
38588     },
38589     
38590     getMonth : function()
38591     {
38592         return this.monthField.getValue();
38593     },
38594     
38595     getYear : function()
38596     {
38597         return this.yearField.getValue();
38598     },
38599     
38600     getValue : function()
38601     {
38602         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
38603         
38604         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
38605         
38606         return date;
38607     },
38608     
38609     reset : function()
38610     {
38611         this.setDay('');
38612         this.setMonth('');
38613         this.setYear('');
38614         this.inputEl.dom.value = '';
38615         this.validate();
38616         return;
38617     },
38618     
38619     validate : function()
38620     {
38621         var d = this.dayField.validate();
38622         var m = this.monthField.validate();
38623         var y = this.yearField.validate();
38624         
38625         var valid = true;
38626         
38627         if(
38628                 (!this.dayAllowBlank && !d) ||
38629                 (!this.monthAllowBlank && !m) ||
38630                 (!this.yearAllowBlank && !y)
38631         ){
38632             valid = false;
38633         }
38634         
38635         if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
38636             return valid;
38637         }
38638         
38639         if(valid){
38640             this.markValid();
38641             return valid;
38642         }
38643         
38644         this.markInvalid();
38645         
38646         return valid;
38647     },
38648     
38649     markValid : function()
38650     {
38651         
38652         var label = this.el.select('label', true).first();
38653         var icon = this.el.select('i.fa-star', true).first();
38654
38655         if(label && icon){
38656             icon.remove();
38657         }
38658         
38659         this.fireEvent('valid', this);
38660     },
38661     
38662      /**
38663      * Mark this field as invalid
38664      * @param {String} msg The validation message
38665      */
38666     markInvalid : function(msg)
38667     {
38668         
38669         var label = this.el.select('label', true).first();
38670         var icon = this.el.select('i.fa-star', true).first();
38671
38672         if(label && !icon){
38673             this.el.select('.roo-date-split-field-label', true).createChild({
38674                 tag : 'i',
38675                 cls : 'text-danger fa fa-lg fa-star',
38676                 tooltip : 'This field is required',
38677                 style : 'margin-right:5px;'
38678             }, label, true);
38679         }
38680         
38681         this.fireEvent('invalid', this, msg);
38682     },
38683     
38684     clearInvalid : function()
38685     {
38686         var label = this.el.select('label', true).first();
38687         var icon = this.el.select('i.fa-star', true).first();
38688
38689         if(label && icon){
38690             icon.remove();
38691         }
38692         
38693         this.fireEvent('valid', this);
38694     },
38695     
38696     getName: function()
38697     {
38698         return this.name;
38699     }
38700     
38701 });
38702
38703  
38704
38705 /**
38706  * @class Roo.bootstrap.LayoutMasonry
38707  * @extends Roo.bootstrap.Component
38708  * @children Roo.bootstrap.Element Roo.bootstrap.Img Roo.bootstrap.MasonryBrick
38709  * Bootstrap Layout Masonry class
38710  *
38711  * This is based on 
38712  * http://masonry.desandro.com
38713  *
38714  * The idea is to render all the bricks based on vertical width...
38715  *
38716  * The original code extends 'outlayer' - we might need to use that....
38717
38718  * @constructor
38719  * Create a new Element
38720  * @param {Object} config The config object
38721  */
38722
38723 Roo.bootstrap.LayoutMasonry = function(config){
38724     
38725     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
38726     
38727     this.bricks = [];
38728     
38729     Roo.bootstrap.LayoutMasonry.register(this);
38730     
38731     this.addEvents({
38732         // raw events
38733         /**
38734          * @event layout
38735          * Fire after layout the items
38736          * @param {Roo.bootstrap.LayoutMasonry} this
38737          * @param {Roo.EventObject} e
38738          */
38739         "layout" : true
38740     });
38741     
38742 };
38743
38744 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
38745     
38746     /**
38747      * @cfg {Boolean} isLayoutInstant = no animation?
38748      */   
38749     isLayoutInstant : false, // needed?
38750    
38751     /**
38752      * @cfg {Number} boxWidth  width of the columns
38753      */   
38754     boxWidth : 450,
38755     
38756       /**
38757      * @cfg {Number} boxHeight  - 0 for square, or fix it at a certian height
38758      */   
38759     boxHeight : 0,
38760     
38761     /**
38762      * @cfg {Number} padWidth padding below box..
38763      */   
38764     padWidth : 10, 
38765     
38766     /**
38767      * @cfg {Number} gutter gutter width..
38768      */   
38769     gutter : 10,
38770     
38771      /**
38772      * @cfg {Number} maxCols maximum number of columns
38773      */   
38774     
38775     maxCols: 0,
38776     
38777     /**
38778      * @cfg {Boolean} isAutoInitial defalut true
38779      */   
38780     isAutoInitial : true, 
38781     
38782     containerWidth: 0,
38783     
38784     /**
38785      * @cfg {Boolean} isHorizontal defalut false
38786      */   
38787     isHorizontal : false, 
38788
38789     currentSize : null,
38790     
38791     tag: 'div',
38792     
38793     cls: '',
38794     
38795     bricks: null, //CompositeElement
38796     
38797     cols : 1,
38798     
38799     _isLayoutInited : false,
38800     
38801 //    isAlternative : false, // only use for vertical layout...
38802     
38803     /**
38804      * @cfg {Number} alternativePadWidth padding below box..
38805      */   
38806     alternativePadWidth : 50,
38807     
38808     selectedBrick : [],
38809     
38810     getAutoCreate : function(){
38811         
38812         var cfg = Roo.apply({}, Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call(this));
38813         
38814         var cfg = {
38815             tag: this.tag,
38816             cls: 'blog-masonary-wrapper ' + this.cls,
38817             cn : {
38818                 cls : 'mas-boxes masonary'
38819             }
38820         };
38821         
38822         return cfg;
38823     },
38824     
38825     getChildContainer: function( )
38826     {
38827         if (this.boxesEl) {
38828             return this.boxesEl;
38829         }
38830         
38831         this.boxesEl = this.el.select('.mas-boxes').first();
38832         
38833         return this.boxesEl;
38834     },
38835     
38836     
38837     initEvents : function()
38838     {
38839         var _this = this;
38840         
38841         if(this.isAutoInitial){
38842             Roo.log('hook children rendered');
38843             this.on('childrenrendered', function() {
38844                 Roo.log('children rendered');
38845                 _this.initial();
38846             } ,this);
38847         }
38848     },
38849     
38850     initial : function()
38851     {
38852         this.selectedBrick = [];
38853         
38854         this.currentSize = this.el.getBox(true);
38855         
38856         Roo.EventManager.onWindowResize(this.resize, this); 
38857
38858         if(!this.isAutoInitial){
38859             this.layout();
38860             return;
38861         }
38862         
38863         this.layout();
38864         
38865         return;
38866         //this.layout.defer(500,this);
38867         
38868     },
38869     
38870     resize : function()
38871     {
38872         var cs = this.el.getBox(true);
38873         
38874         if (
38875                 this.currentSize.width == cs.width && 
38876                 this.currentSize.x == cs.x && 
38877                 this.currentSize.height == cs.height && 
38878                 this.currentSize.y == cs.y 
38879         ) {
38880             Roo.log("no change in with or X or Y");
38881             return;
38882         }
38883         
38884         this.currentSize = cs;
38885         
38886         this.layout();
38887         
38888     },
38889     
38890     layout : function()
38891     {   
38892         this._resetLayout();
38893         
38894         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
38895         
38896         this.layoutItems( isInstant );
38897       
38898         this._isLayoutInited = true;
38899         
38900         this.fireEvent('layout', this);
38901         
38902     },
38903     
38904     _resetLayout : function()
38905     {
38906         if(this.isHorizontal){
38907             this.horizontalMeasureColumns();
38908             return;
38909         }
38910         
38911         this.verticalMeasureColumns();
38912         
38913     },
38914     
38915     verticalMeasureColumns : function()
38916     {
38917         this.getContainerWidth();
38918         
38919 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
38920 //            this.colWidth = Math.floor(this.containerWidth * 0.8);
38921 //            return;
38922 //        }
38923         
38924         var boxWidth = this.boxWidth + this.padWidth;
38925         
38926         if(this.containerWidth < this.boxWidth){
38927             boxWidth = this.containerWidth
38928         }
38929         
38930         var containerWidth = this.containerWidth;
38931         
38932         var cols = Math.floor(containerWidth / boxWidth);
38933         
38934         this.cols = Math.max( cols, 1 );
38935         
38936         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
38937         
38938         var totalBoxWidth = this.cols * boxWidth - this.padWidth;
38939         
38940         var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
38941         
38942         this.colWidth = boxWidth + avail - this.padWidth;
38943         
38944         this.unitWidth = Math.round((this.colWidth - (this.gutter * 2)) / 3);
38945         this.unitHeight = this.boxHeight > 0 ? this.boxHeight  : this.unitWidth;
38946     },
38947     
38948     horizontalMeasureColumns : function()
38949     {
38950         this.getContainerWidth();
38951         
38952         var boxWidth = this.boxWidth;
38953         
38954         if(this.containerWidth < boxWidth){
38955             boxWidth = this.containerWidth;
38956         }
38957         
38958         this.unitWidth = Math.floor((boxWidth - (this.gutter * 2)) / 3);
38959         
38960         this.el.setHeight(boxWidth);
38961         
38962     },
38963     
38964     getContainerWidth : function()
38965     {
38966         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
38967     },
38968     
38969     layoutItems : function( isInstant )
38970     {
38971         Roo.log(this.bricks);
38972         
38973         var items = Roo.apply([], this.bricks);
38974         
38975         if(this.isHorizontal){
38976             this._horizontalLayoutItems( items , isInstant );
38977             return;
38978         }
38979         
38980 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
38981 //            this._verticalAlternativeLayoutItems( items , isInstant );
38982 //            return;
38983 //        }
38984         
38985         this._verticalLayoutItems( items , isInstant );
38986         
38987     },
38988     
38989     _verticalLayoutItems : function ( items , isInstant)
38990     {
38991         if ( !items || !items.length ) {
38992             return;
38993         }
38994         
38995         var standard = [
38996             ['xs', 'xs', 'xs', 'tall'],
38997             ['xs', 'xs', 'tall'],
38998             ['xs', 'xs', 'sm'],
38999             ['xs', 'xs', 'xs'],
39000             ['xs', 'tall'],
39001             ['xs', 'sm'],
39002             ['xs', 'xs'],
39003             ['xs'],
39004             
39005             ['sm', 'xs', 'xs'],
39006             ['sm', 'xs'],
39007             ['sm'],
39008             
39009             ['tall', 'xs', 'xs', 'xs'],
39010             ['tall', 'xs', 'xs'],
39011             ['tall', 'xs'],
39012             ['tall']
39013             
39014         ];
39015         
39016         var queue = [];
39017         
39018         var boxes = [];
39019         
39020         var box = [];
39021         
39022         Roo.each(items, function(item, k){
39023             
39024             switch (item.size) {
39025                 // these layouts take up a full box,
39026                 case 'md' :
39027                 case 'md-left' :
39028                 case 'md-right' :
39029                 case 'wide' :
39030                     
39031                     if(box.length){
39032                         boxes.push(box);
39033                         box = [];
39034                     }
39035                     
39036                     boxes.push([item]);
39037                     
39038                     break;
39039                     
39040                 case 'xs' :
39041                 case 'sm' :
39042                 case 'tall' :
39043                     
39044                     box.push(item);
39045                     
39046                     break;
39047                 default :
39048                     break;
39049                     
39050             }
39051             
39052         }, this);
39053         
39054         if(box.length){
39055             boxes.push(box);
39056             box = [];
39057         }
39058         
39059         var filterPattern = function(box, length)
39060         {
39061             if(!box.length){
39062                 return;
39063             }
39064             
39065             var match = false;
39066             
39067             var pattern = box.slice(0, length);
39068             
39069             var format = [];
39070             
39071             Roo.each(pattern, function(i){
39072                 format.push(i.size);
39073             }, this);
39074             
39075             Roo.each(standard, function(s){
39076                 
39077                 if(String(s) != String(format)){
39078                     return;
39079                 }
39080                 
39081                 match = true;
39082                 return false;
39083                 
39084             }, this);
39085             
39086             if(!match && length == 1){
39087                 return;
39088             }
39089             
39090             if(!match){
39091                 filterPattern(box, length - 1);
39092                 return;
39093             }
39094                 
39095             queue.push(pattern);
39096
39097             box = box.slice(length, box.length);
39098
39099             filterPattern(box, 4);
39100
39101             return;
39102             
39103         }
39104         
39105         Roo.each(boxes, function(box, k){
39106             
39107             if(!box.length){
39108                 return;
39109             }
39110             
39111             if(box.length == 1){
39112                 queue.push(box);
39113                 return;
39114             }
39115             
39116             filterPattern(box, 4);
39117             
39118         }, this);
39119         
39120         this._processVerticalLayoutQueue( queue, isInstant );
39121         
39122     },
39123     
39124 //    _verticalAlternativeLayoutItems : function( items , isInstant )
39125 //    {
39126 //        if ( !items || !items.length ) {
39127 //            return;
39128 //        }
39129 //
39130 //        this._processVerticalAlternativeLayoutQueue( items, isInstant );
39131 //        
39132 //    },
39133     
39134     _horizontalLayoutItems : function ( items , isInstant)
39135     {
39136         if ( !items || !items.length || items.length < 3) {
39137             return;
39138         }
39139         
39140         items.reverse();
39141         
39142         var eItems = items.slice(0, 3);
39143         
39144         items = items.slice(3, items.length);
39145         
39146         var standard = [
39147             ['xs', 'xs', 'xs', 'wide'],
39148             ['xs', 'xs', 'wide'],
39149             ['xs', 'xs', 'sm'],
39150             ['xs', 'xs', 'xs'],
39151             ['xs', 'wide'],
39152             ['xs', 'sm'],
39153             ['xs', 'xs'],
39154             ['xs'],
39155             
39156             ['sm', 'xs', 'xs'],
39157             ['sm', 'xs'],
39158             ['sm'],
39159             
39160             ['wide', 'xs', 'xs', 'xs'],
39161             ['wide', 'xs', 'xs'],
39162             ['wide', 'xs'],
39163             ['wide'],
39164             
39165             ['wide-thin']
39166         ];
39167         
39168         var queue = [];
39169         
39170         var boxes = [];
39171         
39172         var box = [];
39173         
39174         Roo.each(items, function(item, k){
39175             
39176             switch (item.size) {
39177                 case 'md' :
39178                 case 'md-left' :
39179                 case 'md-right' :
39180                 case 'tall' :
39181                     
39182                     if(box.length){
39183                         boxes.push(box);
39184                         box = [];
39185                     }
39186                     
39187                     boxes.push([item]);
39188                     
39189                     break;
39190                     
39191                 case 'xs' :
39192                 case 'sm' :
39193                 case 'wide' :
39194                 case 'wide-thin' :
39195                     
39196                     box.push(item);
39197                     
39198                     break;
39199                 default :
39200                     break;
39201                     
39202             }
39203             
39204         }, this);
39205         
39206         if(box.length){
39207             boxes.push(box);
39208             box = [];
39209         }
39210         
39211         var filterPattern = function(box, length)
39212         {
39213             if(!box.length){
39214                 return;
39215             }
39216             
39217             var match = false;
39218             
39219             var pattern = box.slice(0, length);
39220             
39221             var format = [];
39222             
39223             Roo.each(pattern, function(i){
39224                 format.push(i.size);
39225             }, this);
39226             
39227             Roo.each(standard, function(s){
39228                 
39229                 if(String(s) != String(format)){
39230                     return;
39231                 }
39232                 
39233                 match = true;
39234                 return false;
39235                 
39236             }, this);
39237             
39238             if(!match && length == 1){
39239                 return;
39240             }
39241             
39242             if(!match){
39243                 filterPattern(box, length - 1);
39244                 return;
39245             }
39246                 
39247             queue.push(pattern);
39248
39249             box = box.slice(length, box.length);
39250
39251             filterPattern(box, 4);
39252
39253             return;
39254             
39255         }
39256         
39257         Roo.each(boxes, function(box, k){
39258             
39259             if(!box.length){
39260                 return;
39261             }
39262             
39263             if(box.length == 1){
39264                 queue.push(box);
39265                 return;
39266             }
39267             
39268             filterPattern(box, 4);
39269             
39270         }, this);
39271         
39272         
39273         var prune = [];
39274         
39275         var pos = this.el.getBox(true);
39276         
39277         var minX = pos.x;
39278         
39279         var maxX = pos.right - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
39280         
39281         var hit_end = false;
39282         
39283         Roo.each(queue, function(box){
39284             
39285             if(hit_end){
39286                 
39287                 Roo.each(box, function(b){
39288                 
39289                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
39290                     b.el.hide();
39291
39292                 }, this);
39293
39294                 return;
39295             }
39296             
39297             var mx = 0;
39298             
39299             Roo.each(box, function(b){
39300                 
39301                 b.el.setVisibilityMode(Roo.Element.DISPLAY);
39302                 b.el.show();
39303
39304                 mx = Math.max(mx, b.x);
39305                 
39306             }, this);
39307             
39308             maxX = maxX - this.unitWidth * mx - this.gutter * (mx - 1) - this.padWidth;
39309             
39310             if(maxX < minX){
39311                 
39312                 Roo.each(box, function(b){
39313                 
39314                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
39315                     b.el.hide();
39316                     
39317                 }, this);
39318                 
39319                 hit_end = true;
39320                 
39321                 return;
39322             }
39323             
39324             prune.push(box);
39325             
39326         }, this);
39327         
39328         this._processHorizontalLayoutQueue( prune, eItems, isInstant );
39329     },
39330     
39331     /** Sets position of item in DOM
39332     * @param {Element} item
39333     * @param {Number} x - horizontal position
39334     * @param {Number} y - vertical position
39335     * @param {Boolean} isInstant - disables transitions
39336     */
39337     _processVerticalLayoutQueue : function( queue, isInstant )
39338     {
39339         var pos = this.el.getBox(true);
39340         var x = pos.x;
39341         var y = pos.y;
39342         var maxY = [];
39343         
39344         for (var i = 0; i < this.cols; i++){
39345             maxY[i] = pos.y;
39346         }
39347         
39348         Roo.each(queue, function(box, k){
39349             
39350             var col = k % this.cols;
39351             
39352             Roo.each(box, function(b,kk){
39353                 
39354                 b.el.position('absolute');
39355                 
39356                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39357                 var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39358                 
39359                 if(b.size == 'md-left' || b.size == 'md-right'){
39360                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
39361                     height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
39362                 }
39363                 
39364                 b.el.setWidth(width);
39365                 b.el.setHeight(height);
39366                 // iframe?
39367                 b.el.select('iframe',true).setSize(width,height);
39368                 
39369             }, this);
39370             
39371             for (var i = 0; i < this.cols; i++){
39372                 
39373                 if(maxY[i] < maxY[col]){
39374                     col = i;
39375                     continue;
39376                 }
39377                 
39378                 col = Math.min(col, i);
39379                 
39380             }
39381             
39382             x = pos.x + col * (this.colWidth + this.padWidth);
39383             
39384             y = maxY[col];
39385             
39386             var positions = [];
39387             
39388             switch (box.length){
39389                 case 1 :
39390                     positions = this.getVerticalOneBoxColPositions(x, y, box);
39391                     break;
39392                 case 2 :
39393                     positions = this.getVerticalTwoBoxColPositions(x, y, box);
39394                     break;
39395                 case 3 :
39396                     positions = this.getVerticalThreeBoxColPositions(x, y, box);
39397                     break;
39398                 case 4 :
39399                     positions = this.getVerticalFourBoxColPositions(x, y, box);
39400                     break;
39401                 default :
39402                     break;
39403             }
39404             
39405             Roo.each(box, function(b,kk){
39406                 
39407                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
39408                 
39409                 var sz = b.el.getSize();
39410                 
39411                 maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
39412                 
39413             }, this);
39414             
39415         }, this);
39416         
39417         var mY = 0;
39418         
39419         for (var i = 0; i < this.cols; i++){
39420             mY = Math.max(mY, maxY[i]);
39421         }
39422         
39423         this.el.setHeight(mY - pos.y);
39424         
39425     },
39426     
39427 //    _processVerticalAlternativeLayoutQueue : function( items, isInstant )
39428 //    {
39429 //        var pos = this.el.getBox(true);
39430 //        var x = pos.x;
39431 //        var y = pos.y;
39432 //        var maxX = pos.right;
39433 //        
39434 //        var maxHeight = 0;
39435 //        
39436 //        Roo.each(items, function(item, k){
39437 //            
39438 //            var c = k % 2;
39439 //            
39440 //            item.el.position('absolute');
39441 //                
39442 //            var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
39443 //
39444 //            item.el.setWidth(width);
39445 //
39446 //            var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
39447 //
39448 //            item.el.setHeight(height);
39449 //            
39450 //            if(c == 0){
39451 //                item.el.setXY([x, y], isInstant ? false : true);
39452 //            } else {
39453 //                item.el.setXY([maxX - width, y], isInstant ? false : true);
39454 //            }
39455 //            
39456 //            y = y + height + this.alternativePadWidth;
39457 //            
39458 //            maxHeight = maxHeight + height + this.alternativePadWidth;
39459 //            
39460 //        }, this);
39461 //        
39462 //        this.el.setHeight(maxHeight);
39463 //        
39464 //    },
39465     
39466     _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
39467     {
39468         var pos = this.el.getBox(true);
39469         
39470         var minX = pos.x;
39471         var minY = pos.y;
39472         
39473         var maxX = pos.right;
39474         
39475         this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
39476         
39477         var maxX = maxX - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
39478         
39479         Roo.each(queue, function(box, k){
39480             
39481             Roo.each(box, function(b, kk){
39482                 
39483                 b.el.position('absolute');
39484                 
39485                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39486                 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39487                 
39488                 if(b.size == 'md-left' || b.size == 'md-right'){
39489                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
39490                     height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
39491                 }
39492                 
39493                 b.el.setWidth(width);
39494                 b.el.setHeight(height);
39495                 
39496             }, this);
39497             
39498             if(!box.length){
39499                 return;
39500             }
39501             
39502             var positions = [];
39503             
39504             switch (box.length){
39505                 case 1 :
39506                     positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
39507                     break;
39508                 case 2 :
39509                     positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
39510                     break;
39511                 case 3 :
39512                     positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
39513                     break;
39514                 case 4 :
39515                     positions = this.getHorizontalFourBoxColPositions(maxX, minY, box);
39516                     break;
39517                 default :
39518                     break;
39519             }
39520             
39521             Roo.each(box, function(b,kk){
39522                 
39523                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
39524                 
39525                 maxX = Math.min(maxX, positions[kk].x - this.padWidth);
39526                 
39527             }, this);
39528             
39529         }, this);
39530         
39531     },
39532     
39533     _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
39534     {
39535         Roo.each(eItems, function(b,k){
39536             
39537             b.size = (k == 0) ? 'sm' : 'xs';
39538             b.x = (k == 0) ? 2 : 1;
39539             b.y = (k == 0) ? 2 : 1;
39540             
39541             b.el.position('absolute');
39542             
39543             var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
39544                 
39545             b.el.setWidth(width);
39546             
39547             var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
39548             
39549             b.el.setHeight(height);
39550             
39551         }, this);
39552
39553         var positions = [];
39554         
39555         positions.push({
39556             x : maxX - this.unitWidth * 2 - this.gutter,
39557             y : minY
39558         });
39559         
39560         positions.push({
39561             x : maxX - this.unitWidth,
39562             y : minY + (this.unitWidth + this.gutter) * 2
39563         });
39564         
39565         positions.push({
39566             x : maxX - this.unitWidth * 3 - this.gutter * 2,
39567             y : minY
39568         });
39569         
39570         Roo.each(eItems, function(b,k){
39571             
39572             b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
39573
39574         }, this);
39575         
39576     },
39577     
39578     getVerticalOneBoxColPositions : function(x, y, box)
39579     {
39580         var pos = [];
39581         
39582         var rand = Math.floor(Math.random() * ((4 - box[0].x)));
39583         
39584         if(box[0].size == 'md-left'){
39585             rand = 0;
39586         }
39587         
39588         if(box[0].size == 'md-right'){
39589             rand = 1;
39590         }
39591         
39592         pos.push({
39593             x : x + (this.unitWidth + this.gutter) * rand,
39594             y : y
39595         });
39596         
39597         return pos;
39598     },
39599     
39600     getVerticalTwoBoxColPositions : function(x, y, box)
39601     {
39602         var pos = [];
39603         
39604         if(box[0].size == 'xs'){
39605             
39606             pos.push({
39607                 x : x,
39608                 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
39609             });
39610
39611             pos.push({
39612                 x : x + (this.unitWidth + this.gutter) * (3 - box[1].x),
39613                 y : y
39614             });
39615             
39616             return pos;
39617             
39618         }
39619         
39620         pos.push({
39621             x : x,
39622             y : y
39623         });
39624
39625         pos.push({
39626             x : x + (this.unitWidth + this.gutter) * 2,
39627             y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
39628         });
39629         
39630         return pos;
39631         
39632     },
39633     
39634     getVerticalThreeBoxColPositions : function(x, y, box)
39635     {
39636         var pos = [];
39637         
39638         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
39639             
39640             pos.push({
39641                 x : x,
39642                 y : y
39643             });
39644
39645             pos.push({
39646                 x : x + (this.unitWidth + this.gutter) * 1,
39647                 y : y
39648             });
39649             
39650             pos.push({
39651                 x : x + (this.unitWidth + this.gutter) * 2,
39652                 y : y
39653             });
39654             
39655             return pos;
39656             
39657         }
39658         
39659         if(box[0].size == 'xs' && box[1].size == 'xs'){
39660             
39661             pos.push({
39662                 x : x,
39663                 y : y
39664             });
39665
39666             pos.push({
39667                 x : x,
39668                 y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
39669             });
39670             
39671             pos.push({
39672                 x : x + (this.unitWidth + this.gutter) * 1,
39673                 y : y
39674             });
39675             
39676             return pos;
39677             
39678         }
39679         
39680         pos.push({
39681             x : x,
39682             y : y
39683         });
39684
39685         pos.push({
39686             x : x + (this.unitWidth + this.gutter) * 2,
39687             y : y
39688         });
39689
39690         pos.push({
39691             x : x + (this.unitWidth + this.gutter) * 2,
39692             y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
39693         });
39694             
39695         return pos;
39696         
39697     },
39698     
39699     getVerticalFourBoxColPositions : function(x, y, box)
39700     {
39701         var pos = [];
39702         
39703         if(box[0].size == 'xs'){
39704             
39705             pos.push({
39706                 x : x,
39707                 y : y
39708             });
39709
39710             pos.push({
39711                 x : x,
39712                 y : y + (this.unitHeight + this.gutter) * 1
39713             });
39714             
39715             pos.push({
39716                 x : x,
39717                 y : y + (this.unitHeight + this.gutter) * 2
39718             });
39719             
39720             pos.push({
39721                 x : x + (this.unitWidth + this.gutter) * 1,
39722                 y : y
39723             });
39724             
39725             return pos;
39726             
39727         }
39728         
39729         pos.push({
39730             x : x,
39731             y : y
39732         });
39733
39734         pos.push({
39735             x : x + (this.unitWidth + this.gutter) * 2,
39736             y : y
39737         });
39738
39739         pos.push({
39740             x : x + (this.unitHeightunitWidth + this.gutter) * 2,
39741             y : y + (this.unitHeight + this.gutter) * 1
39742         });
39743
39744         pos.push({
39745             x : x + (this.unitWidth + this.gutter) * 2,
39746             y : y + (this.unitWidth + this.gutter) * 2
39747         });
39748
39749         return pos;
39750         
39751     },
39752     
39753     getHorizontalOneBoxColPositions : function(maxX, minY, box)
39754     {
39755         var pos = [];
39756         
39757         if(box[0].size == 'md-left'){
39758             pos.push({
39759                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
39760                 y : minY
39761             });
39762             
39763             return pos;
39764         }
39765         
39766         if(box[0].size == 'md-right'){
39767             pos.push({
39768                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
39769                 y : minY + (this.unitWidth + this.gutter) * 1
39770             });
39771             
39772             return pos;
39773         }
39774         
39775         var rand = Math.floor(Math.random() * (4 - box[0].y));
39776         
39777         pos.push({
39778             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39779             y : minY + (this.unitWidth + this.gutter) * rand
39780         });
39781         
39782         return pos;
39783         
39784     },
39785     
39786     getHorizontalTwoBoxColPositions : function(maxX, minY, box)
39787     {
39788         var pos = [];
39789         
39790         if(box[0].size == 'xs'){
39791             
39792             pos.push({
39793                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39794                 y : minY
39795             });
39796
39797             pos.push({
39798                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39799                 y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
39800             });
39801             
39802             return pos;
39803             
39804         }
39805         
39806         pos.push({
39807             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39808             y : minY
39809         });
39810
39811         pos.push({
39812             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39813             y : minY + (this.unitWidth + this.gutter) * 2
39814         });
39815         
39816         return pos;
39817         
39818     },
39819     
39820     getHorizontalThreeBoxColPositions : function(maxX, minY, box)
39821     {
39822         var pos = [];
39823         
39824         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
39825             
39826             pos.push({
39827                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39828                 y : minY
39829             });
39830
39831             pos.push({
39832                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39833                 y : minY + (this.unitWidth + this.gutter) * 1
39834             });
39835             
39836             pos.push({
39837                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
39838                 y : minY + (this.unitWidth + this.gutter) * 2
39839             });
39840             
39841             return pos;
39842             
39843         }
39844         
39845         if(box[0].size == 'xs' && box[1].size == 'xs'){
39846             
39847             pos.push({
39848                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39849                 y : minY
39850             });
39851
39852             pos.push({
39853                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39854                 y : minY
39855             });
39856             
39857             pos.push({
39858                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
39859                 y : minY + (this.unitWidth + this.gutter) * 1
39860             });
39861             
39862             return pos;
39863             
39864         }
39865         
39866         pos.push({
39867             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39868             y : minY
39869         });
39870
39871         pos.push({
39872             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39873             y : minY + (this.unitWidth + this.gutter) * 2
39874         });
39875
39876         pos.push({
39877             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
39878             y : minY + (this.unitWidth + this.gutter) * 2
39879         });
39880             
39881         return pos;
39882         
39883     },
39884     
39885     getHorizontalFourBoxColPositions : function(maxX, minY, box)
39886     {
39887         var pos = [];
39888         
39889         if(box[0].size == 'xs'){
39890             
39891             pos.push({
39892                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39893                 y : minY
39894             });
39895
39896             pos.push({
39897                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39898                 y : minY
39899             });
39900             
39901             pos.push({
39902                 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),
39903                 y : minY
39904             });
39905             
39906             pos.push({
39907                 x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
39908                 y : minY + (this.unitWidth + this.gutter) * 1
39909             });
39910             
39911             return pos;
39912             
39913         }
39914         
39915         pos.push({
39916             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
39917             y : minY
39918         });
39919         
39920         pos.push({
39921             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
39922             y : minY + (this.unitWidth + this.gutter) * 2
39923         });
39924         
39925         pos.push({
39926             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
39927             y : minY + (this.unitWidth + this.gutter) * 2
39928         });
39929         
39930         pos.push({
39931             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),
39932             y : minY + (this.unitWidth + this.gutter) * 2
39933         });
39934
39935         return pos;
39936         
39937     },
39938     
39939     /**
39940     * remove a Masonry Brick
39941     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
39942     */
39943     removeBrick : function(brick_id)
39944     {
39945         if (!brick_id) {
39946             return;
39947         }
39948         
39949         for (var i = 0; i<this.bricks.length; i++) {
39950             if (this.bricks[i].id == brick_id) {
39951                 this.bricks.splice(i,1);
39952                 this.el.dom.removeChild(Roo.get(brick_id).dom);
39953                 this.initial();
39954             }
39955         }
39956     },
39957     
39958     /**
39959     * adds a Masonry Brick
39960     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
39961     */
39962     addBrick : function(cfg)
39963     {
39964         var cn = new Roo.bootstrap.MasonryBrick(cfg);
39965         //this.register(cn);
39966         cn.parentId = this.id;
39967         cn.render(this.el);
39968         return cn;
39969     },
39970     
39971     /**
39972     * register a Masonry Brick
39973     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
39974     */
39975     
39976     register : function(brick)
39977     {
39978         this.bricks.push(brick);
39979         brick.masonryId = this.id;
39980     },
39981     
39982     /**
39983     * clear all the Masonry Brick
39984     */
39985     clearAll : function()
39986     {
39987         this.bricks = [];
39988         //this.getChildContainer().dom.innerHTML = "";
39989         this.el.dom.innerHTML = '';
39990     },
39991     
39992     getSelected : function()
39993     {
39994         if (!this.selectedBrick) {
39995             return false;
39996         }
39997         
39998         return this.selectedBrick;
39999     }
40000 });
40001
40002 Roo.apply(Roo.bootstrap.LayoutMasonry, {
40003     
40004     groups: {},
40005      /**
40006     * register a Masonry Layout
40007     * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
40008     */
40009     
40010     register : function(layout)
40011     {
40012         this.groups[layout.id] = layout;
40013     },
40014     /**
40015     * fetch a  Masonry Layout based on the masonry layout ID
40016     * @param {string} the masonry layout to add
40017     * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
40018     */
40019     
40020     get: function(layout_id) {
40021         if (typeof(this.groups[layout_id]) == 'undefined') {
40022             return false;
40023         }
40024         return this.groups[layout_id] ;
40025     }
40026     
40027     
40028     
40029 });
40030
40031  
40032
40033  /**
40034  *
40035  * This is based on 
40036  * http://masonry.desandro.com
40037  *
40038  * The idea is to render all the bricks based on vertical width...
40039  *
40040  * The original code extends 'outlayer' - we might need to use that....
40041  * 
40042  */
40043
40044
40045 /**
40046  * @class Roo.bootstrap.LayoutMasonryAuto
40047  * @extends Roo.bootstrap.Component
40048  * Bootstrap Layout Masonry class
40049  * 
40050  * @constructor
40051  * Create a new Element
40052  * @param {Object} config The config object
40053  */
40054
40055 Roo.bootstrap.LayoutMasonryAuto = function(config){
40056     Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this, config);
40057 };
40058
40059 Roo.extend(Roo.bootstrap.LayoutMasonryAuto, Roo.bootstrap.Component,  {
40060     
40061       /**
40062      * @cfg {Boolean} isFitWidth  - resize the width..
40063      */   
40064     isFitWidth : false,  // options..
40065     /**
40066      * @cfg {Boolean} isOriginLeft = left align?
40067      */   
40068     isOriginLeft : true,
40069     /**
40070      * @cfg {Boolean} isOriginTop = top align?
40071      */   
40072     isOriginTop : false,
40073     /**
40074      * @cfg {Boolean} isLayoutInstant = no animation?
40075      */   
40076     isLayoutInstant : false, // needed?
40077     /**
40078      * @cfg {Boolean} isResizingContainer = not sure if this is used..
40079      */   
40080     isResizingContainer : true,
40081     /**
40082      * @cfg {Number} columnWidth  width of the columns 
40083      */   
40084     
40085     columnWidth : 0,
40086     
40087     /**
40088      * @cfg {Number} maxCols maximum number of columns
40089      */   
40090     
40091     maxCols: 0,
40092     /**
40093      * @cfg {Number} padHeight padding below box..
40094      */   
40095     
40096     padHeight : 10, 
40097     
40098     /**
40099      * @cfg {Boolean} isAutoInitial defalut true
40100      */   
40101     
40102     isAutoInitial : true, 
40103     
40104     // private?
40105     gutter : 0,
40106     
40107     containerWidth: 0,
40108     initialColumnWidth : 0,
40109     currentSize : null,
40110     
40111     colYs : null, // array.
40112     maxY : 0,
40113     padWidth: 10,
40114     
40115     
40116     tag: 'div',
40117     cls: '',
40118     bricks: null, //CompositeElement
40119     cols : 0, // array?
40120     // element : null, // wrapped now this.el
40121     _isLayoutInited : null, 
40122     
40123     
40124     getAutoCreate : function(){
40125         
40126         var cfg = {
40127             tag: this.tag,
40128             cls: 'blog-masonary-wrapper ' + this.cls,
40129             cn : {
40130                 cls : 'mas-boxes masonary'
40131             }
40132         };
40133         
40134         return cfg;
40135     },
40136     
40137     getChildContainer: function( )
40138     {
40139         if (this.boxesEl) {
40140             return this.boxesEl;
40141         }
40142         
40143         this.boxesEl = this.el.select('.mas-boxes').first();
40144         
40145         return this.boxesEl;
40146     },
40147     
40148     
40149     initEvents : function()
40150     {
40151         var _this = this;
40152         
40153         if(this.isAutoInitial){
40154             Roo.log('hook children rendered');
40155             this.on('childrenrendered', function() {
40156                 Roo.log('children rendered');
40157                 _this.initial();
40158             } ,this);
40159         }
40160         
40161     },
40162     
40163     initial : function()
40164     {
40165         this.reloadItems();
40166
40167         this.currentSize = this.el.getBox(true);
40168
40169         /// was window resize... - let's see if this works..
40170         Roo.EventManager.onWindowResize(this.resize, this); 
40171
40172         if(!this.isAutoInitial){
40173             this.layout();
40174             return;
40175         }
40176         
40177         this.layout.defer(500,this);
40178     },
40179     
40180     reloadItems: function()
40181     {
40182         this.bricks = this.el.select('.masonry-brick', true);
40183         
40184         this.bricks.each(function(b) {
40185             //Roo.log(b.getSize());
40186             if (!b.attr('originalwidth')) {
40187                 b.attr('originalwidth',  b.getSize().width);
40188             }
40189             
40190         });
40191         
40192         Roo.log(this.bricks.elements.length);
40193     },
40194     
40195     resize : function()
40196     {
40197         Roo.log('resize');
40198         var cs = this.el.getBox(true);
40199         
40200         if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
40201             Roo.log("no change in with or X");
40202             return;
40203         }
40204         this.currentSize = cs;
40205         this.layout();
40206     },
40207     
40208     layout : function()
40209     {
40210          Roo.log('layout');
40211         this._resetLayout();
40212         //this._manageStamps();
40213       
40214         // don't animate first layout
40215         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
40216         this.layoutItems( isInstant );
40217       
40218         // flag for initalized
40219         this._isLayoutInited = true;
40220     },
40221     
40222     layoutItems : function( isInstant )
40223     {
40224         //var items = this._getItemsForLayout( this.items );
40225         // original code supports filtering layout items.. we just ignore it..
40226         
40227         this._layoutItems( this.bricks , isInstant );
40228       
40229         this._postLayout();
40230     },
40231     _layoutItems : function ( items , isInstant)
40232     {
40233        //this.fireEvent( 'layout', this, items );
40234     
40235
40236         if ( !items || !items.elements.length ) {
40237           // no items, emit event with empty array
40238             return;
40239         }
40240
40241         var queue = [];
40242         items.each(function(item) {
40243             Roo.log("layout item");
40244             Roo.log(item);
40245             // get x/y object from method
40246             var position = this._getItemLayoutPosition( item );
40247             // enqueue
40248             position.item = item;
40249             position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
40250             queue.push( position );
40251         }, this);
40252       
40253         this._processLayoutQueue( queue );
40254     },
40255     /** Sets position of item in DOM
40256     * @param {Element} item
40257     * @param {Number} x - horizontal position
40258     * @param {Number} y - vertical position
40259     * @param {Boolean} isInstant - disables transitions
40260     */
40261     _processLayoutQueue : function( queue )
40262     {
40263         for ( var i=0, len = queue.length; i < len; i++ ) {
40264             var obj = queue[i];
40265             obj.item.position('absolute');
40266             obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
40267         }
40268     },
40269       
40270     
40271     /**
40272     * Any logic you want to do after each layout,
40273     * i.e. size the container
40274     */
40275     _postLayout : function()
40276     {
40277         this.resizeContainer();
40278     },
40279     
40280     resizeContainer : function()
40281     {
40282         if ( !this.isResizingContainer ) {
40283             return;
40284         }
40285         var size = this._getContainerSize();
40286         if ( size ) {
40287             this.el.setSize(size.width,size.height);
40288             this.boxesEl.setSize(size.width,size.height);
40289         }
40290     },
40291     
40292     
40293     
40294     _resetLayout : function()
40295     {
40296         //this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
40297         this.colWidth = this.el.getWidth();
40298         //this.gutter = this.el.getWidth(); 
40299         
40300         this.measureColumns();
40301
40302         // reset column Y
40303         var i = this.cols;
40304         this.colYs = [];
40305         while (i--) {
40306             this.colYs.push( 0 );
40307         }
40308     
40309         this.maxY = 0;
40310     },
40311
40312     measureColumns : function()
40313     {
40314         this.getContainerWidth();
40315       // if columnWidth is 0, default to outerWidth of first item
40316         if ( !this.columnWidth ) {
40317             var firstItem = this.bricks.first();
40318             Roo.log(firstItem);
40319             this.columnWidth  = this.containerWidth;
40320             if (firstItem && firstItem.attr('originalwidth') ) {
40321                 this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
40322             }
40323             // columnWidth fall back to item of first element
40324             Roo.log("set column width?");
40325                         this.initialColumnWidth = this.columnWidth  ;
40326
40327             // if first elem has no width, default to size of container
40328             
40329         }
40330         
40331         
40332         if (this.initialColumnWidth) {
40333             this.columnWidth = this.initialColumnWidth;
40334         }
40335         
40336         
40337             
40338         // column width is fixed at the top - however if container width get's smaller we should
40339         // reduce it...
40340         
40341         // this bit calcs how man columns..
40342             
40343         var columnWidth = this.columnWidth += this.gutter;
40344       
40345         // calculate columns
40346         var containerWidth = this.containerWidth + this.gutter;
40347         
40348         var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
40349         // fix rounding errors, typically with gutters
40350         var excess = columnWidth - containerWidth % columnWidth;
40351         
40352         
40353         // if overshoot is less than a pixel, round up, otherwise floor it
40354         var mathMethod = excess && excess < 1 ? 'round' : 'floor';
40355         cols = Math[ mathMethod ]( cols );
40356         this.cols = Math.max( cols, 1 );
40357         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
40358         
40359          // padding positioning..
40360         var totalColWidth = this.cols * this.columnWidth;
40361         var padavail = this.containerWidth - totalColWidth;
40362         // so for 2 columns - we need 3 'pads'
40363         
40364         var padNeeded = (1+this.cols) * this.padWidth;
40365         
40366         var padExtra = Math.floor((padavail - padNeeded) / this.cols);
40367         
40368         this.columnWidth += padExtra
40369         //this.padWidth = Math.floor(padavail /  ( this.cols));
40370         
40371         // adjust colum width so that padding is fixed??
40372         
40373         // we have 3 columns ... total = width * 3
40374         // we have X left over... that should be used by 
40375         
40376         //if (this.expandC) {
40377             
40378         //}
40379         
40380         
40381         
40382     },
40383     
40384     getContainerWidth : function()
40385     {
40386        /* // container is parent if fit width
40387         var container = this.isFitWidth ? this.element.parentNode : this.element;
40388         // check that this.size and size are there
40389         // IE8 triggers resize on body size change, so they might not be
40390         
40391         var size = getSize( container );  //FIXME
40392         this.containerWidth = size && size.innerWidth; //FIXME
40393         */
40394          
40395         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
40396         
40397     },
40398     
40399     _getItemLayoutPosition : function( item )  // what is item?
40400     {
40401         // we resize the item to our columnWidth..
40402       
40403         item.setWidth(this.columnWidth);
40404         item.autoBoxAdjust  = false;
40405         
40406         var sz = item.getSize();
40407  
40408         // how many columns does this brick span
40409         var remainder = this.containerWidth % this.columnWidth;
40410         
40411         var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
40412         // round if off by 1 pixel, otherwise use ceil
40413         var colSpan = Math[ mathMethod ]( sz.width  / this.columnWidth );
40414         colSpan = Math.min( colSpan, this.cols );
40415         
40416         // normally this should be '1' as we dont' currently allow multi width columns..
40417         
40418         var colGroup = this._getColGroup( colSpan );
40419         // get the minimum Y value from the columns
40420         var minimumY = Math.min.apply( Math, colGroup );
40421         Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
40422         
40423         var shortColIndex = colGroup.indexOf(  minimumY ); // broken on ie8..?? probably...
40424          
40425         // position the brick
40426         var position = {
40427             x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
40428             y: this.currentSize.y + minimumY + this.padHeight
40429         };
40430         
40431         Roo.log(position);
40432         // apply setHeight to necessary columns
40433         var setHeight = minimumY + sz.height + this.padHeight;
40434         //Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
40435         
40436         var setSpan = this.cols + 1 - colGroup.length;
40437         for ( var i = 0; i < setSpan; i++ ) {
40438           this.colYs[ shortColIndex + i ] = setHeight ;
40439         }
40440       
40441         return position;
40442     },
40443     
40444     /**
40445      * @param {Number} colSpan - number of columns the element spans
40446      * @returns {Array} colGroup
40447      */
40448     _getColGroup : function( colSpan )
40449     {
40450         if ( colSpan < 2 ) {
40451           // if brick spans only one column, use all the column Ys
40452           return this.colYs;
40453         }
40454       
40455         var colGroup = [];
40456         // how many different places could this brick fit horizontally
40457         var groupCount = this.cols + 1 - colSpan;
40458         // for each group potential horizontal position
40459         for ( var i = 0; i < groupCount; i++ ) {
40460           // make an array of colY values for that one group
40461           var groupColYs = this.colYs.slice( i, i + colSpan );
40462           // and get the max value of the array
40463           colGroup[i] = Math.max.apply( Math, groupColYs );
40464         }
40465         return colGroup;
40466     },
40467     /*
40468     _manageStamp : function( stamp )
40469     {
40470         var stampSize =  stamp.getSize();
40471         var offset = stamp.getBox();
40472         // get the columns that this stamp affects
40473         var firstX = this.isOriginLeft ? offset.x : offset.right;
40474         var lastX = firstX + stampSize.width;
40475         var firstCol = Math.floor( firstX / this.columnWidth );
40476         firstCol = Math.max( 0, firstCol );
40477         
40478         var lastCol = Math.floor( lastX / this.columnWidth );
40479         // lastCol should not go over if multiple of columnWidth #425
40480         lastCol -= lastX % this.columnWidth ? 0 : 1;
40481         lastCol = Math.min( this.cols - 1, lastCol );
40482         
40483         // set colYs to bottom of the stamp
40484         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
40485             stampSize.height;
40486             
40487         for ( var i = firstCol; i <= lastCol; i++ ) {
40488           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
40489         }
40490     },
40491     */
40492     
40493     _getContainerSize : function()
40494     {
40495         this.maxY = Math.max.apply( Math, this.colYs );
40496         var size = {
40497             height: this.maxY
40498         };
40499       
40500         if ( this.isFitWidth ) {
40501             size.width = this._getContainerFitWidth();
40502         }
40503       
40504         return size;
40505     },
40506     
40507     _getContainerFitWidth : function()
40508     {
40509         var unusedCols = 0;
40510         // count unused columns
40511         var i = this.cols;
40512         while ( --i ) {
40513           if ( this.colYs[i] !== 0 ) {
40514             break;
40515           }
40516           unusedCols++;
40517         }
40518         // fit container to columns that have been used
40519         return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
40520     },
40521     
40522     needsResizeLayout : function()
40523     {
40524         var previousWidth = this.containerWidth;
40525         this.getContainerWidth();
40526         return previousWidth !== this.containerWidth;
40527     }
40528  
40529 });
40530
40531  
40532
40533  /*
40534  * - LGPL
40535  *
40536  * element
40537  * 
40538  */
40539
40540 /**
40541  * @class Roo.bootstrap.MasonryBrick
40542  * @extends Roo.bootstrap.Component
40543  * Bootstrap MasonryBrick class
40544  * 
40545  * @constructor
40546  * Create a new MasonryBrick
40547  * @param {Object} config The config object
40548  */
40549
40550 Roo.bootstrap.MasonryBrick = function(config){
40551     
40552     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
40553     
40554     Roo.bootstrap.MasonryBrick.register(this);
40555     
40556     this.addEvents({
40557         // raw events
40558         /**
40559          * @event click
40560          * When a MasonryBrick is clcik
40561          * @param {Roo.bootstrap.MasonryBrick} this
40562          * @param {Roo.EventObject} e
40563          */
40564         "click" : true
40565     });
40566 };
40567
40568 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
40569     
40570     /**
40571      * @cfg {String} title
40572      */   
40573     title : '',
40574     /**
40575      * @cfg {String} html
40576      */   
40577     html : '',
40578     /**
40579      * @cfg {String} bgimage
40580      */   
40581     bgimage : '',
40582     /**
40583      * @cfg {String} videourl
40584      */   
40585     videourl : '',
40586     /**
40587      * @cfg {String} cls
40588      */   
40589     cls : '',
40590     /**
40591      * @cfg {String} href
40592      */   
40593     href : '',
40594     /**
40595      * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
40596      */   
40597     size : 'xs',
40598     
40599     /**
40600      * @cfg {String} placetitle (center|bottom)
40601      */   
40602     placetitle : '',
40603     
40604     /**
40605      * @cfg {Boolean} isFitContainer defalut true
40606      */   
40607     isFitContainer : true, 
40608     
40609     /**
40610      * @cfg {Boolean} preventDefault defalut false
40611      */   
40612     preventDefault : false, 
40613     
40614     /**
40615      * @cfg {Boolean} inverse defalut false
40616      */   
40617     maskInverse : false, 
40618     
40619     getAutoCreate : function()
40620     {
40621         if(!this.isFitContainer){
40622             return this.getSplitAutoCreate();
40623         }
40624         
40625         var cls = 'masonry-brick masonry-brick-full';
40626         
40627         if(this.href.length){
40628             cls += ' masonry-brick-link';
40629         }
40630         
40631         if(this.bgimage.length){
40632             cls += ' masonry-brick-image';
40633         }
40634         
40635         if(this.maskInverse){
40636             cls += ' mask-inverse';
40637         }
40638         
40639         if(!this.html.length && !this.maskInverse && !this.videourl.length){
40640             cls += ' enable-mask';
40641         }
40642         
40643         if(this.size){
40644             cls += ' masonry-' + this.size + '-brick';
40645         }
40646         
40647         if(this.placetitle.length){
40648             
40649             switch (this.placetitle) {
40650                 case 'center' :
40651                     cls += ' masonry-center-title';
40652                     break;
40653                 case 'bottom' :
40654                     cls += ' masonry-bottom-title';
40655                     break;
40656                 default:
40657                     break;
40658             }
40659             
40660         } else {
40661             if(!this.html.length && !this.bgimage.length){
40662                 cls += ' masonry-center-title';
40663             }
40664
40665             if(!this.html.length && this.bgimage.length){
40666                 cls += ' masonry-bottom-title';
40667             }
40668         }
40669         
40670         if(this.cls){
40671             cls += ' ' + this.cls;
40672         }
40673         
40674         var cfg = {
40675             tag: (this.href.length) ? 'a' : 'div',
40676             cls: cls,
40677             cn: [
40678                 {
40679                     tag: 'div',
40680                     cls: 'masonry-brick-mask'
40681                 },
40682                 {
40683                     tag: 'div',
40684                     cls: 'masonry-brick-paragraph',
40685                     cn: []
40686                 }
40687             ]
40688         };
40689         
40690         if(this.href.length){
40691             cfg.href = this.href;
40692         }
40693         
40694         var cn = cfg.cn[1].cn;
40695         
40696         if(this.title.length){
40697             cn.push({
40698                 tag: 'h4',
40699                 cls: 'masonry-brick-title',
40700                 html: this.title
40701             });
40702         }
40703         
40704         if(this.html.length){
40705             cn.push({
40706                 tag: 'p',
40707                 cls: 'masonry-brick-text',
40708                 html: this.html
40709             });
40710         }
40711         
40712         if (!this.title.length && !this.html.length) {
40713             cfg.cn[1].cls += ' hide';
40714         }
40715         
40716         if(this.bgimage.length){
40717             cfg.cn.push({
40718                 tag: 'img',
40719                 cls: 'masonry-brick-image-view',
40720                 src: this.bgimage
40721             });
40722         }
40723         
40724         if(this.videourl.length){
40725             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
40726             // youtube support only?
40727             cfg.cn.push({
40728                 tag: 'iframe',
40729                 cls: 'masonry-brick-image-view',
40730                 src: vurl,
40731                 frameborder : 0,
40732                 allowfullscreen : true
40733             });
40734         }
40735         
40736         return cfg;
40737         
40738     },
40739     
40740     getSplitAutoCreate : function()
40741     {
40742         var cls = 'masonry-brick masonry-brick-split';
40743         
40744         if(this.href.length){
40745             cls += ' masonry-brick-link';
40746         }
40747         
40748         if(this.bgimage.length){
40749             cls += ' masonry-brick-image';
40750         }
40751         
40752         if(this.size){
40753             cls += ' masonry-' + this.size + '-brick';
40754         }
40755         
40756         switch (this.placetitle) {
40757             case 'center' :
40758                 cls += ' masonry-center-title';
40759                 break;
40760             case 'bottom' :
40761                 cls += ' masonry-bottom-title';
40762                 break;
40763             default:
40764                 if(!this.bgimage.length){
40765                     cls += ' masonry-center-title';
40766                 }
40767
40768                 if(this.bgimage.length){
40769                     cls += ' masonry-bottom-title';
40770                 }
40771                 break;
40772         }
40773         
40774         if(this.cls){
40775             cls += ' ' + this.cls;
40776         }
40777         
40778         var cfg = {
40779             tag: (this.href.length) ? 'a' : 'div',
40780             cls: cls,
40781             cn: [
40782                 {
40783                     tag: 'div',
40784                     cls: 'masonry-brick-split-head',
40785                     cn: [
40786                         {
40787                             tag: 'div',
40788                             cls: 'masonry-brick-paragraph',
40789                             cn: []
40790                         }
40791                     ]
40792                 },
40793                 {
40794                     tag: 'div',
40795                     cls: 'masonry-brick-split-body',
40796                     cn: []
40797                 }
40798             ]
40799         };
40800         
40801         if(this.href.length){
40802             cfg.href = this.href;
40803         }
40804         
40805         if(this.title.length){
40806             cfg.cn[0].cn[0].cn.push({
40807                 tag: 'h4',
40808                 cls: 'masonry-brick-title',
40809                 html: this.title
40810             });
40811         }
40812         
40813         if(this.html.length){
40814             cfg.cn[1].cn.push({
40815                 tag: 'p',
40816                 cls: 'masonry-brick-text',
40817                 html: this.html
40818             });
40819         }
40820
40821         if(this.bgimage.length){
40822             cfg.cn[0].cn.push({
40823                 tag: 'img',
40824                 cls: 'masonry-brick-image-view',
40825                 src: this.bgimage
40826             });
40827         }
40828         
40829         if(this.videourl.length){
40830             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
40831             // youtube support only?
40832             cfg.cn[0].cn.cn.push({
40833                 tag: 'iframe',
40834                 cls: 'masonry-brick-image-view',
40835                 src: vurl,
40836                 frameborder : 0,
40837                 allowfullscreen : true
40838             });
40839         }
40840         
40841         return cfg;
40842     },
40843     
40844     initEvents: function() 
40845     {
40846         switch (this.size) {
40847             case 'xs' :
40848                 this.x = 1;
40849                 this.y = 1;
40850                 break;
40851             case 'sm' :
40852                 this.x = 2;
40853                 this.y = 2;
40854                 break;
40855             case 'md' :
40856             case 'md-left' :
40857             case 'md-right' :
40858                 this.x = 3;
40859                 this.y = 3;
40860                 break;
40861             case 'tall' :
40862                 this.x = 2;
40863                 this.y = 3;
40864                 break;
40865             case 'wide' :
40866                 this.x = 3;
40867                 this.y = 2;
40868                 break;
40869             case 'wide-thin' :
40870                 this.x = 3;
40871                 this.y = 1;
40872                 break;
40873                         
40874             default :
40875                 break;
40876         }
40877         
40878         if(Roo.isTouch){
40879             this.el.on('touchstart', this.onTouchStart, this);
40880             this.el.on('touchmove', this.onTouchMove, this);
40881             this.el.on('touchend', this.onTouchEnd, this);
40882             this.el.on('contextmenu', this.onContextMenu, this);
40883         } else {
40884             this.el.on('mouseenter'  ,this.enter, this);
40885             this.el.on('mouseleave', this.leave, this);
40886             this.el.on('click', this.onClick, this);
40887         }
40888         
40889         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
40890             this.parent().bricks.push(this);   
40891         }
40892         
40893     },
40894     
40895     onClick: function(e, el)
40896     {
40897         var time = this.endTimer - this.startTimer;
40898         // Roo.log(e.preventDefault());
40899         if(Roo.isTouch){
40900             if(time > 1000){
40901                 e.preventDefault();
40902                 return;
40903             }
40904         }
40905         
40906         if(!this.preventDefault){
40907             return;
40908         }
40909         
40910         e.preventDefault();
40911         
40912         if (this.activeClass != '') {
40913             this.selectBrick();
40914         }
40915         
40916         this.fireEvent('click', this, e);
40917     },
40918     
40919     enter: function(e, el)
40920     {
40921         e.preventDefault();
40922         
40923         if(!this.isFitContainer || this.maskInverse || this.videourl.length){
40924             return;
40925         }
40926         
40927         if(this.bgimage.length && this.html.length){
40928             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
40929         }
40930     },
40931     
40932     leave: function(e, el)
40933     {
40934         e.preventDefault();
40935         
40936         if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
40937             return;
40938         }
40939         
40940         if(this.bgimage.length && this.html.length){
40941             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
40942         }
40943     },
40944     
40945     onTouchStart: function(e, el)
40946     {
40947 //        e.preventDefault();
40948         
40949         this.touchmoved = false;
40950         
40951         if(!this.isFitContainer){
40952             return;
40953         }
40954         
40955         if(!this.bgimage.length || !this.html.length){
40956             return;
40957         }
40958         
40959         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
40960         
40961         this.timer = new Date().getTime();
40962         
40963     },
40964     
40965     onTouchMove: function(e, el)
40966     {
40967         this.touchmoved = true;
40968     },
40969     
40970     onContextMenu : function(e,el)
40971     {
40972         e.preventDefault();
40973         e.stopPropagation();
40974         return false;
40975     },
40976     
40977     onTouchEnd: function(e, el)
40978     {
40979 //        e.preventDefault();
40980         
40981         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
40982         
40983             this.leave(e,el);
40984             
40985             return;
40986         }
40987         
40988         if(!this.bgimage.length || !this.html.length){
40989             
40990             if(this.href.length){
40991                 window.location.href = this.href;
40992             }
40993             
40994             return;
40995         }
40996         
40997         if(!this.isFitContainer){
40998             return;
40999         }
41000         
41001         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
41002         
41003         window.location.href = this.href;
41004     },
41005     
41006     //selection on single brick only
41007     selectBrick : function() {
41008         
41009         if (!this.parentId) {
41010             return;
41011         }
41012         
41013         var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
41014         var index = m.selectedBrick.indexOf(this.id);
41015         
41016         if ( index > -1) {
41017             m.selectedBrick.splice(index,1);
41018             this.el.removeClass(this.activeClass);
41019             return;
41020         }
41021         
41022         for(var i = 0; i < m.selectedBrick.length; i++) {
41023             var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
41024             b.el.removeClass(b.activeClass);
41025         }
41026         
41027         m.selectedBrick = [];
41028         
41029         m.selectedBrick.push(this.id);
41030         this.el.addClass(this.activeClass);
41031         return;
41032     },
41033     
41034     isSelected : function(){
41035         return this.el.hasClass(this.activeClass);
41036         
41037     }
41038 });
41039
41040 Roo.apply(Roo.bootstrap.MasonryBrick, {
41041     
41042     //groups: {},
41043     groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
41044      /**
41045     * register a Masonry Brick
41046     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
41047     */
41048     
41049     register : function(brick)
41050     {
41051         //this.groups[brick.id] = brick;
41052         this.groups.add(brick.id, brick);
41053     },
41054     /**
41055     * fetch a  masonry brick based on the masonry brick ID
41056     * @param {string} the masonry brick to add
41057     * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
41058     */
41059     
41060     get: function(brick_id) 
41061     {
41062         // if (typeof(this.groups[brick_id]) == 'undefined') {
41063         //     return false;
41064         // }
41065         // return this.groups[brick_id] ;
41066         
41067         if(this.groups.key(brick_id)) {
41068             return this.groups.key(brick_id);
41069         }
41070         
41071         return false;
41072     }
41073     
41074     
41075     
41076 });
41077
41078  /*
41079  * - LGPL
41080  *
41081  * element
41082  * 
41083  */
41084
41085 /**
41086  * @class Roo.bootstrap.Brick
41087  * @extends Roo.bootstrap.Component
41088  * Bootstrap Brick class
41089  * 
41090  * @constructor
41091  * Create a new Brick
41092  * @param {Object} config The config object
41093  */
41094
41095 Roo.bootstrap.Brick = function(config){
41096     Roo.bootstrap.Brick.superclass.constructor.call(this, config);
41097     
41098     this.addEvents({
41099         // raw events
41100         /**
41101          * @event click
41102          * When a Brick is click
41103          * @param {Roo.bootstrap.Brick} this
41104          * @param {Roo.EventObject} e
41105          */
41106         "click" : true
41107     });
41108 };
41109
41110 Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component,  {
41111     
41112     /**
41113      * @cfg {String} title
41114      */   
41115     title : '',
41116     /**
41117      * @cfg {String} html
41118      */   
41119     html : '',
41120     /**
41121      * @cfg {String} bgimage
41122      */   
41123     bgimage : '',
41124     /**
41125      * @cfg {String} cls
41126      */   
41127     cls : '',
41128     /**
41129      * @cfg {String} href
41130      */   
41131     href : '',
41132     /**
41133      * @cfg {String} video
41134      */   
41135     video : '',
41136     /**
41137      * @cfg {Boolean} square
41138      */   
41139     square : true,
41140     
41141     getAutoCreate : function()
41142     {
41143         var cls = 'roo-brick';
41144         
41145         if(this.href.length){
41146             cls += ' roo-brick-link';
41147         }
41148         
41149         if(this.bgimage.length){
41150             cls += ' roo-brick-image';
41151         }
41152         
41153         if(!this.html.length && !this.bgimage.length){
41154             cls += ' roo-brick-center-title';
41155         }
41156         
41157         if(!this.html.length && this.bgimage.length){
41158             cls += ' roo-brick-bottom-title';
41159         }
41160         
41161         if(this.cls){
41162             cls += ' ' + this.cls;
41163         }
41164         
41165         var cfg = {
41166             tag: (this.href.length) ? 'a' : 'div',
41167             cls: cls,
41168             cn: [
41169                 {
41170                     tag: 'div',
41171                     cls: 'roo-brick-paragraph',
41172                     cn: []
41173                 }
41174             ]
41175         };
41176         
41177         if(this.href.length){
41178             cfg.href = this.href;
41179         }
41180         
41181         var cn = cfg.cn[0].cn;
41182         
41183         if(this.title.length){
41184             cn.push({
41185                 tag: 'h4',
41186                 cls: 'roo-brick-title',
41187                 html: this.title
41188             });
41189         }
41190         
41191         if(this.html.length){
41192             cn.push({
41193                 tag: 'p',
41194                 cls: 'roo-brick-text',
41195                 html: this.html
41196             });
41197         } else {
41198             cn.cls += ' hide';
41199         }
41200         
41201         if(this.bgimage.length){
41202             cfg.cn.push({
41203                 tag: 'img',
41204                 cls: 'roo-brick-image-view',
41205                 src: this.bgimage
41206             });
41207         }
41208         
41209         return cfg;
41210     },
41211     
41212     initEvents: function() 
41213     {
41214         if(this.title.length || this.html.length){
41215             this.el.on('mouseenter'  ,this.enter, this);
41216             this.el.on('mouseleave', this.leave, this);
41217         }
41218         
41219         Roo.EventManager.onWindowResize(this.resize, this); 
41220         
41221         if(this.bgimage.length){
41222             this.imageEl = this.el.select('.roo-brick-image-view', true).first();
41223             this.imageEl.on('load', this.onImageLoad, this);
41224             return;
41225         }
41226         
41227         this.resize();
41228     },
41229     
41230     onImageLoad : function()
41231     {
41232         this.resize();
41233     },
41234     
41235     resize : function()
41236     {
41237         var paragraph = this.el.select('.roo-brick-paragraph', true).first();
41238         
41239         paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
41240         
41241         if(this.bgimage.length){
41242             var image = this.el.select('.roo-brick-image-view', true).first();
41243             
41244             image.setWidth(paragraph.getWidth());
41245             
41246             if(this.square){
41247                 image.setHeight(paragraph.getWidth());
41248             }
41249             
41250             this.el.setHeight(image.getHeight());
41251             paragraph.setHeight(image.getHeight());
41252             
41253         }
41254         
41255     },
41256     
41257     enter: function(e, el)
41258     {
41259         e.preventDefault();
41260         
41261         if(this.bgimage.length){
41262             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
41263             this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
41264         }
41265     },
41266     
41267     leave: function(e, el)
41268     {
41269         e.preventDefault();
41270         
41271         if(this.bgimage.length){
41272             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
41273             this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
41274         }
41275     }
41276     
41277 });
41278
41279  
41280
41281  /*
41282  * - LGPL
41283  *
41284  * Number field 
41285  */
41286
41287 /**
41288  * @class Roo.bootstrap.form.NumberField
41289  * @extends Roo.bootstrap.form.Input
41290  * Bootstrap NumberField class
41291  * 
41292  * 
41293  * 
41294  * 
41295  * @constructor
41296  * Create a new NumberField
41297  * @param {Object} config The config object
41298  */
41299
41300 Roo.bootstrap.form.NumberField = function(config){
41301     Roo.bootstrap.form.NumberField.superclass.constructor.call(this, config);
41302 };
41303
41304 Roo.extend(Roo.bootstrap.form.NumberField, Roo.bootstrap.form.Input, {
41305     
41306     /**
41307      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
41308      */
41309     allowDecimals : true,
41310     /**
41311      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
41312      */
41313     decimalSeparator : ".",
41314     /**
41315      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
41316      */
41317     decimalPrecision : 2,
41318     /**
41319      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
41320      */
41321     allowNegative : true,
41322     
41323     /**
41324      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
41325      */
41326     allowZero: true,
41327     /**
41328      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
41329      */
41330     minValue : Number.NEGATIVE_INFINITY,
41331     /**
41332      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
41333      */
41334     maxValue : Number.MAX_VALUE,
41335     /**
41336      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
41337      */
41338     minText : "The minimum value for this field is {0}",
41339     /**
41340      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
41341      */
41342     maxText : "The maximum value for this field is {0}",
41343     /**
41344      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
41345      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
41346      */
41347     nanText : "{0} is not a valid number",
41348     /**
41349      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
41350      */
41351     thousandsDelimiter : false,
41352     /**
41353      * @cfg {String} valueAlign alignment of value
41354      */
41355     valueAlign : "left",
41356
41357     getAutoCreate : function()
41358     {
41359         var hiddenInput = {
41360             tag: 'input',
41361             type: 'hidden',
41362             id: Roo.id(),
41363             cls: 'hidden-number-input'
41364         };
41365         
41366         if (this.name) {
41367             hiddenInput.name = this.name;
41368         }
41369         
41370         this.name = '';
41371         
41372         var cfg = Roo.bootstrap.form.NumberField.superclass.getAutoCreate.call(this);
41373         
41374         this.name = hiddenInput.name;
41375         
41376         if(cfg.cn.length > 0) {
41377             cfg.cn.push(hiddenInput);
41378         }
41379         
41380         return cfg;
41381     },
41382
41383     // private
41384     initEvents : function()
41385     {   
41386         Roo.bootstrap.form.NumberField.superclass.initEvents.call(this);
41387         
41388         var allowed = "0123456789";
41389         
41390         if(this.allowDecimals){
41391             allowed += this.decimalSeparator;
41392         }
41393         
41394         if(this.allowNegative){
41395             allowed += "-";
41396         }
41397         
41398         if(this.thousandsDelimiter) {
41399             allowed += ",";
41400         }
41401         
41402         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
41403         
41404         var keyPress = function(e){
41405             
41406             var k = e.getKey();
41407             
41408             var c = e.getCharCode();
41409             
41410             if(
41411                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
41412                     allowed.indexOf(String.fromCharCode(c)) === -1
41413             ){
41414                 e.stopEvent();
41415                 return;
41416             }
41417             
41418             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
41419                 return;
41420             }
41421             
41422             if(allowed.indexOf(String.fromCharCode(c)) === -1){
41423                 e.stopEvent();
41424             }
41425         };
41426         
41427         this.el.on("keypress", keyPress, this);
41428     },
41429     
41430     validateValue : function(value)
41431     {
41432         
41433         if(!Roo.bootstrap.form.NumberField.superclass.validateValue.call(this, value)){
41434             return false;
41435         }
41436         
41437         var num = this.parseValue(value);
41438         
41439         if(isNaN(num)){
41440             this.markInvalid(String.format(this.nanText, value));
41441             return false;
41442         }
41443         
41444         if(num < this.minValue){
41445             this.markInvalid(String.format(this.minText, this.minValue));
41446             return false;
41447         }
41448         
41449         if(num > this.maxValue){
41450             this.markInvalid(String.format(this.maxText, this.maxValue));
41451             return false;
41452         }
41453         
41454         return true;
41455     },
41456
41457     getValue : function()
41458     {
41459         var v = this.hiddenEl().getValue();
41460         
41461         return this.fixPrecision(this.parseValue(v));
41462     },
41463
41464     parseValue : function(value)
41465     {
41466         if(this.thousandsDelimiter) {
41467             value += "";
41468             r = new RegExp(",", "g");
41469             value = value.replace(r, "");
41470         }
41471         
41472         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
41473         return isNaN(value) ? '' : value;
41474     },
41475
41476     fixPrecision : function(value)
41477     {
41478         if(this.thousandsDelimiter) {
41479             value += "";
41480             r = new RegExp(",", "g");
41481             value = value.replace(r, "");
41482         }
41483         
41484         var nan = isNaN(value);
41485         
41486         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
41487             return nan ? '' : value;
41488         }
41489         return parseFloat(value).toFixed(this.decimalPrecision);
41490     },
41491
41492     setValue : function(v)
41493     {
41494         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
41495         
41496         this.value = v;
41497         
41498         if(this.rendered){
41499             
41500             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
41501             
41502             this.inputEl().dom.value = (v == '') ? '' :
41503                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
41504             
41505             if(!this.allowZero && v === '0') {
41506                 this.hiddenEl().dom.value = '';
41507                 this.inputEl().dom.value = '';
41508             }
41509             
41510             this.validate();
41511         }
41512     },
41513
41514     decimalPrecisionFcn : function(v)
41515     {
41516         return Math.floor(v);
41517     },
41518
41519     beforeBlur : function()
41520     {
41521         var v = this.parseValue(this.getRawValue());
41522         
41523         if(v || v === 0 || v === ''){
41524             this.setValue(v);
41525         }
41526     },
41527     
41528     hiddenEl : function()
41529     {
41530         return this.el.select('input.hidden-number-input',true).first();
41531     }
41532     
41533 });
41534
41535  
41536
41537 /*
41538 * Licence: LGPL
41539 */
41540
41541 /**
41542  * @class Roo.bootstrap.DocumentSlider
41543  * @extends Roo.bootstrap.Component
41544  * Bootstrap DocumentSlider class
41545  * 
41546  * @constructor
41547  * Create a new DocumentViewer
41548  * @param {Object} config The config object
41549  */
41550
41551 Roo.bootstrap.DocumentSlider = function(config){
41552     Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
41553     
41554     this.files = [];
41555     
41556     this.addEvents({
41557         /**
41558          * @event initial
41559          * Fire after initEvent
41560          * @param {Roo.bootstrap.DocumentSlider} this
41561          */
41562         "initial" : true,
41563         /**
41564          * @event update
41565          * Fire after update
41566          * @param {Roo.bootstrap.DocumentSlider} this
41567          */
41568         "update" : true,
41569         /**
41570          * @event click
41571          * Fire after click
41572          * @param {Roo.bootstrap.DocumentSlider} this
41573          */
41574         "click" : true
41575     });
41576 };
41577
41578 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
41579     
41580     files : false,
41581     
41582     indicator : 0,
41583     
41584     getAutoCreate : function()
41585     {
41586         var cfg = {
41587             tag : 'div',
41588             cls : 'roo-document-slider',
41589             cn : [
41590                 {
41591                     tag : 'div',
41592                     cls : 'roo-document-slider-header',
41593                     cn : [
41594                         {
41595                             tag : 'div',
41596                             cls : 'roo-document-slider-header-title'
41597                         }
41598                     ]
41599                 },
41600                 {
41601                     tag : 'div',
41602                     cls : 'roo-document-slider-body',
41603                     cn : [
41604                         {
41605                             tag : 'div',
41606                             cls : 'roo-document-slider-prev',
41607                             cn : [
41608                                 {
41609                                     tag : 'i',
41610                                     cls : 'fa fa-chevron-left'
41611                                 }
41612                             ]
41613                         },
41614                         {
41615                             tag : 'div',
41616                             cls : 'roo-document-slider-thumb',
41617                             cn : [
41618                                 {
41619                                     tag : 'img',
41620                                     cls : 'roo-document-slider-image'
41621                                 }
41622                             ]
41623                         },
41624                         {
41625                             tag : 'div',
41626                             cls : 'roo-document-slider-next',
41627                             cn : [
41628                                 {
41629                                     tag : 'i',
41630                                     cls : 'fa fa-chevron-right'
41631                                 }
41632                             ]
41633                         }
41634                     ]
41635                 }
41636             ]
41637         };
41638         
41639         return cfg;
41640     },
41641     
41642     initEvents : function()
41643     {
41644         this.headerEl = this.el.select('.roo-document-slider-header', true).first();
41645         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
41646         
41647         this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
41648         this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
41649         
41650         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
41651         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
41652         
41653         this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
41654         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
41655         
41656         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
41657         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
41658         
41659         this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
41660         this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
41661         
41662         this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
41663         this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
41664         
41665         this.thumbEl.on('click', this.onClick, this);
41666         
41667         this.prevIndicator.on('click', this.prev, this);
41668         
41669         this.nextIndicator.on('click', this.next, this);
41670         
41671     },
41672     
41673     initial : function()
41674     {
41675         if(this.files.length){
41676             this.indicator = 1;
41677             this.update()
41678         }
41679         
41680         this.fireEvent('initial', this);
41681     },
41682     
41683     update : function()
41684     {
41685         this.imageEl.attr('src', this.files[this.indicator - 1]);
41686         
41687         this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
41688         
41689         this.prevIndicator.show();
41690         
41691         if(this.indicator == 1){
41692             this.prevIndicator.hide();
41693         }
41694         
41695         this.nextIndicator.show();
41696         
41697         if(this.indicator == this.files.length){
41698             this.nextIndicator.hide();
41699         }
41700         
41701         this.thumbEl.scrollTo('top');
41702         
41703         this.fireEvent('update', this);
41704     },
41705     
41706     onClick : function(e)
41707     {
41708         e.preventDefault();
41709         
41710         this.fireEvent('click', this);
41711     },
41712     
41713     prev : function(e)
41714     {
41715         e.preventDefault();
41716         
41717         this.indicator = Math.max(1, this.indicator - 1);
41718         
41719         this.update();
41720     },
41721     
41722     next : function(e)
41723     {
41724         e.preventDefault();
41725         
41726         this.indicator = Math.min(this.files.length, this.indicator + 1);
41727         
41728         this.update();
41729     }
41730 });
41731 /*
41732  * - LGPL
41733  *
41734  * RadioSet
41735  *
41736  *
41737  */
41738
41739 /**
41740  * @class Roo.bootstrap.form.RadioSet
41741  * @extends Roo.bootstrap.form.Input
41742  * @children Roo.bootstrap.form.Radio
41743  * Bootstrap RadioSet class
41744  * @cfg {String} indicatorpos (left|right) default left
41745  * @cfg {Boolean} inline (true|false) inline the element (default true)
41746  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
41747  * @constructor
41748  * Create a new RadioSet
41749  * @param {Object} config The config object
41750  */
41751
41752 Roo.bootstrap.form.RadioSet = function(config){
41753     
41754     Roo.bootstrap.form.RadioSet.superclass.constructor.call(this, config);
41755     
41756     this.radioes = [];
41757     
41758     Roo.bootstrap.form.RadioSet.register(this);
41759     
41760     this.addEvents({
41761         /**
41762         * @event check
41763         * Fires when the element is checked or unchecked.
41764         * @param {Roo.bootstrap.form.RadioSet} this This radio
41765         * @param {Roo.bootstrap.form.Radio} item The checked item
41766         */
41767        check : true,
41768        /**
41769         * @event click
41770         * Fires when the element is click.
41771         * @param {Roo.bootstrap.form.RadioSet} this This radio set
41772         * @param {Roo.bootstrap.form.Radio} item The checked item
41773         * @param {Roo.EventObject} e The event object
41774         */
41775        click : true
41776     });
41777     
41778 };
41779
41780 Roo.extend(Roo.bootstrap.form.RadioSet, Roo.bootstrap.form.Input,  {
41781
41782     radioes : false,
41783     
41784     inline : true,
41785     
41786     weight : '',
41787     
41788     indicatorpos : 'left',
41789     
41790     getAutoCreate : function()
41791     {
41792         var label = {
41793             tag : 'label',
41794             cls : 'roo-radio-set-label',
41795             cn : [
41796                 {
41797                     tag : 'span',
41798                     html : this.fieldLabel
41799                 }
41800             ]
41801         };
41802         if (Roo.bootstrap.version == 3) {
41803             
41804             
41805             if(this.indicatorpos == 'left'){
41806                 label.cn.unshift({
41807                     tag : 'i',
41808                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
41809                     tooltip : 'This field is required'
41810                 });
41811             } else {
41812                 label.cn.push({
41813                     tag : 'i',
41814                     cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
41815                     tooltip : 'This field is required'
41816                 });
41817             }
41818         }
41819         var items = {
41820             tag : 'div',
41821             cls : 'roo-radio-set-items'
41822         };
41823         
41824         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
41825         
41826         if (align === 'left' && this.fieldLabel.length) {
41827             
41828             items = {
41829                 cls : "roo-radio-set-right", 
41830                 cn: [
41831                     items
41832                 ]
41833             };
41834             
41835             if(this.labelWidth > 12){
41836                 label.style = "width: " + this.labelWidth + 'px';
41837             }
41838             
41839             if(this.labelWidth < 13 && this.labelmd == 0){
41840                 this.labelmd = this.labelWidth;
41841             }
41842             
41843             if(this.labellg > 0){
41844                 label.cls += ' col-lg-' + this.labellg;
41845                 items.cls += ' col-lg-' + (12 - this.labellg);
41846             }
41847             
41848             if(this.labelmd > 0){
41849                 label.cls += ' col-md-' + this.labelmd;
41850                 items.cls += ' col-md-' + (12 - this.labelmd);
41851             }
41852             
41853             if(this.labelsm > 0){
41854                 label.cls += ' col-sm-' + this.labelsm;
41855                 items.cls += ' col-sm-' + (12 - this.labelsm);
41856             }
41857             
41858             if(this.labelxs > 0){
41859                 label.cls += ' col-xs-' + this.labelxs;
41860                 items.cls += ' col-xs-' + (12 - this.labelxs);
41861             }
41862         }
41863         
41864         var cfg = {
41865             tag : 'div',
41866             cls : 'roo-radio-set',
41867             cn : [
41868                 {
41869                     tag : 'input',
41870                     cls : 'roo-radio-set-input',
41871                     type : 'hidden',
41872                     name : this.name,
41873                     value : this.value ? this.value :  ''
41874                 },
41875                 label,
41876                 items
41877             ]
41878         };
41879         
41880         if(this.weight.length){
41881             cfg.cls += ' roo-radio-' + this.weight;
41882         }
41883         
41884         if(this.inline) {
41885             cfg.cls += ' roo-radio-set-inline';
41886         }
41887         
41888         var settings=this;
41889         ['xs','sm','md','lg'].map(function(size){
41890             if (settings[size]) {
41891                 cfg.cls += ' col-' + size + '-' + settings[size];
41892             }
41893         });
41894         
41895         return cfg;
41896         
41897     },
41898
41899     initEvents : function()
41900     {
41901         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
41902         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
41903         
41904         if(!this.fieldLabel.length){
41905             this.labelEl.hide();
41906         }
41907         
41908         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
41909         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
41910         
41911         this.indicator = this.indicatorEl();
41912         
41913         if(this.indicator){
41914             this.indicator.addClass('invisible');
41915         }
41916         
41917         this.originalValue = this.getValue();
41918         
41919     },
41920     
41921     inputEl: function ()
41922     {
41923         return this.el.select('.roo-radio-set-input', true).first();
41924     },
41925     
41926     getChildContainer : function()
41927     {
41928         return this.itemsEl;
41929     },
41930     
41931     register : function(item)
41932     {
41933         this.radioes.push(item);
41934         
41935     },
41936     
41937     validate : function()
41938     {   
41939         if(this.getVisibilityEl().hasClass('hidden')){
41940             return true;
41941         }
41942         
41943         var valid = false;
41944         
41945         Roo.each(this.radioes, function(i){
41946             if(!i.checked){
41947                 return;
41948             }
41949             
41950             valid = true;
41951             return false;
41952         });
41953         
41954         if(this.allowBlank) {
41955             return true;
41956         }
41957         
41958         if(this.disabled || valid){
41959             this.markValid();
41960             return true;
41961         }
41962         
41963         this.markInvalid();
41964         return false;
41965         
41966     },
41967     
41968     markValid : function()
41969     {
41970         if(this.labelEl.isVisible(true) && this.indicatorEl()){
41971             this.indicatorEl().removeClass('visible');
41972             this.indicatorEl().addClass('invisible');
41973         }
41974         
41975         
41976         if (Roo.bootstrap.version == 3) {
41977             this.el.removeClass([this.invalidClass, this.validClass]);
41978             this.el.addClass(this.validClass);
41979         } else {
41980             this.el.removeClass(['is-invalid','is-valid']);
41981             this.el.addClass(['is-valid']);
41982         }
41983         this.fireEvent('valid', this);
41984     },
41985     
41986     markInvalid : function(msg)
41987     {
41988         if(this.allowBlank || this.disabled){
41989             return;
41990         }
41991         
41992         if(this.labelEl.isVisible(true) && this.indicatorEl()){
41993             this.indicatorEl().removeClass('invisible');
41994             this.indicatorEl().addClass('visible');
41995         }
41996         if (Roo.bootstrap.version == 3) {
41997             this.el.removeClass([this.invalidClass, this.validClass]);
41998             this.el.addClass(this.invalidClass);
41999         } else {
42000             this.el.removeClass(['is-invalid','is-valid']);
42001             this.el.addClass(['is-invalid']);
42002         }
42003         
42004         this.fireEvent('invalid', this, msg);
42005         
42006     },
42007     
42008     setValue : function(v, suppressEvent)
42009     {   
42010         if(this.value === v){
42011             return;
42012         }
42013         
42014         this.value = v;
42015         
42016         if(this.rendered){
42017             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
42018         }
42019         
42020         Roo.each(this.radioes, function(i){
42021             i.checked = false;
42022             i.el.removeClass('checked');
42023         });
42024         
42025         Roo.each(this.radioes, function(i){
42026             
42027             if(i.value === v || i.value.toString() === v.toString()){
42028                 i.checked = true;
42029                 i.el.addClass('checked');
42030                 
42031                 if(suppressEvent !== true){
42032                     this.fireEvent('check', this, i);
42033                 }
42034                 
42035                 return false;
42036             }
42037             
42038         }, this);
42039         
42040         this.validate();
42041     },
42042     
42043     clearInvalid : function(){
42044         
42045         if(!this.el || this.preventMark){
42046             return;
42047         }
42048         
42049         this.el.removeClass([this.invalidClass]);
42050         
42051         this.fireEvent('valid', this);
42052     }
42053     
42054 });
42055
42056 Roo.apply(Roo.bootstrap.form.RadioSet, {
42057     
42058     groups: {},
42059     
42060     register : function(set)
42061     {
42062         this.groups[set.name] = set;
42063     },
42064     
42065     get: function(name) 
42066     {
42067         if (typeof(this.groups[name]) == 'undefined') {
42068             return false;
42069         }
42070         
42071         return this.groups[name] ;
42072     }
42073     
42074 });
42075 /*
42076  * Based on:
42077  * Ext JS Library 1.1.1
42078  * Copyright(c) 2006-2007, Ext JS, LLC.
42079  *
42080  * Originally Released Under LGPL - original licence link has changed is not relivant.
42081  *
42082  * Fork - LGPL
42083  * <script type="text/javascript">
42084  */
42085
42086
42087 /**
42088  * @class Roo.bootstrap.SplitBar
42089  * @extends Roo.util.Observable
42090  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
42091  * <br><br>
42092  * Usage:
42093  * <pre><code>
42094 var split = new Roo.bootstrap.SplitBar("elementToDrag", "elementToSize",
42095                    Roo.bootstrap.SplitBar.HORIZONTAL, Roo.bootstrap.SplitBar.LEFT);
42096 split.setAdapter(new Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter("container"));
42097 split.minSize = 100;
42098 split.maxSize = 600;
42099 split.animate = true;
42100 split.on('moved', splitterMoved);
42101 </code></pre>
42102  * @constructor
42103  * Create a new SplitBar
42104  * @config {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
42105  * @config {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
42106  * @config {Number} orientation (optional) Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
42107  * @config {Number} placement (optional) Either Roo.bootstrap.SplitBar.LEFT or Roo.bootstrap.SplitBar.RIGHT for horizontal or  
42108                         Roo.bootstrap.SplitBar.TOP or Roo.bootstrap.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
42109                         position of the SplitBar).
42110  */
42111 Roo.bootstrap.SplitBar = function(cfg){
42112     
42113     /** @private */
42114     
42115     //{
42116     //  dragElement : elm
42117     //  resizingElement: el,
42118         // optional..
42119     //    orientation : Either Roo.bootstrap.SplitBar.HORIZONTAL
42120     //    placement : Roo.bootstrap.SplitBar.LEFT  ,
42121         // existingProxy ???
42122     //}
42123     
42124     this.el = Roo.get(cfg.dragElement, true);
42125     this.el.dom.unselectable = "on";
42126     /** @private */
42127     this.resizingEl = Roo.get(cfg.resizingElement, true);
42128
42129     /**
42130      * @private
42131      * The orientation of the split. Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
42132      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
42133      * @type Number
42134      */
42135     this.orientation = cfg.orientation || Roo.bootstrap.SplitBar.HORIZONTAL;
42136     
42137     /**
42138      * The minimum size of the resizing element. (Defaults to 0)
42139      * @type Number
42140      */
42141     this.minSize = 0;
42142     
42143     /**
42144      * The maximum size of the resizing element. (Defaults to 2000)
42145      * @type Number
42146      */
42147     this.maxSize = 2000;
42148     
42149     /**
42150      * Whether to animate the transition to the new size
42151      * @type Boolean
42152      */
42153     this.animate = false;
42154     
42155     /**
42156      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
42157      * @type Boolean
42158      */
42159     this.useShim = false;
42160     
42161     /** @private */
42162     this.shim = null;
42163     
42164     if(!cfg.existingProxy){
42165         /** @private */
42166         this.proxy = Roo.bootstrap.SplitBar.createProxy(this.orientation);
42167     }else{
42168         this.proxy = Roo.get(cfg.existingProxy).dom;
42169     }
42170     /** @private */
42171     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
42172     
42173     /** @private */
42174     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
42175     
42176     /** @private */
42177     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
42178     
42179     /** @private */
42180     this.dragSpecs = {};
42181     
42182     /**
42183      * @private The adapter to use to positon and resize elements
42184      */
42185     this.adapter = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
42186     this.adapter.init(this);
42187     
42188     if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42189         /** @private */
42190         this.placement = cfg.placement || (this.el.getX() > this.resizingEl.getX() ? Roo.bootstrap.SplitBar.LEFT : Roo.bootstrap.SplitBar.RIGHT);
42191         this.el.addClass("roo-splitbar-h");
42192     }else{
42193         /** @private */
42194         this.placement = cfg.placement || (this.el.getY() > this.resizingEl.getY() ? Roo.bootstrap.SplitBar.TOP : Roo.bootstrap.SplitBar.BOTTOM);
42195         this.el.addClass("roo-splitbar-v");
42196     }
42197     
42198     this.addEvents({
42199         /**
42200          * @event resize
42201          * Fires when the splitter is moved (alias for {@link #event-moved})
42202          * @param {Roo.bootstrap.SplitBar} this
42203          * @param {Number} newSize the new width or height
42204          */
42205         "resize" : true,
42206         /**
42207          * @event moved
42208          * Fires when the splitter is moved
42209          * @param {Roo.bootstrap.SplitBar} this
42210          * @param {Number} newSize the new width or height
42211          */
42212         "moved" : true,
42213         /**
42214          * @event beforeresize
42215          * Fires before the splitter is dragged
42216          * @param {Roo.bootstrap.SplitBar} this
42217          */
42218         "beforeresize" : true,
42219
42220         "beforeapply" : true
42221     });
42222
42223     Roo.util.Observable.call(this);
42224 };
42225
42226 Roo.extend(Roo.bootstrap.SplitBar, Roo.util.Observable, {
42227     onStartProxyDrag : function(x, y){
42228         this.fireEvent("beforeresize", this);
42229         if(!this.overlay){
42230             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "roo-drag-overlay", html: "&#160;"}, true);
42231             o.unselectable();
42232             o.enableDisplayMode("block");
42233             // all splitbars share the same overlay
42234             Roo.bootstrap.SplitBar.prototype.overlay = o;
42235         }
42236         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
42237         this.overlay.show();
42238         Roo.get(this.proxy).setDisplayed("block");
42239         var size = this.adapter.getElementSize(this);
42240         this.activeMinSize = this.getMinimumSize();;
42241         this.activeMaxSize = this.getMaximumSize();;
42242         var c1 = size - this.activeMinSize;
42243         var c2 = Math.max(this.activeMaxSize - size, 0);
42244         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42245             this.dd.resetConstraints();
42246             this.dd.setXConstraint(
42247                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c1 : c2, 
42248                 this.placement == Roo.bootstrap.SplitBar.LEFT ? c2 : c1
42249             );
42250             this.dd.setYConstraint(0, 0);
42251         }else{
42252             this.dd.resetConstraints();
42253             this.dd.setXConstraint(0, 0);
42254             this.dd.setYConstraint(
42255                 this.placement == Roo.bootstrap.SplitBar.TOP ? c1 : c2, 
42256                 this.placement == Roo.bootstrap.SplitBar.TOP ? c2 : c1
42257             );
42258          }
42259         this.dragSpecs.startSize = size;
42260         this.dragSpecs.startPoint = [x, y];
42261         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
42262     },
42263     
42264     /** 
42265      * @private Called after the drag operation by the DDProxy
42266      */
42267     onEndProxyDrag : function(e){
42268         Roo.get(this.proxy).setDisplayed(false);
42269         var endPoint = Roo.lib.Event.getXY(e);
42270         if(this.overlay){
42271             this.overlay.hide();
42272         }
42273         var newSize;
42274         if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42275             newSize = this.dragSpecs.startSize + 
42276                 (this.placement == Roo.bootstrap.SplitBar.LEFT ?
42277                     endPoint[0] - this.dragSpecs.startPoint[0] :
42278                     this.dragSpecs.startPoint[0] - endPoint[0]
42279                 );
42280         }else{
42281             newSize = this.dragSpecs.startSize + 
42282                 (this.placement == Roo.bootstrap.SplitBar.TOP ?
42283                     endPoint[1] - this.dragSpecs.startPoint[1] :
42284                     this.dragSpecs.startPoint[1] - endPoint[1]
42285                 );
42286         }
42287         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
42288         if(newSize != this.dragSpecs.startSize){
42289             if(this.fireEvent('beforeapply', this, newSize) !== false){
42290                 this.adapter.setElementSize(this, newSize);
42291                 this.fireEvent("moved", this, newSize);
42292                 this.fireEvent("resize", this, newSize);
42293             }
42294         }
42295     },
42296     
42297     /**
42298      * Get the adapter this SplitBar uses
42299      * @return The adapter object
42300      */
42301     getAdapter : function(){
42302         return this.adapter;
42303     },
42304     
42305     /**
42306      * Set the adapter this SplitBar uses
42307      * @param {Object} adapter A SplitBar adapter object
42308      */
42309     setAdapter : function(adapter){
42310         this.adapter = adapter;
42311         this.adapter.init(this);
42312     },
42313     
42314     /**
42315      * Gets the minimum size for the resizing element
42316      * @return {Number} The minimum size
42317      */
42318     getMinimumSize : function(){
42319         return this.minSize;
42320     },
42321     
42322     /**
42323      * Sets the minimum size for the resizing element
42324      * @param {Number} minSize The minimum size
42325      */
42326     setMinimumSize : function(minSize){
42327         this.minSize = minSize;
42328     },
42329     
42330     /**
42331      * Gets the maximum size for the resizing element
42332      * @return {Number} The maximum size
42333      */
42334     getMaximumSize : function(){
42335         return this.maxSize;
42336     },
42337     
42338     /**
42339      * Sets the maximum size for the resizing element
42340      * @param {Number} maxSize The maximum size
42341      */
42342     setMaximumSize : function(maxSize){
42343         this.maxSize = maxSize;
42344     },
42345     
42346     /**
42347      * Sets the initialize size for the resizing element
42348      * @param {Number} size The initial size
42349      */
42350     setCurrentSize : function(size){
42351         var oldAnimate = this.animate;
42352         this.animate = false;
42353         this.adapter.setElementSize(this, size);
42354         this.animate = oldAnimate;
42355     },
42356     
42357     /**
42358      * Destroy this splitbar. 
42359      * @param {Boolean} removeEl True to remove the element
42360      */
42361     destroy : function(removeEl){
42362         if(this.shim){
42363             this.shim.remove();
42364         }
42365         this.dd.unreg();
42366         this.proxy.parentNode.removeChild(this.proxy);
42367         if(removeEl){
42368             this.el.remove();
42369         }
42370     }
42371 });
42372
42373 /**
42374  * @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.
42375  */
42376 Roo.bootstrap.SplitBar.createProxy = function(dir){
42377     var proxy = new Roo.Element(document.createElement("div"));
42378     proxy.unselectable();
42379     var cls = 'roo-splitbar-proxy';
42380     proxy.addClass(cls + ' ' + (dir == Roo.bootstrap.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
42381     document.body.appendChild(proxy.dom);
42382     return proxy.dom;
42383 };
42384
42385 /** 
42386  * @class Roo.bootstrap.SplitBar.BasicLayoutAdapter
42387  * Default Adapter. It assumes the splitter and resizing element are not positioned
42388  * elements and only gets/sets the width of the element. Generally used for table based layouts.
42389  */
42390 Roo.bootstrap.SplitBar.BasicLayoutAdapter = function(){
42391 };
42392
42393 Roo.bootstrap.SplitBar.BasicLayoutAdapter.prototype = {
42394     // do nothing for now
42395     init : function(s){
42396     
42397     },
42398     /**
42399      * Called before drag operations to get the current size of the resizing element. 
42400      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
42401      */
42402      getElementSize : function(s){
42403         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42404             return s.resizingEl.getWidth();
42405         }else{
42406             return s.resizingEl.getHeight();
42407         }
42408     },
42409     
42410     /**
42411      * Called after drag operations to set the size of the resizing element.
42412      * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
42413      * @param {Number} newSize The new size to set
42414      * @param {Function} onComplete A function to be invoked when resizing is complete
42415      */
42416     setElementSize : function(s, newSize, onComplete){
42417         if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
42418             if(!s.animate){
42419                 s.resizingEl.setWidth(newSize);
42420                 if(onComplete){
42421                     onComplete(s, newSize);
42422                 }
42423             }else{
42424                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
42425             }
42426         }else{
42427             
42428             if(!s.animate){
42429                 s.resizingEl.setHeight(newSize);
42430                 if(onComplete){
42431                     onComplete(s, newSize);
42432                 }
42433             }else{
42434                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
42435             }
42436         }
42437     }
42438 };
42439
42440 /** 
42441  *@class Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter
42442  * @extends Roo.bootstrap.SplitBar.BasicLayoutAdapter
42443  * Adapter that  moves the splitter element to align with the resized sizing element. 
42444  * Used with an absolute positioned SplitBar.
42445  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
42446  * document.body, make sure you assign an id to the body element.
42447  */
42448 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter = function(container){
42449     this.basic = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
42450     this.container = Roo.get(container);
42451 };
42452
42453 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter.prototype = {
42454     init : function(s){
42455         this.basic.init(s);
42456     },
42457     
42458     getElementSize : function(s){
42459         return this.basic.getElementSize(s);
42460     },
42461     
42462     setElementSize : function(s, newSize, onComplete){
42463         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
42464     },
42465     
42466     moveSplitter : function(s){
42467         var yes = Roo.bootstrap.SplitBar;
42468         switch(s.placement){
42469             case yes.LEFT:
42470                 s.el.setX(s.resizingEl.getRight());
42471                 break;
42472             case yes.RIGHT:
42473                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
42474                 break;
42475             case yes.TOP:
42476                 s.el.setY(s.resizingEl.getBottom());
42477                 break;
42478             case yes.BOTTOM:
42479                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
42480                 break;
42481         }
42482     }
42483 };
42484
42485 /**
42486  * Orientation constant - Create a vertical SplitBar
42487  * @static
42488  * @type Number
42489  */
42490 Roo.bootstrap.SplitBar.VERTICAL = 1;
42491
42492 /**
42493  * Orientation constant - Create a horizontal SplitBar
42494  * @static
42495  * @type Number
42496  */
42497 Roo.bootstrap.SplitBar.HORIZONTAL = 2;
42498
42499 /**
42500  * Placement constant - The resizing element is to the left of the splitter element
42501  * @static
42502  * @type Number
42503  */
42504 Roo.bootstrap.SplitBar.LEFT = 1;
42505
42506 /**
42507  * Placement constant - The resizing element is to the right of the splitter element
42508  * @static
42509  * @type Number
42510  */
42511 Roo.bootstrap.SplitBar.RIGHT = 2;
42512
42513 /**
42514  * Placement constant - The resizing element is positioned above the splitter element
42515  * @static
42516  * @type Number
42517  */
42518 Roo.bootstrap.SplitBar.TOP = 3;
42519
42520 /**
42521  * Placement constant - The resizing element is positioned under splitter element
42522  * @static
42523  * @type Number
42524  */
42525 Roo.bootstrap.SplitBar.BOTTOM = 4;
42526 /*
42527  * Based on:
42528  * Ext JS Library 1.1.1
42529  * Copyright(c) 2006-2007, Ext JS, LLC.
42530  *
42531  * Originally Released Under LGPL - original licence link has changed is not relivant.
42532  *
42533  * Fork - LGPL
42534  * <script type="text/javascript">
42535  */
42536
42537 /**
42538  * @class Roo.bootstrap.layout.Manager
42539  * @extends Roo.bootstrap.Component
42540  * @abstract
42541  * Base class for layout managers.
42542  */
42543 Roo.bootstrap.layout.Manager = function(config)
42544 {
42545     this.monitorWindowResize = true; // do this before we apply configuration.
42546     
42547     Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config);
42548
42549
42550
42551
42552
42553     /** false to disable window resize monitoring @type Boolean */
42554     
42555     this.regions = {};
42556     this.addEvents({
42557         /**
42558          * @event layout
42559          * Fires when a layout is performed.
42560          * @param {Roo.LayoutManager} this
42561          */
42562         "layout" : true,
42563         /**
42564          * @event regionresized
42565          * Fires when the user resizes a region.
42566          * @param {Roo.LayoutRegion} region The resized region
42567          * @param {Number} newSize The new size (width for east/west, height for north/south)
42568          */
42569         "regionresized" : true,
42570         /**
42571          * @event regioncollapsed
42572          * Fires when a region is collapsed.
42573          * @param {Roo.LayoutRegion} region The collapsed region
42574          */
42575         "regioncollapsed" : true,
42576         /**
42577          * @event regionexpanded
42578          * Fires when a region is expanded.
42579          * @param {Roo.LayoutRegion} region The expanded region
42580          */
42581         "regionexpanded" : true
42582     });
42583     this.updating = false;
42584
42585     if (config.el) {
42586         this.el = Roo.get(config.el);
42587         this.initEvents();
42588     }
42589
42590 };
42591
42592 Roo.extend(Roo.bootstrap.layout.Manager, Roo.bootstrap.Component, {
42593
42594
42595     regions : null,
42596
42597     monitorWindowResize : true,
42598
42599
42600     updating : false,
42601
42602
42603     onRender : function(ct, position)
42604     {
42605         if(!this.el){
42606             this.el = Roo.get(ct);
42607             this.initEvents();
42608         }
42609         //this.fireEvent('render',this);
42610     },
42611
42612
42613     initEvents: function()
42614     {
42615
42616
42617         // ie scrollbar fix
42618         if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
42619             document.body.scroll = "no";
42620         }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
42621             this.el.position('relative');
42622         }
42623         this.id = this.el.id;
42624         this.el.addClass("roo-layout-container");
42625         Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
42626         if(this.el.dom != document.body ) {
42627             this.el.on('resize', this.layout,this);
42628             this.el.on('show', this.layout,this);
42629         }
42630
42631     },
42632
42633     /**
42634      * Returns true if this layout is currently being updated
42635      * @return {Boolean}
42636      */
42637     isUpdating : function(){
42638         return this.updating;
42639     },
42640
42641     /**
42642      * Suspend the LayoutManager from doing auto-layouts while
42643      * making multiple add or remove calls
42644      */
42645     beginUpdate : function(){
42646         this.updating = true;
42647     },
42648
42649     /**
42650      * Restore auto-layouts and optionally disable the manager from performing a layout
42651      * @param {Boolean} noLayout true to disable a layout update
42652      */
42653     endUpdate : function(noLayout){
42654         this.updating = false;
42655         if(!noLayout){
42656             this.layout();
42657         }
42658     },
42659
42660     layout: function(){
42661         // abstract...
42662     },
42663
42664     onRegionResized : function(region, newSize){
42665         this.fireEvent("regionresized", region, newSize);
42666         this.layout();
42667     },
42668
42669     onRegionCollapsed : function(region){
42670         this.fireEvent("regioncollapsed", region);
42671     },
42672
42673     onRegionExpanded : function(region){
42674         this.fireEvent("regionexpanded", region);
42675     },
42676
42677     /**
42678      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
42679      * performs box-model adjustments.
42680      * @return {Object} The size as an object {width: (the width), height: (the height)}
42681      */
42682     getViewSize : function()
42683     {
42684         var size;
42685         if(this.el.dom != document.body){
42686             size = this.el.getSize();
42687         }else{
42688             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
42689         }
42690         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
42691         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
42692         return size;
42693     },
42694
42695     /**
42696      * Returns the Element this layout is bound to.
42697      * @return {Roo.Element}
42698      */
42699     getEl : function(){
42700         return this.el;
42701     },
42702
42703     /**
42704      * Returns the specified region.
42705      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
42706      * @return {Roo.LayoutRegion}
42707      */
42708     getRegion : function(target){
42709         return this.regions[target.toLowerCase()];
42710     },
42711
42712     onWindowResize : function(){
42713         if(this.monitorWindowResize){
42714             this.layout();
42715         }
42716     }
42717 });
42718 /*
42719  * Based on:
42720  * Ext JS Library 1.1.1
42721  * Copyright(c) 2006-2007, Ext JS, LLC.
42722  *
42723  * Originally Released Under LGPL - original licence link has changed is not relivant.
42724  *
42725  * Fork - LGPL
42726  * <script type="text/javascript">
42727  */
42728 /**
42729  * @class Roo.bootstrap.layout.Border
42730  * @extends Roo.bootstrap.layout.Manager
42731  * @children Roo.bootstrap.panel.Content Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Grid
42732  * @parent builder Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Nest Roo.bootstrap.Modal
42733  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
42734  * please see: examples/bootstrap/nested.html<br><br>
42735  
42736 <b>The container the layout is rendered into can be either the body element or any other element.
42737 If it is not the body element, the container needs to either be an absolute positioned element,
42738 or you will need to add "position:relative" to the css of the container.  You will also need to specify
42739 the container size if it is not the body element.</b>
42740
42741 * @constructor
42742 * Create a new Border
42743 * @param {Object} config Configuration options
42744  */
42745 Roo.bootstrap.layout.Border = function(config){
42746     config = config || {};
42747     Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
42748     
42749     
42750     
42751     Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
42752         if(config[region]){
42753             config[region].region = region;
42754             this.addRegion(config[region]);
42755         }
42756     },this);
42757     
42758 };
42759
42760 Roo.bootstrap.layout.Border.regions =  ["center", "north","south","east","west"];
42761
42762 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
42763     
42764         /**
42765          * @cfg {Roo.bootstrap.layout.Region} center region to go in center
42766          */
42767         /**
42768          * @cfg {Roo.bootstrap.layout.Region} west region to go in west
42769          */
42770         /**
42771          * @cfg {Roo.bootstrap.layout.Region} east region to go in east
42772          */
42773         /**
42774          * @cfg {Roo.bootstrap.layout.Region} south region to go in south
42775          */
42776         /**
42777          * @cfg {Roo.bootstrap.layout.Region} north region to go in north
42778          */
42779         
42780         
42781         
42782         
42783     parent : false, // this might point to a 'nest' or a ???
42784     
42785     /**
42786      * Creates and adds a new region if it doesn't already exist.
42787      * @param {String} target The target region key (north, south, east, west or center).
42788      * @param {Object} config The regions config object
42789      * @return {BorderLayoutRegion} The new region
42790      */
42791     addRegion : function(config)
42792     {
42793         if(!this.regions[config.region]){
42794             var r = this.factory(config);
42795             this.bindRegion(r);
42796         }
42797         return this.regions[config.region];
42798     },
42799
42800     // private (kinda)
42801     bindRegion : function(r){
42802         this.regions[r.config.region] = r;
42803         
42804         r.on("visibilitychange",    this.layout, this);
42805         r.on("paneladded",          this.layout, this);
42806         r.on("panelremoved",        this.layout, this);
42807         r.on("invalidated",         this.layout, this);
42808         r.on("resized",             this.onRegionResized, this);
42809         r.on("collapsed",           this.onRegionCollapsed, this);
42810         r.on("expanded",            this.onRegionExpanded, this);
42811     },
42812
42813     /**
42814      * Performs a layout update.
42815      */
42816     layout : function()
42817     {
42818         if(this.updating) {
42819             return;
42820         }
42821         
42822         // render all the rebions if they have not been done alreayd?
42823         Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
42824             if(this.regions[region] && !this.regions[region].bodyEl){
42825                 this.regions[region].onRender(this.el)
42826             }
42827         },this);
42828         
42829         var size = this.getViewSize();
42830         var w = size.width;
42831         var h = size.height;
42832         var centerW = w;
42833         var centerH = h;
42834         var centerY = 0;
42835         var centerX = 0;
42836         //var x = 0, y = 0;
42837
42838         var rs = this.regions;
42839         var north = rs["north"];
42840         var south = rs["south"]; 
42841         var west = rs["west"];
42842         var east = rs["east"];
42843         var center = rs["center"];
42844         //if(this.hideOnLayout){ // not supported anymore
42845             //c.el.setStyle("display", "none");
42846         //}
42847         if(north && north.isVisible()){
42848             var b = north.getBox();
42849             var m = north.getMargins();
42850             b.width = w - (m.left+m.right);
42851             b.x = m.left;
42852             b.y = m.top;
42853             centerY = b.height + b.y + m.bottom;
42854             centerH -= centerY;
42855             north.updateBox(this.safeBox(b));
42856         }
42857         if(south && south.isVisible()){
42858             var b = south.getBox();
42859             var m = south.getMargins();
42860             b.width = w - (m.left+m.right);
42861             b.x = m.left;
42862             var totalHeight = (b.height + m.top + m.bottom);
42863             b.y = h - totalHeight + m.top;
42864             centerH -= totalHeight;
42865             south.updateBox(this.safeBox(b));
42866         }
42867         if(west && west.isVisible()){
42868             var b = west.getBox();
42869             var m = west.getMargins();
42870             b.height = centerH - (m.top+m.bottom);
42871             b.x = m.left;
42872             b.y = centerY + m.top;
42873             var totalWidth = (b.width + m.left + m.right);
42874             centerX += totalWidth;
42875             centerW -= totalWidth;
42876             west.updateBox(this.safeBox(b));
42877         }
42878         if(east && east.isVisible()){
42879             var b = east.getBox();
42880             var m = east.getMargins();
42881             b.height = centerH - (m.top+m.bottom);
42882             var totalWidth = (b.width + m.left + m.right);
42883             b.x = w - totalWidth + m.left;
42884             b.y = centerY + m.top;
42885             centerW -= totalWidth;
42886             east.updateBox(this.safeBox(b));
42887         }
42888         if(center){
42889             var m = center.getMargins();
42890             var centerBox = {
42891                 x: centerX + m.left,
42892                 y: centerY + m.top,
42893                 width: centerW - (m.left+m.right),
42894                 height: centerH - (m.top+m.bottom)
42895             };
42896             //if(this.hideOnLayout){
42897                 //center.el.setStyle("display", "block");
42898             //}
42899             center.updateBox(this.safeBox(centerBox));
42900         }
42901         this.el.repaint();
42902         this.fireEvent("layout", this);
42903     },
42904
42905     // private
42906     safeBox : function(box){
42907         box.width = Math.max(0, box.width);
42908         box.height = Math.max(0, box.height);
42909         return box;
42910     },
42911
42912     /**
42913      * Adds a ContentPanel (or subclass) to this layout.
42914      * @param {String} target The target region key (north, south, east, west or center).
42915      * @param {Roo.ContentPanel} panel The panel to add
42916      * @return {Roo.ContentPanel} The added panel
42917      */
42918     add : function(target, panel){
42919          
42920         target = target.toLowerCase();
42921         return this.regions[target].add(panel);
42922     },
42923
42924     /**
42925      * Remove a ContentPanel (or subclass) to this layout.
42926      * @param {String} target The target region key (north, south, east, west or center).
42927      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
42928      * @return {Roo.ContentPanel} The removed panel
42929      */
42930     remove : function(target, panel){
42931         target = target.toLowerCase();
42932         return this.regions[target].remove(panel);
42933     },
42934
42935     /**
42936      * Searches all regions for a panel with the specified id
42937      * @param {String} panelId
42938      * @return {Roo.ContentPanel} The panel or null if it wasn't found
42939      */
42940     findPanel : function(panelId){
42941         var rs = this.regions;
42942         for(var target in rs){
42943             if(typeof rs[target] != "function"){
42944                 var p = rs[target].getPanel(panelId);
42945                 if(p){
42946                     return p;
42947                 }
42948             }
42949         }
42950         return null;
42951     },
42952
42953     /**
42954      * Searches all regions for a panel with the specified id and activates (shows) it.
42955      * @param {String/ContentPanel} panelId The panels id or the panel itself
42956      * @return {Roo.ContentPanel} The shown panel or null
42957      */
42958     showPanel : function(panelId) {
42959       var rs = this.regions;
42960       for(var target in rs){
42961          var r = rs[target];
42962          if(typeof r != "function"){
42963             if(r.hasPanel(panelId)){
42964                return r.showPanel(panelId);
42965             }
42966          }
42967       }
42968       return null;
42969    },
42970
42971    /**
42972      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
42973      * @param {Roo.state.Provider} provider (optional) An alternate state provider
42974      */
42975    /*
42976     restoreState : function(provider){
42977         if(!provider){
42978             provider = Roo.state.Manager;
42979         }
42980         var sm = new Roo.LayoutStateManager();
42981         sm.init(this, provider);
42982     },
42983 */
42984  
42985  
42986     /**
42987      * Adds a xtype elements to the layout.
42988      * <pre><code>
42989
42990 layout.addxtype({
42991        xtype : 'ContentPanel',
42992        region: 'west',
42993        items: [ .... ]
42994    }
42995 );
42996
42997 layout.addxtype({
42998         xtype : 'NestedLayoutPanel',
42999         region: 'west',
43000         layout: {
43001            center: { },
43002            west: { }   
43003         },
43004         items : [ ... list of content panels or nested layout panels.. ]
43005    }
43006 );
43007 </code></pre>
43008      * @param {Object} cfg Xtype definition of item to add.
43009      */
43010     addxtype : function(cfg)
43011     {
43012         // basically accepts a pannel...
43013         // can accept a layout region..!?!?
43014         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
43015         
43016         
43017         // theory?  children can only be panels??
43018         
43019         //if (!cfg.xtype.match(/Panel$/)) {
43020         //    return false;
43021         //}
43022         var ret = false;
43023         
43024         if (typeof(cfg.region) == 'undefined') {
43025             Roo.log("Failed to add Panel, region was not set");
43026             Roo.log(cfg);
43027             return false;
43028         }
43029         var region = cfg.region;
43030         delete cfg.region;
43031         
43032           
43033         var xitems = [];
43034         if (cfg.items) {
43035             xitems = cfg.items;
43036             delete cfg.items;
43037         }
43038         var nb = false;
43039         
43040         if ( region == 'center') {
43041             Roo.log("Center: " + cfg.title);
43042         }
43043         
43044         
43045         switch(cfg.xtype) 
43046         {
43047             case 'Content':  // ContentPanel (el, cfg)
43048             case 'Scroll':  // ContentPanel (el, cfg)
43049             case 'View': 
43050                 cfg.autoCreate = cfg.autoCreate || true;
43051                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43052                 //} else {
43053                 //    var el = this.el.createChild();
43054                 //    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
43055                 //}
43056                 
43057                 this.add(region, ret);
43058                 break;
43059             
43060             /*
43061             case 'TreePanel': // our new panel!
43062                 cfg.el = this.el.createChild();
43063                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
43064                 this.add(region, ret);
43065                 break;
43066             */
43067             
43068             case 'Nest': 
43069                 // create a new Layout (which is  a Border Layout...
43070                 
43071                 var clayout = cfg.layout;
43072                 clayout.el  = this.el.createChild();
43073                 clayout.items   = clayout.items  || [];
43074                 
43075                 delete cfg.layout;
43076                 
43077                 // replace this exitems with the clayout ones..
43078                 xitems = clayout.items;
43079                  
43080                 // force background off if it's in center...
43081                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
43082                     cfg.background = false;
43083                 }
43084                 cfg.layout  = new Roo.bootstrap.layout.Border(clayout);
43085                 
43086                 
43087                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43088                 //console.log('adding nested layout panel '  + cfg.toSource());
43089                 this.add(region, ret);
43090                 nb = {}; /// find first...
43091                 break;
43092             
43093             case 'Grid':
43094                 
43095                 // needs grid and region
43096                 
43097                 //var el = this.getRegion(region).el.createChild();
43098                 /*
43099                  *var el = this.el.createChild();
43100                 // create the grid first...
43101                 cfg.grid.container = el;
43102                 cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
43103                 */
43104                 
43105                 if (region == 'center' && this.active ) {
43106                     cfg.background = false;
43107                 }
43108                 
43109                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
43110                 
43111                 this.add(region, ret);
43112                 /*
43113                 if (cfg.background) {
43114                     // render grid on panel activation (if panel background)
43115                     ret.on('activate', function(gp) {
43116                         if (!gp.grid.rendered) {
43117                     //        gp.grid.render(el);
43118                         }
43119                     });
43120                 } else {
43121                   //  cfg.grid.render(el);
43122                 }
43123                 */
43124                 break;
43125            
43126            
43127             case 'Border': // it can get called on it'self... - might need to check if this is fixed?
43128                 // it was the old xcomponent building that caused this before.
43129                 // espeically if border is the top element in the tree.
43130                 ret = this;
43131                 break; 
43132                 
43133                     
43134                 
43135                 
43136                 
43137             default:
43138                 /*
43139                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
43140                     
43141                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
43142                     this.add(region, ret);
43143                 } else {
43144                 */
43145                     Roo.log(cfg);
43146                     throw "Can not add '" + cfg.xtype + "' to Border";
43147                     return null;
43148              
43149                                 
43150              
43151         }
43152         this.beginUpdate();
43153         // add children..
43154         var region = '';
43155         var abn = {};
43156         Roo.each(xitems, function(i)  {
43157             region = nb && i.region ? i.region : false;
43158             
43159             var add = ret.addxtype(i);
43160            
43161             if (region) {
43162                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
43163                 if (!i.background) {
43164                     abn[region] = nb[region] ;
43165                 }
43166             }
43167             
43168         });
43169         this.endUpdate();
43170
43171         // make the last non-background panel active..
43172         //if (nb) { Roo.log(abn); }
43173         if (nb) {
43174             
43175             for(var r in abn) {
43176                 region = this.getRegion(r);
43177                 if (region) {
43178                     // tried using nb[r], but it does not work..
43179                      
43180                     region.showPanel(abn[r]);
43181                    
43182                 }
43183             }
43184         }
43185         return ret;
43186         
43187     },
43188     
43189     
43190 // private
43191     factory : function(cfg)
43192     {
43193         
43194         var validRegions = Roo.bootstrap.layout.Border.regions;
43195
43196         var target = cfg.region;
43197         cfg.mgr = this;
43198         
43199         var r = Roo.bootstrap.layout;
43200         Roo.log(target);
43201         switch(target){
43202             case "north":
43203                 return new r.North(cfg);
43204             case "south":
43205                 return new r.South(cfg);
43206             case "east":
43207                 return new r.East(cfg);
43208             case "west":
43209                 return new r.West(cfg);
43210             case "center":
43211                 return new r.Center(cfg);
43212         }
43213         throw 'Layout region "'+target+'" not supported.';
43214     }
43215     
43216     
43217 });
43218  /*
43219  * Based on:
43220  * Ext JS Library 1.1.1
43221  * Copyright(c) 2006-2007, Ext JS, LLC.
43222  *
43223  * Originally Released Under LGPL - original licence link has changed is not relivant.
43224  *
43225  * Fork - LGPL
43226  * <script type="text/javascript">
43227  */
43228  
43229 /**
43230  * @class Roo.bootstrap.layout.Basic
43231  * @extends Roo.util.Observable
43232  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
43233  * and does not have a titlebar, tabs or any other features. All it does is size and position 
43234  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
43235  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
43236  * @cfg {string}   region  the region that it inhabits..
43237  * @cfg {bool}   skipConfig skip config?
43238  * 
43239
43240  */
43241 Roo.bootstrap.layout.Basic = function(config){
43242     
43243     this.mgr = config.mgr;
43244     
43245     this.position = config.region;
43246     
43247     var skipConfig = config.skipConfig;
43248     
43249     this.events = {
43250         /**
43251          * @scope Roo.BasicLayoutRegion
43252          */
43253         
43254         /**
43255          * @event beforeremove
43256          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
43257          * @param {Roo.LayoutRegion} this
43258          * @param {Roo.ContentPanel} panel The panel
43259          * @param {Object} e The cancel event object
43260          */
43261         "beforeremove" : true,
43262         /**
43263          * @event invalidated
43264          * Fires when the layout for this region is changed.
43265          * @param {Roo.LayoutRegion} this
43266          */
43267         "invalidated" : true,
43268         /**
43269          * @event visibilitychange
43270          * Fires when this region is shown or hidden 
43271          * @param {Roo.LayoutRegion} this
43272          * @param {Boolean} visibility true or false
43273          */
43274         "visibilitychange" : true,
43275         /**
43276          * @event paneladded
43277          * Fires when a panel is added. 
43278          * @param {Roo.LayoutRegion} this
43279          * @param {Roo.ContentPanel} panel The panel
43280          */
43281         "paneladded" : true,
43282         /**
43283          * @event panelremoved
43284          * Fires when a panel is removed. 
43285          * @param {Roo.LayoutRegion} this
43286          * @param {Roo.ContentPanel} panel The panel
43287          */
43288         "panelremoved" : true,
43289         /**
43290          * @event beforecollapse
43291          * Fires when this region before collapse.
43292          * @param {Roo.LayoutRegion} this
43293          */
43294         "beforecollapse" : true,
43295         /**
43296          * @event collapsed
43297          * Fires when this region is collapsed.
43298          * @param {Roo.LayoutRegion} this
43299          */
43300         "collapsed" : true,
43301         /**
43302          * @event expanded
43303          * Fires when this region is expanded.
43304          * @param {Roo.LayoutRegion} this
43305          */
43306         "expanded" : true,
43307         /**
43308          * @event slideshow
43309          * Fires when this region is slid into view.
43310          * @param {Roo.LayoutRegion} this
43311          */
43312         "slideshow" : true,
43313         /**
43314          * @event slidehide
43315          * Fires when this region slides out of view. 
43316          * @param {Roo.LayoutRegion} this
43317          */
43318         "slidehide" : true,
43319         /**
43320          * @event panelactivated
43321          * Fires when a panel is activated. 
43322          * @param {Roo.LayoutRegion} this
43323          * @param {Roo.ContentPanel} panel The activated panel
43324          */
43325         "panelactivated" : true,
43326         /**
43327          * @event resized
43328          * Fires when the user resizes this region. 
43329          * @param {Roo.LayoutRegion} this
43330          * @param {Number} newSize The new size (width for east/west, height for north/south)
43331          */
43332         "resized" : true
43333     };
43334     /** A collection of panels in this region. @type Roo.util.MixedCollection */
43335     this.panels = new Roo.util.MixedCollection();
43336     this.panels.getKey = this.getPanelId.createDelegate(this);
43337     this.box = null;
43338     this.activePanel = null;
43339     // ensure listeners are added...
43340     
43341     if (config.listeners || config.events) {
43342         Roo.bootstrap.layout.Basic.superclass.constructor.call(this, {
43343             listeners : config.listeners || {},
43344             events : config.events || {}
43345         });
43346     }
43347     
43348     if(skipConfig !== true){
43349         this.applyConfig(config);
43350     }
43351 };
43352
43353 Roo.extend(Roo.bootstrap.layout.Basic, Roo.util.Observable,
43354 {
43355     getPanelId : function(p){
43356         return p.getId();
43357     },
43358     
43359     applyConfig : function(config){
43360         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
43361         this.config = config;
43362         
43363     },
43364     
43365     /**
43366      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
43367      * the width, for horizontal (north, south) the height.
43368      * @param {Number} newSize The new width or height
43369      */
43370     resizeTo : function(newSize){
43371         var el = this.el ? this.el :
43372                  (this.activePanel ? this.activePanel.getEl() : null);
43373         if(el){
43374             switch(this.position){
43375                 case "east":
43376                 case "west":
43377                     el.setWidth(newSize);
43378                     this.fireEvent("resized", this, newSize);
43379                 break;
43380                 case "north":
43381                 case "south":
43382                     el.setHeight(newSize);
43383                     this.fireEvent("resized", this, newSize);
43384                 break;                
43385             }
43386         }
43387     },
43388     
43389     getBox : function(){
43390         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
43391     },
43392     
43393     getMargins : function(){
43394         return this.margins;
43395     },
43396     
43397     updateBox : function(box){
43398         this.box = box;
43399         var el = this.activePanel.getEl();
43400         el.dom.style.left = box.x + "px";
43401         el.dom.style.top = box.y + "px";
43402         this.activePanel.setSize(box.width, box.height);
43403     },
43404     
43405     /**
43406      * Returns the container element for this region.
43407      * @return {Roo.Element}
43408      */
43409     getEl : function(){
43410         return this.activePanel;
43411     },
43412     
43413     /**
43414      * Returns true if this region is currently visible.
43415      * @return {Boolean}
43416      */
43417     isVisible : function(){
43418         return this.activePanel ? true : false;
43419     },
43420     
43421     setActivePanel : function(panel){
43422         panel = this.getPanel(panel);
43423         if(this.activePanel && this.activePanel != panel){
43424             this.activePanel.setActiveState(false);
43425             this.activePanel.getEl().setLeftTop(-10000,-10000);
43426         }
43427         this.activePanel = panel;
43428         panel.setActiveState(true);
43429         if(this.box){
43430             panel.setSize(this.box.width, this.box.height);
43431         }
43432         this.fireEvent("panelactivated", this, panel);
43433         this.fireEvent("invalidated");
43434     },
43435     
43436     /**
43437      * Show the specified panel.
43438      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
43439      * @return {Roo.ContentPanel} The shown panel or null
43440      */
43441     showPanel : function(panel){
43442         panel = this.getPanel(panel);
43443         if(panel){
43444             this.setActivePanel(panel);
43445         }
43446         return panel;
43447     },
43448     
43449     /**
43450      * Get the active panel for this region.
43451      * @return {Roo.ContentPanel} The active panel or null
43452      */
43453     getActivePanel : function(){
43454         return this.activePanel;
43455     },
43456     
43457     /**
43458      * Add the passed ContentPanel(s)
43459      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
43460      * @return {Roo.ContentPanel} The panel added (if only one was added)
43461      */
43462     add : function(panel){
43463         if(arguments.length > 1){
43464             for(var i = 0, len = arguments.length; i < len; i++) {
43465                 this.add(arguments[i]);
43466             }
43467             return null;
43468         }
43469         if(this.hasPanel(panel)){
43470             this.showPanel(panel);
43471             return panel;
43472         }
43473         var el = panel.getEl();
43474         if(el.dom.parentNode != this.mgr.el.dom){
43475             this.mgr.el.dom.appendChild(el.dom);
43476         }
43477         if(panel.setRegion){
43478             panel.setRegion(this);
43479         }
43480         this.panels.add(panel);
43481         el.setStyle("position", "absolute");
43482         if(!panel.background){
43483             this.setActivePanel(panel);
43484             if(this.config.initialSize && this.panels.getCount()==1){
43485                 this.resizeTo(this.config.initialSize);
43486             }
43487         }
43488         this.fireEvent("paneladded", this, panel);
43489         return panel;
43490     },
43491     
43492     /**
43493      * Returns true if the panel is in this region.
43494      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43495      * @return {Boolean}
43496      */
43497     hasPanel : function(panel){
43498         if(typeof panel == "object"){ // must be panel obj
43499             panel = panel.getId();
43500         }
43501         return this.getPanel(panel) ? true : false;
43502     },
43503     
43504     /**
43505      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
43506      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43507      * @param {Boolean} preservePanel Overrides the config preservePanel option
43508      * @return {Roo.ContentPanel} The panel that was removed
43509      */
43510     remove : function(panel, preservePanel){
43511         panel = this.getPanel(panel);
43512         if(!panel){
43513             return null;
43514         }
43515         var e = {};
43516         this.fireEvent("beforeremove", this, panel, e);
43517         if(e.cancel === true){
43518             return null;
43519         }
43520         var panelId = panel.getId();
43521         this.panels.removeKey(panelId);
43522         return panel;
43523     },
43524     
43525     /**
43526      * Returns the panel specified or null if it's not in this region.
43527      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
43528      * @return {Roo.ContentPanel}
43529      */
43530     getPanel : function(id){
43531         if(typeof id == "object"){ // must be panel obj
43532             return id;
43533         }
43534         return this.panels.get(id);
43535     },
43536     
43537     /**
43538      * Returns this regions position (north/south/east/west/center).
43539      * @return {String} 
43540      */
43541     getPosition: function(){
43542         return this.position;    
43543     }
43544 });/*
43545  * Based on:
43546  * Ext JS Library 1.1.1
43547  * Copyright(c) 2006-2007, Ext JS, LLC.
43548  *
43549  * Originally Released Under LGPL - original licence link has changed is not relivant.
43550  *
43551  * Fork - LGPL
43552  * <script type="text/javascript">
43553  */
43554  
43555 /**
43556  * @class Roo.bootstrap.layout.Region
43557  * @extends Roo.bootstrap.layout.Basic
43558  * This class represents a region in a layout manager.
43559  
43560  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
43561  * @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})
43562  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
43563  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
43564  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
43565  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
43566  * @cfg {String}    title           The title for the region (overrides panel titles)
43567  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
43568  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
43569  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
43570  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
43571  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
43572  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
43573  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
43574  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
43575  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
43576  * @cfg {String}    overflow       (hidden|visible) if you have menus in the region, then you need to set this to visible.
43577
43578  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
43579  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
43580  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
43581  * @cfg {Number}    width           For East/West panels
43582  * @cfg {Number}    height          For North/South panels
43583  * @cfg {Boolean}   split           To show the splitter
43584  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
43585  * 
43586  * @cfg {string}   cls             Extra CSS classes to add to region
43587  * 
43588  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
43589  * @cfg {string}   region  the region that it inhabits..
43590  *
43591
43592  * @xxxcfg {Boolean}   collapsible     DISABLED False to disable collapsing (defaults to true)
43593  * @xxxcfg {Boolean}   collapsed       DISABLED True to set the initial display to collapsed (defaults to false)
43594
43595  * @xxxcfg {String}    collapsedTitle  DISABLED Optional string message to display in the collapsed block of a north or south region
43596  * @xxxxcfg {Boolean}   floatable       DISABLED False to disable floating (defaults to true)
43597  * @xxxxcfg {Boolean}   showPin         True to show a pin button NOT SUPPORTED YET
43598  */
43599 Roo.bootstrap.layout.Region = function(config)
43600 {
43601     this.applyConfig(config);
43602
43603     var mgr = config.mgr;
43604     var pos = config.region;
43605     config.skipConfig = true;
43606     Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
43607     
43608     if (mgr.el) {
43609         this.onRender(mgr.el);   
43610     }
43611      
43612     this.visible = true;
43613     this.collapsed = false;
43614     this.unrendered_panels = [];
43615 };
43616
43617 Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
43618
43619     position: '', // set by wrapper (eg. north/south etc..)
43620     unrendered_panels : null,  // unrendered panels.
43621     
43622     tabPosition : false,
43623     
43624     mgr: false, // points to 'Border'
43625     
43626     
43627     createBody : function(){
43628         /** This region's body element 
43629         * @type Roo.Element */
43630         this.bodyEl = this.el.createChild({
43631                 tag: "div",
43632                 cls: "roo-layout-panel-body tab-content" // bootstrap added...
43633         });
43634     },
43635
43636     onRender: function(ctr, pos)
43637     {
43638         var dh = Roo.DomHelper;
43639         /** This region's container element 
43640         * @type Roo.Element */
43641         this.el = dh.append(ctr.dom, {
43642                 tag: "div",
43643                 cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
43644             }, true);
43645         /** This region's title element 
43646         * @type Roo.Element */
43647     
43648         this.titleEl = dh.append(this.el.dom,  {
43649                 tag: "div",
43650                 unselectable: "on",
43651                 cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
43652                 children:[
43653                     {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
43654                     {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
43655                 ]
43656             }, true);
43657         
43658         this.titleEl.enableDisplayMode();
43659         /** This region's title text element 
43660         * @type HTMLElement */
43661         this.titleTextEl = this.titleEl.dom.firstChild;
43662         this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
43663         /*
43664         this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
43665         this.closeBtn.enableDisplayMode();
43666         this.closeBtn.on("click", this.closeClicked, this);
43667         this.closeBtn.hide();
43668     */
43669         this.createBody(this.config);
43670         if(this.config.hideWhenEmpty){
43671             this.hide();
43672             this.on("paneladded", this.validateVisibility, this);
43673             this.on("panelremoved", this.validateVisibility, this);
43674         }
43675         if(this.autoScroll){
43676             this.bodyEl.setStyle("overflow", "auto");
43677         }else{
43678             this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
43679         }
43680         //if(c.titlebar !== false){
43681             if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
43682                 this.titleEl.hide();
43683             }else{
43684                 this.titleEl.show();
43685                 if(this.config.title){
43686                     this.titleTextEl.innerHTML = this.config.title;
43687                 }
43688             }
43689         //}
43690         if(this.config.collapsed){
43691             this.collapse(true);
43692         }
43693         if(this.config.hidden){
43694             this.hide();
43695         }
43696         
43697         if (this.unrendered_panels && this.unrendered_panels.length) {
43698             for (var i =0;i< this.unrendered_panels.length; i++) {
43699                 this.add(this.unrendered_panels[i]);
43700             }
43701             this.unrendered_panels = null;
43702             
43703         }
43704         
43705     },
43706     
43707     applyConfig : function(c)
43708     {
43709         /*
43710          *if(c.collapsible && this.position != "center" && !this.collapsedEl){
43711             var dh = Roo.DomHelper;
43712             if(c.titlebar !== false){
43713                 this.collapseBtn = this.createTool(this.tools.dom, "roo-layout-collapse-"+this.position);
43714                 this.collapseBtn.on("click", this.collapse, this);
43715                 this.collapseBtn.enableDisplayMode();
43716                 /*
43717                 if(c.showPin === true || this.showPin){
43718                     this.stickBtn = this.createTool(this.tools.dom, "roo-layout-stick");
43719                     this.stickBtn.enableDisplayMode();
43720                     this.stickBtn.on("click", this.expand, this);
43721                     this.stickBtn.hide();
43722                 }
43723                 
43724             }
43725             */
43726             /** This region's collapsed element
43727             * @type Roo.Element */
43728             /*
43729              *
43730             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
43731                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
43732             ]}, true);
43733             
43734             if(c.floatable !== false){
43735                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
43736                this.collapsedEl.on("click", this.collapseClick, this);
43737             }
43738
43739             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
43740                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
43741                    id: "message", unselectable: "on", style:{"float":"left"}});
43742                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
43743              }
43744             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
43745             this.expandBtn.on("click", this.expand, this);
43746             
43747         }
43748         
43749         if(this.collapseBtn){
43750             this.collapseBtn.setVisible(c.collapsible == true);
43751         }
43752         
43753         this.cmargins = c.cmargins || this.cmargins ||
43754                          (this.position == "west" || this.position == "east" ?
43755                              {top: 0, left: 2, right:2, bottom: 0} :
43756                              {top: 2, left: 0, right:0, bottom: 2});
43757         */
43758         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
43759         
43760         
43761         this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
43762         
43763         this.autoScroll = c.autoScroll || false;
43764         
43765         
43766        
43767         
43768         this.duration = c.duration || .30;
43769         this.slideDuration = c.slideDuration || .45;
43770         this.config = c;
43771        
43772     },
43773     /**
43774      * Returns true if this region is currently visible.
43775      * @return {Boolean}
43776      */
43777     isVisible : function(){
43778         return this.visible;
43779     },
43780
43781     /**
43782      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
43783      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
43784      */
43785     //setCollapsedTitle : function(title){
43786     //    title = title || "&#160;";
43787      //   if(this.collapsedTitleTextEl){
43788       //      this.collapsedTitleTextEl.innerHTML = title;
43789        // }
43790     //},
43791
43792     getBox : function(){
43793         var b;
43794       //  if(!this.collapsed){
43795             b = this.el.getBox(false, true);
43796        // }else{
43797           //  b = this.collapsedEl.getBox(false, true);
43798         //}
43799         return b;
43800     },
43801
43802     getMargins : function(){
43803         return this.margins;
43804         //return this.collapsed ? this.cmargins : this.margins;
43805     },
43806 /*
43807     highlight : function(){
43808         this.el.addClass("x-layout-panel-dragover");
43809     },
43810
43811     unhighlight : function(){
43812         this.el.removeClass("x-layout-panel-dragover");
43813     },
43814 */
43815     updateBox : function(box)
43816     {
43817         if (!this.bodyEl) {
43818             return; // not rendered yet..
43819         }
43820         
43821         this.box = box;
43822         if(!this.collapsed){
43823             this.el.dom.style.left = box.x + "px";
43824             this.el.dom.style.top = box.y + "px";
43825             this.updateBody(box.width, box.height);
43826         }else{
43827             this.collapsedEl.dom.style.left = box.x + "px";
43828             this.collapsedEl.dom.style.top = box.y + "px";
43829             this.collapsedEl.setSize(box.width, box.height);
43830         }
43831         if(this.tabs){
43832             this.tabs.autoSizeTabs();
43833         }
43834     },
43835
43836     updateBody : function(w, h)
43837     {
43838         if(w !== null){
43839             this.el.setWidth(w);
43840             w -= this.el.getBorderWidth("rl");
43841             if(this.config.adjustments){
43842                 w += this.config.adjustments[0];
43843             }
43844         }
43845         if(h !== null && h > 0){
43846             this.el.setHeight(h);
43847             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
43848             h -= this.el.getBorderWidth("tb");
43849             if(this.config.adjustments){
43850                 h += this.config.adjustments[1];
43851             }
43852             this.bodyEl.setHeight(h);
43853             if(this.tabs){
43854                 h = this.tabs.syncHeight(h);
43855             }
43856         }
43857         if(this.panelSize){
43858             w = w !== null ? w : this.panelSize.width;
43859             h = h !== null ? h : this.panelSize.height;
43860         }
43861         if(this.activePanel){
43862             var el = this.activePanel.getEl();
43863             w = w !== null ? w : el.getWidth();
43864             h = h !== null ? h : el.getHeight();
43865             this.panelSize = {width: w, height: h};
43866             this.activePanel.setSize(w, h);
43867         }
43868         if(Roo.isIE && this.tabs){
43869             this.tabs.el.repaint();
43870         }
43871     },
43872
43873     /**
43874      * Returns the container element for this region.
43875      * @return {Roo.Element}
43876      */
43877     getEl : function(){
43878         return this.el;
43879     },
43880
43881     /**
43882      * Hides this region.
43883      */
43884     hide : function(){
43885         //if(!this.collapsed){
43886             this.el.dom.style.left = "-2000px";
43887             this.el.hide();
43888         //}else{
43889          //   this.collapsedEl.dom.style.left = "-2000px";
43890          //   this.collapsedEl.hide();
43891        // }
43892         this.visible = false;
43893         this.fireEvent("visibilitychange", this, false);
43894     },
43895
43896     /**
43897      * Shows this region if it was previously hidden.
43898      */
43899     show : function(){
43900         //if(!this.collapsed){
43901             this.el.show();
43902         //}else{
43903         //    this.collapsedEl.show();
43904        // }
43905         this.visible = true;
43906         this.fireEvent("visibilitychange", this, true);
43907     },
43908 /*
43909     closeClicked : function(){
43910         if(this.activePanel){
43911             this.remove(this.activePanel);
43912         }
43913     },
43914
43915     collapseClick : function(e){
43916         if(this.isSlid){
43917            e.stopPropagation();
43918            this.slideIn();
43919         }else{
43920            e.stopPropagation();
43921            this.slideOut();
43922         }
43923     },
43924 */
43925     /**
43926      * Collapses this region.
43927      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
43928      */
43929     /*
43930     collapse : function(skipAnim, skipCheck = false){
43931         if(this.collapsed) {
43932             return;
43933         }
43934         
43935         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
43936             
43937             this.collapsed = true;
43938             if(this.split){
43939                 this.split.el.hide();
43940             }
43941             if(this.config.animate && skipAnim !== true){
43942                 this.fireEvent("invalidated", this);
43943                 this.animateCollapse();
43944             }else{
43945                 this.el.setLocation(-20000,-20000);
43946                 this.el.hide();
43947                 this.collapsedEl.show();
43948                 this.fireEvent("collapsed", this);
43949                 this.fireEvent("invalidated", this);
43950             }
43951         }
43952         
43953     },
43954 */
43955     animateCollapse : function(){
43956         // overridden
43957     },
43958
43959     /**
43960      * Expands this region if it was previously collapsed.
43961      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
43962      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
43963      */
43964     /*
43965     expand : function(e, skipAnim){
43966         if(e) {
43967             e.stopPropagation();
43968         }
43969         if(!this.collapsed || this.el.hasActiveFx()) {
43970             return;
43971         }
43972         if(this.isSlid){
43973             this.afterSlideIn();
43974             skipAnim = true;
43975         }
43976         this.collapsed = false;
43977         if(this.config.animate && skipAnim !== true){
43978             this.animateExpand();
43979         }else{
43980             this.el.show();
43981             if(this.split){
43982                 this.split.el.show();
43983             }
43984             this.collapsedEl.setLocation(-2000,-2000);
43985             this.collapsedEl.hide();
43986             this.fireEvent("invalidated", this);
43987             this.fireEvent("expanded", this);
43988         }
43989     },
43990 */
43991     animateExpand : function(){
43992         // overridden
43993     },
43994
43995     initTabs : function()
43996     {
43997         //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
43998         
43999         var ts = new Roo.bootstrap.panel.Tabs({
44000             el: this.bodyEl.dom,
44001             region : this,
44002             tabPosition: this.tabPosition ? this.tabPosition  : 'top',
44003             disableTooltips: this.config.disableTabTips,
44004             toolbar : this.config.toolbar
44005         });
44006         
44007         if(this.config.hideTabs){
44008             ts.stripWrap.setDisplayed(false);
44009         }
44010         this.tabs = ts;
44011         ts.resizeTabs = this.config.resizeTabs === true;
44012         ts.minTabWidth = this.config.minTabWidth || 40;
44013         ts.maxTabWidth = this.config.maxTabWidth || 250;
44014         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
44015         ts.monitorResize = false;
44016         //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
44017         ts.bodyEl.addClass('roo-layout-tabs-body');
44018         this.panels.each(this.initPanelAsTab, this);
44019     },
44020
44021     initPanelAsTab : function(panel){
44022         var ti = this.tabs.addTab(
44023             panel.getEl().id,
44024             panel.getTitle(),
44025             null,
44026             this.config.closeOnTab && panel.isClosable(),
44027             panel.tpl
44028         );
44029         if(panel.tabTip !== undefined){
44030             ti.setTooltip(panel.tabTip);
44031         }
44032         ti.on("activate", function(){
44033               this.setActivePanel(panel);
44034         }, this);
44035         
44036         if(this.config.closeOnTab){
44037             ti.on("beforeclose", function(t, e){
44038                 e.cancel = true;
44039                 this.remove(panel);
44040             }, this);
44041         }
44042         
44043         panel.tabItem = ti;
44044         
44045         return ti;
44046     },
44047
44048     updatePanelTitle : function(panel, title)
44049     {
44050         if(this.activePanel == panel){
44051             this.updateTitle(title);
44052         }
44053         if(this.tabs){
44054             var ti = this.tabs.getTab(panel.getEl().id);
44055             ti.setText(title);
44056             if(panel.tabTip !== undefined){
44057                 ti.setTooltip(panel.tabTip);
44058             }
44059         }
44060     },
44061
44062     updateTitle : function(title){
44063         if(this.titleTextEl && !this.config.title){
44064             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
44065         }
44066     },
44067
44068     setActivePanel : function(panel)
44069     {
44070         panel = this.getPanel(panel);
44071         if(this.activePanel && this.activePanel != panel){
44072             if(this.activePanel.setActiveState(false) === false){
44073                 return;
44074             }
44075         }
44076         this.activePanel = panel;
44077         panel.setActiveState(true);
44078         if(this.panelSize){
44079             panel.setSize(this.panelSize.width, this.panelSize.height);
44080         }
44081         if(this.closeBtn){
44082             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
44083         }
44084         this.updateTitle(panel.getTitle());
44085         if(this.tabs){
44086             this.fireEvent("invalidated", this);
44087         }
44088         this.fireEvent("panelactivated", this, panel);
44089     },
44090
44091     /**
44092      * Shows the specified panel.
44093      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
44094      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
44095      */
44096     showPanel : function(panel)
44097     {
44098         panel = this.getPanel(panel);
44099         if(panel){
44100             if(this.tabs){
44101                 var tab = this.tabs.getTab(panel.getEl().id);
44102                 if(tab.isHidden()){
44103                     this.tabs.unhideTab(tab.id);
44104                 }
44105                 tab.activate();
44106             }else{
44107                 this.setActivePanel(panel);
44108             }
44109         }
44110         return panel;
44111     },
44112
44113     /**
44114      * Get the active panel for this region.
44115      * @return {Roo.ContentPanel} The active panel or null
44116      */
44117     getActivePanel : function(){
44118         return this.activePanel;
44119     },
44120
44121     validateVisibility : function(){
44122         if(this.panels.getCount() < 1){
44123             this.updateTitle("&#160;");
44124             this.closeBtn.hide();
44125             this.hide();
44126         }else{
44127             if(!this.isVisible()){
44128                 this.show();
44129             }
44130         }
44131     },
44132
44133     /**
44134      * Adds the passed ContentPanel(s) to this region.
44135      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
44136      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
44137      */
44138     add : function(panel)
44139     {
44140         if(arguments.length > 1){
44141             for(var i = 0, len = arguments.length; i < len; i++) {
44142                 this.add(arguments[i]);
44143             }
44144             return null;
44145         }
44146         
44147         // if we have not been rendered yet, then we can not really do much of this..
44148         if (!this.bodyEl) {
44149             this.unrendered_panels.push(panel);
44150             return panel;
44151         }
44152         
44153         
44154         
44155         
44156         if(this.hasPanel(panel)){
44157             this.showPanel(panel);
44158             return panel;
44159         }
44160         panel.setRegion(this);
44161         this.panels.add(panel);
44162        /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
44163             // sinle panel - no tab...?? would it not be better to render it with the tabs,
44164             // and hide them... ???
44165             this.bodyEl.dom.appendChild(panel.getEl().dom);
44166             if(panel.background !== true){
44167                 this.setActivePanel(panel);
44168             }
44169             this.fireEvent("paneladded", this, panel);
44170             return panel;
44171         }
44172         */
44173         if(!this.tabs){
44174             this.initTabs();
44175         }else{
44176             this.initPanelAsTab(panel);
44177         }
44178         
44179         
44180         if(panel.background !== true){
44181             this.tabs.activate(panel.getEl().id);
44182         }
44183         this.fireEvent("paneladded", this, panel);
44184         return panel;
44185     },
44186
44187     /**
44188      * Hides the tab for the specified panel.
44189      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44190      */
44191     hidePanel : function(panel){
44192         if(this.tabs && (panel = this.getPanel(panel))){
44193             this.tabs.hideTab(panel.getEl().id);
44194         }
44195     },
44196
44197     /**
44198      * Unhides the tab for a previously hidden panel.
44199      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44200      */
44201     unhidePanel : function(panel){
44202         if(this.tabs && (panel = this.getPanel(panel))){
44203             this.tabs.unhideTab(panel.getEl().id);
44204         }
44205     },
44206
44207     clearPanels : function(){
44208         while(this.panels.getCount() > 0){
44209              this.remove(this.panels.first());
44210         }
44211     },
44212
44213     /**
44214      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
44215      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
44216      * @param {Boolean} preservePanel Overrides the config preservePanel option
44217      * @return {Roo.ContentPanel} The panel that was removed
44218      */
44219     remove : function(panel, preservePanel)
44220     {
44221         panel = this.getPanel(panel);
44222         if(!panel){
44223             return null;
44224         }
44225         var e = {};
44226         this.fireEvent("beforeremove", this, panel, e);
44227         if(e.cancel === true){
44228             return null;
44229         }
44230         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
44231         var panelId = panel.getId();
44232         this.panels.removeKey(panelId);
44233         if(preservePanel){
44234             document.body.appendChild(panel.getEl().dom);
44235         }
44236         if(this.tabs){
44237             this.tabs.removeTab(panel.getEl().id);
44238         }else if (!preservePanel){
44239             this.bodyEl.dom.removeChild(panel.getEl().dom);
44240         }
44241         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
44242             var p = this.panels.first();
44243             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
44244             tempEl.appendChild(p.getEl().dom);
44245             this.bodyEl.update("");
44246             this.bodyEl.dom.appendChild(p.getEl().dom);
44247             tempEl = null;
44248             this.updateTitle(p.getTitle());
44249             this.tabs = null;
44250             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
44251             this.setActivePanel(p);
44252         }
44253         panel.setRegion(null);
44254         if(this.activePanel == panel){
44255             this.activePanel = null;
44256         }
44257         if(this.config.autoDestroy !== false && preservePanel !== true){
44258             try{panel.destroy();}catch(e){}
44259         }
44260         this.fireEvent("panelremoved", this, panel);
44261         return panel;
44262     },
44263
44264     /**
44265      * Returns the TabPanel component used by this region
44266      * @return {Roo.TabPanel}
44267      */
44268     getTabs : function(){
44269         return this.tabs;
44270     },
44271
44272     createTool : function(parentEl, className){
44273         var btn = Roo.DomHelper.append(parentEl, {
44274             tag: "div",
44275             cls: "x-layout-tools-button",
44276             children: [ {
44277                 tag: "div",
44278                 cls: "roo-layout-tools-button-inner " + className,
44279                 html: "&#160;"
44280             }]
44281         }, true);
44282         btn.addClassOnOver("roo-layout-tools-button-over");
44283         return btn;
44284     }
44285 });/*
44286  * Based on:
44287  * Ext JS Library 1.1.1
44288  * Copyright(c) 2006-2007, Ext JS, LLC.
44289  *
44290  * Originally Released Under LGPL - original licence link has changed is not relivant.
44291  *
44292  * Fork - LGPL
44293  * <script type="text/javascript">
44294  */
44295  
44296
44297
44298 /**
44299  * @class Roo.SplitLayoutRegion
44300  * @extends Roo.LayoutRegion
44301  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
44302  */
44303 Roo.bootstrap.layout.Split = function(config){
44304     this.cursor = config.cursor;
44305     Roo.bootstrap.layout.Split.superclass.constructor.call(this, config);
44306 };
44307
44308 Roo.extend(Roo.bootstrap.layout.Split, Roo.bootstrap.layout.Region,
44309 {
44310     splitTip : "Drag to resize.",
44311     collapsibleSplitTip : "Drag to resize. Double click to hide.",
44312     useSplitTips : false,
44313
44314     applyConfig : function(config){
44315         Roo.bootstrap.layout.Split.superclass.applyConfig.call(this, config);
44316     },
44317     
44318     onRender : function(ctr,pos) {
44319         
44320         Roo.bootstrap.layout.Split.superclass.onRender.call(this, ctr,pos);
44321         if(!this.config.split){
44322             return;
44323         }
44324         if(!this.split){
44325             
44326             var splitEl = Roo.DomHelper.append(ctr.dom,  {
44327                             tag: "div",
44328                             id: this.el.id + "-split",
44329                             cls: "roo-layout-split roo-layout-split-"+this.position,
44330                             html: "&#160;"
44331             });
44332             /** The SplitBar for this region 
44333             * @type Roo.SplitBar */
44334             // does not exist yet...
44335             Roo.log([this.position, this.orientation]);
44336             
44337             this.split = new Roo.bootstrap.SplitBar({
44338                 dragElement : splitEl,
44339                 resizingElement: this.el,
44340                 orientation : this.orientation
44341             });
44342             
44343             this.split.on("moved", this.onSplitMove, this);
44344             this.split.useShim = this.config.useShim === true;
44345             this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
44346             if(this.useSplitTips){
44347                 this.split.el.dom.title = this.config.collapsible ? this.collapsibleSplitTip : this.splitTip;
44348             }
44349             //if(config.collapsible){
44350             //    this.split.el.on("dblclick", this.collapse,  this);
44351             //}
44352         }
44353         if(typeof this.config.minSize != "undefined"){
44354             this.split.minSize = this.config.minSize;
44355         }
44356         if(typeof this.config.maxSize != "undefined"){
44357             this.split.maxSize = this.config.maxSize;
44358         }
44359         if(this.config.hideWhenEmpty || this.config.hidden || this.config.collapsed){
44360             this.hideSplitter();
44361         }
44362         
44363     },
44364
44365     getHMaxSize : function(){
44366          var cmax = this.config.maxSize || 10000;
44367          var center = this.mgr.getRegion("center");
44368          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
44369     },
44370
44371     getVMaxSize : function(){
44372          var cmax = this.config.maxSize || 10000;
44373          var center = this.mgr.getRegion("center");
44374          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
44375     },
44376
44377     onSplitMove : function(split, newSize){
44378         this.fireEvent("resized", this, newSize);
44379     },
44380     
44381     /** 
44382      * Returns the {@link Roo.SplitBar} for this region.
44383      * @return {Roo.SplitBar}
44384      */
44385     getSplitBar : function(){
44386         return this.split;
44387     },
44388     
44389     hide : function(){
44390         this.hideSplitter();
44391         Roo.bootstrap.layout.Split.superclass.hide.call(this);
44392     },
44393
44394     hideSplitter : function(){
44395         if(this.split){
44396             this.split.el.setLocation(-2000,-2000);
44397             this.split.el.hide();
44398         }
44399     },
44400
44401     show : function(){
44402         if(this.split){
44403             this.split.el.show();
44404         }
44405         Roo.bootstrap.layout.Split.superclass.show.call(this);
44406     },
44407     
44408     beforeSlide: function(){
44409         if(Roo.isGecko){// firefox overflow auto bug workaround
44410             this.bodyEl.clip();
44411             if(this.tabs) {
44412                 this.tabs.bodyEl.clip();
44413             }
44414             if(this.activePanel){
44415                 this.activePanel.getEl().clip();
44416                 
44417                 if(this.activePanel.beforeSlide){
44418                     this.activePanel.beforeSlide();
44419                 }
44420             }
44421         }
44422     },
44423     
44424     afterSlide : function(){
44425         if(Roo.isGecko){// firefox overflow auto bug workaround
44426             this.bodyEl.unclip();
44427             if(this.tabs) {
44428                 this.tabs.bodyEl.unclip();
44429             }
44430             if(this.activePanel){
44431                 this.activePanel.getEl().unclip();
44432                 if(this.activePanel.afterSlide){
44433                     this.activePanel.afterSlide();
44434                 }
44435             }
44436         }
44437     },
44438
44439     initAutoHide : function(){
44440         if(this.autoHide !== false){
44441             if(!this.autoHideHd){
44442                 var st = new Roo.util.DelayedTask(this.slideIn, this);
44443                 this.autoHideHd = {
44444                     "mouseout": function(e){
44445                         if(!e.within(this.el, true)){
44446                             st.delay(500);
44447                         }
44448                     },
44449                     "mouseover" : function(e){
44450                         st.cancel();
44451                     },
44452                     scope : this
44453                 };
44454             }
44455             this.el.on(this.autoHideHd);
44456         }
44457     },
44458
44459     clearAutoHide : function(){
44460         if(this.autoHide !== false){
44461             this.el.un("mouseout", this.autoHideHd.mouseout);
44462             this.el.un("mouseover", this.autoHideHd.mouseover);
44463         }
44464     },
44465
44466     clearMonitor : function(){
44467         Roo.get(document).un("click", this.slideInIf, this);
44468     },
44469
44470     // these names are backwards but not changed for compat
44471     slideOut : function(){
44472         if(this.isSlid || this.el.hasActiveFx()){
44473             return;
44474         }
44475         this.isSlid = true;
44476         if(this.collapseBtn){
44477             this.collapseBtn.hide();
44478         }
44479         this.closeBtnState = this.closeBtn.getStyle('display');
44480         this.closeBtn.hide();
44481         if(this.stickBtn){
44482             this.stickBtn.show();
44483         }
44484         this.el.show();
44485         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
44486         this.beforeSlide();
44487         this.el.setStyle("z-index", 10001);
44488         this.el.slideIn(this.getSlideAnchor(), {
44489             callback: function(){
44490                 this.afterSlide();
44491                 this.initAutoHide();
44492                 Roo.get(document).on("click", this.slideInIf, this);
44493                 this.fireEvent("slideshow", this);
44494             },
44495             scope: this,
44496             block: true
44497         });
44498     },
44499
44500     afterSlideIn : function(){
44501         this.clearAutoHide();
44502         this.isSlid = false;
44503         this.clearMonitor();
44504         this.el.setStyle("z-index", "");
44505         if(this.collapseBtn){
44506             this.collapseBtn.show();
44507         }
44508         this.closeBtn.setStyle('display', this.closeBtnState);
44509         if(this.stickBtn){
44510             this.stickBtn.hide();
44511         }
44512         this.fireEvent("slidehide", this);
44513     },
44514
44515     slideIn : function(cb){
44516         if(!this.isSlid || this.el.hasActiveFx()){
44517             Roo.callback(cb);
44518             return;
44519         }
44520         this.isSlid = false;
44521         this.beforeSlide();
44522         this.el.slideOut(this.getSlideAnchor(), {
44523             callback: function(){
44524                 this.el.setLeftTop(-10000, -10000);
44525                 this.afterSlide();
44526                 this.afterSlideIn();
44527                 Roo.callback(cb);
44528             },
44529             scope: this,
44530             block: true
44531         });
44532     },
44533     
44534     slideInIf : function(e){
44535         if(!e.within(this.el)){
44536             this.slideIn();
44537         }
44538     },
44539
44540     animateCollapse : function(){
44541         this.beforeSlide();
44542         this.el.setStyle("z-index", 20000);
44543         var anchor = this.getSlideAnchor();
44544         this.el.slideOut(anchor, {
44545             callback : function(){
44546                 this.el.setStyle("z-index", "");
44547                 this.collapsedEl.slideIn(anchor, {duration:.3});
44548                 this.afterSlide();
44549                 this.el.setLocation(-10000,-10000);
44550                 this.el.hide();
44551                 this.fireEvent("collapsed", this);
44552             },
44553             scope: this,
44554             block: true
44555         });
44556     },
44557
44558     animateExpand : function(){
44559         this.beforeSlide();
44560         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
44561         this.el.setStyle("z-index", 20000);
44562         this.collapsedEl.hide({
44563             duration:.1
44564         });
44565         this.el.slideIn(this.getSlideAnchor(), {
44566             callback : function(){
44567                 this.el.setStyle("z-index", "");
44568                 this.afterSlide();
44569                 if(this.split){
44570                     this.split.el.show();
44571                 }
44572                 this.fireEvent("invalidated", this);
44573                 this.fireEvent("expanded", this);
44574             },
44575             scope: this,
44576             block: true
44577         });
44578     },
44579
44580     anchors : {
44581         "west" : "left",
44582         "east" : "right",
44583         "north" : "top",
44584         "south" : "bottom"
44585     },
44586
44587     sanchors : {
44588         "west" : "l",
44589         "east" : "r",
44590         "north" : "t",
44591         "south" : "b"
44592     },
44593
44594     canchors : {
44595         "west" : "tl-tr",
44596         "east" : "tr-tl",
44597         "north" : "tl-bl",
44598         "south" : "bl-tl"
44599     },
44600
44601     getAnchor : function(){
44602         return this.anchors[this.position];
44603     },
44604
44605     getCollapseAnchor : function(){
44606         return this.canchors[this.position];
44607     },
44608
44609     getSlideAnchor : function(){
44610         return this.sanchors[this.position];
44611     },
44612
44613     getAlignAdj : function(){
44614         var cm = this.cmargins;
44615         switch(this.position){
44616             case "west":
44617                 return [0, 0];
44618             break;
44619             case "east":
44620                 return [0, 0];
44621             break;
44622             case "north":
44623                 return [0, 0];
44624             break;
44625             case "south":
44626                 return [0, 0];
44627             break;
44628         }
44629     },
44630
44631     getExpandAdj : function(){
44632         var c = this.collapsedEl, cm = this.cmargins;
44633         switch(this.position){
44634             case "west":
44635                 return [-(cm.right+c.getWidth()+cm.left), 0];
44636             break;
44637             case "east":
44638                 return [cm.right+c.getWidth()+cm.left, 0];
44639             break;
44640             case "north":
44641                 return [0, -(cm.top+cm.bottom+c.getHeight())];
44642             break;
44643             case "south":
44644                 return [0, cm.top+cm.bottom+c.getHeight()];
44645             break;
44646         }
44647     }
44648 });/*
44649  * Based on:
44650  * Ext JS Library 1.1.1
44651  * Copyright(c) 2006-2007, Ext JS, LLC.
44652  *
44653  * Originally Released Under LGPL - original licence link has changed is not relivant.
44654  *
44655  * Fork - LGPL
44656  * <script type="text/javascript">
44657  */
44658 /*
44659  * These classes are private internal classes
44660  */
44661 Roo.bootstrap.layout.Center = function(config){
44662     config.region = "center";
44663     Roo.bootstrap.layout.Region.call(this, config);
44664     this.visible = true;
44665     this.minWidth = config.minWidth || 20;
44666     this.minHeight = config.minHeight || 20;
44667 };
44668
44669 Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
44670     hide : function(){
44671         // center panel can't be hidden
44672     },
44673     
44674     show : function(){
44675         // center panel can't be hidden
44676     },
44677     
44678     getMinWidth: function(){
44679         return this.minWidth;
44680     },
44681     
44682     getMinHeight: function(){
44683         return this.minHeight;
44684     }
44685 });
44686
44687
44688
44689
44690  
44691
44692
44693
44694
44695
44696
44697 Roo.bootstrap.layout.North = function(config)
44698 {
44699     config.region = 'north';
44700     config.cursor = 'n-resize';
44701     
44702     Roo.bootstrap.layout.Split.call(this, config);
44703     
44704     
44705     if(this.split){
44706         this.split.placement = Roo.bootstrap.SplitBar.TOP;
44707         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
44708         this.split.el.addClass("roo-layout-split-v");
44709     }
44710     //var size = config.initialSize || config.height;
44711     //if(this.el && typeof size != "undefined"){
44712     //    this.el.setHeight(size);
44713     //}
44714 };
44715 Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split,
44716 {
44717     orientation: Roo.bootstrap.SplitBar.VERTICAL,
44718      
44719      
44720     onRender : function(ctr, pos)
44721     {
44722         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
44723         var size = this.config.initialSize || this.config.height;
44724         if(this.el && typeof size != "undefined"){
44725             this.el.setHeight(size);
44726         }
44727     
44728     },
44729     
44730     getBox : function(){
44731         if(this.collapsed){
44732             return this.collapsedEl.getBox();
44733         }
44734         var box = this.el.getBox();
44735         if(this.split){
44736             box.height += this.split.el.getHeight();
44737         }
44738         return box;
44739     },
44740     
44741     updateBox : function(box){
44742         if(this.split && !this.collapsed){
44743             box.height -= this.split.el.getHeight();
44744             this.split.el.setLeft(box.x);
44745             this.split.el.setTop(box.y+box.height);
44746             this.split.el.setWidth(box.width);
44747         }
44748         if(this.collapsed){
44749             this.updateBody(box.width, null);
44750         }
44751         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
44752     }
44753 });
44754
44755
44756
44757
44758
44759 Roo.bootstrap.layout.South = function(config){
44760     config.region = 'south';
44761     config.cursor = 's-resize';
44762     Roo.bootstrap.layout.Split.call(this, config);
44763     if(this.split){
44764         this.split.placement = Roo.bootstrap.SplitBar.BOTTOM;
44765         this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
44766         this.split.el.addClass("roo-layout-split-v");
44767     }
44768     
44769 };
44770
44771 Roo.extend(Roo.bootstrap.layout.South, Roo.bootstrap.layout.Split, {
44772     orientation: Roo.bootstrap.SplitBar.VERTICAL,
44773     
44774     onRender : function(ctr, pos)
44775     {
44776         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
44777         var size = this.config.initialSize || this.config.height;
44778         if(this.el && typeof size != "undefined"){
44779             this.el.setHeight(size);
44780         }
44781     
44782     },
44783     
44784     getBox : function(){
44785         if(this.collapsed){
44786             return this.collapsedEl.getBox();
44787         }
44788         var box = this.el.getBox();
44789         if(this.split){
44790             var sh = this.split.el.getHeight();
44791             box.height += sh;
44792             box.y -= sh;
44793         }
44794         return box;
44795     },
44796     
44797     updateBox : function(box){
44798         if(this.split && !this.collapsed){
44799             var sh = this.split.el.getHeight();
44800             box.height -= sh;
44801             box.y += sh;
44802             this.split.el.setLeft(box.x);
44803             this.split.el.setTop(box.y-sh);
44804             this.split.el.setWidth(box.width);
44805         }
44806         if(this.collapsed){
44807             this.updateBody(box.width, null);
44808         }
44809         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
44810     }
44811 });
44812
44813 Roo.bootstrap.layout.East = function(config){
44814     config.region = "east";
44815     config.cursor = "e-resize";
44816     Roo.bootstrap.layout.Split.call(this, config);
44817     if(this.split){
44818         this.split.placement = Roo.bootstrap.SplitBar.RIGHT;
44819         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
44820         this.split.el.addClass("roo-layout-split-h");
44821     }
44822     
44823 };
44824 Roo.extend(Roo.bootstrap.layout.East, Roo.bootstrap.layout.Split, {
44825     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
44826     
44827     onRender : function(ctr, pos)
44828     {
44829         Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
44830         var size = this.config.initialSize || this.config.width;
44831         if(this.el && typeof size != "undefined"){
44832             this.el.setWidth(size);
44833         }
44834     
44835     },
44836     
44837     getBox : function(){
44838         if(this.collapsed){
44839             return this.collapsedEl.getBox();
44840         }
44841         var box = this.el.getBox();
44842         if(this.split){
44843             var sw = this.split.el.getWidth();
44844             box.width += sw;
44845             box.x -= sw;
44846         }
44847         return box;
44848     },
44849
44850     updateBox : function(box){
44851         if(this.split && !this.collapsed){
44852             var sw = this.split.el.getWidth();
44853             box.width -= sw;
44854             this.split.el.setLeft(box.x);
44855             this.split.el.setTop(box.y);
44856             this.split.el.setHeight(box.height);
44857             box.x += sw;
44858         }
44859         if(this.collapsed){
44860             this.updateBody(null, box.height);
44861         }
44862         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
44863     }
44864 });
44865
44866 Roo.bootstrap.layout.West = function(config){
44867     config.region = "west";
44868     config.cursor = "w-resize";
44869     
44870     Roo.bootstrap.layout.Split.call(this, config);
44871     if(this.split){
44872         this.split.placement = Roo.bootstrap.SplitBar.LEFT;
44873         this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
44874         this.split.el.addClass("roo-layout-split-h");
44875     }
44876     
44877 };
44878 Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
44879     orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
44880     
44881     onRender: function(ctr, pos)
44882     {
44883         Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos);
44884         var size = this.config.initialSize || this.config.width;
44885         if(typeof size != "undefined"){
44886             this.el.setWidth(size);
44887         }
44888     },
44889     
44890     getBox : function(){
44891         if(this.collapsed){
44892             return this.collapsedEl.getBox();
44893         }
44894         var box = this.el.getBox();
44895         if (box.width == 0) {
44896             box.width = this.config.width; // kludge?
44897         }
44898         if(this.split){
44899             box.width += this.split.el.getWidth();
44900         }
44901         return box;
44902     },
44903     
44904     updateBox : function(box){
44905         if(this.split && !this.collapsed){
44906             var sw = this.split.el.getWidth();
44907             box.width -= sw;
44908             this.split.el.setLeft(box.x+box.width);
44909             this.split.el.setTop(box.y);
44910             this.split.el.setHeight(box.height);
44911         }
44912         if(this.collapsed){
44913             this.updateBody(null, box.height);
44914         }
44915         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
44916     }
44917 });/*
44918  * Based on:
44919  * Ext JS Library 1.1.1
44920  * Copyright(c) 2006-2007, Ext JS, LLC.
44921  *
44922  * Originally Released Under LGPL - original licence link has changed is not relivant.
44923  *
44924  * Fork - LGPL
44925  * <script type="text/javascript">
44926  */
44927 /**
44928  * @class Roo.bootstrap.paenl.Content
44929  * @extends Roo.util.Observable
44930  * @children Roo.bootstrap.Component
44931  * @parent builder Roo.bootstrap.layout.Border
44932  * A basic ContentPanel element. - a panel that contain any content (eg. forms etc.)
44933  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
44934  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
44935  * @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
44936  * @cfg {Boolean}   closable      True if the panel can be closed/removed
44937  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
44938  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
44939  * @cfg {Toolbar}   toolbar       A toolbar for this panel
44940  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
44941  * @cfg {String} title          The title for this panel
44942  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
44943  * @cfg {String} url            Calls {@link #setUrl} with this value
44944  * @cfg {String} region  [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
44945  * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
44946  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
44947  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
44948  * @cfg {Boolean} iframe      contents are an iframe - makes showing remote sources/CSS feasible..
44949  * @cfg {Boolean} badges render the badges
44950  * @cfg {String} cls  extra classes to use  
44951  * @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
44952  
44953  * @constructor
44954  * Create a new ContentPanel.
44955  * @param {String/Object} config A string to set only the title or a config object
44956  
44957  */
44958 Roo.bootstrap.panel.Content = function( config){
44959     
44960     this.tpl = config.tpl || false;
44961     
44962     var el = config.el;
44963     var content = config.content;
44964
44965     if(config.autoCreate){ // xtype is available if this is called from factory
44966         el = Roo.id();
44967     }
44968     this.el = Roo.get(el);
44969     if(!this.el && config && config.autoCreate){
44970         if(typeof config.autoCreate == "object"){
44971             if(!config.autoCreate.id){
44972                 config.autoCreate.id = config.id||el;
44973             }
44974             this.el = Roo.DomHelper.append(document.body,
44975                         config.autoCreate, true);
44976         }else{
44977             var elcfg =  {
44978                 tag: "div",
44979                 cls: (config.cls || '') +
44980                     (config.background ? ' bg-' + config.background : '') +
44981                     " roo-layout-inactive-content",
44982                 id: config.id||el
44983             };
44984             if (config.iframe) {
44985                 elcfg.cn = [
44986                     {
44987                         tag : 'iframe',
44988                         style : 'border: 0px',
44989                         src : 'about:blank'
44990                     }
44991                 ];
44992             }
44993               
44994             if (config.html) {
44995                 elcfg.html = config.html;
44996                 
44997             }
44998                         
44999             this.el = Roo.DomHelper.append(document.body, elcfg , true);
45000             if (config.iframe) {
45001                 this.iframeEl = this.el.select('iframe',true).first();
45002             }
45003             
45004         }
45005     } 
45006     this.closable = false;
45007     this.loaded = false;
45008     this.active = false;
45009    
45010       
45011     if (config.toolbar && !config.toolbar.el && config.toolbar.xtype) {
45012         
45013         this.toolbar = new config.toolbar.xns[config.toolbar.xtype](config.toolbar);
45014         
45015         this.wrapEl = this.el; //this.el.wrap();
45016         var ti = [];
45017         if (config.toolbar.items) {
45018             ti = config.toolbar.items ;
45019             delete config.toolbar.items ;
45020         }
45021         
45022         var nitems = [];
45023         this.toolbar.render(this.wrapEl, 'before');
45024         for(var i =0;i < ti.length;i++) {
45025           //  Roo.log(['add child', items[i]]);
45026             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
45027         }
45028         this.toolbar.items = nitems;
45029         this.toolbar.el.insertBefore(this.wrapEl.dom.firstChild);
45030         delete config.toolbar;
45031         
45032     }
45033     /*
45034     // xtype created footer. - not sure if will work as we normally have to render first..
45035     if (this.footer && !this.footer.el && this.footer.xtype) {
45036         if (!this.wrapEl) {
45037             this.wrapEl = this.el.wrap();
45038         }
45039     
45040         this.footer.container = this.wrapEl.createChild();
45041          
45042         this.footer = Roo.factory(this.footer, Roo);
45043         
45044     }
45045     */
45046     
45047      if(typeof config == "string"){
45048         this.title = config;
45049     }else{
45050         Roo.apply(this, config);
45051     }
45052     
45053     if(this.resizeEl){
45054         this.resizeEl = Roo.get(this.resizeEl, true);
45055     }else{
45056         this.resizeEl = this.el;
45057     }
45058     // handle view.xtype
45059     
45060  
45061     
45062     
45063     this.addEvents({
45064         /**
45065          * @event activate
45066          * Fires when this panel is activated. 
45067          * @param {Roo.ContentPanel} this
45068          */
45069         "activate" : true,
45070         /**
45071          * @event deactivate
45072          * Fires when this panel is activated. 
45073          * @param {Roo.ContentPanel} this
45074          */
45075         "deactivate" : true,
45076
45077         /**
45078          * @event resize
45079          * Fires when this panel is resized if fitToFrame is true.
45080          * @param {Roo.ContentPanel} this
45081          * @param {Number} width The width after any component adjustments
45082          * @param {Number} height The height after any component adjustments
45083          */
45084         "resize" : true,
45085         
45086          /**
45087          * @event render
45088          * Fires when this tab is created
45089          * @param {Roo.ContentPanel} this
45090          */
45091         "render" : true,
45092         
45093           /**
45094          * @event scroll
45095          * Fires when this content is scrolled
45096          * @param {Roo.ContentPanel} this
45097          * @param {Event} scrollEvent
45098          */
45099         "scroll" : true
45100         
45101         
45102         
45103     });
45104     
45105
45106     
45107     
45108     if(this.autoScroll && !this.iframe){
45109         this.resizeEl.setStyle("overflow", "auto");
45110         this.resizeEl.on('scroll', this.onScroll, this);
45111     } else {
45112         // fix randome scrolling
45113         //this.el.on('scroll', function() {
45114         //    Roo.log('fix random scolling');
45115         //    this.scrollTo('top',0); 
45116         //});
45117     }
45118     content = content || this.content;
45119     if(content){
45120         this.setContent(content);
45121     }
45122     if(config && config.url){
45123         this.setUrl(this.url, this.params, this.loadOnce);
45124     }
45125     
45126     
45127     
45128     Roo.bootstrap.panel.Content.superclass.constructor.call(this);
45129     
45130     if (this.view && typeof(this.view.xtype) != 'undefined') {
45131         this.view.el = this.el.appendChild(document.createElement("div"));
45132         this.view = Roo.factory(this.view); 
45133         this.view.render  &&  this.view.render(false, '');  
45134     }
45135     
45136     
45137     this.fireEvent('render', this);
45138 };
45139
45140 Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
45141     
45142     cls : '',
45143     background : '',
45144     
45145     tabTip : '',
45146     
45147     iframe : false,
45148     iframeEl : false,
45149     
45150     /* Resize Element - use this to work out scroll etc. */
45151     resizeEl : false,
45152     
45153     setRegion : function(region){
45154         this.region = region;
45155         this.setActiveClass(region && !this.background);
45156     },
45157     
45158     
45159     setActiveClass: function(state)
45160     {
45161         if(state){
45162            this.el.replaceClass("roo-layout-inactive-content", "roo-layout-active-content");
45163            this.el.setStyle('position','relative');
45164         }else{
45165            this.el.replaceClass("roo-layout-active-content", "roo-layout-inactive-content");
45166            this.el.setStyle('position', 'absolute');
45167         } 
45168     },
45169     
45170     /**
45171      * Returns the toolbar for this Panel if one was configured. 
45172      * @return {Roo.Toolbar} 
45173      */
45174     getToolbar : function(){
45175         return this.toolbar;
45176     },
45177     
45178     setActiveState : function(active)
45179     {
45180         this.active = active;
45181         this.setActiveClass(active);
45182         if(!active){
45183             if(this.fireEvent("deactivate", this) === false){
45184                 return false;
45185             }
45186             return true;
45187         }
45188         this.fireEvent("activate", this);
45189         return true;
45190     },
45191     /**
45192      * Updates this panel's element (not for iframe)
45193      * @param {String} content The new content
45194      * @param {Boolean} loadScripts (optional) true to look for and process scripts
45195     */
45196     setContent : function(content, loadScripts){
45197         if (this.iframe) {
45198             return;
45199         }
45200         
45201         this.el.update(content, loadScripts);
45202     },
45203
45204     ignoreResize : function(w, h)
45205     {
45206         //return false; // always resize?
45207         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
45208             return true;
45209         }else{
45210             this.lastSize = {width: w, height: h};
45211             return false;
45212         }
45213     },
45214     /**
45215      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
45216      * @return {Roo.UpdateManager} The UpdateManager
45217      */
45218     getUpdateManager : function(){
45219         if (this.iframe) {
45220             return false;
45221         }
45222         return this.el.getUpdateManager();
45223     },
45224      /**
45225      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
45226      * Does not work with IFRAME contents
45227      * @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:
45228 <pre><code>
45229 panel.load({
45230     url: "your-url.php",
45231     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
45232     callback: yourFunction,
45233     scope: yourObject, //(optional scope)
45234     discardUrl: false,
45235     nocache: false,
45236     text: "Loading...",
45237     timeout: 30,
45238     scripts: false
45239 });
45240 </code></pre>
45241      
45242      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
45243      * 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.
45244      * @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}
45245      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
45246      * @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.
45247      * @return {Roo.ContentPanel} this
45248      */
45249     load : function(){
45250         
45251         if (this.iframe) {
45252             return this;
45253         }
45254         
45255         var um = this.el.getUpdateManager();
45256         um.update.apply(um, arguments);
45257         return this;
45258     },
45259
45260
45261     /**
45262      * 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.
45263      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
45264      * @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)
45265      * @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)
45266      * @return {Roo.UpdateManager|Boolean} The UpdateManager or false if IFRAME
45267      */
45268     setUrl : function(url, params, loadOnce){
45269         if (this.iframe) {
45270             this.iframeEl.dom.src = url;
45271             return false;
45272         }
45273         
45274         if(this.refreshDelegate){
45275             this.removeListener("activate", this.refreshDelegate);
45276         }
45277         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
45278         this.on("activate", this.refreshDelegate);
45279         return this.el.getUpdateManager();
45280     },
45281     
45282     _handleRefresh : function(url, params, loadOnce){
45283         if(!loadOnce || !this.loaded){
45284             var updater = this.el.getUpdateManager();
45285             updater.update(url, params, this._setLoaded.createDelegate(this));
45286         }
45287     },
45288     
45289     _setLoaded : function(){
45290         this.loaded = true;
45291     }, 
45292     
45293     /**
45294      * Returns this panel's id
45295      * @return {String} 
45296      */
45297     getId : function(){
45298         return this.el.id;
45299     },
45300     
45301     /** 
45302      * Returns this panel's element - used by regiosn to add.
45303      * @return {Roo.Element} 
45304      */
45305     getEl : function(){
45306         return this.wrapEl || this.el;
45307     },
45308     
45309    
45310     
45311     adjustForComponents : function(width, height)
45312     {
45313         //Roo.log('adjustForComponents ');
45314         if(this.resizeEl != this.el){
45315             width -= this.el.getFrameWidth('lr');
45316             height -= this.el.getFrameWidth('tb');
45317         }
45318         if(this.toolbar){
45319             var te = this.toolbar.getEl();
45320             te.setWidth(width);
45321             height -= te.getHeight();
45322         }
45323         if(this.footer){
45324             var te = this.footer.getEl();
45325             te.setWidth(width);
45326             height -= te.getHeight();
45327         }
45328         
45329         
45330         if(this.adjustments){
45331             width += this.adjustments[0];
45332             height += this.adjustments[1];
45333         }
45334         return {"width": width, "height": height};
45335     },
45336     
45337     setSize : function(width, height){
45338         if(this.fitToFrame && !this.ignoreResize(width, height)){
45339             if(this.fitContainer && this.resizeEl != this.el){
45340                 this.el.setSize(width, height);
45341             }
45342             var size = this.adjustForComponents(width, height);
45343             if (this.iframe) {
45344                 this.iframeEl.setSize(width,height);
45345             }
45346             
45347             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
45348             this.fireEvent('resize', this, size.width, size.height);
45349             
45350             
45351         }
45352     },
45353     
45354     /**
45355      * Returns this panel's title
45356      * @return {String} 
45357      */
45358     getTitle : function(){
45359         
45360         if (typeof(this.title) != 'object') {
45361             return this.title;
45362         }
45363         
45364         var t = '';
45365         for (var k in this.title) {
45366             if (!this.title.hasOwnProperty(k)) {
45367                 continue;
45368             }
45369             
45370             if (k.indexOf('-') >= 0) {
45371                 var s = k.split('-');
45372                 for (var i = 0; i<s.length; i++) {
45373                     t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
45374                 }
45375             } else {
45376                 t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
45377             }
45378         }
45379         return t;
45380     },
45381     
45382     /**
45383      * Set this panel's title
45384      * @param {String} title
45385      */
45386     setTitle : function(title){
45387         this.title = title;
45388         if(this.region){
45389             this.region.updatePanelTitle(this, title);
45390         }
45391     },
45392     
45393     /**
45394      * Returns true is this panel was configured to be closable
45395      * @return {Boolean} 
45396      */
45397     isClosable : function(){
45398         return this.closable;
45399     },
45400     
45401     beforeSlide : function(){
45402         this.el.clip();
45403         this.resizeEl.clip();
45404     },
45405     
45406     afterSlide : function(){
45407         this.el.unclip();
45408         this.resizeEl.unclip();
45409     },
45410     
45411     /**
45412      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
45413      *   Will fail silently if the {@link #setUrl} method has not been called.
45414      *   This does not activate the panel, just updates its content.
45415      */
45416     refresh : function(){
45417         if(this.refreshDelegate){
45418            this.loaded = false;
45419            this.refreshDelegate();
45420         }
45421     },
45422     
45423     /**
45424      * Destroys this panel
45425      */
45426     destroy : function(){
45427         this.el.removeAllListeners();
45428         var tempEl = document.createElement("span");
45429         tempEl.appendChild(this.el.dom);
45430         tempEl.innerHTML = "";
45431         this.el.remove();
45432         this.el = null;
45433     },
45434     
45435     /**
45436      * form - if the content panel contains a form - this is a reference to it.
45437      * @type {Roo.form.Form}
45438      */
45439     form : false,
45440     /**
45441      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
45442      *    This contains a reference to it.
45443      * @type {Roo.View}
45444      */
45445     view : false,
45446     
45447       /**
45448      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
45449      * <pre><code>
45450
45451 layout.addxtype({
45452        xtype : 'Form',
45453        items: [ .... ]
45454    }
45455 );
45456
45457 </code></pre>
45458      * @param {Object} cfg Xtype definition of item to add.
45459      */
45460     
45461     
45462     getChildContainer: function () {
45463         return this.getEl();
45464     },
45465     
45466     
45467     onScroll : function(e)
45468     {
45469         this.fireEvent('scroll', this, e);
45470     }
45471     
45472     
45473     /*
45474         var  ret = new Roo.factory(cfg);
45475         return ret;
45476         
45477         
45478         // add form..
45479         if (cfg.xtype.match(/^Form$/)) {
45480             
45481             var el;
45482             //if (this.footer) {
45483             //    el = this.footer.container.insertSibling(false, 'before');
45484             //} else {
45485                 el = this.el.createChild();
45486             //}
45487
45488             this.form = new  Roo.form.Form(cfg);
45489             
45490             
45491             if ( this.form.allItems.length) {
45492                 this.form.render(el.dom);
45493             }
45494             return this.form;
45495         }
45496         // should only have one of theses..
45497         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
45498             // views.. should not be just added - used named prop 'view''
45499             
45500             cfg.el = this.el.appendChild(document.createElement("div"));
45501             // factory?
45502             
45503             var ret = new Roo.factory(cfg);
45504              
45505              ret.render && ret.render(false, ''); // render blank..
45506             this.view = ret;
45507             return ret;
45508         }
45509         return false;
45510     }
45511     \*/
45512 });
45513  
45514 /**
45515  * @class Roo.bootstrap.panel.Grid
45516  * @extends Roo.bootstrap.panel.Content
45517  * @constructor
45518  * Create a new GridPanel.
45519  * @cfg {Roo.bootstrap.Table} grid The grid for this panel
45520  * @cfg {Roo.bootstrap.nav.Simplebar} toolbar the toolbar at the top of the grid.
45521  * @param {Object} config A the config object
45522   
45523  */
45524
45525
45526
45527 Roo.bootstrap.panel.Grid = function(config)
45528 {
45529     
45530       
45531     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
45532         {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
45533
45534     config.el = this.wrapper;
45535     //this.el = this.wrapper;
45536     
45537       if (config.container) {
45538         // ctor'ed from a Border/panel.grid
45539         
45540         
45541         this.wrapper.setStyle("overflow", "hidden");
45542         this.wrapper.addClass('roo-grid-container');
45543
45544     }
45545     
45546     
45547     if(config.toolbar){
45548         var tool_el = this.wrapper.createChild();    
45549         this.toolbar = Roo.factory(config.toolbar);
45550         var ti = [];
45551         if (config.toolbar.items) {
45552             ti = config.toolbar.items ;
45553             delete config.toolbar.items ;
45554         }
45555         
45556         var nitems = [];
45557         this.toolbar.render(tool_el);
45558         for(var i =0;i < ti.length;i++) {
45559           //  Roo.log(['add child', items[i]]);
45560             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
45561         }
45562         this.toolbar.items = nitems;
45563         
45564         delete config.toolbar;
45565     }
45566     
45567     Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
45568     config.grid.scrollBody = true;;
45569     config.grid.monitorWindowResize = false; // turn off autosizing
45570     config.grid.autoHeight = false;
45571     config.grid.autoWidth = false;
45572     
45573     this.grid = new config.grid.xns[config.grid.xtype](config.grid);
45574     
45575     if (config.background) {
45576         // render grid on panel activation (if panel background)
45577         this.on('activate', function(gp) {
45578             if (!gp.grid.rendered) {
45579                 gp.grid.render(this.wrapper);
45580                 gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");   
45581             }
45582         });
45583             
45584     } else {
45585         this.grid.render(this.wrapper);
45586         this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");               
45587
45588     }
45589     //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
45590     // ??? needed ??? config.el = this.wrapper;
45591     
45592     
45593     
45594   
45595     // xtype created footer. - not sure if will work as we normally have to render first..
45596     if (this.footer && !this.footer.el && this.footer.xtype) {
45597         
45598         var ctr = this.grid.getView().getFooterPanel(true);
45599         this.footer.dataSource = this.grid.dataSource;
45600         this.footer = Roo.factory(this.footer, Roo);
45601         this.footer.render(ctr);
45602         
45603     }
45604     
45605     
45606     
45607     
45608      
45609 };
45610
45611 Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content,
45612 {
45613   
45614     getId : function(){
45615         return this.grid.id;
45616     },
45617     
45618     /**
45619      * Returns the grid for this panel
45620      * @return {Roo.bootstrap.Table} 
45621      */
45622     getGrid : function(){
45623         return this.grid;    
45624     },
45625     
45626     setSize : function(width, height)
45627     {
45628      
45629         //if(!this.ignoreResize(width, height)){
45630             var grid = this.grid;
45631             var size = this.adjustForComponents(width, height);
45632             // tfoot is not a footer?
45633           
45634             
45635             var gridel = grid.getGridEl();
45636             gridel.setSize(size.width, size.height);
45637             
45638             var tbd = grid.getGridEl().select('tbody', true).first();
45639             var thd = grid.getGridEl().select('thead',true).first();
45640             var tbf= grid.getGridEl().select('tfoot', true).first();
45641
45642             if (tbf) {
45643                 size.height -= tbf.getHeight();
45644             }
45645             if (thd) {
45646                 size.height -= thd.getHeight();
45647             }
45648             
45649             tbd.setSize(size.width, size.height );
45650             // this is for the account management tab -seems to work there.
45651             var thd = grid.getGridEl().select('thead',true).first();
45652             //if (tbd) {
45653             //    tbd.setSize(size.width, size.height - thd.getHeight());
45654             //}
45655              
45656             grid.autoSize();
45657         //}
45658    
45659     },
45660      
45661     
45662     
45663     beforeSlide : function(){
45664         this.grid.getView().scroller.clip();
45665     },
45666     
45667     afterSlide : function(){
45668         this.grid.getView().scroller.unclip();
45669     },
45670     
45671     destroy : function(){
45672         this.grid.destroy();
45673         delete this.grid;
45674         Roo.bootstrap.panel.Grid.superclass.destroy.call(this); 
45675     }
45676 });
45677
45678 /**
45679  * @class Roo.bootstrap.panel.Nest
45680  * @extends Roo.bootstrap.panel.Content
45681  * @constructor
45682  * Create a new Panel, that can contain a layout.Border.
45683  * 
45684  * 
45685  * @param {String/Object} config A string to set only the title or a config object
45686  */
45687 Roo.bootstrap.panel.Nest = function(config)
45688 {
45689     // construct with only one argument..
45690     /* FIXME - implement nicer consturctors
45691     if (layout.layout) {
45692         config = layout;
45693         layout = config.layout;
45694         delete config.layout;
45695     }
45696     if (layout.xtype && !layout.getEl) {
45697         // then layout needs constructing..
45698         layout = Roo.factory(layout, Roo);
45699     }
45700     */
45701     
45702     config.el =  config.layout.getEl();
45703     
45704     Roo.bootstrap.panel.Nest.superclass.constructor.call(this, config);
45705     
45706     config.layout.monitorWindowResize = false; // turn off autosizing
45707     this.layout = config.layout;
45708     this.layout.getEl().addClass("roo-layout-nested-layout");
45709     this.layout.parent = this;
45710     
45711     
45712     
45713     
45714 };
45715
45716 Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
45717     /**
45718     * @cfg {Roo.BorderLayout} layout The layout for this panel
45719     */
45720     layout : false,
45721
45722     setSize : function(width, height){
45723         if(!this.ignoreResize(width, height)){
45724             var size = this.adjustForComponents(width, height);
45725             var el = this.layout.getEl();
45726             if (size.height < 1) {
45727                 el.setWidth(size.width);   
45728             } else {
45729                 el.setSize(size.width, size.height);
45730             }
45731             var touch = el.dom.offsetWidth;
45732             this.layout.layout();
45733             // ie requires a double layout on the first pass
45734             if(Roo.isIE && !this.initialized){
45735                 this.initialized = true;
45736                 this.layout.layout();
45737             }
45738         }
45739     },
45740     
45741     // activate all subpanels if not currently active..
45742     
45743     setActiveState : function(active){
45744         this.active = active;
45745         this.setActiveClass(active);
45746         
45747         if(!active){
45748             this.fireEvent("deactivate", this);
45749             return;
45750         }
45751         
45752         this.fireEvent("activate", this);
45753         // not sure if this should happen before or after..
45754         if (!this.layout) {
45755             return; // should not happen..
45756         }
45757         var reg = false;
45758         for (var r in this.layout.regions) {
45759             reg = this.layout.getRegion(r);
45760             if (reg.getActivePanel()) {
45761                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
45762                 reg.setActivePanel(reg.getActivePanel());
45763                 continue;
45764             }
45765             if (!reg.panels.length) {
45766                 continue;
45767             }
45768             reg.showPanel(reg.getPanel(0));
45769         }
45770         
45771         
45772         
45773         
45774     },
45775     
45776     /**
45777      * Returns the nested BorderLayout for this panel
45778      * @return {Roo.BorderLayout} 
45779      */
45780     getLayout : function(){
45781         return this.layout;
45782     },
45783     
45784      /**
45785      * Adds a xtype elements to the layout of the nested panel
45786      * <pre><code>
45787
45788 panel.addxtype({
45789        xtype : 'ContentPanel',
45790        region: 'west',
45791        items: [ .... ]
45792    }
45793 );
45794
45795 panel.addxtype({
45796         xtype : 'NestedLayoutPanel',
45797         region: 'west',
45798         layout: {
45799            center: { },
45800            west: { }   
45801         },
45802         items : [ ... list of content panels or nested layout panels.. ]
45803    }
45804 );
45805 </code></pre>
45806      * @param {Object} cfg Xtype definition of item to add.
45807      */
45808     addxtype : function(cfg) {
45809         return this.layout.addxtype(cfg);
45810     
45811     }
45812 });/*
45813  * Based on:
45814  * Ext JS Library 1.1.1
45815  * Copyright(c) 2006-2007, Ext JS, LLC.
45816  *
45817  * Originally Released Under LGPL - original licence link has changed is not relivant.
45818  *
45819  * Fork - LGPL
45820  * <script type="text/javascript">
45821  */
45822 /**
45823  * @class Roo.TabPanel
45824  * @extends Roo.util.Observable
45825  * A lightweight tab container.
45826  * <br><br>
45827  * Usage:
45828  * <pre><code>
45829 // basic tabs 1, built from existing content
45830 var tabs = new Roo.TabPanel("tabs1");
45831 tabs.addTab("script", "View Script");
45832 tabs.addTab("markup", "View Markup");
45833 tabs.activate("script");
45834
45835 // more advanced tabs, built from javascript
45836 var jtabs = new Roo.TabPanel("jtabs");
45837 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
45838
45839 // set up the UpdateManager
45840 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
45841 var updater = tab2.getUpdateManager();
45842 updater.setDefaultUrl("ajax1.htm");
45843 tab2.on('activate', updater.refresh, updater, true);
45844
45845 // Use setUrl for Ajax loading
45846 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
45847 tab3.setUrl("ajax2.htm", null, true);
45848
45849 // Disabled tab
45850 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
45851 tab4.disable();
45852
45853 jtabs.activate("jtabs-1");
45854  * </code></pre>
45855  * @constructor
45856  * Create a new TabPanel.
45857  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
45858  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
45859  */
45860 Roo.bootstrap.panel.Tabs = function(config){
45861     /**
45862     * The container element for this TabPanel.
45863     * @type Roo.Element
45864     */
45865     this.el = Roo.get(config.el);
45866     delete config.el;
45867     if(config){
45868         if(typeof config == "boolean"){
45869             this.tabPosition = config ? "bottom" : "top";
45870         }else{
45871             Roo.apply(this, config);
45872         }
45873     }
45874     
45875     if(this.tabPosition == "bottom"){
45876         // if tabs are at the bottom = create the body first.
45877         this.bodyEl = Roo.get(this.createBody(this.el.dom));
45878         this.el.addClass("roo-tabs-bottom");
45879     }
45880     // next create the tabs holders
45881     
45882     if (this.tabPosition == "west"){
45883         
45884         var reg = this.region; // fake it..
45885         while (reg) {
45886             if (!reg.mgr.parent) {
45887                 break;
45888             }
45889             reg = reg.mgr.parent.region;
45890         }
45891         Roo.log("got nest?");
45892         Roo.log(reg);
45893         if (reg.mgr.getRegion('west')) {
45894             var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
45895             this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
45896             this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
45897             this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
45898             this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
45899         
45900             
45901         }
45902         
45903         
45904     } else {
45905      
45906         this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
45907         this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
45908         this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
45909         this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
45910     }
45911     
45912     
45913     if(Roo.isIE){
45914         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
45915     }
45916     
45917     // finally - if tabs are at the top, then create the body last..
45918     if(this.tabPosition != "bottom"){
45919         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
45920          * @type Roo.Element
45921          */
45922         this.bodyEl = Roo.get(this.createBody(this.el.dom));
45923         this.el.addClass("roo-tabs-top");
45924     }
45925     this.items = [];
45926
45927     this.bodyEl.setStyle("position", "relative");
45928
45929     this.active = null;
45930     this.activateDelegate = this.activate.createDelegate(this);
45931
45932     this.addEvents({
45933         /**
45934          * @event tabchange
45935          * Fires when the active tab changes
45936          * @param {Roo.TabPanel} this
45937          * @param {Roo.TabPanelItem} activePanel The new active tab
45938          */
45939         "tabchange": true,
45940         /**
45941          * @event beforetabchange
45942          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
45943          * @param {Roo.TabPanel} this
45944          * @param {Object} e Set cancel to true on this object to cancel the tab change
45945          * @param {Roo.TabPanelItem} tab The tab being changed to
45946          */
45947         "beforetabchange" : true
45948     });
45949
45950     Roo.EventManager.onWindowResize(this.onResize, this);
45951     this.cpad = this.el.getPadding("lr");
45952     this.hiddenCount = 0;
45953
45954
45955     // toolbar on the tabbar support...
45956     if (this.toolbar) {
45957         alert("no toolbar support yet");
45958         this.toolbar  = false;
45959         /*
45960         var tcfg = this.toolbar;
45961         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
45962         this.toolbar = new Roo.Toolbar(tcfg);
45963         if (Roo.isSafari) {
45964             var tbl = tcfg.container.child('table', true);
45965             tbl.setAttribute('width', '100%');
45966         }
45967         */
45968         
45969     }
45970    
45971
45972
45973     Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
45974 };
45975
45976 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
45977     /*
45978      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
45979      */
45980     tabPosition : "top",
45981     /*
45982      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
45983      */
45984     currentTabWidth : 0,
45985     /*
45986      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
45987      */
45988     minTabWidth : 40,
45989     /*
45990      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
45991      */
45992     maxTabWidth : 250,
45993     /*
45994      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
45995      */
45996     preferredTabWidth : 175,
45997     /*
45998      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
45999      */
46000     resizeTabs : false,
46001     /*
46002      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
46003      */
46004     monitorResize : true,
46005     /*
46006      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
46007      */
46008     toolbar : false,  // set by caller..
46009     
46010     region : false, /// set by caller
46011     
46012     disableTooltips : true, // not used yet...
46013
46014     /**
46015      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
46016      * @param {String} id The id of the div to use <b>or create</b>
46017      * @param {String} text The text for the tab
46018      * @param {String} content (optional) Content to put in the TabPanelItem body
46019      * @param {Boolean} closable (optional) True to create a close icon on the tab
46020      * @return {Roo.TabPanelItem} The created TabPanelItem
46021      */
46022     addTab : function(id, text, content, closable, tpl)
46023     {
46024         var item = new Roo.bootstrap.panel.TabItem({
46025             panel: this,
46026             id : id,
46027             text : text,
46028             closable : closable,
46029             tpl : tpl
46030         });
46031         this.addTabItem(item);
46032         if(content){
46033             item.setContent(content);
46034         }
46035         return item;
46036     },
46037
46038     /**
46039      * Returns the {@link Roo.TabPanelItem} with the specified id/index
46040      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
46041      * @return {Roo.TabPanelItem}
46042      */
46043     getTab : function(id){
46044         return this.items[id];
46045     },
46046
46047     /**
46048      * Hides the {@link Roo.TabPanelItem} with the specified id/index
46049      * @param {String/Number} id The id or index of the TabPanelItem to hide.
46050      */
46051     hideTab : function(id){
46052         var t = this.items[id];
46053         if(!t.isHidden()){
46054            t.setHidden(true);
46055            this.hiddenCount++;
46056            this.autoSizeTabs();
46057         }
46058     },
46059
46060     /**
46061      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
46062      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
46063      */
46064     unhideTab : function(id){
46065         var t = this.items[id];
46066         if(t.isHidden()){
46067            t.setHidden(false);
46068            this.hiddenCount--;
46069            this.autoSizeTabs();
46070         }
46071     },
46072
46073     /**
46074      * Adds an existing {@link Roo.TabPanelItem}.
46075      * @param {Roo.TabPanelItem} item The TabPanelItem to add
46076      */
46077     addTabItem : function(item)
46078     {
46079         this.items[item.id] = item;
46080         this.items.push(item);
46081         this.autoSizeTabs();
46082       //  if(this.resizeTabs){
46083     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
46084   //         this.autoSizeTabs();
46085 //        }else{
46086 //            item.autoSize();
46087        // }
46088     },
46089
46090     /**
46091      * Removes a {@link Roo.TabPanelItem}.
46092      * @param {String/Number} id The id or index of the TabPanelItem to remove.
46093      */
46094     removeTab : function(id){
46095         var items = this.items;
46096         var tab = items[id];
46097         if(!tab) { return; }
46098         var index = items.indexOf(tab);
46099         if(this.active == tab && items.length > 1){
46100             var newTab = this.getNextAvailable(index);
46101             if(newTab) {
46102                 newTab.activate();
46103             }
46104         }
46105         this.stripEl.dom.removeChild(tab.pnode.dom);
46106         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
46107             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
46108         }
46109         items.splice(index, 1);
46110         delete this.items[tab.id];
46111         tab.fireEvent("close", tab);
46112         tab.purgeListeners();
46113         this.autoSizeTabs();
46114     },
46115
46116     getNextAvailable : function(start){
46117         var items = this.items;
46118         var index = start;
46119         // look for a next tab that will slide over to
46120         // replace the one being removed
46121         while(index < items.length){
46122             var item = items[++index];
46123             if(item && !item.isHidden()){
46124                 return item;
46125             }
46126         }
46127         // if one isn't found select the previous tab (on the left)
46128         index = start;
46129         while(index >= 0){
46130             var item = items[--index];
46131             if(item && !item.isHidden()){
46132                 return item;
46133             }
46134         }
46135         return null;
46136     },
46137
46138     /**
46139      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
46140      * @param {String/Number} id The id or index of the TabPanelItem to disable.
46141      */
46142     disableTab : function(id){
46143         var tab = this.items[id];
46144         if(tab && this.active != tab){
46145             tab.disable();
46146         }
46147     },
46148
46149     /**
46150      * Enables a {@link Roo.TabPanelItem} that is disabled.
46151      * @param {String/Number} id The id or index of the TabPanelItem to enable.
46152      */
46153     enableTab : function(id){
46154         var tab = this.items[id];
46155         tab.enable();
46156     },
46157
46158     /**
46159      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
46160      * @param {String/Number} id The id or index of the TabPanelItem to activate.
46161      * @return {Roo.TabPanelItem} The TabPanelItem.
46162      */
46163     activate : function(id)
46164     {
46165         //Roo.log('activite:'  + id);
46166         
46167         var tab = this.items[id];
46168         if(!tab){
46169             return null;
46170         }
46171         if(tab == this.active || tab.disabled){
46172             return tab;
46173         }
46174         var e = {};
46175         this.fireEvent("beforetabchange", this, e, tab);
46176         if(e.cancel !== true && !tab.disabled){
46177             if(this.active){
46178                 this.active.hide();
46179             }
46180             this.active = this.items[id];
46181             this.active.show();
46182             this.fireEvent("tabchange", this, this.active);
46183         }
46184         return tab;
46185     },
46186
46187     /**
46188      * Gets the active {@link Roo.TabPanelItem}.
46189      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
46190      */
46191     getActiveTab : function(){
46192         return this.active;
46193     },
46194
46195     /**
46196      * Updates the tab body element to fit the height of the container element
46197      * for overflow scrolling
46198      * @param {Number} targetHeight (optional) Override the starting height from the elements height
46199      */
46200     syncHeight : function(targetHeight){
46201         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
46202         var bm = this.bodyEl.getMargins();
46203         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
46204         this.bodyEl.setHeight(newHeight);
46205         return newHeight;
46206     },
46207
46208     onResize : function(){
46209         if(this.monitorResize){
46210             this.autoSizeTabs();
46211         }
46212     },
46213
46214     /**
46215      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
46216      */
46217     beginUpdate : function(){
46218         this.updating = true;
46219     },
46220
46221     /**
46222      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
46223      */
46224     endUpdate : function(){
46225         this.updating = false;
46226         this.autoSizeTabs();
46227     },
46228
46229     /**
46230      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
46231      */
46232     autoSizeTabs : function()
46233     {
46234         var count = this.items.length;
46235         var vcount = count - this.hiddenCount;
46236         
46237         if (vcount < 2) {
46238             this.stripEl.hide();
46239         } else {
46240             this.stripEl.show();
46241         }
46242         
46243         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
46244             return;
46245         }
46246         
46247         
46248         var w = Math.max(this.el.getWidth() - this.cpad, 10);
46249         var availWidth = Math.floor(w / vcount);
46250         var b = this.stripBody;
46251         if(b.getWidth() > w){
46252             var tabs = this.items;
46253             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
46254             if(availWidth < this.minTabWidth){
46255                 /*if(!this.sleft){    // incomplete scrolling code
46256                     this.createScrollButtons();
46257                 }
46258                 this.showScroll();
46259                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
46260             }
46261         }else{
46262             if(this.currentTabWidth < this.preferredTabWidth){
46263                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
46264             }
46265         }
46266     },
46267
46268     /**
46269      * Returns the number of tabs in this TabPanel.
46270      * @return {Number}
46271      */
46272      getCount : function(){
46273          return this.items.length;
46274      },
46275
46276     /**
46277      * Resizes all the tabs to the passed width
46278      * @param {Number} The new width
46279      */
46280     setTabWidth : function(width){
46281         this.currentTabWidth = width;
46282         for(var i = 0, len = this.items.length; i < len; i++) {
46283                 if(!this.items[i].isHidden()) {
46284                 this.items[i].setWidth(width);
46285             }
46286         }
46287     },
46288
46289     /**
46290      * Destroys this TabPanel
46291      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
46292      */
46293     destroy : function(removeEl){
46294         Roo.EventManager.removeResizeListener(this.onResize, this);
46295         for(var i = 0, len = this.items.length; i < len; i++){
46296             this.items[i].purgeListeners();
46297         }
46298         if(removeEl === true){
46299             this.el.update("");
46300             this.el.remove();
46301         }
46302     },
46303     
46304     createStrip : function(container)
46305     {
46306         var strip = document.createElement("nav");
46307         strip.className = Roo.bootstrap.version == 4 ?
46308             "navbar-light bg-light" : 
46309             "navbar navbar-default"; //"x-tabs-wrap";
46310         container.appendChild(strip);
46311         return strip;
46312     },
46313     
46314     createStripList : function(strip)
46315     {
46316         // div wrapper for retard IE
46317         // returns the "tr" element.
46318         strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
46319         //'<div class="x-tabs-strip-wrap">'+
46320           //  '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
46321           //  '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
46322         return strip.firstChild; //.firstChild.firstChild.firstChild;
46323     },
46324     createBody : function(container)
46325     {
46326         var body = document.createElement("div");
46327         Roo.id(body, "tab-body");
46328         //Roo.fly(body).addClass("x-tabs-body");
46329         Roo.fly(body).addClass("tab-content");
46330         container.appendChild(body);
46331         return body;
46332     },
46333     createItemBody :function(bodyEl, id){
46334         var body = Roo.getDom(id);
46335         if(!body){
46336             body = document.createElement("div");
46337             body.id = id;
46338         }
46339         //Roo.fly(body).addClass("x-tabs-item-body");
46340         Roo.fly(body).addClass("tab-pane");
46341          bodyEl.insertBefore(body, bodyEl.firstChild);
46342         return body;
46343     },
46344     /** @private */
46345     createStripElements :  function(stripEl, text, closable, tpl)
46346     {
46347         var td = document.createElement("li"); // was td..
46348         td.className = 'nav-item';
46349         
46350         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
46351         
46352         
46353         stripEl.appendChild(td);
46354         /*if(closable){
46355             td.className = "x-tabs-closable";
46356             if(!this.closeTpl){
46357                 this.closeTpl = new Roo.Template(
46358                    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
46359                    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
46360                    '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
46361                 );
46362             }
46363             var el = this.closeTpl.overwrite(td, {"text": text});
46364             var close = el.getElementsByTagName("div")[0];
46365             var inner = el.getElementsByTagName("em")[0];
46366             return {"el": el, "close": close, "inner": inner};
46367         } else {
46368         */
46369         // not sure what this is..
46370 //            if(!this.tabTpl){
46371                 //this.tabTpl = new Roo.Template(
46372                 //   '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
46373                 //   '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
46374                 //);
46375 //                this.tabTpl = new Roo.Template(
46376 //                   '<a href="#">' +
46377 //                   '<span unselectable="on"' +
46378 //                            (this.disableTooltips ? '' : ' title="{text}"') +
46379 //                            ' >{text}</span></a>'
46380 //                );
46381 //                
46382 //            }
46383
46384
46385             var template = tpl || this.tabTpl || false;
46386             
46387             if(!template){
46388                 template =  new Roo.Template(
46389                         Roo.bootstrap.version == 4 ? 
46390                             (
46391                                 '<a class="nav-link" href="#" unselectable="on"' +
46392                                      (this.disableTooltips ? '' : ' title="{text}"') +
46393                                      ' >{text}</a>'
46394                             ) : (
46395                                 '<a class="nav-link" href="#">' +
46396                                 '<span unselectable="on"' +
46397                                          (this.disableTooltips ? '' : ' title="{text}"') +
46398                                     ' >{text}</span></a>'
46399                             )
46400                 );
46401             }
46402             
46403             switch (typeof(template)) {
46404                 case 'object' :
46405                     break;
46406                 case 'string' :
46407                     template = new Roo.Template(template);
46408                     break;
46409                 default :
46410                     break;
46411             }
46412             
46413             var el = template.overwrite(td, {"text": text});
46414             
46415             var inner = el.getElementsByTagName("span")[0];
46416             
46417             return {"el": el, "inner": inner};
46418             
46419     }
46420         
46421     
46422 });
46423
46424 /**
46425  * @class Roo.TabPanelItem
46426  * @extends Roo.util.Observable
46427  * Represents an individual item (tab plus body) in a TabPanel.
46428  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
46429  * @param {String} id The id of this TabPanelItem
46430  * @param {String} text The text for the tab of this TabPanelItem
46431  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
46432  */
46433 Roo.bootstrap.panel.TabItem = function(config){
46434     /**
46435      * The {@link Roo.TabPanel} this TabPanelItem belongs to
46436      * @type Roo.TabPanel
46437      */
46438     this.tabPanel = config.panel;
46439     /**
46440      * The id for this TabPanelItem
46441      * @type String
46442      */
46443     this.id = config.id;
46444     /** @private */
46445     this.disabled = false;
46446     /** @private */
46447     this.text = config.text;
46448     /** @private */
46449     this.loaded = false;
46450     this.closable = config.closable;
46451
46452     /**
46453      * The body element for this TabPanelItem.
46454      * @type Roo.Element
46455      */
46456     this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
46457     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
46458     this.bodyEl.setStyle("display", "block");
46459     this.bodyEl.setStyle("zoom", "1");
46460     //this.hideAction();
46461
46462     var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
46463     /** @private */
46464     this.el = Roo.get(els.el);
46465     this.inner = Roo.get(els.inner, true);
46466      this.textEl = Roo.bootstrap.version == 4 ?
46467         this.el : Roo.get(this.el.dom.firstChild, true);
46468
46469     this.pnode = this.linode = Roo.get(els.el.parentNode, true);
46470     this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
46471
46472     
46473 //    this.el.on("mousedown", this.onTabMouseDown, this);
46474     this.el.on("click", this.onTabClick, this);
46475     /** @private */
46476     if(config.closable){
46477         var c = Roo.get(els.close, true);
46478         c.dom.title = this.closeText;
46479         c.addClassOnOver("close-over");
46480         c.on("click", this.closeClick, this);
46481      }
46482
46483     this.addEvents({
46484          /**
46485          * @event activate
46486          * Fires when this tab becomes the active tab.
46487          * @param {Roo.TabPanel} tabPanel The parent TabPanel
46488          * @param {Roo.TabPanelItem} this
46489          */
46490         "activate": true,
46491         /**
46492          * @event beforeclose
46493          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
46494          * @param {Roo.TabPanelItem} this
46495          * @param {Object} e Set cancel to true on this object to cancel the close.
46496          */
46497         "beforeclose": true,
46498         /**
46499          * @event close
46500          * Fires when this tab is closed.
46501          * @param {Roo.TabPanelItem} this
46502          */
46503          "close": true,
46504         /**
46505          * @event deactivate
46506          * Fires when this tab is no longer the active tab.
46507          * @param {Roo.TabPanel} tabPanel The parent TabPanel
46508          * @param {Roo.TabPanelItem} this
46509          */
46510          "deactivate" : true
46511     });
46512     this.hidden = false;
46513
46514     Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
46515 };
46516
46517 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
46518            {
46519     purgeListeners : function(){
46520        Roo.util.Observable.prototype.purgeListeners.call(this);
46521        this.el.removeAllListeners();
46522     },
46523     /**
46524      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
46525      */
46526     show : function(){
46527         this.status_node.addClass("active");
46528         this.showAction();
46529         if(Roo.isOpera){
46530             this.tabPanel.stripWrap.repaint();
46531         }
46532         this.fireEvent("activate", this.tabPanel, this);
46533     },
46534
46535     /**
46536      * Returns true if this tab is the active tab.
46537      * @return {Boolean}
46538      */
46539     isActive : function(){
46540         return this.tabPanel.getActiveTab() == this;
46541     },
46542
46543     /**
46544      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
46545      */
46546     hide : function(){
46547         this.status_node.removeClass("active");
46548         this.hideAction();
46549         this.fireEvent("deactivate", this.tabPanel, this);
46550     },
46551
46552     hideAction : function(){
46553         this.bodyEl.hide();
46554         this.bodyEl.setStyle("position", "absolute");
46555         this.bodyEl.setLeft("-20000px");
46556         this.bodyEl.setTop("-20000px");
46557     },
46558
46559     showAction : function(){
46560         this.bodyEl.setStyle("position", "relative");
46561         this.bodyEl.setTop("");
46562         this.bodyEl.setLeft("");
46563         this.bodyEl.show();
46564     },
46565
46566     /**
46567      * Set the tooltip for the tab.
46568      * @param {String} tooltip The tab's tooltip
46569      */
46570     setTooltip : function(text){
46571         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
46572             this.textEl.dom.qtip = text;
46573             this.textEl.dom.removeAttribute('title');
46574         }else{
46575             this.textEl.dom.title = text;
46576         }
46577     },
46578
46579     onTabClick : function(e){
46580         e.preventDefault();
46581         this.tabPanel.activate(this.id);
46582     },
46583
46584     onTabMouseDown : function(e){
46585         e.preventDefault();
46586         this.tabPanel.activate(this.id);
46587     },
46588 /*
46589     getWidth : function(){
46590         return this.inner.getWidth();
46591     },
46592
46593     setWidth : function(width){
46594         var iwidth = width - this.linode.getPadding("lr");
46595         this.inner.setWidth(iwidth);
46596         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
46597         this.linode.setWidth(width);
46598     },
46599 */
46600     /**
46601      * Show or hide the tab
46602      * @param {Boolean} hidden True to hide or false to show.
46603      */
46604     setHidden : function(hidden){
46605         this.hidden = hidden;
46606         this.linode.setStyle("display", hidden ? "none" : "");
46607     },
46608
46609     /**
46610      * Returns true if this tab is "hidden"
46611      * @return {Boolean}
46612      */
46613     isHidden : function(){
46614         return this.hidden;
46615     },
46616
46617     /**
46618      * Returns the text for this tab
46619      * @return {String}
46620      */
46621     getText : function(){
46622         return this.text;
46623     },
46624     /*
46625     autoSize : function(){
46626         //this.el.beginMeasure();
46627         this.textEl.setWidth(1);
46628         /*
46629          *  #2804 [new] Tabs in Roojs
46630          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
46631          */
46632         //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
46633         //this.el.endMeasure();
46634     //},
46635
46636     /**
46637      * Sets the text for the tab (Note: this also sets the tooltip text)
46638      * @param {String} text The tab's text and tooltip
46639      */
46640     setText : function(text){
46641         this.text = text;
46642         this.textEl.update(text);
46643         this.setTooltip(text);
46644         //if(!this.tabPanel.resizeTabs){
46645         //    this.autoSize();
46646         //}
46647     },
46648     /**
46649      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
46650      */
46651     activate : function(){
46652         this.tabPanel.activate(this.id);
46653     },
46654
46655     /**
46656      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
46657      */
46658     disable : function(){
46659         if(this.tabPanel.active != this){
46660             this.disabled = true;
46661             this.status_node.addClass("disabled");
46662         }
46663     },
46664
46665     /**
46666      * Enables this TabPanelItem if it was previously disabled.
46667      */
46668     enable : function(){
46669         this.disabled = false;
46670         this.status_node.removeClass("disabled");
46671     },
46672
46673     /**
46674      * Sets the content for this TabPanelItem.
46675      * @param {String} content The content
46676      * @param {Boolean} loadScripts true to look for and load scripts
46677      */
46678     setContent : function(content, loadScripts){
46679         this.bodyEl.update(content, loadScripts);
46680     },
46681
46682     /**
46683      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
46684      * @return {Roo.UpdateManager} The UpdateManager
46685      */
46686     getUpdateManager : function(){
46687         return this.bodyEl.getUpdateManager();
46688     },
46689
46690     /**
46691      * Set a URL to be used to load the content for this TabPanelItem.
46692      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
46693      * @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)
46694      * @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)
46695      * @return {Roo.UpdateManager} The UpdateManager
46696      */
46697     setUrl : function(url, params, loadOnce){
46698         if(this.refreshDelegate){
46699             this.un('activate', this.refreshDelegate);
46700         }
46701         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
46702         this.on("activate", this.refreshDelegate);
46703         return this.bodyEl.getUpdateManager();
46704     },
46705
46706     /** @private */
46707     _handleRefresh : function(url, params, loadOnce){
46708         if(!loadOnce || !this.loaded){
46709             var updater = this.bodyEl.getUpdateManager();
46710             updater.update(url, params, this._setLoaded.createDelegate(this));
46711         }
46712     },
46713
46714     /**
46715      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
46716      *   Will fail silently if the setUrl method has not been called.
46717      *   This does not activate the panel, just updates its content.
46718      */
46719     refresh : function(){
46720         if(this.refreshDelegate){
46721            this.loaded = false;
46722            this.refreshDelegate();
46723         }
46724     },
46725
46726     /** @private */
46727     _setLoaded : function(){
46728         this.loaded = true;
46729     },
46730
46731     /** @private */
46732     closeClick : function(e){
46733         var o = {};
46734         e.stopEvent();
46735         this.fireEvent("beforeclose", this, o);
46736         if(o.cancel !== true){
46737             this.tabPanel.removeTab(this.id);
46738         }
46739     },
46740     /**
46741      * The text displayed in the tooltip for the close icon.
46742      * @type String
46743      */
46744     closeText : "Close this tab"
46745 });
46746 /**
46747 *    This script refer to:
46748 *    Title: International Telephone Input
46749 *    Author: Jack O'Connor
46750 *    Code version:  v12.1.12
46751 *    Availability: https://github.com/jackocnr/intl-tel-input.git
46752 **/
46753
46754 Roo.bootstrap.form.PhoneInputData = function() {
46755     var d = [
46756       [
46757         "Afghanistan (‫افغانستان‬‎)",
46758         "af",
46759         "93"
46760       ],
46761       [
46762         "Albania (Shqipëri)",
46763         "al",
46764         "355"
46765       ],
46766       [
46767         "Algeria (‫الجزائر‬‎)",
46768         "dz",
46769         "213"
46770       ],
46771       [
46772         "American Samoa",
46773         "as",
46774         "1684"
46775       ],
46776       [
46777         "Andorra",
46778         "ad",
46779         "376"
46780       ],
46781       [
46782         "Angola",
46783         "ao",
46784         "244"
46785       ],
46786       [
46787         "Anguilla",
46788         "ai",
46789         "1264"
46790       ],
46791       [
46792         "Antigua and Barbuda",
46793         "ag",
46794         "1268"
46795       ],
46796       [
46797         "Argentina",
46798         "ar",
46799         "54"
46800       ],
46801       [
46802         "Armenia (Հայաստան)",
46803         "am",
46804         "374"
46805       ],
46806       [
46807         "Aruba",
46808         "aw",
46809         "297"
46810       ],
46811       [
46812         "Australia",
46813         "au",
46814         "61",
46815         0
46816       ],
46817       [
46818         "Austria (Österreich)",
46819         "at",
46820         "43"
46821       ],
46822       [
46823         "Azerbaijan (Azərbaycan)",
46824         "az",
46825         "994"
46826       ],
46827       [
46828         "Bahamas",
46829         "bs",
46830         "1242"
46831       ],
46832       [
46833         "Bahrain (‫البحرين‬‎)",
46834         "bh",
46835         "973"
46836       ],
46837       [
46838         "Bangladesh (বাংলাদেশ)",
46839         "bd",
46840         "880"
46841       ],
46842       [
46843         "Barbados",
46844         "bb",
46845         "1246"
46846       ],
46847       [
46848         "Belarus (Беларусь)",
46849         "by",
46850         "375"
46851       ],
46852       [
46853         "Belgium (België)",
46854         "be",
46855         "32"
46856       ],
46857       [
46858         "Belize",
46859         "bz",
46860         "501"
46861       ],
46862       [
46863         "Benin (Bénin)",
46864         "bj",
46865         "229"
46866       ],
46867       [
46868         "Bermuda",
46869         "bm",
46870         "1441"
46871       ],
46872       [
46873         "Bhutan (འབྲུག)",
46874         "bt",
46875         "975"
46876       ],
46877       [
46878         "Bolivia",
46879         "bo",
46880         "591"
46881       ],
46882       [
46883         "Bosnia and Herzegovina (Босна и Херцеговина)",
46884         "ba",
46885         "387"
46886       ],
46887       [
46888         "Botswana",
46889         "bw",
46890         "267"
46891       ],
46892       [
46893         "Brazil (Brasil)",
46894         "br",
46895         "55"
46896       ],
46897       [
46898         "British Indian Ocean Territory",
46899         "io",
46900         "246"
46901       ],
46902       [
46903         "British Virgin Islands",
46904         "vg",
46905         "1284"
46906       ],
46907       [
46908         "Brunei",
46909         "bn",
46910         "673"
46911       ],
46912       [
46913         "Bulgaria (България)",
46914         "bg",
46915         "359"
46916       ],
46917       [
46918         "Burkina Faso",
46919         "bf",
46920         "226"
46921       ],
46922       [
46923         "Burundi (Uburundi)",
46924         "bi",
46925         "257"
46926       ],
46927       [
46928         "Cambodia (កម្ពុជា)",
46929         "kh",
46930         "855"
46931       ],
46932       [
46933         "Cameroon (Cameroun)",
46934         "cm",
46935         "237"
46936       ],
46937       [
46938         "Canada",
46939         "ca",
46940         "1",
46941         1,
46942         ["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"]
46943       ],
46944       [
46945         "Cape Verde (Kabu Verdi)",
46946         "cv",
46947         "238"
46948       ],
46949       [
46950         "Caribbean Netherlands",
46951         "bq",
46952         "599",
46953         1
46954       ],
46955       [
46956         "Cayman Islands",
46957         "ky",
46958         "1345"
46959       ],
46960       [
46961         "Central African Republic (République centrafricaine)",
46962         "cf",
46963         "236"
46964       ],
46965       [
46966         "Chad (Tchad)",
46967         "td",
46968         "235"
46969       ],
46970       [
46971         "Chile",
46972         "cl",
46973         "56"
46974       ],
46975       [
46976         "China (中国)",
46977         "cn",
46978         "86"
46979       ],
46980       [
46981         "Christmas Island",
46982         "cx",
46983         "61",
46984         2
46985       ],
46986       [
46987         "Cocos (Keeling) Islands",
46988         "cc",
46989         "61",
46990         1
46991       ],
46992       [
46993         "Colombia",
46994         "co",
46995         "57"
46996       ],
46997       [
46998         "Comoros (‫جزر القمر‬‎)",
46999         "km",
47000         "269"
47001       ],
47002       [
47003         "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
47004         "cd",
47005         "243"
47006       ],
47007       [
47008         "Congo (Republic) (Congo-Brazzaville)",
47009         "cg",
47010         "242"
47011       ],
47012       [
47013         "Cook Islands",
47014         "ck",
47015         "682"
47016       ],
47017       [
47018         "Costa Rica",
47019         "cr",
47020         "506"
47021       ],
47022       [
47023         "Côte d’Ivoire",
47024         "ci",
47025         "225"
47026       ],
47027       [
47028         "Croatia (Hrvatska)",
47029         "hr",
47030         "385"
47031       ],
47032       [
47033         "Cuba",
47034         "cu",
47035         "53"
47036       ],
47037       [
47038         "Curaçao",
47039         "cw",
47040         "599",
47041         0
47042       ],
47043       [
47044         "Cyprus (Κύπρος)",
47045         "cy",
47046         "357"
47047       ],
47048       [
47049         "Czech Republic (Česká republika)",
47050         "cz",
47051         "420"
47052       ],
47053       [
47054         "Denmark (Danmark)",
47055         "dk",
47056         "45"
47057       ],
47058       [
47059         "Djibouti",
47060         "dj",
47061         "253"
47062       ],
47063       [
47064         "Dominica",
47065         "dm",
47066         "1767"
47067       ],
47068       [
47069         "Dominican Republic (República Dominicana)",
47070         "do",
47071         "1",
47072         2,
47073         ["809", "829", "849"]
47074       ],
47075       [
47076         "Ecuador",
47077         "ec",
47078         "593"
47079       ],
47080       [
47081         "Egypt (‫مصر‬‎)",
47082         "eg",
47083         "20"
47084       ],
47085       [
47086         "El Salvador",
47087         "sv",
47088         "503"
47089       ],
47090       [
47091         "Equatorial Guinea (Guinea Ecuatorial)",
47092         "gq",
47093         "240"
47094       ],
47095       [
47096         "Eritrea",
47097         "er",
47098         "291"
47099       ],
47100       [
47101         "Estonia (Eesti)",
47102         "ee",
47103         "372"
47104       ],
47105       [
47106         "Ethiopia",
47107         "et",
47108         "251"
47109       ],
47110       [
47111         "Falkland Islands (Islas Malvinas)",
47112         "fk",
47113         "500"
47114       ],
47115       [
47116         "Faroe Islands (Føroyar)",
47117         "fo",
47118         "298"
47119       ],
47120       [
47121         "Fiji",
47122         "fj",
47123         "679"
47124       ],
47125       [
47126         "Finland (Suomi)",
47127         "fi",
47128         "358",
47129         0
47130       ],
47131       [
47132         "France",
47133         "fr",
47134         "33"
47135       ],
47136       [
47137         "French Guiana (Guyane française)",
47138         "gf",
47139         "594"
47140       ],
47141       [
47142         "French Polynesia (Polynésie française)",
47143         "pf",
47144         "689"
47145       ],
47146       [
47147         "Gabon",
47148         "ga",
47149         "241"
47150       ],
47151       [
47152         "Gambia",
47153         "gm",
47154         "220"
47155       ],
47156       [
47157         "Georgia (საქართველო)",
47158         "ge",
47159         "995"
47160       ],
47161       [
47162         "Germany (Deutschland)",
47163         "de",
47164         "49"
47165       ],
47166       [
47167         "Ghana (Gaana)",
47168         "gh",
47169         "233"
47170       ],
47171       [
47172         "Gibraltar",
47173         "gi",
47174         "350"
47175       ],
47176       [
47177         "Greece (Ελλάδα)",
47178         "gr",
47179         "30"
47180       ],
47181       [
47182         "Greenland (Kalaallit Nunaat)",
47183         "gl",
47184         "299"
47185       ],
47186       [
47187         "Grenada",
47188         "gd",
47189         "1473"
47190       ],
47191       [
47192         "Guadeloupe",
47193         "gp",
47194         "590",
47195         0
47196       ],
47197       [
47198         "Guam",
47199         "gu",
47200         "1671"
47201       ],
47202       [
47203         "Guatemala",
47204         "gt",
47205         "502"
47206       ],
47207       [
47208         "Guernsey",
47209         "gg",
47210         "44",
47211         1
47212       ],
47213       [
47214         "Guinea (Guinée)",
47215         "gn",
47216         "224"
47217       ],
47218       [
47219         "Guinea-Bissau (Guiné Bissau)",
47220         "gw",
47221         "245"
47222       ],
47223       [
47224         "Guyana",
47225         "gy",
47226         "592"
47227       ],
47228       [
47229         "Haiti",
47230         "ht",
47231         "509"
47232       ],
47233       [
47234         "Honduras",
47235         "hn",
47236         "504"
47237       ],
47238       [
47239         "Hong Kong (香港)",
47240         "hk",
47241         "852"
47242       ],
47243       [
47244         "Hungary (Magyarország)",
47245         "hu",
47246         "36"
47247       ],
47248       [
47249         "Iceland (Ísland)",
47250         "is",
47251         "354"
47252       ],
47253       [
47254         "India (भारत)",
47255         "in",
47256         "91"
47257       ],
47258       [
47259         "Indonesia",
47260         "id",
47261         "62"
47262       ],
47263       [
47264         "Iran (‫ایران‬‎)",
47265         "ir",
47266         "98"
47267       ],
47268       [
47269         "Iraq (‫العراق‬‎)",
47270         "iq",
47271         "964"
47272       ],
47273       [
47274         "Ireland",
47275         "ie",
47276         "353"
47277       ],
47278       [
47279         "Isle of Man",
47280         "im",
47281         "44",
47282         2
47283       ],
47284       [
47285         "Israel (‫ישראל‬‎)",
47286         "il",
47287         "972"
47288       ],
47289       [
47290         "Italy (Italia)",
47291         "it",
47292         "39",
47293         0
47294       ],
47295       [
47296         "Jamaica",
47297         "jm",
47298         "1876"
47299       ],
47300       [
47301         "Japan (日本)",
47302         "jp",
47303         "81"
47304       ],
47305       [
47306         "Jersey",
47307         "je",
47308         "44",
47309         3
47310       ],
47311       [
47312         "Jordan (‫الأردن‬‎)",
47313         "jo",
47314         "962"
47315       ],
47316       [
47317         "Kazakhstan (Казахстан)",
47318         "kz",
47319         "7",
47320         1
47321       ],
47322       [
47323         "Kenya",
47324         "ke",
47325         "254"
47326       ],
47327       [
47328         "Kiribati",
47329         "ki",
47330         "686"
47331       ],
47332       [
47333         "Kosovo",
47334         "xk",
47335         "383"
47336       ],
47337       [
47338         "Kuwait (‫الكويت‬‎)",
47339         "kw",
47340         "965"
47341       ],
47342       [
47343         "Kyrgyzstan (Кыргызстан)",
47344         "kg",
47345         "996"
47346       ],
47347       [
47348         "Laos (ລາວ)",
47349         "la",
47350         "856"
47351       ],
47352       [
47353         "Latvia (Latvija)",
47354         "lv",
47355         "371"
47356       ],
47357       [
47358         "Lebanon (‫لبنان‬‎)",
47359         "lb",
47360         "961"
47361       ],
47362       [
47363         "Lesotho",
47364         "ls",
47365         "266"
47366       ],
47367       [
47368         "Liberia",
47369         "lr",
47370         "231"
47371       ],
47372       [
47373         "Libya (‫ليبيا‬‎)",
47374         "ly",
47375         "218"
47376       ],
47377       [
47378         "Liechtenstein",
47379         "li",
47380         "423"
47381       ],
47382       [
47383         "Lithuania (Lietuva)",
47384         "lt",
47385         "370"
47386       ],
47387       [
47388         "Luxembourg",
47389         "lu",
47390         "352"
47391       ],
47392       [
47393         "Macau (澳門)",
47394         "mo",
47395         "853"
47396       ],
47397       [
47398         "Macedonia (FYROM) (Македонија)",
47399         "mk",
47400         "389"
47401       ],
47402       [
47403         "Madagascar (Madagasikara)",
47404         "mg",
47405         "261"
47406       ],
47407       [
47408         "Malawi",
47409         "mw",
47410         "265"
47411       ],
47412       [
47413         "Malaysia",
47414         "my",
47415         "60"
47416       ],
47417       [
47418         "Maldives",
47419         "mv",
47420         "960"
47421       ],
47422       [
47423         "Mali",
47424         "ml",
47425         "223"
47426       ],
47427       [
47428         "Malta",
47429         "mt",
47430         "356"
47431       ],
47432       [
47433         "Marshall Islands",
47434         "mh",
47435         "692"
47436       ],
47437       [
47438         "Martinique",
47439         "mq",
47440         "596"
47441       ],
47442       [
47443         "Mauritania (‫موريتانيا‬‎)",
47444         "mr",
47445         "222"
47446       ],
47447       [
47448         "Mauritius (Moris)",
47449         "mu",
47450         "230"
47451       ],
47452       [
47453         "Mayotte",
47454         "yt",
47455         "262",
47456         1
47457       ],
47458       [
47459         "Mexico (México)",
47460         "mx",
47461         "52"
47462       ],
47463       [
47464         "Micronesia",
47465         "fm",
47466         "691"
47467       ],
47468       [
47469         "Moldova (Republica Moldova)",
47470         "md",
47471         "373"
47472       ],
47473       [
47474         "Monaco",
47475         "mc",
47476         "377"
47477       ],
47478       [
47479         "Mongolia (Монгол)",
47480         "mn",
47481         "976"
47482       ],
47483       [
47484         "Montenegro (Crna Gora)",
47485         "me",
47486         "382"
47487       ],
47488       [
47489         "Montserrat",
47490         "ms",
47491         "1664"
47492       ],
47493       [
47494         "Morocco (‫المغرب‬‎)",
47495         "ma",
47496         "212",
47497         0
47498       ],
47499       [
47500         "Mozambique (Moçambique)",
47501         "mz",
47502         "258"
47503       ],
47504       [
47505         "Myanmar (Burma) (မြန်မာ)",
47506         "mm",
47507         "95"
47508       ],
47509       [
47510         "Namibia (Namibië)",
47511         "na",
47512         "264"
47513       ],
47514       [
47515         "Nauru",
47516         "nr",
47517         "674"
47518       ],
47519       [
47520         "Nepal (नेपाल)",
47521         "np",
47522         "977"
47523       ],
47524       [
47525         "Netherlands (Nederland)",
47526         "nl",
47527         "31"
47528       ],
47529       [
47530         "New Caledonia (Nouvelle-Calédonie)",
47531         "nc",
47532         "687"
47533       ],
47534       [
47535         "New Zealand",
47536         "nz",
47537         "64"
47538       ],
47539       [
47540         "Nicaragua",
47541         "ni",
47542         "505"
47543       ],
47544       [
47545         "Niger (Nijar)",
47546         "ne",
47547         "227"
47548       ],
47549       [
47550         "Nigeria",
47551         "ng",
47552         "234"
47553       ],
47554       [
47555         "Niue",
47556         "nu",
47557         "683"
47558       ],
47559       [
47560         "Norfolk Island",
47561         "nf",
47562         "672"
47563       ],
47564       [
47565         "North Korea (조선 민주주의 인민 공화국)",
47566         "kp",
47567         "850"
47568       ],
47569       [
47570         "Northern Mariana Islands",
47571         "mp",
47572         "1670"
47573       ],
47574       [
47575         "Norway (Norge)",
47576         "no",
47577         "47",
47578         0
47579       ],
47580       [
47581         "Oman (‫عُمان‬‎)",
47582         "om",
47583         "968"
47584       ],
47585       [
47586         "Pakistan (‫پاکستان‬‎)",
47587         "pk",
47588         "92"
47589       ],
47590       [
47591         "Palau",
47592         "pw",
47593         "680"
47594       ],
47595       [
47596         "Palestine (‫فلسطين‬‎)",
47597         "ps",
47598         "970"
47599       ],
47600       [
47601         "Panama (Panamá)",
47602         "pa",
47603         "507"
47604       ],
47605       [
47606         "Papua New Guinea",
47607         "pg",
47608         "675"
47609       ],
47610       [
47611         "Paraguay",
47612         "py",
47613         "595"
47614       ],
47615       [
47616         "Peru (Perú)",
47617         "pe",
47618         "51"
47619       ],
47620       [
47621         "Philippines",
47622         "ph",
47623         "63"
47624       ],
47625       [
47626         "Poland (Polska)",
47627         "pl",
47628         "48"
47629       ],
47630       [
47631         "Portugal",
47632         "pt",
47633         "351"
47634       ],
47635       [
47636         "Puerto Rico",
47637         "pr",
47638         "1",
47639         3,
47640         ["787", "939"]
47641       ],
47642       [
47643         "Qatar (‫قطر‬‎)",
47644         "qa",
47645         "974"
47646       ],
47647       [
47648         "Réunion (La Réunion)",
47649         "re",
47650         "262",
47651         0
47652       ],
47653       [
47654         "Romania (România)",
47655         "ro",
47656         "40"
47657       ],
47658       [
47659         "Russia (Россия)",
47660         "ru",
47661         "7",
47662         0
47663       ],
47664       [
47665         "Rwanda",
47666         "rw",
47667         "250"
47668       ],
47669       [
47670         "Saint Barthélemy",
47671         "bl",
47672         "590",
47673         1
47674       ],
47675       [
47676         "Saint Helena",
47677         "sh",
47678         "290"
47679       ],
47680       [
47681         "Saint Kitts and Nevis",
47682         "kn",
47683         "1869"
47684       ],
47685       [
47686         "Saint Lucia",
47687         "lc",
47688         "1758"
47689       ],
47690       [
47691         "Saint Martin (Saint-Martin (partie française))",
47692         "mf",
47693         "590",
47694         2
47695       ],
47696       [
47697         "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
47698         "pm",
47699         "508"
47700       ],
47701       [
47702         "Saint Vincent and the Grenadines",
47703         "vc",
47704         "1784"
47705       ],
47706       [
47707         "Samoa",
47708         "ws",
47709         "685"
47710       ],
47711       [
47712         "San Marino",
47713         "sm",
47714         "378"
47715       ],
47716       [
47717         "São Tomé and Príncipe (São Tomé e Príncipe)",
47718         "st",
47719         "239"
47720       ],
47721       [
47722         "Saudi Arabia (‫المملكة العربية السعودية‬‎)",
47723         "sa",
47724         "966"
47725       ],
47726       [
47727         "Senegal (Sénégal)",
47728         "sn",
47729         "221"
47730       ],
47731       [
47732         "Serbia (Србија)",
47733         "rs",
47734         "381"
47735       ],
47736       [
47737         "Seychelles",
47738         "sc",
47739         "248"
47740       ],
47741       [
47742         "Sierra Leone",
47743         "sl",
47744         "232"
47745       ],
47746       [
47747         "Singapore",
47748         "sg",
47749         "65"
47750       ],
47751       [
47752         "Sint Maarten",
47753         "sx",
47754         "1721"
47755       ],
47756       [
47757         "Slovakia (Slovensko)",
47758         "sk",
47759         "421"
47760       ],
47761       [
47762         "Slovenia (Slovenija)",
47763         "si",
47764         "386"
47765       ],
47766       [
47767         "Solomon Islands",
47768         "sb",
47769         "677"
47770       ],
47771       [
47772         "Somalia (Soomaaliya)",
47773         "so",
47774         "252"
47775       ],
47776       [
47777         "South Africa",
47778         "za",
47779         "27"
47780       ],
47781       [
47782         "South Korea (대한민국)",
47783         "kr",
47784         "82"
47785       ],
47786       [
47787         "South Sudan (‫جنوب السودان‬‎)",
47788         "ss",
47789         "211"
47790       ],
47791       [
47792         "Spain (España)",
47793         "es",
47794         "34"
47795       ],
47796       [
47797         "Sri Lanka (ශ්‍රී ලංකාව)",
47798         "lk",
47799         "94"
47800       ],
47801       [
47802         "Sudan (‫السودان‬‎)",
47803         "sd",
47804         "249"
47805       ],
47806       [
47807         "Suriname",
47808         "sr",
47809         "597"
47810       ],
47811       [
47812         "Svalbard and Jan Mayen",
47813         "sj",
47814         "47",
47815         1
47816       ],
47817       [
47818         "Swaziland",
47819         "sz",
47820         "268"
47821       ],
47822       [
47823         "Sweden (Sverige)",
47824         "se",
47825         "46"
47826       ],
47827       [
47828         "Switzerland (Schweiz)",
47829         "ch",
47830         "41"
47831       ],
47832       [
47833         "Syria (‫سوريا‬‎)",
47834         "sy",
47835         "963"
47836       ],
47837       [
47838         "Taiwan (台灣)",
47839         "tw",
47840         "886"
47841       ],
47842       [
47843         "Tajikistan",
47844         "tj",
47845         "992"
47846       ],
47847       [
47848         "Tanzania",
47849         "tz",
47850         "255"
47851       ],
47852       [
47853         "Thailand (ไทย)",
47854         "th",
47855         "66"
47856       ],
47857       [
47858         "Timor-Leste",
47859         "tl",
47860         "670"
47861       ],
47862       [
47863         "Togo",
47864         "tg",
47865         "228"
47866       ],
47867       [
47868         "Tokelau",
47869         "tk",
47870         "690"
47871       ],
47872       [
47873         "Tonga",
47874         "to",
47875         "676"
47876       ],
47877       [
47878         "Trinidad and Tobago",
47879         "tt",
47880         "1868"
47881       ],
47882       [
47883         "Tunisia (‫تونس‬‎)",
47884         "tn",
47885         "216"
47886       ],
47887       [
47888         "Turkey (Türkiye)",
47889         "tr",
47890         "90"
47891       ],
47892       [
47893         "Turkmenistan",
47894         "tm",
47895         "993"
47896       ],
47897       [
47898         "Turks and Caicos Islands",
47899         "tc",
47900         "1649"
47901       ],
47902       [
47903         "Tuvalu",
47904         "tv",
47905         "688"
47906       ],
47907       [
47908         "U.S. Virgin Islands",
47909         "vi",
47910         "1340"
47911       ],
47912       [
47913         "Uganda",
47914         "ug",
47915         "256"
47916       ],
47917       [
47918         "Ukraine (Україна)",
47919         "ua",
47920         "380"
47921       ],
47922       [
47923         "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)",
47924         "ae",
47925         "971"
47926       ],
47927       [
47928         "United Kingdom",
47929         "gb",
47930         "44",
47931         0
47932       ],
47933       [
47934         "United States",
47935         "us",
47936         "1",
47937         0
47938       ],
47939       [
47940         "Uruguay",
47941         "uy",
47942         "598"
47943       ],
47944       [
47945         "Uzbekistan (Oʻzbekiston)",
47946         "uz",
47947         "998"
47948       ],
47949       [
47950         "Vanuatu",
47951         "vu",
47952         "678"
47953       ],
47954       [
47955         "Vatican City (Città del Vaticano)",
47956         "va",
47957         "39",
47958         1
47959       ],
47960       [
47961         "Venezuela",
47962         "ve",
47963         "58"
47964       ],
47965       [
47966         "Vietnam (Việt Nam)",
47967         "vn",
47968         "84"
47969       ],
47970       [
47971         "Wallis and Futuna (Wallis-et-Futuna)",
47972         "wf",
47973         "681"
47974       ],
47975       [
47976         "Western Sahara (‫الصحراء الغربية‬‎)",
47977         "eh",
47978         "212",
47979         1
47980       ],
47981       [
47982         "Yemen (‫اليمن‬‎)",
47983         "ye",
47984         "967"
47985       ],
47986       [
47987         "Zambia",
47988         "zm",
47989         "260"
47990       ],
47991       [
47992         "Zimbabwe",
47993         "zw",
47994         "263"
47995       ],
47996       [
47997         "Åland Islands",
47998         "ax",
47999         "358",
48000         1
48001       ]
48002   ];
48003   
48004   return d;
48005 }/**
48006 *    This script refer to:
48007 *    Title: International Telephone Input
48008 *    Author: Jack O'Connor
48009 *    Code version:  v12.1.12
48010 *    Availability: https://github.com/jackocnr/intl-tel-input.git
48011 **/
48012
48013 /**
48014  * @class Roo.bootstrap.form.PhoneInput
48015  * @extends Roo.bootstrap.form.TriggerField
48016  * An input with International dial-code selection
48017  
48018  * @cfg {String} defaultDialCode default '+852'
48019  * @cfg {Array} preferedCountries default []
48020   
48021  * @constructor
48022  * Create a new PhoneInput.
48023  * @param {Object} config Configuration options
48024  */
48025
48026 Roo.bootstrap.form.PhoneInput = function(config) {
48027     Roo.bootstrap.form.PhoneInput.superclass.constructor.call(this, config);
48028 };
48029
48030 Roo.extend(Roo.bootstrap.form.PhoneInput, Roo.bootstrap.form.TriggerField, {
48031         /**
48032         * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
48033         */
48034         listWidth: undefined,
48035         
48036         selectedClass: 'active',
48037         
48038         invalidClass : "has-warning",
48039         
48040         validClass: 'has-success',
48041         
48042         allowed: '0123456789',
48043         
48044         max_length: 15,
48045         
48046         /**
48047          * @cfg {String} defaultDialCode The default dial code when initializing the input
48048          */
48049         defaultDialCode: '+852',
48050         
48051         /**
48052          * @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
48053          */
48054         preferedCountries: false,
48055         
48056         getAutoCreate : function()
48057         {
48058             var data = Roo.bootstrap.form.PhoneInputData();
48059             var align = this.labelAlign || this.parentLabelAlign();
48060             var id = Roo.id();
48061             
48062             this.allCountries = [];
48063             this.dialCodeMapping = [];
48064             
48065             for (var i = 0; i < data.length; i++) {
48066               var c = data[i];
48067               this.allCountries[i] = {
48068                 name: c[0],
48069                 iso2: c[1],
48070                 dialCode: c[2],
48071                 priority: c[3] || 0,
48072                 areaCodes: c[4] || null
48073               };
48074               this.dialCodeMapping[c[2]] = {
48075                   name: c[0],
48076                   iso2: c[1],
48077                   priority: c[3] || 0,
48078                   areaCodes: c[4] || null
48079               };
48080             }
48081             
48082             var cfg = {
48083                 cls: 'form-group',
48084                 cn: []
48085             };
48086             
48087             var input =  {
48088                 tag: 'input',
48089                 id : id,
48090                 // type: 'number', -- do not use number - we get the flaky up/down arrows.
48091                 maxlength: this.max_length,
48092                 cls : 'form-control tel-input',
48093                 autocomplete: 'new-password'
48094             };
48095             
48096             var hiddenInput = {
48097                 tag: 'input',
48098                 type: 'hidden',
48099                 cls: 'hidden-tel-input'
48100             };
48101             
48102             if (this.name) {
48103                 hiddenInput.name = this.name;
48104             }
48105             
48106             if (this.disabled) {
48107                 input.disabled = true;
48108             }
48109             
48110             var flag_container = {
48111                 tag: 'div',
48112                 cls: 'flag-box',
48113                 cn: [
48114                     {
48115                         tag: 'div',
48116                         cls: 'flag'
48117                     },
48118                     {
48119                         tag: 'div',
48120                         cls: 'caret'
48121                     }
48122                 ]
48123             };
48124             
48125             var box = {
48126                 tag: 'div',
48127                 cls: this.hasFeedback ? 'has-feedback' : '',
48128                 cn: [
48129                     hiddenInput,
48130                     input,
48131                     {
48132                         tag: 'input',
48133                         cls: 'dial-code-holder',
48134                         disabled: true
48135                     }
48136                 ]
48137             };
48138             
48139             var container = {
48140                 cls: 'roo-select2-container input-group',
48141                 cn: [
48142                     flag_container,
48143                     box
48144                 ]
48145             };
48146             
48147             if (this.fieldLabel.length) {
48148                 var indicator = {
48149                     tag: 'i',
48150                     tooltip: 'This field is required'
48151                 };
48152                 
48153                 var label = {
48154                     tag: 'label',
48155                     'for':  id,
48156                     cls: 'control-label',
48157                     cn: []
48158                 };
48159                 
48160                 var label_text = {
48161                     tag: 'span',
48162                     html: this.fieldLabel
48163                 };
48164                 
48165                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
48166                 label.cn = [
48167                     indicator,
48168                     label_text
48169                 ];
48170                 
48171                 if(this.indicatorpos == 'right') {
48172                     indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
48173                     label.cn = [
48174                         label_text,
48175                         indicator
48176                     ];
48177                 }
48178                 
48179                 if(align == 'left') {
48180                     container = {
48181                         tag: 'div',
48182                         cn: [
48183                             container
48184                         ]
48185                     };
48186                     
48187                     if(this.labelWidth > 12){
48188                         label.style = "width: " + this.labelWidth + 'px';
48189                     }
48190                     if(this.labelWidth < 13 && this.labelmd == 0){
48191                         this.labelmd = this.labelWidth;
48192                     }
48193                     if(this.labellg > 0){
48194                         label.cls += ' col-lg-' + this.labellg;
48195                         input.cls += ' col-lg-' + (12 - this.labellg);
48196                     }
48197                     if(this.labelmd > 0){
48198                         label.cls += ' col-md-' + this.labelmd;
48199                         container.cls += ' col-md-' + (12 - this.labelmd);
48200                     }
48201                     if(this.labelsm > 0){
48202                         label.cls += ' col-sm-' + this.labelsm;
48203                         container.cls += ' col-sm-' + (12 - this.labelsm);
48204                     }
48205                     if(this.labelxs > 0){
48206                         label.cls += ' col-xs-' + this.labelxs;
48207                         container.cls += ' col-xs-' + (12 - this.labelxs);
48208                     }
48209                 }
48210             }
48211             
48212             cfg.cn = [
48213                 label,
48214                 container
48215             ];
48216             
48217             var settings = this;
48218             
48219             ['xs','sm','md','lg'].map(function(size){
48220                 if (settings[size]) {
48221                     cfg.cls += ' col-' + size + '-' + settings[size];
48222                 }
48223             });
48224             
48225             this.store = new Roo.data.Store({
48226                 proxy : new Roo.data.MemoryProxy({}),
48227                 reader : new Roo.data.JsonReader({
48228                     fields : [
48229                         {
48230                             'name' : 'name',
48231                             'type' : 'string'
48232                         },
48233                         {
48234                             'name' : 'iso2',
48235                             'type' : 'string'
48236                         },
48237                         {
48238                             'name' : 'dialCode',
48239                             'type' : 'string'
48240                         },
48241                         {
48242                             'name' : 'priority',
48243                             'type' : 'string'
48244                         },
48245                         {
48246                             'name' : 'areaCodes',
48247                             'type' : 'string'
48248                         }
48249                     ]
48250                 })
48251             });
48252             
48253             if(!this.preferedCountries) {
48254                 this.preferedCountries = [
48255                     'hk',
48256                     'gb',
48257                     'us'
48258                 ];
48259             }
48260             
48261             var p = this.preferedCountries.reverse();
48262             
48263             if(p) {
48264                 for (var i = 0; i < p.length; i++) {
48265                     for (var j = 0; j < this.allCountries.length; j++) {
48266                         if(this.allCountries[j].iso2 == p[i]) {
48267                             var t = this.allCountries[j];
48268                             this.allCountries.splice(j,1);
48269                             this.allCountries.unshift(t);
48270                         }
48271                     } 
48272                 }
48273             }
48274             
48275             this.store.proxy.data = {
48276                 success: true,
48277                 data: this.allCountries
48278             };
48279             
48280             return cfg;
48281         },
48282         
48283         initEvents : function()
48284         {
48285             this.createList();
48286             Roo.bootstrap.form.PhoneInput.superclass.initEvents.call(this);
48287             
48288             this.indicator = this.indicatorEl();
48289             this.flag = this.flagEl();
48290             this.dialCodeHolder = this.dialCodeHolderEl();
48291             
48292             this.trigger = this.el.select('div.flag-box',true).first();
48293             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
48294             
48295             var _this = this;
48296             
48297             (function(){
48298                 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
48299                 _this.list.setWidth(lw);
48300             }).defer(100);
48301             
48302             this.list.on('mouseover', this.onViewOver, this);
48303             this.list.on('mousemove', this.onViewMove, this);
48304             this.inputEl().on("keyup", this.onKeyUp, this);
48305             this.inputEl().on("keypress", this.onKeyPress, this);
48306             
48307             this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
48308
48309             this.view = new Roo.View(this.list, this.tpl, {
48310                 singleSelect:true, store: this.store, selectedClass: this.selectedClass
48311             });
48312             
48313             this.view.on('click', this.onViewClick, this);
48314             this.setValue(this.defaultDialCode);
48315         },
48316         
48317         onTriggerClick : function(e)
48318         {
48319             Roo.log('trigger click');
48320             if(this.disabled){
48321                 return;
48322             }
48323             
48324             if(this.isExpanded()){
48325                 this.collapse();
48326                 this.hasFocus = false;
48327             }else {
48328                 this.store.load({});
48329                 this.hasFocus = true;
48330                 this.expand();
48331             }
48332         },
48333         
48334         isExpanded : function()
48335         {
48336             return this.list.isVisible();
48337         },
48338         
48339         collapse : function()
48340         {
48341             if(!this.isExpanded()){
48342                 return;
48343             }
48344             this.list.hide();
48345             Roo.get(document).un('mousedown', this.collapseIf, this);
48346             Roo.get(document).un('mousewheel', this.collapseIf, this);
48347             this.fireEvent('collapse', this);
48348             this.validate();
48349         },
48350         
48351         expand : function()
48352         {
48353             Roo.log('expand');
48354
48355             if(this.isExpanded() || !this.hasFocus){
48356                 return;
48357             }
48358             
48359             var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
48360             this.list.setWidth(lw);
48361             
48362             this.list.show();
48363             this.restrictHeight();
48364             
48365             Roo.get(document).on('mousedown', this.collapseIf, this);
48366             Roo.get(document).on('mousewheel', this.collapseIf, this);
48367             
48368             this.fireEvent('expand', this);
48369         },
48370         
48371         restrictHeight : function()
48372         {
48373             this.list.alignTo(this.inputEl(), this.listAlign);
48374             this.list.alignTo(this.inputEl(), this.listAlign);
48375         },
48376         
48377         onViewOver : function(e, t)
48378         {
48379             if(this.inKeyMode){
48380                 return;
48381             }
48382             var item = this.view.findItemFromChild(t);
48383             
48384             if(item){
48385                 var index = this.view.indexOf(item);
48386                 this.select(index, false);
48387             }
48388         },
48389
48390         // private
48391         onViewClick : function(view, doFocus, el, e)
48392         {
48393             var index = this.view.getSelectedIndexes()[0];
48394             
48395             var r = this.store.getAt(index);
48396             
48397             if(r){
48398                 this.onSelect(r, index);
48399             }
48400             if(doFocus !== false && !this.blockFocus){
48401                 this.inputEl().focus();
48402             }
48403         },
48404         
48405         onViewMove : function(e, t)
48406         {
48407             this.inKeyMode = false;
48408         },
48409         
48410         select : function(index, scrollIntoView)
48411         {
48412             this.selectedIndex = index;
48413             this.view.select(index);
48414             if(scrollIntoView !== false){
48415                 var el = this.view.getNode(index);
48416                 if(el){
48417                     this.list.scrollChildIntoView(el, false);
48418                 }
48419             }
48420         },
48421         
48422         createList : function()
48423         {
48424             this.list = Roo.get(document.body).createChild({
48425                 tag: 'ul',
48426                 cls: 'typeahead typeahead-long dropdown-menu tel-list',
48427                 style: 'display:none'
48428             });
48429             
48430             this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
48431         },
48432         
48433         collapseIf : function(e)
48434         {
48435             var in_combo  = e.within(this.el);
48436             var in_list =  e.within(this.list);
48437             var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
48438             
48439             if (in_combo || in_list || is_list) {
48440                 return;
48441             }
48442             this.collapse();
48443         },
48444         
48445         onSelect : function(record, index)
48446         {
48447             if(this.fireEvent('beforeselect', this, record, index) !== false){
48448                 
48449                 this.setFlagClass(record.data.iso2);
48450                 this.setDialCode(record.data.dialCode);
48451                 this.hasFocus = false;
48452                 this.collapse();
48453                 this.fireEvent('select', this, record, index);
48454             }
48455         },
48456         
48457         flagEl : function()
48458         {
48459             var flag = this.el.select('div.flag',true).first();
48460             if(!flag){
48461                 return false;
48462             }
48463             return flag;
48464         },
48465         
48466         dialCodeHolderEl : function()
48467         {
48468             var d = this.el.select('input.dial-code-holder',true).first();
48469             if(!d){
48470                 return false;
48471             }
48472             return d;
48473         },
48474         
48475         setDialCode : function(v)
48476         {
48477             this.dialCodeHolder.dom.value = '+'+v;
48478         },
48479         
48480         setFlagClass : function(n)
48481         {
48482             this.flag.dom.className = 'flag '+n;
48483         },
48484         
48485         getValue : function()
48486         {
48487             var v = this.inputEl().getValue();
48488             if(this.dialCodeHolder) {
48489                 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
48490             }
48491             return v;
48492         },
48493         
48494         setValue : function(v)
48495         {
48496             var d = this.getDialCode(v);
48497             
48498             //invalid dial code
48499             if(v.length == 0 || !d || d.length == 0) {
48500                 if(this.rendered){
48501                     this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
48502                     this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
48503                 }
48504                 return;
48505             }
48506             
48507             //valid dial code
48508             this.setFlagClass(this.dialCodeMapping[d].iso2);
48509             this.setDialCode(d);
48510             this.inputEl().dom.value = v.replace('+'+d,'');
48511             this.hiddenEl().dom.value = this.getValue();
48512             
48513             this.validate();
48514         },
48515         
48516         getDialCode : function(v)
48517         {
48518             v = v ||  '';
48519             
48520             if (v.length == 0) {
48521                 return this.dialCodeHolder.dom.value;
48522             }
48523             
48524             var dialCode = "";
48525             if (v.charAt(0) != "+") {
48526                 return false;
48527             }
48528             var numericChars = "";
48529             for (var i = 1; i < v.length; i++) {
48530               var c = v.charAt(i);
48531               if (!isNaN(c)) {
48532                 numericChars += c;
48533                 if (this.dialCodeMapping[numericChars]) {
48534                   dialCode = v.substr(1, i);
48535                 }
48536                 if (numericChars.length == 4) {
48537                   break;
48538                 }
48539               }
48540             }
48541             return dialCode;
48542         },
48543         
48544         reset : function()
48545         {
48546             this.setValue(this.defaultDialCode);
48547             this.validate();
48548         },
48549         
48550         hiddenEl : function()
48551         {
48552             return this.el.select('input.hidden-tel-input',true).first();
48553         },
48554         
48555         // after setting val
48556         onKeyUp : function(e){
48557             this.setValue(this.getValue());
48558         },
48559         
48560         onKeyPress : function(e){
48561             if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
48562                 e.stopEvent();
48563             }
48564         }
48565         
48566 });
48567 /**
48568  * @class Roo.bootstrap.form.MoneyField
48569  * @extends Roo.bootstrap.form.ComboBox
48570  * Bootstrap MoneyField class
48571  * 
48572  * @constructor
48573  * Create a new MoneyField.
48574  * @param {Object} config Configuration options
48575  */
48576
48577 Roo.bootstrap.form.MoneyField = function(config) {
48578     
48579     Roo.bootstrap.form.MoneyField.superclass.constructor.call(this, config);
48580     
48581 };
48582
48583 Roo.extend(Roo.bootstrap.form.MoneyField, Roo.bootstrap.form.ComboBox, {
48584     
48585     /**
48586      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
48587      */
48588     allowDecimals : true,
48589     /**
48590      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
48591      */
48592     decimalSeparator : ".",
48593     /**
48594      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
48595      */
48596     decimalPrecision : 0,
48597     /**
48598      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
48599      */
48600     allowNegative : true,
48601     /**
48602      * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
48603      */
48604     allowZero: true,
48605     /**
48606      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
48607      */
48608     minValue : Number.NEGATIVE_INFINITY,
48609     /**
48610      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
48611      */
48612     maxValue : Number.MAX_VALUE,
48613     /**
48614      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
48615      */
48616     minText : "The minimum value for this field is {0}",
48617     /**
48618      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
48619      */
48620     maxText : "The maximum value for this field is {0}",
48621     /**
48622      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
48623      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
48624      */
48625     nanText : "{0} is not a valid number",
48626     /**
48627      * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
48628      */
48629     castInt : true,
48630     /**
48631      * @cfg {String} defaults currency of the MoneyField
48632      * value should be in lkey
48633      */
48634     defaultCurrency : false,
48635     /**
48636      * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
48637      */
48638     thousandsDelimiter : false,
48639     /**
48640      * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE)
48641      */
48642     max_length: false,
48643     
48644     inputlg : 9,
48645     inputmd : 9,
48646     inputsm : 9,
48647     inputxs : 6,
48648      /**
48649      * @cfg {Roo.data.Store} store  Store to lookup currency??
48650      */
48651     store : false,
48652     
48653     getAutoCreate : function()
48654     {
48655         var align = this.labelAlign || this.parentLabelAlign();
48656         
48657         var id = Roo.id();
48658
48659         var cfg = {
48660             cls: 'form-group',
48661             cn: []
48662         };
48663
48664         var input =  {
48665             tag: 'input',
48666             id : id,
48667             cls : 'form-control roo-money-amount-input',
48668             autocomplete: 'new-password'
48669         };
48670         
48671         var hiddenInput = {
48672             tag: 'input',
48673             type: 'hidden',
48674             id: Roo.id(),
48675             cls: 'hidden-number-input'
48676         };
48677         
48678         if(this.max_length) {
48679             input.maxlength = this.max_length; 
48680         }
48681         
48682         if (this.name) {
48683             hiddenInput.name = this.name;
48684         }
48685
48686         if (this.disabled) {
48687             input.disabled = true;
48688         }
48689
48690         var clg = 12 - this.inputlg;
48691         var cmd = 12 - this.inputmd;
48692         var csm = 12 - this.inputsm;
48693         var cxs = 12 - this.inputxs;
48694         
48695         var container = {
48696             tag : 'div',
48697             cls : 'row roo-money-field',
48698             cn : [
48699                 {
48700                     tag : 'div',
48701                     cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
48702                     cn : [
48703                         {
48704                             tag : 'div',
48705                             cls: 'roo-select2-container input-group',
48706                             cn: [
48707                                 {
48708                                     tag : 'input',
48709                                     cls : 'form-control roo-money-currency-input',
48710                                     autocomplete: 'new-password',
48711                                     readOnly : 1,
48712                                     name : this.currencyName
48713                                 },
48714                                 {
48715                                     tag :'span',
48716                                     cls : 'input-group-addon',
48717                                     cn : [
48718                                         {
48719                                             tag: 'span',
48720                                             cls: 'caret'
48721                                         }
48722                                     ]
48723                                 }
48724                             ]
48725                         }
48726                     ]
48727                 },
48728                 {
48729                     tag : 'div',
48730                     cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
48731                     cn : [
48732                         {
48733                             tag: 'div',
48734                             cls: this.hasFeedback ? 'has-feedback' : '',
48735                             cn: [
48736                                 input
48737                             ]
48738                         }
48739                     ]
48740                 }
48741             ]
48742             
48743         };
48744         
48745         if (this.fieldLabel.length) {
48746             var indicator = {
48747                 tag: 'i',
48748                 tooltip: 'This field is required'
48749             };
48750
48751             var label = {
48752                 tag: 'label',
48753                 'for':  id,
48754                 cls: 'control-label',
48755                 cn: []
48756             };
48757
48758             var label_text = {
48759                 tag: 'span',
48760                 html: this.fieldLabel
48761             };
48762
48763             indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
48764             label.cn = [
48765                 indicator,
48766                 label_text
48767             ];
48768
48769             if(this.indicatorpos == 'right') {
48770                 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
48771                 label.cn = [
48772                     label_text,
48773                     indicator
48774                 ];
48775             }
48776
48777             if(align == 'left') {
48778                 container = {
48779                     tag: 'div',
48780                     cn: [
48781                         container
48782                     ]
48783                 };
48784
48785                 if(this.labelWidth > 12){
48786                     label.style = "width: " + this.labelWidth + 'px';
48787                 }
48788                 if(this.labelWidth < 13 && this.labelmd == 0){
48789                     this.labelmd = this.labelWidth;
48790                 }
48791                 if(this.labellg > 0){
48792                     label.cls += ' col-lg-' + this.labellg;
48793                     input.cls += ' col-lg-' + (12 - this.labellg);
48794                 }
48795                 if(this.labelmd > 0){
48796                     label.cls += ' col-md-' + this.labelmd;
48797                     container.cls += ' col-md-' + (12 - this.labelmd);
48798                 }
48799                 if(this.labelsm > 0){
48800                     label.cls += ' col-sm-' + this.labelsm;
48801                     container.cls += ' col-sm-' + (12 - this.labelsm);
48802                 }
48803                 if(this.labelxs > 0){
48804                     label.cls += ' col-xs-' + this.labelxs;
48805                     container.cls += ' col-xs-' + (12 - this.labelxs);
48806                 }
48807             }
48808         }
48809
48810         cfg.cn = [
48811             label,
48812             container,
48813             hiddenInput
48814         ];
48815         
48816         var settings = this;
48817
48818         ['xs','sm','md','lg'].map(function(size){
48819             if (settings[size]) {
48820                 cfg.cls += ' col-' + size + '-' + settings[size];
48821             }
48822         });
48823         
48824         return cfg;
48825     },
48826     
48827     initEvents : function()
48828     {
48829         this.indicator = this.indicatorEl();
48830         
48831         this.initCurrencyEvent();
48832         
48833         this.initNumberEvent();
48834     },
48835     
48836     initCurrencyEvent : function()
48837     {
48838         if (!this.store) {
48839             throw "can not find store for combo";
48840         }
48841         
48842         this.store = Roo.factory(this.store, Roo.data);
48843         this.store.parent = this;
48844         
48845         this.createList();
48846         
48847         this.triggerEl = this.el.select('.input-group-addon', true).first();
48848         
48849         this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
48850         
48851         var _this = this;
48852         
48853         (function(){
48854             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
48855             _this.list.setWidth(lw);
48856         }).defer(100);
48857         
48858         this.list.on('mouseover', this.onViewOver, this);
48859         this.list.on('mousemove', this.onViewMove, this);
48860         this.list.on('scroll', this.onViewScroll, this);
48861         
48862         if(!this.tpl){
48863             this.tpl = '<li><a href="#">{' + this.currencyField + '}</a></li>';
48864         }
48865         
48866         this.view = new Roo.View(this.list, this.tpl, {
48867             singleSelect:true, store: this.store, selectedClass: this.selectedClass
48868         });
48869         
48870         this.view.on('click', this.onViewClick, this);
48871         
48872         this.store.on('beforeload', this.onBeforeLoad, this);
48873         this.store.on('load', this.onLoad, this);
48874         this.store.on('loadexception', this.onLoadException, this);
48875         
48876         this.keyNav = new Roo.KeyNav(this.currencyEl(), {
48877             "up" : function(e){
48878                 this.inKeyMode = true;
48879                 this.selectPrev();
48880             },
48881
48882             "down" : function(e){
48883                 if(!this.isExpanded()){
48884                     this.onTriggerClick();
48885                 }else{
48886                     this.inKeyMode = true;
48887                     this.selectNext();
48888                 }
48889             },
48890
48891             "enter" : function(e){
48892                 this.collapse();
48893                 
48894                 if(this.fireEvent("specialkey", this, e)){
48895                     this.onViewClick(false);
48896                 }
48897                 
48898                 return true;
48899             },
48900
48901             "esc" : function(e){
48902                 this.collapse();
48903             },
48904
48905             "tab" : function(e){
48906                 this.collapse();
48907                 
48908                 if(this.fireEvent("specialkey", this, e)){
48909                     this.onViewClick(false);
48910                 }
48911                 
48912                 return true;
48913             },
48914
48915             scope : this,
48916
48917             doRelay : function(foo, bar, hname){
48918                 if(hname == 'down' || this.scope.isExpanded()){
48919                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
48920                 }
48921                 return true;
48922             },
48923
48924             forceKeyDown: true
48925         });
48926         
48927         this.currencyEl().on("click", this.onTriggerClick, this, { preventDefault : true });
48928         
48929     },
48930     
48931     initNumberEvent : function(e)
48932     {
48933         this.inputEl().on("keydown" , this.fireKey,  this);
48934         this.inputEl().on("focus", this.onFocus,  this);
48935         this.inputEl().on("blur", this.onBlur,  this);
48936         
48937         this.inputEl().relayEvent('keyup', this);
48938         
48939         if(this.indicator){
48940             this.indicator.addClass('invisible');
48941         }
48942  
48943         this.originalValue = this.getValue();
48944         
48945         if(this.validationEvent == 'keyup'){
48946             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
48947             this.inputEl().on('keyup', this.filterValidation, this);
48948         }
48949         else if(this.validationEvent !== false){
48950             this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
48951         }
48952         
48953         if(this.selectOnFocus){
48954             this.on("focus", this.preFocus, this);
48955             
48956         }
48957         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
48958             this.inputEl().on("keypress", this.filterKeys, this);
48959         } else {
48960             this.inputEl().relayEvent('keypress', this);
48961         }
48962         
48963         var allowed = "0123456789";
48964         
48965         if(this.allowDecimals){
48966             allowed += this.decimalSeparator;
48967         }
48968         
48969         if(this.allowNegative){
48970             allowed += "-";
48971         }
48972         
48973         if(this.thousandsDelimiter) {
48974             allowed += ",";
48975         }
48976         
48977         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
48978         
48979         var keyPress = function(e){
48980             
48981             var k = e.getKey();
48982             
48983             var c = e.getCharCode();
48984             
48985             if(
48986                     (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
48987                     allowed.indexOf(String.fromCharCode(c)) === -1
48988             ){
48989                 e.stopEvent();
48990                 return;
48991             }
48992             
48993             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
48994                 return;
48995             }
48996             
48997             if(allowed.indexOf(String.fromCharCode(c)) === -1){
48998                 e.stopEvent();
48999             }
49000         };
49001         
49002         this.inputEl().on("keypress", keyPress, this);
49003         
49004     },
49005     
49006     onTriggerClick : function(e)
49007     {   
49008         if(this.disabled){
49009             return;
49010         }
49011         
49012         this.page = 0;
49013         this.loadNext = false;
49014         
49015         if(this.isExpanded()){
49016             this.collapse();
49017             return;
49018         }
49019         
49020         this.hasFocus = true;
49021         
49022         if(this.triggerAction == 'all') {
49023             this.doQuery(this.allQuery, true);
49024             return;
49025         }
49026         
49027         this.doQuery(this.getRawValue());
49028     },
49029     
49030     getCurrency : function()
49031     {   
49032         var v = this.currencyEl().getValue();
49033         
49034         return v;
49035     },
49036     
49037     restrictHeight : function()
49038     {
49039         this.list.alignTo(this.currencyEl(), this.listAlign);
49040         this.list.alignTo(this.currencyEl(), this.listAlign);
49041     },
49042     
49043     onViewClick : function(view, doFocus, el, e)
49044     {
49045         var index = this.view.getSelectedIndexes()[0];
49046         
49047         var r = this.store.getAt(index);
49048         
49049         if(r){
49050             this.onSelect(r, index);
49051         }
49052     },
49053     
49054     onSelect : function(record, index){
49055         
49056         if(this.fireEvent('beforeselect', this, record, index) !== false){
49057         
49058             this.setFromCurrencyData(index > -1 ? record.data : false);
49059             
49060             this.collapse();
49061             
49062             this.fireEvent('select', this, record, index);
49063         }
49064     },
49065     
49066     setFromCurrencyData : function(o)
49067     {
49068         var currency = '';
49069         
49070         this.lastCurrency = o;
49071         
49072         if (this.currencyField) {
49073             currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField];
49074         } else {
49075             Roo.log('no  currencyField value set for '+ (this.name ? this.name : this.id));
49076         }
49077         
49078         this.lastSelectionText = currency;
49079         
49080         //setting default currency
49081         if(o[this.currencyField] * 1 == 0 && this.defaultCurrency) {
49082             this.setCurrency(this.defaultCurrency);
49083             return;
49084         }
49085         
49086         this.setCurrency(currency);
49087     },
49088     
49089     setFromData : function(o)
49090     {
49091         var c = {};
49092         
49093         c[this.currencyField] = !o || typeof(o[this.currencyName]) == 'undefined' ? '' : o[this.currencyName];
49094         
49095         this.setFromCurrencyData(c);
49096         
49097         var value = '';
49098         
49099         if (this.name) {
49100             value = !o || typeof(o[this.name]) == 'undefined' ? '' : o[this.name];
49101         } else {
49102             Roo.log('no value set for '+ (this.name ? this.name : this.id));
49103         }
49104         
49105         this.setValue(value);
49106         
49107     },
49108     
49109     setCurrency : function(v)
49110     {   
49111         this.currencyValue = v;
49112         
49113         if(this.rendered){
49114             this.currencyEl().dom.value = (v === null || v === undefined ? '' : v);
49115             this.validate();
49116         }
49117     },
49118     
49119     setValue : function(v)
49120     {
49121         v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
49122         
49123         this.value = v;
49124         
49125         if(this.rendered){
49126             
49127             this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
49128             
49129             this.inputEl().dom.value = (v == '') ? '' :
49130                 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
49131             
49132             if(!this.allowZero && v === '0') {
49133                 this.hiddenEl().dom.value = '';
49134                 this.inputEl().dom.value = '';
49135             }
49136             
49137             this.validate();
49138         }
49139     },
49140     
49141     getRawValue : function()
49142     {
49143         var v = this.inputEl().getValue();
49144         
49145         return v;
49146     },
49147     
49148     getValue : function()
49149     {
49150         return this.fixPrecision(this.parseValue(this.getRawValue()));
49151     },
49152     
49153     parseValue : function(value)
49154     {
49155         if(this.thousandsDelimiter) {
49156             value += "";
49157             r = new RegExp(",", "g");
49158             value = value.replace(r, "");
49159         }
49160         
49161         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
49162         return isNaN(value) ? '' : value;
49163         
49164     },
49165     
49166     fixPrecision : function(value)
49167     {
49168         if(this.thousandsDelimiter) {
49169             value += "";
49170             r = new RegExp(",", "g");
49171             value = value.replace(r, "");
49172         }
49173         
49174         var nan = isNaN(value);
49175         
49176         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
49177             return nan ? '' : value;
49178         }
49179         return parseFloat(value).toFixed(this.decimalPrecision);
49180     },
49181     
49182     decimalPrecisionFcn : function(v)
49183     {
49184         return Math.floor(v);
49185     },
49186     
49187     validateValue : function(value)
49188     {
49189         if(!Roo.bootstrap.form.MoneyField.superclass.validateValue.call(this, value)){
49190             return false;
49191         }
49192         
49193         var num = this.parseValue(value);
49194         
49195         if(isNaN(num)){
49196             this.markInvalid(String.format(this.nanText, value));
49197             return false;
49198         }
49199         
49200         if(num < this.minValue){
49201             this.markInvalid(String.format(this.minText, this.minValue));
49202             return false;
49203         }
49204         
49205         if(num > this.maxValue){
49206             this.markInvalid(String.format(this.maxText, this.maxValue));
49207             return false;
49208         }
49209         
49210         return true;
49211     },
49212     
49213     validate : function()
49214     {
49215         if(this.disabled || this.allowBlank){
49216             this.markValid();
49217             return true;
49218         }
49219         
49220         var currency = this.getCurrency();
49221         
49222         if(this.validateValue(this.getRawValue()) && currency.length){
49223             this.markValid();
49224             return true;
49225         }
49226         
49227         this.markInvalid();
49228         return false;
49229     },
49230     
49231     getName: function()
49232     {
49233         return this.name;
49234     },
49235     
49236     beforeBlur : function()
49237     {
49238         if(!this.castInt){
49239             return;
49240         }
49241         
49242         var v = this.parseValue(this.getRawValue());
49243         
49244         if(v || v == 0){
49245             this.setValue(v);
49246         }
49247     },
49248     
49249     onBlur : function()
49250     {
49251         this.beforeBlur();
49252         
49253         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
49254             //this.el.removeClass(this.focusClass);
49255         }
49256         
49257         this.hasFocus = false;
49258         
49259         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
49260             this.validate();
49261         }
49262         
49263         var v = this.getValue();
49264         
49265         if(String(v) !== String(this.startValue)){
49266             this.fireEvent('change', this, v, this.startValue);
49267         }
49268         
49269         this.fireEvent("blur", this);
49270     },
49271     
49272     inputEl : function()
49273     {
49274         return this.el.select('.roo-money-amount-input', true).first();
49275     },
49276     
49277     currencyEl : function()
49278     {
49279         return this.el.select('.roo-money-currency-input', true).first();
49280     },
49281     
49282     hiddenEl : function()
49283     {
49284         return this.el.select('input.hidden-number-input',true).first();
49285     }
49286     
49287 });/**
49288  * @class Roo.bootstrap.BezierSignature
49289  * @extends Roo.bootstrap.Component
49290  * Bootstrap BezierSignature class
49291  * This script refer to:
49292  *    Title: Signature Pad
49293  *    Author: szimek
49294  *    Availability: https://github.com/szimek/signature_pad
49295  *
49296  * @constructor
49297  * Create a new BezierSignature
49298  * @param {Object} config The config object
49299  */
49300
49301 Roo.bootstrap.BezierSignature = function(config){
49302     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
49303     this.addEvents({
49304         "resize" : true
49305     });
49306 };
49307
49308 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
49309 {
49310      
49311     curve_data: [],
49312     
49313     is_empty: true,
49314     
49315     mouse_btn_down: true,
49316     
49317     /**
49318      * @cfg {int} canvas height
49319      */
49320     canvas_height: '200px',
49321     
49322     /**
49323      * @cfg {float|function} Radius of a single dot.
49324      */ 
49325     dot_size: false,
49326     
49327     /**
49328      * @cfg {float} Minimum width of a line. Defaults to 0.5.
49329      */
49330     min_width: 0.5,
49331     
49332     /**
49333      * @cfg {float} Maximum width of a line. Defaults to 2.5.
49334      */
49335     max_width: 2.5,
49336     
49337     /**
49338      * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
49339      */
49340     throttle: 16,
49341     
49342     /**
49343      * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
49344      */
49345     min_distance: 5,
49346     
49347     /**
49348      * @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.
49349      */
49350     bg_color: 'rgba(0, 0, 0, 0)',
49351     
49352     /**
49353      * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
49354      */
49355     dot_color: 'black',
49356     
49357     /**
49358      * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
49359      */ 
49360     velocity_filter_weight: 0.7,
49361     
49362     /**
49363      * @cfg {function} Callback when stroke begin. 
49364      */
49365     onBegin: false,
49366     
49367     /**
49368      * @cfg {function} Callback when stroke end.
49369      */
49370     onEnd: false,
49371     
49372     getAutoCreate : function()
49373     {
49374         var cls = 'roo-signature column';
49375         
49376         if(this.cls){
49377             cls += ' ' + this.cls;
49378         }
49379         
49380         var col_sizes = [
49381             'lg',
49382             'md',
49383             'sm',
49384             'xs'
49385         ];
49386         
49387         for(var i = 0; i < col_sizes.length; i++) {
49388             if(this[col_sizes[i]]) {
49389                 cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
49390             }
49391         }
49392         
49393         var cfg = {
49394             tag: 'div',
49395             cls: cls,
49396             cn: [
49397                 {
49398                     tag: 'div',
49399                     cls: 'roo-signature-body',
49400                     cn: [
49401                         {
49402                             tag: 'canvas',
49403                             cls: 'roo-signature-body-canvas',
49404                             height: this.canvas_height,
49405                             width: this.canvas_width
49406                         }
49407                     ]
49408                 },
49409                 {
49410                     tag: 'input',
49411                     type: 'file',
49412                     style: 'display: none'
49413                 }
49414             ]
49415         };
49416         
49417         return cfg;
49418     },
49419     
49420     initEvents: function() 
49421     {
49422         Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
49423         
49424         var canvas = this.canvasEl();
49425         
49426         // mouse && touch event swapping...
49427         canvas.dom.style.touchAction = 'none';
49428         canvas.dom.style.msTouchAction = 'none';
49429         
49430         this.mouse_btn_down = false;
49431         canvas.on('mousedown', this._handleMouseDown, this);
49432         canvas.on('mousemove', this._handleMouseMove, this);
49433         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
49434         
49435         if (window.PointerEvent) {
49436             canvas.on('pointerdown', this._handleMouseDown, this);
49437             canvas.on('pointermove', this._handleMouseMove, this);
49438             Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
49439         }
49440         
49441         if ('ontouchstart' in window) {
49442             canvas.on('touchstart', this._handleTouchStart, this);
49443             canvas.on('touchmove', this._handleTouchMove, this);
49444             canvas.on('touchend', this._handleTouchEnd, this);
49445         }
49446         
49447         Roo.EventManager.onWindowResize(this.resize, this, true);
49448         
49449         // file input event
49450         this.fileEl().on('change', this.uploadImage, this);
49451         
49452         this.clear();
49453         
49454         this.resize();
49455     },
49456     
49457     resize: function(){
49458         
49459         var canvas = this.canvasEl().dom;
49460         var ctx = this.canvasElCtx();
49461         var img_data = false;
49462         
49463         if(canvas.width > 0) {
49464             var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
49465         }
49466         // setting canvas width will clean img data
49467         canvas.width = 0;
49468         
49469         var style = window.getComputedStyle ? 
49470             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
49471             
49472         var padding_left = parseInt(style.paddingLeft) || 0;
49473         var padding_right = parseInt(style.paddingRight) || 0;
49474         
49475         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
49476         
49477         if(img_data) {
49478             ctx.putImageData(img_data, 0, 0);
49479         }
49480     },
49481     
49482     _handleMouseDown: function(e)
49483     {
49484         if (e.browserEvent.which === 1) {
49485             this.mouse_btn_down = true;
49486             this.strokeBegin(e);
49487         }
49488     },
49489     
49490     _handleMouseMove: function (e)
49491     {
49492         if (this.mouse_btn_down) {
49493             this.strokeMoveUpdate(e);
49494         }
49495     },
49496     
49497     _handleMouseUp: function (e)
49498     {
49499         if (e.browserEvent.which === 1 && this.mouse_btn_down) {
49500             this.mouse_btn_down = false;
49501             this.strokeEnd(e);
49502         }
49503     },
49504     
49505     _handleTouchStart: function (e) {
49506         
49507         e.preventDefault();
49508         if (e.browserEvent.targetTouches.length === 1) {
49509             // var touch = e.browserEvent.changedTouches[0];
49510             // this.strokeBegin(touch);
49511             
49512              this.strokeBegin(e); // assume e catching the correct xy...
49513         }
49514     },
49515     
49516     _handleTouchMove: function (e) {
49517         e.preventDefault();
49518         // var touch = event.targetTouches[0];
49519         // _this._strokeMoveUpdate(touch);
49520         this.strokeMoveUpdate(e);
49521     },
49522     
49523     _handleTouchEnd: function (e) {
49524         var wasCanvasTouched = e.target === this.canvasEl().dom;
49525         if (wasCanvasTouched) {
49526             e.preventDefault();
49527             // var touch = event.changedTouches[0];
49528             // _this._strokeEnd(touch);
49529             this.strokeEnd(e);
49530         }
49531     },
49532     
49533     reset: function () {
49534         this._lastPoints = [];
49535         this._lastVelocity = 0;
49536         this._lastWidth = (this.min_width + this.max_width) / 2;
49537         this.canvasElCtx().fillStyle = this.dot_color;
49538     },
49539     
49540     strokeMoveUpdate: function(e)
49541     {
49542         this.strokeUpdate(e);
49543         
49544         if (this.throttle) {
49545             this.throttleStroke(this.strokeUpdate, this.throttle);
49546         }
49547         else {
49548             this.strokeUpdate(e);
49549         }
49550     },
49551     
49552     strokeBegin: function(e)
49553     {
49554         var newPointGroup = {
49555             color: this.dot_color,
49556             points: []
49557         };
49558         
49559         if (typeof this.onBegin === 'function') {
49560             this.onBegin(e);
49561         }
49562         
49563         this.curve_data.push(newPointGroup);
49564         this.reset();
49565         this.strokeUpdate(e);
49566     },
49567     
49568     strokeUpdate: function(e)
49569     {
49570         var rect = this.canvasEl().dom.getBoundingClientRect();
49571         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
49572         var lastPointGroup = this.curve_data[this.curve_data.length - 1];
49573         var lastPoints = lastPointGroup.points;
49574         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
49575         var isLastPointTooClose = lastPoint
49576             ? point.distanceTo(lastPoint) <= this.min_distance
49577             : false;
49578         var color = lastPointGroup.color;
49579         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
49580             var curve = this.addPoint(point);
49581             if (!lastPoint) {
49582                 this.drawDot({color: color, point: point});
49583             }
49584             else if (curve) {
49585                 this.drawCurve({color: color, curve: curve});
49586             }
49587             lastPoints.push({
49588                 time: point.time,
49589                 x: point.x,
49590                 y: point.y
49591             });
49592         }
49593     },
49594     
49595     strokeEnd: function(e)
49596     {
49597         this.strokeUpdate(e);
49598         if (typeof this.onEnd === 'function') {
49599             this.onEnd(e);
49600         }
49601     },
49602     
49603     addPoint:  function (point) {
49604         var _lastPoints = this._lastPoints;
49605         _lastPoints.push(point);
49606         if (_lastPoints.length > 2) {
49607             if (_lastPoints.length === 3) {
49608                 _lastPoints.unshift(_lastPoints[0]);
49609             }
49610             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
49611             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
49612             _lastPoints.shift();
49613             return curve;
49614         }
49615         return null;
49616     },
49617     
49618     calculateCurveWidths: function (startPoint, endPoint) {
49619         var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
49620             (1 - this.velocity_filter_weight) * this._lastVelocity;
49621
49622         var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
49623         var widths = {
49624             end: newWidth,
49625             start: this._lastWidth
49626         };
49627         
49628         this._lastVelocity = velocity;
49629         this._lastWidth = newWidth;
49630         return widths;
49631     },
49632     
49633     drawDot: function (_a) {
49634         var color = _a.color, point = _a.point;
49635         var ctx = this.canvasElCtx();
49636         var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
49637         ctx.beginPath();
49638         this.drawCurveSegment(point.x, point.y, width);
49639         ctx.closePath();
49640         ctx.fillStyle = color;
49641         ctx.fill();
49642     },
49643     
49644     drawCurve: function (_a) {
49645         var color = _a.color, curve = _a.curve;
49646         var ctx = this.canvasElCtx();
49647         var widthDelta = curve.endWidth - curve.startWidth;
49648         var drawSteps = Math.floor(curve.length()) * 2;
49649         ctx.beginPath();
49650         ctx.fillStyle = color;
49651         for (var i = 0; i < drawSteps; i += 1) {
49652         var t = i / drawSteps;
49653         var tt = t * t;
49654         var ttt = tt * t;
49655         var u = 1 - t;
49656         var uu = u * u;
49657         var uuu = uu * u;
49658         var x = uuu * curve.startPoint.x;
49659         x += 3 * uu * t * curve.control1.x;
49660         x += 3 * u * tt * curve.control2.x;
49661         x += ttt * curve.endPoint.x;
49662         var y = uuu * curve.startPoint.y;
49663         y += 3 * uu * t * curve.control1.y;
49664         y += 3 * u * tt * curve.control2.y;
49665         y += ttt * curve.endPoint.y;
49666         var width = curve.startWidth + ttt * widthDelta;
49667         this.drawCurveSegment(x, y, width);
49668         }
49669         ctx.closePath();
49670         ctx.fill();
49671     },
49672     
49673     drawCurveSegment: function (x, y, width) {
49674         var ctx = this.canvasElCtx();
49675         ctx.moveTo(x, y);
49676         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
49677         this.is_empty = false;
49678     },
49679     
49680     clear: function()
49681     {
49682         var ctx = this.canvasElCtx();
49683         var canvas = this.canvasEl().dom;
49684         ctx.fillStyle = this.bg_color;
49685         ctx.clearRect(0, 0, canvas.width, canvas.height);
49686         ctx.fillRect(0, 0, canvas.width, canvas.height);
49687         this.curve_data = [];
49688         this.reset();
49689         this.is_empty = true;
49690     },
49691     
49692     fileEl: function()
49693     {
49694         return  this.el.select('input',true).first();
49695     },
49696     
49697     canvasEl: function()
49698     {
49699         return this.el.select('canvas',true).first();
49700     },
49701     
49702     canvasElCtx: function()
49703     {
49704         return this.el.select('canvas',true).first().dom.getContext('2d');
49705     },
49706     
49707     getImage: function(type)
49708     {
49709         if(this.is_empty) {
49710             return false;
49711         }
49712         
49713         // encryption ?
49714         return this.canvasEl().dom.toDataURL('image/'+type, 1);
49715     },
49716     
49717     drawFromImage: function(img_src)
49718     {
49719         var img = new Image();
49720         
49721         img.onload = function(){
49722             this.canvasElCtx().drawImage(img, 0, 0);
49723         }.bind(this);
49724         
49725         img.src = img_src;
49726         
49727         this.is_empty = false;
49728     },
49729     
49730     selectImage: function()
49731     {
49732         this.fileEl().dom.click();
49733     },
49734     
49735     uploadImage: function(e)
49736     {
49737         var reader = new FileReader();
49738         
49739         reader.onload = function(e){
49740             var img = new Image();
49741             img.onload = function(){
49742                 this.reset();
49743                 this.canvasElCtx().drawImage(img, 0, 0);
49744             }.bind(this);
49745             img.src = e.target.result;
49746         }.bind(this);
49747         
49748         reader.readAsDataURL(e.target.files[0]);
49749     },
49750     
49751     // Bezier Point Constructor
49752     Point: (function () {
49753         function Point(x, y, time) {
49754             this.x = x;
49755             this.y = y;
49756             this.time = time || Date.now();
49757         }
49758         Point.prototype.distanceTo = function (start) {
49759             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
49760         };
49761         Point.prototype.equals = function (other) {
49762             return this.x === other.x && this.y === other.y && this.time === other.time;
49763         };
49764         Point.prototype.velocityFrom = function (start) {
49765             return this.time !== start.time
49766             ? this.distanceTo(start) / (this.time - start.time)
49767             : 0;
49768         };
49769         return Point;
49770     }()),
49771     
49772     
49773     // Bezier Constructor
49774     Bezier: (function () {
49775         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
49776             this.startPoint = startPoint;
49777             this.control2 = control2;
49778             this.control1 = control1;
49779             this.endPoint = endPoint;
49780             this.startWidth = startWidth;
49781             this.endWidth = endWidth;
49782         }
49783         Bezier.fromPoints = function (points, widths, scope) {
49784             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
49785             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
49786             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
49787         };
49788         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
49789             var dx1 = s1.x - s2.x;
49790             var dy1 = s1.y - s2.y;
49791             var dx2 = s2.x - s3.x;
49792             var dy2 = s2.y - s3.y;
49793             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
49794             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
49795             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
49796             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
49797             var dxm = m1.x - m2.x;
49798             var dym = m1.y - m2.y;
49799             var k = l2 / (l1 + l2);
49800             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
49801             var tx = s2.x - cm.x;
49802             var ty = s2.y - cm.y;
49803             return {
49804                 c1: new scope.Point(m1.x + tx, m1.y + ty),
49805                 c2: new scope.Point(m2.x + tx, m2.y + ty)
49806             };
49807         };
49808         Bezier.prototype.length = function () {
49809             var steps = 10;
49810             var length = 0;
49811             var px;
49812             var py;
49813             for (var i = 0; i <= steps; i += 1) {
49814                 var t = i / steps;
49815                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
49816                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
49817                 if (i > 0) {
49818                     var xdiff = cx - px;
49819                     var ydiff = cy - py;
49820                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
49821                 }
49822                 px = cx;
49823                 py = cy;
49824             }
49825             return length;
49826         };
49827         Bezier.prototype.point = function (t, start, c1, c2, end) {
49828             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
49829             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
49830             + (3.0 * c2 * (1.0 - t) * t * t)
49831             + (end * t * t * t);
49832         };
49833         return Bezier;
49834     }()),
49835     
49836     throttleStroke: function(fn, wait) {
49837       if (wait === void 0) { wait = 250; }
49838       var previous = 0;
49839       var timeout = null;
49840       var result;
49841       var storedContext;
49842       var storedArgs;
49843       var later = function () {
49844           previous = Date.now();
49845           timeout = null;
49846           result = fn.apply(storedContext, storedArgs);
49847           if (!timeout) {
49848               storedContext = null;
49849               storedArgs = [];
49850           }
49851       };
49852       return function wrapper() {
49853           var args = [];
49854           for (var _i = 0; _i < arguments.length; _i++) {
49855               args[_i] = arguments[_i];
49856           }
49857           var now = Date.now();
49858           var remaining = wait - (now - previous);
49859           storedContext = this;
49860           storedArgs = args;
49861           if (remaining <= 0 || remaining > wait) {
49862               if (timeout) {
49863                   clearTimeout(timeout);
49864                   timeout = null;
49865               }
49866               previous = now;
49867               result = fn.apply(storedContext, storedArgs);
49868               if (!timeout) {
49869                   storedContext = null;
49870                   storedArgs = [];
49871               }
49872           }
49873           else if (!timeout) {
49874               timeout = window.setTimeout(later, remaining);
49875           }
49876           return result;
49877       };
49878   }
49879   
49880 });
49881
49882  
49883
49884  // old names for form elements
49885 Roo.bootstrap.Form          =   Roo.bootstrap.form.Form;
49886 Roo.bootstrap.Input         =   Roo.bootstrap.form.Input;
49887 Roo.bootstrap.TextArea      =   Roo.bootstrap.form.TextArea;
49888 Roo.bootstrap.TriggerField  =   Roo.bootstrap.form.TriggerField;
49889 Roo.bootstrap.ComboBox      =   Roo.bootstrap.form.ComboBox;
49890 Roo.bootstrap.DateField     =   Roo.bootstrap.form.DateField;
49891 Roo.bootstrap.TimeField     =   Roo.bootstrap.form.TimeField;
49892 Roo.bootstrap.MonthField    =   Roo.bootstrap.form.MonthField;
49893 Roo.bootstrap.CheckBox      =   Roo.bootstrap.form.CheckBox;
49894 Roo.bootstrap.Radio         =   Roo.bootstrap.form.Radio;
49895 Roo.bootstrap.RadioSet      =   Roo.bootstrap.form.RadioSet;
49896 Roo.bootstrap.SecurePass    =   Roo.bootstrap.form.SecurePass;
49897 Roo.bootstrap.FieldLabel    =   Roo.bootstrap.form.FieldLabel;
49898 Roo.bootstrap.DateSplitField=   Roo.bootstrap.form.DateSplitField;
49899 Roo.bootstrap.NumberField   =   Roo.bootstrap.form.NumberField;
49900 Roo.bootstrap.PhoneInput    =   Roo.bootstrap.form.PhoneInput;
49901 Roo.bootstrap.PhoneInputData=   Roo.bootstrap.form.PhoneInputData;
49902 Roo.bootstrap.MoneyField    =   Roo.bootstrap.form.MoneyField;
49903 Roo.bootstrap.HtmlEditor    =   Roo.bootstrap.form.HtmlEditor;
49904 Roo.bootstrap.HtmlEditor.ToolbarStandard =   Roo.bootstrap.form.HtmlEditorToolbarStandard;
49905 Roo.bootstrap.Markdown      = Roo.bootstrap.form.Markdown;
49906 Roo.bootstrap.CardUploader  = Roo.bootstrap.form.CardUploader;// depricated.
49907 Roo.bootstrap.Navbar            = Roo.bootstrap.nav.Bar;
49908 Roo.bootstrap.NavGroup          = Roo.bootstrap.nav.Group;
49909 Roo.bootstrap.NavHeaderbar      = Roo.bootstrap.nav.Headerbar;
49910 Roo.bootstrap.NavItem           = Roo.bootstrap.nav.Item;
49911
49912 Roo.bootstrap.NavProgressBar     = Roo.bootstrap.nav.ProgressBar;
49913 Roo.bootstrap.NavProgressBarItem = Roo.bootstrap.nav.ProgressBarItem;
49914
49915 Roo.bootstrap.NavSidebar        = Roo.bootstrap.nav.Sidebar;
49916 Roo.bootstrap.NavSidebarItem    = Roo.bootstrap.nav.SidebarItem;
49917
49918 Roo.bootstrap.NavSimplebar      = Roo.bootstrap.nav.Simplebar;// deprciated 
49919 Roo.bootstrap.Menu = Roo.bootstrap.menu.Menu;
49920 Roo.bootstrap.MenuItem =  Roo.bootstrap.menu.Item;
49921 Roo.bootstrap.MenuSeparator = Roo.bootstrap.menu.Separator
49922