2 * set the version of bootstrap based on the stylesheet...
6 Roo.bootstrap.version = ( function() {
8 Roo.each(document.styleSheets, function(s) {
9 if ( s.href && s.href.match(/css-bootstrap4/)) {
14 Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY;
19 * Ext JS Library 1.1.1
20 * Copyright(c) 2006-2007, Ext JS, LLC.
22 * Originally Released Under LGPL - original licence link has changed is not relivant.
25 * <script type="text/javascript">
31 * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
32 * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
33 * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
36 * @param {Object} config The config object
38 Roo.Shadow = function(config){
39 Roo.apply(this, config);
40 if(typeof this.mode != "string"){
41 this.mode = this.defaultMode;
43 var o = this.offset, a = {h: 0};
44 var rad = Math.floor(this.offset/2);
45 switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
51 a.l -= this.offset + rad;
52 a.t -= this.offset + rad;
63 a.l -= (this.offset - rad);
64 a.t -= this.offset + rad;
66 a.w -= (this.offset - rad)*2;
77 a.l -= (this.offset - rad);
78 a.t -= (this.offset - rad);
80 a.w -= (this.offset + rad + 1);
81 a.h -= (this.offset + rad);
90 Roo.Shadow.prototype = {
93 * The shadow display mode. Supports the following options:<br />
94 * sides: Shadow displays on both sides and bottom only<br />
95 * frame: Shadow displays equally on all four sides<br />
96 * drop: Traditional bottom-right drop shadow (default)
99 * @cfg {String} offset
100 * The number of pixels to offset the shadow from the element (defaults to 4)
108 * Displays the shadow under the target element
109 * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
111 show : function(target){
112 target = Roo.get(target);
114 this.el = Roo.Shadow.Pool.pull();
115 if(this.el.dom.nextSibling != target.dom){
116 this.el.insertBefore(target);
119 this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
121 this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
124 target.getLeft(true),
129 this.el.dom.style.display = "block";
133 * Returns true if the shadow is visible, else false
135 isVisible : function(){
136 return this.el ? true : false;
140 * Direct alignment when values are already available. Show must be called at least once before
141 * calling this method to ensure it is initialized.
142 * @param {Number} left The target element left position
143 * @param {Number} top The target element top position
144 * @param {Number} width The target element width
145 * @param {Number} height The target element height
147 realign : function(l, t, w, h){
151 var a = this.adjusts, d = this.el.dom, s = d.style;
153 s.left = (l+a.l)+"px";
154 s.top = (t+a.t)+"px";
155 var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
157 if(s.width != sws || s.height != shs){
161 var cn = d.childNodes;
162 var sww = Math.max(0, (sw-12))+"px";
163 cn[0].childNodes[1].style.width = sww;
164 cn[1].childNodes[1].style.width = sww;
165 cn[2].childNodes[1].style.width = sww;
166 cn[1].style.height = Math.max(0, (sh-12))+"px";
176 this.el.dom.style.display = "none";
177 Roo.Shadow.Pool.push(this.el);
183 * Adjust the z-index of this shadow
184 * @param {Number} zindex The new z-index
186 setZIndex : function(z){
189 this.el.setStyle("z-index", z);
194 // Private utility class that manages the internal Shadow cache
195 Roo.Shadow.Pool = function(){
197 var markup = Roo.isIE ?
198 '<div class="x-ie-shadow"></div>' :
199 '<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 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
205 sh.autoBoxAdjust = false;
217 * base class for bootstrap elements.
221 Roo.bootstrap = Roo.bootstrap || {};
223 * @class Roo.bootstrap.Component
224 * @extends Roo.Component
225 * Bootstrap Component base class
226 * @cfg {String} cls css class
227 * @cfg {String} style any extra css
228 * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
229 * @cfg {Boolean} can_build_overlaid True if element can be rebuild from a HTML page
230 * @cfg {string} dataId cutomer id
231 * @cfg {string} name Specifies name attribute
232 * @cfg {string} tooltip Text for the tooltip
233 * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar - getHeaderChildContainer)
234 * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
237 * Do not use directly - it does not do anything..
238 * @param {Object} config The config object
243 Roo.bootstrap.Component = function(config){
244 Roo.bootstrap.Component.superclass.constructor.call(this, config);
248 * @event childrenrendered
249 * Fires when the children have been rendered..
250 * @param {Roo.bootstrap.Component} this
252 "childrenrendered" : true
261 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
264 allowDomMove : false, // to stop relocations in parent onRender...
274 * Initialize Events for the element
276 initEvents : function() { },
282 can_build_overlaid : true,
284 container_method : false,
291 // returns the parent component..
292 return Roo.ComponentMgr.get(this.parentId)
298 onRender : function(ct, position)
300 // Roo.log("Call onRender: " + this.xtype);
302 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
305 if (this.el.attr('xtype')) {
306 this.el.attr('xtypex', this.el.attr('xtype'));
307 this.el.dom.removeAttribute('xtype');
317 var cfg = Roo.apply({}, this.getAutoCreate());
319 cfg.id = this.id || Roo.id();
321 // fill in the extra attributes
322 if (this.xattr && typeof(this.xattr) =='object') {
323 for (var i in this.xattr) {
324 cfg[i] = this.xattr[i];
329 cfg.dataId = this.dataId;
333 cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
336 if (this.style) { // fixme needs to support more complex style data.
337 cfg.style = this.style;
341 cfg.name = this.name;
344 this.el = ct.createChild(cfg, position);
347 this.tooltipEl().attr('tooltip', this.tooltip);
350 if(this.tabIndex !== undefined){
351 this.el.dom.setAttribute('tabIndex', this.tabIndex);
358 * Fetch the element to add children to
359 * @return {Roo.Element} defaults to this.el
361 getChildContainer : function()
366 * Fetch the element to display the tooltip on.
367 * @return {Roo.Element} defaults to this.el
369 tooltipEl : function()
374 addxtype : function(tree,cntr)
378 cn = Roo.factory(tree);
379 //Roo.log(['addxtype', cn]);
381 cn.parentType = this.xtype; //??
382 cn.parentId = this.id;
384 cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
385 if (typeof(cn.container_method) == 'string') {
386 cntr = cn.container_method;
390 var has_flexy_each = (typeof(tree['flexy:foreach']) != 'undefined');
392 var has_flexy_if = (typeof(tree['flexy:if']) != 'undefined');
394 var build_from_html = Roo.XComponent.build_from_html;
396 var is_body = (tree.xtype == 'Body') ;
398 var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
400 var self_cntr_el = Roo.get(this[cntr](false));
402 // do not try and build conditional elements
403 if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
407 if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
408 if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
409 return this.addxtypeChild(tree,cntr, is_body);
412 var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
415 return this.addxtypeChild(Roo.apply({}, tree),cntr);
418 Roo.log('skipping render');
424 if (!build_from_html) {
428 // this i think handles overlaying multiple children of the same type
429 // with the sam eelement.. - which might be buggy..
431 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
437 if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
441 ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
448 addxtypeChild : function (tree, cntr, is_body)
450 Roo.debug && Roo.log('addxtypeChild:' + cntr);
452 cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
455 var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
456 (typeof(tree['flexy:foreach']) != 'undefined');
460 skip_children = false;
461 // render the element if it's not BODY.
464 // if parent was disabled, then do not try and create the children..
465 if(!this[cntr](true)){
470 cn = Roo.factory(tree);
472 cn.parentType = this.xtype; //??
473 cn.parentId = this.id;
475 var build_from_html = Roo.XComponent.build_from_html;
478 // does the container contain child eleemnts with 'xtype' attributes.
479 // that match this xtype..
480 // note - when we render we create these as well..
481 // so we should check to see if body has xtype set.
482 if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
484 var self_cntr_el = Roo.get(this[cntr](false));
485 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
487 //Roo.log(Roo.XComponent.build_from_html);
488 //Roo.log("got echild:");
491 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
492 // and are not displayed -this causes this to use up the wrong element when matching.
493 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
496 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
497 // Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
503 //echild.dom.removeAttribute('xtype');
505 Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
506 Roo.debug && Roo.log(self_cntr_el);
507 Roo.debug && Roo.log(echild);
508 Roo.debug && Roo.log(cn);
514 // if object has flexy:if - then it may or may not be rendered.
515 if (build_from_html && has_flexy && !cn.el && cn.can_build_overlaid) {
516 // skip a flexy if element.
517 Roo.debug && Roo.log('skipping render');
518 Roo.debug && Roo.log(tree);
520 Roo.debug && Roo.log('skipping all children');
521 skip_children = true;
526 // actually if flexy:foreach is found, we really want to create
527 // multiple copies here...
529 //Roo.log(this[cntr]());
530 // some elements do not have render methods.. like the layouts...
532 if(this[cntr](true) === false){
537 cn.render && cn.render(this[cntr](true));
540 // then add the element..
547 if (typeof (tree.menu) != 'undefined') {
548 tree.menu.parentType = cn.xtype;
549 tree.menu.triggerEl = cn.el;
550 nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
554 if (!tree.items || !tree.items.length) {
556 //Roo.log(["no children", this]);
561 var items = tree.items;
564 //Roo.log(items.length);
566 if (!skip_children) {
567 for(var i =0;i < items.length;i++) {
568 // Roo.log(['add child', items[i]]);
569 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
575 //Roo.log("fire childrenrendered");
577 cn.fireEvent('childrenrendered', this);
583 * Set the element that will be used to show or hide
585 setVisibilityEl : function(el)
587 this.visibilityEl = el;
591 * Get the element that will be used to show or hide
593 getVisibilityEl : function()
595 if (typeof(this.visibilityEl) == 'object') {
596 return this.visibilityEl;
599 if (typeof(this.visibilityEl) == 'string') {
600 return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
607 * Show a component - removes 'hidden' class
611 if(!this.getVisibilityEl()){
615 this.getVisibilityEl().removeClass(['hidden','d-none']);
617 this.fireEvent('show', this);
622 * Hide a component - adds 'hidden' class
626 if(!this.getVisibilityEl()){
630 this.getVisibilityEl().addClass(['hidden','d-none']);
632 this.fireEvent('hide', this);
645 * @class Roo.bootstrap.Element
646 * @extends Roo.bootstrap.Component
647 * Bootstrap Element class
648 * @cfg {String} html contents of the element
649 * @cfg {String} tag tag of the element
650 * @cfg {String} cls class of the element
651 * @cfg {Boolean} preventDefault (true|false) default false
652 * @cfg {Boolean} clickable (true|false) default false
655 * Create a new Element
656 * @param {Object} config The config object
659 Roo.bootstrap.Element = function(config){
660 Roo.bootstrap.Element.superclass.constructor.call(this, config);
666 * When a element is chick
667 * @param {Roo.bootstrap.Element} this
668 * @param {Roo.EventObject} e
674 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
679 preventDefault: false,
682 getAutoCreate : function(){
686 // cls: this.cls, double assign in parent class Component.js :: onRender
693 initEvents: function()
695 Roo.bootstrap.Element.superclass.initEvents.call(this);
698 this.el.on('click', this.onClick, this);
703 onClick : function(e)
705 if(this.preventDefault){
709 this.fireEvent('click', this, e);
712 getValue : function()
714 return this.el.dom.innerHTML;
717 setValue : function(value)
719 this.el.dom.innerHTML = value;
734 * @class Roo.bootstrap.DropTarget
735 * @extends Roo.bootstrap.Element
736 * Bootstrap DropTarget class
738 * @cfg {string} name dropable name
741 * Create a new Dropable Area
742 * @param {Object} config The config object
745 Roo.bootstrap.DropTarget = function(config){
746 Roo.bootstrap.DropTarget.superclass.constructor.call(this, config);
752 * When a element is chick
753 * @param {Roo.bootstrap.Element} this
754 * @param {Roo.EventObject} e
760 Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element, {
763 getAutoCreate : function(){
768 initEvents: function()
770 Roo.bootstrap.DropTarget.superclass.initEvents.call(this);
771 this.dropZone = new Roo.dd.DropTarget(this.getEl(), {
774 drop : this.dragDrop.createDelegate(this),
775 enter : this.dragEnter.createDelegate(this),
776 out : this.dragOut.createDelegate(this),
777 over : this.dragOver.createDelegate(this)
781 this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff
784 dragDrop : function(source,e,data)
786 // user has to decide how to impliment this.
789 //this.fireEvent('drop', this, source, e ,data);
793 dragEnter : function(n, dd, e, data)
795 // probably want to resize the element to match the dropped element..
797 this.originalSize = this.el.getSize();
798 this.el.setSize( n.el.getSize());
799 this.dropZone.DDM.refreshCache(this.name);
800 Roo.log([n, dd, e, data]);
803 dragOut : function(value)
805 // resize back to normal
807 this.el.setSize(this.originalSize);
808 this.dropZone.resetConstraints();
811 dragOver : function()
828 * @class Roo.bootstrap.Body
829 * @extends Roo.bootstrap.Component
830 * Bootstrap Body class
834 * @param {Object} config The config object
837 Roo.bootstrap.Body = function(config){
839 config = config || {};
841 Roo.bootstrap.Body.superclass.constructor.call(this, config);
842 this.el = Roo.get(config.el ? config.el : document.body );
843 if (this.cls && this.cls.length) {
844 Roo.get(document.body).addClass(this.cls);
848 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component, {
850 is_body : true,// just to make sure it's constructed?
855 onRender : function(ct, position)
857 /* Roo.log("Roo.bootstrap.Body - onRender");
858 if (this.cls && this.cls.length) {
859 Roo.get(document.body).addClass(this.cls);
878 * @class Roo.bootstrap.ButtonGroup
879 * @extends Roo.bootstrap.Component
880 * Bootstrap ButtonGroup class
881 * @cfg {String} size lg | sm | xs (default empty normal)
882 * @cfg {String} align vertical | justified (default none)
883 * @cfg {String} direction up | down (default down)
884 * @cfg {Boolean} toolbar false | true
885 * @cfg {Boolean} btn true | false
890 * @param {Object} config The config object
893 Roo.bootstrap.ButtonGroup = function(config){
894 Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
897 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, {
905 getAutoCreate : function(){
911 cfg.html = this.html || cfg.html;
922 if (['vertical','justified'].indexOf(this.align)!==-1) {
923 cfg.cls = 'btn-group-' + this.align;
925 if (this.align == 'justified') {
926 console.log(this.items);
930 if (['lg','sm','xs'].indexOf(this.size)!==-1) {
931 cfg.cls += ' btn-group-' + this.size;
934 if (this.direction == 'up') {
935 cfg.cls += ' dropup' ;
941 * Add a button to the group (similar to NavItem API.)
943 addItem : function(cfg)
945 var cn = new Roo.bootstrap.Button(cfg);
947 cn.parentId = this.id;
948 cn.onRender(this.el, null);
962 * @class Roo.bootstrap.Button
963 * @extends Roo.bootstrap.Component
964 * Bootstrap Button class
965 * @cfg {String} html The button content
966 * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
967 * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button)
968 * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
969 * @cfg {String} size (lg|sm|xs)
970 * @cfg {String} tag (a|input|submit)
971 * @cfg {String} href empty or href
972 * @cfg {Boolean} disabled default false;
973 * @cfg {Boolean} isClose default false;
974 * @cfg {String} glyphicon depricated - use fa
975 * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
976 * @cfg {String} badge text for badge
977 * @cfg {String} theme (default|glow)
978 * @cfg {Boolean} inverse dark themed version
979 * @cfg {Boolean} toggle is it a slidy toggle button
980 * @cfg {Boolean} pressed default null - if the button ahs active state
981 * @cfg {String} ontext text for on slidy toggle state
982 * @cfg {String} offtext text for off slidy toggle state
983 * @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.)
984 * @cfg {Boolean} removeClass remove the standard class..
985 * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
986 * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
989 * Create a new button
990 * @param {Object} config The config object
994 Roo.bootstrap.Button = function(config){
995 Roo.bootstrap.Button.superclass.constructor.call(this, config);
1001 * When a button is pressed
1002 * @param {Roo.bootstrap.Button} btn
1003 * @param {Roo.EventObject} e
1008 * When a button is double clicked
1009 * @param {Roo.bootstrap.Button} btn
1010 * @param {Roo.EventObject} e
1015 * After the button has been toggles
1016 * @param {Roo.bootstrap.Button} btn
1017 * @param {Roo.EventObject} e
1018 * @param {boolean} pressed (also available as button.pressed)
1024 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
1045 preventDefault: true,
1054 getAutoCreate : function(){
1062 if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
1063 throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
1064 this.tag = 'button';
1068 cfg.html = '<span class="roo-button-text">' + (this.html || cfg.html) + '</span>';
1070 if (this.toggle == true) {
1073 cls: 'slider-frame roo-button',
1077 'data-on-text':'ON',
1078 'data-off-text':'OFF',
1079 cls: 'slider-button',
1084 // why are we validating the weights?
1085 if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1086 cfg.cls += ' ' + this.weight;
1093 cfg.cls += ' close';
1095 cfg["aria-hidden"] = true;
1097 cfg.html = "×";
1103 if (this.theme==='default') {
1104 cfg.cls = 'btn roo-button';
1106 //if (this.parentType != 'Navbar') {
1107 this.weight = this.weight.length ? this.weight : 'default';
1109 if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1111 var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
1112 var weight = this.weight == 'default' ? 'secondary' : this.weight;
1113 cfg.cls += ' btn-' + outline + weight;
1114 if (this.weight == 'default') {
1116 cfg.cls += ' btn-' + this.weight;
1119 } else if (this.theme==='glow') {
1122 cfg.cls = 'btn-glow roo-button';
1124 if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
1126 cfg.cls += ' ' + this.weight;
1132 this.cls += ' inverse';
1136 if (this.active || this.pressed === true) {
1137 cfg.cls += ' active';
1140 if (this.disabled) {
1141 cfg.disabled = 'disabled';
1145 Roo.log('changing to ul' );
1147 this.glyphicon = 'caret';
1148 if (Roo.bootstrap.version == 4) {
1149 this.fa = 'caret-down';
1154 cfg.cls += this.size.length ? (' btn-' + this.size) : '';
1156 //gsRoo.log(this.parentType);
1157 if (this.parentType === 'Navbar' && !this.parent().bar) {
1158 Roo.log('changing to li?');
1167 href : this.href || '#'
1170 cfg.cn[0].html = this.html + ' <span class="caret"></span>';
1171 cfg.cls += ' dropdown';
1178 cfg.cls += this.parentType === 'Navbar' ? ' navbar-btn' : '';
1180 if (this.glyphicon) {
1181 cfg.html = ' ' + cfg.html;
1186 cls: 'glyphicon glyphicon-' + this.glyphicon
1191 cfg.html = ' ' + cfg.html;
1196 cls: 'fa fas fa-' + this.fa
1206 // cfg.cls='btn roo-button';
1210 var value = cfg.html;
1215 cls: 'glyphicon glyphicon-' + this.glyphicon,
1222 cls: 'fa fas fa-' + this.fa,
1227 var bw = this.badge_weight.length ? this.badge_weight :
1228 (this.weight.length ? this.weight : 'secondary');
1229 bw = bw == 'default' ? 'secondary' : bw;
1235 cls: 'badge badge-' + bw,
1244 cfg.cls += ' dropdown';
1245 cfg.html = typeof(cfg.html) != 'undefined' ?
1246 cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
1249 if (cfg.tag !== 'a' && this.href !== '') {
1250 throw "Tag must be a to set href.";
1251 } else if (this.href.length > 0) {
1252 cfg.href = this.href;
1255 if(this.removeClass){
1260 cfg.target = this.target;
1265 initEvents: function() {
1266 // Roo.log('init events?');
1267 // Roo.log(this.el.dom);
1270 if (typeof (this.menu) != 'undefined') {
1271 this.menu.parentType = this.xtype;
1272 this.menu.triggerEl = this.el;
1273 this.addxtype(Roo.apply({}, this.menu));
1277 if (this.el.hasClass('roo-button')) {
1278 this.el.on('click', this.onClick, this);
1279 this.el.on('dblclick', this.onDblClick, this);
1281 this.el.select('.roo-button').on('click', this.onClick, this);
1282 this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
1286 if(this.removeClass){
1287 this.el.on('click', this.onClick, this);
1290 if (this.group === true) {
1291 if (this.pressed === false || this.pressed === true) {
1294 this.pressed = false;
1295 this.setActive(this.pressed);
1300 this.el.enableDisplayMode();
1303 onClick : function(e)
1305 if (this.disabled) {
1309 Roo.log('button on click ');
1310 if(this.preventDefault){
1319 this.setActive(true);
1320 var pi = this.parent().items;
1321 for (var i = 0;i < pi.length;i++) {
1322 if (this == pi[i]) {
1325 if (pi[i].el.hasClass('roo-button')) {
1326 pi[i].setActive(false);
1329 this.fireEvent('click', this, e);
1333 if (this.pressed === true || this.pressed === false) {
1334 this.toggleActive(e);
1338 this.fireEvent('click', this, e);
1340 onDblClick: function(e)
1342 if (this.disabled) {
1345 if(this.preventDefault){
1348 this.fireEvent('dblclick', this, e);
1351 * Enables this button
1355 this.disabled = false;
1356 this.el.removeClass('disabled');
1360 * Disable this button
1362 disable : function()
1364 this.disabled = true;
1365 this.el.addClass('disabled');
1368 * sets the active state on/off,
1369 * @param {Boolean} state (optional) Force a particular state
1371 setActive : function(v) {
1373 this.el[v ? 'addClass' : 'removeClass']('active');
1377 * toggles the current active state
1379 toggleActive : function(e)
1381 this.setActive(!this.pressed); // this modifies pressed...
1382 this.fireEvent('toggle', this, e, this.pressed);
1385 * get the current active state
1386 * @return {boolean} true if it's active
1388 isActive : function()
1390 return this.el.hasClass('active');
1393 * set the text of the first selected button
1395 setText : function(str)
1397 this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
1400 * get the text of the first selected button
1402 getText : function()
1404 return this.el.select('.roo-button-text',true).first().dom.innerHTML;
1407 setWeight : function(str)
1409 this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
1410 this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
1412 var outline = this.outline ? 'outline-' : '';
1413 if (str == 'default') {
1414 this.el.addClass('btn-default btn-outline-secondary');
1417 this.el.addClass('btn-' + outline + str);
1422 // fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
1424 Roo.bootstrap.Button.weights = [
1444 * @class Roo.bootstrap.Column
1445 * @extends Roo.bootstrap.Component
1446 * Bootstrap Column class
1447 * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
1448 * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
1449 * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
1450 * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
1451 * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
1452 * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
1453 * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
1454 * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
1457 * @cfg {Boolean} hidden (true|false) hide the element
1458 * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1459 * @cfg {String} fa (ban|check|...) font awesome icon
1460 * @cfg {Number} fasize (1|2|....) font awsome size
1462 * @cfg {String} icon (info-sign|check|...) glyphicon name
1464 * @cfg {String} html content of column.
1467 * Create a new Column
1468 * @param {Object} config The config object
1471 Roo.bootstrap.Column = function(config){
1472 Roo.bootstrap.Column.superclass.constructor.call(this, config);
1475 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component, {
1493 getAutoCreate : function(){
1494 var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
1502 var sizes = ['xs','sm','md','lg'];
1503 sizes.map(function(size ,ix){
1504 //Roo.log( size + ':' + settings[size]);
1506 if (settings[size+'off'] !== false) {
1507 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
1510 if (settings[size] === false) {
1514 if (!settings[size]) { // 0 = hidden
1515 cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
1517 for (var i = ix; i > -1; i--) {
1518 cfg.cls += ' d-' + sizes[i] + '-none';
1524 cfg.cls += ' col-' + size + '-' + settings[size] + (
1525 size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
1531 cfg.cls += ' hidden';
1534 if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1535 cfg.cls +=' alert alert-' + this.alert;
1539 if (this.html.length) {
1540 cfg.html = this.html;
1544 if (this.fasize > 1) {
1545 fasize = ' fa-' + this.fasize + 'x';
1547 cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
1552 cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + (cfg.html || '');
1571 * @class Roo.bootstrap.Container
1572 * @extends Roo.bootstrap.Component
1573 * Bootstrap Container class
1574 * @cfg {Boolean} jumbotron is it a jumbotron element
1575 * @cfg {String} html content of element
1576 * @cfg {String} well (lg|sm|md) a well, large, small or medium.
1577 * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel - type - primary/success.....
1578 * @cfg {String} header content of header (for panel)
1579 * @cfg {String} footer content of footer (for panel)
1580 * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
1581 * @cfg {String} tag (header|aside|section) type of HTML tag.
1582 * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
1583 * @cfg {String} fa font awesome icon
1584 * @cfg {String} icon (info-sign|check|...) glyphicon name
1585 * @cfg {Boolean} hidden (true|false) hide the element
1586 * @cfg {Boolean} expandable (true|false) default false
1587 * @cfg {Boolean} expanded (true|false) default true
1588 * @cfg {String} rheader contet on the right of header
1589 * @cfg {Boolean} clickable (true|false) default false
1593 * Create a new Container
1594 * @param {Object} config The config object
1597 Roo.bootstrap.Container = function(config){
1598 Roo.bootstrap.Container.superclass.constructor.call(this, config);
1604 * After the panel has been expand
1606 * @param {Roo.bootstrap.Container} this
1611 * After the panel has been collapsed
1613 * @param {Roo.bootstrap.Container} this
1618 * When a element is chick
1619 * @param {Roo.bootstrap.Container} this
1620 * @param {Roo.EventObject} e
1626 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, {
1644 getChildContainer : function() {
1650 if (this.panel.length) {
1651 return this.el.select('.panel-body',true).first();
1658 getAutoCreate : function(){
1661 tag : this.tag || 'div',
1665 if (this.jumbotron) {
1666 cfg.cls = 'jumbotron';
1671 // - this is applied by the parent..
1673 // cfg.cls = this.cls + '';
1676 if (this.sticky.length) {
1678 var bd = Roo.get(document.body);
1679 if (!bd.hasClass('bootstrap-sticky')) {
1680 bd.addClass('bootstrap-sticky');
1681 Roo.select('html',true).setStyle('height', '100%');
1684 cfg.cls += 'bootstrap-sticky-' + this.sticky;
1688 if (this.well.length) {
1689 switch (this.well) {
1692 cfg.cls +=' well well-' +this.well;
1701 cfg.cls += ' hidden';
1705 if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
1706 cfg.cls +=' alert alert-' + this.alert;
1711 if (this.panel.length) {
1712 cfg.cls += ' panel panel-' + this.panel;
1714 if (this.header.length) {
1718 if(this.expandable){
1720 cfg.cls = cfg.cls + ' expandable';
1724 cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus')
1732 cls : 'panel-title',
1733 html : (this.expandable ? ' ' : '') + this.header
1737 cls: 'panel-header-right',
1743 cls : 'panel-heading',
1744 style : this.expandable ? 'cursor: pointer' : '',
1752 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
1757 if (this.footer.length) {
1759 cls : 'panel-footer',
1768 body.html = this.html || cfg.html;
1769 // prefix with the icons..
1771 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
1774 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
1779 if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
1780 cfg.cls = 'container';
1786 initEvents: function()
1788 if(this.expandable){
1789 var headerEl = this.headerEl();
1792 headerEl.on('click', this.onToggleClick, this);
1797 this.el.on('click', this.onClick, this);
1802 onToggleClick : function()
1804 var headerEl = this.headerEl();
1820 if(this.fireEvent('expand', this)) {
1822 this.expanded = true;
1824 //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
1826 this.el.select('.panel-body',true).first().removeClass('hide');
1828 var toggleEl = this.toggleEl();
1834 toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-minus']);
1839 collapse : function()
1841 if(this.fireEvent('collapse', this)) {
1843 this.expanded = false;
1845 //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
1846 this.el.select('.panel-body',true).first().addClass('hide');
1848 var toggleEl = this.toggleEl();
1854 toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-plus']);
1858 toggleEl : function()
1860 if(!this.el || !this.panel.length || !this.header.length || !this.expandable){
1864 return this.el.select('.panel-heading .fa',true).first();
1867 headerEl : function()
1869 if(!this.el || !this.panel.length || !this.header.length){
1873 return this.el.select('.panel-heading',true).first()
1878 if(!this.el || !this.panel.length){
1882 return this.el.select('.panel-body',true).first()
1885 titleEl : function()
1887 if(!this.el || !this.panel.length || !this.header.length){
1891 return this.el.select('.panel-title',true).first();
1894 setTitle : function(v)
1896 var titleEl = this.titleEl();
1902 titleEl.dom.innerHTML = v;
1905 getTitle : function()
1908 var titleEl = this.titleEl();
1914 return titleEl.dom.innerHTML;
1917 setRightTitle : function(v)
1919 var t = this.el.select('.panel-header-right',true).first();
1925 t.dom.innerHTML = v;
1928 onClick : function(e)
1932 this.fireEvent('click', this, e);
1939 * This is BS4's Card element.. - similar to our containers probably..
1943 * @class Roo.bootstrap.Card
1944 * @extends Roo.bootstrap.Component
1945 * Bootstrap Card class
1948 * possible... may not be implemented..
1949 * @cfg {String} header_image src url of image.
1950 * @cfg {String|Object} header
1951 * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
1952 * @cfg {Number} header_weight (primary|secondary|success|info|warning|danger|light|dark)
1954 * @cfg {String} title
1955 * @cfg {String} subtitle
1956 * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
1957 * @cfg {String} footer
1959 * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
1961 * @cfg {String} margin (0|1|2|3|4|5|auto)
1962 * @cfg {String} margin_top (0|1|2|3|4|5|auto)
1963 * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
1964 * @cfg {String} margin_left (0|1|2|3|4|5|auto)
1965 * @cfg {String} margin_right (0|1|2|3|4|5|auto)
1966 * @cfg {String} margin_x (0|1|2|3|4|5|auto)
1967 * @cfg {String} margin_y (0|1|2|3|4|5|auto)
1969 * @cfg {String} padding (0|1|2|3|4|5)
1970 * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card
1971 * @cfg {String} padding_bottom (0|1|2|3|4|5)
1972 * @cfg {String} padding_left (0|1|2|3|4|5)
1973 * @cfg {String} padding_right (0|1|2|3|4|5)
1974 * @cfg {String} padding_x (0|1|2|3|4|5)
1975 * @cfg {String} padding_y (0|1|2|3|4|5)
1977 * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
1978 * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
1979 * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
1980 * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
1981 * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
1983 * @config {Boolean} dragable if this card can be dragged.
1984 * @config {String} drag_group group for drag
1985 * @config {Boolean} dropable if this card can recieve other cards being dropped onto it..
1986 * @config {String} drop_group group for drag
1988 * @config {Boolean} collapsable can the body be collapsed.
1989 * @config {Boolean} collapsed is the body collapsed when rendered...
1990 * @config {Boolean} rotateable can the body be rotated by clicking on it..
1991 * @config {Boolean} rotated is the body rotated when rendered...
1994 * Create a new Container
1995 * @param {Object} config The config object
1998 Roo.bootstrap.Card = function(config){
1999 Roo.bootstrap.Card.superclass.constructor.call(this, config);
2005 * When a element a card is dropped
2006 * @param {Roo.bootstrap.Card} this
2009 * @param {Roo.bootstrap.Card} move_card the card being dropped?
2010 * @param {String} position 'above' or 'below'
2011 * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list.
2017 * When a element a card is rotate
2018 * @param {Roo.bootstrap.Element} this
2019 * @param {Roo.Element} n the node being dropped?
2020 * @param {Boolean} rotate status
2028 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
2033 margin: '', /// may be better in component?
2063 collapsable : false,
2072 childContainer : false,
2073 dropEl : false, /// the dom placeholde element that indicates drop location.
2074 containerEl: false, // body container
2075 bodyEl: false, // card-body
2076 headerContainerEl : false, //
2079 layoutCls : function()
2083 Roo.log(this.margin_bottom.length);
2084 ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
2085 // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
2087 if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
2088 cls += ' m' + (v.length ? v[0] : '') + '-' + t['margin' + (v.length ? '_' : '') + v];
2090 if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
2091 cls += ' p' + (v.length ? v[0] : '') + '-' + t['padding' + (v.length ? '_' : '') + v];
2095 ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
2096 if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
2097 cls += ' d' + (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
2101 // more generic support?
2109 // Roo.log("Call onRender: " + this.xtype);
2110 /* We are looking at something like this.
2112 <img src="..." class="card-img-top" alt="...">
2113 <div class="card-body">
2114 <h5 class="card-title">Card title</h5>
2115 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
2117 >> this bit is really the body...
2118 <div> << we will ad dthis in hopefully it will not break shit.
2120 ** card text does not actually have any styling...
2122 <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>
2125 <a href="#" class="card-link">Card link</a>
2128 <div class="card-footer">
2129 <small class="text-muted">Last updated 3 mins ago</small>
2133 getAutoCreate : function(){
2141 if (this.weight.length && this.weight != 'light') {
2142 cfg.cls += ' text-white';
2144 cfg.cls += ' text-dark'; // need as it's nested..
2146 if (this.weight.length) {
2147 cfg.cls += ' bg-' + this.weight;
2150 cfg.cls += ' ' + this.layoutCls();
2153 var hdr_ctr = false;
2154 if (this.header.length) {
2156 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
2157 cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2165 cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
2171 if (this.collapsable) {
2174 cls : 'd-block user-select-none',
2178 cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
2183 hdr.cn.push(hdr_ctr);
2188 cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
2193 if (this.header_image.length) {
2196 cls : 'card-img-top',
2197 src: this.header_image // escape?
2202 cls : 'card-img-top d-none'
2208 cls : 'card-body' + (this.html === false ? ' d-none' : ''),
2212 if (this.collapsable || this.rotateable) {
2215 cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
2222 if (this.title.length) {
2226 src: this.title // escape?
2230 if (this.subtitle.length) {
2234 src: this.subtitle // escape?
2240 cls : 'roo-card-body-ctr'
2243 if (this.html.length) {
2249 // fixme ? handle objects?
2251 if (this.footer.length) {
2254 cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
2259 cfg.cn.push({cls : 'card-footer d-none'});
2268 getCardHeader : function()
2270 var ret = this.el.select('.card-header',true).first();
2271 if (ret.hasClass('d-none')) {
2272 ret.removeClass('d-none');
2277 getCardFooter : function()
2279 var ret = this.el.select('.card-footer',true).first();
2280 if (ret.hasClass('d-none')) {
2281 ret.removeClass('d-none');
2286 getCardImageTop : function()
2288 var ret = this.el.select('.card-img-top',true).first();
2289 if (ret.hasClass('d-none')) {
2290 ret.removeClass('d-none');
2296 getChildContainer : function()
2302 return this.el.select('.roo-card-body-ctr',true).first();
2305 initEvents: function()
2307 this.bodyEl = this.el.select('.card-body',true).first();
2308 this.containerEl = this.getChildContainer();
2310 this.dragZone = new Roo.dd.DragZone(this.getEl(), {
2311 containerScroll: true,
2312 ddGroup: this.drag_group || 'default_card_drag_group'
2314 this.dragZone.getDragData = this.getDragData.createDelegate(this);
2316 if (this.dropable) {
2317 this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
2318 containerScroll: true,
2319 ddGroup: this.drop_group || 'default_card_drag_group'
2321 this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
2322 this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
2323 this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
2324 this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
2325 this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
2328 if (this.collapsable) {
2329 this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
2331 if (this.rotateable) {
2332 this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
2334 this.collapsableEl = this.el.select('.roo-collapsable').first();
2336 this.footerEl = this.el.select('.card-footer').first();
2337 this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
2338 this.headerContainerEl = this.el.select('.roo-card-header-ctr').first();
2339 this.headerEl = this.el.select('.card-header',true).first();
2342 this.el.addClass('roo-card-rotated');
2343 this.fireEvent('rotate', this, true);
2347 getDragData : function(e)
2349 var target = this.getEl();
2351 //this.handleSelection(e);
2356 nodes: this.getEl(),
2361 dragData.ddel = target.dom ; // the div element
2362 Roo.log(target.getWidth( ));
2363 dragData.ddel.style.width = target.getWidth() + 'px';
2370 * Part of the Roo.dd.DropZone interface. If no target node is found, the
2371 * whole Element becomes the target, and this causes the drop gesture to append.
2373 getTargetFromEvent : function(e, dragged_card_el)
2375 var target = e.getTarget();
2376 while ((target !== null) && (target.parentNode != this.containerEl.dom)) {
2377 target = target.parentNode;
2388 //Roo.log([ 'target' , target ? target.id : '--nothing--']);
2389 // see if target is one of the 'cards'...
2392 //Roo.log(this.items.length);
2395 var last_card_n = 0;
2397 for (var i = 0;i< this.items.length;i++) {
2399 if (!this.items[i].el.hasClass('card')) {
2402 pos = this.getDropPoint(e, this.items[i].el.dom);
2404 cards_len = ret.cards.length;
2405 //Roo.log(this.items[i].el.dom.id);
2406 ret.cards.push(this.items[i]);
2408 if (ret.card_n < 0 && pos == 'above') {
2409 ret.position = cards_len > 0 ? 'below' : pos;
2410 ret.items_n = i > 0 ? i - 1 : 0;
2411 ret.card_n = cards_len > 0 ? cards_len - 1 : 0;
2412 ret.card = ret.cards[ret.card_n];
2415 if (!ret.cards.length) {
2417 ret.position = 'below';
2421 // could not find a card.. stick it at the end..
2422 if (ret.card_n < 0) {
2423 ret.card_n = last_card_n;
2424 ret.card = ret.cards[last_card_n];
2425 ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
2426 ret.position = 'below';
2429 if (this.items[ret.items_n].el == dragged_card_el) {
2433 if (ret.position == 'below') {
2434 var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
2436 if (card_after && card_after.el == dragged_card_el) {
2443 var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
2445 if (card_before && card_before.el == dragged_card_el) {
2452 onNodeEnter : function(n, dd, e, data){
2455 onNodeOver : function(n, dd, e, data)
2458 var target_info = this.getTargetFromEvent(e,data.source.el);
2459 if (target_info === false) {
2460 this.dropPlaceHolder('hide');
2463 Roo.log(['getTargetFromEvent', target_info ]);
2466 this.dropPlaceHolder('show', target_info,data);
2470 onNodeOut : function(n, dd, e, data){
2471 this.dropPlaceHolder('hide');
2474 onNodeDrop : function(n, dd, e, data)
2477 // call drop - return false if
2479 // this could actually fail - if the Network drops..
2480 // we will ignore this at present..- client should probably reload
2481 // the whole set of cards if stuff like that fails.
2484 var info = this.getTargetFromEvent(e,data.source.el);
2485 if (info === false) {
2488 this.dropPlaceHolder('hide');
2494 this.acceptCard(data.source, info.position, info.card, info.items_n);
2498 firstChildCard : function()
2500 for (var i = 0;i< this.items.length;i++) {
2502 if (!this.items[i].el.hasClass('card')) {
2505 return this.items[i];
2507 return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards...
2512 * - card.acceptCard(move_card, info.position, info.card, info.items_n);
2514 acceptCard : function(move_card, position, next_to_card )
2516 if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) {
2520 var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
2522 move_card.parent().removeCard(move_card);
2525 var dom = move_card.el.dom;
2526 dom.style.width = ''; // clear with - which is set by drag.
2528 if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
2529 var cardel = next_to_card.el.dom;
2531 if (position == 'above' ) {
2532 cardel.parentNode.insertBefore(dom, cardel);
2533 } else if (cardel.nextSibling) {
2534 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
2536 cardel.parentNode.append(dom);
2539 // card container???
2540 this.containerEl.dom.append(dom);
2543 //FIXME HANDLE card = true
2545 // add this to the correct place in items.
2547 // remove Card from items.
2550 if (this.items.length) {
2552 //Roo.log([info.items_n, info.position, this.items.length]);
2553 for (var i =0; i < this.items.length; i++) {
2554 if (i == to_items_n && position == 'above') {
2555 nitems.push(move_card);
2557 nitems.push(this.items[i]);
2558 if (i == to_items_n && position == 'below') {
2559 nitems.push(move_card);
2562 this.items = nitems;
2563 Roo.log(this.items);
2565 this.items.push(move_card);
2568 move_card.parentId = this.id;
2574 removeCard : function(c)
2576 this.items = this.items.filter(function(e) { return e != c });
2579 dom.parentNode.removeChild(dom);
2580 dom.style.width = ''; // clear with - which is set by drag.
2585 /** Decide whether to drop above or below a View node. */
2586 getDropPoint : function(e, n, dd)
2591 if (n == this.containerEl.dom) {
2594 var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
2595 var c = t + (b - t) / 2;
2596 var y = Roo.lib.Event.getPageY(e);
2603 onToggleCollapse : function(e)
2605 if (this.collapsed) {
2606 this.el.select('.roo-collapse-toggle').removeClass('collapsed');
2607 this.collapsableEl.addClass('show');
2608 this.collapsed = false;
2611 this.el.select('.roo-collapse-toggle').addClass('collapsed');
2612 this.collapsableEl.removeClass('show');
2613 this.collapsed = true;
2618 onToggleRotate : function(e)
2620 this.collapsableEl.removeClass('show');
2621 this.footerEl.removeClass('d-none');
2622 this.el.removeClass('roo-card-rotated');
2623 this.el.removeClass('d-none');
2626 this.collapsableEl.addClass('show');
2627 this.rotated = false;
2628 this.fireEvent('rotate', this, this.rotated);
2631 this.el.addClass('roo-card-rotated');
2632 this.footerEl.addClass('d-none');
2633 this.el.select('.roo-collapsable').removeClass('show');
2635 this.rotated = true;
2636 this.fireEvent('rotate', this, this.rotated);
2640 dropPlaceHolder: function (action, info, data)
2642 if (this.dropEl === false) {
2643 this.dropEl = Roo.DomHelper.append(this.containerEl, {
2647 this.dropEl.removeClass(['d-none', 'd-block']);
2648 if (action == 'hide') {
2650 this.dropEl.addClass('d-none');
2653 // FIXME - info.card == true!!!
2654 this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
2656 if (info.card !== true) {
2657 var cardel = info.card.el.dom;
2659 if (info.position == 'above') {
2660 cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
2661 } else if (cardel.nextSibling) {
2662 cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
2664 cardel.parentNode.append(this.dropEl.dom);
2667 // card container???
2668 this.containerEl.dom.append(this.dropEl.dom);
2671 this.dropEl.addClass('d-block roo-card-dropzone');
2673 this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
2680 setHeaderText: function(html)
2682 this.headerContainerEl.dom.innerHTML = html;
2691 * Card header - holder for the card header elements.
2696 * @class Roo.bootstrap.CardHeader
2697 * @extends Roo.bootstrap.Element
2698 * Bootstrap CardHeader class
2700 * Create a new Card Header - that you can embed children into
2701 * @param {Object} config The config object
2704 Roo.bootstrap.CardHeader = function(config){
2705 Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
2708 Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element, {
2711 container_method : 'getCardHeader'
2724 * Card footer - holder for the card footer elements.
2729 * @class Roo.bootstrap.CardFooter
2730 * @extends Roo.bootstrap.Element
2731 * Bootstrap CardFooter class
2733 * Create a new Card Footer - that you can embed children into
2734 * @param {Object} config The config object
2737 Roo.bootstrap.CardFooter = function(config){
2738 Roo.bootstrap.CardFooter.superclass.constructor.call(this, config);
2741 Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element, {
2744 container_method : 'getCardFooter'
2757 * Card header - holder for the card header elements.
2762 * @class Roo.bootstrap.CardImageTop
2763 * @extends Roo.bootstrap.Element
2764 * Bootstrap CardImageTop class
2766 * Create a new Card Image Top container
2767 * @param {Object} config The config object
2770 Roo.bootstrap.CardImageTop = function(config){
2771 Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
2774 Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, {
2777 container_method : 'getCardImageTop'
2795 * @class Roo.bootstrap.Img
2796 * @extends Roo.bootstrap.Component
2797 * Bootstrap Img class
2798 * @cfg {Boolean} imgResponsive false | true
2799 * @cfg {String} border rounded | circle | thumbnail
2800 * @cfg {String} src image source
2801 * @cfg {String} alt image alternative text
2802 * @cfg {String} href a tag href
2803 * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
2804 * @cfg {String} xsUrl xs image source
2805 * @cfg {String} smUrl sm image source
2806 * @cfg {String} mdUrl md image source
2807 * @cfg {String} lgUrl lg image source
2810 * Create a new Input
2811 * @param {Object} config The config object
2814 Roo.bootstrap.Img = function(config){
2815 Roo.bootstrap.Img.superclass.constructor.call(this, config);
2821 * The img click event for the img.
2822 * @param {Roo.EventObject} e
2828 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
2830 imgResponsive: true,
2840 getAutoCreate : function()
2842 if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
2843 return this.createSingleImg();
2848 cls: 'roo-image-responsive-group',
2853 Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
2855 if(!_this[size + 'Url']){
2861 cls: (_this.imgResponsive) ? 'img-responsive' : '',
2862 html: _this.html || cfg.html,
2863 src: _this[size + 'Url']
2866 img.cls += ' roo-image-responsive-' + size;
2868 var s = ['xs', 'sm', 'md', 'lg'];
2870 s.splice(s.indexOf(size), 1);
2872 Roo.each(s, function(ss){
2873 img.cls += ' hidden-' + ss;
2876 if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
2877 cfg.cls += ' img-' + _this.border;
2881 cfg.alt = _this.alt;
2894 a.target = _this.target;
2898 cfg.cn.push((_this.href) ? a : img);
2905 createSingleImg : function()
2909 cls: (this.imgResponsive) ? 'img-responsive' : '',
2911 src : 'about:blank' // just incase src get's set to undefined?!?
2914 cfg.html = this.html || cfg.html;
2916 cfg.src = this.src || cfg.src;
2918 if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
2919 cfg.cls += ' img-' + this.border;
2936 a.target = this.target;
2941 return (this.href) ? a : cfg;
2944 initEvents: function()
2947 this.el.on('click', this.onClick, this);
2952 onClick : function(e)
2954 Roo.log('img onclick');
2955 this.fireEvent('click', this, e);
2958 * Sets the url of the image - used to update it
2959 * @param {String} url the url of the image
2962 setSrc : function(url)
2966 if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
2967 this.el.dom.src = url;
2971 this.el.select('img', true).first().dom.src = url;
2987 * @class Roo.bootstrap.Link
2988 * @extends Roo.bootstrap.Component
2989 * Bootstrap Link Class
2990 * @cfg {String} alt image alternative text
2991 * @cfg {String} href a tag href
2992 * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
2993 * @cfg {String} html the content of the link.
2994 * @cfg {String} anchor name for the anchor link
2995 * @cfg {String} fa - favicon
2997 * @cfg {Boolean} preventDefault (true | false) default false
3001 * Create a new Input
3002 * @param {Object} config The config object
3005 Roo.bootstrap.Link = function(config){
3006 Roo.bootstrap.Link.superclass.constructor.call(this, config);
3012 * The img click event for the img.
3013 * @param {Roo.EventObject} e
3019 Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, {
3023 preventDefault: false,
3029 getAutoCreate : function()
3031 var html = this.html || '';
3033 if (this.fa !== false) {
3034 html = '<i class="fa fa-' + this.fa + '"></i>';
3039 // anchor's do not require html/href...
3040 if (this.anchor === false) {
3042 cfg.href = this.href || '#';
3044 cfg.name = this.anchor;
3045 if (this.html !== false || this.fa !== false) {
3048 if (this.href !== false) {
3049 cfg.href = this.href;
3053 if(this.alt !== false){
3058 if(this.target !== false) {
3059 cfg.target = this.target;
3065 initEvents: function() {
3067 if(!this.href || this.preventDefault){
3068 this.el.on('click', this.onClick, this);
3072 onClick : function(e)
3074 if(this.preventDefault){
3077 //Roo.log('img onclick');
3078 this.fireEvent('click', this, e);
3091 * @class Roo.bootstrap.Header
3092 * @extends Roo.bootstrap.Component
3093 * Bootstrap Header class
3094 * @cfg {String} html content of header
3095 * @cfg {Number} level (1|2|3|4|5|6) default 1
3098 * Create a new Header
3099 * @param {Object} config The config object
3103 Roo.bootstrap.Header = function(config){
3104 Roo.bootstrap.Header.superclass.constructor.call(this, config);
3107 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component, {
3115 getAutoCreate : function(){
3120 tag: 'h' + (1 *this.level),
3121 html: this.html || ''
3133 * Ext JS Library 1.1.1
3134 * Copyright(c) 2006-2007, Ext JS, LLC.
3136 * Originally Released Under LGPL - original licence link has changed is not relivant.
3139 * <script type="text/javascript">
3143 * @class Roo.bootstrap.MenuMgr
3144 * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
3147 Roo.bootstrap.MenuMgr = function(){
3148 var menus, active, groups = {}, attached = false, lastShow = new Date();
3150 // private - called when first menu is created
3153 active = new Roo.util.MixedCollection();
3154 Roo.get(document).addKeyListener(27, function(){
3155 if(active.length > 0){
3163 if(active && active.length > 0){
3164 var c = active.clone();
3174 if(active.length < 1){
3175 Roo.get(document).un("mouseup", onMouseDown);
3183 var last = active.last();
3184 lastShow = new Date();
3187 Roo.get(document).on("mouseup", onMouseDown);
3192 //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
3193 m.parentMenu.activeChild = m;
3194 }else if(last && last.isVisible()){
3195 //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
3200 function onBeforeHide(m){
3202 m.activeChild.hide();
3204 if(m.autoHideTimer){
3205 clearTimeout(m.autoHideTimer);
3206 delete m.autoHideTimer;
3211 function onBeforeShow(m){
3212 var pm = m.parentMenu;
3213 if(!pm && !m.allowOtherMenus){
3215 }else if(pm && pm.activeChild && active != m){
3216 pm.activeChild.hide();
3220 // private this should really trigger on mouseup..
3221 function onMouseDown(e){
3222 Roo.log("on Mouse Up");
3224 if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".dropdown-menu") && !e.getTarget('.user-menu')){
3225 Roo.log("MenuManager hideAll");
3234 function onBeforeCheck(mi, state){
3236 var g = groups[mi.group];
3237 for(var i = 0, l = g.length; i < l; i++){
3239 g[i].setChecked(false);
3248 * Hides all menus that are currently visible
3250 hideAll : function(){
3255 register : function(menu){
3259 menus[menu.id] = menu;
3260 menu.on("beforehide", onBeforeHide);
3261 menu.on("hide", onHide);
3262 menu.on("beforeshow", onBeforeShow);
3263 menu.on("show", onShow);
3265 if(g && menu.events["checkchange"]){
3269 groups[g].push(menu);
3270 menu.on("checkchange", onCheck);
3275 * Returns a {@link Roo.menu.Menu} object
3276 * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
3277 * be used to generate and return a new Menu instance.
3279 get : function(menu){
3280 if(typeof menu == "string"){ // menu id
3282 }else if(menu.events){ // menu instance
3285 /*else if(typeof menu.length == 'number'){ // array of menu items?
3286 return new Roo.bootstrap.Menu({items:menu});
3287 }else{ // otherwise, must be a config
3288 return new Roo.bootstrap.Menu(menu);
3295 unregister : function(menu){
3296 delete menus[menu.id];
3297 menu.un("beforehide", onBeforeHide);
3298 menu.un("hide", onHide);
3299 menu.un("beforeshow", onBeforeShow);
3300 menu.un("show", onShow);
3302 if(g && menu.events["checkchange"]){
3303 groups[g].remove(menu);
3304 menu.un("checkchange", onCheck);
3309 registerCheckable : function(menuItem){
3310 var g = menuItem.group;
3315 groups[g].push(menuItem);
3316 menuItem.on("beforecheckchange", onBeforeCheck);
3321 unregisterCheckable : function(menuItem){
3322 var g = menuItem.group;
3324 groups[g].remove(menuItem);
3325 menuItem.un("beforecheckchange", onBeforeCheck);
3337 * @class Roo.bootstrap.Menu
3338 * @extends Roo.bootstrap.Component
3339 * Bootstrap Menu class - container for MenuItems
3340 * @cfg {String} type (dropdown|treeview|submenu) type of menu
3341 * @cfg {bool} hidden if the menu should be hidden when rendered.
3342 * @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true)
3343 * @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false)
3347 * @param {Object} config The config object
3351 Roo.bootstrap.Menu = function(config){
3352 Roo.bootstrap.Menu.superclass.constructor.call(this, config);
3353 if (this.registerMenu && this.type != 'treeview') {
3354 Roo.bootstrap.MenuMgr.register(this);
3361 * Fires before this menu is displayed (return false to block)
3362 * @param {Roo.menu.Menu} this
3367 * Fires before this menu is hidden (return false to block)
3368 * @param {Roo.menu.Menu} this
3373 * Fires after this menu is displayed
3374 * @param {Roo.menu.Menu} this
3379 * Fires after this menu is hidden
3380 * @param {Roo.menu.Menu} this
3385 * Fires when this menu is clicked (or when the enter key is pressed while it is active)
3386 * @param {Roo.menu.Menu} this
3387 * @param {Roo.menu.Item} menuItem The menu item that was clicked
3388 * @param {Roo.EventObject} e
3393 * Fires when the mouse is hovering over this menu
3394 * @param {Roo.menu.Menu} this
3395 * @param {Roo.EventObject} e
3396 * @param {Roo.menu.Item} menuItem The menu item that was clicked
3401 * Fires when the mouse exits this menu
3402 * @param {Roo.menu.Menu} this
3403 * @param {Roo.EventObject} e
3404 * @param {Roo.menu.Item} menuItem The menu item that was clicked
3409 * Fires when a menu item contained in this menu is clicked
3410 * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
3411 * @param {Roo.EventObject} e
3415 this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
3418 Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
3422 triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()???
3425 * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
3427 registerMenu : true,
3429 menuItems :false, // stores the menu items..
3439 getChildContainer : function() {
3443 getAutoCreate : function(){
3445 //if (['right'].indexOf(this.align)!==-1) {
3446 // cfg.cn[1].cls += ' pull-right'
3452 cls : 'dropdown-menu' ,
3453 style : 'z-index:1000'
3457 if (this.type === 'submenu') {
3458 cfg.cls = 'submenu active';
3460 if (this.type === 'treeview') {
3461 cfg.cls = 'treeview-menu';
3466 initEvents : function() {
3468 // Roo.log("ADD event");
3469 // Roo.log(this.triggerEl.dom);
3471 this.triggerEl.on('click', this.onTriggerClick, this);
3473 this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
3476 if (this.triggerEl.hasClass('nav-item')) {
3477 // dropdown toggle on the 'a' in BS4?
3478 this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
3480 this.triggerEl.addClass('dropdown-toggle');
3483 this.el.on('touchstart' , this.onTouch, this);
3485 this.el.on('click' , this.onClick, this);
3487 this.el.on("mouseover", this.onMouseOver, this);
3488 this.el.on("mouseout", this.onMouseOut, this);
3492 findTargetItem : function(e)
3494 var t = e.getTarget(".dropdown-menu-item", this.el, true);
3498 //Roo.log(t); Roo.log(t.id);
3500 //Roo.log(this.menuitems);
3501 return this.menuitems.get(t.id);
3503 //return this.items.get(t.menuItemId);
3509 onTouch : function(e)
3511 Roo.log("menu.onTouch");
3512 //e.stopEvent(); this make the user popdown broken
3516 onClick : function(e)
3518 Roo.log("menu.onClick");
3520 var t = this.findTargetItem(e);
3521 if(!t || t.isContainer){
3526 if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
3527 if(t == this.activeItem && t.shouldDeactivate(e)){
3528 this.activeItem.deactivate();
3529 delete this.activeItem;
3533 this.setActiveItem(t, true);
3541 Roo.log('pass click event');
3545 this.fireEvent("click", this, t, e);
3549 if(!t.href.length || t.href == '#'){
3550 (function() { _this.hide(); }).defer(100);
3555 onMouseOver : function(e){
3556 var t = this.findTargetItem(e);
3559 // if(t.canActivate && !t.disabled){
3560 // this.setActiveItem(t, true);
3564 this.fireEvent("mouseover", this, e, t);
3566 isVisible : function(){
3567 return !this.hidden;
3569 onMouseOut : function(e){
3570 var t = this.findTargetItem(e);
3573 // if(t == this.activeItem && t.shouldDeactivate(e)){
3574 // this.activeItem.deactivate();
3575 // delete this.activeItem;
3578 this.fireEvent("mouseout", this, e, t);
3583 * Displays this menu relative to another element
3584 * @param {String/HTMLElement/Roo.Element} element The element to align to
3585 * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
3586 * the element (defaults to this.defaultAlign)
3587 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3589 show : function(el, pos, parentMenu)
3591 if (false === this.fireEvent("beforeshow", this)) {
3592 Roo.log("show canceled");
3595 this.parentMenu = parentMenu;
3600 this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
3603 * Displays this menu at a specific xy position
3604 * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
3605 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
3607 showAt : function(xy, parentMenu, /* private: */_e){
3608 this.parentMenu = parentMenu;
3613 this.fireEvent("beforeshow", this);
3614 //xy = this.el.adjustForConstraints(xy);
3618 this.hideMenuItems();
3619 this.hidden = false;
3620 this.triggerEl.addClass('open');
3621 this.el.addClass('show');
3623 // reassign x when hitting right
3624 if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
3625 xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
3628 // reassign y when hitting bottom
3629 if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){
3630 xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight();
3633 // but the list may align on trigger left or trigger top... should it be a properity?
3635 if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
3640 this.fireEvent("show", this);
3646 this.doFocus.defer(50, this);
3650 doFocus : function(){
3652 this.focusEl.focus();
3657 * Hides this menu and optionally all parent menus
3658 * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
3660 hide : function(deep)
3662 if (false === this.fireEvent("beforehide", this)) {
3663 Roo.log("hide canceled");
3666 this.hideMenuItems();
3667 if(this.el && this.isVisible()){
3669 if(this.activeItem){
3670 this.activeItem.deactivate();
3671 this.activeItem = null;
3673 this.triggerEl.removeClass('open');;
3674 this.el.removeClass('show');
3676 this.fireEvent("hide", this);
3678 if(deep === true && this.parentMenu){
3679 this.parentMenu.hide(true);
3683 onTriggerClick : function(e)
3685 Roo.log('trigger click');
3687 var target = e.getTarget();
3689 Roo.log(target.nodeName.toLowerCase());
3691 if(target.nodeName.toLowerCase() === 'i'){
3697 onTriggerPress : function(e)
3699 Roo.log('trigger press');
3700 //Roo.log(e.getTarget());
3701 // Roo.log(this.triggerEl.dom);
3703 // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
3704 var pel = Roo.get(e.getTarget());
3705 if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
3706 Roo.log('is treeview or dropdown?');
3710 if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
3714 if (this.isVisible()) {
3719 this.show(this.triggerEl, '?', false);
3722 if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
3729 hideMenuItems : function()
3731 Roo.log("hide Menu Items");
3736 this.el.select('.open',true).each(function(aa) {
3738 aa.removeClass('open');
3742 addxtypeChild : function (tree, cntr) {
3743 var comp= Roo.bootstrap.Menu.superclass.addxtypeChild.call(this, tree, cntr);
3745 this.menuitems.add(comp);
3757 this.getEl().dom.innerHTML = '';
3758 this.menuitems.clear();
3772 * @class Roo.bootstrap.MenuItem
3773 * @extends Roo.bootstrap.Component
3774 * Bootstrap MenuItem class
3775 * @cfg {String} html the menu label
3776 * @cfg {String} href the link
3777 * @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
3778 * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
3779 * @cfg {Boolean} active used on sidebars to highlight active itesm
3780 * @cfg {String} fa favicon to show on left of menu item.
3781 * @cfg {Roo.bootsrap.Menu} menu the child menu.
3785 * Create a new MenuItem
3786 * @param {Object} config The config object
3790 Roo.bootstrap.MenuItem = function(config){
3791 Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
3796 * The raw click event for the entire grid.
3797 * @param {Roo.bootstrap.MenuItem} this
3798 * @param {Roo.EventObject} e
3804 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, {
3808 preventDefault: false,
3809 isContainer : false,
3813 getAutoCreate : function(){
3815 if(this.isContainer){
3818 cls: 'dropdown-menu-item '
3828 cls : 'dropdown-item',
3833 if (this.fa !== false) {
3836 cls : 'fa fa-' + this.fa
3845 cls: 'dropdown-menu-item',
3848 if (this.parent().type == 'treeview') {
3849 cfg.cls = 'treeview-menu';
3852 cfg.cls += ' active';
3857 anc.href = this.href || cfg.cn[0].href ;
3858 ctag.html = this.html || cfg.cn[0].html ;
3862 initEvents: function()
3864 if (this.parent().type == 'treeview') {
3865 this.el.select('a').on('click', this.onClick, this);
3869 this.menu.parentType = this.xtype;
3870 this.menu.triggerEl = this.el;
3871 this.menu = this.addxtype(Roo.apply({}, this.menu));
3875 onClick : function(e)
3877 Roo.log('item on click ');
3879 if(this.preventDefault){
3882 //this.parent().hideMenuItems();
3884 this.fireEvent('click', this, e);
3903 * @class Roo.bootstrap.MenuSeparator
3904 * @extends Roo.bootstrap.Component
3905 * Bootstrap MenuSeparator class
3908 * Create a new MenuItem
3909 * @param {Object} config The config object
3913 Roo.bootstrap.MenuSeparator = function(config){
3914 Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
3917 Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, {
3919 getAutoCreate : function(){
3938 * @class Roo.bootstrap.Modal
3939 * @extends Roo.bootstrap.Component
3940 * Bootstrap Modal class
3941 * @cfg {String} title Title of dialog
3942 * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
3943 * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
3944 * @cfg {Boolean} specificTitle default false
3945 * @cfg {Array} buttons Array of buttons or standard button set..
3946 * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
3947 * @cfg {Boolean} animate default true
3948 * @cfg {Boolean} allow_close default true
3949 * @cfg {Boolean} fitwindow default false
3950 * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
3951 * @cfg {Number} width fixed width - usefull for chrome extension only really.
3952 * @cfg {Number} height fixed height - usefull for chrome extension only really.
3953 * @cfg {String} size (sm|lg|xl) default empty
3954 * @cfg {Number} max_width set the max width of modal
3955 * @cfg {Boolean} editableTitle can the title be edited
3960 * Create a new Modal Dialog
3961 * @param {Object} config The config object
3964 Roo.bootstrap.Modal = function(config){
3965 Roo.bootstrap.Modal.superclass.constructor.call(this, config);
3970 * The raw btnclick event for the button
3971 * @param {Roo.EventObject} e
3976 * Fire when dialog resize
3977 * @param {Roo.bootstrap.Modal} this
3978 * @param {Roo.EventObject} e
3982 * @event titlechanged
3983 * Fire when the editable title has been changed
3984 * @param {Roo.bootstrap.Modal} this
3985 * @param {Roo.EventObject} value
3987 "titlechanged" : true
3990 this.buttons = this.buttons || [];
3993 this.tmpl = Roo.factory(this.tmpl);
3998 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, {
4000 title : 'test dialog',
4010 specificTitle: false,
4012 buttonPosition: 'right',
4034 editableTitle : false,
4036 onRender : function(ct, position)
4038 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
4041 var cfg = Roo.apply({}, this.getAutoCreate());
4044 // cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
4046 //if (!cfg.name.length) {
4050 cfg.cls += ' ' + this.cls;
4053 cfg.style = this.style;
4055 this.el = Roo.get(document.body).createChild(cfg, position);
4057 //var type = this.el.dom.type;
4060 if(this.tabIndex !== undefined){
4061 this.el.dom.setAttribute('tabIndex', this.tabIndex);
4064 this.dialogEl = this.el.select('.modal-dialog',true).first();
4065 this.bodyEl = this.el.select('.modal-body',true).first();
4066 this.closeEl = this.el.select('.modal-header .close', true).first();
4067 this.headerEl = this.el.select('.modal-header',true).first();
4068 this.titleEl = this.el.select('.modal-title',true).first();
4069 this.footerEl = this.el.select('.modal-footer',true).first();
4071 this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
4073 //this.el.addClass("x-dlg-modal");
4075 if (this.buttons.length) {
4076 Roo.each(this.buttons, function(bb) {
4077 var b = Roo.apply({}, bb);
4078 b.xns = b.xns || Roo.bootstrap;
4079 b.xtype = b.xtype || 'Button';
4080 if (typeof(b.listeners) == 'undefined') {
4081 b.listeners = { click : this.onButtonClick.createDelegate(this) };
4084 var btn = Roo.factory(b);
4086 btn.render(this.getButtonContainer());
4090 // render the children.
4093 if(typeof(this.items) != 'undefined'){
4094 var items = this.items;
4097 for(var i =0;i < items.length;i++) {
4098 nitems.push(this.addxtype(Roo.apply({}, items[i])));
4102 this.items = nitems;
4104 // where are these used - they used to be body/close/footer
4108 //this.el.addClass([this.fieldClass, this.cls]);
4112 getAutoCreate : function()
4114 // we will default to modal-body-overflow - might need to remove or make optional later.
4116 cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''),
4117 html : this.html || ''
4122 cls : 'modal-title',
4126 if(this.specificTitle){ // WTF is this?
4131 if (this.allow_close && Roo.bootstrap.version == 3) {
4141 if (this.editableTitle) {
4143 cls: 'form-control roo-editable-title d-none',
4149 if (this.allow_close && Roo.bootstrap.version == 4) {
4159 if(this.size.length){
4160 size = 'modal-' + this.size;
4163 var footer = Roo.bootstrap.version == 3 ?
4165 cls : 'modal-footer',
4169 cls: 'btn-' + this.buttonPosition
4174 { // BS4 uses mr-auto on left buttons....
4175 cls : 'modal-footer'
4186 cls: "modal-dialog " + size,
4189 cls : "modal-content",
4192 cls : 'modal-header',
4207 modal.cls += ' fade';
4213 getChildContainer : function() {
4218 getButtonContainer : function() {
4220 return Roo.bootstrap.version == 4 ?
4221 this.el.select('.modal-footer',true).first()
4222 : this.el.select('.modal-footer div',true).first();
4225 initEvents : function()
4227 if (this.allow_close) {
4228 this.closeEl.on('click', this.hide, this);
4230 Roo.EventManager.onWindowResize(this.resize, this, true);
4231 if (this.editableTitle) {
4232 this.headerEditEl = this.headerEl.select('.form-control',true).first();
4233 this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
4234 this.headerEditEl.on('keyup', function(e) {
4235 if([ e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
4236 this.toggleHeaderInput(false)
4239 this.headerEditEl.on('blur', function(e) {
4240 this.toggleHeaderInput(false)
4249 this.maskEl.setSize(
4250 Roo.lib.Dom.getViewWidth(true),
4251 Roo.lib.Dom.getViewHeight(true)
4254 if (this.fitwindow) {
4256 this.dialogEl.setStyle( { 'max-width' : '100%' });
4258 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
4259 this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
4264 if(this.max_width !== 0) {
4266 var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
4269 this.setSize(w, this.height);
4273 if(this.max_height) {
4274 this.setSize(w,Math.min(
4276 Roo.lib.Dom.getViewportHeight(true) - 60
4282 if(!this.fit_content) {
4283 this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
4287 this.setSize(w, Math.min(
4289 this.headerEl.getHeight() +
4290 this.footerEl.getHeight() +
4291 this.getChildHeight(this.bodyEl.dom.childNodes),
4292 Roo.lib.Dom.getViewportHeight(true) - 60)
4298 setSize : function(w,h)
4309 if (!this.rendered) {
4312 this.toggleHeaderInput(false);
4313 //this.el.setStyle('display', 'block');
4314 this.el.removeClass('hideing');
4315 this.el.dom.style.display='block';
4317 Roo.get(document.body).addClass('modal-open');
4319 if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay?
4322 this.el.addClass('show');
4323 this.el.addClass('in');
4326 this.el.addClass('show');
4327 this.el.addClass('in');
4330 // not sure how we can show data in here..
4332 // this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
4335 Roo.get(document.body).addClass("x-body-masked");
4337 this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
4338 this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4339 this.maskEl.dom.style.display = 'block';
4340 this.maskEl.addClass('show');
4345 this.fireEvent('show', this);
4347 // set zindex here - otherwise it appears to be ignored...
4348 this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
4351 this.items.forEach( function(e) {
4352 e.layout ? e.layout() : false;
4360 if(this.fireEvent("beforehide", this) !== false){
4362 this.maskEl.removeClass('show');
4364 this.maskEl.dom.style.display = '';
4365 Roo.get(document.body).removeClass("x-body-masked");
4366 this.el.removeClass('in');
4367 this.el.select('.modal-dialog', true).first().setStyle('transform','');
4369 if(this.animate){ // why
4370 this.el.addClass('hideing');
4371 this.el.removeClass('show');
4373 if (!this.el.hasClass('hideing')) {
4374 return; // it's been shown again...
4377 this.el.dom.style.display='';
4379 Roo.get(document.body).removeClass('modal-open');
4380 this.el.removeClass('hideing');
4384 this.el.removeClass('show');
4385 this.el.dom.style.display='';
4386 Roo.get(document.body).removeClass('modal-open');
4389 this.fireEvent('hide', this);
4392 isVisible : function()
4395 return this.el.hasClass('show') && !this.el.hasClass('hideing');
4399 addButton : function(str, cb)
4403 var b = Roo.apply({}, { html : str } );
4404 b.xns = b.xns || Roo.bootstrap;
4405 b.xtype = b.xtype || 'Button';
4406 if (typeof(b.listeners) == 'undefined') {
4407 b.listeners = { click : cb.createDelegate(this) };
4410 var btn = Roo.factory(b);
4412 btn.render(this.getButtonContainer());
4418 setDefaultButton : function(btn)
4420 //this.el.select('.modal-footer').()
4423 resizeTo: function(w,h)
4425 this.dialogEl.setWidth(w);
4427 var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30
4429 this.bodyEl.setHeight(h - diff);
4431 this.fireEvent('resize', this);
4434 setContentSize : function(w, h)
4438 onButtonClick: function(btn,e)
4441 this.fireEvent('btnclick', btn.name, e);
4444 * Set the title of the Dialog
4445 * @param {String} str new Title
4447 setTitle: function(str) {
4448 this.titleEl.dom.innerHTML = str;
4452 * Set the body of the Dialog
4453 * @param {String} str new Title
4455 setBody: function(str) {
4456 this.bodyEl.dom.innerHTML = str;
4459 * Set the body of the Dialog using the template
4460 * @param {Obj} data - apply this data to the template and replace the body contents.
4462 applyBody: function(obj)
4465 Roo.log("Error - using apply Body without a template");
4468 this.tmpl.overwrite(this.bodyEl, obj);
4471 getChildHeight : function(child_nodes)
4475 child_nodes.length == 0
4480 var child_height = 0;
4482 for(var i = 0; i < child_nodes.length; i++) {
4485 * for modal with tabs...
4486 if(child_nodes[i].classList.contains('roo-layout-panel')) {
4488 var layout_childs = child_nodes[i].childNodes;
4490 for(var j = 0; j < layout_childs.length; j++) {
4492 if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
4494 var layout_body_childs = layout_childs[j].childNodes;
4496 for(var k = 0; k < layout_body_childs.length; k++) {
4498 if(layout_body_childs[k].classList.contains('navbar')) {
4499 child_height += layout_body_childs[k].offsetHeight;
4503 if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
4505 var layout_body_tab_childs = layout_body_childs[k].childNodes;
4507 for(var m = 0; m < layout_body_tab_childs.length; m++) {
4509 if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
4510 child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
4525 child_height += child_nodes[i].offsetHeight;
4526 // Roo.log(child_nodes[i].offsetHeight);
4529 return child_height;
4531 toggleHeaderInput : function(is_edit)
4533 if (!this.editableTitle) {
4534 return; // not editable.
4536 if (is_edit && this.is_header_editing) {
4537 return; // already editing..
4541 this.headerEditEl.dom.value = this.title;
4542 this.headerEditEl.removeClass('d-none');
4543 this.headerEditEl.dom.focus();
4544 this.titleEl.addClass('d-none');
4546 this.is_header_editing = true;
4549 // flip back to not editing.
4550 this.title = this.headerEditEl.dom.value;
4551 this.headerEditEl.addClass('d-none');
4552 this.titleEl.removeClass('d-none');
4553 this.titleEl.dom.innerHTML = String.format('{0}', this.title);
4554 this.is_header_editing = false;
4555 this.fireEvent('titlechanged', this, this.title);
4564 Roo.apply(Roo.bootstrap.Modal, {
4566 * Button config that displays a single OK button
4575 * Button config that displays Yes and No buttons
4591 * Button config that displays OK and Cancel buttons
4606 * Button config that displays Yes, No and Cancel buttons
4631 * messagebox - can be used as a replace
4635 * @class Roo.MessageBox
4636 * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
4640 Roo.Msg.alert('Status', 'Changes saved successfully.');
4642 // Prompt for user data:
4643 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
4645 // process text value...
4649 // Show a dialog using config options:
4651 title:'Save Changes?',
4652 msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
4653 buttons: Roo.Msg.YESNOCANCEL,
4660 Roo.bootstrap.MessageBox = function(){
4661 var dlg, opt, mask, waitTimer;
4662 var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
4663 var buttons, activeTextEl, bwidth;
4667 var handleButton = function(button){
4669 Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
4673 var handleHide = function(){
4675 dlg.el.removeClass(opt.cls);
4678 // Roo.TaskMgr.stop(waitTimer);
4679 // waitTimer = null;
4684 var updateButtons = function(b){
4687 buttons["ok"].hide();
4688 buttons["cancel"].hide();
4689 buttons["yes"].hide();
4690 buttons["no"].hide();
4691 dlg.footerEl.hide();
4695 dlg.footerEl.show();
4696 for(var k in buttons){
4697 if(typeof buttons[k] != "function"){
4700 buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
4701 width += buttons[k].el.getWidth()+15;
4711 var handleEsc = function(d, k, e){
4712 if(opt && opt.closable !== false){
4722 * Returns a reference to the underlying {@link Roo.BasicDialog} element
4723 * @return {Roo.BasicDialog} The BasicDialog element
4725 getDialog : function(){
4727 dlg = new Roo.bootstrap.Modal( {
4730 //constraintoviewport:false,
4732 //collapsible : false,
4737 //buttonAlign:"center",
4738 closeClick : function(){
4739 if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
4742 handleButton("cancel");
4747 dlg.on("hide", handleHide);
4749 //dlg.addKeyListener(27, handleEsc);
4751 this.buttons = buttons;
4752 var bt = this.buttonText;
4753 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
4754 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
4755 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
4756 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
4758 bodyEl = dlg.bodyEl.createChild({
4760 html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
4761 '<textarea class="roo-mb-textarea"></textarea>' +
4762 '<div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
4764 msgEl = bodyEl.dom.firstChild;
4765 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
4766 textboxEl.enableDisplayMode();
4767 textboxEl.addKeyListener([10,13], function(){
4768 if(dlg.isVisible() && opt && opt.buttons){
4771 }else if(opt.buttons.yes){
4772 handleButton("yes");
4776 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
4777 textareaEl.enableDisplayMode();
4778 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
4779 progressEl.enableDisplayMode();
4781 // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
4782 var pf = progressEl.dom.firstChild;
4784 pp = Roo.get(pf.firstChild);
4785 pp.setHeight(pf.offsetHeight);
4793 * Updates the message box body text
4794 * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
4795 * the XHTML-compliant non-breaking space character '&#160;')
4796 * @return {Roo.MessageBox} This message box
4798 updateText : function(text)
4800 if(!dlg.isVisible() && !opt.width){
4801 dlg.dialogEl.setStyle({ 'max-width' : this.maxWidth});
4802 // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
4804 msgEl.innerHTML = text || ' ';
4806 var cw = Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
4807 //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
4809 Math.min(opt.width || cw , this.maxWidth),
4810 Math.max(opt.minWidth || this.minWidth, bwidth)
4813 activeTextEl.setWidth(w);
4815 if(dlg.isVisible()){
4816 dlg.fixedcenter = false;
4818 // to big, make it scroll. = But as usual stupid IE does not support
4821 if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
4822 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
4823 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
4825 bodyEl.dom.style.height = '';
4826 bodyEl.dom.style.overflowY = '';
4829 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
4831 bodyEl.dom.style.overflowX = '';
4834 dlg.setContentSize(w, bodyEl.getHeight());
4835 if(dlg.isVisible()){
4836 dlg.fixedcenter = true;
4842 * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
4843 * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
4844 * @param {Number} value Any number between 0 and 1 (e.g., .5)
4845 * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
4846 * @return {Roo.MessageBox} This message box
4848 updateProgress : function(value, text){
4850 this.updateText(text);
4853 if (pp) { // weird bug on my firefox - for some reason this is not defined
4854 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
4855 pp.setHeight(Math.floor(progressEl.dom.firstChild.offsetHeight));
4861 * Returns true if the message box is currently displayed
4862 * @return {Boolean} True if the message box is visible, else false
4864 isVisible : function(){
4865 return dlg && dlg.isVisible();
4869 * Hides the message box if it is displayed
4872 if(this.isVisible()){
4878 * Displays a new message box, or reinitializes an existing message box, based on the config options
4879 * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
4880 * The following config object properties are supported:
4882 Property Type Description
4883 ---------- --------------- ------------------------------------------------------------------------------------
4884 animEl String/Element An id or Element from which the message box should animate as it opens and
4885 closes (defaults to undefined)
4886 buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
4887 cancel:'Bar'}), or false to not show any buttons (defaults to false)
4888 closable Boolean False to hide the top-right close button (defaults to true). Note that
4889 progress and wait dialogs will ignore this property and always hide the
4890 close button as they can only be closed programmatically.
4891 cls String A custom CSS class to apply to the message box element
4892 defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
4893 displayed (defaults to 75)
4894 fn Function A callback function to execute after closing the dialog. The arguments to the
4895 function will be btn (the name of the button that was clicked, if applicable,
4896 e.g. "ok"), and text (the value of the active text field, if applicable).
4897 Progress and wait dialogs will ignore this option since they do not respond to
4898 user actions and can only be closed programmatically, so any required function
4899 should be called by the same code after it closes the dialog.
4900 icon String A CSS class that provides a background image to be used as an icon for
4901 the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
4902 maxWidth Number The maximum width in pixels of the message box (defaults to 600)
4903 minWidth Number The minimum width in pixels of the message box (defaults to 100)
4904 modal Boolean False to allow user interaction with the page while the message box is
4905 displayed (defaults to true)
4906 msg String A string that will replace the existing message box body text (defaults
4907 to the XHTML-compliant non-breaking space character ' ')
4908 multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
4909 progress Boolean True to display a progress bar (defaults to false)
4910 progressText String The text to display inside the progress bar if progress = true (defaults to '')
4911 prompt Boolean True to prompt the user to enter single-line text (defaults to false)
4912 proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
4913 title String The title text
4914 value String The string value to set into the active textbox element if displayed
4915 wait Boolean True to display a progress bar (defaults to false)
4916 width Number The width of the dialog in pixels
4923 msg: 'Please enter your address:',
4925 buttons: Roo.MessageBox.OKCANCEL,
4928 animEl: 'addAddressBtn'
4931 * @param {Object} config Configuration options
4932 * @return {Roo.MessageBox} This message box
4934 show : function(options)
4937 // this causes nightmares if you show one dialog after another
4938 // especially on callbacks..
4940 if(this.isVisible()){
4943 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
4944 Roo.log("Old Dialog Message:" + msgEl.innerHTML );
4945 Roo.log("New Dialog Message:" + options.msg )
4946 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
4947 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
4950 var d = this.getDialog();
4952 d.setTitle(opt.title || " ");
4953 d.closeEl.setDisplayed(opt.closable !== false);
4954 activeTextEl = textboxEl;
4955 opt.prompt = opt.prompt || (opt.multiline ? true : false);
4960 textareaEl.setHeight(typeof opt.multiline == "number" ?
4961 opt.multiline : this.defaultTextHeight);
4962 activeTextEl = textareaEl;
4971 progressEl.setDisplayed(opt.progress === true);
4973 d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
4975 this.updateProgress(0);
4976 activeTextEl.dom.value = opt.value || "";
4978 dlg.setDefaultButton(activeTextEl);
4980 var bs = opt.buttons;
4984 }else if(bs && bs.yes){
4985 db = buttons["yes"];
4987 dlg.setDefaultButton(db);
4989 bwidth = updateButtons(opt.buttons);
4990 this.updateText(opt.msg);
4992 d.el.addClass(opt.cls);
4994 d.proxyDrag = opt.proxyDrag === true;
4995 d.modal = opt.modal !== false;
4996 d.mask = opt.modal !== false ? mask : false;
4998 // force it to the end of the z-index stack so it gets a cursor in FF
4999 document.body.appendChild(dlg.el.dom);
5000 d.animateTarget = null;
5001 d.show(options.animEl);
5007 * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
5008 * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
5009 * and closing the message box when the process is complete.
5010 * @param {String} title The title bar text
5011 * @param {String} msg The message box body text
5012 * @return {Roo.MessageBox} This message box
5014 progress : function(title, msg){
5021 minWidth: this.minProgressWidth,
5028 * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
5029 * If a callback function is passed it will be called after the user clicks the button, and the
5030 * id of the button that was clicked will be passed as the only parameter to the callback
5031 * (could also be the top-right close button).
5032 * @param {String} title The title bar text
5033 * @param {String} msg The message box body text
5034 * @param {Function} fn (optional) The callback function invoked after the message box is closed
5035 * @param {Object} scope (optional) The scope of the callback function
5036 * @return {Roo.MessageBox} This message box
5038 alert : function(title, msg, fn, scope)
5053 * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
5054 * interaction while waiting for a long-running process to complete that does not have defined intervals.
5055 * You are responsible for closing the message box when the process is complete.
5056 * @param {String} msg The message box body text
5057 * @param {String} title (optional) The title bar text
5058 * @return {Roo.MessageBox} This message box
5060 wait : function(msg, title){
5071 waitTimer = Roo.TaskMgr.start({
5073 Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
5081 * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
5082 * If a callback function is passed it will be called after the user clicks either button, and the id of the
5083 * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
5084 * @param {String} title The title bar text
5085 * @param {String} msg The message box body text
5086 * @param {Function} fn (optional) The callback function invoked after the message box is closed
5087 * @param {Object} scope (optional) The scope of the callback function
5088 * @return {Roo.MessageBox} This message box
5090 confirm : function(title, msg, fn, scope){
5094 buttons: this.YESNO,
5103 * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
5104 * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
5105 * is passed it will be called after the user clicks either button, and the id of the button that was clicked
5106 * (could also be the top-right close button) and the text that was entered will be passed as the two
5107 * parameters to the callback.
5108 * @param {String} title The title bar text
5109 * @param {String} msg The message box body text
5110 * @param {Function} fn (optional) The callback function invoked after the message box is closed
5111 * @param {Object} scope (optional) The scope of the callback function
5112 * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
5113 * property, or the height in pixels to create the textbox (defaults to false / single-line)
5114 * @return {Roo.MessageBox} This message box
5116 prompt : function(title, msg, fn, scope, multiline){
5120 buttons: this.OKCANCEL,
5125 multiline: multiline,
5132 * Button config that displays a single OK button
5137 * Button config that displays Yes and No buttons
5140 YESNO : {yes:true, no:true},
5142 * Button config that displays OK and Cancel buttons
5145 OKCANCEL : {ok:true, cancel:true},
5147 * Button config that displays Yes, No and Cancel buttons
5150 YESNOCANCEL : {yes:true, no:true, cancel:true},
5153 * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
5156 defaultTextHeight : 75,
5158 * The maximum width in pixels of the message box (defaults to 600)
5163 * The minimum width in pixels of the message box (defaults to 100)
5168 * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
5169 * for setting a different minimum width than text-only dialogs may need (defaults to 250)
5172 minProgressWidth : 250,
5174 * An object containing the default button text strings that can be overriden for localized language support.
5175 * Supported properties are: ok, cancel, yes and no.
5176 * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
5189 * Shorthand for {@link Roo.MessageBox}
5191 Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
5192 Roo.Msg = Roo.Msg || Roo.MessageBox;
5201 * @class Roo.bootstrap.Navbar
5202 * @extends Roo.bootstrap.Component
5203 * Bootstrap Navbar class
5206 * Create a new Navbar
5207 * @param {Object} config The config object
5211 Roo.bootstrap.Navbar = function(config){
5212 Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
5216 * @event beforetoggle
5217 * Fire before toggle the menu
5218 * @param {Roo.EventObject} e
5220 "beforetoggle" : true
5224 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
5233 getAutoCreate : function(){
5236 throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
5240 initEvents :function ()
5242 //Roo.log(this.el.select('.navbar-toggle',true));
5243 this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
5250 this.maskEl = Roo.DomHelper.append(this.el, mark, true);
5252 var size = this.el.getSize();
5253 this.maskEl.setSize(size.width, size.height);
5254 this.maskEl.enableDisplayMode("block");
5263 getChildContainer : function()
5265 if (this.el && this.el.select('.collapse').getCount()) {
5266 return this.el.select('.collapse',true).first();
5281 onToggle : function()
5284 if(this.fireEvent('beforetoggle', this) === false){
5287 var ce = this.el.select('.navbar-collapse',true).first();
5289 if (!ce.hasClass('show')) {
5299 * Expand the navbar pulldown
5301 expand : function ()
5304 var ce = this.el.select('.navbar-collapse',true).first();
5305 if (ce.hasClass('collapsing')) {
5308 ce.dom.style.height = '';
5310 ce.addClass('in'); // old...
5311 ce.removeClass('collapse');
5312 ce.addClass('show');
5313 var h = ce.getHeight();
5315 ce.removeClass('show');
5316 // at this point we should be able to see it..
5317 ce.addClass('collapsing');
5319 ce.setHeight(0); // resize it ...
5320 ce.on('transitionend', function() {
5321 //Roo.log('done transition');
5322 ce.removeClass('collapsing');
5323 ce.addClass('show');
5324 ce.removeClass('collapse');
5326 ce.dom.style.height = '';
5327 }, this, { single: true} );
5329 ce.dom.scrollTop = 0;
5332 * Collapse the navbar pulldown
5334 collapse : function()
5336 var ce = this.el.select('.navbar-collapse',true).first();
5338 if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
5339 // it's collapsed or collapsing..
5342 ce.removeClass('in'); // old...
5343 ce.setHeight(ce.getHeight());
5344 ce.removeClass('show');
5345 ce.addClass('collapsing');
5347 ce.on('transitionend', function() {
5348 ce.dom.style.height = '';
5349 ce.removeClass('collapsing');
5350 ce.addClass('collapse');
5351 }, this, { single: true} );
5371 * @class Roo.bootstrap.NavSimplebar
5372 * @extends Roo.bootstrap.Navbar
5373 * Bootstrap Sidebar class
5375 * @cfg {Boolean} inverse is inverted color
5377 * @cfg {String} type (nav | pills | tabs)
5378 * @cfg {Boolean} arrangement stacked | justified
5379 * @cfg {String} align (left | right) alignment
5381 * @cfg {Boolean} main (true|false) main nav bar? default false
5382 * @cfg {Boolean} loadMask (true|false) loadMask on the bar
5384 * @cfg {String} tag (header|footer|nav|div) default is nav
5386 * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light.
5390 * Create a new Sidebar
5391 * @param {Object} config The config object
5395 Roo.bootstrap.NavSimplebar = function(config){
5396 Roo.bootstrap.NavSimplebar.superclass.constructor.call(this, config);
5399 Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, {
5415 getAutoCreate : function(){
5419 tag : this.tag || 'div',
5420 cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
5422 if (['light','white'].indexOf(this.weight) > -1) {
5423 cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5425 cfg.cls += ' bg-' + this.weight;
5428 cfg.cls += ' navbar-inverse';
5432 // i'm not actually sure these are really used - normally we add a navGroup to a navbar
5434 if (Roo.bootstrap.version == 4 && this.xtype == 'NavSimplebar') {
5443 cls: 'nav nav-' + this.xtype,
5449 this.type = this.type || 'nav';
5450 if (['tabs','pills'].indexOf(this.type) != -1) {
5451 cfg.cn[0].cls += ' nav-' + this.type
5455 if (this.type!=='nav') {
5456 Roo.log('nav type must be nav/tabs/pills')
5458 cfg.cn[0].cls += ' navbar-nav'
5464 if (['stacked','justified'].indexOf(this.arrangement) != -1) {
5465 cfg.cn[0].cls += ' nav-' + this.arrangement;
5469 if (this.align === 'right') {
5470 cfg.cn[0].cls += ' navbar-right';
5495 * navbar-expand-md fixed-top
5499 * @class Roo.bootstrap.NavHeaderbar
5500 * @extends Roo.bootstrap.NavSimplebar
5501 * Bootstrap Sidebar class
5503 * @cfg {String} brand what is brand
5504 * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
5505 * @cfg {String} brand_href href of the brand
5506 * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button default true
5507 * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
5508 * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
5509 * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
5512 * Create a new Sidebar
5513 * @param {Object} config The config object
5517 Roo.bootstrap.NavHeaderbar = function(config){
5518 Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
5522 Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, {
5529 desktopCenter : false,
5532 getAutoCreate : function(){
5535 tag: this.nav || 'nav',
5536 cls: 'navbar navbar-expand-md',
5542 if (this.desktopCenter) {
5543 cn.push({cls : 'container', cn : []});
5551 cls: 'navbar-toggle navbar-toggler',
5552 'data-toggle': 'collapse',
5557 html: 'Toggle navigation'
5561 cls: 'icon-bar navbar-toggler-icon'
5574 cn.push( Roo.bootstrap.version == 4 ? btn : {
5576 cls: 'navbar-header',
5585 cls: Roo.bootstrap.version == 4 ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
5589 cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
5591 if (['light','white'].indexOf(this.weight) > -1) {
5592 cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
5594 cfg.cls += ' bg-' + this.weight;
5597 if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
5598 cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
5600 // tag can override this..
5602 cfg.tag = this.tag || (this.position == 'fixed-bottom' ? 'footer' : 'header');
5605 if (this.brand !== '') {
5606 var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn;
5607 cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
5609 href: this.brand_href ? this.brand_href : '#',
5610 cls: 'navbar-brand',
5618 cfg.cls += ' main-nav';
5626 getHeaderChildContainer : function()
5628 if (this.srButton && this.el.select('.navbar-header').getCount()) {
5629 return this.el.select('.navbar-header',true).first();
5632 return this.getChildContainer();
5635 getChildContainer : function()
5638 return this.el.select('.roo-navbar-collapse',true).first();
5643 initEvents : function()
5645 Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
5647 if (this.autohide) {
5652 Roo.get(document).on('scroll',function(e) {
5653 var ns = Roo.get(document).getScroll().top;
5654 var os = prevScroll;
5658 ft.removeClass('slideDown');
5659 ft.addClass('slideUp');
5662 ft.removeClass('slideUp');
5663 ft.addClass('slideDown');
5684 * @class Roo.bootstrap.NavSidebar
5685 * @extends Roo.bootstrap.Navbar
5686 * Bootstrap Sidebar class
5689 * Create a new Sidebar
5690 * @param {Object} config The config object
5694 Roo.bootstrap.NavSidebar = function(config){
5695 Roo.bootstrap.NavSidebar.superclass.constructor.call(this, config);
5698 Roo.extend(Roo.bootstrap.NavSidebar, Roo.bootstrap.Navbar, {
5700 sidebar : true, // used by Navbar Item and NavbarGroup at present...
5702 getAutoCreate : function(){
5707 cls: 'sidebar sidebar-nav'
5729 * @class Roo.bootstrap.NavGroup
5730 * @extends Roo.bootstrap.Component
5731 * Bootstrap NavGroup class
5732 * @cfg {String} align (left|right)
5733 * @cfg {Boolean} inverse
5734 * @cfg {String} type (nav|pills|tab) default nav
5735 * @cfg {String} navId - reference Id for navbar.
5736 * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
5739 * Create a new nav group
5740 * @param {Object} config The config object
5743 Roo.bootstrap.NavGroup = function(config){
5744 Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
5747 Roo.bootstrap.NavGroup.register(this);
5751 * Fires when the active item changes
5752 * @param {Roo.bootstrap.NavGroup} this
5753 * @param {Roo.bootstrap.Navbar.Item} selected The item selected
5754 * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
5761 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, {
5773 getAutoCreate : function()
5775 var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
5781 if (Roo.bootstrap.version == 4) {
5782 if (['tabs','pills'].indexOf(this.type) != -1) {
5783 cfg.cls += ' nav-' + this.type;
5785 // trying to remove so header bar can right align top?
5786 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
5787 // do not use on header bar...
5788 cfg.cls += ' navbar-nav';
5793 if (['tabs','pills'].indexOf(this.type) != -1) {
5794 cfg.cls += ' nav-' + this.type
5796 if (this.type !== 'nav') {
5797 Roo.log('nav type must be nav/tabs/pills')
5799 cfg.cls += ' navbar-nav'
5803 if (this.parent() && this.parent().sidebar) {
5806 cls: 'dashboard-menu sidebar-menu'
5812 if (this.form === true) {
5815 cls: 'navbar-form form-inline'
5817 //nav navbar-right ml-md-auto
5818 if (this.align === 'right') {
5819 cfg.cls += ' navbar-right ml-md-auto';
5821 cfg.cls += ' navbar-left';
5825 if (this.align === 'right') {
5826 cfg.cls += ' navbar-right ml-md-auto';
5828 cfg.cls += ' mr-auto';
5832 cfg.cls += ' navbar-inverse';
5840 * sets the active Navigation item
5841 * @param {Roo.bootstrap.NavItem} the new current navitem
5843 setActiveItem : function(item)
5846 Roo.each(this.navItems, function(v){
5851 v.setActive(false, true);
5858 item.setActive(true, true);
5859 this.fireEvent('changed', this, item, prev);
5864 * gets the active Navigation item
5865 * @return {Roo.bootstrap.NavItem} the current navitem
5867 getActive : function()
5871 Roo.each(this.navItems, function(v){
5882 indexOfNav : function()
5886 Roo.each(this.navItems, function(v,i){
5897 * adds a Navigation item
5898 * @param {Roo.bootstrap.NavItem} the navitem to add
5900 addItem : function(cfg)
5902 if (this.form && Roo.bootstrap.version == 4) {
5905 var cn = new Roo.bootstrap.NavItem(cfg);
5907 cn.parentId = this.id;
5908 cn.onRender(this.el, null);
5912 * register a Navigation item
5913 * @param {Roo.bootstrap.NavItem} the navitem to add
5915 register : function(item)
5917 this.navItems.push( item);
5918 item.navId = this.navId;
5923 * clear all the Navigation item
5926 clearAll : function()
5929 this.el.dom.innerHTML = '';
5932 getNavItem: function(tabId)
5935 Roo.each(this.navItems, function(e) {
5936 if (e.tabId == tabId) {
5946 setActiveNext : function()
5948 var i = this.indexOfNav(this.getActive());
5949 if (i > this.navItems.length) {
5952 this.setActiveItem(this.navItems[i+1]);
5954 setActivePrev : function()
5956 var i = this.indexOfNav(this.getActive());
5960 this.setActiveItem(this.navItems[i-1]);
5962 clearWasActive : function(except) {
5963 Roo.each(this.navItems, function(e) {
5964 if (e.tabId != except.tabId && e.was_active) {
5965 e.was_active = false;
5972 getWasActive : function ()
5975 Roo.each(this.navItems, function(e) {
5990 Roo.apply(Roo.bootstrap.NavGroup, {
5994 * register a Navigation Group
5995 * @param {Roo.bootstrap.NavGroup} the navgroup to add
5997 register : function(navgrp)
5999 this.groups[navgrp.navId] = navgrp;
6003 * fetch a Navigation Group based on the navigation ID
6004 * @param {string} the navgroup to add
6005 * @returns {Roo.bootstrap.NavGroup} the navgroup
6007 get: function(navId) {
6008 if (typeof(this.groups[navId]) == 'undefined') {
6010 //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
6012 return this.groups[navId] ;
6027 * @class Roo.bootstrap.NavItem
6028 * @extends Roo.bootstrap.Component
6029 * Bootstrap Navbar.NavItem class
6030 * @cfg {String} href link to
6031 * @cfg {String} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none
6032 * @cfg {Boolean} button_outline show and outlined button
6033 * @cfg {String} html content of button
6034 * @cfg {String} badge text inside badge
6035 * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
6036 * @cfg {String} glyphicon DEPRICATED - use fa
6037 * @cfg {String} icon DEPRICATED - use fa
6038 * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
6039 * @cfg {Boolean} active Is item active
6040 * @cfg {Boolean} disabled Is item disabled
6041 * @cfg {String} linkcls Link Class
6042 * @cfg {Boolean} preventDefault (true | false) default false
6043 * @cfg {String} tabId the tab that this item activates.
6044 * @cfg {String} tagtype (a|span) render as a href or span?
6045 * @cfg {Boolean} animateRef (true|false) link to element default false
6048 * Create a new Navbar Item
6049 * @param {Object} config The config object
6051 Roo.bootstrap.NavItem = function(config){
6052 Roo.bootstrap.NavItem.superclass.constructor.call(this, config);
6057 * The raw click event for the entire grid.
6058 * @param {Roo.EventObject} e
6063 * Fires when the active item active state changes
6064 * @param {Roo.bootstrap.NavItem} this
6065 * @param {boolean} state the new state
6071 * Fires when scroll to element
6072 * @param {Roo.bootstrap.NavItem} this
6073 * @param {Object} options
6074 * @param {Roo.EventObject} e
6082 Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, {
6091 preventDefault : false,
6099 button_outline : false,
6103 getAutoCreate : function(){
6110 cfg.cls = typeof(cfg.cls) == 'undefined' ? '' : cfg.cls;
6113 cfg.cls += ' active' ;
6115 if (this.disabled) {
6116 cfg.cls += ' disabled';
6120 if (this.button_weight.length) {
6121 cfg.tag = this.href ? 'a' : 'button';
6122 cfg.html = this.html || '';
6123 cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
6125 cfg.href = this.href;
6128 cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
6131 // menu .. should add dropdown-menu class - so no need for carat..
6133 if (this.badge !== '') {
6135 cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6140 if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
6144 href : this.href || "#",
6145 html: this.html || ''
6148 if (this.tagtype == 'a') {
6149 cfg.cn[0].cls = 'nav-link' + (this.active ? ' active' : '') + ' ' + this.linkcls;
6153 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
6156 cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
6158 if(this.glyphicon) {
6159 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
6164 cfg.cn[0].html += " <span class='caret'></span>";
6168 if (this.badge !== '') {
6170 cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
6178 onRender : function(ct, position)
6180 // Roo.log("Call onRender: " + this.xtype);
6181 if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
6185 var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
6186 this.navLink = this.el.select('.nav-link',true).first();
6191 initEvents: function()
6193 if (typeof (this.menu) != 'undefined') {
6194 this.menu.parentType = this.xtype;
6195 this.menu.triggerEl = this.el;
6196 this.menu = this.addxtype(Roo.apply({}, this.menu));
6199 this.el.on('click', this.onClick, this);
6201 //if(this.tagtype == 'span'){
6202 // this.el.select('span',true).on('click', this.onClick, this);
6205 // at this point parent should be available..
6206 this.parent().register(this);
6209 onClick : function(e)
6211 if (e.getTarget('.dropdown-menu-item')) {
6212 // did you click on a menu itemm.... - then don't trigger onclick..
6217 this.preventDefault ||
6220 Roo.log("NavItem - prevent Default?");
6224 if (this.disabled) {
6228 var tg = Roo.bootstrap.TabGroup.get(this.navId);
6229 if (tg && tg.transition) {
6230 Roo.log("waiting for the transitionend");
6236 //Roo.log("fire event clicked");
6237 if(this.fireEvent('click', this, e) === false){
6241 if(this.tagtype == 'span'){
6245 //Roo.log(this.href);
6246 var ael = this.el.select('a',true).first();
6249 if(ael && this.animateRef && this.href.indexOf('#') > -1){
6250 //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
6251 if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
6252 return; // ignore... - it's a 'hash' to another page.
6254 Roo.log("NavItem - prevent Default?");
6256 this.scrollToElement(e);
6260 var p = this.parent();
6262 if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) {
6263 if (typeof(p.setActiveItem) !== 'undefined') {
6264 p.setActiveItem(this);
6268 // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
6269 if (p.parentType == 'NavHeaderbar' && !this.menu) {
6270 // remove the collapsed menu expand...
6271 p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');
6275 isActive: function () {
6278 setActive : function(state, fire, is_was_active)
6280 if (this.active && !state && this.navId) {
6281 this.was_active = true;
6282 var nv = Roo.bootstrap.NavGroup.get(this.navId);
6284 nv.clearWasActive(this);
6288 this.active = state;
6291 this.el.removeClass('active');
6292 this.navLink ? this.navLink.removeClass('active') : false;
6293 } else if (!this.el.hasClass('active')) {
6295 this.el.addClass('active');
6296 if (Roo.bootstrap.version == 4 && this.navLink ) {
6297 this.navLink.addClass('active');
6302 this.fireEvent('changed', this, state);
6305 // show a panel if it's registered and related..
6307 if (!this.navId || !this.tabId || !state || is_was_active) {
6311 var tg = Roo.bootstrap.TabGroup.get(this.navId);
6315 var pan = tg.getPanelByName(this.tabId);
6319 // if we can not flip to new panel - go back to old nav highlight..
6320 if (false == tg.showPanel(pan)) {
6321 var nv = Roo.bootstrap.NavGroup.get(this.navId);
6323 var onav = nv.getWasActive();
6325 onav.setActive(true, false, true);
6334 // this should not be here...
6335 setDisabled : function(state)
6337 this.disabled = state;
6339 this.el.removeClass('disabled');
6340 } else if (!this.el.hasClass('disabled')) {
6341 this.el.addClass('disabled');
6347 * Fetch the element to display the tooltip on.
6348 * @return {Roo.Element} defaults to this.el
6350 tooltipEl : function()
6352 return this.el; //this.tagtype == 'a' ? this.el : this.el.select('' + this.tagtype + '', true).first();
6355 scrollToElement : function(e)
6357 var c = document.body;
6360 * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
6362 if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
6363 c = document.documentElement;
6366 var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
6372 var o = target.calcOffsetsTo(c);
6379 this.fireEvent('scrollto', this, options, e);
6381 Roo.get(c).scrollTo('top', options.value, true);
6394 * <span> icon </span>
6395 * <span> text </span>
6396 * <span>badge </span>
6400 * @class Roo.bootstrap.NavSidebarItem
6401 * @extends Roo.bootstrap.NavItem
6402 * Bootstrap Navbar.NavSidebarItem class
6403 * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
6404 * {Boolean} open is the menu open
6405 * {Boolean} buttonView use button as the tigger el rather that a (default false)
6406 * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
6407 * {String} buttonSize (sm|md|lg)the extra classes for the button
6408 * {Boolean} showArrow show arrow next to the text (default true)
6410 * Create a new Navbar Button
6411 * @param {Object} config The config object
6413 Roo.bootstrap.NavSidebarItem = function(config){
6414 Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
6419 * The raw click event for the entire grid.
6420 * @param {Roo.EventObject} e
6425 * Fires when the active item active state changes
6426 * @param {Roo.bootstrap.NavSidebarItem} this
6427 * @param {boolean} state the new state
6435 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
6437 badgeWeight : 'default',
6443 buttonWeight : 'default',
6449 getAutoCreate : function(){
6454 href : this.href || '#',
6460 if(this.buttonView){
6463 href : this.href || '#',
6464 cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
6477 cfg.cls += ' active';
6480 if (this.disabled) {
6481 cfg.cls += ' disabled';
6484 cfg.cls += ' open x-open';
6487 if (this.glyphicon || this.icon) {
6488 var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
6489 a.cn.push({ tag : 'i', cls : c }) ;
6492 if(!this.buttonView){
6495 html : this.html || ''
6502 if (this.badge !== '') {
6503 a.cn.push({ tag: 'span', cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
6509 a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
6512 a.cls += ' dropdown-toggle treeview' ;
6518 initEvents : function()
6520 if (typeof (this.menu) != 'undefined') {
6521 this.menu.parentType = this.xtype;
6522 this.menu.triggerEl = this.el;
6523 this.menu = this.addxtype(Roo.apply({}, this.menu));
6526 this.el.on('click', this.onClick, this);
6528 if(this.badge !== ''){
6529 this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
6534 onClick : function(e)
6541 if(this.preventDefault){
6545 this.fireEvent('click', this, e);
6548 disable : function()
6550 this.setDisabled(true);
6555 this.setDisabled(false);
6558 setDisabled : function(state)
6560 if(this.disabled == state){
6564 this.disabled = state;
6567 this.el.addClass('disabled');
6571 this.el.removeClass('disabled');
6576 setActive : function(state)
6578 if(this.active == state){
6582 this.active = state;
6585 this.el.addClass('active');
6589 this.el.removeClass('active');
6594 isActive: function ()
6599 setBadge : function(str)
6605 this.badgeEl.dom.innerHTML = str;
6620 Roo.namespace('Roo.bootstrap.breadcrumb');
6624 * @class Roo.bootstrap.breadcrumb.Nav
6625 * @extends Roo.bootstrap.Component
6626 * Bootstrap Breadcrumb Nav Class
6628 * @children Roo.bootstrap.breadcrumb.Item
6631 * Create a new breadcrumb.Nav
6632 * @param {Object} config The config object
6636 Roo.bootstrap.breadcrumb.Nav = function(config){
6637 Roo.bootstrap.breadcrumb.Nav.superclass.constructor.call(this, config);
6642 Roo.extend(Roo.bootstrap.breadcrumb.Nav, Roo.bootstrap.Component, {
6644 getAutoCreate : function()
6661 initEvents: function()
6663 this.olEl = this.el.select('ol',true).first();
6665 getChildContainer : function()
6681 * @class Roo.bootstrap.breadcrumb.Nav
6682 * @extends Roo.bootstrap.Component
6683 * Bootstrap Breadcrumb Nav Class
6685 * @children Roo.bootstrap.breadcrumb.Component
6686 * @cfg {String} html the content of the link.
6687 * @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
6688 * @cfg {Boolean} active is it active
6692 * Create a new breadcrumb.Nav
6693 * @param {Object} config The config object
6696 Roo.bootstrap.breadcrumb.Item = function(config){
6697 Roo.bootstrap.breadcrumb.Item.superclass.constructor.call(this, config);
6702 * The img click event for the img.
6703 * @param {Roo.EventObject} e
6710 Roo.extend(Roo.bootstrap.breadcrumb.Item, Roo.bootstrap.Component, {
6715 getAutoCreate : function()
6720 cls : 'breadcrumb-item' + (this.active ? ' active' : '')
6722 if (this.href !== false) {
6729 cfg.html = this.html;
6735 initEvents: function()
6738 this.el.select('a', true).first().on('click',this.onClick, this)
6742 onClick : function(e)
6745 this.fireEvent('click',this, e);
6758 * @class Roo.bootstrap.Row
6759 * @extends Roo.bootstrap.Component
6760 * Bootstrap Row class (contains columns...)
6764 * @param {Object} config The config object
6767 Roo.bootstrap.Row = function(config){
6768 Roo.bootstrap.Row.superclass.constructor.call(this, config);
6771 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component, {
6773 getAutoCreate : function(){
6792 * @class Roo.bootstrap.Pagination
6793 * @extends Roo.bootstrap.Component
6794 * Bootstrap Pagination class
6795 * @cfg {String} size xs | sm | md | lg
6796 * @cfg {Boolean} inverse false | true
6799 * Create a new Pagination
6800 * @param {Object} config The config object
6803 Roo.bootstrap.Pagination = function(config){
6804 Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
6807 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component, {
6813 getAutoCreate : function(){
6819 cfg.cls += ' inverse';
6825 cfg.cls += " " + this.cls;
6843 * @class Roo.bootstrap.PaginationItem
6844 * @extends Roo.bootstrap.Component
6845 * Bootstrap PaginationItem class
6846 * @cfg {String} html text
6847 * @cfg {String} href the link
6848 * @cfg {Boolean} preventDefault (true | false) default true
6849 * @cfg {Boolean} active (true | false) default false
6850 * @cfg {Boolean} disabled default false
6854 * Create a new PaginationItem
6855 * @param {Object} config The config object
6859 Roo.bootstrap.PaginationItem = function(config){
6860 Roo.bootstrap.PaginationItem.superclass.constructor.call(this, config);
6865 * The raw click event for the entire grid.
6866 * @param {Roo.EventObject} e
6872 Roo.extend(Roo.bootstrap.PaginationItem, Roo.bootstrap.Component, {
6876 preventDefault: true,
6881 getAutoCreate : function(){
6887 href : this.href ? this.href : '#',
6888 html : this.html ? this.html : ''
6898 cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' disabled' : 'disabled';
6902 cfg.cls = typeof(cfg.cls) !== 'undefined' ? cfg.cls + ' active' : 'active';
6908 initEvents: function() {
6910 this.el.on('click', this.onClick, this);
6913 onClick : function(e)
6915 Roo.log('PaginationItem on click ');
6916 if(this.preventDefault){
6924 this.fireEvent('click', this, e);
6940 * @class Roo.bootstrap.Slider
6941 * @extends Roo.bootstrap.Component
6942 * Bootstrap Slider class
6945 * Create a new Slider
6946 * @param {Object} config The config object
6949 Roo.bootstrap.Slider = function(config){
6950 Roo.bootstrap.Slider.superclass.constructor.call(this, config);
6953 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component, {
6955 getAutoCreate : function(){
6959 cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
6963 cls: 'ui-slider-handle ui-state-default ui-corner-all'
6975 * Ext JS Library 1.1.1
6976 * Copyright(c) 2006-2007, Ext JS, LLC.
6978 * Originally Released Under LGPL - original licence link has changed is not relivant.
6981 * <script type="text/javascript">
6986 * @class Roo.grid.ColumnModel
6987 * @extends Roo.util.Observable
6988 * This is the default implementation of a ColumnModel used by the Grid. It defines
6989 * the columns in the grid.
6992 var colModel = new Roo.grid.ColumnModel([
6993 {header: "Ticker", width: 60, sortable: true, locked: true},
6994 {header: "Company Name", width: 150, sortable: true},
6995 {header: "Market Cap.", width: 100, sortable: true},
6996 {header: "$ Sales", width: 100, sortable: true, renderer: money},
6997 {header: "Employees", width: 100, sortable: true, resizable: false}
7002 * The config options listed for this class are options which may appear in each
7003 * individual column definition.
7004 * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
7006 * @param {Object} config An Array of column config objects. See this class's
7007 * config objects for details.
7009 Roo.grid.ColumnModel = function(config){
7011 * The config passed into the constructor
7013 this.config = config;
7016 // if no id, create one
7017 // if the column does not have a dataIndex mapping,
7018 // map it to the order it is in the config
7019 for(var i = 0, len = config.length; i < len; i++){
7021 if(typeof c.dataIndex == "undefined"){
7024 if(typeof c.renderer == "string"){
7025 c.renderer = Roo.util.Format[c.renderer];
7027 if(typeof c.id == "undefined"){
7030 if(c.editor && c.editor.xtype){
7031 c.editor = Roo.factory(c.editor, Roo.grid);
7033 if(c.editor && c.editor.isFormField){
7034 c.editor = new Roo.grid.GridEditor(c.editor);
7036 this.lookup[c.id] = c;
7040 * The width of columns which have no width specified (defaults to 100)
7043 this.defaultWidth = 100;
7046 * Default sortable of columns which have no sortable specified (defaults to false)
7049 this.defaultSortable = false;
7053 * @event widthchange
7054 * Fires when the width of a column changes.
7055 * @param {ColumnModel} this
7056 * @param {Number} columnIndex The column index
7057 * @param {Number} newWidth The new width
7059 "widthchange": true,
7061 * @event headerchange
7062 * Fires when the text of a header changes.
7063 * @param {ColumnModel} this
7064 * @param {Number} columnIndex The column index
7065 * @param {Number} newText The new header text
7067 "headerchange": true,
7069 * @event hiddenchange
7070 * Fires when a column is hidden or "unhidden".
7071 * @param {ColumnModel} this
7072 * @param {Number} columnIndex The column index
7073 * @param {Boolean} hidden true if hidden, false otherwise
7075 "hiddenchange": true,
7077 * @event columnmoved
7078 * Fires when a column is moved.
7079 * @param {ColumnModel} this
7080 * @param {Number} oldIndex
7081 * @param {Number} newIndex
7083 "columnmoved" : true,
7085 * @event columlockchange
7086 * Fires when a column's locked state is changed
7087 * @param {ColumnModel} this
7088 * @param {Number} colIndex
7089 * @param {Boolean} locked true if locked
7091 "columnlockchange" : true
7093 Roo.grid.ColumnModel.superclass.constructor.call(this);
7095 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
7097 * @cfg {String} header The header text to display in the Grid view.
7100 * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
7101 * {@link Roo.data.Record} definition from which to draw the column's value. If not
7102 * specified, the column's index is used as an index into the Record's data Array.
7105 * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
7106 * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
7109 * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
7110 * Defaults to the value of the {@link #defaultSortable} property.
7111 * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
7114 * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
7117 * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed. Defaults to false.
7120 * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
7123 * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
7126 * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
7127 * given the cell's data value. See {@link #setRenderer}. If not specified, the
7128 * default renderer returns the escaped data value. If an object is returned (bootstrap only)
7129 * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
7132 * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor
7135 * @cfg {String} align (Optional) Set the CSS text-align property of the column. Defaults to undefined.
7138 * @cfg {String} valign (Optional) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined.
7141 * @cfg {String} cursor (Optional)
7144 * @cfg {String} tooltip (Optional)
7147 * @cfg {Number} xs (Optional)
7150 * @cfg {Number} sm (Optional)
7153 * @cfg {Number} md (Optional)
7156 * @cfg {Number} lg (Optional)
7159 * Returns the id of the column at the specified index.
7160 * @param {Number} index The column index
7161 * @return {String} the id
7163 getColumnId : function(index){
7164 return this.config[index].id;
7168 * Returns the column for a specified id.
7169 * @param {String} id The column id
7170 * @return {Object} the column
7172 getColumnById : function(id){
7173 return this.lookup[id];
7178 * Returns the column for a specified dataIndex.
7179 * @param {String} dataIndex The column dataIndex
7180 * @return {Object|Boolean} the column or false if not found
7182 getColumnByDataIndex: function(dataIndex){
7183 var index = this.findColumnIndex(dataIndex);
7184 return index > -1 ? this.config[index] : false;
7188 * Returns the index for a specified column id.
7189 * @param {String} id The column id
7190 * @return {Number} the index, or -1 if not found
7192 getIndexById : function(id){
7193 for(var i = 0, len = this.config.length; i < len; i++){
7194 if(this.config[i].id == id){
7202 * Returns the index for a specified column dataIndex.
7203 * @param {String} dataIndex The column dataIndex
7204 * @return {Number} the index, or -1 if not found
7207 findColumnIndex : function(dataIndex){
7208 for(var i = 0, len = this.config.length; i < len; i++){
7209 if(this.config[i].dataIndex == dataIndex){
7217 moveColumn : function(oldIndex, newIndex){
7218 var c = this.config[oldIndex];
7219 this.config.splice(oldIndex, 1);
7220 this.config.splice(newIndex, 0, c);
7221 this.dataMap = null;
7222 this.fireEvent("columnmoved", this, oldIndex, newIndex);
7225 isLocked : function(colIndex){
7226 return this.config[colIndex].locked === true;
7229 setLocked : function(colIndex, value, suppressEvent){
7230 if(this.isLocked(colIndex) == value){
7233 this.config[colIndex].locked = value;
7235 this.fireEvent("columnlockchange", this, colIndex, value);
7239 getTotalLockedWidth : function(){
7241 for(var i = 0; i < this.config.length; i++){
7242 if(this.isLocked(i) && !this.isHidden(i)){
7243 this.totalWidth += this.getColumnWidth(i);
7249 getLockedCount : function(){
7250 for(var i = 0, len = this.config.length; i < len; i++){
7251 if(!this.isLocked(i)){
7256 return this.config.length;
7260 * Returns the number of columns.
7263 getColumnCount : function(visibleOnly){
7264 if(visibleOnly === true){
7266 for(var i = 0, len = this.config.length; i < len; i++){
7267 if(!this.isHidden(i)){
7273 return this.config.length;
7277 * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
7278 * @param {Function} fn
7279 * @param {Object} scope (optional)
7280 * @return {Array} result
7282 getColumnsBy : function(fn, scope){
7284 for(var i = 0, len = this.config.length; i < len; i++){
7285 var c = this.config[i];
7286 if(fn.call(scope||this, c, i) === true){
7294 * Returns true if the specified column is sortable.
7295 * @param {Number} col The column index
7298 isSortable : function(col){
7299 if(typeof this.config[col].sortable == "undefined"){
7300 return this.defaultSortable;
7302 return this.config[col].sortable;
7306 * Returns the rendering (formatting) function defined for the column.
7307 * @param {Number} col The column index.
7308 * @return {Function} The function used to render the cell. See {@link #setRenderer}.
7310 getRenderer : function(col){
7311 if(!this.config[col].renderer){
7312 return Roo.grid.ColumnModel.defaultRenderer;
7314 return this.config[col].renderer;
7318 * Sets the rendering (formatting) function for a column.
7319 * @param {Number} col The column index
7320 * @param {Function} fn The function to use to process the cell's raw data
7321 * to return HTML markup for the grid view. The render function is called with
7322 * the following parameters:<ul>
7323 * <li>Data value.</li>
7324 * <li>Cell metadata. An object in which you may set the following attributes:<ul>
7325 * <li>css A CSS style string to apply to the table cell.</li>
7326 * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
7327 * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
7328 * <li>Row index</li>
7329 * <li>Column index</li>
7330 * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
7332 setRenderer : function(col, fn){
7333 this.config[col].renderer = fn;
7337 * Returns the width for the specified column.
7338 * @param {Number} col The column index
7341 getColumnWidth : function(col){
7342 return this.config[col].width * 1 || this.defaultWidth;
7346 * Sets the width for a column.
7347 * @param {Number} col The column index
7348 * @param {Number} width The new width
7350 setColumnWidth : function(col, width, suppressEvent){
7351 this.config[col].width = width;
7352 this.totalWidth = null;
7354 this.fireEvent("widthchange", this, col, width);
7359 * Returns the total width of all columns.
7360 * @param {Boolean} includeHidden True to include hidden column widths
7363 getTotalWidth : function(includeHidden){
7364 if(!this.totalWidth){
7365 this.totalWidth = 0;
7366 for(var i = 0, len = this.config.length; i < len; i++){
7367 if(includeHidden || !this.isHidden(i)){
7368 this.totalWidth += this.getColumnWidth(i);
7372 return this.totalWidth;
7376 * Returns the header for the specified column.
7377 * @param {Number} col The column index
7380 getColumnHeader : function(col){
7381 return this.config[col].header;
7385 * Sets the header for a column.
7386 * @param {Number} col The column index
7387 * @param {String} header The new header
7389 setColumnHeader : function(col, header){
7390 this.config[col].header = header;
7391 this.fireEvent("headerchange", this, col, header);
7395 * Returns the tooltip for the specified column.
7396 * @param {Number} col The column index
7399 getColumnTooltip : function(col){
7400 return this.config[col].tooltip;
7403 * Sets the tooltip for a column.
7404 * @param {Number} col The column index
7405 * @param {String} tooltip The new tooltip
7407 setColumnTooltip : function(col, tooltip){
7408 this.config[col].tooltip = tooltip;
7412 * Returns the dataIndex for the specified column.
7413 * @param {Number} col The column index
7416 getDataIndex : function(col){
7417 return this.config[col].dataIndex;
7421 * Sets the dataIndex for a column.
7422 * @param {Number} col The column index
7423 * @param {Number} dataIndex The new dataIndex
7425 setDataIndex : function(col, dataIndex){
7426 this.config[col].dataIndex = dataIndex;
7432 * Returns true if the cell is editable.
7433 * @param {Number} colIndex The column index
7434 * @param {Number} rowIndex The row index - this is nto actually used..?
7437 isCellEditable : function(colIndex, rowIndex){
7438 return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
7442 * Returns the editor defined for the cell/column.
7443 * return false or null to disable editing.
7444 * @param {Number} colIndex The column index
7445 * @param {Number} rowIndex The row index
7448 getCellEditor : function(colIndex, rowIndex){
7449 return this.config[colIndex].editor;
7453 * Sets if a column is editable.
7454 * @param {Number} col The column index
7455 * @param {Boolean} editable True if the column is editable
7457 setEditable : function(col, editable){
7458 this.config[col].editable = editable;
7463 * Returns true if the column is hidden.
7464 * @param {Number} colIndex The column index
7467 isHidden : function(colIndex){
7468 return this.config[colIndex].hidden;
7473 * Returns true if the column width cannot be changed
7475 isFixed : function(colIndex){
7476 return this.config[colIndex].fixed;
7480 * Returns true if the column can be resized
7483 isResizable : function(colIndex){
7484 return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
7487 * Sets if a column is hidden.
7488 * @param {Number} colIndex The column index
7489 * @param {Boolean} hidden True if the column is hidden
7491 setHidden : function(colIndex, hidden){
7492 this.config[colIndex].hidden = hidden;
7493 this.totalWidth = null;
7494 this.fireEvent("hiddenchange", this, colIndex, hidden);
7498 * Sets the editor for a column.
7499 * @param {Number} col The column index
7500 * @param {Object} editor The editor object
7502 setEditor : function(col, editor){
7503 this.config[col].editor = editor;
7507 Roo.grid.ColumnModel.defaultRenderer = function(value)
7509 if(typeof value == "object") {
7512 if(typeof value == "string" && value.length < 1){
7516 return String.format("{0}", value);
7519 // Alias for backwards compatibility
7520 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
7523 * Ext JS Library 1.1.1
7524 * Copyright(c) 2006-2007, Ext JS, LLC.
7526 * Originally Released Under LGPL - original licence link has changed is not relivant.
7529 * <script type="text/javascript">
7533 * @class Roo.LoadMask
7534 * A simple utility class for generically masking elements while loading data. If the element being masked has
7535 * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
7536 * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
7537 * element's UpdateManager load indicator and will be destroyed after the initial load.
7539 * Create a new LoadMask
7540 * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
7541 * @param {Object} config The config object
7543 Roo.LoadMask = function(el, config){
7544 this.el = Roo.get(el);
7545 Roo.apply(this, config);
7547 this.store.on('beforeload', this.onBeforeLoad, this);
7548 this.store.on('load', this.onLoad, this);
7549 this.store.on('loadexception', this.onLoadException, this);
7550 this.removeMask = false;
7552 var um = this.el.getUpdateManager();
7553 um.showLoadIndicator = false; // disable the default indicator
7554 um.on('beforeupdate', this.onBeforeLoad, this);
7555 um.on('update', this.onLoad, this);
7556 um.on('failure', this.onLoad, this);
7557 this.removeMask = true;
7561 Roo.LoadMask.prototype = {
7563 * @cfg {Boolean} removeMask
7564 * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
7565 * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
7569 * The text to display in a centered loading message box (defaults to 'Loading...')
7573 * @cfg {String} msgCls
7574 * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
7576 msgCls : 'x-mask-loading',
7579 * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
7585 * Disables the mask to prevent it from being displayed
7587 disable : function(){
7588 this.disabled = true;
7592 * Enables the mask so that it can be displayed
7594 enable : function(){
7595 this.disabled = false;
7598 onLoadException : function()
7602 if (typeof(arguments[3]) != 'undefined') {
7603 Roo.MessageBox.alert("Error loading",arguments[3]);
7607 if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
7608 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
7615 (function() { this.el.unmask(this.removeMask); }).defer(50, this);
7620 (function() { this.el.unmask(this.removeMask); }).defer(50, this);
7624 onBeforeLoad : function(){
7626 (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
7631 destroy : function(){
7633 this.store.un('beforeload', this.onBeforeLoad, this);
7634 this.store.un('load', this.onLoad, this);
7635 this.store.un('loadexception', this.onLoadException, this);
7637 var um = this.el.getUpdateManager();
7638 um.un('beforeupdate', this.onBeforeLoad, this);
7639 um.un('update', this.onLoad, this);
7640 um.un('failure', this.onLoad, this);
7651 * @class Roo.bootstrap.Table
7652 * @extends Roo.bootstrap.Component
7653 * Bootstrap Table class
7654 * @cfg {String} cls table class
7655 * @cfg {String} align (left|center|right) Specifies the alignment of a table according to surrounding text
7656 * @cfg {String} bgcolor Specifies the background color for a table
7657 * @cfg {Number} border Specifies whether the table cells should have borders or not
7658 * @cfg {Number} cellpadding Specifies the space between the cell wall and the cell content
7659 * @cfg {Number} cellspacing Specifies the space between cells
7660 * @cfg {String} frame Specifies which parts of the outside borders that should be visible
7661 * @cfg {String} rules Specifies which parts of the inside borders that should be visible
7662 * @cfg {String} sortable Specifies that the table should be sortable
7663 * @cfg {String} summary Specifies a summary of the content of a table
7664 * @cfg {Number} width Specifies the width of a table
7665 * @cfg {String} layout table layout (auto | fixed | initial | inherit)
7667 * @cfg {boolean} striped Should the rows be alternative striped
7668 * @cfg {boolean} bordered Add borders to the table
7669 * @cfg {boolean} hover Add hover highlighting
7670 * @cfg {boolean} condensed Format condensed
7671 * @cfg {boolean} responsive Format condensed
7672 * @cfg {Boolean} loadMask (true|false) default false
7673 * @cfg {Boolean} footerShow (true|false) generate tfoot, default true
7674 * @cfg {Boolean} headerShow (true|false) generate thead, default true
7675 * @cfg {Boolean} rowSelection (true|false) default false
7676 * @cfg {Boolean} cellSelection (true|false) default false
7677 * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header
7678 * @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
7679 * @cfg {Boolean} lazyLoad auto load data while scrolling to the end (default false)
7680 * @cfg {Boolean} auto_hide_footer auto hide footer if only one page (default false)
7684 * Create a new Table
7685 * @param {Object} config The config object
7688 Roo.bootstrap.Table = function(config){
7689 Roo.bootstrap.Table.superclass.constructor.call(this, config);
7694 this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
7695 this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
7696 this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
7697 this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
7699 this.sm = this.sm || {xtype: 'RowSelectionModel'};
7701 this.sm.grid = this;
7702 this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
7703 this.sm = this.selModel;
7704 this.sm.xmodule = this.xmodule || false;
7707 if (this.cm && typeof(this.cm.config) == 'undefined') {
7708 this.colModel = new Roo.grid.ColumnModel(this.cm);
7709 this.cm = this.colModel;
7710 this.cm.xmodule = this.xmodule || false;
7713 this.store= Roo.factory(this.store, Roo.data);
7714 this.ds = this.store;
7715 this.ds.xmodule = this.xmodule || false;
7718 if (this.footer && this.store) {
7719 this.footer.dataSource = this.ds;
7720 this.footer = Roo.factory(this.footer);
7727 * Fires when a cell is clicked
7728 * @param {Roo.bootstrap.Table} this
7729 * @param {Roo.Element} el
7730 * @param {Number} rowIndex
7731 * @param {Number} columnIndex
7732 * @param {Roo.EventObject} e
7736 * @event celldblclick
7737 * Fires when a cell is double clicked
7738 * @param {Roo.bootstrap.Table} this
7739 * @param {Roo.Element} el
7740 * @param {Number} rowIndex
7741 * @param {Number} columnIndex
7742 * @param {Roo.EventObject} e
7744 "celldblclick" : true,
7747 * Fires when a row is clicked
7748 * @param {Roo.bootstrap.Table} this
7749 * @param {Roo.Element} el
7750 * @param {Number} rowIndex
7751 * @param {Roo.EventObject} e
7755 * @event rowdblclick
7756 * Fires when a row is double clicked
7757 * @param {Roo.bootstrap.Table} this
7758 * @param {Roo.Element} el
7759 * @param {Number} rowIndex
7760 * @param {Roo.EventObject} e
7762 "rowdblclick" : true,
7765 * Fires when a mouseover occur
7766 * @param {Roo.bootstrap.Table} this
7767 * @param {Roo.Element} el
7768 * @param {Number} rowIndex
7769 * @param {Number} columnIndex
7770 * @param {Roo.EventObject} e
7775 * Fires when a mouseout occur
7776 * @param {Roo.bootstrap.Table} this
7777 * @param {Roo.Element} el
7778 * @param {Number} rowIndex
7779 * @param {Number} columnIndex
7780 * @param {Roo.EventObject} e
7785 * Fires when a row is rendered, so you can change add a style to it.
7786 * @param {Roo.bootstrap.Table} this
7787 * @param {Object} rowcfg contains record rowIndex colIndex and rowClass - set rowClass to add a style.
7791 * @event rowsrendered
7792 * Fires when all the rows have been rendered
7793 * @param {Roo.bootstrap.Table} this
7795 'rowsrendered' : true,
7797 * @event contextmenu
7798 * The raw contextmenu event for the entire grid.
7799 * @param {Roo.EventObject} e
7801 "contextmenu" : true,
7803 * @event rowcontextmenu
7804 * Fires when a row is right clicked
7805 * @param {Roo.bootstrap.Table} this
7806 * @param {Number} rowIndex
7807 * @param {Roo.EventObject} e
7809 "rowcontextmenu" : true,
7811 * @event cellcontextmenu
7812 * Fires when a cell is right clicked
7813 * @param {Roo.bootstrap.Table} this
7814 * @param {Number} rowIndex
7815 * @param {Number} cellIndex
7816 * @param {Roo.EventObject} e
7818 "cellcontextmenu" : true,
7820 * @event headercontextmenu
7821 * Fires when a header is right clicked
7822 * @param {Roo.bootstrap.Table} this
7823 * @param {Number} columnIndex
7824 * @param {Roo.EventObject} e
7826 "headercontextmenu" : true
7830 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
7856 rowSelection : false,
7857 cellSelection : false,
7860 // Roo.Element - the tbody
7862 // Roo.Element - thead element
7865 container: false, // used by gridpanel...
7871 auto_hide_footer : false,
7873 getAutoCreate : function()
7875 var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
7882 if (this.scrollBody) {
7883 cfg.cls += ' table-body-fixed';
7886 cfg.cls += ' table-striped';
7890 cfg.cls += ' table-hover';
7892 if (this.bordered) {
7893 cfg.cls += ' table-bordered';
7895 if (this.condensed) {
7896 cfg.cls += ' table-condensed';
7898 if (this.responsive) {
7899 cfg.cls += ' table-responsive';
7903 cfg.cls+= ' ' +this.cls;
7906 // this lot should be simplifed...
7919 ].forEach(function(k) {
7927 cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
7930 if(this.store || this.cm){
7931 if(this.headerShow){
7932 cfg.cn.push(this.renderHeader());
7935 cfg.cn.push(this.renderBody());
7937 if(this.footerShow){
7938 cfg.cn.push(this.renderFooter());
7940 // where does this come from?
7941 //cfg.cls+= ' TableGrid';
7944 return { cn : [ cfg ] };
7947 initEvents : function()
7949 if(!this.store || !this.cm){
7952 if (this.selModel) {
7953 this.selModel.initEvents();
7957 //Roo.log('initEvents with ds!!!!');
7959 this.mainBody = this.el.select('tbody', true).first();
7960 this.mainHead = this.el.select('thead', true).first();
7961 this.mainFoot = this.el.select('tfoot', true).first();
7967 Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
7968 e.on('click', _this.sort, _this);
7971 this.mainBody.on("click", this.onClick, this);
7972 this.mainBody.on("dblclick", this.onDblClick, this);
7974 // why is this done????? = it breaks dialogs??
7975 //this.parent().el.setStyle('position', 'relative');
7979 this.footer.parentId = this.id;
7980 this.footer.onRender(this.el.select('tfoot tr td').first(), null);
7983 this.el.select('tfoot tr td').first().addClass('hide');
7988 this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
7991 this.store.on('load', this.onLoad, this);
7992 this.store.on('beforeload', this.onBeforeLoad, this);
7993 this.store.on('update', this.onUpdate, this);
7994 this.store.on('add', this.onAdd, this);
7995 this.store.on("clear", this.clear, this);
7997 this.el.on("contextmenu", this.onContextMenu, this);
7999 this.mainBody.on('scroll', this.onBodyScroll, this);
8001 this.cm.on("headerchange", this.onHeaderChange, this);
8003 this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
8007 onContextMenu : function(e, t)
8009 this.processEvent("contextmenu", e);
8012 processEvent : function(name, e)
8014 if (name != 'touchstart' ) {
8015 this.fireEvent(name, e);
8018 var t = e.getTarget();
8020 var cell = Roo.get(t);
8026 if(cell.findParent('tfoot', false, true)){
8030 if(cell.findParent('thead', false, true)){
8032 if(e.getTarget().nodeName.toLowerCase() != 'th'){
8033 cell = Roo.get(t).findParent('th', false, true);
8035 Roo.log("failed to find th in thead?");
8036 Roo.log(e.getTarget());
8041 var cellIndex = cell.dom.cellIndex;
8043 var ename = name == 'touchstart' ? 'click' : name;
8044 this.fireEvent("header" + ename, this, cellIndex, e);
8049 if(e.getTarget().nodeName.toLowerCase() != 'td'){
8050 cell = Roo.get(t).findParent('td', false, true);
8052 Roo.log("failed to find th in tbody?");
8053 Roo.log(e.getTarget());
8058 var row = cell.findParent('tr', false, true);
8059 var cellIndex = cell.dom.cellIndex;
8060 var rowIndex = row.dom.rowIndex - 1;
8064 this.fireEvent("row" + name, this, rowIndex, e);
8068 this.fireEvent("cell" + name, this, rowIndex, cellIndex, e);
8074 onMouseover : function(e, el)
8076 var cell = Roo.get(el);
8082 if(e.getTarget().nodeName.toLowerCase() != 'td'){
8083 cell = cell.findParent('td', false, true);
8086 var row = cell.findParent('tr', false, true);
8087 var cellIndex = cell.dom.cellIndex;
8088 var rowIndex = row.dom.rowIndex - 1; // start from 0
8090 this.fireEvent('mouseover', this, cell, rowIndex, cellIndex, e);
8094 onMouseout : function(e, el)
8096 var cell = Roo.get(el);
8102 if(e.getTarget().nodeName.toLowerCase() != 'td'){
8103 cell = cell.findParent('td', false, true);
8106 var row = cell.findParent('tr', false, true);
8107 var cellIndex = cell.dom.cellIndex;
8108 var rowIndex = row.dom.rowIndex - 1; // start from 0
8110 this.fireEvent('mouseout', this, cell, rowIndex, cellIndex, e);
8114 onClick : function(e, el)
8116 var cell = Roo.get(el);
8118 if(!cell || (!this.cellSelection && !this.rowSelection)){
8122 if(e.getTarget().nodeName.toLowerCase() != 'td'){
8123 cell = cell.findParent('td', false, true);
8126 if(!cell || typeof(cell) == 'undefined'){
8130 var row = cell.findParent('tr', false, true);
8132 if(!row || typeof(row) == 'undefined'){
8136 var cellIndex = cell.dom.cellIndex;
8137 var rowIndex = this.getRowIndex(row);
8139 // why??? - should these not be based on SelectionModel?
8140 if(this.cellSelection){
8141 this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
8144 if(this.rowSelection){
8145 this.fireEvent('rowclick', this, row, rowIndex, e);
8151 onDblClick : function(e,el)
8153 var cell = Roo.get(el);
8155 if(!cell || (!this.cellSelection && !this.rowSelection)){
8159 if(e.getTarget().nodeName.toLowerCase() != 'td'){
8160 cell = cell.findParent('td', false, true);
8163 if(!cell || typeof(cell) == 'undefined'){
8167 var row = cell.findParent('tr', false, true);
8169 if(!row || typeof(row) == 'undefined'){
8173 var cellIndex = cell.dom.cellIndex;
8174 var rowIndex = this.getRowIndex(row);
8176 if(this.cellSelection){
8177 this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
8180 if(this.rowSelection){
8181 this.fireEvent('rowdblclick', this, row, rowIndex, e);
8185 sort : function(e,el)
8187 var col = Roo.get(el);
8189 if(!col.hasClass('sortable')){
8193 var sort = col.attr('sort');
8196 if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
8200 this.store.sortInfo = {field : sort, direction : dir};
8203 Roo.log("calling footer first");
8204 this.footer.onClick('first');
8207 this.store.load({ params : { start : 0 } });
8211 renderHeader : function()
8219 this.totalWidth = 0;
8221 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
8223 var config = cm.config[i];
8227 cls : 'x-hcol-' + i,
8229 html: cm.getColumnHeader(i)
8234 if(typeof(config.sortable) != 'undefined' && config.sortable){
8236 c.html = '<i class="glyphicon"></i>' + c.html;
8239 // could use BS4 hidden-..-down
8241 if(typeof(config.lgHeader) != 'undefined'){
8242 hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
8245 if(typeof(config.mdHeader) != 'undefined'){
8246 hh += '<span class="hidden-xs hidden-sm hidden-lg">' + config.mdHeader + '</span>';
8249 if(typeof(config.smHeader) != 'undefined'){
8250 hh += '<span class="hidden-xs hidden-md hidden-lg">' + config.smHeader + '</span>';
8253 if(typeof(config.xsHeader) != 'undefined'){
8254 hh += '<span class="hidden-sm hidden-md hidden-lg">' + config.xsHeader + '</span>';
8261 if(typeof(config.tooltip) != 'undefined'){
8262 c.tooltip = config.tooltip;
8265 if(typeof(config.colspan) != 'undefined'){
8266 c.colspan = config.colspan;
8269 if(typeof(config.hidden) != 'undefined' && config.hidden){
8270 c.style += ' display:none;';
8273 if(typeof(config.dataIndex) != 'undefined'){
8274 c.sort = config.dataIndex;
8279 if(typeof(config.align) != 'undefined' && config.align.length){
8280 c.style += ' text-align:' + config.align + ';';
8283 if(typeof(config.width) != 'undefined'){
8284 c.style += ' width:' + config.width + 'px;';
8285 this.totalWidth += config.width;
8287 this.totalWidth += 100; // assume minimum of 100 per column?
8290 if(typeof(config.cls) != 'undefined'){
8291 c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
8294 ['xs','sm','md','lg'].map(function(size){
8296 if(typeof(config[size]) == 'undefined'){
8300 if (!config[size]) { // 0 = hidden
8301 // BS 4 '0' is treated as hide that column and below.
8302 c.cls += ' hidden-' + size + ' hidden' + size + '-down';
8306 c.cls += ' col-' + size + '-' + config[size] + (
8307 size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
8319 renderBody : function()
8329 colspan : this.cm.getColumnCount()
8339 renderFooter : function()
8349 colspan : this.cm.getColumnCount()
8363 // Roo.log('ds onload');
8368 var ds = this.store;
8370 Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
8371 e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
8372 if (_this.store.sortInfo) {
8374 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
8375 e.select('i', true).addClass(['glyphicon-arrow-up']);
8378 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
8379 e.select('i', true).addClass(['glyphicon-arrow-down']);
8384 var tbody = this.mainBody;
8386 if(ds.getCount() > 0){
8387 ds.data.each(function(d,rowIndex){
8388 var row = this.renderRow(cm, ds, rowIndex);
8390 tbody.createChild(row);
8394 if(row.cellObjects.length){
8395 Roo.each(row.cellObjects, function(r){
8396 _this.renderCellObject(r);
8403 var tfoot = this.el.select('tfoot', true).first();
8405 if(this.footerShow && this.auto_hide_footer && this.mainFoot){
8407 this.mainFoot.setVisibilityMode(Roo.Element.DISPLAY).hide();
8409 var total = this.ds.getTotalCount();
8411 if(this.footer.pageSize < total){
8412 this.mainFoot.show();
8416 Roo.each(this.el.select('tbody td', true).elements, function(e){
8417 e.on('mouseover', _this.onMouseover, _this);
8420 Roo.each(this.el.select('tbody td', true).elements, function(e){
8421 e.on('mouseout', _this.onMouseout, _this);
8423 this.fireEvent('rowsrendered', this);
8429 onUpdate : function(ds,record)
8431 this.refreshRow(record);
8435 onRemove : function(ds, record, index, isUpdate){
8436 if(isUpdate !== true){
8437 this.fireEvent("beforerowremoved", this, index, record);
8439 var bt = this.mainBody.dom;
8441 var rows = this.el.select('tbody > tr', true).elements;
8443 if(typeof(rows[index]) != 'undefined'){
8444 bt.removeChild(rows[index].dom);
8447 // if(bt.rows[index]){
8448 // bt.removeChild(bt.rows[index]);
8451 if(isUpdate !== true){
8452 //this.stripeRows(index);
8453 //this.syncRowHeights(index, index);
8455 this.fireEvent("rowremoved", this, index, record);
8459 onAdd : function(ds, records, rowIndex)
8461 //Roo.log('on Add called');
8462 // - note this does not handle multiple adding very well..
8463 var bt = this.mainBody.dom;
8464 for (var i =0 ; i < records.length;i++) {
8465 //Roo.log('call insert row Add called on ' + rowIndex + ':' + i);
8466 //Roo.log(records[i]);
8467 //Roo.log(this.store.getAt(rowIndex+i));
8468 this.insertRow(this.store, rowIndex + i, false);
8475 refreshRow : function(record){
8476 var ds = this.store, index;
8477 if(typeof record == 'number'){
8479 record = ds.getAt(index);
8481 index = ds.indexOf(record);
8483 return; // should not happen - but seems to
8486 this.insertRow(ds, index, true);
8488 this.onRemove(ds, record, index+1, true);
8490 //this.syncRowHeights(index, index);
8492 this.fireEvent("rowupdated", this, index, record);
8495 insertRow : function(dm, rowIndex, isUpdate){
8498 this.fireEvent("beforerowsinserted", this, rowIndex);
8500 //var s = this.getScrollState();
8501 var row = this.renderRow(this.cm, this.store, rowIndex);
8502 // insert before rowIndex..
8503 var e = this.mainBody.createChild(row,this.getRowDom(rowIndex));
8507 if(row.cellObjects.length){
8508 Roo.each(row.cellObjects, function(r){
8509 _this.renderCellObject(r);
8514 this.fireEvent("rowsinserted", this, rowIndex);
8515 //this.syncRowHeights(firstRow, lastRow);
8516 //this.stripeRows(firstRow);
8523 getRowDom : function(rowIndex)
8525 var rows = this.el.select('tbody > tr', true).elements;
8527 return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
8530 // returns the object tree for a tr..
8533 renderRow : function(cm, ds, rowIndex)
8535 var d = ds.getAt(rowIndex);
8539 cls : 'x-row-' + rowIndex,
8543 var cellObjects = [];
8545 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
8546 var config = cm.config[i];
8548 var renderer = cm.getRenderer(i);
8552 if(typeof(renderer) !== 'undefined'){
8553 value = renderer(d.data[cm.getDataIndex(i)], false, d);
8555 // if object are returned, then they are expected to be Roo.bootstrap.Component instances
8556 // and are rendered into the cells after the row is rendered - using the id for the element.
8558 if(typeof(value) === 'object'){
8568 rowIndex : rowIndex,
8573 this.fireEvent('rowclass', this, rowcfg);
8577 cls : rowcfg.rowClass + ' x-col-' + i,
8579 html: (typeof(value) === 'object') ? '' : value
8586 if(typeof(config.colspan) != 'undefined'){
8587 td.colspan = config.colspan;
8590 if(typeof(config.hidden) != 'undefined' && config.hidden){
8591 td.style += ' display:none;';
8594 if(typeof(config.align) != 'undefined' && config.align.length){
8595 td.style += ' text-align:' + config.align + ';';
8597 if(typeof(config.valign) != 'undefined' && config.valign.length){
8598 td.style += ' vertical-align:' + config.valign + ';';
8601 if(typeof(config.width) != 'undefined'){
8602 td.style += ' width:' + config.width + 'px;';
8605 if(typeof(config.cursor) != 'undefined'){
8606 td.style += ' cursor:' + config.cursor + ';';
8609 if(typeof(config.cls) != 'undefined'){
8610 td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
8613 ['xs','sm','md','lg'].map(function(size){
8615 if(typeof(config[size]) == 'undefined'){
8621 if (!config[size]) { // 0 = hidden
8622 // BS 4 '0' is treated as hide that column and below.
8623 td.cls += ' hidden-' + size + ' hidden' + size + '-down';
8627 td.cls += ' col-' + size + '-' + config[size] + (
8628 size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
8638 row.cellObjects = cellObjects;
8646 onBeforeLoad : function()
8655 this.el.select('tbody', true).first().dom.innerHTML = '';
8658 * Show or hide a row.
8659 * @param {Number} rowIndex to show or hide
8660 * @param {Boolean} state hide
8662 setRowVisibility : function(rowIndex, state)
8664 var bt = this.mainBody.dom;
8666 var rows = this.el.select('tbody > tr', true).elements;
8668 if(typeof(rows[rowIndex]) == 'undefined'){
8671 rows[rowIndex].dom.style.display = state ? '' : 'none';
8675 getSelectionModel : function(){
8677 this.selModel = new Roo.bootstrap.Table.RowSelectionModel({grid: this});
8679 return this.selModel;
8682 * Render the Roo.bootstrap object from renderder
8684 renderCellObject : function(r)
8688 r.cfg.parentId = (typeof(r.container) == 'string') ? r.container : r.container.id;
8690 var t = r.cfg.render(r.container);
8693 Roo.each(r.cfg.cn, function(c){
8695 container: t.getChildContainer(),
8698 _this.renderCellObject(child);
8703 getRowIndex : function(row)
8707 Roo.each(this.el.select('tbody > tr', true).elements, function(el, index){
8718 * Returns the grid's underlying element = used by panel.Grid
8719 * @return {Element} The element
8721 getGridEl : function(){
8725 * Forces a resize - used by panel.Grid
8726 * @return {Element} The element
8728 autoSize : function()
8730 //var ctr = Roo.get(this.container.dom.parentElement);
8731 var ctr = Roo.get(this.el.dom);
8733 var thd = this.getGridEl().select('thead',true).first();
8734 var tbd = this.getGridEl().select('tbody', true).first();
8735 var tfd = this.getGridEl().select('tfoot', true).first();
8737 var cw = ctr.getWidth();
8738 this.getGridEl().select('tfoot tr, tfoot td',true).setWidth(cw);
8742 tbd.setWidth(ctr.getWidth());
8743 // if the body has a max height - and then scrolls - we should perhaps set up the height here
8744 // this needs fixing for various usage - currently only hydra job advers I think..
8746 // ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
8748 var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
8751 cw = Math.max(cw, this.totalWidth);
8752 this.getGridEl().select('tbody tr',true).setWidth(cw);
8754 // resize 'expandable coloumn?
8756 return; // we doe not have a view in this design..
8759 onBodyScroll: function()
8761 //Roo.log("body scrolled');" + this.mainBody.dom.scrollLeft);
8763 this.mainHead.setStyle({
8764 'position' : 'relative',
8765 'left': (-1* this.mainBody.dom.scrollLeft) + 'px'
8771 var scrollHeight = this.mainBody.dom.scrollHeight;
8773 var scrollTop = Math.ceil(this.mainBody.getScroll().top);
8775 var height = this.mainBody.getHeight();
8777 if(scrollHeight - height == scrollTop) {
8779 var total = this.ds.getTotalCount();
8781 if(this.footer.cursor + this.footer.pageSize < total){
8783 this.footer.ds.load({
8785 start : this.footer.cursor + this.footer.pageSize,
8786 limit : this.footer.pageSize
8796 onHeaderChange : function()
8798 var header = this.renderHeader();
8799 var table = this.el.select('table', true).first();
8801 this.mainHead.remove();
8802 this.mainHead = table.createChild(header, this.mainBody, false);
8805 onHiddenChange : function(colModel, colIndex, hidden)
8807 var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
8808 var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
8810 this.CSS.updateRule(thSelector, "display", "");
8811 this.CSS.updateRule(tdSelector, "display", "");
8814 this.CSS.updateRule(thSelector, "display", "none");
8815 this.CSS.updateRule(tdSelector, "display", "none");
8818 this.onHeaderChange();
8822 setColumnWidth: function(col_index, width)
8824 // width = "md-2 xs-2..."
8825 if(!this.colModel.config[col_index]) {
8829 var w = width.split(" ");
8831 var rows = this.el.dom.getElementsByClassName("x-col-"+col_index);
8833 var h_row = this.el.dom.getElementsByClassName("x-hcol-"+col_index);
8836 for(var j = 0; j < w.length; j++) {
8842 var size_cls = w[j].split("-");
8844 if(!Number.isInteger(size_cls[1] * 1)) {
8848 if(!this.colModel.config[col_index][size_cls[0]]) {
8852 if(!h_row[0].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
8856 h_row[0].classList.replace(
8857 "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
8858 "col-"+size_cls[0]+"-"+size_cls[1]
8861 for(var i = 0; i < rows.length; i++) {
8863 var size_cls = w[j].split("-");
8865 if(!Number.isInteger(size_cls[1] * 1)) {
8869 if(!this.colModel.config[col_index][size_cls[0]]) {
8873 if(!rows[i].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
8877 rows[i].classList.replace(
8878 "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
8879 "col-"+size_cls[0]+"-"+size_cls[1]
8883 this.colModel.config[col_index][size_cls[0]] = size_cls[1];
8898 * @class Roo.bootstrap.TableCell
8899 * @extends Roo.bootstrap.Component
8900 * Bootstrap TableCell class
8901 * @cfg {String} html cell contain text
8902 * @cfg {String} cls cell class
8903 * @cfg {String} tag cell tag (td|th) default td
8904 * @cfg {String} abbr Specifies an abbreviated version of the content in a cell
8905 * @cfg {String} align Aligns the content in a cell
8906 * @cfg {String} axis Categorizes cells
8907 * @cfg {String} bgcolor Specifies the background color of a cell
8908 * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
8909 * @cfg {Number} colspan Specifies the number of columns a cell should span
8910 * @cfg {String} headers Specifies one or more header cells a cell is related to
8911 * @cfg {Number} height Sets the height of a cell
8912 * @cfg {String} nowrap Specifies that the content inside a cell should not wrap
8913 * @cfg {Number} rowspan Sets the number of rows a cell should span
8914 * @cfg {String} scope Defines a way to associate header cells and data cells in a table
8915 * @cfg {String} valign Vertical aligns the content in a cell
8916 * @cfg {Number} width Specifies the width of a cell
8919 * Create a new TableCell
8920 * @param {Object} config The config object
8923 Roo.bootstrap.TableCell = function(config){
8924 Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
8927 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component, {
8947 getAutoCreate : function(){
8948 var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
8968 cfg.align=this.align
8974 cfg.bgcolor=this.bgcolor
8977 cfg.charoff=this.charoff
8980 cfg.colspan=this.colspan
8983 cfg.headers=this.headers
8986 cfg.height=this.height
8989 cfg.nowrap=this.nowrap
8992 cfg.rowspan=this.rowspan
8995 cfg.scope=this.scope
8998 cfg.valign=this.valign
9001 cfg.width=this.width
9020 * @class Roo.bootstrap.TableRow
9021 * @extends Roo.bootstrap.Component
9022 * Bootstrap TableRow class
9023 * @cfg {String} cls row class
9024 * @cfg {String} align Aligns the content in a table row
9025 * @cfg {String} bgcolor Specifies a background color for a table row
9026 * @cfg {Number} charoff Sets the number of characters the content will be aligned from the character specified by the char attribute
9027 * @cfg {String} valign Vertical aligns the content in a table row
9030 * Create a new TableRow
9031 * @param {Object} config The config object
9034 Roo.bootstrap.TableRow = function(config){
9035 Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
9038 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component, {
9046 getAutoCreate : function(){
9047 var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
9057 cfg.align = this.align;
9060 cfg.bgcolor = this.bgcolor;
9063 cfg.charoff = this.charoff;
9066 cfg.valign = this.valign;
9084 * @class Roo.bootstrap.TableBody
9085 * @extends Roo.bootstrap.Component
9086 * Bootstrap TableBody class
9087 * @cfg {String} cls element class
9088 * @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
9089 * @cfg {String} align Aligns the content inside the element
9090 * @cfg {Number} charoff Sets the number of characters the content inside the element will be aligned from the character specified by the char attribute
9091 * @cfg {String} valign Vertical aligns the content inside the <tbody> element
9094 * Create a new TableBody
9095 * @param {Object} config The config object
9098 Roo.bootstrap.TableBody = function(config){
9099 Roo.bootstrap.TableBody.superclass.constructor.call(this, config);
9102 Roo.extend(Roo.bootstrap.TableBody, Roo.bootstrap.Component, {
9110 getAutoCreate : function(){
9111 var cfg = Roo.apply({}, Roo.bootstrap.TableBody.superclass.getAutoCreate.call(this));
9125 cfg.align = this.align;
9128 cfg.charoff = this.charoff;
9131 cfg.valign = this.valign;
9138 // initEvents : function()
9145 // this.store = Roo.factory(this.store, Roo.data);
9146 // this.store.on('load', this.onLoad, this);
9148 // this.store.load();
9152 // onLoad: function ()
9154 // this.fireEvent('load', this);
9164 * Ext JS Library 1.1.1
9165 * Copyright(c) 2006-2007, Ext JS, LLC.
9167 * Originally Released Under LGPL - original licence link has changed is not relivant.
9170 * <script type="text/javascript">
9173 // as we use this in bootstrap.
9174 Roo.namespace('Roo.form');
9176 * @class Roo.form.Action
9177 * Internal Class used to handle form actions
9179 * @param {Roo.form.BasicForm} el The form element or its id
9180 * @param {Object} config Configuration options
9185 // define the action interface
9186 Roo.form.Action = function(form, options){
9188 this.options = options || {};
9191 * Client Validation Failed
9194 Roo.form.Action.CLIENT_INVALID = 'client';
9196 * Server Validation Failed
9199 Roo.form.Action.SERVER_INVALID = 'server';
9201 * Connect to Server Failed
9204 Roo.form.Action.CONNECT_FAILURE = 'connect';
9206 * Reading Data from Server Failed
9209 Roo.form.Action.LOAD_FAILURE = 'load';
9211 Roo.form.Action.prototype = {
9213 failureType : undefined,
9214 response : undefined,
9218 run : function(options){
9223 success : function(response){
9228 handleResponse : function(response){
9232 // default connection failure
9233 failure : function(response){
9235 this.response = response;
9236 this.failureType = Roo.form.Action.CONNECT_FAILURE;
9237 this.form.afterAction(this, false);
9240 processResponse : function(response){
9241 this.response = response;
9242 if(!response.responseText){
9245 this.result = this.handleResponse(response);
9249 // utility functions used internally
9250 getUrl : function(appendParams){
9251 var url = this.options.url || this.form.url || this.form.el.dom.action;
9253 var p = this.getParams();
9255 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
9261 getMethod : function(){
9262 return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
9265 getParams : function(){
9266 var bp = this.form.baseParams;
9267 var p = this.options.params;
9269 if(typeof p == "object"){
9270 p = Roo.urlEncode(Roo.applyIf(p, bp));
9271 }else if(typeof p == 'string' && bp){
9272 p += '&' + Roo.urlEncode(bp);
9275 p = Roo.urlEncode(bp);
9280 createCallback : function(){
9282 success: this.success,
9283 failure: this.failure,
9285 timeout: (this.form.timeout*1000),
9286 upload: this.form.fileUpload ? this.success : undefined
9291 Roo.form.Action.Submit = function(form, options){
9292 Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
9295 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
9298 haveProgress : false,
9299 uploadComplete : false,
9301 // uploadProgress indicator.
9302 uploadProgress : function()
9304 if (!this.form.progressUrl) {
9308 if (!this.haveProgress) {
9309 Roo.MessageBox.progress("Uploading", "Uploading");
9311 if (this.uploadComplete) {
9312 Roo.MessageBox.hide();
9316 this.haveProgress = true;
9318 var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
9320 var c = new Roo.data.Connection();
9322 url : this.form.progressUrl,
9327 success : function(req){
9328 //console.log(data);
9332 rdata = Roo.decode(req.responseText)
9334 Roo.log("Invalid data from server..");
9338 if (!rdata || !rdata.success) {
9340 Roo.MessageBox.alert(Roo.encode(rdata));
9343 var data = rdata.data;
9345 if (this.uploadComplete) {
9346 Roo.MessageBox.hide();
9351 Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
9352 Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
9355 this.uploadProgress.defer(2000,this);
9358 failure: function(data) {
9359 Roo.log('progress url failed ');
9370 // run get Values on the form, so it syncs any secondary forms.
9371 this.form.getValues();
9373 var o = this.options;
9374 var method = this.getMethod();
9375 var isPost = method == 'POST';
9376 if(o.clientValidation === false || this.form.isValid()){
9378 if (this.form.progressUrl) {
9379 this.form.findField('UPLOAD_IDENTIFIER').setValue(
9380 (new Date() * 1) + '' + Math.random());
9385 Roo.Ajax.request(Roo.apply(this.createCallback(), {
9386 form:this.form.el.dom,
9387 url:this.getUrl(!isPost),
9389 params:isPost ? this.getParams() : null,
9390 isUpload: this.form.fileUpload,
9391 formData : this.form.formData
9394 this.uploadProgress();
9396 }else if (o.clientValidation !== false){ // client validation failed
9397 this.failureType = Roo.form.Action.CLIENT_INVALID;
9398 this.form.afterAction(this, false);
9402 success : function(response)
9404 this.uploadComplete= true;
9405 if (this.haveProgress) {
9406 Roo.MessageBox.hide();
9410 var result = this.processResponse(response);
9411 if(result === true || result.success){
9412 this.form.afterAction(this, true);
9416 this.form.markInvalid(result.errors);
9417 this.failureType = Roo.form.Action.SERVER_INVALID;
9419 this.form.afterAction(this, false);
9421 failure : function(response)
9423 this.uploadComplete= true;
9424 if (this.haveProgress) {
9425 Roo.MessageBox.hide();
9428 this.response = response;
9429 this.failureType = Roo.form.Action.CONNECT_FAILURE;
9430 this.form.afterAction(this, false);
9433 handleResponse : function(response){
9434 if(this.form.errorReader){
9435 var rs = this.form.errorReader.read(response);
9438 for(var i = 0, len = rs.records.length; i < len; i++) {
9439 var r = rs.records[i];
9443 if(errors.length < 1){
9447 success : rs.success,
9453 ret = Roo.decode(response.responseText);
9457 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
9467 Roo.form.Action.Load = function(form, options){
9468 Roo.form.Action.Load.superclass.constructor.call(this, form, options);
9469 this.reader = this.form.reader;
9472 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
9477 Roo.Ajax.request(Roo.apply(
9478 this.createCallback(), {
9479 method:this.getMethod(),
9480 url:this.getUrl(false),
9481 params:this.getParams()
9485 success : function(response){
9487 var result = this.processResponse(response);
9488 if(result === true || !result.success || !result.data){
9489 this.failureType = Roo.form.Action.LOAD_FAILURE;
9490 this.form.afterAction(this, false);
9493 this.form.clearInvalid();
9494 this.form.setValues(result.data);
9495 this.form.afterAction(this, true);
9498 handleResponse : function(response){
9499 if(this.form.reader){
9500 var rs = this.form.reader.read(response);
9501 var data = rs.records && rs.records[0] ? rs.records[0].data : null;
9503 success : rs.success,
9507 return Roo.decode(response.responseText);
9511 Roo.form.Action.ACTION_TYPES = {
9512 'load' : Roo.form.Action.Load,
9513 'submit' : Roo.form.Action.Submit
9522 * @class Roo.bootstrap.Form
9523 * @extends Roo.bootstrap.Component
9524 * Bootstrap Form class
9525 * @cfg {String} method GET | POST (default POST)
9526 * @cfg {String} labelAlign top | left (default top)
9527 * @cfg {String} align left | right - for navbars
9528 * @cfg {Boolean} loadMask load mask when submit (default true)
9533 * @param {Object} config The config object
9537 Roo.bootstrap.Form = function(config){
9539 Roo.bootstrap.Form.superclass.constructor.call(this, config);
9541 Roo.bootstrap.Form.popover.apply();
9545 * @event clientvalidation
9546 * If the monitorValid config option is true, this event fires repetitively to notify of valid state
9547 * @param {Form} this
9548 * @param {Boolean} valid true if the form has passed client-side validation
9550 clientvalidation: true,
9552 * @event beforeaction
9553 * Fires before any action is performed. Return false to cancel the action.
9554 * @param {Form} this
9555 * @param {Action} action The action to be performed
9559 * @event actionfailed
9560 * Fires when an action fails.
9561 * @param {Form} this
9562 * @param {Action} action The action that failed
9564 actionfailed : true,
9566 * @event actioncomplete
9567 * Fires when an action is completed.
9568 * @param {Form} this
9569 * @param {Action} action The action that completed
9571 actioncomplete : true
9575 Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, {
9578 * @cfg {String} method
9579 * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
9584 * The URL to use for form actions if one isn't supplied in the action options.
9587 * @cfg {Boolean} fileUpload
9588 * Set to true if this form is a file upload.
9592 * @cfg {Object} baseParams
9593 * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
9597 * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
9601 * @cfg {Sting} align (left|right) for navbar forms
9606 activeAction : null,
9609 * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
9610 * element by passing it or its id or mask the form itself by passing in true.
9613 waitMsgTarget : false,
9618 * @cfg {Boolean} errorMask (true|false) default false
9623 * @cfg {Number} maskOffset Default 100
9628 * @cfg {Boolean} maskBody
9632 getAutoCreate : function(){
9636 method : this.method || 'POST',
9637 id : this.id || Roo.id(),
9640 if (this.parent().xtype.match(/^Nav/)) {
9641 cfg.cls = 'navbar-form form-inline navbar-' + this.align;
9645 if (this.labelAlign == 'left' ) {
9646 cfg.cls += ' form-horizontal';
9652 initEvents : function()
9654 this.el.on('submit', this.onSubmit, this);
9655 // this was added as random key presses on the form where triggering form submit.
9656 this.el.on('keypress', function(e) {
9657 if (e.getCharCode() != 13) {
9660 // we might need to allow it for textareas.. and some other items.
9661 // check e.getTarget().
9663 if(e.getTarget().nodeName.toLowerCase() === 'textarea'){
9667 Roo.log("keypress blocked");
9675 onSubmit : function(e){
9680 * Returns true if client-side validation on the form is successful.
9683 isValid : function(){
9684 var items = this.getItems();
9688 items.each(function(f){
9694 Roo.log('invalid field: ' + f.name);
9698 if(!target && f.el.isVisible(true)){
9704 if(this.errorMask && !valid){
9705 Roo.bootstrap.Form.popover.mask(this, target);
9712 * Returns true if any fields in this form have changed since their original load.
9715 isDirty : function(){
9717 var items = this.getItems();
9718 items.each(function(f){
9728 * Performs a predefined action (submit or load) or custom actions you define on this form.
9729 * @param {String} actionName The name of the action type
9730 * @param {Object} options (optional) The options to pass to the action. All of the config options listed
9731 * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
9732 * accept other config options):
9734 Property Type Description
9735 ---------------- --------------- ----------------------------------------------------------------------------------
9736 url String The url for the action (defaults to the form's url)
9737 method String The form method to use (defaults to the form's method, or POST if not defined)
9738 params String/Object The params to pass (defaults to the form's baseParams, or none if not defined)
9739 clientValidation Boolean Applies to submit only. Pass true to call form.isValid() prior to posting to
9740 validate the form on the client (defaults to false)
9742 * @return {BasicForm} this
9744 doAction : function(action, options){
9745 if(typeof action == 'string'){
9746 action = new Roo.form.Action.ACTION_TYPES[action](this, options);
9748 if(this.fireEvent('beforeaction', this, action) !== false){
9749 this.beforeAction(action);
9750 action.run.defer(100, action);
9756 beforeAction : function(action){
9757 var o = action.options;
9762 Roo.get(document.body).mask(o.waitMsg || "Sending", 'x-mask-loading')
9764 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
9767 // not really supported yet.. ??
9769 //if(this.waitMsgTarget === true){
9770 // this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
9771 //}else if(this.waitMsgTarget){
9772 // this.waitMsgTarget = Roo.get(this.waitMsgTarget);
9773 // this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
9775 // Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
9781 afterAction : function(action, success){
9782 this.activeAction = null;
9783 var o = action.options;
9788 Roo.get(document.body).unmask();
9794 //if(this.waitMsgTarget === true){
9795 // this.el.unmask();
9796 //}else if(this.waitMsgTarget){
9797 // this.waitMsgTarget.unmask();
9799 // Roo.MessageBox.updateProgress(1);
9800 // Roo.MessageBox.hide();
9807 Roo.callback(o.success, o.scope, [this, action]);
9808 this.fireEvent('actioncomplete', this, action);
9812 // failure condition..
9813 // we have a scenario where updates need confirming.
9814 // eg. if a locking scenario exists..
9815 // we look for { errors : { needs_confirm : true }} in the response.
9817 (typeof(action.result) != 'undefined') &&
9818 (typeof(action.result.errors) != 'undefined') &&
9819 (typeof(action.result.errors.needs_confirm) != 'undefined')
9822 Roo.log("not supported yet");
9825 Roo.MessageBox.confirm(
9826 "Change requires confirmation",
9827 action.result.errorMsg,
9832 _t.doAction('submit', { params : { _submit_confirmed : 1 } } );
9842 Roo.callback(o.failure, o.scope, [this, action]);
9843 // show an error message if no failed handler is set..
9844 if (!this.hasListener('actionfailed')) {
9845 Roo.log("need to add dialog support");
9847 Roo.MessageBox.alert("Error",
9848 (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
9849 action.result.errorMsg :
9850 "Saving Failed, please check your entries or try again"
9855 this.fireEvent('actionfailed', this, action);
9860 * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
9861 * @param {String} id The value to search for
9864 findField : function(id){
9865 var items = this.getItems();
9866 var field = items.get(id);
9868 items.each(function(f){
9869 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
9876 return field || null;
9879 * Mark fields in this form invalid in bulk.
9880 * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
9881 * @return {BasicForm} this
9883 markInvalid : function(errors){
9884 if(errors instanceof Array){
9885 for(var i = 0, len = errors.length; i < len; i++){
9886 var fieldError = errors[i];
9887 var f = this.findField(fieldError.id);
9889 f.markInvalid(fieldError.msg);
9895 if(typeof errors[id] != 'function' && (field = this.findField(id))){
9896 field.markInvalid(errors[id]);
9900 //Roo.each(this.childForms || [], function (f) {
9901 // f.markInvalid(errors);
9908 * Set values for fields in this form in bulk.
9909 * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
9910 * @return {BasicForm} this
9912 setValues : function(values){
9913 if(values instanceof Array){ // array of objects
9914 for(var i = 0, len = values.length; i < len; i++){
9916 var f = this.findField(v.id);
9918 f.setValue(v.value);
9919 if(this.trackResetOnLoad){
9920 f.originalValue = f.getValue();
9924 }else{ // object hash
9927 if(typeof values[id] != 'function' && (field = this.findField(id))){
9929 if (field.setFromData &&
9931 field.displayField &&
9932 // combos' with local stores can
9933 // be queried via setValue()
9934 // to set their value..
9935 (field.store && !field.store.isLocal)
9939 sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
9940 sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
9941 field.setFromData(sd);
9943 } else if(field.setFromData && (field.store && !field.store.isLocal)) {
9945 field.setFromData(values);
9948 field.setValue(values[id]);
9952 if(this.trackResetOnLoad){
9953 field.originalValue = field.getValue();
9959 //Roo.each(this.childForms || [], function (f) {
9960 // f.setValues(values);
9967 * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
9968 * they are returned as an array.
9969 * @param {Boolean} asString
9972 getValues : function(asString){
9973 //if (this.childForms) {
9974 // copy values from the child forms
9975 // Roo.each(this.childForms, function (f) {
9976 // this.setValues(f.getValues());
9982 var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
9983 if(asString === true){
9986 return Roo.urlDecode(fs);
9990 * Returns the fields in this form as an object with key/value pairs.
9991 * This differs from getValues as it calls getValue on each child item, rather than using dom data.
9994 getFieldValues : function(with_hidden)
9996 var items = this.getItems();
9998 items.each(function(f){
10000 if (!f.getName()) {
10004 var v = f.getValue();
10006 if (f.inputType =='radio') {
10007 if (typeof(ret[f.getName()]) == 'undefined') {
10008 ret[f.getName()] = ''; // empty..
10011 if (!f.el.dom.checked) {
10015 v = f.el.dom.value;
10019 if(f.xtype == 'MoneyField'){
10020 ret[f.currencyName] = f.getCurrency();
10023 // not sure if this supported any more..
10024 if ((typeof(v) == 'object') && f.getRawValue) {
10025 v = f.getRawValue() ; // dates..
10027 // combo boxes where name != hiddenName...
10028 if (f.name !== false && f.name != '' && f.name != f.getName()) {
10029 ret[f.name] = f.getRawValue();
10031 ret[f.getName()] = v;
10038 * Clears all invalid messages in this form.
10039 * @return {BasicForm} this
10041 clearInvalid : function(){
10042 var items = this.getItems();
10044 items.each(function(f){
10052 * Resets this form.
10053 * @return {BasicForm} this
10055 reset : function(){
10056 var items = this.getItems();
10057 items.each(function(f){
10061 Roo.each(this.childForms || [], function (f) {
10069 getItems : function()
10071 var r=new Roo.util.MixedCollection(false, function(o){
10072 return o.id || (o.id = Roo.id());
10074 var iter = function(el) {
10081 Roo.each(el.items,function(e) {
10090 hideFields : function(items)
10092 Roo.each(items, function(i){
10094 var f = this.findField(i);
10105 showFields : function(items)
10107 Roo.each(items, function(i){
10109 var f = this.findField(i);
10122 Roo.apply(Roo.bootstrap.Form, {
10138 intervalID : false,
10144 if(this.isApplied){
10149 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
10150 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
10151 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
10152 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
10155 this.maskEl.top.enableDisplayMode("block");
10156 this.maskEl.left.enableDisplayMode("block");
10157 this.maskEl.bottom.enableDisplayMode("block");
10158 this.maskEl.right.enableDisplayMode("block");
10160 this.toolTip = new Roo.bootstrap.Tooltip({
10161 cls : 'roo-form-error-popover',
10163 'left' : ['r-l', [-2,0], 'right'],
10164 'right' : ['l-r', [2,0], 'left'],
10165 'bottom' : ['tl-bl', [0,2], 'top'],
10166 'top' : [ 'bl-tl', [0,-2], 'bottom']
10170 this.toolTip.render(Roo.get(document.body));
10172 this.toolTip.el.enableDisplayMode("block");
10174 Roo.get(document.body).on('click', function(){
10178 Roo.get(document.body).on('touchstart', function(){
10182 this.isApplied = true
10185 mask : function(form, target)
10189 this.target = target;
10191 if(!this.form.errorMask || !target.el){
10195 var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
10197 Roo.log(scrollable);
10199 var ot = this.target.el.calcOffsetsTo(scrollable);
10201 var scrollTo = ot[1] - this.form.maskOffset;
10203 scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
10205 scrollable.scrollTo('top', scrollTo);
10207 var box = this.target.el.getBox();
10209 var zIndex = Roo.bootstrap.Modal.zIndex++;
10212 this.maskEl.top.setStyle('position', 'absolute');
10213 this.maskEl.top.setStyle('z-index', zIndex);
10214 this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
10215 this.maskEl.top.setLeft(0);
10216 this.maskEl.top.setTop(0);
10217 this.maskEl.top.show();
10219 this.maskEl.left.setStyle('position', 'absolute');
10220 this.maskEl.left.setStyle('z-index', zIndex);
10221 this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
10222 this.maskEl.left.setLeft(0);
10223 this.maskEl.left.setTop(box.y - this.padding);
10224 this.maskEl.left.show();
10226 this.maskEl.bottom.setStyle('position', 'absolute');
10227 this.maskEl.bottom.setStyle('z-index', zIndex);
10228 this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
10229 this.maskEl.bottom.setLeft(0);
10230 this.maskEl.bottom.setTop(box.bottom + this.padding);
10231 this.maskEl.bottom.show();
10233 this.maskEl.right.setStyle('position', 'absolute');
10234 this.maskEl.right.setStyle('z-index', zIndex);
10235 this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
10236 this.maskEl.right.setLeft(box.right + this.padding);
10237 this.maskEl.right.setTop(box.y - this.padding);
10238 this.maskEl.right.show();
10240 this.toolTip.bindEl = this.target.el;
10242 this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
10244 var tip = this.target.blankText;
10246 if(this.target.getValue() !== '' ) {
10248 if (this.target.invalidText.length) {
10249 tip = this.target.invalidText;
10250 } else if (this.target.regexText.length){
10251 tip = this.target.regexText;
10255 this.toolTip.show(tip);
10257 this.intervalID = window.setInterval(function() {
10258 Roo.bootstrap.Form.popover.unmask();
10261 window.onwheel = function(){ return false;};
10263 (function(){ this.isMasked = true; }).defer(500, this);
10267 unmask : function()
10269 if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
10273 this.maskEl.top.setStyle('position', 'absolute');
10274 this.maskEl.top.setSize(0, 0).setXY([0, 0]);
10275 this.maskEl.top.hide();
10277 this.maskEl.left.setStyle('position', 'absolute');
10278 this.maskEl.left.setSize(0, 0).setXY([0, 0]);
10279 this.maskEl.left.hide();
10281 this.maskEl.bottom.setStyle('position', 'absolute');
10282 this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
10283 this.maskEl.bottom.hide();
10285 this.maskEl.right.setStyle('position', 'absolute');
10286 this.maskEl.right.setSize(0, 0).setXY([0, 0]);
10287 this.maskEl.right.hide();
10289 this.toolTip.hide();
10291 this.toolTip.el.hide();
10293 window.onwheel = function(){ return true;};
10295 if(this.intervalID){
10296 window.clearInterval(this.intervalID);
10297 this.intervalID = false;
10300 this.isMasked = false;
10310 * Ext JS Library 1.1.1
10311 * Copyright(c) 2006-2007, Ext JS, LLC.
10313 * Originally Released Under LGPL - original licence link has changed is not relivant.
10316 * <script type="text/javascript">
10319 * @class Roo.form.VTypes
10320 * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
10323 Roo.form.VTypes = function(){
10324 // closure these in so they are only created once.
10325 var alpha = /^[a-zA-Z_]+$/;
10326 var alphanum = /^[a-zA-Z0-9_]+$/;
10327 var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
10328 var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
10330 // All these messages and functions are configurable
10333 * The function used to validate email addresses
10334 * @param {String} value The email address
10336 'email' : function(v){
10337 return email.test(v);
10340 * The error text to display when the email validation function returns false
10343 'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
10345 * The keystroke filter mask to be applied on email input
10348 'emailMask' : /[a-z0-9_\.\-@]/i,
10351 * The function used to validate URLs
10352 * @param {String} value The URL
10354 'url' : function(v){
10355 return url.test(v);
10358 * The error text to display when the url validation function returns false
10361 'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
10364 * The function used to validate alpha values
10365 * @param {String} value The value
10367 'alpha' : function(v){
10368 return alpha.test(v);
10371 * The error text to display when the alpha validation function returns false
10374 'alphaText' : 'This field should only contain letters and _',
10376 * The keystroke filter mask to be applied on alpha input
10379 'alphaMask' : /[a-z_]/i,
10382 * The function used to validate alphanumeric values
10383 * @param {String} value The value
10385 'alphanum' : function(v){
10386 return alphanum.test(v);
10389 * The error text to display when the alphanumeric validation function returns false
10392 'alphanumText' : 'This field should only contain letters, numbers and _',
10394 * The keystroke filter mask to be applied on alphanumeric input
10397 'alphanumMask' : /[a-z0-9_]/i
10407 * @class Roo.bootstrap.Input
10408 * @extends Roo.bootstrap.Component
10409 * Bootstrap Input class
10410 * @cfg {Boolean} disabled is it disabled
10411 * @cfg {String} (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text) inputType
10412 * @cfg {String} name name of the input
10413 * @cfg {string} fieldLabel - the label associated
10414 * @cfg {string} placeholder - placeholder to put in text.
10415 * @cfg {string} before - input group add on before
10416 * @cfg {string} after - input group add on after
10417 * @cfg {string} size - (lg|sm) or leave empty..
10418 * @cfg {Number} xs colspan out of 12 for mobile-sized screens
10419 * @cfg {Number} sm colspan out of 12 for tablet-sized screens
10420 * @cfg {Number} md colspan out of 12 for computer-sized screens
10421 * @cfg {Number} lg colspan out of 12 for large computer-sized screens
10422 * @cfg {string} value default value of the input
10423 * @cfg {Number} labelWidth set the width of label
10424 * @cfg {Number} labellg set the width of label (1-12)
10425 * @cfg {Number} labelmd set the width of label (1-12)
10426 * @cfg {Number} labelsm set the width of label (1-12)
10427 * @cfg {Number} labelxs set the width of label (1-12)
10428 * @cfg {String} labelAlign (top|left)
10429 * @cfg {Boolean} readOnly Specifies that the field should be read-only
10430 * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
10431 * @cfg {String} indicatorpos (left|right) default left
10432 * @cfg {String} capture (user|camera) use for file input only. (default empty)
10433 * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
10434 * @cfg {Boolean} preventMark Do not show tick or cross if error/success
10436 * @cfg {String} align (left|center|right) Default left
10437 * @cfg {Boolean} forceFeedback (true|false) Default false
10440 * Create a new Input
10441 * @param {Object} config The config object
10444 Roo.bootstrap.Input = function(config){
10446 Roo.bootstrap.Input.superclass.constructor.call(this, config);
10451 * Fires when this field receives input focus.
10452 * @param {Roo.form.Field} this
10457 * Fires when this field loses input focus.
10458 * @param {Roo.form.Field} this
10462 * @event specialkey
10463 * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
10464 * {@link Roo.EventObject#getKey} to determine which key was pressed.
10465 * @param {Roo.form.Field} this
10466 * @param {Roo.EventObject} e The event object
10471 * Fires just before the field blurs if the field value has changed.
10472 * @param {Roo.form.Field} this
10473 * @param {Mixed} newValue The new value
10474 * @param {Mixed} oldValue The original value
10479 * Fires after the field has been marked as invalid.
10480 * @param {Roo.form.Field} this
10481 * @param {String} msg The validation message
10486 * Fires after the field has been validated with no errors.
10487 * @param {Roo.form.Field} this
10492 * Fires after the key up
10493 * @param {Roo.form.Field} this
10494 * @param {Roo.EventObject} e The event Object
10500 Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, {
10502 * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
10503 automatic validation (defaults to "keyup").
10505 validationEvent : "keyup",
10507 * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
10509 validateOnBlur : true,
10511 * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
10513 validationDelay : 250,
10515 * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
10517 focusClass : "x-form-focus", // not needed???
10521 * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
10523 invalidClass : "has-warning",
10526 * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
10528 validClass : "has-success",
10531 * @cfg {Boolean} hasFeedback (true|false) default true
10533 hasFeedback : true,
10536 * @cfg {String} invalidFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
10538 invalidFeedbackClass : "glyphicon-warning-sign",
10541 * @cfg {String} validFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid")
10543 validFeedbackClass : "glyphicon-ok",
10546 * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
10548 selectOnFocus : false,
10551 * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
10555 * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
10560 * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
10562 disableKeyFilter : false,
10565 * @cfg {Boolean} disabled True to disable the field (defaults to false).
10569 * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
10573 * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
10575 blankText : "Please complete this mandatory field",
10578 * @cfg {Number} minLength Minimum input field length required (defaults to 0)
10582 * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
10584 maxLength : Number.MAX_VALUE,
10586 * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
10588 minLengthText : "The minimum length for this field is {0}",
10590 * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
10592 maxLengthText : "The maximum length for this field is {0}",
10596 * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
10597 * If available, this function will be called only after the basic validators all return true, and will be passed the
10598 * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
10602 * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
10603 * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
10604 * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
10608 * @cfg {String} regexText -- Depricated - use Invalid Text
10613 * @cfg {String} invalidText The error text to display if {@link #validator} test fails during validation (defaults to "")
10619 autocomplete: false,
10623 inputType : 'text',
10626 placeholder: false,
10631 preventMark: false,
10632 isFormField : true,
10635 labelAlign : false,
10638 formatedValue : false,
10639 forceFeedback : false,
10641 indicatorpos : 'left',
10651 parentLabelAlign : function()
10654 while (parent.parent()) {
10655 parent = parent.parent();
10656 if (typeof(parent.labelAlign) !='undefined') {
10657 return parent.labelAlign;
10664 getAutoCreate : function()
10666 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
10672 if(this.inputType != 'hidden'){
10673 cfg.cls = 'form-group' //input-group
10679 type : this.inputType,
10680 value : this.value,
10681 cls : 'form-control',
10682 placeholder : this.placeholder || '',
10683 autocomplete : this.autocomplete || 'new-password'
10685 if (this.inputType == 'file') {
10686 input.style = 'overflow:hidden'; // why not in CSS?
10689 if(this.capture.length){
10690 input.capture = this.capture;
10693 if(this.accept.length){
10694 input.accept = this.accept + "/*";
10698 input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
10701 if(this.maxLength && this.maxLength != Number.MAX_VALUE){
10702 input.maxLength = this.maxLength;
10705 if (this.disabled) {
10706 input.disabled=true;
10709 if (this.readOnly) {
10710 input.readonly=true;
10714 input.name = this.name;
10718 input.cls += ' input-' + this.size;
10722 ['xs','sm','md','lg'].map(function(size){
10723 if (settings[size]) {
10724 cfg.cls += ' col-' + size + '-' + settings[size];
10728 var inputblock = input;
10732 cls: 'glyphicon form-control-feedback'
10735 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
10738 cls : 'has-feedback',
10746 if (this.before || this.after) {
10749 cls : 'input-group',
10753 if (this.before && typeof(this.before) == 'string') {
10755 inputblock.cn.push({
10757 cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
10761 if (this.before && typeof(this.before) == 'object') {
10762 this.before = Roo.factory(this.before);
10764 inputblock.cn.push({
10766 cls : 'roo-input-before input-group-prepend input-group-' +
10767 (this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
10771 inputblock.cn.push(input);
10773 if (this.after && typeof(this.after) == 'string') {
10774 inputblock.cn.push({
10776 cls : 'roo-input-after input-group-append input-group-text input-group-addon',
10780 if (this.after && typeof(this.after) == 'object') {
10781 this.after = Roo.factory(this.after);
10783 inputblock.cn.push({
10785 cls : 'roo-input-after input-group-append input-group-' +
10786 (this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
10790 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
10791 inputblock.cls += ' has-feedback';
10792 inputblock.cn.push(feedback);
10797 cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
10798 tooltip : 'This field is required'
10800 if (this.allowBlank ) {
10801 indicator.style = this.allowBlank ? ' display:none' : '';
10803 if (align ==='left' && this.fieldLabel.length) {
10805 cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
10812 cls : 'control-label col-form-label',
10813 html : this.fieldLabel
10824 var labelCfg = cfg.cn[1];
10825 var contentCfg = cfg.cn[2];
10827 if(this.indicatorpos == 'right'){
10832 cls : 'control-label col-form-label',
10836 html : this.fieldLabel
10850 labelCfg = cfg.cn[0];
10851 contentCfg = cfg.cn[1];
10855 if(this.labelWidth > 12){
10856 labelCfg.style = "width: " + this.labelWidth + 'px';
10859 if(this.labelWidth < 13 && this.labelmd == 0){
10860 this.labelmd = this.labelWidth;
10863 if(this.labellg > 0){
10864 labelCfg.cls += ' col-lg-' + this.labellg;
10865 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
10868 if(this.labelmd > 0){
10869 labelCfg.cls += ' col-md-' + this.labelmd;
10870 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
10873 if(this.labelsm > 0){
10874 labelCfg.cls += ' col-sm-' + this.labelsm;
10875 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
10878 if(this.labelxs > 0){
10879 labelCfg.cls += ' col-xs-' + this.labelxs;
10880 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
10884 } else if ( this.fieldLabel.length) {
10891 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
10892 tooltip : 'This field is required',
10893 style : this.allowBlank ? ' display:none' : ''
10897 //cls : 'input-group-addon',
10898 html : this.fieldLabel
10906 if(this.indicatorpos == 'right'){
10911 //cls : 'input-group-addon',
10912 html : this.fieldLabel
10917 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
10918 tooltip : 'This field is required',
10919 style : this.allowBlank ? ' display:none' : ''
10939 if (this.parentType === 'Navbar' && this.parent().bar) {
10940 cfg.cls += ' navbar-form';
10943 if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
10944 // on BS4 we do this only if not form
10945 cfg.cls += ' navbar-form';
10953 * return the real input element.
10955 inputEl: function ()
10957 return this.el.select('input.form-control',true).first();
10960 tooltipEl : function()
10962 return this.inputEl();
10965 indicatorEl : function()
10967 if (Roo.bootstrap.version == 4) {
10968 return false; // not enabled in v4 yet.
10971 var indicator = this.el.select('i.roo-required-indicator',true).first();
10981 setDisabled : function(v)
10983 var i = this.inputEl().dom;
10985 i.removeAttribute('disabled');
10989 i.setAttribute('disabled','true');
10991 initEvents : function()
10994 this.inputEl().on("keydown" , this.fireKey, this);
10995 this.inputEl().on("focus", this.onFocus, this);
10996 this.inputEl().on("blur", this.onBlur, this);
10998 this.inputEl().relayEvent('keyup', this);
11000 this.indicator = this.indicatorEl();
11002 if(this.indicator){
11003 this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? -
11006 // reference to original value for reset
11007 this.originalValue = this.getValue();
11008 //Roo.form.TextField.superclass.initEvents.call(this);
11009 if(this.validationEvent == 'keyup'){
11010 this.validationTask = new Roo.util.DelayedTask(this.validate, this);
11011 this.inputEl().on('keyup', this.filterValidation, this);
11013 else if(this.validationEvent !== false){
11014 this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
11017 if(this.selectOnFocus){
11018 this.on("focus", this.preFocus, this);
11021 if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
11022 this.inputEl().on("keypress", this.filterKeys, this);
11024 this.inputEl().relayEvent('keypress', this);
11027 this.el.on("keyup", this.onKeyUp, this, {buffer:50});
11028 this.el.on("click", this.autoSize, this);
11031 if(this.inputEl().is('input[type=password]') && Roo.isSafari){
11032 this.inputEl().on('keydown', this.SafariOnKeyDown, this);
11035 if (typeof(this.before) == 'object') {
11036 this.before.render(this.el.select('.roo-input-before',true).first());
11038 if (typeof(this.after) == 'object') {
11039 this.after.render(this.el.select('.roo-input-after',true).first());
11042 this.inputEl().on('change', this.onChange, this);
11045 filterValidation : function(e){
11046 if(!e.isNavKeyPress()){
11047 this.validationTask.delay(this.validationDelay);
11051 * Validates the field value
11052 * @return {Boolean} True if the value is valid, else false
11054 validate : function(){
11055 //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
11056 if(this.disabled || this.validateValue(this.getRawValue())){
11061 this.markInvalid();
11067 * Validates a value according to the field's validation rules and marks the field as invalid
11068 * if the validation fails
11069 * @param {Mixed} value The value to validate
11070 * @return {Boolean} True if the value is valid, else false
11072 validateValue : function(value)
11074 if(this.getVisibilityEl().hasClass('hidden')){
11078 if(value.length < 1) { // if it's blank
11079 if(this.allowBlank){
11085 if(value.length < this.minLength){
11088 if(value.length > this.maxLength){
11092 var vt = Roo.form.VTypes;
11093 if(!vt[this.vtype](value, this)){
11097 if(typeof this.validator == "function"){
11098 var msg = this.validator(value);
11102 if (typeof(msg) == 'string') {
11103 this.invalidText = msg;
11107 if(this.regex && !this.regex.test(value)){
11115 fireKey : function(e){
11116 //Roo.log('field ' + e.getKey());
11117 if(e.isNavKeyPress()){
11118 this.fireEvent("specialkey", this, e);
11121 focus : function (selectText){
11123 this.inputEl().focus();
11124 if(selectText === true){
11125 this.inputEl().dom.select();
11131 onFocus : function(){
11132 if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
11133 // this.el.addClass(this.focusClass);
11135 if(!this.hasFocus){
11136 this.hasFocus = true;
11137 this.startValue = this.getValue();
11138 this.fireEvent("focus", this);
11142 beforeBlur : Roo.emptyFn,
11146 onBlur : function(){
11148 if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
11149 //this.el.removeClass(this.focusClass);
11151 this.hasFocus = false;
11152 if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
11155 var v = this.getValue();
11156 if(String(v) !== String(this.startValue)){
11157 this.fireEvent('change', this, v, this.startValue);
11159 this.fireEvent("blur", this);
11162 onChange : function(e)
11164 var v = this.getValue();
11165 if(String(v) !== String(this.startValue)){
11166 this.fireEvent('change', this, v, this.startValue);
11172 * Resets the current field value to the originally loaded value and clears any validation messages
11174 reset : function(){
11175 this.setValue(this.originalValue);
11179 * Returns the name of the field
11180 * @return {Mixed} name The name field
11182 getName: function(){
11186 * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
11187 * @return {Mixed} value The field value
11189 getValue : function(){
11191 var v = this.inputEl().getValue();
11196 * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
11197 * @return {Mixed} value The field value
11199 getRawValue : function(){
11200 var v = this.inputEl().getValue();
11206 * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
11207 * @param {Mixed} value The value to set
11209 setRawValue : function(v){
11210 return this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
11213 selectText : function(start, end){
11214 var v = this.getRawValue();
11216 start = start === undefined ? 0 : start;
11217 end = end === undefined ? v.length : end;
11218 var d = this.inputEl().dom;
11219 if(d.setSelectionRange){
11220 d.setSelectionRange(start, end);
11221 }else if(d.createTextRange){
11222 var range = d.createTextRange();
11223 range.moveStart("character", start);
11224 range.moveEnd("character", v.length-end);
11231 * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
11232 * @param {Mixed} value The value to set
11234 setValue : function(v){
11237 this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
11243 processValue : function(value){
11244 if(this.stripCharsRe){
11245 var newValue = value.replace(this.stripCharsRe, '');
11246 if(newValue !== value){
11247 this.setRawValue(newValue);
11254 preFocus : function(){
11256 if(this.selectOnFocus){
11257 this.inputEl().dom.select();
11260 filterKeys : function(e){
11261 var k = e.getKey();
11262 if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
11265 var c = e.getCharCode(), cc = String.fromCharCode(c);
11266 if(Roo.isIE && (e.isSpecialKey() || !cc)){
11269 if(!this.maskRe.test(cc)){
11274 * Clear any invalid styles/messages for this field
11276 clearInvalid : function(){
11278 if(!this.el || this.preventMark){ // not rendered
11283 this.el.removeClass([this.invalidClass, 'is-invalid']);
11285 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
11287 var feedback = this.el.select('.form-control-feedback', true).first();
11290 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
11295 if(this.indicator){
11296 this.indicator.removeClass('visible');
11297 this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
11300 this.fireEvent('valid', this);
11304 * Mark this field as valid
11306 markValid : function()
11308 if(!this.el || this.preventMark){ // not rendered...
11312 this.el.removeClass([this.invalidClass, this.validClass]);
11313 this.inputEl().removeClass(['is-valid', 'is-invalid']);
11315 var feedback = this.el.select('.form-control-feedback', true).first();
11318 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11321 if(this.indicator){
11322 this.indicator.removeClass('visible');
11323 this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
11331 if(this.allowBlank && !this.getRawValue().length){
11334 if (Roo.bootstrap.version == 3) {
11335 this.el.addClass(this.validClass);
11337 this.inputEl().addClass('is-valid');
11340 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
11342 var feedback = this.el.select('.form-control-feedback', true).first();
11345 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11346 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
11351 this.fireEvent('valid', this);
11355 * Mark this field as invalid
11356 * @param {String} msg The validation message
11358 markInvalid : function(msg)
11360 if(!this.el || this.preventMark){ // not rendered
11364 this.el.removeClass([this.invalidClass, this.validClass]);
11365 this.inputEl().removeClass(['is-valid', 'is-invalid']);
11367 var feedback = this.el.select('.form-control-feedback', true).first();
11370 this.el.select('.form-control-feedback', true).first().removeClass(
11371 [this.invalidFeedbackClass, this.validFeedbackClass]);
11378 if(this.allowBlank && !this.getRawValue().length){
11382 if(this.indicator){
11383 this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
11384 this.indicator.addClass('visible');
11386 if (Roo.bootstrap.version == 3) {
11387 this.el.addClass(this.invalidClass);
11389 this.inputEl().addClass('is-invalid');
11394 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
11396 var feedback = this.el.select('.form-control-feedback', true).first();
11399 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11401 if(this.getValue().length || this.forceFeedback){
11402 this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
11409 this.fireEvent('invalid', this, msg);
11412 SafariOnKeyDown : function(event)
11414 // this is a workaround for a password hang bug on chrome/ webkit.
11415 if (this.inputEl().dom.type != 'password') {
11419 var isSelectAll = false;
11421 if(this.inputEl().dom.selectionEnd > 0){
11422 isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false;
11424 if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
11425 event.preventDefault();
11430 if(isSelectAll && event.getCharCode() > 31 && !event.ctrlKey) { // not backspace and delete key (or ctrl-v)
11432 event.preventDefault();
11433 // this is very hacky as keydown always get's upper case.
11435 var cc = String.fromCharCode(event.getCharCode());
11436 this.setValue( event.shiftKey ? cc : cc.toLowerCase());
11440 adjustWidth : function(tag, w){
11441 tag = tag.toLowerCase();
11442 if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
11443 if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
11444 if(tag == 'input'){
11447 if(tag == 'textarea'){
11450 }else if(Roo.isOpera){
11451 if(tag == 'input'){
11454 if(tag == 'textarea'){
11462 setFieldLabel : function(v)
11464 if(!this.rendered){
11468 if(this.indicatorEl()){
11469 var ar = this.el.select('label > span',true);
11471 if (ar.elements.length) {
11472 this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
11473 this.fieldLabel = v;
11477 var br = this.el.select('label',true);
11479 if(br.elements.length) {
11480 this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
11481 this.fieldLabel = v;
11485 Roo.log('Cannot Found any of label > span || label in input');
11489 this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
11490 this.fieldLabel = v;
11505 * @class Roo.bootstrap.TextArea
11506 * @extends Roo.bootstrap.Input
11507 * Bootstrap TextArea class
11508 * @cfg {Number} cols Specifies the visible width of a text area
11509 * @cfg {Number} rows Specifies the visible number of lines in a text area
11510 * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
11511 * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
11512 * @cfg {string} html text
11515 * Create a new TextArea
11516 * @param {Object} config The config object
11519 Roo.bootstrap.TextArea = function(config){
11520 Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
11524 Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, {
11534 getAutoCreate : function(){
11536 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
11542 if(this.inputType != 'hidden'){
11543 cfg.cls = 'form-group' //input-group
11551 value : this.value || '',
11552 html: this.html || '',
11553 cls : 'form-control',
11554 placeholder : this.placeholder || ''
11558 if(this.maxLength && this.maxLength != Number.MAX_VALUE){
11559 input.maxLength = this.maxLength;
11563 input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
11567 input.cols = this.cols;
11570 if (this.readOnly) {
11571 input.readonly = true;
11575 input.name = this.name;
11579 input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
11583 ['xs','sm','md','lg'].map(function(size){
11584 if (settings[size]) {
11585 cfg.cls += ' col-' + size + '-' + settings[size];
11589 var inputblock = input;
11591 if(this.hasFeedback && !this.allowBlank){
11595 cls: 'glyphicon form-control-feedback'
11599 cls : 'has-feedback',
11608 if (this.before || this.after) {
11611 cls : 'input-group',
11615 inputblock.cn.push({
11617 cls : 'input-group-addon',
11622 inputblock.cn.push(input);
11624 if(this.hasFeedback && !this.allowBlank){
11625 inputblock.cls += ' has-feedback';
11626 inputblock.cn.push(feedback);
11630 inputblock.cn.push({
11632 cls : 'input-group-addon',
11639 if (align ==='left' && this.fieldLabel.length) {
11644 cls : 'control-label',
11645 html : this.fieldLabel
11656 if(this.labelWidth > 12){
11657 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
11660 if(this.labelWidth < 13 && this.labelmd == 0){
11661 this.labelmd = this.labelWidth;
11664 if(this.labellg > 0){
11665 cfg.cn[0].cls += ' col-lg-' + this.labellg;
11666 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
11669 if(this.labelmd > 0){
11670 cfg.cn[0].cls += ' col-md-' + this.labelmd;
11671 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
11674 if(this.labelsm > 0){
11675 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
11676 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
11679 if(this.labelxs > 0){
11680 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
11681 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
11684 } else if ( this.fieldLabel.length) {
11689 //cls : 'input-group-addon',
11690 html : this.fieldLabel
11708 if (this.disabled) {
11709 input.disabled=true;
11716 * return the real textarea element.
11718 inputEl: function ()
11720 return this.el.select('textarea.form-control',true).first();
11724 * Clear any invalid styles/messages for this field
11726 clearInvalid : function()
11729 if(!this.el || this.preventMark){ // not rendered
11733 var label = this.el.select('label', true).first();
11734 var icon = this.el.select('i.fa-star', true).first();
11739 this.el.removeClass( this.validClass);
11740 this.inputEl().removeClass('is-invalid');
11742 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
11744 var feedback = this.el.select('.form-control-feedback', true).first();
11747 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
11752 this.fireEvent('valid', this);
11756 * Mark this field as valid
11758 markValid : function()
11760 if(!this.el || this.preventMark){ // not rendered
11764 this.el.removeClass([this.invalidClass, this.validClass]);
11765 this.inputEl().removeClass(['is-valid', 'is-invalid']);
11767 var feedback = this.el.select('.form-control-feedback', true).first();
11770 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11773 if(this.disabled || this.allowBlank){
11777 var label = this.el.select('label', true).first();
11778 var icon = this.el.select('i.fa-star', true).first();
11783 if (Roo.bootstrap.version == 3) {
11784 this.el.addClass(this.validClass);
11786 this.inputEl().addClass('is-valid');
11790 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
11792 var feedback = this.el.select('.form-control-feedback', true).first();
11795 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11796 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
11801 this.fireEvent('valid', this);
11805 * Mark this field as invalid
11806 * @param {String} msg The validation message
11808 markInvalid : function(msg)
11810 if(!this.el || this.preventMark){ // not rendered
11814 this.el.removeClass([this.invalidClass, this.validClass]);
11815 this.inputEl().removeClass(['is-valid', 'is-invalid']);
11817 var feedback = this.el.select('.form-control-feedback', true).first();
11820 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11823 if(this.disabled || this.allowBlank){
11827 var label = this.el.select('label', true).first();
11828 var icon = this.el.select('i.fa-star', true).first();
11830 if(!this.getValue().length && label && !icon){
11831 this.el.createChild({
11833 cls : 'text-danger fa fa-lg fa-star',
11834 tooltip : 'This field is required',
11835 style : 'margin-right:5px;'
11839 if (Roo.bootstrap.version == 3) {
11840 this.el.addClass(this.invalidClass);
11842 this.inputEl().addClass('is-invalid');
11845 // fixme ... this may be depricated need to test..
11846 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
11848 var feedback = this.el.select('.form-control-feedback', true).first();
11851 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
11853 if(this.getValue().length || this.forceFeedback){
11854 this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
11861 this.fireEvent('invalid', this, msg);
11869 * trigger field - base class for combo..
11874 * @class Roo.bootstrap.TriggerField
11875 * @extends Roo.bootstrap.Input
11876 * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
11877 * The trigger has no default action, so you must assign a function to implement the trigger click handler by
11878 * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
11879 * for which you can provide a custom implementation. For example:
11881 var trigger = new Roo.bootstrap.TriggerField();
11882 trigger.onTriggerClick = myTriggerFn;
11883 trigger.applyTo('my-field');
11886 * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
11887 * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
11888 * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
11889 * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
11890 * @cfg {String} caret (search|calendar) BS3 only - carat fa name
11893 * Create a new TriggerField.
11894 * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
11895 * to the base TextField)
11897 Roo.bootstrap.TriggerField = function(config){
11898 this.mimicing = false;
11899 Roo.bootstrap.TriggerField.superclass.constructor.call(this, config);
11902 Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, {
11904 * @cfg {String} triggerClass A CSS class to apply to the trigger
11907 * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
11912 * @cfg {Boolean} removable (true|false) special filter default false
11916 /** @cfg {Boolean} grow @hide */
11917 /** @cfg {Number} growMin @hide */
11918 /** @cfg {Number} growMax @hide */
11924 autoSize: Roo.emptyFn,
11928 deferHeight : true,
11931 actionMode : 'wrap',
11936 getAutoCreate : function(){
11938 var align = this.labelAlign || this.parentLabelAlign();
11943 cls: 'form-group' //input-group
11950 type : this.inputType,
11951 cls : 'form-control',
11952 autocomplete: 'new-password',
11953 placeholder : this.placeholder || ''
11957 input.name = this.name;
11960 input.cls += ' input-' + this.size;
11963 if (this.disabled) {
11964 input.disabled=true;
11967 var inputblock = input;
11969 if(this.hasFeedback && !this.allowBlank){
11973 cls: 'glyphicon form-control-feedback'
11976 if(this.removable && !this.editable ){
11978 cls : 'has-feedback',
11984 cls : 'roo-combo-removable-btn close'
11991 cls : 'has-feedback',
12000 if(this.removable && !this.editable ){
12002 cls : 'roo-removable',
12008 cls : 'roo-combo-removable-btn close'
12015 if (this.before || this.after) {
12018 cls : 'input-group',
12022 inputblock.cn.push({
12024 cls : 'input-group-addon input-group-prepend input-group-text',
12029 inputblock.cn.push(input);
12031 if(this.hasFeedback && !this.allowBlank){
12032 inputblock.cls += ' has-feedback';
12033 inputblock.cn.push(feedback);
12037 inputblock.cn.push({
12039 cls : 'input-group-addon input-group-append input-group-text',
12048 var ibwrap = inputblock;
12053 cls: 'roo-select2-choices',
12057 cls: 'roo-select2-search-field',
12069 cls: 'roo-select2-container input-group',
12074 cls: 'form-hidden-field'
12080 if(!this.multiple && this.showToggleBtn){
12086 if (this.caret != false) {
12089 cls: 'fa fa-' + this.caret
12096 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
12098 Roo.bootstrap.version == 3 ? caret : '',
12101 cls: 'combobox-clear',
12115 combobox.cls += ' roo-select2-container-multi';
12119 cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
12120 tooltip : 'This field is required'
12122 if (Roo.bootstrap.version == 4) {
12125 style : 'display:none'
12130 if (align ==='left' && this.fieldLabel.length) {
12132 cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
12139 cls : 'control-label',
12140 html : this.fieldLabel
12152 var labelCfg = cfg.cn[1];
12153 var contentCfg = cfg.cn[2];
12155 if(this.indicatorpos == 'right'){
12160 cls : 'control-label',
12164 html : this.fieldLabel
12178 labelCfg = cfg.cn[0];
12179 contentCfg = cfg.cn[1];
12182 if(this.labelWidth > 12){
12183 labelCfg.style = "width: " + this.labelWidth + 'px';
12186 if(this.labelWidth < 13 && this.labelmd == 0){
12187 this.labelmd = this.labelWidth;
12190 if(this.labellg > 0){
12191 labelCfg.cls += ' col-lg-' + this.labellg;
12192 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
12195 if(this.labelmd > 0){
12196 labelCfg.cls += ' col-md-' + this.labelmd;
12197 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
12200 if(this.labelsm > 0){
12201 labelCfg.cls += ' col-sm-' + this.labelsm;
12202 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
12205 if(this.labelxs > 0){
12206 labelCfg.cls += ' col-xs-' + this.labelxs;
12207 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
12210 } else if ( this.fieldLabel.length) {
12211 // Roo.log(" label");
12216 //cls : 'input-group-addon',
12217 html : this.fieldLabel
12225 if(this.indicatorpos == 'right'){
12233 html : this.fieldLabel
12247 // Roo.log(" no label && no align");
12254 ['xs','sm','md','lg'].map(function(size){
12255 if (settings[size]) {
12256 cfg.cls += ' col-' + size + '-' + settings[size];
12267 onResize : function(w, h){
12268 // Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
12269 // if(typeof w == 'number'){
12270 // var x = w - this.trigger.getWidth();
12271 // this.inputEl().setWidth(this.adjustWidth('input', x));
12272 // this.trigger.setStyle('left', x+'px');
12277 adjustSize : Roo.BoxComponent.prototype.adjustSize,
12280 getResizeEl : function(){
12281 return this.inputEl();
12285 getPositionEl : function(){
12286 return this.inputEl();
12290 alignErrorIcon : function(){
12291 this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
12295 initEvents : function(){
12299 Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
12300 //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
12301 if(!this.multiple && this.showToggleBtn){
12302 this.trigger = this.el.select('span.dropdown-toggle',true).first();
12303 if(this.hideTrigger){
12304 this.trigger.setDisplayed(false);
12306 this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
12310 this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
12313 if(this.removable && !this.editable && !this.tickable){
12314 var close = this.closeTriggerEl();
12317 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
12318 close.on('click', this.removeBtnClick, this, close);
12322 //this.trigger.addClassOnOver('x-form-trigger-over');
12323 //this.trigger.addClassOnClick('x-form-trigger-click');
12326 // this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
12330 closeTriggerEl : function()
12332 var close = this.el.select('.roo-combo-removable-btn', true).first();
12333 return close ? close : false;
12336 removeBtnClick : function(e, h, el)
12338 e.preventDefault();
12340 if(this.fireEvent("remove", this) !== false){
12342 this.fireEvent("afterremove", this)
12346 createList : function()
12348 this.list = Roo.get(document.body).createChild({
12349 tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
12350 cls: 'typeahead typeahead-long dropdown-menu shadow',
12351 style: 'display:none'
12354 this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
12359 initTrigger : function(){
12364 onDestroy : function(){
12366 this.trigger.removeAllListeners();
12367 // this.trigger.remove();
12370 // this.wrap.remove();
12372 Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
12376 onFocus : function(){
12377 Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
12379 if(!this.mimicing){
12380 this.wrap.addClass('x-trigger-wrap-focus');
12381 this.mimicing = true;
12382 Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
12383 if(this.monitorTab){
12384 this.el.on("keydown", this.checkTab, this);
12391 checkTab : function(e){
12392 if(e.getKey() == e.TAB){
12393 this.triggerBlur();
12398 onBlur : function(){
12403 mimicBlur : function(e, t){
12405 if(!this.wrap.contains(t) && this.validateBlur()){
12406 this.triggerBlur();
12412 triggerBlur : function(){
12413 this.mimicing = false;
12414 Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
12415 if(this.monitorTab){
12416 this.el.un("keydown", this.checkTab, this);
12418 //this.wrap.removeClass('x-trigger-wrap-focus');
12419 Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
12423 // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
12424 validateBlur : function(e, t){
12429 onDisable : function(){
12430 this.inputEl().dom.disabled = true;
12431 //Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
12433 // this.wrap.addClass('x-item-disabled');
12438 onEnable : function(){
12439 this.inputEl().dom.disabled = false;
12440 //Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
12442 // this.el.removeClass('x-item-disabled');
12447 onShow : function(){
12448 var ae = this.getActionEl();
12451 ae.dom.style.display = '';
12452 ae.dom.style.visibility = 'visible';
12458 onHide : function(){
12459 var ae = this.getActionEl();
12460 ae.dom.style.display = 'none';
12464 * The function that should handle the trigger's click event. This method does nothing by default until overridden
12465 * by an implementing function.
12467 * @param {EventObject} e
12469 onTriggerClick : Roo.emptyFn
12477 * @class Roo.bootstrap.CardUploader
12478 * @extends Roo.bootstrap.Button
12479 * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
12480 * @cfg {Number} errorTimeout default 3000
12481 * @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
12482 * @cfg {Array} html The button text.
12486 * Create a new CardUploader
12487 * @param {Object} config The config object
12490 Roo.bootstrap.CardUploader = function(config){
12494 Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
12497 this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
12504 Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
12507 errorTimeout : 3000,
12511 fileCollection : false,
12514 getAutoCreate : function()
12518 cls :'form-group' ,
12523 //cls : 'input-group-addon',
12524 html : this.fieldLabel
12531 value : this.value,
12532 cls : 'd-none form-control'
12537 multiple : 'multiple',
12539 cls : 'd-none roo-card-upload-selector'
12543 cls : 'roo-card-uploader-button-container w-100 mb-2'
12546 cls : 'card-columns roo-card-uploader-container'
12556 getChildContainer : function() /// what children are added to.
12558 return this.containerEl;
12561 getButtonContainer : function() /// what children are added to.
12563 return this.el.select(".roo-card-uploader-button-container").first();
12566 initEvents : function()
12569 Roo.bootstrap.Input.prototype.initEvents.call(this);
12573 xns: Roo.bootstrap,
12576 container_method : 'getButtonContainer' ,
12577 html : this.html, // fix changable?
12580 'click' : function(btn, e) {
12589 this.urlAPI = (window.createObjectURL && window) ||
12590 (window.URL && URL.revokeObjectURL && URL) ||
12591 (window.webkitURL && webkitURL);
12596 this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
12598 this.selectorEl.on('change', this.onFileSelected, this);
12601 this.images.forEach(function(img) {
12604 this.images = false;
12606 this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
12612 onClick : function(e)
12614 e.preventDefault();
12616 this.selectorEl.dom.click();
12620 onFileSelected : function(e)
12622 e.preventDefault();
12624 if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
12628 Roo.each(this.selectorEl.dom.files, function(file){
12629 this.addFile(file);
12638 addFile : function(file)
12641 if(typeof(file) === 'string'){
12642 throw "Add file by name?"; // should not happen
12646 if(!file || !this.urlAPI){
12656 var url = _this.urlAPI.createObjectURL( file);
12659 id : Roo.bootstrap.CardUploader.ID--,
12660 is_uploaded : false,
12663 mimetype : file.type,
12670 addCard : function (data)
12672 // hidden input element?
12673 // if the file is not an image...
12674 //then we need to use something other that and header_image
12679 xns : Roo.bootstrap,
12680 xtype : 'CardFooter',
12683 xns : Roo.bootstrap,
12689 xns : Roo.bootstrap,
12691 html : String.format("<small>{0}</small>", data.title),
12692 cls : 'col-11 text-left',
12697 click : function() {
12698 this.downloadCard(data.id)
12704 xns : Roo.bootstrap,
12712 click : function() {
12713 t.removeCard(data.id)
12725 var cn = this.addxtype(
12728 xns : Roo.bootstrap,
12731 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
12732 header_image : data.mimetype.match(/image/) ? data.src : data.preview,
12733 header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this.
12738 initEvents : function() {
12739 Roo.bootstrap.Card.prototype.initEvents.call(this);
12740 this.imgEl = this.el.select('.card-img-top').first();
12742 this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
12743 this.imgEl.set({ 'pointer' : 'cursor' });
12752 // dont' really need ot update items.
12753 // this.items.push(cn);
12754 this.fileCollection.add(cn);
12755 this.updateInput();
12758 removeCard : function(id)
12761 var card = this.fileCollection.get(id);
12762 card.data.is_deleted = 1;
12763 card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
12764 this.fileCollection.remove(card);
12765 //this.items = this.items.filter(function(e) { return e != card });
12766 // dont' really need ot update items.
12767 card.el.dom.parentNode.removeChild(card.el.dom);
12772 this.fileCollection.each(function(card) {
12773 card.el.dom.parentNode.removeChild(card.el.dom);
12775 this.fileCollection.clear();
12776 this.updateInput();
12779 updateInput : function()
12782 this.fileCollection.each(function(e) {
12786 this.inputEl().dom.value = JSON.stringify(data);
12793 Roo.bootstrap.CardUploader.ID = -1;/*
12795 * Ext JS Library 1.1.1
12796 * Copyright(c) 2006-2007, Ext JS, LLC.
12798 * Originally Released Under LGPL - original licence link has changed is not relivant.
12801 * <script type="text/javascript">
12806 * @class Roo.data.SortTypes
12808 * Defines the default sorting (casting?) comparison functions used when sorting data.
12810 Roo.data.SortTypes = {
12812 * Default sort that does nothing
12813 * @param {Mixed} s The value being converted
12814 * @return {Mixed} The comparison value
12816 none : function(s){
12821 * The regular expression used to strip tags
12825 stripTagsRE : /<\/?[^>]+>/gi,
12828 * Strips all HTML tags to sort on text only
12829 * @param {Mixed} s The value being converted
12830 * @return {String} The comparison value
12832 asText : function(s){
12833 return String(s).replace(this.stripTagsRE, "");
12837 * Strips all HTML tags to sort on text only - Case insensitive
12838 * @param {Mixed} s The value being converted
12839 * @return {String} The comparison value
12841 asUCText : function(s){
12842 return String(s).toUpperCase().replace(this.stripTagsRE, "");
12846 * Case insensitive string
12847 * @param {Mixed} s The value being converted
12848 * @return {String} The comparison value
12850 asUCString : function(s) {
12851 return String(s).toUpperCase();
12856 * @param {Mixed} s The value being converted
12857 * @return {Number} The comparison value
12859 asDate : function(s) {
12863 if(s instanceof Date){
12864 return s.getTime();
12866 return Date.parse(String(s));
12871 * @param {Mixed} s The value being converted
12872 * @return {Float} The comparison value
12874 asFloat : function(s) {
12875 var val = parseFloat(String(s).replace(/,/g, ""));
12884 * @param {Mixed} s The value being converted
12885 * @return {Number} The comparison value
12887 asInt : function(s) {
12888 var val = parseInt(String(s).replace(/,/g, ""));
12896 * Ext JS Library 1.1.1
12897 * Copyright(c) 2006-2007, Ext JS, LLC.
12899 * Originally Released Under LGPL - original licence link has changed is not relivant.
12902 * <script type="text/javascript">
12906 * @class Roo.data.Record
12907 * Instances of this class encapsulate both record <em>definition</em> information, and record
12908 * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
12909 * to access Records cached in an {@link Roo.data.Store} object.<br>
12911 * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
12912 * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
12915 * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
12917 * This constructor should not be used to create Record objects. Instead, use the constructor generated by
12918 * {@link #create}. The parameters are the same.
12919 * @param {Array} data An associative Array of data values keyed by the field name.
12920 * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
12921 * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
12922 * not specified an integer id is generated.
12924 Roo.data.Record = function(data, id){
12925 this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
12930 * Generate a constructor for a specific record layout.
12931 * @param {Array} o An Array of field definition objects which specify field names, and optionally,
12932 * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
12933 * Each field definition object may contain the following properties: <ul>
12934 * <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,
12935 * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
12936 * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
12937 * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
12938 * is being used, then this is a string containing the javascript expression to reference the data relative to
12939 * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
12940 * to the data item relative to the record element. If the mapping expression is the same as the field name,
12941 * this may be omitted.</p></li>
12942 * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
12943 * <ul><li>auto (Default, implies no conversion)</li>
12948 * <li>date</li></ul></p></li>
12949 * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
12950 * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
12951 * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
12952 * by the Reader into an object that will be stored in the Record. It is passed the
12953 * following parameters:<ul>
12954 * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
12956 * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
12958 * <br>usage:<br><pre><code>
12959 var TopicRecord = Roo.data.Record.create(
12960 {name: 'title', mapping: 'topic_title'},
12961 {name: 'author', mapping: 'username'},
12962 {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
12963 {name: 'lastPost', mapping: 'post_time', type: 'date'},
12964 {name: 'lastPoster', mapping: 'user2'},
12965 {name: 'excerpt', mapping: 'post_text'}
12968 var myNewRecord = new TopicRecord({
12969 title: 'Do my job please',
12972 lastPost: new Date(),
12973 lastPoster: 'Animal',
12974 excerpt: 'No way dude!'
12976 myStore.add(myNewRecord);
12981 Roo.data.Record.create = function(o){
12982 var f = function(){
12983 f.superclass.constructor.apply(this, arguments);
12985 Roo.extend(f, Roo.data.Record);
12986 var p = f.prototype;
12987 p.fields = new Roo.util.MixedCollection(false, function(field){
12990 for(var i = 0, len = o.length; i < len; i++){
12991 p.fields.add(new Roo.data.Field(o[i]));
12993 f.getField = function(name){
12994 return p.fields.get(name);
12999 Roo.data.Record.AUTO_ID = 1000;
13000 Roo.data.Record.EDIT = 'edit';
13001 Roo.data.Record.REJECT = 'reject';
13002 Roo.data.Record.COMMIT = 'commit';
13004 Roo.data.Record.prototype = {
13006 * Readonly flag - true if this record has been modified.
13015 join : function(store){
13016 this.store = store;
13020 * Set the named field to the specified value.
13021 * @param {String} name The name of the field to set.
13022 * @param {Object} value The value to set the field to.
13024 set : function(name, value){
13025 if(this.data[name] == value){
13029 if(!this.modified){
13030 this.modified = {};
13032 if(typeof this.modified[name] == 'undefined'){
13033 this.modified[name] = this.data[name];
13035 this.data[name] = value;
13036 if(!this.editing && this.store){
13037 this.store.afterEdit(this);
13042 * Get the value of the named field.
13043 * @param {String} name The name of the field to get the value of.
13044 * @return {Object} The value of the field.
13046 get : function(name){
13047 return this.data[name];
13051 beginEdit : function(){
13052 this.editing = true;
13053 this.modified = {};
13057 cancelEdit : function(){
13058 this.editing = false;
13059 delete this.modified;
13063 endEdit : function(){
13064 this.editing = false;
13065 if(this.dirty && this.store){
13066 this.store.afterEdit(this);
13071 * Usually called by the {@link Roo.data.Store} which owns the Record.
13072 * Rejects all changes made to the Record since either creation, or the last commit operation.
13073 * Modified fields are reverted to their original values.
13075 * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
13076 * of reject operations.
13078 reject : function(){
13079 var m = this.modified;
13081 if(typeof m[n] != "function"){
13082 this.data[n] = m[n];
13085 this.dirty = false;
13086 delete this.modified;
13087 this.editing = false;
13089 this.store.afterReject(this);
13094 * Usually called by the {@link Roo.data.Store} which owns the Record.
13095 * Commits all changes made to the Record since either creation, or the last commit operation.
13097 * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
13098 * of commit operations.
13100 commit : function(){
13101 this.dirty = false;
13102 delete this.modified;
13103 this.editing = false;
13105 this.store.afterCommit(this);
13110 hasError : function(){
13111 return this.error != null;
13115 clearError : function(){
13120 * Creates a copy of this record.
13121 * @param {String} id (optional) A new record id if you don't want to use this record's id
13124 copy : function(newId) {
13125 return new this.constructor(Roo.apply({}, this.data), newId || this.id);
13129 * Ext JS Library 1.1.1
13130 * Copyright(c) 2006-2007, Ext JS, LLC.
13132 * Originally Released Under LGPL - original licence link has changed is not relivant.
13135 * <script type="text/javascript">
13141 * @class Roo.data.Store
13142 * @extends Roo.util.Observable
13143 * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
13144 * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
13146 * 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
13147 * has no knowledge of the format of the data returned by the Proxy.<br>
13149 * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
13150 * instances from the data object. These records are cached and made available through accessor functions.
13152 * Creates a new Store.
13153 * @param {Object} config A config object containing the objects needed for the Store to access data,
13154 * and read the data into Records.
13156 Roo.data.Store = function(config){
13157 this.data = new Roo.util.MixedCollection(false);
13158 this.data.getKey = function(o){
13161 this.baseParams = {};
13163 this.paramNames = {
13168 "multisort" : "_multisort"
13171 if(config && config.data){
13172 this.inlineData = config.data;
13173 delete config.data;
13176 Roo.apply(this, config);
13178 if(this.reader){ // reader passed
13179 this.reader = Roo.factory(this.reader, Roo.data);
13180 this.reader.xmodule = this.xmodule || false;
13181 if(!this.recordType){
13182 this.recordType = this.reader.recordType;
13184 if(this.reader.onMetaChange){
13185 this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
13189 if(this.recordType){
13190 this.fields = this.recordType.prototype.fields;
13192 this.modified = [];
13196 * @event datachanged
13197 * Fires when the data cache has changed, and a widget which is using this Store
13198 * as a Record cache should refresh its view.
13199 * @param {Store} this
13201 datachanged : true,
13203 * @event metachange
13204 * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
13205 * @param {Store} this
13206 * @param {Object} meta The JSON metadata
13211 * Fires when Records have been added to the Store
13212 * @param {Store} this
13213 * @param {Roo.data.Record[]} records The array of Records added
13214 * @param {Number} index The index at which the record(s) were added
13219 * Fires when a Record has been removed from the Store
13220 * @param {Store} this
13221 * @param {Roo.data.Record} record The Record that was removed
13222 * @param {Number} index The index at which the record was removed
13227 * Fires when a Record has been updated
13228 * @param {Store} this
13229 * @param {Roo.data.Record} record The Record that was updated
13230 * @param {String} operation The update operation being performed. Value may be one of:
13232 Roo.data.Record.EDIT
13233 Roo.data.Record.REJECT
13234 Roo.data.Record.COMMIT
13240 * Fires when the data cache has been cleared.
13241 * @param {Store} this
13245 * @event beforeload
13246 * Fires before a request is made for a new data object. If the beforeload handler returns false
13247 * the load action will be canceled.
13248 * @param {Store} this
13249 * @param {Object} options The loading options that were specified (see {@link #load} for details)
13253 * @event beforeloadadd
13254 * Fires after a new set of Records has been loaded.
13255 * @param {Store} this
13256 * @param {Roo.data.Record[]} records The Records that were loaded
13257 * @param {Object} options The loading options that were specified (see {@link #load} for details)
13259 beforeloadadd : true,
13262 * Fires after a new set of Records has been loaded, before they are added to the store.
13263 * @param {Store} this
13264 * @param {Roo.data.Record[]} records The Records that were loaded
13265 * @param {Object} options The loading options that were specified (see {@link #load} for details)
13266 * @params {Object} return from reader
13270 * @event loadexception
13271 * Fires if an exception occurs in the Proxy during loading.
13272 * Called with the signature of the Proxy's "loadexception" event.
13273 * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
13276 * @param {Object} return from JsonData.reader() - success, totalRecords, records
13277 * @param {Object} load options
13278 * @param {Object} jsonData from your request (normally this contains the Exception)
13280 loadexception : true
13284 this.proxy = Roo.factory(this.proxy, Roo.data);
13285 this.proxy.xmodule = this.xmodule || false;
13286 this.relayEvents(this.proxy, ["loadexception"]);
13288 this.sortToggle = {};
13289 this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
13291 Roo.data.Store.superclass.constructor.call(this);
13293 if(this.inlineData){
13294 this.loadData(this.inlineData);
13295 delete this.inlineData;
13299 Roo.extend(Roo.data.Store, Roo.util.Observable, {
13301 * @cfg {boolean} isLocal flag if data is locally available (and can be always looked up
13302 * without a remote query - used by combo/forms at present.
13306 * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
13309 * @cfg {Array} data Inline data to be loaded when the store is initialized.
13312 * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
13313 * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
13316 * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
13317 * on any HTTP request
13320 * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
13323 * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
13327 * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
13328 * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
13330 remoteSort : false,
13333 * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
13334 * loaded or when a record is removed. (defaults to false).
13336 pruneModifiedRecords : false,
13339 lastOptions : null,
13342 * Add Records to the Store and fires the add event.
13343 * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
13345 add : function(records){
13346 records = [].concat(records);
13347 for(var i = 0, len = records.length; i < len; i++){
13348 records[i].join(this);
13350 var index = this.data.length;
13351 this.data.addAll(records);
13352 this.fireEvent("add", this, records, index);
13356 * Remove a Record from the Store and fires the remove event.
13357 * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
13359 remove : function(record){
13360 var index = this.data.indexOf(record);
13361 this.data.removeAt(index);
13363 if(this.pruneModifiedRecords){
13364 this.modified.remove(record);
13366 this.fireEvent("remove", this, record, index);
13370 * Remove all Records from the Store and fires the clear event.
13372 removeAll : function(){
13374 if(this.pruneModifiedRecords){
13375 this.modified = [];
13377 this.fireEvent("clear", this);
13381 * Inserts Records to the Store at the given index and fires the add event.
13382 * @param {Number} index The start index at which to insert the passed Records.
13383 * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
13385 insert : function(index, records){
13386 records = [].concat(records);
13387 for(var i = 0, len = records.length; i < len; i++){
13388 this.data.insert(index, records[i]);
13389 records[i].join(this);
13391 this.fireEvent("add", this, records, index);
13395 * Get the index within the cache of the passed Record.
13396 * @param {Roo.data.Record} record The Roo.data.Record object to to find.
13397 * @return {Number} The index of the passed Record. Returns -1 if not found.
13399 indexOf : function(record){
13400 return this.data.indexOf(record);
13404 * Get the index within the cache of the Record with the passed id.
13405 * @param {String} id The id of the Record to find.
13406 * @return {Number} The index of the Record. Returns -1 if not found.
13408 indexOfId : function(id){
13409 return this.data.indexOfKey(id);
13413 * Get the Record with the specified id.
13414 * @param {String} id The id of the Record to find.
13415 * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
13417 getById : function(id){
13418 return this.data.key(id);
13422 * Get the Record at the specified index.
13423 * @param {Number} index The index of the Record to find.
13424 * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
13426 getAt : function(index){
13427 return this.data.itemAt(index);
13431 * Returns a range of Records between specified indices.
13432 * @param {Number} startIndex (optional) The starting index (defaults to 0)
13433 * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
13434 * @return {Roo.data.Record[]} An array of Records
13436 getRange : function(start, end){
13437 return this.data.getRange(start, end);
13441 storeOptions : function(o){
13442 o = Roo.apply({}, o);
13445 this.lastOptions = o;
13449 * Loads the Record cache from the configured Proxy using the configured Reader.
13451 * If using remote paging, then the first load call must specify the <em>start</em>
13452 * and <em>limit</em> properties in the options.params property to establish the initial
13453 * position within the dataset, and the number of Records to cache on each read from the Proxy.
13455 * <strong>It is important to note that for remote data sources, loading is asynchronous,
13456 * and this call will return before the new data has been loaded. Perform any post-processing
13457 * in a callback function, or in a "load" event handler.</strong>
13459 * @param {Object} options An object containing properties which control loading options:<ul>
13460 * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
13461 * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
13462 * passed the following arguments:<ul>
13463 * <li>r : Roo.data.Record[]</li>
13464 * <li>options: Options object from the load call</li>
13465 * <li>success: Boolean success indicator</li></ul></li>
13466 * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
13467 * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
13470 load : function(options){
13471 options = options || {};
13472 if(this.fireEvent("beforeload", this, options) !== false){
13473 this.storeOptions(options);
13474 var p = Roo.apply(options.params || {}, this.baseParams);
13475 // if meta was not loaded from remote source.. try requesting it.
13476 if (!this.reader.metaFromRemote) {
13477 p._requestMeta = 1;
13479 if(this.sortInfo && this.remoteSort){
13480 var pn = this.paramNames;
13481 p[pn["sort"]] = this.sortInfo.field;
13482 p[pn["dir"]] = this.sortInfo.direction;
13484 if (this.multiSort) {
13485 var pn = this.paramNames;
13486 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
13489 this.proxy.load(p, this.reader, this.loadRecords, this, options);
13494 * Reloads the Record cache from the configured Proxy using the configured Reader and
13495 * the options from the last load operation performed.
13496 * @param {Object} options (optional) An object containing properties which may override the options
13497 * used in the last load operation. See {@link #load} for details (defaults to null, in which case
13498 * the most recently used options are reused).
13500 reload : function(options){
13501 this.load(Roo.applyIf(options||{}, this.lastOptions));
13505 // Called as a callback by the Reader during a load operation.
13506 loadRecords : function(o, options, success){
13507 if(!o || success === false){
13508 if(success !== false){
13509 this.fireEvent("load", this, [], options, o);
13511 if(options.callback){
13512 options.callback.call(options.scope || this, [], options, false);
13516 // if data returned failure - throw an exception.
13517 if (o.success === false) {
13518 // show a message if no listener is registered.
13519 if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
13520 Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
13522 // loadmask wil be hooked into this..
13523 this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
13526 var r = o.records, t = o.totalRecords || r.length;
13528 this.fireEvent("beforeloadadd", this, r, options, o);
13530 if(!options || options.add !== true){
13531 if(this.pruneModifiedRecords){
13532 this.modified = [];
13534 for(var i = 0, len = r.length; i < len; i++){
13538 this.data = this.snapshot;
13539 delete this.snapshot;
13542 this.data.addAll(r);
13543 this.totalLength = t;
13545 this.fireEvent("datachanged", this);
13547 this.totalLength = Math.max(t, this.data.length+r.length);
13551 if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
13553 var e = new Roo.data.Record({});
13555 e.set(this.parent.displayField, this.parent.emptyTitle);
13556 e.set(this.parent.valueField, '');
13561 this.fireEvent("load", this, r, options, o);
13562 if(options.callback){
13563 options.callback.call(options.scope || this, r, options, true);
13569 * Loads data from a passed data block. A Reader which understands the format of the data
13570 * must have been configured in the constructor.
13571 * @param {Object} data The data block from which to read the Records. The format of the data expected
13572 * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
13573 * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
13575 loadData : function(o, append){
13576 var r = this.reader.readRecords(o);
13577 this.loadRecords(r, {add: append}, true);
13581 * using 'cn' the nested child reader read the child array into it's child stores.
13582 * @param {Object} rec The record with a 'children array
13584 loadDataFromChildren : function(rec)
13586 this.loadData(this.reader.toLoadData(rec));
13591 * Gets the number of cached records.
13593 * <em>If using paging, this may not be the total size of the dataset. If the data object
13594 * used by the Reader contains the dataset size, then the getTotalCount() function returns
13595 * the data set size</em>
13597 getCount : function(){
13598 return this.data.length || 0;
13602 * Gets the total number of records in the dataset as returned by the server.
13604 * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
13605 * the dataset size</em>
13607 getTotalCount : function(){
13608 return this.totalLength || 0;
13612 * Returns the sort state of the Store as an object with two properties:
13614 field {String} The name of the field by which the Records are sorted
13615 direction {String} The sort order, "ASC" or "DESC"
13618 getSortState : function(){
13619 return this.sortInfo;
13623 applySort : function(){
13624 if(this.sortInfo && !this.remoteSort){
13625 var s = this.sortInfo, f = s.field;
13626 var st = this.fields.get(f).sortType;
13627 var fn = function(r1, r2){
13628 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
13629 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
13631 this.data.sort(s.direction, fn);
13632 if(this.snapshot && this.snapshot != this.data){
13633 this.snapshot.sort(s.direction, fn);
13639 * Sets the default sort column and order to be used by the next load operation.
13640 * @param {String} fieldName The name of the field to sort by.
13641 * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
13643 setDefaultSort : function(field, dir){
13644 this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
13648 * Sort the Records.
13649 * If remote sorting is used, the sort is performed on the server, and the cache is
13650 * reloaded. If local sorting is used, the cache is sorted internally.
13651 * @param {String} fieldName The name of the field to sort by.
13652 * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
13654 sort : function(fieldName, dir){
13655 var f = this.fields.get(fieldName);
13657 this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
13659 if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
13660 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
13665 this.sortToggle[f.name] = dir;
13666 this.sortInfo = {field: f.name, direction: dir};
13667 if(!this.remoteSort){
13669 this.fireEvent("datachanged", this);
13671 this.load(this.lastOptions);
13676 * Calls the specified function for each of the Records in the cache.
13677 * @param {Function} fn The function to call. The Record is passed as the first parameter.
13678 * Returning <em>false</em> aborts and exits the iteration.
13679 * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
13681 each : function(fn, scope){
13682 this.data.each(fn, scope);
13686 * Gets all records modified since the last commit. Modified records are persisted across load operations
13687 * (e.g., during paging).
13688 * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
13690 getModifiedRecords : function(){
13691 return this.modified;
13695 createFilterFn : function(property, value, anyMatch){
13696 if(!value.exec){ // not a regex
13697 value = String(value);
13698 if(value.length == 0){
13701 value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
13703 return function(r){
13704 return value.test(r.data[property]);
13709 * Sums the value of <i>property</i> for each record between start and end and returns the result.
13710 * @param {String} property A field on your records
13711 * @param {Number} start The record index to start at (defaults to 0)
13712 * @param {Number} end The last record index to include (defaults to length - 1)
13713 * @return {Number} The sum
13715 sum : function(property, start, end){
13716 var rs = this.data.items, v = 0;
13717 start = start || 0;
13718 end = (end || end === 0) ? end : rs.length-1;
13720 for(var i = start; i <= end; i++){
13721 v += (rs[i].data[property] || 0);
13727 * Filter the records by a specified property.
13728 * @param {String} field A field on your records
13729 * @param {String/RegExp} value Either a string that the field
13730 * should start with or a RegExp to test against the field
13731 * @param {Boolean} anyMatch True to match any part not just the beginning
13733 filter : function(property, value, anyMatch){
13734 var fn = this.createFilterFn(property, value, anyMatch);
13735 return fn ? this.filterBy(fn) : this.clearFilter();
13739 * Filter by a function. The specified function will be called with each
13740 * record in this data source. If the function returns true the record is included,
13741 * otherwise it is filtered.
13742 * @param {Function} fn The function to be called, it will receive 2 args (record, id)
13743 * @param {Object} scope (optional) The scope of the function (defaults to this)
13745 filterBy : function(fn, scope){
13746 this.snapshot = this.snapshot || this.data;
13747 this.data = this.queryBy(fn, scope||this);
13748 this.fireEvent("datachanged", this);
13752 * Query the records by a specified property.
13753 * @param {String} field A field on your records
13754 * @param {String/RegExp} value Either a string that the field
13755 * should start with or a RegExp to test against the field
13756 * @param {Boolean} anyMatch True to match any part not just the beginning
13757 * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
13759 query : function(property, value, anyMatch){
13760 var fn = this.createFilterFn(property, value, anyMatch);
13761 return fn ? this.queryBy(fn) : this.data.clone();
13765 * Query by a function. The specified function will be called with each
13766 * record in this data source. If the function returns true the record is included
13768 * @param {Function} fn The function to be called, it will receive 2 args (record, id)
13769 * @param {Object} scope (optional) The scope of the function (defaults to this)
13770 @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
13772 queryBy : function(fn, scope){
13773 var data = this.snapshot || this.data;
13774 return data.filterBy(fn, scope||this);
13778 * Collects unique values for a particular dataIndex from this store.
13779 * @param {String} dataIndex The property to collect
13780 * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
13781 * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
13782 * @return {Array} An array of the unique values
13784 collect : function(dataIndex, allowNull, bypassFilter){
13785 var d = (bypassFilter === true && this.snapshot) ?
13786 this.snapshot.items : this.data.items;
13787 var v, sv, r = [], l = {};
13788 for(var i = 0, len = d.length; i < len; i++){
13789 v = d[i].data[dataIndex];
13791 if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
13800 * Revert to a view of the Record cache with no filtering applied.
13801 * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
13803 clearFilter : function(suppressEvent){
13804 if(this.snapshot && this.snapshot != this.data){
13805 this.data = this.snapshot;
13806 delete this.snapshot;
13807 if(suppressEvent !== true){
13808 this.fireEvent("datachanged", this);
13814 afterEdit : function(record){
13815 if(this.modified.indexOf(record) == -1){
13816 this.modified.push(record);
13818 this.fireEvent("update", this, record, Roo.data.Record.EDIT);
13822 afterReject : function(record){
13823 this.modified.remove(record);
13824 this.fireEvent("update", this, record, Roo.data.Record.REJECT);
13828 afterCommit : function(record){
13829 this.modified.remove(record);
13830 this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
13834 * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
13835 * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
13837 commitChanges : function(){
13838 var m = this.modified.slice(0);
13839 this.modified = [];
13840 for(var i = 0, len = m.length; i < len; i++){
13846 * Cancel outstanding changes on all changed records.
13848 rejectChanges : function(){
13849 var m = this.modified.slice(0);
13850 this.modified = [];
13851 for(var i = 0, len = m.length; i < len; i++){
13856 onMetaChange : function(meta, rtype, o){
13857 this.recordType = rtype;
13858 this.fields = rtype.prototype.fields;
13859 delete this.snapshot;
13860 this.sortInfo = meta.sortInfo || this.sortInfo;
13861 this.modified = [];
13862 this.fireEvent('metachange', this, this.reader.meta);
13865 moveIndex : function(data, type)
13867 var index = this.indexOf(data);
13869 var newIndex = index + type;
13873 this.insert(newIndex, data);
13878 * Ext JS Library 1.1.1
13879 * Copyright(c) 2006-2007, Ext JS, LLC.
13881 * Originally Released Under LGPL - original licence link has changed is not relivant.
13884 * <script type="text/javascript">
13888 * @class Roo.data.SimpleStore
13889 * @extends Roo.data.Store
13890 * Small helper class to make creating Stores from Array data easier.
13891 * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
13892 * @cfg {Array} fields An array of field definition objects, or field name strings.
13893 * @cfg {Object} an existing reader (eg. copied from another store)
13894 * @cfg {Array} data The multi-dimensional array of data
13896 * @param {Object} config
13898 Roo.data.SimpleStore = function(config)
13900 Roo.data.SimpleStore.superclass.constructor.call(this, {
13902 reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
13905 Roo.data.Record.create(config.fields)
13907 proxy : new Roo.data.MemoryProxy(config.data)
13911 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
13913 * Ext JS Library 1.1.1
13914 * Copyright(c) 2006-2007, Ext JS, LLC.
13916 * Originally Released Under LGPL - original licence link has changed is not relivant.
13919 * <script type="text/javascript">
13924 * @extends Roo.data.Store
13925 * @class Roo.data.JsonStore
13926 * Small helper class to make creating Stores for JSON data easier. <br/>
13928 var store = new Roo.data.JsonStore({
13929 url: 'get-images.php',
13931 fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
13934 * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
13935 * JsonReader and HttpProxy (unless inline data is provided).</b>
13936 * @cfg {Array} fields An array of field definition objects, or field name strings.
13938 * @param {Object} config
13940 Roo.data.JsonStore = function(c){
13941 Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
13942 proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
13943 reader: new Roo.data.JsonReader(c, c.fields)
13946 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
13948 * Ext JS Library 1.1.1
13949 * Copyright(c) 2006-2007, Ext JS, LLC.
13951 * Originally Released Under LGPL - original licence link has changed is not relivant.
13954 * <script type="text/javascript">
13958 Roo.data.Field = function(config){
13959 if(typeof config == "string"){
13960 config = {name: config};
13962 Roo.apply(this, config);
13965 this.type = "auto";
13968 var st = Roo.data.SortTypes;
13969 // named sortTypes are supported, here we look them up
13970 if(typeof this.sortType == "string"){
13971 this.sortType = st[this.sortType];
13974 // set default sortType for strings and dates
13975 if(!this.sortType){
13978 this.sortType = st.asUCString;
13981 this.sortType = st.asDate;
13984 this.sortType = st.none;
13989 var stripRe = /[\$,%]/g;
13991 // prebuilt conversion function for this field, instead of
13992 // switching every time we're reading a value
13994 var cv, dateFormat = this.dateFormat;
13999 cv = function(v){ return v; };
14002 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
14006 return v !== undefined && v !== null && v !== '' ?
14007 parseInt(String(v).replace(stripRe, ""), 10) : '';
14012 return v !== undefined && v !== null && v !== '' ?
14013 parseFloat(String(v).replace(stripRe, ""), 10) : '';
14018 cv = function(v){ return v === true || v === "true" || v == 1; };
14025 if(v instanceof Date){
14029 if(dateFormat == "timestamp"){
14030 return new Date(v*1000);
14032 return Date.parseDate(v, dateFormat);
14034 var parsed = Date.parse(v);
14035 return parsed ? new Date(parsed) : null;
14044 Roo.data.Field.prototype = {
14052 * Ext JS Library 1.1.1
14053 * Copyright(c) 2006-2007, Ext JS, LLC.
14055 * Originally Released Under LGPL - original licence link has changed is not relivant.
14058 * <script type="text/javascript">
14061 // Base class for reading structured data from a data source. This class is intended to be
14062 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
14065 * @class Roo.data.DataReader
14066 * Base class for reading structured data from a data source. This class is intended to be
14067 * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
14070 Roo.data.DataReader = function(meta, recordType){
14074 this.recordType = recordType instanceof Array ?
14075 Roo.data.Record.create(recordType) : recordType;
14078 Roo.data.DataReader.prototype = {
14081 readerType : 'Data',
14083 * Create an empty record
14084 * @param {Object} data (optional) - overlay some values
14085 * @return {Roo.data.Record} record created.
14087 newRow : function(d) {
14089 this.recordType.prototype.fields.each(function(c) {
14091 case 'int' : da[c.name] = 0; break;
14092 case 'date' : da[c.name] = new Date(); break;
14093 case 'float' : da[c.name] = 0.0; break;
14094 case 'boolean' : da[c.name] = false; break;
14095 default : da[c.name] = ""; break;
14099 return new this.recordType(Roo.apply(da, d));
14105 * Ext JS Library 1.1.1
14106 * Copyright(c) 2006-2007, Ext JS, LLC.
14108 * Originally Released Under LGPL - original licence link has changed is not relivant.
14111 * <script type="text/javascript">
14115 * @class Roo.data.DataProxy
14116 * @extends Roo.data.Observable
14117 * This class is an abstract base class for implementations which provide retrieval of
14118 * unformatted data objects.<br>
14120 * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
14121 * (of the appropriate type which knows how to parse the data object) to provide a block of
14122 * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
14124 * Custom implementations must implement the load method as described in
14125 * {@link Roo.data.HttpProxy#load}.
14127 Roo.data.DataProxy = function(){
14130 * @event beforeload
14131 * Fires before a network request is made to retrieve a data object.
14132 * @param {Object} This DataProxy object.
14133 * @param {Object} params The params parameter to the load function.
14138 * Fires before the load method's callback is called.
14139 * @param {Object} This DataProxy object.
14140 * @param {Object} o The data object.
14141 * @param {Object} arg The callback argument object passed to the load function.
14145 * @event loadexception
14146 * Fires if an Exception occurs during data retrieval.
14147 * @param {Object} This DataProxy object.
14148 * @param {Object} o The data object.
14149 * @param {Object} arg The callback argument object passed to the load function.
14150 * @param {Object} e The Exception.
14152 loadexception : true
14154 Roo.data.DataProxy.superclass.constructor.call(this);
14157 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
14160 * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
14164 * Ext JS Library 1.1.1
14165 * Copyright(c) 2006-2007, Ext JS, LLC.
14167 * Originally Released Under LGPL - original licence link has changed is not relivant.
14170 * <script type="text/javascript">
14173 * @class Roo.data.MemoryProxy
14174 * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
14175 * to the Reader when its load method is called.
14177 * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
14179 Roo.data.MemoryProxy = function(data){
14183 Roo.data.MemoryProxy.superclass.constructor.call(this);
14187 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
14190 * Load data from the requested source (in this case an in-memory
14191 * data object passed to the constructor), read the data object into
14192 * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
14193 * process that block using the passed callback.
14194 * @param {Object} params This parameter is not used by the MemoryProxy class.
14195 * @param {Roo.data.DataReader} reader The Reader object which converts the data
14196 * object into a block of Roo.data.Records.
14197 * @param {Function} callback The function into which to pass the block of Roo.data.records.
14198 * The function must be passed <ul>
14199 * <li>The Record block object</li>
14200 * <li>The "arg" argument from the load function</li>
14201 * <li>A boolean success indicator</li>
14203 * @param {Object} scope The scope in which to call the callback
14204 * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
14206 load : function(params, reader, callback, scope, arg){
14207 params = params || {};
14210 result = reader.readRecords(params.data ? params.data :this.data);
14212 this.fireEvent("loadexception", this, arg, null, e);
14213 callback.call(scope, null, arg, false);
14216 callback.call(scope, result, arg, true);
14220 update : function(params, records){
14225 * Ext JS Library 1.1.1
14226 * Copyright(c) 2006-2007, Ext JS, LLC.
14228 * Originally Released Under LGPL - original licence link has changed is not relivant.
14231 * <script type="text/javascript">
14234 * @class Roo.data.HttpProxy
14235 * @extends Roo.data.DataProxy
14236 * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
14237 * configured to reference a certain URL.<br><br>
14239 * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
14240 * from which the running page was served.<br><br>
14242 * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
14244 * Be aware that to enable the browser to parse an XML document, the server must set
14245 * the Content-Type header in the HTTP response to "text/xml".
14247 * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
14248 * an {@link Roo.data.Connection} object. If a Connection config is passed, the singleton {@link Roo.Ajax} object
14249 * will be used to make the request.
14251 Roo.data.HttpProxy = function(conn){
14252 Roo.data.HttpProxy.superclass.constructor.call(this);
14253 // is conn a conn config or a real conn?
14255 this.useAjax = !conn || !conn.events;
14259 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
14260 // thse are take from connection...
14263 * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
14266 * @cfg {Object} extraParams (Optional) An object containing properties which are used as
14267 * extra parameters to each request made by this object. (defaults to undefined)
14270 * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
14271 * to each request made by this object. (defaults to undefined)
14274 * @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)
14277 * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
14280 * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
14286 * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
14290 * Return the {@link Roo.data.Connection} object being used by this Proxy.
14291 * @return {Connection} The Connection object. This object may be used to subscribe to events on
14292 * a finer-grained basis than the DataProxy events.
14294 getConnection : function(){
14295 return this.useAjax ? Roo.Ajax : this.conn;
14299 * Load data from the configured {@link Roo.data.Connection}, read the data object into
14300 * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
14301 * process that block using the passed callback.
14302 * @param {Object} params An object containing properties which are to be used as HTTP parameters
14303 * for the request to the remote server.
14304 * @param {Roo.data.DataReader} reader The Reader object which converts the data
14305 * object into a block of Roo.data.Records.
14306 * @param {Function} callback The function into which to pass the block of Roo.data.Records.
14307 * The function must be passed <ul>
14308 * <li>The Record block object</li>
14309 * <li>The "arg" argument from the load function</li>
14310 * <li>A boolean success indicator</li>
14312 * @param {Object} scope The scope in which to call the callback
14313 * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
14315 load : function(params, reader, callback, scope, arg){
14316 if(this.fireEvent("beforeload", this, params) !== false){
14318 params : params || {},
14320 callback : callback,
14325 callback : this.loadResponse,
14329 Roo.applyIf(o, this.conn);
14330 if(this.activeRequest){
14331 Roo.Ajax.abort(this.activeRequest);
14333 this.activeRequest = Roo.Ajax.request(o);
14335 this.conn.request(o);
14338 callback.call(scope||this, null, arg, false);
14343 loadResponse : function(o, success, response){
14344 delete this.activeRequest;
14346 this.fireEvent("loadexception", this, o, response);
14347 o.request.callback.call(o.request.scope, null, o.request.arg, false);
14352 result = o.reader.read(response);
14354 this.fireEvent("loadexception", this, o, response, e);
14355 o.request.callback.call(o.request.scope, null, o.request.arg, false);
14359 this.fireEvent("load", this, o, o.request.arg);
14360 o.request.callback.call(o.request.scope, result, o.request.arg, true);
14364 update : function(dataSet){
14369 updateResponse : function(dataSet){
14374 * Ext JS Library 1.1.1
14375 * Copyright(c) 2006-2007, Ext JS, LLC.
14377 * Originally Released Under LGPL - original licence link has changed is not relivant.
14380 * <script type="text/javascript">
14384 * @class Roo.data.ScriptTagProxy
14385 * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
14386 * other than the originating domain of the running page.<br><br>
14388 * <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
14389 * of the running page, you must use this class, rather than DataProxy.</em><br><br>
14391 * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
14392 * source code that is used as the source inside a <script> tag.<br><br>
14394 * In order for the browser to process the returned data, the server must wrap the data object
14395 * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
14396 * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
14397 * depending on whether the callback name was passed:
14400 boolean scriptTag = false;
14401 String cb = request.getParameter("callback");
14404 response.setContentType("text/javascript");
14406 response.setContentType("application/x-json");
14408 Writer out = response.getWriter();
14410 out.write(cb + "(");
14412 out.print(dataBlock.toJsonString());
14419 * @param {Object} config A configuration object.
14421 Roo.data.ScriptTagProxy = function(config){
14422 Roo.data.ScriptTagProxy.superclass.constructor.call(this);
14423 Roo.apply(this, config);
14424 this.head = document.getElementsByTagName("head")[0];
14427 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
14429 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
14431 * @cfg {String} url The URL from which to request the data object.
14434 * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
14438 * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
14439 * the server the name of the callback function set up by the load call to process the returned data object.
14440 * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
14441 * javascript output which calls this named function passing the data object as its only parameter.
14443 callbackParam : "callback",
14445 * @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
14446 * name to the request.
14451 * Load data from the configured URL, read the data object into
14452 * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
14453 * process that block using the passed callback.
14454 * @param {Object} params An object containing properties which are to be used as HTTP parameters
14455 * for the request to the remote server.
14456 * @param {Roo.data.DataReader} reader The Reader object which converts the data
14457 * object into a block of Roo.data.Records.
14458 * @param {Function} callback The function into which to pass the block of Roo.data.Records.
14459 * The function must be passed <ul>
14460 * <li>The Record block object</li>
14461 * <li>The "arg" argument from the load function</li>
14462 * <li>A boolean success indicator</li>
14464 * @param {Object} scope The scope in which to call the callback
14465 * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
14467 load : function(params, reader, callback, scope, arg){
14468 if(this.fireEvent("beforeload", this, params) !== false){
14470 var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
14472 var url = this.url;
14473 url += (url.indexOf("?") != -1 ? "&" : "?") + p;
14475 url += "&_dc=" + (new Date().getTime());
14477 var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
14480 cb : "stcCallback"+transId,
14481 scriptId : "stcScript"+transId,
14485 callback : callback,
14491 window[trans.cb] = function(o){
14492 conn.handleResponse(o, trans);
14495 url += String.format("&{0}={1}", this.callbackParam, trans.cb);
14497 if(this.autoAbort !== false){
14501 trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
14503 var script = document.createElement("script");
14504 script.setAttribute("src", url);
14505 script.setAttribute("type", "text/javascript");
14506 script.setAttribute("id", trans.scriptId);
14507 this.head.appendChild(script);
14509 this.trans = trans;
14511 callback.call(scope||this, null, arg, false);
14516 isLoading : function(){
14517 return this.trans ? true : false;
14521 * Abort the current server request.
14523 abort : function(){
14524 if(this.isLoading()){
14525 this.destroyTrans(this.trans);
14530 destroyTrans : function(trans, isLoaded){
14531 this.head.removeChild(document.getElementById(trans.scriptId));
14532 clearTimeout(trans.timeoutId);
14534 window[trans.cb] = undefined;
14536 delete window[trans.cb];
14539 // if hasn't been loaded, wait for load to remove it to prevent script error
14540 window[trans.cb] = function(){
14541 window[trans.cb] = undefined;
14543 delete window[trans.cb];
14550 handleResponse : function(o, trans){
14551 this.trans = false;
14552 this.destroyTrans(trans, true);
14555 result = trans.reader.readRecords(o);
14557 this.fireEvent("loadexception", this, o, trans.arg, e);
14558 trans.callback.call(trans.scope||window, null, trans.arg, false);
14561 this.fireEvent("load", this, o, trans.arg);
14562 trans.callback.call(trans.scope||window, result, trans.arg, true);
14566 handleFailure : function(trans){
14567 this.trans = false;
14568 this.destroyTrans(trans, false);
14569 this.fireEvent("loadexception", this, null, trans.arg);
14570 trans.callback.call(trans.scope||window, null, trans.arg, false);
14574 * Ext JS Library 1.1.1
14575 * Copyright(c) 2006-2007, Ext JS, LLC.
14577 * Originally Released Under LGPL - original licence link has changed is not relivant.
14580 * <script type="text/javascript">
14584 * @class Roo.data.JsonReader
14585 * @extends Roo.data.DataReader
14586 * Data reader class to create an Array of Roo.data.Record objects from a JSON response
14587 * based on mappings in a provided Roo.data.Record constructor.
14589 * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
14590 * in the reply previously.
14595 var RecordDef = Roo.data.Record.create([
14596 {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
14597 {name: 'occupation'} // This field will use "occupation" as the mapping.
14599 var myReader = new Roo.data.JsonReader({
14600 totalProperty: "results", // The property which contains the total dataset size (optional)
14601 root: "rows", // The property which contains an Array of row objects
14602 id: "id" // The property within each row object that provides an ID for the record (optional)
14606 * This would consume a JSON file like this:
14608 { 'results': 2, 'rows': [
14609 { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
14610 { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
14613 * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
14614 * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
14615 * paged from the remote server.
14616 * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
14617 * @cfg {String} root name of the property which contains the Array of row objects.
14618 * @cfg {String} id Name of the property within a row object that contains a record identifier value.
14619 * @cfg {Array} fields Array of field definition objects
14621 * Create a new JsonReader
14622 * @param {Object} meta Metadata configuration options
14623 * @param {Object} recordType Either an Array of field definition objects,
14624 * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
14626 Roo.data.JsonReader = function(meta, recordType){
14629 // set some defaults:
14630 Roo.applyIf(meta, {
14631 totalProperty: 'total',
14632 successProperty : 'success',
14637 Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
14639 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
14641 readerType : 'Json',
14644 * @prop {Boolean} metaFromRemote - if the meta data was loaded from the remote source.
14645 * Used by Store query builder to append _requestMeta to params.
14648 metaFromRemote : false,
14650 * This method is only used by a DataProxy which has retrieved data from a remote server.
14651 * @param {Object} response The XHR object which contains the JSON data in its responseText.
14652 * @return {Object} data A data block which is used by an Roo.data.Store object as
14653 * a cache of Roo.data.Records.
14655 read : function(response){
14656 var json = response.responseText;
14658 var o = /* eval:var:o */ eval("("+json+")");
14660 throw {message: "JsonReader.read: Json object not found"};
14666 this.metaFromRemote = true;
14667 this.meta = o.metaData;
14668 this.recordType = Roo.data.Record.create(o.metaData.fields);
14669 this.onMetaChange(this.meta, this.recordType, o);
14671 return this.readRecords(o);
14674 // private function a store will implement
14675 onMetaChange : function(meta, recordType, o){
14682 simpleAccess: function(obj, subsc) {
14689 getJsonAccessor: function(){
14691 return function(expr) {
14693 return(re.test(expr))
14694 ? new Function("obj", "return obj." + expr)
14699 return Roo.emptyFn;
14704 * Create a data block containing Roo.data.Records from an XML document.
14705 * @param {Object} o An object which contains an Array of row objects in the property specified
14706 * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
14707 * which contains the total size of the dataset.
14708 * @return {Object} data A data block which is used by an Roo.data.Store object as
14709 * a cache of Roo.data.Records.
14711 readRecords : function(o){
14713 * After any data loads, the raw JSON data is available for further custom processing.
14717 var s = this.meta, Record = this.recordType,
14718 f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
14720 // Generate extraction functions for the totalProperty, the root, the id, and for each field
14722 if(s.totalProperty) {
14723 this.getTotal = this.getJsonAccessor(s.totalProperty);
14725 if(s.successProperty) {
14726 this.getSuccess = this.getJsonAccessor(s.successProperty);
14728 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
14730 var g = this.getJsonAccessor(s.id);
14731 this.getId = function(rec) {
14733 return (r === undefined || r === "") ? null : r;
14736 this.getId = function(){return null;};
14739 for(var jj = 0; jj < fl; jj++){
14741 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
14742 this.ef[jj] = this.getJsonAccessor(map);
14746 var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
14747 if(s.totalProperty){
14748 var vt = parseInt(this.getTotal(o), 10);
14753 if(s.successProperty){
14754 var vs = this.getSuccess(o);
14755 if(vs === false || vs === 'false'){
14760 for(var i = 0; i < c; i++){
14763 var id = this.getId(n);
14764 for(var j = 0; j < fl; j++){
14766 var v = this.ef[j](n);
14768 Roo.log('missing convert for ' + f.name);
14772 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
14774 var record = new Record(values, id);
14776 records[i] = record;
14782 totalRecords : totalRecords
14785 // used when loading children.. @see loadDataFromChildren
14786 toLoadData: function(rec)
14788 // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
14789 var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
14790 return { data : data, total : data.length };
14795 * Ext JS Library 1.1.1
14796 * Copyright(c) 2006-2007, Ext JS, LLC.
14798 * Originally Released Under LGPL - original licence link has changed is not relivant.
14801 * <script type="text/javascript">
14805 * @class Roo.data.ArrayReader
14806 * @extends Roo.data.DataReader
14807 * Data reader class to create an Array of Roo.data.Record objects from an Array.
14808 * Each element of that Array represents a row of data fields. The
14809 * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
14810 * of the field definition if it exists, or the field's ordinal position in the definition.<br>
14814 var RecordDef = Roo.data.Record.create([
14815 {name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which
14816 {name: 'occupation', mapping: 2} // precludes using the ordinal position as the index.
14818 var myReader = new Roo.data.ArrayReader({
14819 id: 0 // The subscript within row Array that provides an ID for the Record (optional)
14823 * This would consume an Array like this:
14825 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
14829 * Create a new JsonReader
14830 * @param {Object} meta Metadata configuration options.
14831 * @param {Object|Array} recordType Either an Array of field definition objects
14833 * @cfg {Array} fields Array of field definition objects
14834 * @cfg {String} id Name of the property within a row object that contains a record identifier value.
14835 * as specified to {@link Roo.data.Record#create},
14836 * or an {@link Roo.data.Record} object
14839 * created using {@link Roo.data.Record#create}.
14841 Roo.data.ArrayReader = function(meta, recordType)
14843 Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
14846 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
14849 * Create a data block containing Roo.data.Records from an XML document.
14850 * @param {Object} o An Array of row objects which represents the dataset.
14851 * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
14852 * a cache of Roo.data.Records.
14854 readRecords : function(o)
14856 var sid = this.meta ? this.meta.id : null;
14857 var recordType = this.recordType, fields = recordType.prototype.fields;
14860 for(var i = 0; i < root.length; i++){
14863 var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
14864 for(var j = 0, jlen = fields.length; j < jlen; j++){
14865 var f = fields.items[j];
14866 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
14867 var v = n[k] !== undefined ? n[k] : f.defaultValue;
14869 values[f.name] = v;
14871 var record = new recordType(values, id);
14873 records[records.length] = record;
14877 totalRecords : records.length
14880 // used when loading children.. @see loadDataFromChildren
14881 toLoadData: function(rec)
14883 // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
14884 return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
14895 * @class Roo.bootstrap.ComboBox
14896 * @extends Roo.bootstrap.TriggerField
14897 * A combobox control with support for autocomplete, remote-loading, paging and many other features.
14898 * @cfg {Boolean} append (true|false) default false
14899 * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
14900 * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
14901 * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
14902 * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
14903 * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
14904 * @cfg {Boolean} animate default true
14905 * @cfg {Boolean} emptyResultText only for touch device
14906 * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
14907 * @cfg {String} emptyTitle default ''
14908 * @cfg {Number} width fixed with? experimental
14910 * Create a new ComboBox.
14911 * @param {Object} config Configuration options
14913 Roo.bootstrap.ComboBox = function(config){
14914 Roo.bootstrap.ComboBox.superclass.constructor.call(this, config);
14918 * Fires when the dropdown list is expanded
14919 * @param {Roo.bootstrap.ComboBox} combo This combo box
14924 * Fires when the dropdown list is collapsed
14925 * @param {Roo.bootstrap.ComboBox} combo This combo box
14929 * @event beforeselect
14930 * Fires before a list item is selected. Return false to cancel the selection.
14931 * @param {Roo.bootstrap.ComboBox} combo This combo box
14932 * @param {Roo.data.Record} record The data record returned from the underlying store
14933 * @param {Number} index The index of the selected item in the dropdown list
14935 'beforeselect' : true,
14938 * Fires when a list item is selected
14939 * @param {Roo.bootstrap.ComboBox} combo This combo box
14940 * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
14941 * @param {Number} index The index of the selected item in the dropdown list
14945 * @event beforequery
14946 * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
14947 * The event object passed has these properties:
14948 * @param {Roo.bootstrap.ComboBox} combo This combo box
14949 * @param {String} query The query
14950 * @param {Boolean} forceAll true to force "all" query
14951 * @param {Boolean} cancel true to cancel the query
14952 * @param {Object} e The query event object
14954 'beforequery': true,
14957 * Fires when the 'add' icon is pressed (add a listener to enable add button)
14958 * @param {Roo.bootstrap.ComboBox} combo This combo box
14963 * Fires when the 'edit' icon is pressed (add a listener to enable add button)
14964 * @param {Roo.bootstrap.ComboBox} combo This combo box
14965 * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
14970 * Fires when the remove value from the combobox array
14971 * @param {Roo.bootstrap.ComboBox} combo This combo box
14975 * @event afterremove
14976 * Fires when the remove value from the combobox array
14977 * @param {Roo.bootstrap.ComboBox} combo This combo box
14979 'afterremove' : true,
14981 * @event specialfilter
14982 * Fires when specialfilter
14983 * @param {Roo.bootstrap.ComboBox} combo This combo box
14985 'specialfilter' : true,
14988 * Fires when tick the element
14989 * @param {Roo.bootstrap.ComboBox} combo This combo box
14993 * @event touchviewdisplay
14994 * Fires when touch view require special display (default is using displayField)
14995 * @param {Roo.bootstrap.ComboBox} combo This combo box
14996 * @param {Object} cfg set html .
14998 'touchviewdisplay' : true
15003 this.tickItems = [];
15005 this.selectedIndex = -1;
15006 if(this.mode == 'local'){
15007 if(config.queryDelay === undefined){
15008 this.queryDelay = 10;
15010 if(config.minChars === undefined){
15016 Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
15019 * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
15020 * rendering into an Roo.Editor, defaults to false)
15023 * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
15024 * {tag: "input", type: "text", size: "24", autocomplete: "off"})
15027 * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
15030 * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
15031 * the dropdown list (defaults to undefined, with no header element)
15035 * @cfg {String/Roo.Template} tpl The template to use to render the output default is '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>'
15039 * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
15041 listWidth: undefined,
15043 * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
15044 * mode = 'remote' or 'text' if mode = 'local')
15046 displayField: undefined,
15049 * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
15050 * mode = 'remote' or 'value' if mode = 'local').
15051 * Note: use of a valueField requires the user make a selection
15052 * in order for a value to be mapped.
15054 valueField: undefined,
15056 * @cfg {String} modalTitle The title of the dialog that pops up on mobile views.
15061 * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
15062 * field's data value (defaults to the underlying DOM element's name)
15064 hiddenName: undefined,
15066 * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
15070 * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
15072 selectedClass: 'active',
15075 * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
15079 * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
15080 * anchor positions (defaults to 'tl-bl')
15082 listAlign: 'tl-bl?',
15084 * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
15088 * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
15089 * query specified by the allQuery config option (defaults to 'query')
15091 triggerAction: 'query',
15093 * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
15094 * (defaults to 4, does not apply if editable = false)
15098 * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
15099 * delay (typeAheadDelay) if it matches a known value (defaults to false)
15103 * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
15104 * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
15108 * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
15109 * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
15113 * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
15114 * when editable = true (defaults to false)
15116 selectOnFocus:false,
15118 * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
15120 queryParam: 'query',
15122 * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
15123 * when mode = 'remote' (defaults to 'Loading...')
15125 loadingText: 'Loading...',
15127 * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
15131 * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
15135 * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
15136 * traditional select (defaults to true)
15140 * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
15144 * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
15148 * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
15149 * listWidth has a higher value)
15153 * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
15154 * allow the user to set arbitrary text into the field (defaults to false)
15156 forceSelection:false,
15158 * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
15159 * if typeAhead = true (defaults to 250)
15161 typeAheadDelay : 250,
15163 * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
15164 * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
15166 valueNotFoundText : undefined,
15168 * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
15170 blockFocus : false,
15173 * @cfg {Boolean} disableClear Disable showing of clear button.
15175 disableClear : false,
15177 * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
15179 alwaysQuery : false,
15182 * @cfg {Boolean} multiple (true|false) ComboBobArray, default false
15187 * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
15189 invalidClass : "has-warning",
15192 * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
15194 validClass : "has-success",
15197 * @cfg {Boolean} specialFilter (true|false) special filter default false
15199 specialFilter : false,
15202 * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true
15204 mobileTouchView : true,
15207 * @cfg {Boolean} useNativeIOS (true|false) render it as classic select for ios, not support dynamic load data (default false)
15209 useNativeIOS : false,
15212 * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view
15214 mobile_restrict_height : false,
15216 ios_options : false,
15228 btnPosition : 'right',
15229 triggerList : true,
15230 showToggleBtn : true,
15232 emptyResultText: 'Empty',
15233 triggerText : 'Select',
15237 // element that contains real text value.. (when hidden is used..)
15239 getAutoCreate : function()
15244 * Render classic select for iso
15247 if(Roo.isIOS && this.useNativeIOS){
15248 cfg = this.getAutoCreateNativeIOS();
15256 if(Roo.isTouch && this.mobileTouchView){
15257 cfg = this.getAutoCreateTouchView();
15264 if(!this.tickable){
15265 cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this);
15270 * ComboBox with tickable selections
15273 var align = this.labelAlign || this.parentLabelAlign();
15276 cls : 'form-group roo-combobox-tickable' //input-group
15279 var btn_text_select = '';
15280 var btn_text_done = '';
15281 var btn_text_cancel = '';
15283 if (this.btn_text_show) {
15284 btn_text_select = 'Select';
15285 btn_text_done = 'Done';
15286 btn_text_cancel = 'Cancel';
15291 cls : 'tickable-buttons',
15296 cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
15297 //html : this.triggerText
15298 html: btn_text_select
15304 cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
15306 html: btn_text_done
15312 cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
15314 html: btn_text_cancel
15320 buttons.cn.unshift({
15322 cls: 'roo-select2-search-field-input'
15328 Roo.each(buttons.cn, function(c){
15330 c.cls += ' btn-' + _this.size;
15333 if (_this.disabled) {
15340 style : 'display: contents',
15345 cls: 'form-hidden-field'
15349 cls: 'roo-select2-choices',
15353 cls: 'roo-select2-search-field',
15364 cls: 'roo-select2-container input-group roo-select2-container-multi',
15370 // cls: 'typeahead typeahead-long dropdown-menu',
15371 // style: 'display:none; max-height:' + this.maxHeight + 'px;'
15376 if(this.hasFeedback && !this.allowBlank){
15380 cls: 'glyphicon form-control-feedback'
15383 combobox.cn.push(feedback);
15390 cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
15391 tooltip : 'This field is required'
15393 if (Roo.bootstrap.version == 4) {
15396 style : 'display:none'
15399 if (align ==='left' && this.fieldLabel.length) {
15401 cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
15408 cls : 'control-label col-form-label',
15409 html : this.fieldLabel
15421 var labelCfg = cfg.cn[1];
15422 var contentCfg = cfg.cn[2];
15425 if(this.indicatorpos == 'right'){
15431 cls : 'control-label col-form-label',
15435 html : this.fieldLabel
15451 labelCfg = cfg.cn[0];
15452 contentCfg = cfg.cn[1];
15456 if(this.labelWidth > 12){
15457 labelCfg.style = "width: " + this.labelWidth + 'px';
15459 if(this.width * 1 > 0){
15460 contentCfg.style = "width: " + this.width + 'px';
15462 if(this.labelWidth < 13 && this.labelmd == 0){
15463 this.labelmd = this.labelWidth;
15466 if(this.labellg > 0){
15467 labelCfg.cls += ' col-lg-' + this.labellg;
15468 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
15471 if(this.labelmd > 0){
15472 labelCfg.cls += ' col-md-' + this.labelmd;
15473 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
15476 if(this.labelsm > 0){
15477 labelCfg.cls += ' col-sm-' + this.labelsm;
15478 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
15481 if(this.labelxs > 0){
15482 labelCfg.cls += ' col-xs-' + this.labelxs;
15483 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
15487 } else if ( this.fieldLabel.length) {
15488 // Roo.log(" label");
15493 //cls : 'input-group-addon',
15494 html : this.fieldLabel
15499 if(this.indicatorpos == 'right'){
15503 //cls : 'input-group-addon',
15504 html : this.fieldLabel
15514 // Roo.log(" no label && no align");
15521 ['xs','sm','md','lg'].map(function(size){
15522 if (settings[size]) {
15523 cfg.cls += ' col-' + size + '-' + settings[size];
15531 _initEventsCalled : false,
15534 initEvents: function()
15536 if (this._initEventsCalled) { // as we call render... prevent looping...
15539 this._initEventsCalled = true;
15542 throw "can not find store for combo";
15545 this.indicator = this.indicatorEl();
15547 this.store = Roo.factory(this.store, Roo.data);
15548 this.store.parent = this;
15550 // if we are building from html. then this element is so complex, that we can not really
15551 // use the rendered HTML.
15552 // so we have to trash and replace the previous code.
15553 if (Roo.XComponent.build_from_html) {
15554 // remove this element....
15555 var e = this.el.dom, k=0;
15556 while (e ) { e = e.previousSibling; ++k;}
15561 this.rendered = false;
15563 this.render(this.parent().getChildContainer(true), k);
15566 if(Roo.isIOS && this.useNativeIOS){
15567 this.initIOSView();
15575 if(Roo.isTouch && this.mobileTouchView){
15576 this.initTouchView();
15581 this.initTickableEvents();
15585 Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
15587 if(this.hiddenName){
15589 this.hiddenField = this.el.select('input.form-hidden-field',true).first();
15591 this.hiddenField.dom.value =
15592 this.hiddenValue !== undefined ? this.hiddenValue :
15593 this.value !== undefined ? this.value : '';
15595 // prevent input submission
15596 this.el.dom.removeAttribute('name');
15597 this.hiddenField.dom.setAttribute('name', this.hiddenName);
15602 // this.el.dom.setAttribute('autocomplete', 'off');
15605 var cls = 'x-combo-list';
15607 //this.list = new Roo.Layer({
15608 // shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
15614 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
15615 _this.list.setWidth(lw);
15618 this.list.on('mouseover', this.onViewOver, this);
15619 this.list.on('mousemove', this.onViewMove, this);
15620 this.list.on('scroll', this.onViewScroll, this);
15623 this.list.swallowEvent('mousewheel');
15624 this.assetHeight = 0;
15627 this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
15628 this.assetHeight += this.header.getHeight();
15631 this.innerList = this.list.createChild({cls:cls+'-inner'});
15632 this.innerList.on('mouseover', this.onViewOver, this);
15633 this.innerList.on('mousemove', this.onViewMove, this);
15634 this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
15636 if(this.allowBlank && !this.pageSize && !this.disableClear){
15637 this.footer = this.list.createChild({cls:cls+'-ft'});
15638 this.pageTb = new Roo.Toolbar(this.footer);
15642 this.footer = this.list.createChild({cls:cls+'-ft'});
15643 this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
15644 {pageSize: this.pageSize});
15648 if (this.pageTb && this.allowBlank && !this.disableClear) {
15650 this.pageTb.add(new Roo.Toolbar.Fill(), {
15651 cls: 'x-btn-icon x-btn-clear',
15653 handler: function()
15656 _this.clearValue();
15657 _this.onSelect(false, -1);
15662 this.assetHeight += this.footer.getHeight();
15667 this.tpl = Roo.bootstrap.version == 4 ?
15668 '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' : // 4 does not need <li> and it get's really confisued.
15669 '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
15672 this.view = new Roo.View(this.list, this.tpl, {
15673 singleSelect:true, store: this.store, selectedClass: this.selectedClass
15675 //this.view.wrapEl.setDisplayed(false);
15676 this.view.on('click', this.onViewClick, this);
15679 this.store.on('beforeload', this.onBeforeLoad, this);
15680 this.store.on('load', this.onLoad, this);
15681 this.store.on('loadexception', this.onLoadException, this);
15683 if(this.resizable){
15684 this.resizer = new Roo.Resizable(this.list, {
15685 pinned:true, handles:'se'
15687 this.resizer.on('resize', function(r, w, h){
15688 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
15689 this.listWidth = w;
15690 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
15691 this.restrictHeight();
15693 this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
15696 if(!this.editable){
15697 this.editable = true;
15698 this.setEditable(false);
15703 if (typeof(this.events.add.listeners) != 'undefined') {
15705 this.addicon = this.wrap.createChild(
15706 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
15708 this.addicon.on('click', function(e) {
15709 this.fireEvent('add', this);
15712 if (typeof(this.events.edit.listeners) != 'undefined') {
15714 this.editicon = this.wrap.createChild(
15715 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
15716 if (this.addicon) {
15717 this.editicon.setStyle('margin-left', '40px');
15719 this.editicon.on('click', function(e) {
15721 // we fire even if inothing is selected..
15722 this.fireEvent('edit', this, this.lastData );
15728 this.keyNav = new Roo.KeyNav(this.inputEl(), {
15729 "up" : function(e){
15730 this.inKeyMode = true;
15734 "down" : function(e){
15735 if(!this.isExpanded()){
15736 this.onTriggerClick();
15738 this.inKeyMode = true;
15743 "enter" : function(e){
15744 // this.onViewClick();
15748 if(this.fireEvent("specialkey", this, e)){
15749 this.onViewClick(false);
15755 "esc" : function(e){
15759 "tab" : function(e){
15762 if(this.fireEvent("specialkey", this, e)){
15763 this.onViewClick(false);
15771 doRelay : function(foo, bar, hname){
15772 if(hname == 'down' || this.scope.isExpanded()){
15773 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
15782 this.queryDelay = Math.max(this.queryDelay || 10,
15783 this.mode == 'local' ? 10 : 250);
15786 this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
15788 if(this.typeAhead){
15789 this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
15791 if(this.editable !== false){
15792 this.inputEl().on("keyup", this.onKeyUp, this);
15794 if(this.forceSelection){
15795 this.inputEl().on('blur', this.doForce, this);
15799 this.choices = this.el.select('ul.roo-select2-choices', true).first();
15800 this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
15804 initTickableEvents: function()
15808 if(this.hiddenName){
15810 this.hiddenField = this.el.select('input.form-hidden-field',true).first();
15812 this.hiddenField.dom.value =
15813 this.hiddenValue !== undefined ? this.hiddenValue :
15814 this.value !== undefined ? this.value : '';
15816 // prevent input submission
15817 this.el.dom.removeAttribute('name');
15818 this.hiddenField.dom.setAttribute('name', this.hiddenName);
15823 // this.list = this.el.select('ul.dropdown-menu',true).first();
15825 this.choices = this.el.select('ul.roo-select2-choices', true).first();
15826 this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
15827 if(this.triggerList){
15828 this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
15831 this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
15832 this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
15834 this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
15835 this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
15837 this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
15838 this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
15840 this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
15841 this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
15842 this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
15845 this.cancelBtn.hide();
15850 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
15851 _this.list.setWidth(lw);
15854 this.list.on('mouseover', this.onViewOver, this);
15855 this.list.on('mousemove', this.onViewMove, this);
15857 this.list.on('scroll', this.onViewScroll, this);
15860 this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}"' +
15861 'type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
15864 this.view = new Roo.View(this.list, this.tpl, {
15869 selectedClass: this.selectedClass
15872 //this.view.wrapEl.setDisplayed(false);
15873 this.view.on('click', this.onViewClick, this);
15877 this.store.on('beforeload', this.onBeforeLoad, this);
15878 this.store.on('load', this.onLoad, this);
15879 this.store.on('loadexception', this.onLoadException, this);
15882 this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
15883 "up" : function(e){
15884 this.inKeyMode = true;
15888 "down" : function(e){
15889 this.inKeyMode = true;
15893 "enter" : function(e){
15894 if(this.fireEvent("specialkey", this, e)){
15895 this.onViewClick(false);
15901 "esc" : function(e){
15902 this.onTickableFooterButtonClick(e, false, false);
15905 "tab" : function(e){
15906 this.fireEvent("specialkey", this, e);
15908 this.onTickableFooterButtonClick(e, false, false);
15915 doRelay : function(e, fn, key){
15916 if(this.scope.isExpanded()){
15917 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
15926 this.queryDelay = Math.max(this.queryDelay || 10,
15927 this.mode == 'local' ? 10 : 250);
15930 this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
15932 if(this.typeAhead){
15933 this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
15936 if(this.editable !== false){
15937 this.tickableInputEl().on("keyup", this.onKeyUp, this);
15940 this.indicator = this.indicatorEl();
15942 if(this.indicator){
15943 this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
15944 this.indicator.hide();
15949 onDestroy : function(){
15951 this.view.setStore(null);
15952 this.view.el.removeAllListeners();
15953 this.view.el.remove();
15954 this.view.purgeListeners();
15957 this.list.dom.innerHTML = '';
15961 this.store.un('beforeload', this.onBeforeLoad, this);
15962 this.store.un('load', this.onLoad, this);
15963 this.store.un('loadexception', this.onLoadException, this);
15965 Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
15969 fireKey : function(e){
15970 if(e.isNavKeyPress() && !this.list.isVisible()){
15971 this.fireEvent("specialkey", this, e);
15976 onResize: function(w, h)
15980 // Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
15982 // if(typeof w != 'number'){
15983 // // we do not handle it!?!?
15986 // var tw = this.trigger.getWidth();
15987 // // tw += this.addicon ? this.addicon.getWidth() : 0;
15988 // // tw += this.editicon ? this.editicon.getWidth() : 0;
15990 // this.inputEl().setWidth( this.adjustWidth('input', x));
15992 // //this.trigger.setStyle('left', x+'px');
15994 // if(this.list && this.listWidth === undefined){
15995 // var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
15996 // this.list.setWidth(lw);
15997 // this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
16005 * Allow or prevent the user from directly editing the field text. If false is passed,
16006 * the user will only be able to select from the items defined in the dropdown list. This method
16007 * is the runtime equivalent of setting the 'editable' config option at config time.
16008 * @param {Boolean} value True to allow the user to directly edit the field text
16010 setEditable : function(value){
16011 if(value == this.editable){
16014 this.editable = value;
16016 this.inputEl().dom.setAttribute('readOnly', true);
16017 this.inputEl().on('mousedown', this.onTriggerClick, this);
16018 this.inputEl().addClass('x-combo-noedit');
16020 this.inputEl().dom.setAttribute('readOnly', false);
16021 this.inputEl().un('mousedown', this.onTriggerClick, this);
16022 this.inputEl().removeClass('x-combo-noedit');
16028 onBeforeLoad : function(combo,opts){
16029 if(!this.hasFocus){
16033 this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
16035 this.restrictHeight();
16036 this.selectedIndex = -1;
16040 onLoad : function(){
16042 this.hasQuery = false;
16044 if(!this.hasFocus){
16048 if(typeof(this.loading) !== 'undefined' && this.loading !== null){
16049 this.loading.hide();
16052 if(this.store.getCount() > 0){
16055 this.restrictHeight();
16056 if(this.lastQuery == this.allQuery){
16057 if(this.editable && !this.tickable){
16058 this.inputEl().dom.select();
16062 !this.selectByValue(this.value, true) &&
16065 !this.store.lastOptions ||
16066 typeof(this.store.lastOptions.add) == 'undefined' ||
16067 this.store.lastOptions.add != true
16070 this.select(0, true);
16073 if(this.autoFocus){
16076 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
16077 this.taTask.delay(this.typeAheadDelay);
16081 this.onEmptyResults();
16087 onLoadException : function()
16089 this.hasQuery = false;
16091 if(typeof(this.loading) !== 'undefined' && this.loading !== null){
16092 this.loading.hide();
16095 if(this.tickable && this.editable){
16100 // only causes errors at present
16101 //Roo.log(this.store.reader.jsonData);
16102 //if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
16104 //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
16110 onTypeAhead : function(){
16111 if(this.store.getCount() > 0){
16112 var r = this.store.getAt(0);
16113 var newValue = r.data[this.displayField];
16114 var len = newValue.length;
16115 var selStart = this.getRawValue().length;
16117 if(selStart != len){
16118 this.setRawValue(newValue);
16119 this.selectText(selStart, newValue.length);
16125 onSelect : function(record, index){
16127 if(this.fireEvent('beforeselect', this, record, index) !== false){
16129 this.setFromData(index > -1 ? record.data : false);
16132 this.fireEvent('select', this, record, index);
16137 * Returns the currently selected field value or empty string if no value is set.
16138 * @return {String} value The selected value
16140 getValue : function()
16142 if(Roo.isIOS && this.useNativeIOS){
16143 return this.ios_options[this.inputEl().dom.selectedIndex].data[this.valueField];
16147 return (this.hiddenField) ? this.hiddenField.dom.value : this.value;
16150 if(this.valueField){
16151 return typeof this.value != 'undefined' ? this.value : '';
16153 return Roo.bootstrap.ComboBox.superclass.getValue.call(this);
16157 getRawValue : function()
16159 if(Roo.isIOS && this.useNativeIOS){
16160 return this.ios_options[this.inputEl().dom.selectedIndex].data[this.displayField];
16163 var v = this.inputEl().getValue();
16169 * Clears any text/value currently set in the field
16171 clearValue : function(){
16173 if(this.hiddenField){
16174 this.hiddenField.dom.value = '';
16177 this.setRawValue('');
16178 this.lastSelectionText = '';
16179 this.lastData = false;
16181 var close = this.closeTriggerEl();
16192 * Sets the specified value into the field. If the value finds a match, the corresponding record text
16193 * will be displayed in the field. If the value does not match the data value of an existing item,
16194 * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
16195 * Otherwise the field will be blank (although the value will still be set).
16196 * @param {String} value The value to match
16198 setValue : function(v)
16200 if(Roo.isIOS && this.useNativeIOS){
16201 this.setIOSValue(v);
16211 if(this.valueField){
16212 var r = this.findRecord(this.valueField, v);
16214 text = r.data[this.displayField];
16215 }else if(this.valueNotFoundText !== undefined){
16216 text = this.valueNotFoundText;
16219 this.lastSelectionText = text;
16220 if(this.hiddenField){
16221 this.hiddenField.dom.value = v;
16223 Roo.bootstrap.ComboBox.superclass.setValue.call(this, text);
16226 var close = this.closeTriggerEl();
16229 (v && (v.length || v * 1 > 0)) ? close.show() : close.hide();
16235 * @property {Object} the last set data for the element
16240 * Sets the value of the field based on a object which is related to the record format for the store.
16241 * @param {Object} value the value to set as. or false on reset?
16243 setFromData : function(o){
16250 var dv = ''; // display value
16251 var vv = ''; // value value..
16253 if (this.displayField) {
16254 dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
16256 // this is an error condition!!!
16257 Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
16260 if(this.valueField){
16261 vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
16264 var close = this.closeTriggerEl();
16267 if(dv.length || vv * 1 > 0){
16269 this.blockFocus=true;
16275 if(this.hiddenField){
16276 this.hiddenField.dom.value = vv;
16278 this.lastSelectionText = dv;
16279 Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
16283 // no hidden field.. - we store the value in 'value', but still display
16284 // display field!!!!
16285 this.lastSelectionText = dv;
16286 Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
16293 reset : function(){
16294 // overridden so that last data is reset..
16301 this.setValue(this.originalValue);
16302 //this.clearInvalid();
16303 this.lastData = false;
16305 this.view.clearSelections();
16311 findRecord : function(prop, value){
16313 if(this.store.getCount() > 0){
16314 this.store.each(function(r){
16315 if(r.data[prop] == value){
16325 getName: function()
16327 // returns hidden if it's set..
16328 if (!this.rendered) {return ''};
16329 return !this.hiddenName && this.inputEl().dom.name ? this.inputEl().dom.name : (this.hiddenName || '');
16333 onViewMove : function(e, t){
16334 this.inKeyMode = false;
16338 onViewOver : function(e, t){
16339 if(this.inKeyMode){ // prevent key nav and mouse over conflicts
16342 var item = this.view.findItemFromChild(t);
16345 var index = this.view.indexOf(item);
16346 this.select(index, false);
16351 onViewClick : function(view, doFocus, el, e)
16353 var index = this.view.getSelectedIndexes()[0];
16355 var r = this.store.getAt(index);
16359 if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
16366 Roo.each(this.tickItems, function(v,k){
16368 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
16370 _this.tickItems.splice(k, 1);
16372 if(typeof(e) == 'undefined' && view == false){
16373 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
16385 if(this.fireEvent('tick', this, r, index, Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked) !== false){
16386 this.tickItems.push(r.data);
16389 if(typeof(e) == 'undefined' && view == false){
16390 Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
16397 this.onSelect(r, index);
16399 if(doFocus !== false && !this.blockFocus){
16400 this.inputEl().focus();
16405 restrictHeight : function(){
16406 //this.innerList.dom.style.height = '';
16407 //var inner = this.innerList.dom;
16408 //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
16409 //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
16410 //this.list.beginUpdate();
16411 //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
16412 this.list.alignTo(this.inputEl(), this.listAlign);
16413 this.list.alignTo(this.inputEl(), this.listAlign);
16414 //this.list.endUpdate();
16418 onEmptyResults : function(){
16420 if(this.tickable && this.editable){
16421 this.hasFocus = false;
16422 this.restrictHeight();
16430 * Returns true if the dropdown list is expanded, else false.
16432 isExpanded : function(){
16433 return this.list.isVisible();
16437 * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
16438 * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
16439 * @param {String} value The data value of the item to select
16440 * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
16441 * selected item if it is not currently in view (defaults to true)
16442 * @return {Boolean} True if the value matched an item in the list, else false
16444 selectByValue : function(v, scrollIntoView){
16445 if(v !== undefined && v !== null){
16446 var r = this.findRecord(this.valueField || this.displayField, v);
16448 this.select(this.store.indexOf(r), scrollIntoView);
16456 * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
16457 * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
16458 * @param {Number} index The zero-based index of the list item to select
16459 * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
16460 * selected item if it is not currently in view (defaults to true)
16462 select : function(index, scrollIntoView){
16463 this.selectedIndex = index;
16464 this.view.select(index);
16465 if(scrollIntoView !== false){
16466 var el = this.view.getNode(index);
16468 * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
16471 this.list.scrollChildIntoView(el, false);
16477 selectNext : function(){
16478 var ct = this.store.getCount();
16480 if(this.selectedIndex == -1){
16482 }else if(this.selectedIndex < ct-1){
16483 this.select(this.selectedIndex+1);
16489 selectPrev : function(){
16490 var ct = this.store.getCount();
16492 if(this.selectedIndex == -1){
16494 }else if(this.selectedIndex != 0){
16495 this.select(this.selectedIndex-1);
16501 onKeyUp : function(e){
16502 if(this.editable !== false && !e.isSpecialKey()){
16503 this.lastKey = e.getKey();
16504 this.dqTask.delay(this.queryDelay);
16509 validateBlur : function(){
16510 return !this.list || !this.list.isVisible();
16514 initQuery : function(){
16516 var v = this.getRawValue();
16518 if(this.tickable && this.editable){
16519 v = this.tickableInputEl().getValue();
16526 doForce : function(){
16527 if(this.inputEl().dom.value.length > 0){
16528 this.inputEl().dom.value =
16529 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
16535 * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
16536 * query allowing the query action to be canceled if needed.
16537 * @param {String} query The SQL query to execute
16538 * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
16539 * in the field than the minimum specified by the minChars config option. It also clears any filter previously
16540 * saved in the current store (defaults to false)
16542 doQuery : function(q, forceAll){
16544 if(q === undefined || q === null){
16549 forceAll: forceAll,
16553 if(this.fireEvent('beforequery', qe)===false || qe.cancel){
16558 forceAll = qe.forceAll;
16559 if(forceAll === true || (q.length >= this.minChars)){
16561 this.hasQuery = true;
16563 if(this.lastQuery != q || this.alwaysQuery){
16564 this.lastQuery = q;
16565 if(this.mode == 'local'){
16566 this.selectedIndex = -1;
16568 this.store.clearFilter();
16571 if(this.specialFilter){
16572 this.fireEvent('specialfilter', this);
16577 this.store.filter(this.displayField, q);
16580 this.store.fireEvent("datachanged", this.store);
16587 this.store.baseParams[this.queryParam] = q;
16589 var options = {params : this.getParams(q)};
16592 options.add = true;
16593 options.params.start = this.page * this.pageSize;
16596 this.store.load(options);
16599 * this code will make the page width larger, at the beginning, the list not align correctly,
16600 * we should expand the list on onLoad
16601 * so command out it
16606 this.selectedIndex = -1;
16611 this.loadNext = false;
16615 getParams : function(q){
16617 //p[this.queryParam] = q;
16621 p.limit = this.pageSize;
16627 * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
16629 collapse : function(){
16630 if(!this.isExpanded()){
16636 this.hasFocus = false;
16640 this.cancelBtn.hide();
16641 this.trigger.show();
16644 this.tickableInputEl().dom.value = '';
16645 this.tickableInputEl().blur();
16650 Roo.get(document).un('mousedown', this.collapseIf, this);
16651 Roo.get(document).un('mousewheel', this.collapseIf, this);
16652 if (!this.editable) {
16653 Roo.get(document).un('keydown', this.listKeyPress, this);
16655 this.fireEvent('collapse', this);
16661 collapseIf : function(e){
16662 var in_combo = e.within(this.el);
16663 var in_list = e.within(this.list);
16664 var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
16666 if (in_combo || in_list || is_list) {
16667 //e.stopPropagation();
16672 this.onTickableFooterButtonClick(e, false, false);
16680 * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
16682 expand : function(){
16684 if(this.isExpanded() || !this.hasFocus){
16688 var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
16689 this.list.setWidth(lw);
16695 this.restrictHeight();
16699 this.tickItems = Roo.apply([], this.item);
16702 this.cancelBtn.show();
16703 this.trigger.hide();
16706 this.tickableInputEl().focus();
16711 Roo.get(document).on('mousedown', this.collapseIf, this);
16712 Roo.get(document).on('mousewheel', this.collapseIf, this);
16713 if (!this.editable) {
16714 Roo.get(document).on('keydown', this.listKeyPress, this);
16717 this.fireEvent('expand', this);
16721 // Implements the default empty TriggerField.onTriggerClick function
16722 onTriggerClick : function(e)
16724 Roo.log('trigger click');
16726 if(this.disabled || !this.triggerList){
16731 this.loadNext = false;
16733 if(this.isExpanded()){
16735 if (!this.blockFocus) {
16736 this.inputEl().focus();
16740 this.hasFocus = true;
16741 if(this.triggerAction == 'all') {
16742 this.doQuery(this.allQuery, true);
16744 this.doQuery(this.getRawValue());
16746 if (!this.blockFocus) {
16747 this.inputEl().focus();
16752 onTickableTriggerClick : function(e)
16759 this.loadNext = false;
16760 this.hasFocus = true;
16762 if(this.triggerAction == 'all') {
16763 this.doQuery(this.allQuery, true);
16765 this.doQuery(this.getRawValue());
16769 onSearchFieldClick : function(e)
16771 if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
16772 this.onTickableFooterButtonClick(e, false, false);
16776 if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
16781 this.loadNext = false;
16782 this.hasFocus = true;
16784 if(this.triggerAction == 'all') {
16785 this.doQuery(this.allQuery, true);
16787 this.doQuery(this.getRawValue());
16791 listKeyPress : function(e)
16793 //Roo.log('listkeypress');
16794 // scroll to first matching element based on key pres..
16795 if (e.isSpecialKey()) {
16798 var k = String.fromCharCode(e.getKey()).toUpperCase();
16801 var csel = this.view.getSelectedNodes();
16802 var cselitem = false;
16804 var ix = this.view.indexOf(csel[0]);
16805 cselitem = this.store.getAt(ix);
16806 if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
16812 this.store.each(function(v) {
16814 // start at existing selection.
16815 if (cselitem.id == v.id) {
16821 if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
16822 match = this.store.indexOf(v);
16828 if (match === false) {
16829 return true; // no more action?
16832 this.view.select(match);
16833 var sn = Roo.get(this.view.getSelectedNodes()[0]);
16834 sn.scrollIntoView(sn.dom.parentNode, false);
16837 onViewScroll : function(e, t){
16839 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){
16843 this.hasQuery = true;
16845 this.loading = this.list.select('.loading', true).first();
16847 if(this.loading === null){
16848 this.list.createChild({
16850 cls: 'loading roo-select2-more-results roo-select2-active',
16851 html: 'Loading more results...'
16854 this.loading = this.list.select('.loading', true).first();
16856 this.loading.setVisibilityMode(Roo.Element.DISPLAY);
16858 this.loading.hide();
16861 this.loading.show();
16866 this.loadNext = true;
16868 (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
16873 addItem : function(o)
16875 var dv = ''; // display value
16877 if (this.displayField) {
16878 dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
16880 // this is an error condition!!!
16881 Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
16888 var choice = this.choices.createChild({
16890 cls: 'roo-select2-search-choice',
16899 cls: 'roo-select2-search-choice-close fa fa-times',
16904 }, this.searchField);
16906 var close = choice.select('a.roo-select2-search-choice-close', true).first();
16908 close.on('click', this.onRemoveItem, this, { item : choice, data : o} );
16916 this.inputEl().dom.value = '';
16921 onRemoveItem : function(e, _self, o)
16923 e.preventDefault();
16925 this.lastItem = Roo.apply([], this.item);
16927 var index = this.item.indexOf(o.data) * 1;
16930 Roo.log('not this item?!');
16934 this.item.splice(index, 1);
16939 this.fireEvent('remove', this, e);
16945 syncValue : function()
16947 if(!this.item.length){
16954 Roo.each(this.item, function(i){
16955 if(_this.valueField){
16956 value.push(i[_this.valueField]);
16963 this.value = value.join(',');
16965 if(this.hiddenField){
16966 this.hiddenField.dom.value = this.value;
16969 this.store.fireEvent("datachanged", this.store);
16974 clearItem : function()
16976 if(!this.multiple){
16982 Roo.each(this.choices.select('>li.roo-select2-search-choice', true).elements, function(c){
16990 if(this.tickable && !Roo.isTouch){
16991 this.view.refresh();
16995 inputEl: function ()
16997 if(Roo.isIOS && this.useNativeIOS){
16998 return this.el.select('select.roo-ios-select', true).first();
17001 if(Roo.isTouch && this.mobileTouchView){
17002 return this.el.select('input.form-control',true).first();
17006 return this.searchField;
17009 return this.el.select('input.form-control',true).first();
17012 onTickableFooterButtonClick : function(e, btn, el)
17014 e.preventDefault();
17016 this.lastItem = Roo.apply([], this.item);
17018 if(btn && btn.name == 'cancel'){
17019 this.tickItems = Roo.apply([], this.item);
17028 Roo.each(this.tickItems, function(o){
17036 validate : function()
17038 if(this.getVisibilityEl().hasClass('hidden')){
17042 var v = this.getRawValue();
17045 v = this.getValue();
17048 if(this.disabled || this.allowBlank || v.length){
17053 this.markInvalid();
17057 tickableInputEl : function()
17059 if(!this.tickable || !this.editable){
17060 return this.inputEl();
17063 return this.inputEl().select('.roo-select2-search-field-input', true).first();
17067 getAutoCreateTouchView : function()
17072 cls: 'form-group' //input-group
17078 type : this.inputType,
17079 cls : 'form-control x-combo-noedit',
17080 autocomplete: 'new-password',
17081 placeholder : this.placeholder || '',
17086 input.name = this.name;
17090 input.cls += ' input-' + this.size;
17093 if (this.disabled) {
17094 input.disabled = true;
17098 cls : 'roo-combobox-wrap',
17105 inputblock.cls += ' input-group';
17107 inputblock.cn.unshift({
17109 cls : 'input-group-addon input-group-prepend input-group-text',
17114 if(this.removable && !this.multiple){
17115 inputblock.cls += ' roo-removable';
17117 inputblock.cn.push({
17120 cls : 'roo-combo-removable-btn close'
17124 if(this.hasFeedback && !this.allowBlank){
17126 inputblock.cls += ' has-feedback';
17128 inputblock.cn.push({
17130 cls: 'glyphicon form-control-feedback'
17137 inputblock.cls += (this.before) ? '' : ' input-group';
17139 inputblock.cn.push({
17141 cls : 'input-group-addon input-group-append input-group-text',
17147 var ibwrap = inputblock;
17152 cls: 'roo-select2-choices',
17156 cls: 'roo-select2-search-field',
17169 cls: 'roo-select2-container input-group roo-touchview-combobox ',
17174 cls: 'form-hidden-field'
17180 if(!this.multiple && this.showToggleBtn){
17186 if (this.caret != false) {
17189 cls: 'fa fa-' + this.caret
17196 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
17198 Roo.bootstrap.version == 3 ? caret : '',
17201 cls: 'combobox-clear',
17215 combobox.cls += ' roo-select2-container-multi';
17218 var align = this.labelAlign || this.parentLabelAlign();
17220 if (align ==='left' && this.fieldLabel.length) {
17225 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
17226 tooltip : 'This field is required'
17230 cls : 'control-label col-form-label',
17231 html : this.fieldLabel
17235 cls : 'roo-combobox-wrap ',
17242 var labelCfg = cfg.cn[1];
17243 var contentCfg = cfg.cn[2];
17246 if(this.indicatorpos == 'right'){
17251 cls : 'control-label col-form-label',
17255 html : this.fieldLabel
17259 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
17260 tooltip : 'This field is required'
17265 cls : "roo-combobox-wrap ",
17273 labelCfg = cfg.cn[0];
17274 contentCfg = cfg.cn[1];
17279 if(this.labelWidth > 12){
17280 labelCfg.style = "width: " + this.labelWidth + 'px';
17283 if(this.labelWidth < 13 && this.labelmd == 0){
17284 this.labelmd = this.labelWidth;
17287 if(this.labellg > 0){
17288 labelCfg.cls += ' col-lg-' + this.labellg;
17289 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
17292 if(this.labelmd > 0){
17293 labelCfg.cls += ' col-md-' + this.labelmd;
17294 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
17297 if(this.labelsm > 0){
17298 labelCfg.cls += ' col-sm-' + this.labelsm;
17299 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
17302 if(this.labelxs > 0){
17303 labelCfg.cls += ' col-xs-' + this.labelxs;
17304 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
17308 } else if ( this.fieldLabel.length) {
17312 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
17313 tooltip : 'This field is required'
17317 cls : 'control-label',
17318 html : this.fieldLabel
17329 if(this.indicatorpos == 'right'){
17333 cls : 'control-label',
17334 html : this.fieldLabel,
17338 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
17339 tooltip : 'This field is required'
17356 var settings = this;
17358 ['xs','sm','md','lg'].map(function(size){
17359 if (settings[size]) {
17360 cfg.cls += ' col-' + size + '-' + settings[size];
17367 initTouchView : function()
17369 this.renderTouchView();
17371 this.touchViewEl.on('scroll', function(){
17372 this.el.dom.scrollTop = 0;
17375 this.originalValue = this.getValue();
17377 this.triggerEl = this.el.select('span.dropdown-toggle',true).first();
17379 this.inputEl().on("click", this.showTouchView, this);
17380 if (this.triggerEl) {
17381 this.triggerEl.on("click", this.showTouchView, this);
17385 this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this);
17386 this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this);
17388 this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' });
17390 this.store.on('beforeload', this.onTouchViewBeforeLoad, this);
17391 this.store.on('load', this.onTouchViewLoad, this);
17392 this.store.on('loadexception', this.onTouchViewLoadException, this);
17394 if(this.hiddenName){
17396 this.hiddenField = this.el.select('input.form-hidden-field',true).first();
17398 this.hiddenField.dom.value =
17399 this.hiddenValue !== undefined ? this.hiddenValue :
17400 this.value !== undefined ? this.value : '';
17402 this.el.dom.removeAttribute('name');
17403 this.hiddenField.dom.setAttribute('name', this.hiddenName);
17407 this.choices = this.el.select('ul.roo-select2-choices', true).first();
17408 this.searchField = this.el.select('ul li.roo-select2-search-field', true).first();
17411 if(this.removable && !this.multiple){
17412 var close = this.closeTriggerEl();
17414 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
17415 close.on('click', this.removeBtnClick, this, close);
17419 * fix the bug in Safari iOS8
17421 this.inputEl().on("focus", function(e){
17422 document.activeElement.blur();
17425 this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
17432 renderTouchView : function()
17434 this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.ComboBox.touchViewTemplate);
17435 this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
17437 this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
17438 this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
17440 this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first();
17441 this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
17442 this.touchViewBodyEl.setStyle('overflow', 'auto');
17444 this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first();
17445 this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
17447 this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first();
17448 this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
17452 showTouchView : function()
17458 this.touchViewHeaderEl.hide();
17460 if(this.modalTitle.length){
17461 this.touchViewHeaderEl.dom.innerHTML = this.modalTitle;
17462 this.touchViewHeaderEl.show();
17465 this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
17466 this.touchViewEl.show();
17468 this.touchViewEl.select('.modal-dialog', true).first().setStyle({ margin : '0px', width : '100%'});
17470 //this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize(
17471 // Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
17473 var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
17475 if(this.modalTitle.length){
17476 bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
17479 this.touchViewBodyEl.setHeight(bodyHeight);
17483 (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
17485 this.touchViewEl.addClass(['in','show']);
17488 if(this._touchViewMask){
17489 Roo.get(document.body).addClass("x-body-masked");
17490 this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
17491 this._touchViewMask.setStyle('z-index', 10000);
17492 this._touchViewMask.addClass('show');
17495 this.doTouchViewQuery();
17499 hideTouchView : function()
17501 this.touchViewEl.removeClass(['in','show']);
17505 (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150);
17507 this.touchViewEl.setStyle('display', 'none');
17510 if(this._touchViewMask){
17511 this._touchViewMask.removeClass('show');
17512 Roo.get(document.body).removeClass("x-body-masked");
17516 setTouchViewValue : function()
17523 Roo.each(this.tickItems, function(o){
17528 this.hideTouchView();
17531 doTouchViewQuery : function()
17540 if(this.fireEvent('beforequery', qe) ===false || qe.cancel){
17544 if(!this.alwaysQuery || this.mode == 'local'){
17545 this.onTouchViewLoad();
17552 onTouchViewBeforeLoad : function(combo,opts)
17558 onTouchViewLoad : function()
17560 if(this.store.getCount() < 1){
17561 this.onTouchViewEmptyResults();
17565 this.clearTouchView();
17567 var rawValue = this.getRawValue();
17569 var template = (this.multiple) ? Roo.bootstrap.ComboBox.listItemCheckbox : Roo.bootstrap.ComboBox.listItemRadio;
17571 this.tickItems = [];
17573 this.store.data.each(function(d, rowIndex){
17574 var row = this.touchViewListGroup.createChild(template);
17576 if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){
17577 row.addClass(d.data.cls);
17580 if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
17583 html : d.data[this.displayField]
17586 if(this.fireEvent('touchviewdisplay', this, cfg) !== false){
17587 row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html;
17590 row.removeClass('selected');
17591 if(!this.multiple && this.valueField &&
17592 typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue())
17595 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
17596 row.addClass('selected');
17599 if(this.multiple && this.valueField &&
17600 typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1)
17604 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
17605 this.tickItems.push(d.data);
17608 row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex});
17612 var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first();
17614 var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb');
17616 if(this.modalTitle.length){
17617 bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
17620 var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2;
17622 if(this.mobile_restrict_height && listHeight < bodyHeight){
17623 this.touchViewBodyEl.setHeight(listHeight);
17628 if(firstChecked && listHeight > bodyHeight){
17629 (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500);
17634 onTouchViewLoadException : function()
17636 this.hideTouchView();
17639 onTouchViewEmptyResults : function()
17641 this.clearTouchView();
17643 this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult);
17645 this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
17649 clearTouchView : function()
17651 this.touchViewListGroup.dom.innerHTML = '';
17654 onTouchViewClick : function(e, el, o)
17656 e.preventDefault();
17659 var rowIndex = o.rowIndex;
17661 var r = this.store.getAt(rowIndex);
17663 if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){
17665 if(!this.multiple){
17666 Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
17667 c.dom.removeAttribute('checked');
17670 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
17672 this.setFromData(r.data);
17674 var close = this.closeTriggerEl();
17680 this.hideTouchView();
17682 this.fireEvent('select', this, r, rowIndex);
17687 if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
17688 row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
17689 this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
17693 row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
17694 this.addItem(r.data);
17695 this.tickItems.push(r.data);
17699 getAutoCreateNativeIOS : function()
17702 cls: 'form-group' //input-group,
17707 cls : 'roo-ios-select'
17711 combobox.name = this.name;
17714 if (this.disabled) {
17715 combobox.disabled = true;
17718 var settings = this;
17720 ['xs','sm','md','lg'].map(function(size){
17721 if (settings[size]) {
17722 cfg.cls += ' col-' + size + '-' + settings[size];
17732 initIOSView : function()
17734 this.store.on('load', this.onIOSViewLoad, this);
17739 onIOSViewLoad : function()
17741 if(this.store.getCount() < 1){
17745 this.clearIOSView();
17747 if(this.allowBlank) {
17749 var default_text = '-- SELECT --';
17751 if(this.placeholder.length){
17752 default_text = this.placeholder;
17755 if(this.emptyTitle.length){
17756 default_text += ' - ' + this.emptyTitle + ' -';
17759 var opt = this.inputEl().createChild({
17762 html : default_text
17766 o[this.valueField] = 0;
17767 o[this.displayField] = default_text;
17769 this.ios_options.push({
17776 this.store.data.each(function(d, rowIndex){
17780 if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
17781 html = d.data[this.displayField];
17786 if(this.valueField && typeof(d.data[this.valueField]) != 'undefined'){
17787 value = d.data[this.valueField];
17796 if(this.value == d.data[this.valueField]){
17797 option['selected'] = true;
17800 var opt = this.inputEl().createChild(option);
17802 this.ios_options.push({
17809 this.inputEl().on('change', function(){
17810 this.fireEvent('select', this);
17815 clearIOSView: function()
17817 this.inputEl().dom.innerHTML = '';
17819 this.ios_options = [];
17822 setIOSValue: function(v)
17826 if(!this.ios_options){
17830 Roo.each(this.ios_options, function(opts){
17832 opts.el.dom.removeAttribute('selected');
17834 if(opts.data[this.valueField] != v){
17838 opts.el.dom.setAttribute('selected', true);
17844 * @cfg {Boolean} grow
17848 * @cfg {Number} growMin
17852 * @cfg {Number} growMax
17861 Roo.apply(Roo.bootstrap.ComboBox, {
17865 cls: 'modal-header',
17887 cls: 'list-group-item',
17891 cls: 'roo-combobox-list-group-item-value'
17895 cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',
17909 listItemCheckbox : {
17911 cls: 'list-group-item',
17915 cls: 'roo-combobox-list-group-item-value'
17919 cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',
17935 cls: 'alert alert-danger roo-combobox-touch-view-empty-result'
17940 cls: 'modal-footer',
17948 cls: 'col-xs-6 text-left',
17951 cls: 'btn btn-danger roo-touch-view-cancel',
17957 cls: 'col-xs-6 text-right',
17960 cls: 'btn btn-success roo-touch-view-ok',
17971 Roo.apply(Roo.bootstrap.ComboBox, {
17973 touchViewTemplate : {
17975 cls: 'modal fade roo-combobox-touch-view',
17979 cls: 'modal-dialog',
17980 style : 'position:fixed', // we have to fix position....
17984 cls: 'modal-content',
17986 Roo.bootstrap.ComboBox.header,
17987 Roo.bootstrap.ComboBox.body,
17988 Roo.bootstrap.ComboBox.footer
17997 * Ext JS Library 1.1.1
17998 * Copyright(c) 2006-2007, Ext JS, LLC.
18000 * Originally Released Under LGPL - original licence link has changed is not relivant.
18003 * <script type="text/javascript">
18008 * @extends Roo.util.Observable
18009 * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template.
18010 * This class also supports single and multi selection modes. <br>
18011 * Create a data model bound view:
18013 var store = new Roo.data.Store(...);
18015 var view = new Roo.View({
18017 tpl : '<div id="{0}">{2} - {1}</div>', // auto create template
18019 singleSelect: true,
18020 selectedClass: "ydataview-selected",
18024 // listen for node click?
18025 view.on("click", function(vw, index, node, e){
18026 alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
18030 dataModel.load("foobar.xml");
18032 For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
18034 * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
18035 * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
18037 * Note: old style constructor is still suported (container, template, config)
18040 * Create a new View
18041 * @param {Object} config The config object
18044 Roo.View = function(config, depreciated_tpl, depreciated_config){
18046 this.parent = false;
18048 if (typeof(depreciated_tpl) == 'undefined') {
18049 // new way.. - universal constructor.
18050 Roo.apply(this, config);
18051 this.el = Roo.get(this.el);
18054 this.el = Roo.get(config);
18055 this.tpl = depreciated_tpl;
18056 Roo.apply(this, depreciated_config);
18058 this.wrapEl = this.el.wrap().wrap();
18059 ///this.el = this.wrapEla.appendChild(document.createElement("div"));
18062 if(typeof(this.tpl) == "string"){
18063 this.tpl = new Roo.Template(this.tpl);
18065 // support xtype ctors..
18066 this.tpl = new Roo.factory(this.tpl, Roo);
18070 this.tpl.compile();
18075 * @event beforeclick
18076 * Fires before a click is processed. Returns false to cancel the default action.
18077 * @param {Roo.View} this
18078 * @param {Number} index The index of the target node
18079 * @param {HTMLElement} node The target node
18080 * @param {Roo.EventObject} e The raw event object
18082 "beforeclick" : true,
18085 * Fires when a template node is clicked.
18086 * @param {Roo.View} this
18087 * @param {Number} index The index of the target node
18088 * @param {HTMLElement} node The target node
18089 * @param {Roo.EventObject} e The raw event object
18094 * Fires when a template node is double clicked.
18095 * @param {Roo.View} this
18096 * @param {Number} index The index of the target node
18097 * @param {HTMLElement} node The target node
18098 * @param {Roo.EventObject} e The raw event object
18102 * @event contextmenu
18103 * Fires when a template node is right clicked.
18104 * @param {Roo.View} this
18105 * @param {Number} index The index of the target node
18106 * @param {HTMLElement} node The target node
18107 * @param {Roo.EventObject} e The raw event object
18109 "contextmenu" : true,
18111 * @event selectionchange
18112 * Fires when the selected nodes change.
18113 * @param {Roo.View} this
18114 * @param {Array} selections Array of the selected nodes
18116 "selectionchange" : true,
18119 * @event beforeselect
18120 * Fires before a selection is made. If any handlers return false, the selection is cancelled.
18121 * @param {Roo.View} this
18122 * @param {HTMLElement} node The node to be selected
18123 * @param {Array} selections Array of currently selected nodes
18125 "beforeselect" : true,
18127 * @event preparedata
18128 * Fires on every row to render, to allow you to change the data.
18129 * @param {Roo.View} this
18130 * @param {Object} data to be rendered (change this)
18132 "preparedata" : true
18140 "click": this.onClick,
18141 "dblclick": this.onDblClick,
18142 "contextmenu": this.onContextMenu,
18146 this.selections = [];
18148 this.cmp = new Roo.CompositeElementLite([]);
18150 this.store = Roo.factory(this.store, Roo.data);
18151 this.setStore(this.store, true);
18154 if ( this.footer && this.footer.xtype) {
18156 var fctr = this.wrapEl.appendChild(document.createElement("div"));
18158 this.footer.dataSource = this.store;
18159 this.footer.container = fctr;
18160 this.footer = Roo.factory(this.footer, Roo);
18161 fctr.insertFirst(this.el);
18163 // this is a bit insane - as the paging toolbar seems to detach the el..
18164 // dom.parentNode.parentNode.parentNode
18165 // they get detached?
18169 Roo.View.superclass.constructor.call(this);
18174 Roo.extend(Roo.View, Roo.util.Observable, {
18177 * @cfg {Roo.data.Store} store Data store to load data from.
18182 * @cfg {String|Roo.Element} el The container element.
18187 * @cfg {String|Roo.Template} tpl The template used by this View
18191 * @cfg {String} dataName the named area of the template to use as the data area
18192 * Works with domtemplates roo-name="name"
18196 * @cfg {String} selectedClass The css class to add to selected nodes
18198 selectedClass : "x-view-selected",
18200 * @cfg {String} emptyText The empty text to show when nothing is loaded.
18205 * @cfg {String} text to display on mask (default Loading)
18209 * @cfg {Boolean} multiSelect Allow multiple selection
18211 multiSelect : false,
18213 * @cfg {Boolean} singleSelect Allow single selection
18215 singleSelect: false,
18218 * @cfg {Boolean} toggleSelect - selecting
18220 toggleSelect : false,
18223 * @cfg {Boolean} tickable - selecting
18228 * Returns the element this view is bound to.
18229 * @return {Roo.Element}
18231 getEl : function(){
18232 return this.wrapEl;
18238 * Refreshes the view. - called by datachanged on the store. - do not call directly.
18240 refresh : function(){
18241 //Roo.log('refresh');
18244 // if we are using something like 'domtemplate', then
18245 // the what gets used is:
18246 // t.applySubtemplate(NAME, data, wrapping data..)
18247 // the outer template then get' applied with
18248 // the store 'extra data'
18249 // and the body get's added to the
18250 // roo-name="data" node?
18251 // <span class='roo-tpl-{name}'></span> ?????
18255 this.clearSelections();
18256 this.el.update("");
18258 var records = this.store.getRange();
18259 if(records.length < 1) {
18261 // is this valid?? = should it render a template??
18263 this.el.update(this.emptyText);
18267 if (this.dataName) {
18268 this.el.update(t.apply(this.store.meta)); //????
18269 el = this.el.child('.roo-tpl-' + this.dataName);
18272 for(var i = 0, len = records.length; i < len; i++){
18273 var data = this.prepareData(records[i].data, i, records[i]);
18274 this.fireEvent("preparedata", this, data, i, records[i]);
18276 var d = Roo.apply({}, data);
18279 Roo.apply(d, {'roo-id' : Roo.id()});
18283 Roo.each(this.parent.item, function(item){
18284 if(item[_this.parent.valueField] != data[_this.parent.valueField]){
18287 Roo.apply(d, {'roo-data-checked' : 'checked'});
18291 html[html.length] = Roo.util.Format.trim(
18293 t.applySubtemplate(this.dataName, d, this.store.meta) :
18300 el.update(html.join(""));
18301 this.nodes = el.dom.childNodes;
18302 this.updateIndexes(0);
18307 * Function to override to reformat the data that is sent to
18308 * the template for each node.
18309 * DEPRICATED - use the preparedata event handler.
18310 * @param {Array/Object} data The raw data (array of colData for a data model bound view or
18311 * a JSON object for an UpdateManager bound view).
18313 prepareData : function(data, index, record)
18315 this.fireEvent("preparedata", this, data, index, record);
18319 onUpdate : function(ds, record){
18320 // Roo.log('on update');
18321 this.clearSelections();
18322 var index = this.store.indexOf(record);
18323 var n = this.nodes[index];
18324 this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
18325 n.parentNode.removeChild(n);
18326 this.updateIndexes(index, index);
18332 onAdd : function(ds, records, index)
18334 //Roo.log(['on Add', ds, records, index] );
18335 this.clearSelections();
18336 if(this.nodes.length == 0){
18340 var n = this.nodes[index];
18341 for(var i = 0, len = records.length; i < len; i++){
18342 var d = this.prepareData(records[i].data, i, records[i]);
18344 this.tpl.insertBefore(n, d);
18347 this.tpl.append(this.el, d);
18350 this.updateIndexes(index);
18353 onRemove : function(ds, record, index){
18354 // Roo.log('onRemove');
18355 this.clearSelections();
18356 var el = this.dataName ?
18357 this.el.child('.roo-tpl-' + this.dataName) :
18360 el.dom.removeChild(this.nodes[index]);
18361 this.updateIndexes(index);
18365 * Refresh an individual node.
18366 * @param {Number} index
18368 refreshNode : function(index){
18369 this.onUpdate(this.store, this.store.getAt(index));
18372 updateIndexes : function(startIndex, endIndex){
18373 var ns = this.nodes;
18374 startIndex = startIndex || 0;
18375 endIndex = endIndex || ns.length - 1;
18376 for(var i = startIndex; i <= endIndex; i++){
18377 ns[i].nodeIndex = i;
18382 * Changes the data store this view uses and refresh the view.
18383 * @param {Store} store
18385 setStore : function(store, initial){
18386 if(!initial && this.store){
18387 this.store.un("datachanged", this.refresh);
18388 this.store.un("add", this.onAdd);
18389 this.store.un("remove", this.onRemove);
18390 this.store.un("update", this.onUpdate);
18391 this.store.un("clear", this.refresh);
18392 this.store.un("beforeload", this.onBeforeLoad);
18393 this.store.un("load", this.onLoad);
18394 this.store.un("loadexception", this.onLoad);
18398 store.on("datachanged", this.refresh, this);
18399 store.on("add", this.onAdd, this);
18400 store.on("remove", this.onRemove, this);
18401 store.on("update", this.onUpdate, this);
18402 store.on("clear", this.refresh, this);
18403 store.on("beforeload", this.onBeforeLoad, this);
18404 store.on("load", this.onLoad, this);
18405 store.on("loadexception", this.onLoad, this);
18413 * onbeforeLoad - masks the loading area.
18416 onBeforeLoad : function(store,opts)
18418 //Roo.log('onBeforeLoad');
18420 this.el.update("");
18422 this.el.mask(this.mask ? this.mask : "Loading" );
18424 onLoad : function ()
18431 * Returns the template node the passed child belongs to or null if it doesn't belong to one.
18432 * @param {HTMLElement} node
18433 * @return {HTMLElement} The template node
18435 findItemFromChild : function(node){
18436 var el = this.dataName ?
18437 this.el.child('.roo-tpl-' + this.dataName,true) :
18440 if(!node || node.parentNode == el){
18443 var p = node.parentNode;
18444 while(p && p != el){
18445 if(p.parentNode == el){
18454 onClick : function(e){
18455 var item = this.findItemFromChild(e.getTarget());
18457 var index = this.indexOf(item);
18458 if(this.onItemClick(item, index, e) !== false){
18459 this.fireEvent("click", this, index, item, e);
18462 this.clearSelections();
18467 onContextMenu : function(e){
18468 var item = this.findItemFromChild(e.getTarget());
18470 this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
18475 onDblClick : function(e){
18476 var item = this.findItemFromChild(e.getTarget());
18478 this.fireEvent("dblclick", this, this.indexOf(item), item, e);
18482 onItemClick : function(item, index, e)
18484 if(this.fireEvent("beforeclick", this, index, item, e) === false){
18487 if (this.toggleSelect) {
18488 var m = this.isSelected(item) ? 'unselect' : 'select';
18491 _t[m](item, true, false);
18494 if(this.multiSelect || this.singleSelect){
18495 if(this.multiSelect && e.shiftKey && this.lastSelection){
18496 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
18498 this.select(item, this.multiSelect && e.ctrlKey);
18499 this.lastSelection = item;
18502 if(!this.tickable){
18503 e.preventDefault();
18511 * Get the number of selected nodes.
18514 getSelectionCount : function(){
18515 return this.selections.length;
18519 * Get the currently selected nodes.
18520 * @return {Array} An array of HTMLElements
18522 getSelectedNodes : function(){
18523 return this.selections;
18527 * Get the indexes of the selected nodes.
18530 getSelectedIndexes : function(){
18531 var indexes = [], s = this.selections;
18532 for(var i = 0, len = s.length; i < len; i++){
18533 indexes.push(s[i].nodeIndex);
18539 * Clear all selections
18540 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
18542 clearSelections : function(suppressEvent){
18543 if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
18544 this.cmp.elements = this.selections;
18545 this.cmp.removeClass(this.selectedClass);
18546 this.selections = [];
18547 if(!suppressEvent){
18548 this.fireEvent("selectionchange", this, this.selections);
18554 * Returns true if the passed node is selected
18555 * @param {HTMLElement/Number} node The node or node index
18556 * @return {Boolean}
18558 isSelected : function(node){
18559 var s = this.selections;
18563 node = this.getNode(node);
18564 return s.indexOf(node) !== -1;
18569 * @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
18570 * @param {Boolean} keepExisting (optional) true to keep existing selections
18571 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
18573 select : function(nodeInfo, keepExisting, suppressEvent){
18574 if(nodeInfo instanceof Array){
18576 this.clearSelections(true);
18578 for(var i = 0, len = nodeInfo.length; i < len; i++){
18579 this.select(nodeInfo[i], true, true);
18583 var node = this.getNode(nodeInfo);
18584 if(!node || this.isSelected(node)){
18585 return; // already selected.
18588 this.clearSelections(true);
18591 if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
18592 Roo.fly(node).addClass(this.selectedClass);
18593 this.selections.push(node);
18594 if(!suppressEvent){
18595 this.fireEvent("selectionchange", this, this.selections);
18603 * @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
18604 * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
18605 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
18607 unselect : function(nodeInfo, keepExisting, suppressEvent)
18609 if(nodeInfo instanceof Array){
18610 Roo.each(this.selections, function(s) {
18611 this.unselect(s, nodeInfo);
18615 var node = this.getNode(nodeInfo);
18616 if(!node || !this.isSelected(node)){
18617 //Roo.log("not selected");
18618 return; // not selected.
18622 Roo.each(this.selections, function(s) {
18624 Roo.fly(node).removeClass(this.selectedClass);
18631 this.selections= ns;
18632 this.fireEvent("selectionchange", this, this.selections);
18636 * Gets a template node.
18637 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
18638 * @return {HTMLElement} The node or null if it wasn't found
18640 getNode : function(nodeInfo){
18641 if(typeof nodeInfo == "string"){
18642 return document.getElementById(nodeInfo);
18643 }else if(typeof nodeInfo == "number"){
18644 return this.nodes[nodeInfo];
18650 * Gets a range template nodes.
18651 * @param {Number} startIndex
18652 * @param {Number} endIndex
18653 * @return {Array} An array of nodes
18655 getNodes : function(start, end){
18656 var ns = this.nodes;
18657 start = start || 0;
18658 end = typeof end == "undefined" ? ns.length - 1 : end;
18661 for(var i = start; i <= end; i++){
18665 for(var i = start; i >= end; i--){
18673 * Finds the index of the passed node
18674 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
18675 * @return {Number} The index of the node or -1
18677 indexOf : function(node){
18678 node = this.getNode(node);
18679 if(typeof node.nodeIndex == "number"){
18680 return node.nodeIndex;
18682 var ns = this.nodes;
18683 for(var i = 0, len = ns.length; i < len; i++){
18694 * based on jquery fullcalendar
18698 Roo.bootstrap = Roo.bootstrap || {};
18700 * @class Roo.bootstrap.Calendar
18701 * @extends Roo.bootstrap.Component
18702 * Bootstrap Calendar class
18703 * @cfg {Boolean} loadMask (true|false) default false
18704 * @cfg {Object} header generate the user specific header of the calendar, default false
18707 * Create a new Container
18708 * @param {Object} config The config object
18713 Roo.bootstrap.Calendar = function(config){
18714 Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
18718 * Fires when a date is selected
18719 * @param {DatePicker} this
18720 * @param {Date} date The selected date
18724 * @event monthchange
18725 * Fires when the displayed month changes
18726 * @param {DatePicker} this
18727 * @param {Date} date The selected month
18729 'monthchange': true,
18731 * @event evententer
18732 * Fires when mouse over an event
18733 * @param {Calendar} this
18734 * @param {event} Event
18736 'evententer': true,
18738 * @event eventleave
18739 * Fires when the mouse leaves an
18740 * @param {Calendar} this
18743 'eventleave': true,
18745 * @event eventclick
18746 * Fires when the mouse click an
18747 * @param {Calendar} this
18756 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component, {
18759 * @cfg {Number} startDay
18760 * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
18768 getAutoCreate : function(){
18771 var fc_button = function(name, corner, style, content ) {
18772 return Roo.apply({},{
18774 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
18776 'fc-corner-' + corner.split(' ').join(' fc-corner-') :
18779 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
18790 style : 'width:100%',
18797 cls : 'fc-header-left',
18799 fc_button('prev', 'left', 'arrow', '‹' ),
18800 fc_button('next', 'right', 'arrow', '›' ),
18801 { tag: 'span', cls: 'fc-header-space' },
18802 fc_button('today', 'left right', '', 'today' ) // neds state disabled..
18810 cls : 'fc-header-center',
18814 cls: 'fc-header-title',
18817 html : 'month / year'
18825 cls : 'fc-header-right',
18827 /* fc_button('month', 'left', '', 'month' ),
18828 fc_button('week', '', '', 'week' ),
18829 fc_button('day', 'right', '', 'day' )
18841 header = this.header;
18844 var cal_heads = function() {
18846 // fixme - handle this.
18848 for (var i =0; i < Date.dayNames.length; i++) {
18849 var d = Date.dayNames[i];
18852 cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
18853 html : d.substring(0,3)
18857 ret[0].cls += ' fc-first';
18858 ret[6].cls += ' fc-last';
18861 var cal_cell = function(n) {
18864 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
18869 cls: 'fc-day-number',
18873 cls: 'fc-day-content',
18877 style: 'position: relative;' // height: 17px;
18889 var cal_rows = function() {
18892 for (var r = 0; r < 6; r++) {
18899 for (var i =0; i < Date.dayNames.length; i++) {
18900 var d = Date.dayNames[i];
18901 row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
18904 row.cn[0].cls+=' fc-first';
18905 row.cn[0].cn[0].style = 'min-height:90px';
18906 row.cn[6].cls+=' fc-last';
18910 ret[0].cls += ' fc-first';
18911 ret[4].cls += ' fc-prev-last';
18912 ret[5].cls += ' fc-last';
18919 cls: 'fc-border-separate',
18920 style : 'width:100%',
18928 cls : 'fc-first fc-last',
18946 cls : 'fc-content',
18947 style : "position: relative;",
18950 cls : 'fc-view fc-view-month fc-grid',
18951 style : 'position: relative',
18952 unselectable : 'on',
18955 cls : 'fc-event-container',
18956 style : 'position:absolute;z-index:8;top:0;left:0;'
18974 initEvents : function()
18977 throw "can not find store for calendar";
18983 style: "text-align:center",
18987 style: "background-color:white;width:50%;margin:250 auto",
18991 src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
19002 this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
19004 var size = this.el.select('.fc-content', true).first().getSize();
19005 this.maskEl.setSize(size.width, size.height);
19006 this.maskEl.enableDisplayMode("block");
19007 if(!this.loadMask){
19008 this.maskEl.hide();
19011 this.store = Roo.factory(this.store, Roo.data);
19012 this.store.on('load', this.onLoad, this);
19013 this.store.on('beforeload', this.onBeforeLoad, this);
19017 this.cells = this.el.select('.fc-day',true);
19018 //Roo.log(this.cells);
19019 this.textNodes = this.el.query('.fc-day-number');
19020 this.cells.addClassOnOver('fc-state-hover');
19022 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
19023 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
19024 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
19025 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
19027 this.on('monthchange', this.onMonthChange, this);
19029 this.update(new Date().clearTime());
19032 resize : function() {
19033 var sz = this.el.getSize();
19035 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
19036 this.el.select('.fc-day-content div',true).setHeight(34);
19041 showPrevMonth : function(e){
19042 this.update(this.activeDate.add("mo", -1));
19044 showToday : function(e){
19045 this.update(new Date().clearTime());
19048 showNextMonth : function(e){
19049 this.update(this.activeDate.add("mo", 1));
19053 showPrevYear : function(){
19054 this.update(this.activeDate.add("y", -1));
19058 showNextYear : function(){
19059 this.update(this.activeDate.add("y", 1));
19064 update : function(date)
19066 var vd = this.activeDate;
19067 this.activeDate = date;
19068 // if(vd && this.el){
19069 // var t = date.getTime();
19070 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
19071 // Roo.log('using add remove');
19073 // this.fireEvent('monthchange', this, date);
19075 // this.cells.removeClass("fc-state-highlight");
19076 // this.cells.each(function(c){
19077 // if(c.dateValue == t){
19078 // c.addClass("fc-state-highlight");
19079 // setTimeout(function(){
19080 // try{c.dom.firstChild.focus();}catch(e){}
19090 var days = date.getDaysInMonth();
19092 var firstOfMonth = date.getFirstDateOfMonth();
19093 var startingPos = firstOfMonth.getDay()-this.startDay;
19095 if(startingPos < this.startDay){
19099 var pm = date.add(Date.MONTH, -1);
19100 var prevStart = pm.getDaysInMonth()-startingPos;
19102 this.cells = this.el.select('.fc-day',true);
19103 this.textNodes = this.el.query('.fc-day-number');
19104 this.cells.addClassOnOver('fc-state-hover');
19106 var cells = this.cells.elements;
19107 var textEls = this.textNodes;
19109 Roo.each(cells, function(cell){
19110 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
19113 days += startingPos;
19115 // convert everything to numbers so it's fast
19116 var day = 86400000;
19117 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
19120 //Roo.log(prevStart);
19122 var today = new Date().clearTime().getTime();
19123 var sel = date.clearTime().getTime();
19124 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
19125 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
19126 var ddMatch = this.disabledDatesRE;
19127 var ddText = this.disabledDatesText;
19128 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
19129 var ddaysText = this.disabledDaysText;
19130 var format = this.format;
19132 var setCellClass = function(cal, cell){
19136 //Roo.log('set Cell Class');
19138 var t = d.getTime();
19142 cell.dateValue = t;
19144 cell.className += " fc-today";
19145 cell.className += " fc-state-highlight";
19146 cell.title = cal.todayText;
19149 // disable highlight in other month..
19150 //cell.className += " fc-state-highlight";
19155 cell.className = " fc-state-disabled";
19156 cell.title = cal.minText;
19160 cell.className = " fc-state-disabled";
19161 cell.title = cal.maxText;
19165 if(ddays.indexOf(d.getDay()) != -1){
19166 cell.title = ddaysText;
19167 cell.className = " fc-state-disabled";
19170 if(ddMatch && format){
19171 var fvalue = d.dateFormat(format);
19172 if(ddMatch.test(fvalue)){
19173 cell.title = ddText.replace("%0", fvalue);
19174 cell.className = " fc-state-disabled";
19178 if (!cell.initialClassName) {
19179 cell.initialClassName = cell.dom.className;
19182 cell.dom.className = cell.initialClassName + ' ' + cell.className;
19187 for(; i < startingPos; i++) {
19188 textEls[i].innerHTML = (++prevStart);
19189 d.setDate(d.getDate()+1);
19191 cells[i].className = "fc-past fc-other-month";
19192 setCellClass(this, cells[i]);
19197 for(; i < days; i++){
19198 intDay = i - startingPos + 1;
19199 textEls[i].innerHTML = (intDay);
19200 d.setDate(d.getDate()+1);
19202 cells[i].className = ''; // "x-date-active";
19203 setCellClass(this, cells[i]);
19207 for(; i < 42; i++) {
19208 textEls[i].innerHTML = (++extraDays);
19209 d.setDate(d.getDate()+1);
19211 cells[i].className = "fc-future fc-other-month";
19212 setCellClass(this, cells[i]);
19215 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
19217 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
19219 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
19220 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
19222 if(totalRows != 6){
19223 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
19224 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
19227 this.fireEvent('monthchange', this, date);
19231 if(!this.internalRender){
19232 var main = this.el.dom.firstChild;
19233 var w = main.offsetWidth;
19234 this.el.setWidth(w + this.el.getBorderWidth("lr"));
19235 Roo.fly(main).setWidth(w);
19236 this.internalRender = true;
19237 // opera does not respect the auto grow header center column
19238 // then, after it gets a width opera refuses to recalculate
19239 // without a second pass
19240 if(Roo.isOpera && !this.secondPass){
19241 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
19242 this.secondPass = true;
19243 this.update.defer(10, this, [date]);
19250 findCell : function(dt) {
19251 dt = dt.clearTime().getTime();
19253 this.cells.each(function(c){
19254 //Roo.log("check " +c.dateValue + '?=' + dt);
19255 if(c.dateValue == dt){
19265 findCells : function(ev) {
19266 var s = ev.start.clone().clearTime().getTime();
19268 var e= ev.end.clone().clearTime().getTime();
19271 this.cells.each(function(c){
19272 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
19274 if(c.dateValue > e){
19277 if(c.dateValue < s){
19286 // findBestRow: function(cells)
19290 // for (var i =0 ; i < cells.length;i++) {
19291 // ret = Math.max(cells[i].rows || 0,ret);
19298 addItem : function(ev)
19300 // look for vertical location slot in
19301 var cells = this.findCells(ev);
19303 // ev.row = this.findBestRow(cells);
19305 // work out the location.
19309 for(var i =0; i < cells.length; i++) {
19311 cells[i].row = cells[0].row;
19314 cells[i].row = cells[i].row + 1;
19324 if (crow.start.getY() == cells[i].getY()) {
19326 crow.end = cells[i];
19343 cells[0].events.push(ev);
19345 this.calevents.push(ev);
19348 clearEvents: function() {
19350 if(!this.calevents){
19354 Roo.each(this.cells.elements, function(c){
19360 Roo.each(this.calevents, function(e) {
19361 Roo.each(e.els, function(el) {
19362 el.un('mouseenter' ,this.onEventEnter, this);
19363 el.un('mouseleave' ,this.onEventLeave, this);
19368 Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
19374 renderEvents: function()
19378 this.cells.each(function(c) {
19387 if(c.row != c.events.length){
19388 r = 4 - (4 - (c.row - c.events.length));
19391 c.events = ev.slice(0, r);
19392 c.more = ev.slice(r);
19394 if(c.more.length && c.more.length == 1){
19395 c.events.push(c.more.pop());
19398 c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
19402 this.cells.each(function(c) {
19404 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
19407 for (var e = 0; e < c.events.length; e++){
19408 var ev = c.events[e];
19409 var rows = ev.rows;
19411 for(var i = 0; i < rows.length; i++) {
19413 // how many rows should it span..
19416 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
19417 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
19419 unselectable : "on",
19422 cls: 'fc-event-inner',
19426 // cls: 'fc-event-time',
19427 // html : cells.length > 1 ? '' : ev.time
19431 cls: 'fc-event-title',
19432 html : String.format('{0}', ev.title)
19439 cls: 'ui-resizable-handle ui-resizable-e',
19440 html : '  '
19447 cfg.cls += ' fc-event-start';
19449 if ((i+1) == rows.length) {
19450 cfg.cls += ' fc-event-end';
19453 var ctr = _this.el.select('.fc-event-container',true).first();
19454 var cg = ctr.createChild(cfg);
19456 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
19457 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
19459 var r = (c.more.length) ? 1 : 0;
19460 cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
19461 cg.setWidth(ebox.right - sbox.x -2);
19463 cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
19464 cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
19465 cg.on('click', _this.onEventClick, _this, ev);
19476 cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
19477 style : 'position: absolute',
19478 unselectable : "on",
19481 cls: 'fc-event-inner',
19485 cls: 'fc-event-title',
19493 cls: 'ui-resizable-handle ui-resizable-e',
19494 html : '  '
19500 var ctr = _this.el.select('.fc-event-container',true).first();
19501 var cg = ctr.createChild(cfg);
19503 var sbox = c.select('.fc-day-content',true).first().getBox();
19504 var ebox = c.select('.fc-day-content',true).first().getBox();
19506 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
19507 cg.setWidth(ebox.right - sbox.x -2);
19509 cg.on('click', _this.onMoreEventClick, _this, c.more);
19519 onEventEnter: function (e, el,event,d) {
19520 this.fireEvent('evententer', this, el, event);
19523 onEventLeave: function (e, el,event,d) {
19524 this.fireEvent('eventleave', this, el, event);
19527 onEventClick: function (e, el,event,d) {
19528 this.fireEvent('eventclick', this, el, event);
19531 onMonthChange: function () {
19535 onMoreEventClick: function(e, el, more)
19539 this.calpopover.placement = 'right';
19540 this.calpopover.setTitle('More');
19542 this.calpopover.setContent('');
19544 var ctr = this.calpopover.el.select('.popover-content', true).first();
19546 Roo.each(more, function(m){
19548 cls : 'fc-event-hori fc-event-draggable',
19551 var cg = ctr.createChild(cfg);
19553 cg.on('click', _this.onEventClick, _this, m);
19556 this.calpopover.show(el);
19561 onLoad: function ()
19563 this.calevents = [];
19566 if(this.store.getCount() > 0){
19567 this.store.data.each(function(d){
19570 start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
19571 end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
19572 time : d.data.start_time,
19573 title : d.data.title,
19574 description : d.data.description,
19575 venue : d.data.venue
19580 this.renderEvents();
19582 if(this.calevents.length && this.loadMask){
19583 this.maskEl.hide();
19587 onBeforeLoad: function()
19589 this.clearEvents();
19591 this.maskEl.show();
19605 * @class Roo.bootstrap.Popover
19606 * @extends Roo.bootstrap.Component
19607 * Bootstrap Popover class
19608 * @cfg {String} html contents of the popover (or false to use children..)
19609 * @cfg {String} title of popover (or false to hide)
19610 * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed
19611 * @cfg {String} trigger click || hover (or false to trigger manually)
19612 * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event.
19613 * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element
19614 * - if false and it has a 'parent' then it will be automatically added to that element
19615 * - if string - Roo.get will be called
19616 * @cfg {Number} delay - delay before showing
19619 * Create a new Popover
19620 * @param {Object} config The config object
19623 Roo.bootstrap.Popover = function(config){
19624 Roo.bootstrap.Popover.superclass.constructor.call(this, config);
19630 * After the popover show
19632 * @param {Roo.bootstrap.Popover} this
19637 * After the popover hide
19639 * @param {Roo.bootstrap.Popover} this
19645 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, {
19650 placement : 'right',
19651 trigger : 'hover', // hover
19657 can_build_overlaid : false,
19659 maskEl : false, // the mask element
19662 alignEl : false, // when show is called with an element - this get's stored.
19664 getChildContainer : function()
19666 return this.contentEl;
19669 getPopoverHeader : function()
19671 this.title = true; // flag not to hide it..
19672 this.headerEl.addClass('p-0');
19673 return this.headerEl
19677 getAutoCreate : function(){
19680 cls : 'popover roo-dynamic shadow roo-popover' + (this.modal ? '-modal' : ''),
19681 style: 'display:block',
19687 cls : 'popover-inner ',
19691 cls: 'popover-title popover-header',
19692 html : this.title === false ? '' : this.title
19695 cls : 'popover-content popover-body ' + (this.cls || ''),
19696 html : this.html || ''
19707 * @param {string} the title
19709 setTitle: function(str)
19713 this.headerEl.dom.innerHTML = str;
19718 * @param {string} the body content
19720 setContent: function(str)
19723 if (this.contentEl) {
19724 this.contentEl.dom.innerHTML = str;
19728 // as it get's added to the bottom of the page.
19729 onRender : function(ct, position)
19731 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
19736 var cfg = Roo.apply({}, this.getAutoCreate());
19740 cfg.cls += ' ' + this.cls;
19743 cfg.style = this.style;
19745 //Roo.log("adding to ");
19746 this.el = Roo.get(document.body).createChild(cfg, position);
19747 // Roo.log(this.el);
19750 this.contentEl = this.el.select('.popover-content',true).first();
19751 this.headerEl = this.el.select('.popover-title',true).first();
19754 if(typeof(this.items) != 'undefined'){
19755 var items = this.items;
19758 for(var i =0;i < items.length;i++) {
19759 nitems.push(this.addxtype(Roo.apply({}, items[i])));
19763 this.items = nitems;
19765 this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
19766 Roo.EventManager.onWindowResize(this.resizeMask, this, true);
19773 resizeMask : function()
19775 this.maskEl.setSize(
19776 Roo.lib.Dom.getViewWidth(true),
19777 Roo.lib.Dom.getViewHeight(true)
19781 initEvents : function()
19785 Roo.bootstrap.Popover.register(this);
19788 this.arrowEl = this.el.select('.arrow',true).first();
19789 this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
19790 this.el.enableDisplayMode('block');
19794 if (this.over === false && !this.parent()) {
19797 if (this.triggers === false) {
19802 var on_el = (this.over == 'parent' || this.over === false) ? this.parent().el : Roo.get(this.over);
19803 var triggers = this.trigger ? this.trigger.split(' ') : [];
19804 Roo.each(triggers, function(trigger) {
19806 if (trigger == 'click') {
19807 on_el.on('click', this.toggle, this);
19808 } else if (trigger != 'manual') {
19809 var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin';
19810 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
19812 on_el.on(eventIn ,this.enter, this);
19813 on_el.on(eventOut, this.leave, this);
19823 toggle : function () {
19824 this.hoverState == 'in' ? this.leave() : this.enter();
19827 enter : function () {
19829 clearTimeout(this.timeout);
19831 this.hoverState = 'in';
19833 if (!this.delay || !this.delay.show) {
19838 this.timeout = setTimeout(function () {
19839 if (_t.hoverState == 'in') {
19842 }, this.delay.show)
19845 leave : function() {
19846 clearTimeout(this.timeout);
19848 this.hoverState = 'out';
19850 if (!this.delay || !this.delay.hide) {
19855 this.timeout = setTimeout(function () {
19856 if (_t.hoverState == 'out') {
19859 }, this.delay.hide)
19863 * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
19864 * @param {string} (left|right|top|bottom) position
19866 show : function (on_el, placement)
19868 this.placement = typeof(placement) == 'undefined' ? this.placement : placement;
19869 on_el = on_el || false; // default to false
19872 if (this.parent() && (this.over == 'parent' || (this.over === false))) {
19873 on_el = this.parent().el;
19874 } else if (this.over) {
19875 Roo.get(this.over);
19880 this.alignEl = on_el;
19883 this.render(document.body);
19889 if (this.title === false) {
19890 this.headerEl.hide();
19895 this.el.dom.style.display = 'block';
19898 if (this.alignEl) {
19899 this.updatePosition(this.placement, true);
19902 // this is usually just done by the builder = to show the popoup in the middle of the scren.
19903 var es = this.el.getSize();
19904 var x = Roo.lib.Dom.getViewWidth()/2;
19905 var y = Roo.lib.Dom.getViewHeight()/2;
19906 this.el.setXY([ x-(es.width/2), y-(es.height/2)] );
19911 //var arrow = this.el.select('.arrow',true).first();
19912 //arrow.set(align[2],
19914 this.el.addClass('in');
19918 this.hoverState = 'in';
19921 this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
19922 this.maskEl.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
19923 this.maskEl.dom.style.display = 'block';
19924 this.maskEl.addClass('show');
19926 this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
19928 this.fireEvent('show', this);
19932 * fire this manually after loading a grid in the table for example
19933 * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one)
19934 * @param {Boolean} try and move it if we cant get right position.
19936 updatePosition : function(placement, try_move)
19938 // allow for calling with no parameters
19939 placement = placement ? placement : this.placement;
19940 try_move = typeof(try_move) == 'undefined' ? true : try_move;
19942 this.el.removeClass([
19943 'fade','top','bottom', 'left', 'right','in',
19944 'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right'
19946 this.el.addClass(placement + ' bs-popover-' + placement);
19948 if (!this.alignEl ) {
19952 switch (placement) {
19954 var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]);
19955 var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]);
19956 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
19957 //normal display... or moved up/down.
19958 this.el.setXY(offset);
19959 var xy = this.alignEl.getAnchorXY('tr', false);
19961 this.arrowEl.setXY(xy);
19964 // continue through...
19969 var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]);
19970 var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]);
19971 if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) {
19972 //normal display... or moved up/down.
19973 this.el.setXY(offset);
19974 var xy = this.alignEl.getAnchorXY('tl', false);
19975 xy[0]+=2;xy[1]+=5; // << fix me
19976 this.arrowEl.setXY(xy);
19980 return this.updatePosition('right', false);
19983 var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,-10]);
19984 var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,-10]);
19985 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
19986 //normal display... or moved up/down.
19987 this.el.setXY(offset);
19988 var xy = this.alignEl.getAnchorXY('t', false);
19989 xy[1]-=10; // << fix me
19990 this.arrowEl.setXY(xy);
19997 var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,10]);
19998 var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,10]);
19999 if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) {
20000 //normal display... or moved up/down.
20001 this.el.setXY(offset);
20002 var xy = this.alignEl.getAnchorXY('b', false);
20003 xy[0]+=2;xy[1]+=5; // << fix me
20004 this.arrowEl.setXY(xy);
20008 return this.updatePosition('top', false);
20019 this.el.setXY([0,0]);
20020 this.el.removeClass('in');
20022 this.hoverState = null;
20023 this.maskEl.hide(); // always..
20024 this.fireEvent('hide', this);
20030 Roo.apply(Roo.bootstrap.Popover, {
20033 'left' : ['r-l', [-10,0], 'left bs-popover-left'],
20034 'right' : ['l-br', [10,0], 'right bs-popover-right'],
20035 'bottom' : ['t-b', [0,10], 'top bs-popover-top'],
20036 'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom']
20041 clickHander : false,
20044 onMouseDown : function(e)
20046 if (!e.getTarget(".roo-popover")) {
20054 register : function(popup)
20056 if (!Roo.bootstrap.Popover.clickHandler) {
20057 Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
20059 // hide other popups.
20061 this.popups.push(popup);
20063 hideAll : function()
20065 this.popups.forEach(function(p) {
20073 * Card header - holder for the card header elements.
20078 * @class Roo.bootstrap.PopoverNav
20079 * @extends Roo.bootstrap.NavGroup
20080 * Bootstrap Popover header navigation class
20082 * Create a new Popover Header Navigation
20083 * @param {Object} config The config object
20086 Roo.bootstrap.PopoverNav = function(config){
20087 Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config);
20090 Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.NavSimplebar, {
20093 container_method : 'getPopoverHeader'
20111 * @class Roo.bootstrap.Progress
20112 * @extends Roo.bootstrap.Component
20113 * Bootstrap Progress class
20114 * @cfg {Boolean} striped striped of the progress bar
20115 * @cfg {Boolean} active animated of the progress bar
20119 * Create a new Progress
20120 * @param {Object} config The config object
20123 Roo.bootstrap.Progress = function(config){
20124 Roo.bootstrap.Progress.superclass.constructor.call(this, config);
20127 Roo.extend(Roo.bootstrap.Progress, Roo.bootstrap.Component, {
20132 getAutoCreate : function(){
20140 cfg.cls += ' progress-striped';
20144 cfg.cls += ' active';
20163 * @class Roo.bootstrap.ProgressBar
20164 * @extends Roo.bootstrap.Component
20165 * Bootstrap ProgressBar class
20166 * @cfg {Number} aria_valuenow aria-value now
20167 * @cfg {Number} aria_valuemin aria-value min
20168 * @cfg {Number} aria_valuemax aria-value max
20169 * @cfg {String} label label for the progress bar
20170 * @cfg {String} panel (success | info | warning | danger )
20171 * @cfg {String} role role of the progress bar
20172 * @cfg {String} sr_only text
20176 * Create a new ProgressBar
20177 * @param {Object} config The config object
20180 Roo.bootstrap.ProgressBar = function(config){
20181 Roo.bootstrap.ProgressBar.superclass.constructor.call(this, config);
20184 Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component, {
20188 aria_valuemax : 100,
20194 getAutoCreate : function()
20199 cls: 'progress-bar',
20200 style: 'width:' + Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%'
20212 cfg.role = this.role;
20215 if(this.aria_valuenow){
20216 cfg['aria-valuenow'] = this.aria_valuenow;
20219 if(this.aria_valuemin){
20220 cfg['aria-valuemin'] = this.aria_valuemin;
20223 if(this.aria_valuemax){
20224 cfg['aria-valuemax'] = this.aria_valuemax;
20227 if(this.label && !this.sr_only){
20228 cfg.html = this.label;
20232 cfg.cls += ' progress-bar-' + this.panel;
20238 update : function(aria_valuenow)
20240 this.aria_valuenow = aria_valuenow;
20242 this.el.setStyle('width', Math.ceil((this.aria_valuenow / this.aria_valuemax) * 100) + '%');
20257 * @class Roo.bootstrap.TabGroup
20258 * @extends Roo.bootstrap.Column
20259 * Bootstrap Column class
20260 * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
20261 * @cfg {Boolean} carousel true to make the group behave like a carousel
20262 * @cfg {Boolean} bullets show bullets for the panels
20263 * @cfg {Boolean} autoslide (true|false) auto slide .. default false
20264 * @cfg {Number} timer auto slide timer .. default 0 millisecond
20265 * @cfg {Boolean} showarrow (true|false) show arrow default true
20268 * Create a new TabGroup
20269 * @param {Object} config The config object
20272 Roo.bootstrap.TabGroup = function(config){
20273 Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
20275 this.navId = Roo.id();
20278 Roo.bootstrap.TabGroup.register(this);
20282 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, {
20285 transition : false,
20290 slideOnTouch : false,
20293 getAutoCreate : function()
20295 var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
20297 cfg.cls += ' tab-content';
20299 if (this.carousel) {
20300 cfg.cls += ' carousel slide';
20303 cls : 'carousel-inner',
20307 if(this.bullets && !Roo.isTouch){
20310 cls : 'carousel-bullets',
20314 if(this.bullets_cls){
20315 bullets.cls = bullets.cls + ' ' + this.bullets_cls;
20322 cfg.cn[0].cn.push(bullets);
20325 if(this.showarrow){
20326 cfg.cn[0].cn.push({
20328 class : 'carousel-arrow',
20332 class : 'carousel-prev',
20336 class : 'fa fa-chevron-left'
20342 class : 'carousel-next',
20346 class : 'fa fa-chevron-right'
20359 initEvents: function()
20361 // if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
20362 // this.el.on("touchstart", this.onTouchStart, this);
20365 if(this.autoslide){
20368 this.slideFn = window.setInterval(function() {
20369 _this.showPanelNext();
20373 if(this.showarrow){
20374 this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
20375 this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
20381 // onTouchStart : function(e, el, o)
20383 // if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
20387 // this.showPanelNext();
20391 getChildContainer : function()
20393 return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
20397 * register a Navigation item
20398 * @param {Roo.bootstrap.NavItem} the navitem to add
20400 register : function(item)
20402 this.tabs.push( item);
20403 item.navId = this.navId; // not really needed..
20408 getActivePanel : function()
20411 Roo.each(this.tabs, function(t) {
20421 getPanelByName : function(n)
20424 Roo.each(this.tabs, function(t) {
20425 if (t.tabId == n) {
20433 indexOfPanel : function(p)
20436 Roo.each(this.tabs, function(t,i) {
20437 if (t.tabId == p.tabId) {
20446 * show a specific panel
20447 * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
20448 * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
20450 showPanel : function (pan)
20452 if(this.transition || typeof(pan) == 'undefined'){
20453 Roo.log("waiting for the transitionend");
20457 if (typeof(pan) == 'number') {
20458 pan = this.tabs[pan];
20461 if (typeof(pan) == 'string') {
20462 pan = this.getPanelByName(pan);
20465 var cur = this.getActivePanel();
20468 Roo.log('pan or acitve pan is undefined');
20472 if (pan.tabId == this.getActivePanel().tabId) {
20476 if (false === cur.fireEvent('beforedeactivate')) {
20480 if(this.bullets > 0 && !Roo.isTouch){
20481 this.setActiveBullet(this.indexOfPanel(pan));
20484 if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
20486 //class="carousel-item carousel-item-next carousel-item-left"
20488 this.transition = true;
20489 var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
20490 var lr = dir == 'next' ? 'left' : 'right';
20491 pan.el.addClass(dir); // or prev
20492 pan.el.addClass('carousel-item-' + dir); // or prev
20493 pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
20494 cur.el.addClass(lr); // or right
20495 pan.el.addClass(lr);
20496 cur.el.addClass('carousel-item-' +lr); // or right
20497 pan.el.addClass('carousel-item-' +lr);
20501 cur.el.on('transitionend', function() {
20502 Roo.log("trans end?");
20504 pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
20505 pan.setActive(true);
20507 cur.el.removeClass([lr, 'carousel-item-' + lr]);
20508 cur.setActive(false);
20510 _this.transition = false;
20512 }, this, { single: true } );
20517 cur.setActive(false);
20518 pan.setActive(true);
20523 showPanelNext : function()
20525 var i = this.indexOfPanel(this.getActivePanel());
20527 if (i >= this.tabs.length - 1 && !this.autoslide) {
20531 if (i >= this.tabs.length - 1 && this.autoslide) {
20535 this.showPanel(this.tabs[i+1]);
20538 showPanelPrev : function()
20540 var i = this.indexOfPanel(this.getActivePanel());
20542 if (i < 1 && !this.autoslide) {
20546 if (i < 1 && this.autoslide) {
20547 i = this.tabs.length;
20550 this.showPanel(this.tabs[i-1]);
20554 addBullet: function()
20556 if(!this.bullets || Roo.isTouch){
20559 var ctr = this.el.select('.carousel-bullets',true).first();
20560 var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
20561 var bullet = ctr.createChild({
20562 cls : 'bullet bullet-' + i
20563 },ctr.dom.lastChild);
20568 bullet.on('click', (function(e, el, o, ii, t){
20570 e.preventDefault();
20572 this.showPanel(ii);
20574 if(this.autoslide && this.slideFn){
20575 clearInterval(this.slideFn);
20576 this.slideFn = window.setInterval(function() {
20577 _this.showPanelNext();
20581 }).createDelegate(this, [i, bullet], true));
20586 setActiveBullet : function(i)
20592 Roo.each(this.el.select('.bullet', true).elements, function(el){
20593 el.removeClass('selected');
20596 var bullet = this.el.select('.bullet-' + i, true).first();
20602 bullet.addClass('selected');
20613 Roo.apply(Roo.bootstrap.TabGroup, {
20617 * register a Navigation Group
20618 * @param {Roo.bootstrap.NavGroup} the navgroup to add
20620 register : function(navgrp)
20622 this.groups[navgrp.navId] = navgrp;
20626 * fetch a Navigation Group based on the navigation ID
20627 * if one does not exist , it will get created.
20628 * @param {string} the navgroup to add
20629 * @returns {Roo.bootstrap.NavGroup} the navgroup
20631 get: function(navId) {
20632 if (typeof(this.groups[navId]) == 'undefined') {
20633 this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
20635 return this.groups[navId] ;
20650 * @class Roo.bootstrap.TabPanel
20651 * @extends Roo.bootstrap.Component
20652 * Bootstrap TabPanel class
20653 * @cfg {Boolean} active panel active
20654 * @cfg {String} html panel content
20655 * @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
20656 * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
20657 * @cfg {String} href click to link..
20658 * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
20662 * Create a new TabPanel
20663 * @param {Object} config The config object
20666 Roo.bootstrap.TabPanel = function(config){
20667 Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
20671 * Fires when the active status changes
20672 * @param {Roo.bootstrap.TabPanel} this
20673 * @param {Boolean} state the new state
20678 * @event beforedeactivate
20679 * Fires before a tab is de-activated - can be used to do validation on a form.
20680 * @param {Roo.bootstrap.TabPanel} this
20681 * @return {Boolean} false if there is an error
20684 'beforedeactivate': true
20687 this.tabId = this.tabId || Roo.id();
20691 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, {
20698 touchSlide : false,
20699 getAutoCreate : function(){
20704 // item is needed for carousel - not sure if it has any effect otherwise
20705 cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
20706 html: this.html || ''
20710 cfg.cls += ' active';
20714 cfg.tabId = this.tabId;
20722 initEvents: function()
20724 var p = this.parent();
20726 this.navId = this.navId || p.navId;
20728 if (typeof(this.navId) != 'undefined') {
20729 // not really needed.. but just in case.. parent should be a NavGroup.
20730 var tg = Roo.bootstrap.TabGroup.get(this.navId);
20734 var i = tg.tabs.length - 1;
20736 if(this.active && tg.bullets > 0 && i < tg.bullets){
20737 tg.setActiveBullet(i);
20741 this.el.on('click', this.onClick, this);
20743 if(Roo.isTouch && this.touchSlide){
20744 this.el.on("touchstart", this.onTouchStart, this);
20745 this.el.on("touchmove", this.onTouchMove, this);
20746 this.el.on("touchend", this.onTouchEnd, this);
20751 onRender : function(ct, position)
20753 Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
20756 setActive : function(state)
20758 Roo.log("panel - set active " + this.tabId + "=" + state);
20760 this.active = state;
20762 this.el.removeClass('active');
20764 } else if (!this.el.hasClass('active')) {
20765 this.el.addClass('active');
20768 this.fireEvent('changed', this, state);
20771 onClick : function(e)
20773 e.preventDefault();
20775 if(!this.href.length){
20779 window.location.href = this.href;
20788 onTouchStart : function(e)
20790 this.swiping = false;
20792 this.startX = e.browserEvent.touches[0].clientX;
20793 this.startY = e.browserEvent.touches[0].clientY;
20796 onTouchMove : function(e)
20798 this.swiping = true;
20800 this.endX = e.browserEvent.touches[0].clientX;
20801 this.endY = e.browserEvent.touches[0].clientY;
20804 onTouchEnd : function(e)
20811 var tabGroup = this.parent();
20813 if(this.endX > this.startX){ // swiping right
20814 tabGroup.showPanelPrev();
20818 if(this.startX > this.endX){ // swiping left
20819 tabGroup.showPanelNext();
20838 * @class Roo.bootstrap.DateField
20839 * @extends Roo.bootstrap.Input
20840 * Bootstrap DateField class
20841 * @cfg {Number} weekStart default 0
20842 * @cfg {String} viewMode default empty, (months|years)
20843 * @cfg {String} minViewMode default empty, (months|years)
20844 * @cfg {Number} startDate default -Infinity
20845 * @cfg {Number} endDate default Infinity
20846 * @cfg {Boolean} todayHighlight default false
20847 * @cfg {Boolean} todayBtn default false
20848 * @cfg {Boolean} calendarWeeks default false
20849 * @cfg {Object} daysOfWeekDisabled default empty
20850 * @cfg {Boolean} singleMode default false (true | false)
20852 * @cfg {Boolean} keyboardNavigation default true
20853 * @cfg {String} language default en
20856 * Create a new DateField
20857 * @param {Object} config The config object
20860 Roo.bootstrap.DateField = function(config){
20861 Roo.bootstrap.DateField.superclass.constructor.call(this, config);
20865 * Fires when this field show.
20866 * @param {Roo.bootstrap.DateField} this
20867 * @param {Mixed} date The date value
20872 * Fires when this field hide.
20873 * @param {Roo.bootstrap.DateField} this
20874 * @param {Mixed} date The date value
20879 * Fires when select a date.
20880 * @param {Roo.bootstrap.DateField} this
20881 * @param {Mixed} date The date value
20885 * @event beforeselect
20886 * Fires when before select a date.
20887 * @param {Roo.bootstrap.DateField} this
20888 * @param {Mixed} date The date value
20890 beforeselect : true
20894 Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, {
20897 * @cfg {String} format
20898 * The default date format string which can be overriden for localization support. The format must be
20899 * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
20903 * @cfg {String} altFormats
20904 * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
20905 * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
20907 altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
20915 todayHighlight : false,
20921 keyboardNavigation: true,
20923 calendarWeeks: false,
20925 startDate: -Infinity,
20929 daysOfWeekDisabled: [],
20933 singleMode : false,
20935 UTCDate: function()
20937 return new Date(Date.UTC.apply(Date, arguments));
20940 UTCToday: function()
20942 var today = new Date();
20943 return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
20946 getDate: function() {
20947 var d = this.getUTCDate();
20948 return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
20951 getUTCDate: function() {
20955 setDate: function(d) {
20956 this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
20959 setUTCDate: function(d) {
20961 this.setValue(this.formatDate(this.date));
20964 onRender: function(ct, position)
20967 Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position);
20969 this.language = this.language || 'en';
20970 this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
20971 this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
20973 this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
20974 this.format = this.format || 'm/d/y';
20975 this.isInline = false;
20976 this.isInput = true;
20977 this.component = this.el.select('.add-on', true).first() || false;
20978 this.component = (this.component && this.component.length === 0) ? false : this.component;
20979 this.hasInput = this.component && this.inputEl().length;
20981 if (typeof(this.minViewMode === 'string')) {
20982 switch (this.minViewMode) {
20984 this.minViewMode = 1;
20987 this.minViewMode = 2;
20990 this.minViewMode = 0;
20995 if (typeof(this.viewMode === 'string')) {
20996 switch (this.viewMode) {
21009 this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
21011 // this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
21013 this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
21015 this.picker().on('mousedown', this.onMousedown, this);
21016 this.picker().on('click', this.onClick, this);
21018 this.picker().addClass('datepicker-dropdown');
21020 this.startViewMode = this.viewMode;
21022 if(this.singleMode){
21023 Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
21024 v.setVisibilityMode(Roo.Element.DISPLAY);
21028 Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
21029 v.setStyle('width', '189px');
21033 Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
21034 if(!this.calendarWeeks){
21039 v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
21040 v.attr('colspan', function(i, val){
21041 return parseInt(val) + 1;
21046 this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
21048 this.setStartDate(this.startDate);
21049 this.setEndDate(this.endDate);
21051 this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
21058 if(this.isInline) {
21063 picker : function()
21065 return this.pickerEl;
21066 // return this.el.select('.datepicker', true).first();
21069 fillDow: function()
21071 var dowCnt = this.weekStart;
21080 if(this.calendarWeeks){
21088 while (dowCnt < this.weekStart + 7) {
21092 html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7]
21096 this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
21099 fillMonths: function()
21102 var months = this.picker().select('>.datepicker-months td', true).first();
21104 months.dom.innerHTML = '';
21110 html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
21113 months.createChild(month);
21120 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;
21122 if (this.date < this.startDate) {
21123 this.viewDate = new Date(this.startDate);
21124 } else if (this.date > this.endDate) {
21125 this.viewDate = new Date(this.endDate);
21127 this.viewDate = new Date(this.date);
21135 var d = new Date(this.viewDate),
21136 year = d.getUTCFullYear(),
21137 month = d.getUTCMonth(),
21138 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
21139 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
21140 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
21141 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
21142 currentDate = this.date && this.date.valueOf(),
21143 today = this.UTCToday();
21145 this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year;
21147 // this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
21149 // this.picker.select('>tfoot th.today').
21150 // .text(dates[this.language].today)
21151 // .toggle(this.todayBtn !== false);
21153 this.updateNavArrows();
21156 var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
21158 day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
21160 prevMonth.setUTCDate(day);
21162 prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
21164 var nextMonth = new Date(prevMonth);
21166 nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
21168 nextMonth = nextMonth.valueOf();
21170 var fillMonths = false;
21172 this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
21174 while(prevMonth.valueOf() <= nextMonth) {
21177 if (prevMonth.getUTCDay() === this.weekStart) {
21179 this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
21187 if(this.calendarWeeks){
21188 // ISO 8601: First week contains first thursday.
21189 // ISO also states week starts on Monday, but we can be more abstract here.
21191 // Start of current week: based on weekstart/current date
21192 ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
21193 // Thursday of this week
21194 th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
21195 // First Thursday of year, year from thursday
21196 yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
21197 // Calendar week: ms between thursdays, div ms per day, div 7 days
21198 calWeek = (th - yth) / 864e5 / 7 + 1;
21200 fillMonths.cn.push({
21208 if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
21210 } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
21213 if (this.todayHighlight &&
21214 prevMonth.getUTCFullYear() == today.getFullYear() &&
21215 prevMonth.getUTCMonth() == today.getMonth() &&
21216 prevMonth.getUTCDate() == today.getDate()) {
21217 clsName += ' today';
21220 if (currentDate && prevMonth.valueOf() === currentDate) {
21221 clsName += ' active';
21224 if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
21225 this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
21226 clsName += ' disabled';
21229 fillMonths.cn.push({
21231 cls: 'day ' + clsName,
21232 html: prevMonth.getDate()
21235 prevMonth.setDate(prevMonth.getDate()+1);
21238 var currentYear = this.date && this.date.getUTCFullYear();
21239 var currentMonth = this.date && this.date.getUTCMonth();
21241 this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
21243 Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
21244 v.removeClass('active');
21246 if(currentYear === year && k === currentMonth){
21247 v.addClass('active');
21250 if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
21251 v.addClass('disabled');
21257 year = parseInt(year/10, 10) * 10;
21259 this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
21261 this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
21264 for (var i = -1; i < 11; i++) {
21265 this.picker().select('>.datepicker-years tbody td',true).first().createChild({
21267 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
21275 showMode: function(dir)
21278 this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
21281 Roo.each(this.picker().select('>div',true).elements, function(v){
21282 v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
21285 this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
21290 if(this.isInline) {
21294 this.picker().removeClass(['bottom', 'top']);
21296 if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
21298 * place to the top of element!
21302 this.picker().addClass('top');
21303 this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
21308 this.picker().addClass('bottom');
21310 this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
21313 parseDate : function(value)
21315 if(!value || value instanceof Date){
21318 var v = Date.parseDate(value, this.format);
21319 if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
21320 v = Date.parseDate(value, 'Y-m-d');
21322 if(!v && this.altFormats){
21323 if(!this.altFormatsArray){
21324 this.altFormatsArray = this.altFormats.split("|");
21326 for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
21327 v = Date.parseDate(value, this.altFormatsArray[i]);
21333 formatDate : function(date, fmt)
21335 return (!date || !(date instanceof Date)) ?
21336 date : date.dateFormat(fmt || this.format);
21339 onFocus : function()
21341 Roo.bootstrap.DateField.superclass.onFocus.call(this);
21345 onBlur : function()
21347 Roo.bootstrap.DateField.superclass.onBlur.call(this);
21349 var d = this.inputEl().getValue();
21356 showPopup : function()
21358 this.picker().show();
21362 this.fireEvent('showpopup', this, this.date);
21365 hidePopup : function()
21367 if(this.isInline) {
21370 this.picker().hide();
21371 this.viewMode = this.startViewMode;
21374 this.fireEvent('hidepopup', this, this.date);
21378 onMousedown: function(e)
21380 e.stopPropagation();
21381 e.preventDefault();
21386 Roo.bootstrap.DateField.superclass.keyup.call(this);
21390 setValue: function(v)
21392 if(this.fireEvent('beforeselect', this, v) !== false){
21393 var d = new Date(this.parseDate(v) ).clearTime();
21395 if(isNaN(d.getTime())){
21396 this.date = this.viewDate = '';
21397 Roo.bootstrap.DateField.superclass.setValue.call(this, '');
21401 v = this.formatDate(d);
21403 Roo.bootstrap.DateField.superclass.setValue.call(this, v);
21405 this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
21409 this.fireEvent('select', this, this.date);
21413 getValue: function()
21415 return this.formatDate(this.date);
21418 fireKey: function(e)
21420 if (!this.picker().isVisible()){
21421 if (e.keyCode == 27) { // allow escape to hide and re-show picker
21427 var dateChanged = false,
21429 newDate, newViewDate;
21434 e.preventDefault();
21438 if (!this.keyboardNavigation) {
21441 dir = e.keyCode == 37 ? -1 : 1;
21444 newDate = this.moveYear(this.date, dir);
21445 newViewDate = this.moveYear(this.viewDate, dir);
21446 } else if (e.shiftKey){
21447 newDate = this.moveMonth(this.date, dir);
21448 newViewDate = this.moveMonth(this.viewDate, dir);
21450 newDate = new Date(this.date);
21451 newDate.setUTCDate(this.date.getUTCDate() + dir);
21452 newViewDate = new Date(this.viewDate);
21453 newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
21455 if (this.dateWithinRange(newDate)){
21456 this.date = newDate;
21457 this.viewDate = newViewDate;
21458 this.setValue(this.formatDate(this.date));
21460 e.preventDefault();
21461 dateChanged = true;
21466 if (!this.keyboardNavigation) {
21469 dir = e.keyCode == 38 ? -1 : 1;
21471 newDate = this.moveYear(this.date, dir);
21472 newViewDate = this.moveYear(this.viewDate, dir);
21473 } else if (e.shiftKey){
21474 newDate = this.moveMonth(this.date, dir);
21475 newViewDate = this.moveMonth(this.viewDate, dir);
21477 newDate = new Date(this.date);
21478 newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
21479 newViewDate = new Date(this.viewDate);
21480 newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
21482 if (this.dateWithinRange(newDate)){
21483 this.date = newDate;
21484 this.viewDate = newViewDate;
21485 this.setValue(this.formatDate(this.date));
21487 e.preventDefault();
21488 dateChanged = true;
21492 this.setValue(this.formatDate(this.date));
21494 e.preventDefault();
21497 this.setValue(this.formatDate(this.date));
21511 onClick: function(e)
21513 e.stopPropagation();
21514 e.preventDefault();
21516 var target = e.getTarget();
21518 if(target.nodeName.toLowerCase() === 'i'){
21519 target = Roo.get(target).dom.parentNode;
21522 var nodeName = target.nodeName;
21523 var className = target.className;
21524 var html = target.innerHTML;
21525 //Roo.log(nodeName);
21527 switch(nodeName.toLowerCase()) {
21529 switch(className) {
21535 var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
21536 switch(this.viewMode){
21538 this.viewDate = this.moveMonth(this.viewDate, dir);
21542 this.viewDate = this.moveYear(this.viewDate, dir);
21548 var date = new Date();
21549 this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
21551 this.setValue(this.formatDate(this.date));
21558 if (className.indexOf('disabled') < 0) {
21559 this.viewDate.setUTCDate(1);
21560 if (className.indexOf('month') > -1) {
21561 this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
21563 var year = parseInt(html, 10) || 0;
21564 this.viewDate.setUTCFullYear(year);
21568 if(this.singleMode){
21569 this.setValue(this.formatDate(this.viewDate));
21580 //Roo.log(className);
21581 if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
21582 var day = parseInt(html, 10) || 1;
21583 var year = this.viewDate.getUTCFullYear(),
21584 month = this.viewDate.getUTCMonth();
21586 if (className.indexOf('old') > -1) {
21593 } else if (className.indexOf('new') > -1) {
21601 //Roo.log([year,month,day]);
21602 this.date = this.UTCDate(year, month, day,0,0,0,0);
21603 this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
21605 //Roo.log(this.formatDate(this.date));
21606 this.setValue(this.formatDate(this.date));
21613 setStartDate: function(startDate)
21615 this.startDate = startDate || -Infinity;
21616 if (this.startDate !== -Infinity) {
21617 this.startDate = this.parseDate(this.startDate);
21620 this.updateNavArrows();
21623 setEndDate: function(endDate)
21625 this.endDate = endDate || Infinity;
21626 if (this.endDate !== Infinity) {
21627 this.endDate = this.parseDate(this.endDate);
21630 this.updateNavArrows();
21633 setDaysOfWeekDisabled: function(daysOfWeekDisabled)
21635 this.daysOfWeekDisabled = daysOfWeekDisabled || [];
21636 if (typeof(this.daysOfWeekDisabled) !== 'object') {
21637 this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
21639 this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
21640 return parseInt(d, 10);
21643 this.updateNavArrows();
21646 updateNavArrows: function()
21648 if(this.singleMode){
21652 var d = new Date(this.viewDate),
21653 year = d.getUTCFullYear(),
21654 month = d.getUTCMonth();
21656 Roo.each(this.picker().select('.prev', true).elements, function(v){
21658 switch (this.viewMode) {
21661 if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
21667 if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
21674 Roo.each(this.picker().select('.next', true).elements, function(v){
21676 switch (this.viewMode) {
21679 if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
21685 if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
21693 moveMonth: function(date, dir)
21698 var new_date = new Date(date.valueOf()),
21699 day = new_date.getUTCDate(),
21700 month = new_date.getUTCMonth(),
21701 mag = Math.abs(dir),
21703 dir = dir > 0 ? 1 : -1;
21706 // If going back one month, make sure month is not current month
21707 // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
21709 return new_date.getUTCMonth() == month;
21711 // If going forward one month, make sure month is as expected
21712 // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
21714 return new_date.getUTCMonth() != new_month;
21716 new_month = month + dir;
21717 new_date.setUTCMonth(new_month);
21718 // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
21719 if (new_month < 0 || new_month > 11) {
21720 new_month = (new_month + 12) % 12;
21723 // For magnitudes >1, move one month at a time...
21724 for (var i=0; i<mag; i++) {
21725 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
21726 new_date = this.moveMonth(new_date, dir);
21728 // ...then reset the day, keeping it in the new month
21729 new_month = new_date.getUTCMonth();
21730 new_date.setUTCDate(day);
21732 return new_month != new_date.getUTCMonth();
21735 // Common date-resetting loop -- if date is beyond end of month, make it
21738 new_date.setUTCDate(--day);
21739 new_date.setUTCMonth(new_month);
21744 moveYear: function(date, dir)
21746 return this.moveMonth(date, dir*12);
21749 dateWithinRange: function(date)
21751 return date >= this.startDate && date <= this.endDate;
21757 this.picker().remove();
21760 validateValue : function(value)
21762 if(this.getVisibilityEl().hasClass('hidden')){
21766 if(value.length < 1) {
21767 if(this.allowBlank){
21773 if(value.length < this.minLength){
21776 if(value.length > this.maxLength){
21780 var vt = Roo.form.VTypes;
21781 if(!vt[this.vtype](value, this)){
21785 if(typeof this.validator == "function"){
21786 var msg = this.validator(value);
21792 if(this.regex && !this.regex.test(value)){
21796 if(typeof(this.parseDate(value)) == 'undefined'){
21800 if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) {
21804 if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) {
21814 this.date = this.viewDate = '';
21816 Roo.bootstrap.DateField.superclass.setValue.call(this, '');
21821 Roo.apply(Roo.bootstrap.DateField, {
21832 html: '<i class="fa fa-arrow-left"/>'
21842 html: '<i class="fa fa-arrow-right"/>'
21884 days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
21885 daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
21886 daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
21887 months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
21888 monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
21901 navFnc: 'FullYear',
21906 navFnc: 'FullYear',
21911 Roo.apply(Roo.bootstrap.DateField, {
21915 cls: 'datepicker dropdown-menu roo-dynamic shadow',
21919 cls: 'datepicker-days',
21923 cls: 'table-condensed',
21925 Roo.bootstrap.DateField.head,
21929 Roo.bootstrap.DateField.footer
21936 cls: 'datepicker-months',
21940 cls: 'table-condensed',
21942 Roo.bootstrap.DateField.head,
21943 Roo.bootstrap.DateField.content,
21944 Roo.bootstrap.DateField.footer
21951 cls: 'datepicker-years',
21955 cls: 'table-condensed',
21957 Roo.bootstrap.DateField.head,
21958 Roo.bootstrap.DateField.content,
21959 Roo.bootstrap.DateField.footer
21978 * @class Roo.bootstrap.TimeField
21979 * @extends Roo.bootstrap.Input
21980 * Bootstrap DateField class
21984 * Create a new TimeField
21985 * @param {Object} config The config object
21988 Roo.bootstrap.TimeField = function(config){
21989 Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
21993 * Fires when this field show.
21994 * @param {Roo.bootstrap.DateField} thisthis
21995 * @param {Mixed} date The date value
22000 * Fires when this field hide.
22001 * @param {Roo.bootstrap.DateField} this
22002 * @param {Mixed} date The date value
22007 * Fires when select a date.
22008 * @param {Roo.bootstrap.DateField} this
22009 * @param {Mixed} date The date value
22015 Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, {
22018 * @cfg {String} format
22019 * The default time format string which can be overriden for localization support. The format must be
22020 * valid according to {@link Date#parseDate} (defaults to 'H:i').
22024 getAutoCreate : function()
22026 this.after = '<i class="fa far fa-clock"></i>';
22027 return Roo.bootstrap.TimeField.superclass.getAutoCreate.call(this);
22031 onRender: function(ct, position)
22034 Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
22036 this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.TimeField.template);
22038 this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
22040 this.pop = this.picker().select('>.datepicker-time',true).first();
22041 this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
22043 this.picker().on('mousedown', this.onMousedown, this);
22044 this.picker().on('click', this.onClick, this);
22046 this.picker().addClass('datepicker-dropdown');
22051 this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this);
22052 this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this);
22053 this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
22054 this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
22055 this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
22056 this.pop.select('button.ok', true).first().on('click', this.setTime, this);
22060 fireKey: function(e){
22061 if (!this.picker().isVisible()){
22062 if (e.keyCode == 27) { // allow escape to hide and re-show picker
22068 e.preventDefault();
22076 this.onTogglePeriod();
22079 this.onIncrementMinutes();
22082 this.onDecrementMinutes();
22091 onClick: function(e) {
22092 e.stopPropagation();
22093 e.preventDefault();
22096 picker : function()
22098 return this.pickerEl;
22101 fillTime: function()
22103 var time = this.pop.select('tbody', true).first();
22105 time.dom.innerHTML = '';
22120 cls: 'hours-up fa fas fa-chevron-up'
22140 cls: 'minutes-up fa fas fa-chevron-up'
22161 cls: 'timepicker-hour',
22176 cls: 'timepicker-minute',
22191 cls: 'btn btn-primary period',
22213 cls: 'hours-down fa fas fa-chevron-down'
22233 cls: 'minutes-down fa fas fa-chevron-down'
22251 this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
22258 var hours = this.time.getHours();
22259 var minutes = this.time.getMinutes();
22272 hours = hours - 12;
22276 hours = '0' + hours;
22280 minutes = '0' + minutes;
22283 this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
22284 this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
22285 this.pop.select('button', true).first().dom.innerHTML = period;
22291 this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
22293 var cls = ['bottom'];
22295 if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
22302 if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
22306 //this.picker().setXY(20000,20000);
22307 this.picker().addClass(cls.join('-'));
22311 Roo.each(cls, function(c){
22316 _this.picker().alignTo(_this.inputEl(), "tr-br", [0, 10], false);
22317 //_this.picker().setTop(_this.inputEl().getHeight());
22321 _this.picker().alignTo(_this.inputEl(), "br-tr", [0, 10], false);
22323 //_this.picker().setTop(0 - _this.picker().getHeight());
22328 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
22332 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
22340 onFocus : function()
22342 Roo.bootstrap.TimeField.superclass.onFocus.call(this);
22346 onBlur : function()
22348 Roo.bootstrap.TimeField.superclass.onBlur.call(this);
22354 this.picker().show();
22359 this.fireEvent('show', this, this.date);
22364 this.picker().hide();
22367 this.fireEvent('hide', this, this.date);
22370 setTime : function()
22373 this.setValue(this.time.format(this.format));
22375 this.fireEvent('select', this, this.date);
22380 onMousedown: function(e){
22381 e.stopPropagation();
22382 e.preventDefault();
22385 onIncrementHours: function()
22387 Roo.log('onIncrementHours');
22388 this.time = this.time.add(Date.HOUR, 1);
22393 onDecrementHours: function()
22395 Roo.log('onDecrementHours');
22396 this.time = this.time.add(Date.HOUR, -1);
22400 onIncrementMinutes: function()
22402 Roo.log('onIncrementMinutes');
22403 this.time = this.time.add(Date.MINUTE, 1);
22407 onDecrementMinutes: function()
22409 Roo.log('onDecrementMinutes');
22410 this.time = this.time.add(Date.MINUTE, -1);
22414 onTogglePeriod: function()
22416 Roo.log('onTogglePeriod');
22417 this.time = this.time.add(Date.HOUR, 12);
22425 Roo.apply(Roo.bootstrap.TimeField, {
22429 cls: 'datepicker dropdown-menu',
22433 cls: 'datepicker-time',
22437 cls: 'table-condensed',
22466 cls: 'btn btn-info ok',
22494 * @class Roo.bootstrap.MonthField
22495 * @extends Roo.bootstrap.Input
22496 * Bootstrap MonthField class
22498 * @cfg {String} language default en
22501 * Create a new MonthField
22502 * @param {Object} config The config object
22505 Roo.bootstrap.MonthField = function(config){
22506 Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
22511 * Fires when this field show.
22512 * @param {Roo.bootstrap.MonthField} this
22513 * @param {Mixed} date The date value
22518 * Fires when this field hide.
22519 * @param {Roo.bootstrap.MonthField} this
22520 * @param {Mixed} date The date value
22525 * Fires when select a date.
22526 * @param {Roo.bootstrap.MonthField} this
22527 * @param {String} oldvalue The old value
22528 * @param {String} newvalue The new value
22534 Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
22536 onRender: function(ct, position)
22539 Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
22541 this.language = this.language || 'en';
22542 this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
22543 this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
22545 this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
22546 this.isInline = false;
22547 this.isInput = true;
22548 this.component = this.el.select('.add-on', true).first() || false;
22549 this.component = (this.component && this.component.length === 0) ? false : this.component;
22550 this.hasInput = this.component && this.inputEL().length;
22552 this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
22554 this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
22556 this.picker().on('mousedown', this.onMousedown, this);
22557 this.picker().on('click', this.onClick, this);
22559 this.picker().addClass('datepicker-dropdown');
22561 Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
22562 v.setStyle('width', '189px');
22569 if(this.isInline) {
22575 setValue: function(v, suppressEvent)
22577 var o = this.getValue();
22579 Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
22583 if(suppressEvent !== true){
22584 this.fireEvent('select', this, o, v);
22589 getValue: function()
22594 onClick: function(e)
22596 e.stopPropagation();
22597 e.preventDefault();
22599 var target = e.getTarget();
22601 if(target.nodeName.toLowerCase() === 'i'){
22602 target = Roo.get(target).dom.parentNode;
22605 var nodeName = target.nodeName;
22606 var className = target.className;
22607 var html = target.innerHTML;
22609 if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
22613 this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
22615 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
22621 picker : function()
22623 return this.pickerEl;
22626 fillMonths: function()
22629 var months = this.picker().select('>.datepicker-months td', true).first();
22631 months.dom.innerHTML = '';
22637 html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
22640 months.createChild(month);
22649 if(typeof(this.vIndex) == 'undefined' && this.value.length){
22650 this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
22653 Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
22654 e.removeClass('active');
22656 if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
22657 e.addClass('active');
22664 if(this.isInline) {
22668 this.picker().removeClass(['bottom', 'top']);
22670 if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
22672 * place to the top of element!
22676 this.picker().addClass('top');
22677 this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
22682 this.picker().addClass('bottom');
22684 this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
22687 onFocus : function()
22689 Roo.bootstrap.MonthField.superclass.onFocus.call(this);
22693 onBlur : function()
22695 Roo.bootstrap.MonthField.superclass.onBlur.call(this);
22697 var d = this.inputEl().getValue();
22706 this.picker().show();
22707 this.picker().select('>.datepicker-months', true).first().show();
22711 this.fireEvent('show', this, this.date);
22716 if(this.isInline) {
22719 this.picker().hide();
22720 this.fireEvent('hide', this, this.date);
22724 onMousedown: function(e)
22726 e.stopPropagation();
22727 e.preventDefault();
22732 Roo.bootstrap.MonthField.superclass.keyup.call(this);
22736 fireKey: function(e)
22738 if (!this.picker().isVisible()){
22739 if (e.keyCode == 27) {// allow escape to hide and re-show picker
22750 e.preventDefault();
22754 dir = e.keyCode == 37 ? -1 : 1;
22756 this.vIndex = this.vIndex + dir;
22758 if(this.vIndex < 0){
22762 if(this.vIndex > 11){
22766 if(isNaN(this.vIndex)){
22770 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
22776 dir = e.keyCode == 38 ? -1 : 1;
22778 this.vIndex = this.vIndex + dir * 4;
22780 if(this.vIndex < 0){
22784 if(this.vIndex > 11){
22788 if(isNaN(this.vIndex)){
22792 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
22797 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
22798 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
22802 e.preventDefault();
22805 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
22806 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
22822 this.picker().remove();
22827 Roo.apply(Roo.bootstrap.MonthField, {
22846 months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
22847 monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
22852 Roo.apply(Roo.bootstrap.MonthField, {
22856 cls: 'datepicker dropdown-menu roo-dynamic',
22860 cls: 'datepicker-months',
22864 cls: 'table-condensed',
22866 Roo.bootstrap.DateField.content
22886 * @class Roo.bootstrap.CheckBox
22887 * @extends Roo.bootstrap.Input
22888 * Bootstrap CheckBox class
22890 * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
22891 * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
22892 * @cfg {String} boxLabel The text that appears beside the checkbox
22893 * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
22894 * @cfg {Boolean} checked initnal the element
22895 * @cfg {Boolean} inline inline the element (default false)
22896 * @cfg {String} groupId the checkbox group id // normal just use for checkbox
22897 * @cfg {String} tooltip label tooltip
22900 * Create a new CheckBox
22901 * @param {Object} config The config object
22904 Roo.bootstrap.CheckBox = function(config){
22905 Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
22910 * Fires when the element is checked or unchecked.
22911 * @param {Roo.bootstrap.CheckBox} this This input
22912 * @param {Boolean} checked The new checked value
22917 * Fires when the element is click.
22918 * @param {Roo.bootstrap.CheckBox} this This input
22925 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
22927 inputType: 'checkbox',
22936 // checkbox success does not make any sense really..
22941 getAutoCreate : function()
22943 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
22949 cfg.cls = 'form-group form-check ' + this.inputType; //input-group
22952 cfg.cls += ' ' + this.inputType + '-inline form-check-inline';
22958 type : this.inputType,
22959 value : this.inputValue,
22960 cls : 'roo-' + this.inputType, //'form-box',
22961 placeholder : this.placeholder || ''
22965 if(this.inputType != 'radio'){
22969 cls : 'roo-hidden-value',
22970 value : this.checked ? this.inputValue : this.valueOff
22975 if (this.weight) { // Validity check?
22976 cfg.cls += " " + this.inputType + "-" + this.weight;
22979 if (this.disabled) {
22980 input.disabled=true;
22984 input.checked = this.checked;
22989 input.name = this.name;
22991 if(this.inputType != 'radio'){
22992 hidden.name = this.name;
22993 input.name = '_hidden_' + this.name;
22998 input.cls += ' input-' + this.size;
23003 ['xs','sm','md','lg'].map(function(size){
23004 if (settings[size]) {
23005 cfg.cls += ' col-' + size + '-' + settings[size];
23009 var inputblock = input;
23011 if (this.before || this.after) {
23014 cls : 'input-group',
23019 inputblock.cn.push({
23021 cls : 'input-group-addon',
23026 inputblock.cn.push(input);
23028 if(this.inputType != 'radio'){
23029 inputblock.cn.push(hidden);
23033 inputblock.cn.push({
23035 cls : 'input-group-addon',
23041 var boxLabelCfg = false;
23047 //'for': id, // box label is handled by onclick - so no for...
23049 html: this.boxLabel
23052 boxLabelCfg.tooltip = this.tooltip;
23058 if (align ==='left' && this.fieldLabel.length) {
23059 // Roo.log("left and has label");
23064 cls : 'control-label',
23065 html : this.fieldLabel
23076 cfg.cn[1].cn.push(boxLabelCfg);
23079 if(this.labelWidth > 12){
23080 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
23083 if(this.labelWidth < 13 && this.labelmd == 0){
23084 this.labelmd = this.labelWidth;
23087 if(this.labellg > 0){
23088 cfg.cn[0].cls += ' col-lg-' + this.labellg;
23089 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
23092 if(this.labelmd > 0){
23093 cfg.cn[0].cls += ' col-md-' + this.labelmd;
23094 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
23097 if(this.labelsm > 0){
23098 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
23099 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
23102 if(this.labelxs > 0){
23103 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
23104 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
23107 } else if ( this.fieldLabel.length) {
23108 // Roo.log(" label");
23112 tag: this.boxLabel ? 'span' : 'label',
23114 cls: 'control-label box-input-label',
23115 //cls : 'input-group-addon',
23116 html : this.fieldLabel
23123 cfg.cn.push(boxLabelCfg);
23128 // Roo.log(" no label && no align");
23129 cfg.cn = [ inputblock ] ;
23131 cfg.cn.push(boxLabelCfg);
23139 if(this.inputType != 'radio'){
23140 cfg.cn.push(hidden);
23148 * return the real input element.
23150 inputEl: function ()
23152 return this.el.select('input.roo-' + this.inputType,true).first();
23154 hiddenEl: function ()
23156 return this.el.select('input.roo-hidden-value',true).first();
23159 labelEl: function()
23161 return this.el.select('label.control-label',true).first();
23163 /* depricated... */
23167 return this.labelEl();
23170 boxLabelEl: function()
23172 return this.el.select('label.box-label',true).first();
23175 initEvents : function()
23177 // Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
23179 this.inputEl().on('click', this.onClick, this);
23181 if (this.boxLabel) {
23182 this.el.select('label.box-label',true).first().on('click', this.onClick, this);
23185 this.startValue = this.getValue();
23188 Roo.bootstrap.CheckBox.register(this);
23192 onClick : function(e)
23194 if(this.fireEvent('click', this, e) !== false){
23195 this.setChecked(!this.checked);
23200 setChecked : function(state,suppressEvent)
23202 this.startValue = this.getValue();
23204 if(this.inputType == 'radio'){
23206 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23207 e.dom.checked = false;
23210 this.inputEl().dom.checked = true;
23212 this.inputEl().dom.value = this.inputValue;
23214 if(suppressEvent !== true){
23215 this.fireEvent('check', this, true);
23223 this.checked = state;
23225 this.inputEl().dom.checked = state;
23228 this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
23230 if(suppressEvent !== true){
23231 this.fireEvent('check', this, state);
23237 getValue : function()
23239 if(this.inputType == 'radio'){
23240 return this.getGroupValue();
23243 return this.hiddenEl().dom.value;
23247 getGroupValue : function()
23249 if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
23253 return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
23256 setValue : function(v,suppressEvent)
23258 if(this.inputType == 'radio'){
23259 this.setGroupValue(v, suppressEvent);
23263 this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
23268 setGroupValue : function(v, suppressEvent)
23270 this.startValue = this.getValue();
23272 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23273 e.dom.checked = false;
23275 if(e.dom.value == v){
23276 e.dom.checked = true;
23280 if(suppressEvent !== true){
23281 this.fireEvent('check', this, true);
23289 validate : function()
23291 if(this.getVisibilityEl().hasClass('hidden')){
23297 (this.inputType == 'radio' && this.validateRadio()) ||
23298 (this.inputType == 'checkbox' && this.validateCheckbox())
23304 this.markInvalid();
23308 validateRadio : function()
23310 if(this.getVisibilityEl().hasClass('hidden')){
23314 if(this.allowBlank){
23320 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23321 if(!e.dom.checked){
23333 validateCheckbox : function()
23336 return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
23337 //return (this.getValue() == this.inputValue) ? true : false;
23340 var group = Roo.bootstrap.CheckBox.get(this.groupId);
23348 for(var i in group){
23349 if(group[i].el.isVisible(true)){
23357 for(var i in group){
23362 r = (group[i].getValue() == group[i].inputValue) ? true : false;
23369 * Mark this field as valid
23371 markValid : function()
23375 this.fireEvent('valid', this);
23377 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
23380 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
23387 if(this.inputType == 'radio'){
23388 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23389 var fg = e.findParent('.form-group', false, true);
23390 if (Roo.bootstrap.version == 3) {
23391 fg.removeClass([_this.invalidClass, _this.validClass]);
23392 fg.addClass(_this.validClass);
23394 fg.removeClass(['is-valid', 'is-invalid']);
23395 fg.addClass('is-valid');
23403 var fg = this.el.findParent('.form-group', false, true);
23404 if (Roo.bootstrap.version == 3) {
23405 fg.removeClass([this.invalidClass, this.validClass]);
23406 fg.addClass(this.validClass);
23408 fg.removeClass(['is-valid', 'is-invalid']);
23409 fg.addClass('is-valid');
23414 var group = Roo.bootstrap.CheckBox.get(this.groupId);
23420 for(var i in group){
23421 var fg = group[i].el.findParent('.form-group', false, true);
23422 if (Roo.bootstrap.version == 3) {
23423 fg.removeClass([this.invalidClass, this.validClass]);
23424 fg.addClass(this.validClass);
23426 fg.removeClass(['is-valid', 'is-invalid']);
23427 fg.addClass('is-valid');
23433 * Mark this field as invalid
23434 * @param {String} msg The validation message
23436 markInvalid : function(msg)
23438 if(this.allowBlank){
23444 this.fireEvent('invalid', this, msg);
23446 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
23449 label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
23453 label.markInvalid();
23456 if(this.inputType == 'radio'){
23458 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23459 var fg = e.findParent('.form-group', false, true);
23460 if (Roo.bootstrap.version == 3) {
23461 fg.removeClass([_this.invalidClass, _this.validClass]);
23462 fg.addClass(_this.invalidClass);
23464 fg.removeClass(['is-invalid', 'is-valid']);
23465 fg.addClass('is-invalid');
23473 var fg = this.el.findParent('.form-group', false, true);
23474 if (Roo.bootstrap.version == 3) {
23475 fg.removeClass([_this.invalidClass, _this.validClass]);
23476 fg.addClass(_this.invalidClass);
23478 fg.removeClass(['is-invalid', 'is-valid']);
23479 fg.addClass('is-invalid');
23484 var group = Roo.bootstrap.CheckBox.get(this.groupId);
23490 for(var i in group){
23491 var fg = group[i].el.findParent('.form-group', false, true);
23492 if (Roo.bootstrap.version == 3) {
23493 fg.removeClass([_this.invalidClass, _this.validClass]);
23494 fg.addClass(_this.invalidClass);
23496 fg.removeClass(['is-invalid', 'is-valid']);
23497 fg.addClass('is-invalid');
23503 clearInvalid : function()
23505 Roo.bootstrap.Input.prototype.clearInvalid.call(this);
23507 // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
23509 var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
23511 if (label && label.iconEl) {
23512 label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
23513 label.iconEl.removeClass(['is-invalid', 'is-valid']);
23517 disable : function()
23519 if(this.inputType != 'radio'){
23520 Roo.bootstrap.CheckBox.superclass.disable.call(this);
23527 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23528 _this.getActionEl().addClass(this.disabledClass);
23529 e.dom.disabled = true;
23533 this.disabled = true;
23534 this.fireEvent("disable", this);
23538 enable : function()
23540 if(this.inputType != 'radio'){
23541 Roo.bootstrap.CheckBox.superclass.enable.call(this);
23548 Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
23549 _this.getActionEl().removeClass(this.disabledClass);
23550 e.dom.disabled = false;
23554 this.disabled = false;
23555 this.fireEvent("enable", this);
23559 setBoxLabel : function(v)
23564 this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
23570 Roo.apply(Roo.bootstrap.CheckBox, {
23575 * register a CheckBox Group
23576 * @param {Roo.bootstrap.CheckBox} the CheckBox to add
23578 register : function(checkbox)
23580 if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
23581 this.groups[checkbox.groupId] = {};
23584 if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
23588 this.groups[checkbox.groupId][checkbox.name] = checkbox;
23592 * fetch a CheckBox Group based on the group ID
23593 * @param {string} the group ID
23594 * @returns {Roo.bootstrap.CheckBox} the CheckBox group
23596 get: function(groupId) {
23597 if (typeof(this.groups[groupId]) == 'undefined') {
23601 return this.groups[groupId] ;
23614 * @class Roo.bootstrap.Radio
23615 * @extends Roo.bootstrap.Component
23616 * Bootstrap Radio class
23617 * @cfg {String} boxLabel - the label associated
23618 * @cfg {String} value - the value of radio
23621 * Create a new Radio
23622 * @param {Object} config The config object
23624 Roo.bootstrap.Radio = function(config){
23625 Roo.bootstrap.Radio.superclass.constructor.call(this, config);
23629 Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
23635 getAutoCreate : function()
23639 cls : 'form-group radio',
23644 html : this.boxLabel
23652 initEvents : function()
23654 this.parent().register(this);
23656 this.el.on('click', this.onClick, this);
23660 onClick : function(e)
23662 if(this.parent().fireEvent('click', this.parent(), this, e) !== false){
23663 this.setChecked(true);
23667 setChecked : function(state, suppressEvent)
23669 this.parent().setValue(this.value, suppressEvent);
23673 setBoxLabel : function(v)
23678 this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
23693 * @class Roo.bootstrap.SecurePass
23694 * @extends Roo.bootstrap.Input
23695 * Bootstrap SecurePass class
23699 * Create a new SecurePass
23700 * @param {Object} config The config object
23703 Roo.bootstrap.SecurePass = function (config) {
23704 // these go here, so the translation tool can replace them..
23706 PwdEmpty: "Please type a password, and then retype it to confirm.",
23707 PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
23708 PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
23709 PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
23710 IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
23711 FNInPwd: "Your password can't contain your first name. Please type a different password.",
23712 LNInPwd: "Your password can't contain your last name. Please type a different password.",
23713 TooWeak: "Your password is Too Weak."
23715 this.meterLabel = "Password strength:";
23716 this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
23717 this.meterClass = [
23718 "roo-password-meter-tooweak",
23719 "roo-password-meter-weak",
23720 "roo-password-meter-medium",
23721 "roo-password-meter-strong",
23722 "roo-password-meter-grey"
23727 Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
23730 Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
23732 * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
23734 * PwdEmpty: "Please type a password, and then retype it to confirm.",
23735 * PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
23736 * PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
23737 * PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
23738 * IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
23739 * FNInPwd: "Your password can't contain your first name. Please type a different password.",
23740 * LNInPwd: "Your password can't contain your last name. Please type a different password."
23750 * @cfg {String/Object} Label for the strength meter (defaults to
23751 * 'Password strength:')
23756 * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
23757 * ['Weak', 'Medium', 'Strong'])
23760 pwdStrengths: false,
23773 initEvents: function ()
23775 Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
23777 if (this.el.is('input[type=password]') && Roo.isSafari) {
23778 this.el.on('keydown', this.SafariOnKeyDown, this);
23781 this.el.on('keyup', this.checkStrength, this, {buffer: 50});
23784 onRender: function (ct, position)
23786 Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
23787 this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
23788 this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
23790 this.trigger.createChild({
23795 cls: 'roo-password-meter-grey col-xs-12',
23798 //width: this.meterWidth + 'px'
23802 cls: 'roo-password-meter-text'
23808 if (this.hideTrigger) {
23809 this.trigger.setDisplayed(false);
23811 this.setSize(this.width || '', this.height || '');
23814 onDestroy: function ()
23816 if (this.trigger) {
23817 this.trigger.removeAllListeners();
23818 this.trigger.remove();
23821 this.wrap.remove();
23823 Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
23826 checkStrength: function ()
23828 var pwd = this.inputEl().getValue();
23829 if (pwd == this._lastPwd) {
23834 if (this.ClientSideStrongPassword(pwd)) {
23836 } else if (this.ClientSideMediumPassword(pwd)) {
23838 } else if (this.ClientSideWeakPassword(pwd)) {
23844 Roo.log('strength1: ' + strength);
23846 //var pm = this.trigger.child('div/div/div').dom;
23847 var pm = this.trigger.child('div/div');
23848 pm.removeClass(this.meterClass);
23849 pm.addClass(this.meterClass[strength]);
23852 var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;
23854 pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
23856 this._lastPwd = pwd;
23860 Roo.bootstrap.SecurePass.superclass.reset.call(this);
23862 this._lastPwd = '';
23864 var pm = this.trigger.child('div/div');
23865 pm.removeClass(this.meterClass);
23866 pm.addClass('roo-password-meter-grey');
23869 var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;
23872 this.inputEl().dom.type='password';
23875 validateValue: function (value)
23877 if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
23880 if (value.length == 0) {
23881 if (this.allowBlank) {
23882 this.clearInvalid();
23886 this.markInvalid(this.errors.PwdEmpty);
23887 this.errorMsg = this.errors.PwdEmpty;
23895 if (!value.match(/[\x21-\x7e]+/)) {
23896 this.markInvalid(this.errors.PwdBadChar);
23897 this.errorMsg = this.errors.PwdBadChar;
23900 if (value.length < 6) {
23901 this.markInvalid(this.errors.PwdShort);
23902 this.errorMsg = this.errors.PwdShort;
23905 if (value.length > 16) {
23906 this.markInvalid(this.errors.PwdLong);
23907 this.errorMsg = this.errors.PwdLong;
23911 if (this.ClientSideStrongPassword(value)) {
23913 } else if (this.ClientSideMediumPassword(value)) {
23915 } else if (this.ClientSideWeakPassword(value)) {
23922 if (strength < 2) {
23923 //this.markInvalid(this.errors.TooWeak);
23924 this.errorMsg = this.errors.TooWeak;
23929 console.log('strength2: ' + strength);
23931 //var pm = this.trigger.child('div/div/div').dom;
23933 var pm = this.trigger.child('div/div');
23934 pm.removeClass(this.meterClass);
23935 pm.addClass(this.meterClass[strength]);
23937 var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;
23939 pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
23941 this.errorMsg = '';
23945 CharacterSetChecks: function (type)
23948 this.fResult = false;
23951 isctype: function (character, type)
23954 case this.kCapitalLetter:
23955 if (character >= 'A' && character <= 'Z') {
23960 case this.kSmallLetter:
23961 if (character >= 'a' && character <= 'z') {
23967 if (character >= '0' && character <= '9') {
23972 case this.kPunctuation:
23973 if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
23984 IsLongEnough: function (pwd, size)
23986 return !(pwd == null || isNaN(size) || pwd.length < size);
23989 SpansEnoughCharacterSets: function (word, nb)
23991 if (!this.IsLongEnough(word, nb))
23996 var characterSetChecks = new Array(
23997 new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
23998 new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation)
24001 for (var index = 0; index < word.length; ++index) {
24002 for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
24003 if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
24004 characterSetChecks[nCharSet].fResult = true;
24011 for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
24012 if (characterSetChecks[nCharSet].fResult) {
24017 if (nCharSets < nb) {
24023 ClientSideStrongPassword: function (pwd)
24025 return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
24028 ClientSideMediumPassword: function (pwd)
24030 return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
24033 ClientSideWeakPassword: function (pwd)
24035 return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
24038 })//<script type="text/javascript">
24041 * Based Ext JS Library 1.1.1
24042 * Copyright(c) 2006-2007, Ext JS, LLC.
24048 * @class Roo.HtmlEditorCore
24049 * @extends Roo.Component
24050 * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
24052 * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
24055 Roo.HtmlEditorCore = function(config){
24058 Roo.HtmlEditorCore.superclass.constructor.call(this, config);
24063 * @event initialize
24064 * Fires when the editor is fully initialized (including the iframe)
24065 * @param {Roo.HtmlEditorCore} this
24070 * Fires when the editor is first receives the focus. Any insertion must wait
24071 * until after this event.
24072 * @param {Roo.HtmlEditorCore} this
24076 * @event beforesync
24077 * Fires before the textarea is updated with content from the editor iframe. Return false
24078 * to cancel the sync.
24079 * @param {Roo.HtmlEditorCore} this
24080 * @param {String} html
24084 * @event beforepush
24085 * Fires before the iframe editor is updated with content from the textarea. Return false
24086 * to cancel the push.
24087 * @param {Roo.HtmlEditorCore} this
24088 * @param {String} html
24093 * Fires when the textarea is updated with content from the editor iframe.
24094 * @param {Roo.HtmlEditorCore} this
24095 * @param {String} html
24100 * Fires when the iframe editor is updated with content from the textarea.
24101 * @param {Roo.HtmlEditorCore} this
24102 * @param {String} html
24107 * @event editorevent
24108 * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
24109 * @param {Roo.HtmlEditorCore} this
24115 // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
24117 // defaults : white / black...
24118 this.applyBlacklists();
24125 Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
24129 * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
24135 * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
24140 * @cfg {Number} height (in pixels)
24144 * @cfg {Number} width (in pixels)
24149 * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
24152 stylesheets: false,
24157 // private properties
24158 validationEvent : false,
24160 initialized : false,
24162 sourceEditMode : false,
24163 onFocus : Roo.emptyFn,
24165 hideMode:'offsets',
24169 // blacklist + whitelisted elements..
24176 * Protected method that will not generally be called directly. It
24177 * is called when the editor initializes the iframe with HTML contents. Override this method if you
24178 * want to change the initialization markup of the iframe (e.g. to add stylesheets).
24180 getDocMarkup : function(){
24184 // inherit styels from page...??
24185 if (this.stylesheets === false) {
24187 Roo.get(document.head).select('style').each(function(node) {
24188 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
24191 Roo.get(document.head).select('link').each(function(node) {
24192 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
24195 } else if (!this.stylesheets.length) {
24197 st = '<style type="text/css">' +
24198 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
24201 for (var i in this.stylesheets) {
24202 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
24207 st += '<style type="text/css">' +
24208 'IMG { cursor: pointer } ' +
24211 var cls = 'roo-htmleditor-body';
24213 if(this.bodyCls.length){
24214 cls += ' ' + this.bodyCls;
24217 return '<html><head>' + st +
24218 //<style type="text/css">' +
24219 //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
24221 ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
24225 onRender : function(ct, position)
24228 //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
24229 this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
24232 this.el.dom.style.border = '0 none';
24233 this.el.dom.setAttribute('tabIndex', -1);
24234 this.el.addClass('x-hidden hide');
24238 if(Roo.isIE){ // fix IE 1px bogus margin
24239 this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
24243 this.frameId = Roo.id();
24247 var iframe = this.owner.wrap.createChild({
24249 cls: 'form-control', // bootstrap..
24251 name: this.frameId,
24252 frameBorder : 'no',
24253 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
24258 this.iframe = iframe.dom;
24260 this.assignDocWin();
24262 this.doc.designMode = 'on';
24265 this.doc.write(this.getDocMarkup());
24269 var task = { // must defer to wait for browser to be ready
24271 //console.log("run task?" + this.doc.readyState);
24272 this.assignDocWin();
24273 if(this.doc.body || this.doc.readyState == 'complete'){
24275 this.doc.designMode="on";
24279 Roo.TaskMgr.stop(task);
24280 this.initEditor.defer(10, this);
24287 Roo.TaskMgr.start(task);
24292 onResize : function(w, h)
24294 Roo.log('resize: ' +w + ',' + h );
24295 //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
24299 if(typeof w == 'number'){
24301 this.iframe.style.width = w + 'px';
24303 if(typeof h == 'number'){
24305 this.iframe.style.height = h + 'px';
24307 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
24314 * Toggles the editor between standard and source edit mode.
24315 * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
24317 toggleSourceEdit : function(sourceEditMode){
24319 this.sourceEditMode = sourceEditMode === true;
24321 if(this.sourceEditMode){
24323 Roo.get(this.iframe).addClass(['x-hidden','hide']); //FIXME - what's the BS styles for these
24326 Roo.get(this.iframe).removeClass(['x-hidden','hide']);
24327 //this.iframe.className = '';
24330 //this.setSize(this.owner.wrap.getSize());
24331 //this.fireEvent('editmodechange', this, this.sourceEditMode);
24338 * Protected method that will not generally be called directly. If you need/want
24339 * custom HTML cleanup, this is the method you should override.
24340 * @param {String} html The HTML to be cleaned
24341 * return {String} The cleaned HTML
24343 cleanHtml : function(html){
24344 html = String(html);
24345 if(html.length > 5){
24346 if(Roo.isSafari){ // strip safari nonsense
24347 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
24350 if(html == ' '){
24357 * HTML Editor -> Textarea
24358 * Protected method that will not generally be called directly. Syncs the contents
24359 * of the editor iframe with the textarea.
24361 syncValue : function(){
24362 if(this.initialized){
24363 var bd = (this.doc.body || this.doc.documentElement);
24364 //this.cleanUpPaste(); -- this is done else where and causes havoc..
24365 var html = bd.innerHTML;
24367 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
24368 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
24370 html = '<div style="'+m[0]+'">' + html + '</div>';
24373 html = this.cleanHtml(html);
24374 // fix up the special chars.. normaly like back quotes in word...
24375 // however we do not want to do this with chinese..
24376 html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
24378 var cc = match.charCodeAt();
24380 // Get the character value, handling surrogate pairs
24381 if (match.length == 2) {
24382 // It's a surrogate pair, calculate the Unicode code point
24383 var high = match.charCodeAt(0) - 0xD800;
24384 var low = match.charCodeAt(1) - 0xDC00;
24385 cc = (high * 0x400) + low + 0x10000;
24387 (cc >= 0x4E00 && cc < 0xA000 ) ||
24388 (cc >= 0x3400 && cc < 0x4E00 ) ||
24389 (cc >= 0xf900 && cc < 0xfb00 )
24394 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
24395 return "&#" + cc + ";";
24402 if(this.owner.fireEvent('beforesync', this, html) !== false){
24403 this.el.dom.value = html;
24404 this.owner.fireEvent('sync', this, html);
24410 * Protected method that will not generally be called directly. Pushes the value of the textarea
24411 * into the iframe editor.
24413 pushValue : function(){
24414 if(this.initialized){
24415 var v = this.el.dom.value.trim();
24417 // if(v.length < 1){
24421 if(this.owner.fireEvent('beforepush', this, v) !== false){
24422 var d = (this.doc.body || this.doc.documentElement);
24424 this.cleanUpPaste();
24425 this.el.dom.value = d.innerHTML;
24426 this.owner.fireEvent('push', this, v);
24432 deferFocus : function(){
24433 this.focus.defer(10, this);
24437 focus : function(){
24438 if(this.win && !this.sourceEditMode){
24445 assignDocWin: function()
24447 var iframe = this.iframe;
24450 this.doc = iframe.contentWindow.document;
24451 this.win = iframe.contentWindow;
24453 // if (!Roo.get(this.frameId)) {
24456 // this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
24457 // this.win = Roo.get(this.frameId).dom.contentWindow;
24459 if (!Roo.get(this.frameId) && !iframe.contentDocument) {
24463 this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
24464 this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
24469 initEditor : function(){
24470 //console.log("INIT EDITOR");
24471 this.assignDocWin();
24475 this.doc.designMode="on";
24477 this.doc.write(this.getDocMarkup());
24480 var dbody = (this.doc.body || this.doc.documentElement);
24481 //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
24482 // this copies styles from the containing element into thsi one..
24483 // not sure why we need all of this..
24484 //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
24486 //var ss = this.el.getStyles( 'background-image', 'background-repeat');
24487 //ss['background-attachment'] = 'fixed'; // w3c
24488 dbody.bgProperties = 'fixed'; // ie
24489 //Roo.DomHelper.applyStyles(dbody, ss);
24490 Roo.EventManager.on(this.doc, {
24491 //'mousedown': this.onEditorEvent,
24492 'mouseup': this.onEditorEvent,
24493 'dblclick': this.onEditorEvent,
24494 'click': this.onEditorEvent,
24495 'keyup': this.onEditorEvent,
24500 Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
24502 if(Roo.isIE || Roo.isSafari || Roo.isOpera){
24503 Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
24505 this.initialized = true;
24507 this.owner.fireEvent('initialize', this);
24512 onDestroy : function(){
24518 //for (var i =0; i < this.toolbars.length;i++) {
24519 // // fixme - ask toolbars for heights?
24520 // this.toolbars[i].onDestroy();
24523 //this.wrap.dom.innerHTML = '';
24524 //this.wrap.remove();
24529 onFirstFocus : function(){
24531 this.assignDocWin();
24534 this.activated = true;
24537 if(Roo.isGecko){ // prevent silly gecko errors
24539 var s = this.win.getSelection();
24540 if(!s.focusNode || s.focusNode.nodeType != 3){
24541 var r = s.getRangeAt(0);
24542 r.selectNodeContents((this.doc.body || this.doc.documentElement));
24547 this.execCmd('useCSS', true);
24548 this.execCmd('styleWithCSS', false);
24551 this.owner.fireEvent('activate', this);
24555 adjustFont: function(btn){
24556 var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
24557 //if(Roo.isSafari){ // safari
24560 var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
24561 if(Roo.isSafari){ // safari
24562 var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
24563 v = (v < 10) ? 10 : v;
24564 v = (v > 48) ? 48 : v;
24565 v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
24570 v = Math.max(1, v+adjust);
24572 this.execCmd('FontSize', v );
24575 onEditorEvent : function(e)
24577 this.owner.fireEvent('editorevent', this, e);
24578 // this.updateToolbar();
24579 this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
24582 insertTag : function(tg)
24584 // could be a bit smarter... -> wrap the current selected tRoo..
24585 if (tg.toLowerCase() == 'span' ||
24586 tg.toLowerCase() == 'code' ||
24587 tg.toLowerCase() == 'sup' ||
24588 tg.toLowerCase() == 'sub'
24591 range = this.createRange(this.getSelection());
24592 var wrappingNode = this.doc.createElement(tg.toLowerCase());
24593 wrappingNode.appendChild(range.extractContents());
24594 range.insertNode(wrappingNode);
24601 this.execCmd("formatblock", tg);
24605 insertText : function(txt)
24609 var range = this.createRange();
24610 range.deleteContents();
24611 //alert(Sender.getAttribute('label'));
24613 range.insertNode(this.doc.createTextNode(txt));
24619 * Executes a Midas editor command on the editor document and performs necessary focus and
24620 * toolbar updates. <b>This should only be called after the editor is initialized.</b>
24621 * @param {String} cmd The Midas command
24622 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
24624 relayCmd : function(cmd, value){
24626 this.execCmd(cmd, value);
24627 this.owner.fireEvent('editorevent', this);
24628 //this.updateToolbar();
24629 this.owner.deferFocus();
24633 * Executes a Midas editor command directly on the editor document.
24634 * For visual commands, you should use {@link #relayCmd} instead.
24635 * <b>This should only be called after the editor is initialized.</b>
24636 * @param {String} cmd The Midas command
24637 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
24639 execCmd : function(cmd, value){
24640 this.doc.execCommand(cmd, false, value === undefined ? null : value);
24647 * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
24649 * @param {String} text | dom node..
24651 insertAtCursor : function(text)
24654 if(!this.activated){
24660 var r = this.doc.selection.createRange();
24671 if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
24675 // from jquery ui (MIT licenced)
24677 var win = this.win;
24679 if (win.getSelection && win.getSelection().getRangeAt) {
24680 range = win.getSelection().getRangeAt(0);
24681 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
24682 range.insertNode(node);
24683 } else if (win.document.selection && win.document.selection.createRange) {
24684 // no firefox support
24685 var txt = typeof(text) == 'string' ? text : text.outerHTML;
24686 win.document.selection.createRange().pasteHTML(txt);
24688 // no firefox support
24689 var txt = typeof(text) == 'string' ? text : text.outerHTML;
24690 this.execCmd('InsertHTML', txt);
24699 mozKeyPress : function(e){
24701 var c = e.getCharCode(), cmd;
24704 c = String.fromCharCode(c).toLowerCase();
24718 this.cleanUpPaste.defer(100, this);
24726 e.preventDefault();
24734 fixKeys : function(){ // load time branching for fastest keydown performance
24736 return function(e){
24737 var k = e.getKey(), r;
24740 r = this.doc.selection.createRange();
24743 r.pasteHTML('    ');
24750 r = this.doc.selection.createRange();
24752 var target = r.parentElement();
24753 if(!target || target.tagName.toLowerCase() != 'li'){
24755 r.pasteHTML('<br />');
24761 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
24762 this.cleanUpPaste.defer(100, this);
24768 }else if(Roo.isOpera){
24769 return function(e){
24770 var k = e.getKey();
24774 this.execCmd('InsertHTML','    ');
24777 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
24778 this.cleanUpPaste.defer(100, this);
24783 }else if(Roo.isSafari){
24784 return function(e){
24785 var k = e.getKey();
24789 this.execCmd('InsertText','\t');
24793 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
24794 this.cleanUpPaste.defer(100, this);
24802 getAllAncestors: function()
24804 var p = this.getSelectedNode();
24807 a.push(p); // push blank onto stack..
24808 p = this.getParentElement();
24812 while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
24816 a.push(this.doc.body);
24820 lastSelNode : false,
24823 getSelection : function()
24825 this.assignDocWin();
24826 return Roo.isIE ? this.doc.selection : this.win.getSelection();
24829 getSelectedNode: function()
24831 // this may only work on Gecko!!!
24833 // should we cache this!!!!
24838 var range = this.createRange(this.getSelection()).cloneRange();
24841 var parent = range.parentElement();
24843 var testRange = range.duplicate();
24844 testRange.moveToElementText(parent);
24845 if (testRange.inRange(range)) {
24848 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
24851 parent = parent.parentElement;
24856 // is ancestor a text element.
24857 var ac = range.commonAncestorContainer;
24858 if (ac.nodeType == 3) {
24859 ac = ac.parentNode;
24862 var ar = ac.childNodes;
24865 var other_nodes = [];
24866 var has_other_nodes = false;
24867 for (var i=0;i<ar.length;i++) {
24868 if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
24871 // fullly contained node.
24873 if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
24878 // probably selected..
24879 if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
24880 other_nodes.push(ar[i]);
24884 if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
24889 has_other_nodes = true;
24891 if (!nodes.length && other_nodes.length) {
24892 nodes= other_nodes;
24894 if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
24900 createRange: function(sel)
24902 // this has strange effects when using with
24903 // top toolbar - not sure if it's a great idea.
24904 //this.editor.contentWindow.focus();
24905 if (typeof sel != "undefined") {
24907 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
24909 return this.doc.createRange();
24912 return this.doc.createRange();
24915 getParentElement: function()
24918 this.assignDocWin();
24919 var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
24921 var range = this.createRange(sel);
24924 var p = range.commonAncestorContainer;
24925 while (p.nodeType == 3) { // text node
24936 * Range intersection.. the hard stuff...
24940 * [ -- selected range --- ]
24944 * if end is before start or hits it. fail.
24945 * if start is after end or hits it fail.
24947 * if either hits (but other is outside. - then it's not
24953 // @see http://www.thismuchiknow.co.uk/?p=64.
24954 rangeIntersectsNode : function(range, node)
24956 var nodeRange = node.ownerDocument.createRange();
24958 nodeRange.selectNode(node);
24960 nodeRange.selectNodeContents(node);
24963 var rangeStartRange = range.cloneRange();
24964 rangeStartRange.collapse(true);
24966 var rangeEndRange = range.cloneRange();
24967 rangeEndRange.collapse(false);
24969 var nodeStartRange = nodeRange.cloneRange();
24970 nodeStartRange.collapse(true);
24972 var nodeEndRange = nodeRange.cloneRange();
24973 nodeEndRange.collapse(false);
24975 return rangeStartRange.compareBoundaryPoints(
24976 Range.START_TO_START, nodeEndRange) == -1 &&
24977 rangeEndRange.compareBoundaryPoints(
24978 Range.START_TO_START, nodeStartRange) == 1;
24982 rangeCompareNode : function(range, node)
24984 var nodeRange = node.ownerDocument.createRange();
24986 nodeRange.selectNode(node);
24988 nodeRange.selectNodeContents(node);
24992 range.collapse(true);
24994 nodeRange.collapse(true);
24996 var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
24997 var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
24999 //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
25001 var nodeIsBefore = ss == 1;
25002 var nodeIsAfter = ee == -1;
25004 if (nodeIsBefore && nodeIsAfter) {
25007 if (!nodeIsBefore && nodeIsAfter) {
25008 return 1; //right trailed.
25011 if (nodeIsBefore && !nodeIsAfter) {
25012 return 2; // left trailed.
25018 // private? - in a new class?
25019 cleanUpPaste : function()
25021 // cleans up the whole document..
25022 Roo.log('cleanuppaste');
25024 this.cleanUpChildren(this.doc.body);
25025 var clean = this.cleanWordChars(this.doc.body.innerHTML);
25026 if (clean != this.doc.body.innerHTML) {
25027 this.doc.body.innerHTML = clean;
25032 cleanWordChars : function(input) {// change the chars to hex code
25033 var he = Roo.HtmlEditorCore;
25035 var output = input;
25036 Roo.each(he.swapCodes, function(sw) {
25037 var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
25039 output = output.replace(swapper, sw[1]);
25046 cleanUpChildren : function (n)
25048 if (!n.childNodes.length) {
25051 for (var i = n.childNodes.length-1; i > -1 ; i--) {
25052 this.cleanUpChild(n.childNodes[i]);
25059 cleanUpChild : function (node)
25062 //console.log(node);
25063 if (node.nodeName == "#text") {
25064 // clean up silly Windows -- stuff?
25067 if (node.nodeName == "#comment") {
25068 node.parentNode.removeChild(node);
25069 // clean up silly Windows -- stuff?
25072 var lcname = node.tagName.toLowerCase();
25073 // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
25074 // whitelist of tags..
25076 if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
25078 node.parentNode.removeChild(node);
25083 var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
25085 // spans with no attributes - just remove them..
25086 if ((!node.attributes || !node.attributes.length) && lcname == 'span') {
25087 remove_keep_children = true;
25090 // remove <a name=....> as rendering on yahoo mailer is borked with this.
25091 // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
25093 //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
25094 // remove_keep_children = true;
25097 if (remove_keep_children) {
25098 this.cleanUpChildren(node);
25099 // inserts everything just before this node...
25100 while (node.childNodes.length) {
25101 var cn = node.childNodes[0];
25102 node.removeChild(cn);
25103 node.parentNode.insertBefore(cn, node);
25105 node.parentNode.removeChild(node);
25109 if (!node.attributes || !node.attributes.length) {
25114 this.cleanUpChildren(node);
25118 function cleanAttr(n,v)
25121 if (v.match(/^\./) || v.match(/^\//)) {
25124 if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
25127 if (v.match(/^#/)) {
25130 if (v.match(/^\{/)) { // allow template editing.
25133 // Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
25134 node.removeAttribute(n);
25138 var cwhite = this.cwhite;
25139 var cblack = this.cblack;
25141 function cleanStyle(n,v)
25143 if (v.match(/expression/)) { //XSS?? should we even bother..
25144 node.removeAttribute(n);
25148 var parts = v.split(/;/);
25151 Roo.each(parts, function(p) {
25152 p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
25156 var l = p.split(':').shift().replace(/\s+/g,'');
25157 l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
25159 if ( cwhite.length && cblack.indexOf(l) > -1) {
25160 // Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
25161 //node.removeAttribute(n);
25165 // only allow 'c whitelisted system attributes'
25166 if ( cwhite.length && cwhite.indexOf(l) < 0) {
25167 // Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
25168 //node.removeAttribute(n);
25178 if (clean.length) {
25179 node.setAttribute(n, clean.join(';'));
25181 node.removeAttribute(n);
25187 for (var i = node.attributes.length-1; i > -1 ; i--) {
25188 var a = node.attributes[i];
25191 if (a.name.toLowerCase().substr(0,2)=='on') {
25192 node.removeAttribute(a.name);
25195 if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
25196 node.removeAttribute(a.name);
25199 if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
25200 cleanAttr(a.name,a.value); // fixme..
25203 if (a.name == 'style') {
25204 cleanStyle(a.name,a.value);
25207 /// clean up MS crap..
25208 // tecnically this should be a list of valid class'es..
25211 if (a.name == 'class') {
25212 if (a.value.match(/^Mso/)) {
25213 node.removeAttribute('class');
25216 if (a.value.match(/^body$/)) {
25217 node.removeAttribute('class');
25228 this.cleanUpChildren(node);
25234 * Clean up MS wordisms...
25236 cleanWord : function(node)
25239 this.cleanWord(this.doc.body);
25244 node.nodeName == 'SPAN' &&
25245 !node.hasAttributes() &&
25246 node.childNodes.length == 1 &&
25247 node.firstChild.nodeName == "#text"
25249 var textNode = node.firstChild;
25250 node.removeChild(textNode);
25251 if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
25252 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
25254 node.parentNode.insertBefore(textNode, node);
25255 if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
25256 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
25258 node.parentNode.removeChild(node);
25261 if (node.nodeName == "#text") {
25262 // clean up silly Windows -- stuff?
25265 if (node.nodeName == "#comment") {
25266 node.parentNode.removeChild(node);
25267 // clean up silly Windows -- stuff?
25271 if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
25272 node.parentNode.removeChild(node);
25275 //Roo.log(node.tagName);
25276 // remove - but keep children..
25277 if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
25278 //Roo.log('-- removed');
25279 while (node.childNodes.length) {
25280 var cn = node.childNodes[0];
25281 node.removeChild(cn);
25282 node.parentNode.insertBefore(cn, node);
25283 // move node to parent - and clean it..
25284 this.cleanWord(cn);
25286 node.parentNode.removeChild(node);
25287 /// no need to iterate chidlren = it's got none..
25288 //this.iterateChildren(node, this.cleanWord);
25292 if (node.className.length) {
25294 var cn = node.className.split(/\W+/);
25296 Roo.each(cn, function(cls) {
25297 if (cls.match(/Mso[a-zA-Z]+/)) {
25302 node.className = cna.length ? cna.join(' ') : '';
25304 node.removeAttribute("class");
25308 if (node.hasAttribute("lang")) {
25309 node.removeAttribute("lang");
25312 if (node.hasAttribute("style")) {
25314 var styles = node.getAttribute("style").split(";");
25316 Roo.each(styles, function(s) {
25317 if (!s.match(/:/)) {
25320 var kv = s.split(":");
25321 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
25324 // what ever is left... we allow.
25327 node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
25328 if (!nstyle.length) {
25329 node.removeAttribute('style');
25332 this.iterateChildren(node, this.cleanWord);
25338 * iterateChildren of a Node, calling fn each time, using this as the scole..
25339 * @param {DomNode} node node to iterate children of.
25340 * @param {Function} fn method of this class to call on each item.
25342 iterateChildren : function(node, fn)
25344 if (!node.childNodes.length) {
25347 for (var i = node.childNodes.length-1; i > -1 ; i--) {
25348 fn.call(this, node.childNodes[i])
25354 * cleanTableWidths.
25356 * Quite often pasting from word etc.. results in tables with column and widths.
25357 * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
25360 cleanTableWidths : function(node)
25365 this.cleanTableWidths(this.doc.body);
25370 if (node.nodeName == "#text" || node.nodeName == "#comment") {
25373 Roo.log(node.tagName);
25374 if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
25375 this.iterateChildren(node, this.cleanTableWidths);
25378 if (node.hasAttribute('width')) {
25379 node.removeAttribute('width');
25383 if (node.hasAttribute("style")) {
25386 var styles = node.getAttribute("style").split(";");
25388 Roo.each(styles, function(s) {
25389 if (!s.match(/:/)) {
25392 var kv = s.split(":");
25393 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
25396 // what ever is left... we allow.
25399 node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
25400 if (!nstyle.length) {
25401 node.removeAttribute('style');
25405 this.iterateChildren(node, this.cleanTableWidths);
25413 domToHTML : function(currentElement, depth, nopadtext) {
25415 depth = depth || 0;
25416 nopadtext = nopadtext || false;
25418 if (!currentElement) {
25419 return this.domToHTML(this.doc.body);
25422 //Roo.log(currentElement);
25424 var allText = false;
25425 var nodeName = currentElement.nodeName;
25426 var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
25428 if (nodeName == '#text') {
25430 return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
25435 if (nodeName != 'BODY') {
25438 // Prints the node tagName, such as <A>, <IMG>, etc
25441 for(i = 0; i < currentElement.attributes.length;i++) {
25443 var aname = currentElement.attributes.item(i).name;
25444 if (!currentElement.attributes.item(i).value.length) {
25447 attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
25450 ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
25459 if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
25462 if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
25467 // Traverse the tree
25469 var currentElementChild = currentElement.childNodes.item(i);
25470 var allText = true;
25471 var innerHTML = '';
25473 while (currentElementChild) {
25474 // Formatting code (indent the tree so it looks nice on the screen)
25475 var nopad = nopadtext;
25476 if (lastnode == 'SPAN') {
25480 if (currentElementChild.nodeName == '#text') {
25481 var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
25482 toadd = nopadtext ? toadd : toadd.trim();
25483 if (!nopad && toadd.length > 80) {
25484 innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
25486 innerHTML += toadd;
25489 currentElementChild = currentElement.childNodes.item(i);
25495 innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
25497 // Recursively traverse the tree structure of the child node
25498 innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
25499 lastnode = currentElementChild.nodeName;
25501 currentElementChild=currentElement.childNodes.item(i);
25507 // The remaining code is mostly for formatting the tree
25508 ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
25513 ret+= "</"+tagName+">";
25519 applyBlacklists : function()
25521 var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
25522 var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
25526 Roo.each(Roo.HtmlEditorCore.white, function(tag) {
25527 if (b.indexOf(tag) > -1) {
25530 this.white.push(tag);
25534 Roo.each(w, function(tag) {
25535 if (b.indexOf(tag) > -1) {
25538 if (this.white.indexOf(tag) > -1) {
25541 this.white.push(tag);
25546 Roo.each(Roo.HtmlEditorCore.black, function(tag) {
25547 if (w.indexOf(tag) > -1) {
25550 this.black.push(tag);
25554 Roo.each(b, function(tag) {
25555 if (w.indexOf(tag) > -1) {
25558 if (this.black.indexOf(tag) > -1) {
25561 this.black.push(tag);
25566 w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
25567 b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
25571 Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
25572 if (b.indexOf(tag) > -1) {
25575 this.cwhite.push(tag);
25579 Roo.each(w, function(tag) {
25580 if (b.indexOf(tag) > -1) {
25583 if (this.cwhite.indexOf(tag) > -1) {
25586 this.cwhite.push(tag);
25591 Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
25592 if (w.indexOf(tag) > -1) {
25595 this.cblack.push(tag);
25599 Roo.each(b, function(tag) {
25600 if (w.indexOf(tag) > -1) {
25603 if (this.cblack.indexOf(tag) > -1) {
25606 this.cblack.push(tag);
25611 setStylesheets : function(stylesheets)
25613 if(typeof(stylesheets) == 'string'){
25614 Roo.get(this.iframe.contentDocument.head).createChild({
25616 rel : 'stylesheet',
25625 Roo.each(stylesheets, function(s) {
25630 Roo.get(_this.iframe.contentDocument.head).createChild({
25632 rel : 'stylesheet',
25641 removeStylesheets : function()
25645 Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
25650 setStyle : function(style)
25652 Roo.get(this.iframe.contentDocument.head).createChild({
25661 // hide stuff that is not compatible
25675 * @event specialkey
25679 * @cfg {String} fieldClass @hide
25682 * @cfg {String} focusClass @hide
25685 * @cfg {String} autoCreate @hide
25688 * @cfg {String} inputType @hide
25691 * @cfg {String} invalidClass @hide
25694 * @cfg {String} invalidText @hide
25697 * @cfg {String} msgFx @hide
25700 * @cfg {String} validateOnBlur @hide
25704 Roo.HtmlEditorCore.white = [
25705 'area', 'br', 'img', 'input', 'hr', 'wbr',
25707 'address', 'blockquote', 'center', 'dd', 'dir', 'div',
25708 'dl', 'dt', 'h1', 'h2', 'h3', 'h4',
25709 'h5', 'h6', 'hr', 'isindex', 'listing', 'marquee',
25710 'menu', 'multicol', 'ol', 'p', 'plaintext', 'pre',
25711 'table', 'ul', 'xmp',
25713 'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th',
25716 'dir', 'menu', 'ol', 'ul', 'dl',
25722 Roo.HtmlEditorCore.black = [
25723 // 'embed', 'object', // enable - backend responsiblity to clean thiese
25725 'base', 'basefont', 'bgsound', 'blink', 'body',
25726 'frame', 'frameset', 'head', 'html', 'ilayer',
25727 'iframe', 'layer', 'link', 'meta', 'object',
25728 'script', 'style' ,'title', 'xml' // clean later..
25730 Roo.HtmlEditorCore.clean = [
25731 'script', 'style', 'title', 'xml'
25733 Roo.HtmlEditorCore.remove = [
25738 Roo.HtmlEditorCore.ablack = [
25742 Roo.HtmlEditorCore.aclean = [
25743 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
25747 Roo.HtmlEditorCore.pwhite= [
25748 'http', 'https', 'mailto'
25751 // white listed style attributes.
25752 Roo.HtmlEditorCore.cwhite= [
25753 // 'text-align', /// default is to allow most things..
25759 // black listed style attributes.
25760 Roo.HtmlEditorCore.cblack= [
25761 // 'font-size' -- this can be set by the project
25765 Roo.HtmlEditorCore.swapCodes =[
25784 * @class Roo.bootstrap.HtmlEditor
25785 * @extends Roo.bootstrap.TextArea
25786 * Bootstrap HtmlEditor class
25789 * Create a new HtmlEditor
25790 * @param {Object} config The config object
25793 Roo.bootstrap.HtmlEditor = function(config){
25794 Roo.bootstrap.HtmlEditor.superclass.constructor.call(this, config);
25795 if (!this.toolbars) {
25796 this.toolbars = [];
25799 this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
25802 * @event initialize
25803 * Fires when the editor is fully initialized (including the iframe)
25804 * @param {HtmlEditor} this
25809 * Fires when the editor is first receives the focus. Any insertion must wait
25810 * until after this event.
25811 * @param {HtmlEditor} this
25815 * @event beforesync
25816 * Fires before the textarea is updated with content from the editor iframe. Return false
25817 * to cancel the sync.
25818 * @param {HtmlEditor} this
25819 * @param {String} html
25823 * @event beforepush
25824 * Fires before the iframe editor is updated with content from the textarea. Return false
25825 * to cancel the push.
25826 * @param {HtmlEditor} this
25827 * @param {String} html
25832 * Fires when the textarea is updated with content from the editor iframe.
25833 * @param {HtmlEditor} this
25834 * @param {String} html
25839 * Fires when the iframe editor is updated with content from the textarea.
25840 * @param {HtmlEditor} this
25841 * @param {String} html
25845 * @event editmodechange
25846 * Fires when the editor switches edit modes
25847 * @param {HtmlEditor} this
25848 * @param {Boolean} sourceEdit True if source edit, false if standard editing.
25850 editmodechange: true,
25852 * @event editorevent
25853 * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
25854 * @param {HtmlEditor} this
25858 * @event firstfocus
25859 * Fires when on first focus - needed by toolbars..
25860 * @param {HtmlEditor} this
25865 * Auto save the htmlEditor value as a file into Events
25866 * @param {HtmlEditor} this
25870 * @event savedpreview
25871 * preview the saved version of htmlEditor
25872 * @param {HtmlEditor} this
25879 Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea, {
25883 * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
25888 * @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
25893 * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
25898 * @cfg {Number} height (in pixels)
25902 * @cfg {Number} width (in pixels)
25907 * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
25910 stylesheets: false,
25915 // private properties
25916 validationEvent : false,
25918 initialized : false,
25921 onFocus : Roo.emptyFn,
25923 hideMode:'offsets',
25925 tbContainer : false,
25929 toolbarContainer :function() {
25930 return this.wrap.select('.x-html-editor-tb',true).first();
25934 * Protected method that will not generally be called directly. It
25935 * is called when the editor creates its toolbar. Override this method if you need to
25936 * add custom toolbar buttons.
25937 * @param {HtmlEditor} editor
25939 createToolbar : function(){
25940 Roo.log('renewing');
25941 Roo.log("create toolbars");
25943 this.toolbars = [ new Roo.bootstrap.htmleditor.ToolbarStandard({editor: this} ) ];
25944 this.toolbars[0].render(this.toolbarContainer());
25948 // if (!editor.toolbars || !editor.toolbars.length) {
25949 // editor.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard() ]; // can be empty?
25952 // for (var i =0 ; i < editor.toolbars.length;i++) {
25953 // editor.toolbars[i] = Roo.factory(
25954 // typeof(editor.toolbars[i]) == 'string' ?
25955 // { xtype: editor.toolbars[i]} : editor.toolbars[i],
25956 // Roo.bootstrap.HtmlEditor);
25957 // editor.toolbars[i].init(editor);
25963 onRender : function(ct, position)
25965 // Roo.log("Call onRender: " + this.xtype);
25967 Roo.bootstrap.HtmlEditor.superclass.onRender.call(this, ct, position);
25969 this.wrap = this.inputEl().wrap({
25970 cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
25973 this.editorcore.onRender(ct, position);
25975 if (this.resizable) {
25976 this.resizeEl = new Roo.Resizable(this.wrap, {
25980 minHeight : this.height,
25981 height: this.height,
25982 handles : this.resizable,
25985 resize : function(r, w, h) {
25986 _t.onResize(w,h); // -something
25992 this.createToolbar(this);
25995 if(!this.width && this.resizable){
25996 this.setSize(this.wrap.getSize());
25998 if (this.resizeEl) {
25999 this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
26000 // should trigger onReize..
26006 onResize : function(w, h)
26008 Roo.log('resize: ' +w + ',' + h );
26009 Roo.bootstrap.HtmlEditor.superclass.onResize.apply(this, arguments);
26013 if(this.inputEl() ){
26014 if(typeof w == 'number'){
26015 var aw = w - this.wrap.getFrameWidth('lr');
26016 this.inputEl().setWidth(this.adjustWidth('textarea', aw));
26019 if(typeof h == 'number'){
26020 var tbh = -11; // fixme it needs to tool bar size!
26021 for (var i =0; i < this.toolbars.length;i++) {
26022 // fixme - ask toolbars for heights?
26023 tbh += this.toolbars[i].el.getHeight();
26024 //if (this.toolbars[i].footer) {
26025 // tbh += this.toolbars[i].footer.el.getHeight();
26033 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
26034 ah -= 5; // knock a few pixes off for look..
26035 this.inputEl().setHeight(this.adjustWidth('textarea', ah));
26039 Roo.log('onResize:' + [w,h,ew,eh].join(',') );
26040 this.editorcore.onResize(ew,eh);
26045 * Toggles the editor between standard and source edit mode.
26046 * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
26048 toggleSourceEdit : function(sourceEditMode)
26050 this.editorcore.toggleSourceEdit(sourceEditMode);
26052 if(this.editorcore.sourceEditMode){
26053 Roo.log('editor - showing textarea');
26056 // Roo.log(this.syncValue());
26058 this.inputEl().removeClass(['hide', 'x-hidden']);
26059 this.inputEl().dom.removeAttribute('tabIndex');
26060 this.inputEl().focus();
26062 Roo.log('editor - hiding textarea');
26064 // Roo.log(this.pushValue());
26067 this.inputEl().addClass(['hide', 'x-hidden']);
26068 this.inputEl().dom.setAttribute('tabIndex', -1);
26069 //this.deferFocus();
26072 if(this.resizable){
26073 this.setSize(this.wrap.getSize());
26076 this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
26079 // private (for BoxComponent)
26080 adjustSize : Roo.BoxComponent.prototype.adjustSize,
26082 // private (for BoxComponent)
26083 getResizeEl : function(){
26087 // private (for BoxComponent)
26088 getPositionEl : function(){
26093 initEvents : function(){
26094 this.originalValue = this.getValue();
26098 // * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
26101 // markInvalid : Roo.emptyFn,
26103 // * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
26106 // clearInvalid : Roo.emptyFn,
26108 setValue : function(v){
26109 Roo.bootstrap.HtmlEditor.superclass.setValue.call(this, v);
26110 this.editorcore.pushValue();
26115 deferFocus : function(){
26116 this.focus.defer(10, this);
26120 focus : function(){
26121 this.editorcore.focus();
26127 onDestroy : function(){
26133 for (var i =0; i < this.toolbars.length;i++) {
26134 // fixme - ask toolbars for heights?
26135 this.toolbars[i].onDestroy();
26138 this.wrap.dom.innerHTML = '';
26139 this.wrap.remove();
26144 onFirstFocus : function(){
26145 //Roo.log("onFirstFocus");
26146 this.editorcore.onFirstFocus();
26147 for (var i =0; i < this.toolbars.length;i++) {
26148 this.toolbars[i].onFirstFocus();
26154 syncValue : function()
26156 this.editorcore.syncValue();
26159 pushValue : function()
26161 this.editorcore.pushValue();
26165 // hide stuff that is not compatible
26179 * @event specialkey
26183 * @cfg {String} fieldClass @hide
26186 * @cfg {String} focusClass @hide
26189 * @cfg {String} autoCreate @hide
26192 * @cfg {String} inputType @hide
26196 * @cfg {String} invalidText @hide
26199 * @cfg {String} msgFx @hide
26202 * @cfg {String} validateOnBlur @hide
26211 Roo.namespace('Roo.bootstrap.htmleditor');
26213 * @class Roo.bootstrap.HtmlEditorToolbar1
26219 new Roo.bootstrap.HtmlEditor({
26222 new Roo.bootstrap.HtmlEditorToolbar1({
26223 disable : { fonts: 1 , format: 1, ..., ... , ...],
26229 * @cfg {Object} disable List of elements to disable..
26230 * @cfg {Array} btns List of additional buttons.
26234 * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
26237 Roo.bootstrap.htmleditor.ToolbarStandard = function(config)
26240 Roo.apply(this, config);
26242 // default disabled, based on 'good practice'..
26243 this.disable = this.disable || {};
26244 Roo.applyIf(this.disable, {
26247 specialElements : true
26249 Roo.bootstrap.htmleditor.ToolbarStandard.superclass.constructor.call(this, config);
26251 this.editor = config.editor;
26252 this.editorcore = config.editor.editorcore;
26254 this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
26256 //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
26257 // dont call parent... till later.
26259 Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, {
26264 editorcore : false,
26269 "h1","h2","h3","h4","h5","h6",
26271 "abbr", "acronym", "address", "cite", "samp", "var",
26275 onRender : function(ct, position)
26277 // Roo.log("Call onRender: " + this.xtype);
26279 Roo.bootstrap.htmleditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
26281 this.el.dom.style.marginBottom = '0';
26283 var editorcore = this.editorcore;
26284 var editor= this.editor;
26287 var btn = function(id,cmd , toggle, handler, html){
26289 var event = toggle ? 'toggle' : 'click';
26294 xns: Roo.bootstrap,
26298 enableToggle:toggle !== false,
26300 pressed : toggle ? false : null,
26303 a.listeners[toggle ? 'toggle' : 'click'] = function() {
26304 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd || id);
26310 // var cb_box = function...
26315 xns: Roo.bootstrap,
26320 xns: Roo.bootstrap,
26324 Roo.each(this.formats, function(f) {
26325 style.menu.items.push({
26327 xns: Roo.bootstrap,
26328 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
26333 editorcore.insertTag(this.tagname);
26340 children.push(style);
26342 btn('bold',false,true);
26343 btn('italic',false,true);
26344 btn('align-left', 'justifyleft',true);
26345 btn('align-center', 'justifycenter',true);
26346 btn('align-right' , 'justifyright',true);
26347 btn('link', false, false, function(btn) {
26348 //Roo.log("create link?");
26349 var url = prompt(this.createLinkText, this.defaultLinkValue);
26350 if(url && url != 'http:/'+'/'){
26351 this.editorcore.relayCmd('createlink', url);
26354 btn('list','insertunorderedlist',true);
26355 btn('pencil', false,true, function(btn){
26357 this.toggleSourceEdit(btn.pressed);
26360 if (this.editor.btns.length > 0) {
26361 for (var i = 0; i<this.editor.btns.length; i++) {
26362 children.push(this.editor.btns[i]);
26370 xns: Roo.bootstrap,
26375 xns: Roo.bootstrap,
26380 cog.menu.items.push({
26382 xns: Roo.bootstrap,
26383 html : Clean styles,
26388 editorcore.insertTag(this.tagname);
26397 this.xtype = 'NavSimplebar';
26399 for(var i=0;i< children.length;i++) {
26401 this.buttons.add(this.addxtypeChild(children[i]));
26405 editor.on('editorevent', this.updateToolbar, this);
26407 onBtnClick : function(id)
26409 this.editorcore.relayCmd(id);
26410 this.editorcore.focus();
26414 * Protected method that will not generally be called directly. It triggers
26415 * a toolbar update by reading the markup state of the current selection in the editor.
26417 updateToolbar: function(){
26419 if(!this.editorcore.activated){
26420 this.editor.onFirstFocus(); // is this neeed?
26424 var btns = this.buttons;
26425 var doc = this.editorcore.doc;
26426 btns.get('bold').setActive(doc.queryCommandState('bold'));
26427 btns.get('italic').setActive(doc.queryCommandState('italic'));
26428 //btns.get('underline').setActive(doc.queryCommandState('underline'));
26430 btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
26431 btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
26432 btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
26434 //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
26435 btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
26438 var ans = this.editorcore.getAllAncestors();
26439 if (this.formatCombo) {
26442 var store = this.formatCombo.store;
26443 this.formatCombo.setValue("");
26444 for (var i =0; i < ans.length;i++) {
26445 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
26447 this.formatCombo.setValue(ans[i].tagName.toLowerCase());
26455 // hides menus... - so this cant be on a menu...
26456 Roo.bootstrap.MenuMgr.hideAll();
26458 Roo.bootstrap.MenuMgr.hideAll();
26459 //this.editorsyncValue();
26461 onFirstFocus: function() {
26462 this.buttons.each(function(item){
26466 toggleSourceEdit : function(sourceEditMode){
26469 if(sourceEditMode){
26470 Roo.log("disabling buttons");
26471 this.buttons.each( function(item){
26472 if(item.cmd != 'pencil'){
26478 Roo.log("enabling buttons");
26479 if(this.editorcore.initialized){
26480 this.buttons.each( function(item){
26486 Roo.log("calling toggole on editor");
26487 // tell the editor that it's been pressed..
26488 this.editor.toggleSourceEdit(sourceEditMode);
26502 * @class Roo.bootstrap.Markdown
26503 * @extends Roo.bootstrap.TextArea
26504 * Bootstrap Showdown editable area
26505 * @cfg {string} content
26508 * Create a new Showdown
26511 Roo.bootstrap.Markdown = function(config){
26512 Roo.bootstrap.Markdown.superclass.constructor.call(this, config);
26516 Roo.extend(Roo.bootstrap.Markdown, Roo.bootstrap.TextArea, {
26520 initEvents : function()
26523 Roo.bootstrap.TextArea.prototype.initEvents.call(this);
26524 this.markdownEl = this.el.createChild({
26525 cls : 'roo-markdown-area'
26527 this.inputEl().addClass('d-none');
26528 if (this.getValue() == '') {
26529 this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
26532 this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
26534 this.markdownEl.on('click', this.toggleTextEdit, this);
26535 this.on('blur', this.toggleTextEdit, this);
26536 this.on('specialkey', this.resizeTextArea, this);
26539 toggleTextEdit : function()
26541 var sh = this.markdownEl.getHeight();
26542 this.inputEl().addClass('d-none');
26543 this.markdownEl.addClass('d-none');
26544 if (!this.editing) {
26546 this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
26547 this.inputEl().removeClass('d-none');
26548 this.inputEl().focus();
26549 this.editing = true;
26552 // show showdown...
26553 this.updateMarkdown();
26554 this.markdownEl.removeClass('d-none');
26555 this.editing = false;
26558 updateMarkdown : function()
26560 if (this.getValue() == '') {
26561 this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
26565 this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
26568 resizeTextArea: function () {
26571 Roo.log([sh, this.getValue().split("\n").length * 30]);
26572 this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
26574 setValue : function(val)
26576 Roo.bootstrap.TextArea.prototype.setValue.call(this,val);
26577 if (!this.editing) {
26578 this.updateMarkdown();
26584 if (!this.editing) {
26585 this.toggleTextEdit();
26593 * @class Roo.bootstrap.Table.AbstractSelectionModel
26594 * @extends Roo.util.Observable
26595 * Abstract base class for grid SelectionModels. It provides the interface that should be
26596 * implemented by descendant classes. This class should not be directly instantiated.
26599 Roo.bootstrap.Table.AbstractSelectionModel = function(){
26600 this.locked = false;
26601 Roo.bootstrap.Table.AbstractSelectionModel.superclass.constructor.call(this);
26605 Roo.extend(Roo.bootstrap.Table.AbstractSelectionModel, Roo.util.Observable, {
26606 /** @ignore Called by the grid automatically. Do not call directly. */
26607 init : function(grid){
26613 * Locks the selections.
26616 this.locked = true;
26620 * Unlocks the selections.
26622 unlock : function(){
26623 this.locked = false;
26627 * Returns true if the selections are locked.
26628 * @return {Boolean}
26630 isLocked : function(){
26631 return this.locked;
26635 initEvents : function ()
26641 * @extends Roo.bootstrap.Table.AbstractSelectionModel
26642 * @class Roo.bootstrap.Table.RowSelectionModel
26643 * The default SelectionModel used by {@link Roo.bootstrap.Table}.
26644 * It supports multiple selections and keyboard selection/navigation.
26646 * @param {Object} config
26649 Roo.bootstrap.Table.RowSelectionModel = function(config){
26650 Roo.apply(this, config);
26651 this.selections = new Roo.util.MixedCollection(false, function(o){
26656 this.lastActive = false;
26660 * @event selectionchange
26661 * Fires when the selection changes
26662 * @param {SelectionModel} this
26664 "selectionchange" : true,
26666 * @event afterselectionchange
26667 * Fires after the selection changes (eg. by key press or clicking)
26668 * @param {SelectionModel} this
26670 "afterselectionchange" : true,
26672 * @event beforerowselect
26673 * Fires when a row is selected being selected, return false to cancel.
26674 * @param {SelectionModel} this
26675 * @param {Number} rowIndex The selected index
26676 * @param {Boolean} keepExisting False if other selections will be cleared
26678 "beforerowselect" : true,
26681 * Fires when a row is selected.
26682 * @param {SelectionModel} this
26683 * @param {Number} rowIndex The selected index
26684 * @param {Roo.data.Record} r The record
26686 "rowselect" : true,
26688 * @event rowdeselect
26689 * Fires when a row is deselected.
26690 * @param {SelectionModel} this
26691 * @param {Number} rowIndex The selected index
26693 "rowdeselect" : true
26695 Roo.bootstrap.Table.RowSelectionModel.superclass.constructor.call(this);
26696 this.locked = false;
26699 Roo.extend(Roo.bootstrap.Table.RowSelectionModel, Roo.bootstrap.Table.AbstractSelectionModel, {
26701 * @cfg {Boolean} singleSelect
26702 * True to allow selection of only one row at a time (defaults to false)
26704 singleSelect : false,
26707 initEvents : function()
26710 //if(!this.grid.enableDragDrop && !this.grid.enableDrag){
26711 // this.growclickrid.on("mousedown", this.handleMouseDown, this);
26712 //}else{ // allow click to work like normal
26713 // this.grid.on("rowclick", this.handleDragableRowClick, this);
26715 //this.grid.on("rowdblclick", this.handleMouseDBClick, this);
26716 this.grid.on("rowclick", this.handleMouseDown, this);
26718 this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
26719 "up" : function(e){
26721 this.selectPrevious(e.shiftKey);
26722 }else if(this.last !== false && this.lastActive !== false){
26723 var last = this.last;
26724 this.selectRange(this.last, this.lastActive-1);
26725 this.grid.getView().focusRow(this.lastActive);
26726 if(last !== false){
26730 this.selectFirstRow();
26732 this.fireEvent("afterselectionchange", this);
26734 "down" : function(e){
26736 this.selectNext(e.shiftKey);
26737 }else if(this.last !== false && this.lastActive !== false){
26738 var last = this.last;
26739 this.selectRange(this.last, this.lastActive+1);
26740 this.grid.getView().focusRow(this.lastActive);
26741 if(last !== false){
26745 this.selectFirstRow();
26747 this.fireEvent("afterselectionchange", this);
26751 this.grid.store.on('load', function(){
26752 this.selections.clear();
26755 var view = this.grid.view;
26756 view.on("refresh", this.onRefresh, this);
26757 view.on("rowupdated", this.onRowUpdated, this);
26758 view.on("rowremoved", this.onRemove, this);
26763 onRefresh : function()
26765 var ds = this.grid.store, i, v = this.grid.view;
26766 var s = this.selections;
26767 s.each(function(r){
26768 if((i = ds.indexOfId(r.id)) != -1){
26777 onRemove : function(v, index, r){
26778 this.selections.remove(r);
26782 onRowUpdated : function(v, index, r){
26783 if(this.isSelected(r)){
26784 v.onRowSelect(index);
26790 * @param {Array} records The records to select
26791 * @param {Boolean} keepExisting (optional) True to keep existing selections
26793 selectRecords : function(records, keepExisting)
26796 this.clearSelections();
26798 var ds = this.grid.store;
26799 for(var i = 0, len = records.length; i < len; i++){
26800 this.selectRow(ds.indexOf(records[i]), true);
26805 * Gets the number of selected rows.
26808 getCount : function(){
26809 return this.selections.length;
26813 * Selects the first row in the grid.
26815 selectFirstRow : function(){
26820 * Select the last row.
26821 * @param {Boolean} keepExisting (optional) True to keep existing selections
26823 selectLastRow : function(keepExisting){
26824 //this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
26825 this.selectRow(this.grid.store.getCount() - 1, keepExisting);
26829 * Selects the row immediately following the last selected row.
26830 * @param {Boolean} keepExisting (optional) True to keep existing selections
26832 selectNext : function(keepExisting)
26834 if(this.last !== false && (this.last+1) < this.grid.store.getCount()){
26835 this.selectRow(this.last+1, keepExisting);
26836 this.grid.getView().focusRow(this.last);
26841 * Selects the row that precedes the last selected row.
26842 * @param {Boolean} keepExisting (optional) True to keep existing selections
26844 selectPrevious : function(keepExisting){
26846 this.selectRow(this.last-1, keepExisting);
26847 this.grid.getView().focusRow(this.last);
26852 * Returns the selected records
26853 * @return {Array} Array of selected records
26855 getSelections : function(){
26856 return [].concat(this.selections.items);
26860 * Returns the first selected record.
26863 getSelected : function(){
26864 return this.selections.itemAt(0);
26869 * Clears all selections.
26871 clearSelections : function(fast)
26877 var ds = this.grid.store;
26878 var s = this.selections;
26879 s.each(function(r){
26880 this.deselectRow(ds.indexOfId(r.id));
26884 this.selections.clear();
26891 * Selects all rows.
26893 selectAll : function(){
26897 this.selections.clear();
26898 for(var i = 0, len = this.grid.store.getCount(); i < len; i++){
26899 this.selectRow(i, true);
26904 * Returns True if there is a selection.
26905 * @return {Boolean}
26907 hasSelection : function(){
26908 return this.selections.length > 0;
26912 * Returns True if the specified row is selected.
26913 * @param {Number/Record} record The record or index of the record to check
26914 * @return {Boolean}
26916 isSelected : function(index){
26917 var r = typeof index == "number" ? this.grid.store.getAt(index) : index;
26918 return (r && this.selections.key(r.id) ? true : false);
26922 * Returns True if the specified record id is selected.
26923 * @param {String} id The id of record to check
26924 * @return {Boolean}
26926 isIdSelected : function(id){
26927 return (this.selections.key(id) ? true : false);
26932 handleMouseDBClick : function(e, t){
26936 handleMouseDown : function(e, t)
26938 var rowIndex = this.grid.headerShow ? t.dom.rowIndex - 1 : t.dom.rowIndex ; // first row is header???
26939 if(this.isLocked() || rowIndex < 0 ){
26942 if(e.shiftKey && this.last !== false){
26943 var last = this.last;
26944 this.selectRange(last, rowIndex, e.ctrlKey);
26945 this.last = last; // reset the last
26949 var isSelected = this.isSelected(rowIndex);
26950 //Roo.log("select row:" + rowIndex);
26952 this.deselectRow(rowIndex);
26954 this.selectRow(rowIndex, true);
26958 if(e.button !== 0 && isSelected){
26959 alert('rowIndex 2: ' + rowIndex);
26960 view.focusRow(rowIndex);
26961 }else if(e.ctrlKey && isSelected){
26962 this.deselectRow(rowIndex);
26963 }else if(!isSelected){
26964 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
26965 view.focusRow(rowIndex);
26969 this.fireEvent("afterselectionchange", this);
26972 handleDragableRowClick : function(grid, rowIndex, e)
26974 if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
26975 this.selectRow(rowIndex, false);
26976 grid.view.focusRow(rowIndex);
26977 this.fireEvent("afterselectionchange", this);
26982 * Selects multiple rows.
26983 * @param {Array} rows Array of the indexes of the row to select
26984 * @param {Boolean} keepExisting (optional) True to keep existing selections
26986 selectRows : function(rows, keepExisting){
26988 this.clearSelections();
26990 for(var i = 0, len = rows.length; i < len; i++){
26991 this.selectRow(rows[i], true);
26996 * Selects a range of rows. All rows in between startRow and endRow are also selected.
26997 * @param {Number} startRow The index of the first row in the range
26998 * @param {Number} endRow The index of the last row in the range
26999 * @param {Boolean} keepExisting (optional) True to retain existing selections
27001 selectRange : function(startRow, endRow, keepExisting){
27006 this.clearSelections();
27008 if(startRow <= endRow){
27009 for(var i = startRow; i <= endRow; i++){
27010 this.selectRow(i, true);
27013 for(var i = startRow; i >= endRow; i--){
27014 this.selectRow(i, true);
27020 * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
27021 * @param {Number} startRow The index of the first row in the range
27022 * @param {Number} endRow The index of the last row in the range
27024 deselectRange : function(startRow, endRow, preventViewNotify){
27028 for(var i = startRow; i <= endRow; i++){
27029 this.deselectRow(i, preventViewNotify);
27035 * @param {Number} row The index of the row to select
27036 * @param {Boolean} keepExisting (optional) True to keep existing selections
27038 selectRow : function(index, keepExisting, preventViewNotify)
27040 if(this.locked || (index < 0 || index > this.grid.store.getCount())) {
27043 if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
27044 if(!keepExisting || this.singleSelect){
27045 this.clearSelections();
27048 var r = this.grid.store.getAt(index);
27049 //console.log('selectRow - record id :' + r.id);
27051 this.selections.add(r);
27052 this.last = this.lastActive = index;
27053 if(!preventViewNotify){
27054 var proxy = new Roo.Element(
27055 this.grid.getRowDom(index)
27057 proxy.addClass('bg-info info');
27059 this.fireEvent("rowselect", this, index, r);
27060 this.fireEvent("selectionchange", this);
27066 * @param {Number} row The index of the row to deselect
27068 deselectRow : function(index, preventViewNotify)
27073 if(this.last == index){
27076 if(this.lastActive == index){
27077 this.lastActive = false;
27080 var r = this.grid.store.getAt(index);
27085 this.selections.remove(r);
27086 //.console.log('deselectRow - record id :' + r.id);
27087 if(!preventViewNotify){
27089 var proxy = new Roo.Element(
27090 this.grid.getRowDom(index)
27092 proxy.removeClass('bg-info info');
27094 this.fireEvent("rowdeselect", this, index);
27095 this.fireEvent("selectionchange", this);
27099 restoreLast : function(){
27101 this.last = this._last;
27106 acceptsNav : function(row, col, cm){
27107 return !cm.isHidden(col) && cm.isCellEditable(col, row);
27111 onEditorKey : function(field, e){
27112 var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
27117 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
27119 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
27121 }else if(k == e.ENTER && !e.ctrlKey){
27125 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
27127 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
27129 }else if(k == e.ESC){
27133 g.startEditing(newCell[0], newCell[1]);
27139 * Ext JS Library 1.1.1
27140 * Copyright(c) 2006-2007, Ext JS, LLC.
27142 * Originally Released Under LGPL - original licence link has changed is not relivant.
27145 * <script type="text/javascript">
27149 * @class Roo.bootstrap.PagingToolbar
27150 * @extends Roo.bootstrap.NavSimplebar
27151 * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
27153 * Create a new PagingToolbar
27154 * @param {Object} config The config object
27155 * @param {Roo.data.Store} store
27157 Roo.bootstrap.PagingToolbar = function(config)
27159 // old args format still supported... - xtype is prefered..
27160 // created from xtype...
27162 this.ds = config.dataSource;
27164 if (config.store && !this.ds) {
27165 this.store= Roo.factory(config.store, Roo.data);
27166 this.ds = this.store;
27167 this.ds.xmodule = this.xmodule || false;
27170 this.toolbarItems = [];
27171 if (config.items) {
27172 this.toolbarItems = config.items;
27175 Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
27180 this.bind(this.ds);
27183 if (Roo.bootstrap.version == 4) {
27184 this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
27186 this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
27191 Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
27193 * @cfg {Roo.data.Store} dataSource
27194 * The underlying data store providing the paged data
27197 * @cfg {String/HTMLElement/Element} container
27198 * container The id or element that will contain the toolbar
27201 * @cfg {Boolean} displayInfo
27202 * True to display the displayMsg (defaults to false)
27205 * @cfg {Number} pageSize
27206 * The number of records to display per page (defaults to 20)
27210 * @cfg {String} displayMsg
27211 * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
27213 displayMsg : 'Displaying {0} - {1} of {2}',
27215 * @cfg {String} emptyMsg
27216 * The message to display when no records are found (defaults to "No data to display")
27218 emptyMsg : 'No data to display',
27220 * Customizable piece of the default paging text (defaults to "Page")
27223 beforePageText : "Page",
27225 * Customizable piece of the default paging text (defaults to "of %0")
27228 afterPageText : "of {0}",
27230 * Customizable piece of the default paging text (defaults to "First Page")
27233 firstText : "First Page",
27235 * Customizable piece of the default paging text (defaults to "Previous Page")
27238 prevText : "Previous Page",
27240 * Customizable piece of the default paging text (defaults to "Next Page")
27243 nextText : "Next Page",
27245 * Customizable piece of the default paging text (defaults to "Last Page")
27248 lastText : "Last Page",
27250 * Customizable piece of the default paging text (defaults to "Refresh")
27253 refreshText : "Refresh",
27257 onRender : function(ct, position)
27259 Roo.bootstrap.PagingToolbar.superclass.onRender.call(this, ct, position);
27260 this.navgroup.parentId = this.id;
27261 this.navgroup.onRender(this.el, null);
27262 // add the buttons to the navgroup
27264 if(this.displayInfo){
27265 this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
27266 this.displayEl = this.el.select('.x-paging-info', true).first();
27267 // var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
27268 // this.displayEl = navel.el.select('span',true).first();
27274 Roo.each(_this.buttons, function(e){ // this might need to use render????
27275 Roo.factory(e).render(_this.el);
27279 Roo.each(_this.toolbarItems, function(e) {
27280 _this.navgroup.addItem(e);
27284 this.first = this.navgroup.addItem({
27285 tooltip: this.firstText,
27286 cls: "prev btn-outline-secondary",
27287 html : ' <i class="fa fa-step-backward"></i>',
27289 preventDefault: true,
27290 listeners : { click : this.onClick.createDelegate(this, ["first"]) }
27293 this.prev = this.navgroup.addItem({
27294 tooltip: this.prevText,
27295 cls: "prev btn-outline-secondary",
27296 html : ' <i class="fa fa-backward"></i>',
27298 preventDefault: true,
27299 listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
27301 //this.addSeparator();
27304 var field = this.navgroup.addItem( {
27306 cls : 'x-paging-position btn-outline-secondary',
27308 html : this.beforePageText +
27309 '<input type="text" size="3" value="1" class="x-grid-page-number">' +
27310 '<span class="x-paging-after">' + String.format(this.afterPageText, 1) + '</span>'
27313 this.field = field.el.select('input', true).first();
27314 this.field.on("keydown", this.onPagingKeydown, this);
27315 this.field.on("focus", function(){this.dom.select();});
27318 this.afterTextEl = field.el.select('.x-paging-after',true).first();
27319 //this.field.setHeight(18);
27320 //this.addSeparator();
27321 this.next = this.navgroup.addItem({
27322 tooltip: this.nextText,
27323 cls: "next btn-outline-secondary",
27324 html : ' <i class="fa fa-forward"></i>',
27326 preventDefault: true,
27327 listeners : { click : this.onClick.createDelegate(this, ["next"]) }
27329 this.last = this.navgroup.addItem({
27330 tooltip: this.lastText,
27331 html : ' <i class="fa fa-step-forward"></i>',
27332 cls: "next btn-outline-secondary",
27334 preventDefault: true,
27335 listeners : { click : this.onClick.createDelegate(this, ["last"]) }
27337 //this.addSeparator();
27338 this.loading = this.navgroup.addItem({
27339 tooltip: this.refreshText,
27340 cls: "btn-outline-secondary",
27341 html : ' <i class="fa fa-refresh"></i>',
27342 preventDefault: true,
27343 listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
27349 updateInfo : function(){
27350 if(this.displayEl){
27351 var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
27352 var msg = count == 0 ?
27356 this.cursor+1, this.cursor+count, this.ds.getTotalCount()
27358 this.displayEl.update(msg);
27363 onLoad : function(ds, r, o)
27365 this.cursor = o.params && o.params.start ? o.params.start : 0;
27367 var d = this.getPageData(),
27372 this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
27373 this.field.dom.value = ap;
27374 this.first.setDisabled(ap == 1);
27375 this.prev.setDisabled(ap == 1);
27376 this.next.setDisabled(ap == ps);
27377 this.last.setDisabled(ap == ps);
27378 this.loading.enable();
27383 getPageData : function(){
27384 var total = this.ds.getTotalCount();
27387 activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
27388 pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
27393 onLoadError : function(){
27394 this.loading.enable();
27398 onPagingKeydown : function(e){
27399 var k = e.getKey();
27400 var d = this.getPageData();
27402 var v = this.field.dom.value, pageNum;
27403 if(!v || isNaN(pageNum = parseInt(v, 10))){
27404 this.field.dom.value = d.activePage;
27407 pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
27408 this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
27411 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))
27413 var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
27414 this.field.dom.value = pageNum;
27415 this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
27418 else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
27420 var v = this.field.dom.value, pageNum;
27421 var increment = (e.shiftKey) ? 10 : 1;
27422 if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
27425 if(!v || isNaN(pageNum = parseInt(v, 10))) {
27426 this.field.dom.value = d.activePage;
27429 else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
27431 this.field.dom.value = parseInt(v, 10) + increment;
27432 pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
27433 this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
27440 beforeLoad : function(){
27442 this.loading.disable();
27447 onClick : function(which){
27456 ds.load({params:{start: 0, limit: this.pageSize}});
27459 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
27462 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
27465 var total = ds.getTotalCount();
27466 var extra = total % this.pageSize;
27467 var lastStart = extra ? (total - extra) : total-this.pageSize;
27468 ds.load({params:{start: lastStart, limit: this.pageSize}});
27471 ds.load({params:{start: this.cursor, limit: this.pageSize}});
27477 * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
27478 * @param {Roo.data.Store} store The data store to unbind
27480 unbind : function(ds){
27481 ds.un("beforeload", this.beforeLoad, this);
27482 ds.un("load", this.onLoad, this);
27483 ds.un("loadexception", this.onLoadError, this);
27484 ds.un("remove", this.updateInfo, this);
27485 ds.un("add", this.updateInfo, this);
27486 this.ds = undefined;
27490 * Binds the paging toolbar to the specified {@link Roo.data.Store}
27491 * @param {Roo.data.Store} store The data store to bind
27493 bind : function(ds){
27494 ds.on("beforeload", this.beforeLoad, this);
27495 ds.on("load", this.onLoad, this);
27496 ds.on("loadexception", this.onLoadError, this);
27497 ds.on("remove", this.updateInfo, this);
27498 ds.on("add", this.updateInfo, this);
27509 * @class Roo.bootstrap.MessageBar
27510 * @extends Roo.bootstrap.Component
27511 * Bootstrap MessageBar class
27512 * @cfg {String} html contents of the MessageBar
27513 * @cfg {String} weight (info | success | warning | danger) default info
27514 * @cfg {String} beforeClass insert the bar before the given class
27515 * @cfg {Boolean} closable (true | false) default false
27516 * @cfg {Boolean} fixed (true | false) default false, fix the bar at the top
27519 * Create a new Element
27520 * @param {Object} config The config object
27523 Roo.bootstrap.MessageBar = function(config){
27524 Roo.bootstrap.MessageBar.superclass.constructor.call(this, config);
27527 Roo.extend(Roo.bootstrap.MessageBar, Roo.bootstrap.Component, {
27533 beforeClass: 'bootstrap-sticky-wrap',
27535 getAutoCreate : function(){
27539 cls: 'alert alert-dismissable alert-' + this.weight,
27544 html: this.html || ''
27550 cfg.cls += ' alert-messages-fixed';
27564 onRender : function(ct, position)
27566 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
27569 var cfg = Roo.apply({}, this.getAutoCreate());
27573 cfg.cls += ' ' + this.cls;
27576 cfg.style = this.style;
27578 this.el = Roo.get(document.body).createChild(cfg, Roo.select('.'+this.beforeClass, true).first());
27580 this.el.setVisibilityMode(Roo.Element.DISPLAY);
27583 this.el.select('>button.close').on('click', this.hide, this);
27589 if (!this.rendered) {
27595 this.fireEvent('show', this);
27601 if (!this.rendered) {
27607 this.fireEvent('hide', this);
27610 update : function()
27612 // var e = this.el.dom.firstChild;
27614 // if(this.closable){
27615 // e = e.nextSibling;
27618 // e.data = this.html || '';
27620 this.el.select('>.message', true).first().dom.innerHTML = this.html || '';
27636 * @class Roo.bootstrap.Graph
27637 * @extends Roo.bootstrap.Component
27638 * Bootstrap Graph class
27642 @cfg {String} graphtype bar | vbar | pie
27643 @cfg {number} g_x coodinator | centre x (pie)
27644 @cfg {number} g_y coodinator | centre y (pie)
27645 @cfg {number} g_r radius (pie)
27646 @cfg {number} g_height height of the chart (respected by all elements in the set)
27647 @cfg {number} g_width width of the chart (respected by all elements in the set)
27648 @cfg {Object} title The title of the chart
27651 -opts (object) options for the chart
27653 o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
27654 o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
27656 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.
27657 o stacked (boolean) whether or not to tread values as in a stacked bar chart
27659 o stretch (boolean)
27661 -opts (object) options for the pie
27664 o startAngle (number)
27665 o endAngle (number)
27669 * Create a new Input
27670 * @param {Object} config The config object
27673 Roo.bootstrap.Graph = function(config){
27674 Roo.bootstrap.Graph.superclass.constructor.call(this, config);
27680 * The img click event for the img.
27681 * @param {Roo.EventObject} e
27687 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component, {
27698 //g_colors: this.colors,
27705 getAutoCreate : function(){
27716 onRender : function(ct,position){
27719 Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
27721 if (typeof(Raphael) == 'undefined') {
27722 Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
27726 this.raphael = Raphael(this.el.dom);
27728 // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
27729 // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
27730 // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
27731 // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
27733 r.text(160, 10, "Single Series Chart").attr(txtattr);
27734 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
27735 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
27736 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
27738 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
27739 r.barchart(330, 10, 300, 220, data1);
27740 r.barchart(10, 250, 300, 220, data2, {stacked: true});
27741 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
27744 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
27745 // r.barchart(30, 30, 560, 250, xdata, {
27746 // labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
27747 // axis : "0 0 1 1",
27748 // axisxlabels : xdata
27749 // //yvalues : cols,
27752 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
27754 // this.load(null,xdata,{
27755 // axis : "0 0 1 1",
27756 // axisxlabels : xdata
27761 load : function(graphtype,xdata,opts)
27763 this.raphael.clear();
27765 graphtype = this.graphtype;
27770 var r = this.raphael,
27771 fin = function () {
27772 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
27774 fout = function () {
27775 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
27777 pfin = function() {
27778 this.sector.stop();
27779 this.sector.scale(1.1, 1.1, this.cx, this.cy);
27782 this.label[0].stop();
27783 this.label[0].attr({ r: 7.5 });
27784 this.label[1].attr({ "font-weight": 800 });
27787 pfout = function() {
27788 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
27791 this.label[0].animate({ r: 5 }, 500, "bounce");
27792 this.label[1].attr({ "font-weight": 400 });
27798 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
27801 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
27804 // opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west",
27805 // href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
27807 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
27814 this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
27819 setTitle: function(o)
27824 initEvents: function() {
27827 this.el.on('click', this.onClick, this);
27831 onClick : function(e)
27833 Roo.log('img onclick');
27834 this.fireEvent('click', this, e);
27846 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
27849 * @class Roo.bootstrap.dash.NumberBox
27850 * @extends Roo.bootstrap.Component
27851 * Bootstrap NumberBox class
27852 * @cfg {String} headline Box headline
27853 * @cfg {String} content Box content
27854 * @cfg {String} icon Box icon
27855 * @cfg {String} footer Footer text
27856 * @cfg {String} fhref Footer href
27859 * Create a new NumberBox
27860 * @param {Object} config The config object
27864 Roo.bootstrap.dash.NumberBox = function(config){
27865 Roo.bootstrap.dash.NumberBox.superclass.constructor.call(this, config);
27869 Roo.extend(Roo.bootstrap.dash.NumberBox, Roo.bootstrap.Component, {
27878 getAutoCreate : function(){
27882 cls : 'small-box ',
27890 cls : 'roo-headline',
27891 html : this.headline
27895 cls : 'roo-content',
27896 html : this.content
27910 cls : 'ion ' + this.icon
27919 cls : 'small-box-footer',
27920 href : this.fhref || '#',
27924 cfg.cn.push(footer);
27931 onRender : function(ct,position){
27932 Roo.bootstrap.dash.NumberBox.superclass.onRender.call(this,ct,position);
27939 setHeadline: function (value)
27941 this.el.select('.roo-headline',true).first().dom.innerHTML = value;
27944 setFooter: function (value, href)
27946 this.el.select('a.small-box-footer',true).first().dom.innerHTML = value;
27949 this.el.select('a.small-box-footer',true).first().attr('href', href);
27954 setContent: function (value)
27956 this.el.select('.roo-content',true).first().dom.innerHTML = value;
27959 initEvents: function()
27973 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
27976 * @class Roo.bootstrap.dash.TabBox
27977 * @extends Roo.bootstrap.Component
27978 * Bootstrap TabBox class
27979 * @cfg {String} title Title of the TabBox
27980 * @cfg {String} icon Icon of the TabBox
27981 * @cfg {Boolean} showtabs (true|false) show the tabs default true
27982 * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
27985 * Create a new TabBox
27986 * @param {Object} config The config object
27990 Roo.bootstrap.dash.TabBox = function(config){
27991 Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
27996 * When a pane is added
27997 * @param {Roo.bootstrap.dash.TabPane} pane
28001 * @event activatepane
28002 * When a pane is activated
28003 * @param {Roo.bootstrap.dash.TabPane} pane
28005 "activatepane" : true
28013 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
28018 tabScrollable : false,
28020 getChildContainer : function()
28022 return this.el.select('.tab-content', true).first();
28025 getAutoCreate : function(){
28029 cls: 'pull-left header',
28037 cls: 'fa ' + this.icon
28043 cls: 'nav nav-tabs pull-right',
28049 if(this.tabScrollable){
28056 cls: 'nav nav-tabs pull-right',
28067 cls: 'nav-tabs-custom',
28072 cls: 'tab-content no-padding',
28080 initEvents : function()
28082 //Roo.log('add add pane handler');
28083 this.on('addpane', this.onAddPane, this);
28086 * Updates the box title
28087 * @param {String} html to set the title to.
28089 setTitle : function(value)
28091 this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
28093 onAddPane : function(pane)
28095 this.panes.push(pane);
28096 //Roo.log('addpane');
28098 // tabs are rendere left to right..
28099 if(!this.showtabs){
28103 var ctr = this.el.select('.nav-tabs', true).first();
28106 var existing = ctr.select('.nav-tab',true);
28107 var qty = existing.getCount();;
28110 var tab = ctr.createChild({
28112 cls : 'nav-tab' + (qty ? '' : ' active'),
28120 }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
28123 tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
28125 pane.el.addClass('active');
28130 onTabClick : function(ev,un,ob,pane)
28132 //Roo.log('tab - prev default');
28133 ev.preventDefault();
28136 this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
28137 pane.tab.addClass('active');
28138 //Roo.log(pane.title);
28139 this.getChildContainer().select('.tab-pane',true).removeClass('active');
28140 // technically we should have a deactivate event.. but maybe add later.
28141 // and it should not de-activate the selected tab...
28142 this.fireEvent('activatepane', pane);
28143 pane.el.addClass('active');
28144 pane.fireEvent('activate');
28149 getActivePane : function()
28152 Roo.each(this.panes, function(p) {
28153 if(p.el.hasClass('active')){
28174 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
28176 * @class Roo.bootstrap.TabPane
28177 * @extends Roo.bootstrap.Component
28178 * Bootstrap TabPane class
28179 * @cfg {Boolean} active (false | true) Default false
28180 * @cfg {String} title title of panel
28184 * Create a new TabPane
28185 * @param {Object} config The config object
28188 Roo.bootstrap.dash.TabPane = function(config){
28189 Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
28195 * When a pane is activated
28196 * @param {Roo.bootstrap.dash.TabPane} pane
28203 Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component, {
28208 // the tabBox that this is attached to.
28211 getAutoCreate : function()
28219 cfg.cls += ' active';
28224 initEvents : function()
28226 //Roo.log('trigger add pane handler');
28227 this.parent().fireEvent('addpane', this)
28231 * Updates the tab title
28232 * @param {String} html to set the title to.
28234 setTitle: function(str)
28240 this.tab.select('a', true).first().dom.innerHTML = str;
28257 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
28260 * @class Roo.bootstrap.menu.Menu
28261 * @extends Roo.bootstrap.Component
28262 * Bootstrap Menu class - container for Menu
28263 * @cfg {String} html Text of the menu
28264 * @cfg {String} weight (default | primary | success | info | warning | danger | inverse)
28265 * @cfg {String} icon Font awesome icon
28266 * @cfg {String} pos Menu align to (top | bottom) default bottom
28270 * Create a new Menu
28271 * @param {Object} config The config object
28275 Roo.bootstrap.menu.Menu = function(config){
28276 Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
28280 * @event beforeshow
28281 * Fires before this menu is displayed
28282 * @param {Roo.bootstrap.menu.Menu} this
28286 * @event beforehide
28287 * Fires before this menu is hidden
28288 * @param {Roo.bootstrap.menu.Menu} this
28293 * Fires after this menu is displayed
28294 * @param {Roo.bootstrap.menu.Menu} this
28299 * Fires after this menu is hidden
28300 * @param {Roo.bootstrap.menu.Menu} this
28305 * Fires when this menu is clicked (or when the enter key is pressed while it is active)
28306 * @param {Roo.bootstrap.menu.Menu} this
28307 * @param {Roo.EventObject} e
28314 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component, {
28318 weight : 'default',
28323 getChildContainer : function() {
28324 if(this.isSubMenu){
28328 return this.el.select('ul.dropdown-menu', true).first();
28331 getAutoCreate : function()
28336 cls : 'roo-menu-text',
28344 cls : 'fa ' + this.icon
28355 cls : 'dropdown-button btn btn-' + this.weight,
28360 cls : 'dropdown-toggle btn btn-' + this.weight,
28370 cls : 'dropdown-menu'
28376 if(this.pos == 'top'){
28377 cfg.cls += ' dropup';
28380 if(this.isSubMenu){
28383 cls : 'dropdown-menu'
28390 onRender : function(ct, position)
28392 this.isSubMenu = ct.hasClass('dropdown-submenu');
28394 Roo.bootstrap.menu.Menu.superclass.onRender.call(this, ct, position);
28397 initEvents : function()
28399 if(this.isSubMenu){
28403 this.hidden = true;
28405 this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
28406 this.triggerEl.on('click', this.onTriggerPress, this);
28408 this.buttonEl = this.el.select('button.dropdown-button', true).first();
28409 this.buttonEl.on('click', this.onClick, this);
28415 if(this.isSubMenu){
28419 return this.el.select('ul.dropdown-menu', true).first();
28422 onClick : function(e)
28424 this.fireEvent("click", this, e);
28427 onTriggerPress : function(e)
28429 if (this.isVisible()) {
28436 isVisible : function(){
28437 return !this.hidden;
28442 this.fireEvent("beforeshow", this);
28444 this.hidden = false;
28445 this.el.addClass('open');
28447 Roo.get(document).on("mouseup", this.onMouseUp, this);
28449 this.fireEvent("show", this);
28456 this.fireEvent("beforehide", this);
28458 this.hidden = true;
28459 this.el.removeClass('open');
28461 Roo.get(document).un("mouseup", this.onMouseUp);
28463 this.fireEvent("hide", this);
28466 onMouseUp : function()
28480 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
28483 * @class Roo.bootstrap.menu.Item
28484 * @extends Roo.bootstrap.Component
28485 * Bootstrap MenuItem class
28486 * @cfg {Boolean} submenu (true | false) default false
28487 * @cfg {String} html text of the item
28488 * @cfg {String} href the link
28489 * @cfg {Boolean} disable (true | false) default false
28490 * @cfg {Boolean} preventDefault (true | false) default true
28491 * @cfg {String} icon Font awesome icon
28492 * @cfg {String} pos Submenu align to (left | right) default right
28496 * Create a new Item
28497 * @param {Object} config The config object
28501 Roo.bootstrap.menu.Item = function(config){
28502 Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
28506 * Fires when the mouse is hovering over this menu
28507 * @param {Roo.bootstrap.menu.Item} this
28508 * @param {Roo.EventObject} e
28513 * Fires when the mouse exits this menu
28514 * @param {Roo.bootstrap.menu.Item} this
28515 * @param {Roo.EventObject} e
28521 * The raw click event for the entire grid.
28522 * @param {Roo.EventObject} e
28528 Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component, {
28533 preventDefault: true,
28538 getAutoCreate : function()
28543 cls : 'roo-menu-item-text',
28551 cls : 'fa ' + this.icon
28560 href : this.href || '#',
28567 cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
28571 cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');
28573 if(this.pos == 'left'){
28574 cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'pull-left' : (cfg.cls + ' pull-left');
28581 initEvents : function()
28583 this.el.on('mouseover', this.onMouseOver, this);
28584 this.el.on('mouseout', this.onMouseOut, this);
28586 this.el.select('a', true).first().on('click', this.onClick, this);
28590 onClick : function(e)
28592 if(this.preventDefault){
28593 e.preventDefault();
28596 this.fireEvent("click", this, e);
28599 onMouseOver : function(e)
28601 if(this.submenu && this.pos == 'left'){
28602 this.el.select('ul.dropdown-menu', true).first().setLeft(this.el.select('ul.dropdown-menu', true).first().getWidth() * -1);
28605 this.fireEvent("mouseover", this, e);
28608 onMouseOut : function(e)
28610 this.fireEvent("mouseout", this, e);
28622 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
28625 * @class Roo.bootstrap.menu.Separator
28626 * @extends Roo.bootstrap.Component
28627 * Bootstrap Separator class
28630 * Create a new Separator
28631 * @param {Object} config The config object
28635 Roo.bootstrap.menu.Separator = function(config){
28636 Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
28639 Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component, {
28641 getAutoCreate : function(){
28662 * @class Roo.bootstrap.Tooltip
28663 * Bootstrap Tooltip class
28664 * This is basic at present - all componets support it by default, however they should add tooltipEl() method
28665 * to determine which dom element triggers the tooltip.
28667 * It needs to add support for additional attributes like tooltip-position
28670 * Create a new Toolti
28671 * @param {Object} config The config object
28674 Roo.bootstrap.Tooltip = function(config){
28675 Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
28677 this.alignment = Roo.bootstrap.Tooltip.alignment;
28679 if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
28680 this.alignment = config.alignment;
28685 Roo.apply(Roo.bootstrap.Tooltip, {
28687 * @function init initialize tooltip monitoring.
28691 currentTip : false,
28692 currentRegion : false,
28698 Roo.get(document).on('mouseover', this.enter ,this);
28699 Roo.get(document).on('mouseout', this.leave, this);
28702 this.currentTip = new Roo.bootstrap.Tooltip();
28705 enter : function(ev)
28707 var dom = ev.getTarget();
28709 //Roo.log(['enter',dom]);
28710 var el = Roo.fly(dom);
28711 if (this.currentEl) {
28713 //Roo.log(this.currentEl);
28714 //Roo.log(this.currentEl.contains(dom));
28715 if (this.currentEl == el) {
28718 if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
28724 if (this.currentTip.el) {
28725 this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
28729 if(!el || el.dom == document){
28735 // you can not look for children, as if el is the body.. then everythign is the child..
28736 if (!el.attr('tooltip')) { //
28737 if (!el.select("[tooltip]").elements.length) {
28740 // is the mouse over this child...?
28741 bindEl = el.select("[tooltip]").first();
28742 var xy = ev.getXY();
28743 if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
28744 //Roo.log("not in region.");
28747 //Roo.log("child element over..");
28750 this.currentEl = bindEl;
28751 this.currentTip.bind(bindEl);
28752 this.currentRegion = Roo.lib.Region.getRegion(dom);
28753 this.currentTip.enter();
28756 leave : function(ev)
28758 var dom = ev.getTarget();
28759 //Roo.log(['leave',dom]);
28760 if (!this.currentEl) {
28765 if (dom != this.currentEl.dom) {
28768 var xy = ev.getXY();
28769 if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0] ))) {
28772 // only activate leave if mouse cursor is outside... bounding box..
28777 if (this.currentTip) {
28778 this.currentTip.leave();
28780 //Roo.log('clear currentEl');
28781 this.currentEl = false;
28786 'left' : ['r-l', [-2,0], 'right'],
28787 'right' : ['l-r', [2,0], 'left'],
28788 'bottom' : ['t-b', [0,2], 'top'],
28789 'top' : [ 'b-t', [0,-2], 'bottom']
28795 Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, {
28800 delay : null, // can be { show : 300 , hide: 500}
28804 hoverState : null, //???
28806 placement : 'bottom',
28810 getAutoCreate : function(){
28817 cls : 'tooltip-arrow arrow'
28820 cls : 'tooltip-inner'
28827 bind : function(el)
28832 initEvents : function()
28834 this.arrowEl = this.el.select('.arrow', true).first();
28835 this.innerEl = this.el.select('.tooltip-inner', true).first();
28838 enter : function () {
28840 if (this.timeout != null) {
28841 clearTimeout(this.timeout);
28844 this.hoverState = 'in';
28845 //Roo.log("enter - show");
28846 if (!this.delay || !this.delay.show) {
28851 this.timeout = setTimeout(function () {
28852 if (_t.hoverState == 'in') {
28855 }, this.delay.show);
28859 clearTimeout(this.timeout);
28861 this.hoverState = 'out';
28862 if (!this.delay || !this.delay.hide) {
28868 this.timeout = setTimeout(function () {
28869 //Roo.log("leave - timeout");
28871 if (_t.hoverState == 'out') {
28873 Roo.bootstrap.Tooltip.currentEl = false;
28878 show : function (msg)
28881 this.render(document.body);
28884 //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
28886 var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
28888 this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
28890 this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
28891 'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
28893 var placement = typeof this.placement == 'function' ?
28894 this.placement.call(this, this.el, on_el) :
28897 var autoToken = /\s?auto?\s?/i;
28898 var autoPlace = autoToken.test(placement);
28900 placement = placement.replace(autoToken, '') || 'top';
28904 //this.el.setXY([0,0]);
28906 //this.el.dom.style.display='block';
28908 //this.el.appendTo(on_el);
28910 var p = this.getPosition();
28911 var box = this.el.getBox();
28917 var align = this.alignment[placement];
28919 var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
28921 if(placement == 'top' || placement == 'bottom'){
28923 placement = 'right';
28926 if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
28927 placement = 'left';
28930 var scroll = Roo.select('body', true).first().getScroll();
28932 if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
28936 align = this.alignment[placement];
28938 this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
28942 this.el.alignTo(this.bindEl, align[0],align[1]);
28943 //var arrow = this.el.select('.arrow',true).first();
28944 //arrow.set(align[2],
28946 this.el.addClass(placement);
28947 this.el.addClass("bs-tooltip-"+ placement);
28949 this.el.addClass('in fade show');
28951 this.hoverState = null;
28953 if (this.el.hasClass('fade')) {
28968 //this.el.setXY([0,0]);
28969 this.el.removeClass(['show', 'in']);
28985 * @class Roo.bootstrap.LocationPicker
28986 * @extends Roo.bootstrap.Component
28987 * Bootstrap LocationPicker class
28988 * @cfg {Number} latitude Position when init default 0
28989 * @cfg {Number} longitude Position when init default 0
28990 * @cfg {Number} zoom default 15
28991 * @cfg {String} mapTypeId default google.maps.MapTypeId.ROADMAP
28992 * @cfg {Boolean} mapTypeControl default false
28993 * @cfg {Boolean} disableDoubleClickZoom default false
28994 * @cfg {Boolean} scrollwheel default true
28995 * @cfg {Boolean} streetViewControl default false
28996 * @cfg {Number} radius default 0
28997 * @cfg {String} locationName
28998 * @cfg {Boolean} draggable default true
28999 * @cfg {Boolean} enableAutocomplete default false
29000 * @cfg {Boolean} enableReverseGeocode default true
29001 * @cfg {String} markerTitle
29004 * Create a new LocationPicker
29005 * @param {Object} config The config object
29009 Roo.bootstrap.LocationPicker = function(config){
29011 Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
29016 * Fires when the picker initialized.
29017 * @param {Roo.bootstrap.LocationPicker} this
29018 * @param {Google Location} location
29022 * @event positionchanged
29023 * Fires when the picker position changed.
29024 * @param {Roo.bootstrap.LocationPicker} this
29025 * @param {Google Location} location
29027 positionchanged : true,
29030 * Fires when the map resize.
29031 * @param {Roo.bootstrap.LocationPicker} this
29036 * Fires when the map show.
29037 * @param {Roo.bootstrap.LocationPicker} this
29042 * Fires when the map hide.
29043 * @param {Roo.bootstrap.LocationPicker} this
29048 * Fires when click the map.
29049 * @param {Roo.bootstrap.LocationPicker} this
29050 * @param {Map event} e
29054 * @event mapRightClick
29055 * Fires when right click the map.
29056 * @param {Roo.bootstrap.LocationPicker} this
29057 * @param {Map event} e
29059 mapRightClick : true,
29061 * @event markerClick
29062 * Fires when click the marker.
29063 * @param {Roo.bootstrap.LocationPicker} this
29064 * @param {Map event} e
29066 markerClick : true,
29068 * @event markerRightClick
29069 * Fires when right click the marker.
29070 * @param {Roo.bootstrap.LocationPicker} this
29071 * @param {Map event} e
29073 markerRightClick : true,
29075 * @event OverlayViewDraw
29076 * Fires when OverlayView Draw
29077 * @param {Roo.bootstrap.LocationPicker} this
29079 OverlayViewDraw : true,
29081 * @event OverlayViewOnAdd
29082 * Fires when OverlayView Draw
29083 * @param {Roo.bootstrap.LocationPicker} this
29085 OverlayViewOnAdd : true,
29087 * @event OverlayViewOnRemove
29088 * Fires when OverlayView Draw
29089 * @param {Roo.bootstrap.LocationPicker} this
29091 OverlayViewOnRemove : true,
29093 * @event OverlayViewShow
29094 * Fires when OverlayView Draw
29095 * @param {Roo.bootstrap.LocationPicker} this
29096 * @param {Pixel} cpx
29098 OverlayViewShow : true,
29100 * @event OverlayViewHide
29101 * Fires when OverlayView Draw
29102 * @param {Roo.bootstrap.LocationPicker} this
29104 OverlayViewHide : true,
29106 * @event loadexception
29107 * Fires when load google lib failed.
29108 * @param {Roo.bootstrap.LocationPicker} this
29110 loadexception : true
29115 Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component, {
29117 gMapContext: false,
29123 mapTypeControl: false,
29124 disableDoubleClickZoom: false,
29126 streetViewControl: false,
29130 enableAutocomplete: false,
29131 enableReverseGeocode: true,
29134 getAutoCreate: function()
29139 cls: 'roo-location-picker'
29145 initEvents: function(ct, position)
29147 if(!this.el.getWidth() || this.isApplied()){
29151 this.el.setVisibilityMode(Roo.Element.DISPLAY);
29156 initial: function()
29158 if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
29159 this.fireEvent('loadexception', this);
29163 if(!this.mapTypeId){
29164 this.mapTypeId = google.maps.MapTypeId.ROADMAP;
29167 this.gMapContext = this.GMapContext();
29169 this.initOverlayView();
29171 this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
29175 google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
29176 _this.setPosition(_this.gMapContext.marker.position);
29179 google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
29180 _this.fireEvent('mapClick', this, event);
29184 google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
29185 _this.fireEvent('mapRightClick', this, event);
29189 google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
29190 _this.fireEvent('markerClick', this, event);
29194 google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
29195 _this.fireEvent('markerRightClick', this, event);
29199 this.setPosition(this.gMapContext.location);
29201 this.fireEvent('initial', this, this.gMapContext.location);
29204 initOverlayView: function()
29208 Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
29212 _this.fireEvent('OverlayViewDraw', _this);
29217 _this.fireEvent('OverlayViewOnAdd', _this);
29220 onRemove: function()
29222 _this.fireEvent('OverlayViewOnRemove', _this);
29225 show: function(cpx)
29227 _this.fireEvent('OverlayViewShow', _this, cpx);
29232 _this.fireEvent('OverlayViewHide', _this);
29238 fromLatLngToContainerPixel: function(event)
29240 return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
29243 isApplied: function()
29245 return this.getGmapContext() == false ? false : true;
29248 getGmapContext: function()
29250 return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
29253 GMapContext: function()
29255 var position = new google.maps.LatLng(this.latitude, this.longitude);
29257 var _map = new google.maps.Map(this.el.dom, {
29260 mapTypeId: this.mapTypeId,
29261 mapTypeControl: this.mapTypeControl,
29262 disableDoubleClickZoom: this.disableDoubleClickZoom,
29263 scrollwheel: this.scrollwheel,
29264 streetViewControl: this.streetViewControl,
29265 locationName: this.locationName,
29266 draggable: this.draggable,
29267 enableAutocomplete: this.enableAutocomplete,
29268 enableReverseGeocode: this.enableReverseGeocode
29271 var _marker = new google.maps.Marker({
29272 position: position,
29274 title: this.markerTitle,
29275 draggable: this.draggable
29282 location: position,
29283 radius: this.radius,
29284 locationName: this.locationName,
29285 addressComponents: {
29286 formatted_address: null,
29287 addressLine1: null,
29288 addressLine2: null,
29290 streetNumber: null,
29294 stateOrProvince: null
29297 domContainer: this.el.dom,
29298 geodecoder: new google.maps.Geocoder()
29302 drawCircle: function(center, radius, options)
29304 if (this.gMapContext.circle != null) {
29305 this.gMapContext.circle.setMap(null);
29309 options = Roo.apply({}, options, {
29310 strokeColor: "#0000FF",
29311 strokeOpacity: .35,
29313 fillColor: "#0000FF",
29317 options.map = this.gMapContext.map;
29318 options.radius = radius;
29319 options.center = center;
29320 this.gMapContext.circle = new google.maps.Circle(options);
29321 return this.gMapContext.circle;
29327 setPosition: function(location)
29329 this.gMapContext.location = location;
29330 this.gMapContext.marker.setPosition(location);
29331 this.gMapContext.map.panTo(location);
29332 this.drawCircle(location, this.gMapContext.radius, {});
29336 if (this.gMapContext.settings.enableReverseGeocode) {
29337 this.gMapContext.geodecoder.geocode({
29338 latLng: this.gMapContext.location
29339 }, function(results, status) {
29341 if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
29342 _this.gMapContext.locationName = results[0].formatted_address;
29343 _this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
29345 _this.fireEvent('positionchanged', this, location);
29352 this.fireEvent('positionchanged', this, location);
29357 google.maps.event.trigger(this.gMapContext.map, "resize");
29359 this.gMapContext.map.setCenter(this.gMapContext.marker.position);
29361 this.fireEvent('resize', this);
29364 setPositionByLatLng: function(latitude, longitude)
29366 this.setPosition(new google.maps.LatLng(latitude, longitude));
29369 getCurrentPosition: function()
29372 latitude: this.gMapContext.location.lat(),
29373 longitude: this.gMapContext.location.lng()
29377 getAddressName: function()
29379 return this.gMapContext.locationName;
29382 getAddressComponents: function()
29384 return this.gMapContext.addressComponents;
29387 address_component_from_google_geocode: function(address_components)
29391 for (var i = 0; i < address_components.length; i++) {
29392 var component = address_components[i];
29393 if (component.types.indexOf("postal_code") >= 0) {
29394 result.postalCode = component.short_name;
29395 } else if (component.types.indexOf("street_number") >= 0) {
29396 result.streetNumber = component.short_name;
29397 } else if (component.types.indexOf("route") >= 0) {
29398 result.streetName = component.short_name;
29399 } else if (component.types.indexOf("neighborhood") >= 0) {
29400 result.city = component.short_name;
29401 } else if (component.types.indexOf("locality") >= 0) {
29402 result.city = component.short_name;
29403 } else if (component.types.indexOf("sublocality") >= 0) {
29404 result.district = component.short_name;
29405 } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
29406 result.stateOrProvince = component.short_name;
29407 } else if (component.types.indexOf("country") >= 0) {
29408 result.country = component.short_name;
29412 result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
29413 result.addressLine2 = "";
29417 setZoomLevel: function(zoom)
29419 this.gMapContext.map.setZoom(zoom);
29432 this.fireEvent('show', this);
29443 this.fireEvent('hide', this);
29448 Roo.apply(Roo.bootstrap.LocationPicker, {
29450 OverlayView : function(map, options)
29452 options = options || {};
29459 * @class Roo.bootstrap.Alert
29460 * @extends Roo.bootstrap.Component
29461 * Bootstrap Alert class - shows an alert area box
29463 * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
29464 Enter a valid email address
29467 * @cfg {String} title The title of alert
29468 * @cfg {String} html The content of alert
29469 * @cfg {String} weight ( success | info | warning | danger )
29470 * @cfg {String} faicon font-awesomeicon
29473 * Create a new alert
29474 * @param {Object} config The config object
29478 Roo.bootstrap.Alert = function(config){
29479 Roo.bootstrap.Alert.superclass.constructor.call(this, config);
29483 Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
29490 getAutoCreate : function()
29499 cls : 'roo-alert-icon'
29504 cls : 'roo-alert-title',
29509 cls : 'roo-alert-text',
29516 cfg.cn[0].cls += ' fa ' + this.faicon;
29520 cfg.cls += ' alert-' + this.weight;
29526 initEvents: function()
29528 this.el.setVisibilityMode(Roo.Element.DISPLAY);
29531 setTitle : function(str)
29533 this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
29536 setText : function(str)
29538 this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
29541 setWeight : function(weight)
29544 this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
29547 this.weight = weight;
29549 this.el.select('.alert',true).first().addClass('alert-' + this.weight);
29552 setIcon : function(icon)
29555 this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
29558 this.faicon = icon;
29560 this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
29581 * @class Roo.bootstrap.UploadCropbox
29582 * @extends Roo.bootstrap.Component
29583 * Bootstrap UploadCropbox class
29584 * @cfg {String} emptyText show when image has been loaded
29585 * @cfg {String} rotateNotify show when image too small to rotate
29586 * @cfg {Number} errorTimeout default 3000
29587 * @cfg {Number} minWidth default 300
29588 * @cfg {Number} minHeight default 300
29589 * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
29590 * @cfg {Boolean} isDocument (true|false) default false
29591 * @cfg {String} url action url
29592 * @cfg {String} paramName default 'imageUpload'
29593 * @cfg {String} method default POST
29594 * @cfg {Boolean} loadMask (true|false) default true
29595 * @cfg {Boolean} loadingText default 'Loading...'
29598 * Create a new UploadCropbox
29599 * @param {Object} config The config object
29602 Roo.bootstrap.UploadCropbox = function(config){
29603 Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
29607 * @event beforeselectfile
29608 * Fire before select file
29609 * @param {Roo.bootstrap.UploadCropbox} this
29611 "beforeselectfile" : true,
29614 * Fire after initEvent
29615 * @param {Roo.bootstrap.UploadCropbox} this
29620 * Fire after initEvent
29621 * @param {Roo.bootstrap.UploadCropbox} this
29622 * @param {String} data
29627 * Fire when preparing the file data
29628 * @param {Roo.bootstrap.UploadCropbox} this
29629 * @param {Object} file
29634 * Fire when get exception
29635 * @param {Roo.bootstrap.UploadCropbox} this
29636 * @param {XMLHttpRequest} xhr
29638 "exception" : true,
29640 * @event beforeloadcanvas
29641 * Fire before load the canvas
29642 * @param {Roo.bootstrap.UploadCropbox} this
29643 * @param {String} src
29645 "beforeloadcanvas" : true,
29648 * Fire when trash image
29649 * @param {Roo.bootstrap.UploadCropbox} this
29654 * Fire when download the image
29655 * @param {Roo.bootstrap.UploadCropbox} this
29659 * @event footerbuttonclick
29660 * Fire when footerbuttonclick
29661 * @param {Roo.bootstrap.UploadCropbox} this
29662 * @param {String} type
29664 "footerbuttonclick" : true,
29668 * @param {Roo.bootstrap.UploadCropbox} this
29673 * Fire when rotate the image
29674 * @param {Roo.bootstrap.UploadCropbox} this
29675 * @param {String} pos
29680 * Fire when inspect the file
29681 * @param {Roo.bootstrap.UploadCropbox} this
29682 * @param {Object} file
29687 * Fire when xhr upload the file
29688 * @param {Roo.bootstrap.UploadCropbox} this
29689 * @param {Object} data
29694 * Fire when arrange the file data
29695 * @param {Roo.bootstrap.UploadCropbox} this
29696 * @param {Object} formData
29701 this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
29704 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, {
29706 emptyText : 'Click to upload image',
29707 rotateNotify : 'Image is too small to rotate',
29708 errorTimeout : 3000,
29722 cropType : 'image/jpeg',
29724 canvasLoaded : false,
29725 isDocument : false,
29727 paramName : 'imageUpload',
29729 loadingText : 'Loading...',
29732 getAutoCreate : function()
29736 cls : 'roo-upload-cropbox',
29740 cls : 'roo-upload-cropbox-selector',
29745 cls : 'roo-upload-cropbox-body',
29746 style : 'cursor:pointer',
29750 cls : 'roo-upload-cropbox-preview'
29754 cls : 'roo-upload-cropbox-thumb'
29758 cls : 'roo-upload-cropbox-empty-notify',
29759 html : this.emptyText
29763 cls : 'roo-upload-cropbox-error-notify alert alert-danger',
29764 html : this.rotateNotify
29770 cls : 'roo-upload-cropbox-footer',
29773 cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
29783 onRender : function(ct, position)
29785 Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
29787 if (this.buttons.length) {
29789 Roo.each(this.buttons, function(bb) {
29791 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
29793 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
29799 this.maskEl = this.el;
29803 initEvents : function()
29805 this.urlAPI = (window.createObjectURL && window) ||
29806 (window.URL && URL.revokeObjectURL && URL) ||
29807 (window.webkitURL && webkitURL);
29809 this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
29810 this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29812 this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
29813 this.selectorEl.hide();
29815 this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
29816 this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29818 this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
29819 this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29820 this.thumbEl.hide();
29822 this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
29823 this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29825 this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
29826 this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29827 this.errorEl.hide();
29829 this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
29830 this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
29831 this.footerEl.hide();
29833 this.setThumbBoxSize();
29839 this.fireEvent('initial', this);
29846 window.addEventListener("resize", function() { _this.resize(); } );
29848 this.bodyEl.on('click', this.beforeSelectFile, this);
29851 this.bodyEl.on('touchstart', this.onTouchStart, this);
29852 this.bodyEl.on('touchmove', this.onTouchMove, this);
29853 this.bodyEl.on('touchend', this.onTouchEnd, this);
29857 this.bodyEl.on('mousedown', this.onMouseDown, this);
29858 this.bodyEl.on('mousemove', this.onMouseMove, this);
29859 var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
29860 this.bodyEl.on(mousewheel, this.onMouseWheel, this);
29861 Roo.get(document).on('mouseup', this.onMouseUp, this);
29864 this.selectorEl.on('change', this.onFileSelected, this);
29870 this.baseScale = 1;
29872 this.baseRotate = 1;
29873 this.dragable = false;
29874 this.pinching = false;
29877 this.cropData = false;
29878 this.notifyEl.dom.innerHTML = this.emptyText;
29880 this.selectorEl.dom.value = '';
29884 resize : function()
29886 if(this.fireEvent('resize', this) != false){
29887 this.setThumbBoxPosition();
29888 this.setCanvasPosition();
29892 onFooterButtonClick : function(e, el, o, type)
29895 case 'rotate-left' :
29896 this.onRotateLeft(e);
29898 case 'rotate-right' :
29899 this.onRotateRight(e);
29902 this.beforeSelectFile(e);
29917 this.fireEvent('footerbuttonclick', this, type);
29920 beforeSelectFile : function(e)
29922 e.preventDefault();
29924 if(this.fireEvent('beforeselectfile', this) != false){
29925 this.selectorEl.dom.click();
29929 onFileSelected : function(e)
29931 e.preventDefault();
29933 if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
29937 var file = this.selectorEl.dom.files[0];
29939 if(this.fireEvent('inspect', this, file) != false){
29940 this.prepare(file);
29945 trash : function(e)
29947 this.fireEvent('trash', this);
29950 download : function(e)
29952 this.fireEvent('download', this);
29955 loadCanvas : function(src)
29957 if(this.fireEvent('beforeloadcanvas', this, src) != false){
29961 this.imageEl = document.createElement('img');
29965 this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
29967 this.imageEl.src = src;
29971 onLoadCanvas : function()
29973 this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
29974 this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
29976 this.bodyEl.un('click', this.beforeSelectFile, this);
29978 this.notifyEl.hide();
29979 this.thumbEl.show();
29980 this.footerEl.show();
29982 this.baseRotateLevel();
29984 if(this.isDocument){
29985 this.setThumbBoxSize();
29988 this.setThumbBoxPosition();
29990 this.baseScaleLevel();
29996 this.canvasLoaded = true;
29999 this.maskEl.unmask();
30004 setCanvasPosition : function()
30006 if(!this.canvasEl){
30010 var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
30011 var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
30013 this.previewEl.setLeft(pw);
30014 this.previewEl.setTop(ph);
30018 onMouseDown : function(e)
30022 this.dragable = true;
30023 this.pinching = false;
30025 if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
30026 this.dragable = false;
30030 this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
30031 this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
30035 onMouseMove : function(e)
30039 if(!this.canvasLoaded){
30043 if (!this.dragable){
30047 var minX = Math.ceil(this.thumbEl.getLeft(true));
30048 var minY = Math.ceil(this.thumbEl.getTop(true));
30050 var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
30051 var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
30053 var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
30054 var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
30056 x = x - this.mouseX;
30057 y = y - this.mouseY;
30059 var bgX = Math.ceil(x + this.previewEl.getLeft(true));
30060 var bgY = Math.ceil(y + this.previewEl.getTop(true));
30062 bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
30063 bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
30065 this.previewEl.setLeft(bgX);
30066 this.previewEl.setTop(bgY);
30068 this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
30069 this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
30072 onMouseUp : function(e)
30076 this.dragable = false;
30079 onMouseWheel : function(e)
30083 this.startScale = this.scale;
30085 this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
30087 if(!this.zoomable()){
30088 this.scale = this.startScale;
30097 zoomable : function()
30099 var minScale = this.thumbEl.getWidth() / this.minWidth;
30101 if(this.minWidth < this.minHeight){
30102 minScale = this.thumbEl.getHeight() / this.minHeight;
30105 var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
30106 var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
30110 (this.rotate == 0 || this.rotate == 180) &&
30112 width > this.imageEl.OriginWidth ||
30113 height > this.imageEl.OriginHeight ||
30114 (width < this.minWidth && height < this.minHeight)
30122 (this.rotate == 90 || this.rotate == 270) &&
30124 width > this.imageEl.OriginWidth ||
30125 height > this.imageEl.OriginHeight ||
30126 (width < this.minHeight && height < this.minWidth)
30133 !this.isDocument &&
30134 (this.rotate == 0 || this.rotate == 180) &&
30136 width < this.minWidth ||
30137 width > this.imageEl.OriginWidth ||
30138 height < this.minHeight ||
30139 height > this.imageEl.OriginHeight
30146 !this.isDocument &&
30147 (this.rotate == 90 || this.rotate == 270) &&
30149 width < this.minHeight ||
30150 width > this.imageEl.OriginWidth ||
30151 height < this.minWidth ||
30152 height > this.imageEl.OriginHeight
30162 onRotateLeft : function(e)
30164 if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
30166 var minScale = this.thumbEl.getWidth() / this.minWidth;
30168 var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
30169 var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
30171 this.startScale = this.scale;
30173 while (this.getScaleLevel() < minScale){
30175 this.scale = this.scale + 1;
30177 if(!this.zoomable()){
30182 Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
30183 Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
30188 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
30195 this.scale = this.startScale;
30197 this.onRotateFail();
30202 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
30204 if(this.isDocument){
30205 this.setThumbBoxSize();
30206 this.setThumbBoxPosition();
30207 this.setCanvasPosition();
30212 this.fireEvent('rotate', this, 'left');
30216 onRotateRight : function(e)
30218 if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
30220 var minScale = this.thumbEl.getWidth() / this.minWidth;
30222 var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
30223 var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
30225 this.startScale = this.scale;
30227 while (this.getScaleLevel() < minScale){
30229 this.scale = this.scale + 1;
30231 if(!this.zoomable()){
30236 Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
30237 Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
30242 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
30249 this.scale = this.startScale;
30251 this.onRotateFail();
30256 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
30258 if(this.isDocument){
30259 this.setThumbBoxSize();
30260 this.setThumbBoxPosition();
30261 this.setCanvasPosition();
30266 this.fireEvent('rotate', this, 'right');
30269 onRotateFail : function()
30271 this.errorEl.show(true);
30275 (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
30280 this.previewEl.dom.innerHTML = '';
30282 var canvasEl = document.createElement("canvas");
30284 var contextEl = canvasEl.getContext("2d");
30286 canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
30287 canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
30288 var center = this.imageEl.OriginWidth / 2;
30290 if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
30291 canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
30292 canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
30293 center = this.imageEl.OriginHeight / 2;
30296 contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
30298 contextEl.translate(center, center);
30299 contextEl.rotate(this.rotate * Math.PI / 180);
30301 contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
30303 this.canvasEl = document.createElement("canvas");
30305 this.contextEl = this.canvasEl.getContext("2d");
30307 switch (this.rotate) {
30310 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
30311 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
30313 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
30318 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
30319 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
30321 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
30322 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);
30326 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
30331 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
30332 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
30334 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
30335 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);
30339 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);
30344 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
30345 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
30347 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
30348 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
30352 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);
30359 this.previewEl.appendChild(this.canvasEl);
30361 this.setCanvasPosition();
30366 if(!this.canvasLoaded){
30370 var imageCanvas = document.createElement("canvas");
30372 var imageContext = imageCanvas.getContext("2d");
30374 imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
30375 imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
30377 var center = imageCanvas.width / 2;
30379 imageContext.translate(center, center);
30381 imageContext.rotate(this.rotate * Math.PI / 180);
30383 imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
30385 var canvas = document.createElement("canvas");
30387 var context = canvas.getContext("2d");
30389 canvas.width = this.minWidth;
30390 canvas.height = this.minHeight;
30392 switch (this.rotate) {
30395 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
30396 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
30398 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
30399 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
30401 var targetWidth = this.minWidth - 2 * x;
30402 var targetHeight = this.minHeight - 2 * y;
30406 if((x == 0 && y == 0) || (x == 0 && y > 0)){
30407 scale = targetWidth / width;
30410 if(x > 0 && y == 0){
30411 scale = targetHeight / height;
30414 if(x > 0 && y > 0){
30415 scale = targetWidth / width;
30417 if(width < height){
30418 scale = targetHeight / height;
30422 context.scale(scale, scale);
30424 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
30425 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
30427 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
30428 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
30430 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
30435 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
30436 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
30438 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
30439 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
30441 var targetWidth = this.minWidth - 2 * x;
30442 var targetHeight = this.minHeight - 2 * y;
30446 if((x == 0 && y == 0) || (x == 0 && y > 0)){
30447 scale = targetWidth / width;
30450 if(x > 0 && y == 0){
30451 scale = targetHeight / height;
30454 if(x > 0 && y > 0){
30455 scale = targetWidth / width;
30457 if(width < height){
30458 scale = targetHeight / height;
30462 context.scale(scale, scale);
30464 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
30465 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
30467 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
30468 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
30470 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
30472 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
30477 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
30478 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
30480 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
30481 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
30483 var targetWidth = this.minWidth - 2 * x;
30484 var targetHeight = this.minHeight - 2 * y;
30488 if((x == 0 && y == 0) || (x == 0 && y > 0)){
30489 scale = targetWidth / width;
30492 if(x > 0 && y == 0){
30493 scale = targetHeight / height;
30496 if(x > 0 && y > 0){
30497 scale = targetWidth / width;
30499 if(width < height){
30500 scale = targetHeight / height;
30504 context.scale(scale, scale);
30506 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
30507 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
30509 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
30510 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
30512 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
30513 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
30515 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
30520 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
30521 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
30523 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
30524 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
30526 var targetWidth = this.minWidth - 2 * x;
30527 var targetHeight = this.minHeight - 2 * y;
30531 if((x == 0 && y == 0) || (x == 0 && y > 0)){
30532 scale = targetWidth / width;
30535 if(x > 0 && y == 0){
30536 scale = targetHeight / height;
30539 if(x > 0 && y > 0){
30540 scale = targetWidth / width;
30542 if(width < height){
30543 scale = targetHeight / height;
30547 context.scale(scale, scale);
30549 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
30550 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
30552 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
30553 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
30555 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
30557 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
30564 this.cropData = canvas.toDataURL(this.cropType);
30566 if(this.fireEvent('crop', this, this.cropData) !== false){
30567 this.process(this.file, this.cropData);
30574 setThumbBoxSize : function()
30578 if(this.isDocument && typeof(this.imageEl) != 'undefined'){
30579 width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
30580 height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
30582 this.minWidth = width;
30583 this.minHeight = height;
30585 if(this.rotate == 90 || this.rotate == 270){
30586 this.minWidth = height;
30587 this.minHeight = width;
30592 width = Math.ceil(this.minWidth * height / this.minHeight);
30594 if(this.minWidth > this.minHeight){
30596 height = Math.ceil(this.minHeight * width / this.minWidth);
30599 this.thumbEl.setStyle({
30600 width : width + 'px',
30601 height : height + 'px'
30608 setThumbBoxPosition : function()
30610 var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
30611 var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
30613 this.thumbEl.setLeft(x);
30614 this.thumbEl.setTop(y);
30618 baseRotateLevel : function()
30620 this.baseRotate = 1;
30623 typeof(this.exif) != 'undefined' &&
30624 typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
30625 [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
30627 this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
30630 this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
30634 baseScaleLevel : function()
30638 if(this.isDocument){
30640 if(this.baseRotate == 6 || this.baseRotate == 8){
30642 height = this.thumbEl.getHeight();
30643 this.baseScale = height / this.imageEl.OriginWidth;
30645 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
30646 width = this.thumbEl.getWidth();
30647 this.baseScale = width / this.imageEl.OriginHeight;
30653 height = this.thumbEl.getHeight();
30654 this.baseScale = height / this.imageEl.OriginHeight;
30656 if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
30657 width = this.thumbEl.getWidth();
30658 this.baseScale = width / this.imageEl.OriginWidth;
30664 if(this.baseRotate == 6 || this.baseRotate == 8){
30666 width = this.thumbEl.getHeight();
30667 this.baseScale = width / this.imageEl.OriginHeight;
30669 if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
30670 height = this.thumbEl.getWidth();
30671 this.baseScale = height / this.imageEl.OriginHeight;
30674 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
30675 height = this.thumbEl.getWidth();
30676 this.baseScale = height / this.imageEl.OriginHeight;
30678 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
30679 width = this.thumbEl.getHeight();
30680 this.baseScale = width / this.imageEl.OriginWidth;
30687 width = this.thumbEl.getWidth();
30688 this.baseScale = width / this.imageEl.OriginWidth;
30690 if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
30691 height = this.thumbEl.getHeight();
30692 this.baseScale = height / this.imageEl.OriginHeight;
30695 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
30697 height = this.thumbEl.getHeight();
30698 this.baseScale = height / this.imageEl.OriginHeight;
30700 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
30701 width = this.thumbEl.getWidth();
30702 this.baseScale = width / this.imageEl.OriginWidth;
30710 getScaleLevel : function()
30712 return this.baseScale * Math.pow(1.1, this.scale);
30715 onTouchStart : function(e)
30717 if(!this.canvasLoaded){
30718 this.beforeSelectFile(e);
30722 var touches = e.browserEvent.touches;
30728 if(touches.length == 1){
30729 this.onMouseDown(e);
30733 if(touches.length != 2){
30739 for(var i = 0, finger; finger = touches[i]; i++){
30740 coords.push(finger.pageX, finger.pageY);
30743 var x = Math.pow(coords[0] - coords[2], 2);
30744 var y = Math.pow(coords[1] - coords[3], 2);
30746 this.startDistance = Math.sqrt(x + y);
30748 this.startScale = this.scale;
30750 this.pinching = true;
30751 this.dragable = false;
30755 onTouchMove : function(e)
30757 if(!this.pinching && !this.dragable){
30761 var touches = e.browserEvent.touches;
30768 this.onMouseMove(e);
30774 for(var i = 0, finger; finger = touches[i]; i++){
30775 coords.push(finger.pageX, finger.pageY);
30778 var x = Math.pow(coords[0] - coords[2], 2);
30779 var y = Math.pow(coords[1] - coords[3], 2);
30781 this.endDistance = Math.sqrt(x + y);
30783 this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
30785 if(!this.zoomable()){
30786 this.scale = this.startScale;
30794 onTouchEnd : function(e)
30796 this.pinching = false;
30797 this.dragable = false;
30801 process : function(file, crop)
30804 this.maskEl.mask(this.loadingText);
30807 this.xhr = new XMLHttpRequest();
30809 file.xhr = this.xhr;
30811 this.xhr.open(this.method, this.url, true);
30814 "Accept": "application/json",
30815 "Cache-Control": "no-cache",
30816 "X-Requested-With": "XMLHttpRequest"
30819 for (var headerName in headers) {
30820 var headerValue = headers[headerName];
30822 this.xhr.setRequestHeader(headerName, headerValue);
30828 this.xhr.onload = function()
30830 _this.xhrOnLoad(_this.xhr);
30833 this.xhr.onerror = function()
30835 _this.xhrOnError(_this.xhr);
30838 var formData = new FormData();
30840 formData.append('returnHTML', 'NO');
30843 formData.append('crop', crop);
30846 if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
30847 formData.append(this.paramName, file, file.name);
30850 if(typeof(file.filename) != 'undefined'){
30851 formData.append('filename', file.filename);
30854 if(typeof(file.mimetype) != 'undefined'){
30855 formData.append('mimetype', file.mimetype);
30858 if(this.fireEvent('arrange', this, formData) != false){
30859 this.xhr.send(formData);
30863 xhrOnLoad : function(xhr)
30866 this.maskEl.unmask();
30869 if (xhr.readyState !== 4) {
30870 this.fireEvent('exception', this, xhr);
30874 var response = Roo.decode(xhr.responseText);
30876 if(!response.success){
30877 this.fireEvent('exception', this, xhr);
30881 var response = Roo.decode(xhr.responseText);
30883 this.fireEvent('upload', this, response);
30887 xhrOnError : function()
30890 this.maskEl.unmask();
30893 Roo.log('xhr on error');
30895 var response = Roo.decode(xhr.responseText);
30901 prepare : function(file)
30904 this.maskEl.mask(this.loadingText);
30910 if(typeof(file) === 'string'){
30911 this.loadCanvas(file);
30915 if(!file || !this.urlAPI){
30920 this.cropType = file.type;
30924 if(this.fireEvent('prepare', this, this.file) != false){
30926 var reader = new FileReader();
30928 reader.onload = function (e) {
30929 if (e.target.error) {
30930 Roo.log(e.target.error);
30934 var buffer = e.target.result,
30935 dataView = new DataView(buffer),
30937 maxOffset = dataView.byteLength - 4,
30941 if (dataView.getUint16(0) === 0xffd8) {
30942 while (offset < maxOffset) {
30943 markerBytes = dataView.getUint16(offset);
30945 if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
30946 markerLength = dataView.getUint16(offset + 2) + 2;
30947 if (offset + markerLength > dataView.byteLength) {
30948 Roo.log('Invalid meta data: Invalid segment size.');
30952 if(markerBytes == 0xffe1){
30953 _this.parseExifData(
30960 offset += markerLength;
30970 var url = _this.urlAPI.createObjectURL(_this.file);
30972 _this.loadCanvas(url);
30977 reader.readAsArrayBuffer(this.file);
30983 parseExifData : function(dataView, offset, length)
30985 var tiffOffset = offset + 10,
30989 if (dataView.getUint32(offset + 4) !== 0x45786966) {
30990 // No Exif data, might be XMP data instead
30994 // Check for the ASCII code for "Exif" (0x45786966):
30995 if (dataView.getUint32(offset + 4) !== 0x45786966) {
30996 // No Exif data, might be XMP data instead
30999 if (tiffOffset + 8 > dataView.byteLength) {
31000 Roo.log('Invalid Exif data: Invalid segment size.');
31003 // Check for the two null bytes:
31004 if (dataView.getUint16(offset + 8) !== 0x0000) {
31005 Roo.log('Invalid Exif data: Missing byte alignment offset.');
31008 // Check the byte alignment:
31009 switch (dataView.getUint16(tiffOffset)) {
31011 littleEndian = true;
31014 littleEndian = false;
31017 Roo.log('Invalid Exif data: Invalid byte alignment marker.');
31020 // Check for the TIFF tag marker (0x002A):
31021 if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
31022 Roo.log('Invalid Exif data: Missing TIFF marker.');
31025 // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
31026 dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
31028 this.parseExifTags(
31031 tiffOffset + dirOffset,
31036 parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
31041 if (dirOffset + 6 > dataView.byteLength) {
31042 Roo.log('Invalid Exif data: Invalid directory offset.');
31045 tagsNumber = dataView.getUint16(dirOffset, littleEndian);
31046 dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
31047 if (dirEndOffset + 4 > dataView.byteLength) {
31048 Roo.log('Invalid Exif data: Invalid directory size.');
31051 for (i = 0; i < tagsNumber; i += 1) {
31055 dirOffset + 2 + 12 * i, // tag offset
31059 // Return the offset to the next directory:
31060 return dataView.getUint32(dirEndOffset, littleEndian);
31063 parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
31065 var tag = dataView.getUint16(offset, littleEndian);
31067 this.exif[tag] = this.getExifValue(
31071 dataView.getUint16(offset + 2, littleEndian), // tag type
31072 dataView.getUint32(offset + 4, littleEndian), // tag length
31077 getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
31079 var tagType = Roo.bootstrap.UploadCropbox.exifTagTypes[type],
31088 Roo.log('Invalid Exif data: Invalid tag type.');
31092 tagSize = tagType.size * length;
31093 // Determine if the value is contained in the dataOffset bytes,
31094 // or if the value at the dataOffset is a pointer to the actual data:
31095 dataOffset = tagSize > 4 ?
31096 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
31097 if (dataOffset + tagSize > dataView.byteLength) {
31098 Roo.log('Invalid Exif data: Invalid data offset.');
31101 if (length === 1) {
31102 return tagType.getValue(dataView, dataOffset, littleEndian);
31105 for (i = 0; i < length; i += 1) {
31106 values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
31109 if (tagType.ascii) {
31111 // Concatenate the chars:
31112 for (i = 0; i < values.length; i += 1) {
31114 // Ignore the terminating NULL byte(s):
31115 if (c === '\u0000') {
31127 Roo.apply(Roo.bootstrap.UploadCropbox, {
31129 'Orientation': 0x0112
31133 1: 0, //'top-left',
31135 3: 180, //'bottom-right',
31136 // 4: 'bottom-left',
31138 6: 90, //'right-top',
31139 // 7: 'right-bottom',
31140 8: 270 //'left-bottom'
31144 // byte, 8-bit unsigned int:
31146 getValue: function (dataView, dataOffset) {
31147 return dataView.getUint8(dataOffset);
31151 // ascii, 8-bit byte:
31153 getValue: function (dataView, dataOffset) {
31154 return String.fromCharCode(dataView.getUint8(dataOffset));
31159 // short, 16 bit int:
31161 getValue: function (dataView, dataOffset, littleEndian) {
31162 return dataView.getUint16(dataOffset, littleEndian);
31166 // long, 32 bit int:
31168 getValue: function (dataView, dataOffset, littleEndian) {
31169 return dataView.getUint32(dataOffset, littleEndian);
31173 // rational = two long values, first is numerator, second is denominator:
31175 getValue: function (dataView, dataOffset, littleEndian) {
31176 return dataView.getUint32(dataOffset, littleEndian) /
31177 dataView.getUint32(dataOffset + 4, littleEndian);
31181 // slong, 32 bit signed int:
31183 getValue: function (dataView, dataOffset, littleEndian) {
31184 return dataView.getInt32(dataOffset, littleEndian);
31188 // srational, two slongs, first is numerator, second is denominator:
31190 getValue: function (dataView, dataOffset, littleEndian) {
31191 return dataView.getInt32(dataOffset, littleEndian) /
31192 dataView.getInt32(dataOffset + 4, littleEndian);
31202 cls : 'btn-group roo-upload-cropbox-rotate-left',
31203 action : 'rotate-left',
31207 cls : 'btn btn-default',
31208 html : '<i class="fa fa-undo"></i>'
31214 cls : 'btn-group roo-upload-cropbox-picture',
31215 action : 'picture',
31219 cls : 'btn btn-default',
31220 html : '<i class="fa fa-picture-o"></i>'
31226 cls : 'btn-group roo-upload-cropbox-rotate-right',
31227 action : 'rotate-right',
31231 cls : 'btn btn-default',
31232 html : '<i class="fa fa-repeat"></i>'
31240 cls : 'btn-group roo-upload-cropbox-rotate-left',
31241 action : 'rotate-left',
31245 cls : 'btn btn-default',
31246 html : '<i class="fa fa-undo"></i>'
31252 cls : 'btn-group roo-upload-cropbox-download',
31253 action : 'download',
31257 cls : 'btn btn-default',
31258 html : '<i class="fa fa-download"></i>'
31264 cls : 'btn-group roo-upload-cropbox-crop',
31269 cls : 'btn btn-default',
31270 html : '<i class="fa fa-crop"></i>'
31276 cls : 'btn-group roo-upload-cropbox-trash',
31281 cls : 'btn btn-default',
31282 html : '<i class="fa fa-trash"></i>'
31288 cls : 'btn-group roo-upload-cropbox-rotate-right',
31289 action : 'rotate-right',
31293 cls : 'btn btn-default',
31294 html : '<i class="fa fa-repeat"></i>'
31302 cls : 'btn-group roo-upload-cropbox-rotate-left',
31303 action : 'rotate-left',
31307 cls : 'btn btn-default',
31308 html : '<i class="fa fa-undo"></i>'
31314 cls : 'btn-group roo-upload-cropbox-rotate-right',
31315 action : 'rotate-right',
31319 cls : 'btn btn-default',
31320 html : '<i class="fa fa-repeat"></i>'
31333 * @class Roo.bootstrap.DocumentManager
31334 * @extends Roo.bootstrap.Component
31335 * Bootstrap DocumentManager class
31336 * @cfg {String} paramName default 'imageUpload'
31337 * @cfg {String} toolTipName default 'filename'
31338 * @cfg {String} method default POST
31339 * @cfg {String} url action url
31340 * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
31341 * @cfg {Boolean} multiple multiple upload default true
31342 * @cfg {Number} thumbSize default 300
31343 * @cfg {String} fieldLabel
31344 * @cfg {Number} labelWidth default 4
31345 * @cfg {String} labelAlign (left|top) default left
31346 * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
31347 * @cfg {Number} labellg set the width of label (1-12)
31348 * @cfg {Number} labelmd set the width of label (1-12)
31349 * @cfg {Number} labelsm set the width of label (1-12)
31350 * @cfg {Number} labelxs set the width of label (1-12)
31353 * Create a new DocumentManager
31354 * @param {Object} config The config object
31357 Roo.bootstrap.DocumentManager = function(config){
31358 Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
31361 this.delegates = [];
31366 * Fire when initial the DocumentManager
31367 * @param {Roo.bootstrap.DocumentManager} this
31372 * inspect selected file
31373 * @param {Roo.bootstrap.DocumentManager} this
31374 * @param {File} file
31379 * Fire when xhr load exception
31380 * @param {Roo.bootstrap.DocumentManager} this
31381 * @param {XMLHttpRequest} xhr
31383 "exception" : true,
31385 * @event afterupload
31386 * Fire when xhr load exception
31387 * @param {Roo.bootstrap.DocumentManager} this
31388 * @param {XMLHttpRequest} xhr
31390 "afterupload" : true,
31393 * prepare the form data
31394 * @param {Roo.bootstrap.DocumentManager} this
31395 * @param {Object} formData
31400 * Fire when remove the file
31401 * @param {Roo.bootstrap.DocumentManager} this
31402 * @param {Object} file
31407 * Fire after refresh the file
31408 * @param {Roo.bootstrap.DocumentManager} this
31413 * Fire after click the image
31414 * @param {Roo.bootstrap.DocumentManager} this
31415 * @param {Object} file
31420 * Fire when upload a image and editable set to true
31421 * @param {Roo.bootstrap.DocumentManager} this
31422 * @param {Object} file
31426 * @event beforeselectfile
31427 * Fire before select file
31428 * @param {Roo.bootstrap.DocumentManager} this
31430 "beforeselectfile" : true,
31433 * Fire before process file
31434 * @param {Roo.bootstrap.DocumentManager} this
31435 * @param {Object} file
31439 * @event previewrendered
31440 * Fire when preview rendered
31441 * @param {Roo.bootstrap.DocumentManager} this
31442 * @param {Object} file
31444 "previewrendered" : true,
31447 "previewResize" : true
31452 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
31461 paramName : 'imageUpload',
31462 toolTipName : 'filename',
31465 labelAlign : 'left',
31475 getAutoCreate : function()
31477 var managerWidget = {
31479 cls : 'roo-document-manager',
31483 cls : 'roo-document-manager-selector',
31488 cls : 'roo-document-manager-uploader',
31492 cls : 'roo-document-manager-upload-btn',
31493 html : '<i class="fa fa-plus"></i>'
31504 cls : 'column col-md-12',
31509 if(this.fieldLabel.length){
31514 cls : 'column col-md-12',
31515 html : this.fieldLabel
31519 cls : 'column col-md-12',
31524 if(this.labelAlign == 'left'){
31529 html : this.fieldLabel
31538 if(this.labelWidth > 12){
31539 content[0].style = "width: " + this.labelWidth + 'px';
31542 if(this.labelWidth < 13 && this.labelmd == 0){
31543 this.labelmd = this.labelWidth;
31546 if(this.labellg > 0){
31547 content[0].cls += ' col-lg-' + this.labellg;
31548 content[1].cls += ' col-lg-' + (12 - this.labellg);
31551 if(this.labelmd > 0){
31552 content[0].cls += ' col-md-' + this.labelmd;
31553 content[1].cls += ' col-md-' + (12 - this.labelmd);
31556 if(this.labelsm > 0){
31557 content[0].cls += ' col-sm-' + this.labelsm;
31558 content[1].cls += ' col-sm-' + (12 - this.labelsm);
31561 if(this.labelxs > 0){
31562 content[0].cls += ' col-xs-' + this.labelxs;
31563 content[1].cls += ' col-xs-' + (12 - this.labelxs);
31571 cls : 'row clearfix',
31579 initEvents : function()
31581 this.managerEl = this.el.select('.roo-document-manager', true).first();
31582 this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
31584 this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
31585 this.selectorEl.hide();
31588 this.selectorEl.attr('multiple', 'multiple');
31591 this.selectorEl.on('change', this.onFileSelected, this);
31593 this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
31594 this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
31596 this.uploader.on('click', this.onUploaderClick, this);
31598 this.renderProgressDialog();
31602 window.addEventListener("resize", function() { _this.refresh(); } );
31604 this.fireEvent('initial', this);
31607 renderProgressDialog : function()
31611 this.progressDialog = new Roo.bootstrap.Modal({
31612 cls : 'roo-document-manager-progress-dialog',
31613 allow_close : false,
31624 btnclick : function() {
31625 _this.uploadCancel();
31631 this.progressDialog.render(Roo.get(document.body));
31633 this.progress = new Roo.bootstrap.Progress({
31634 cls : 'roo-document-manager-progress',
31639 this.progress.render(this.progressDialog.getChildContainer());
31641 this.progressBar = new Roo.bootstrap.ProgressBar({
31642 cls : 'roo-document-manager-progress-bar',
31645 aria_valuemax : 12,
31649 this.progressBar.render(this.progress.getChildContainer());
31652 onUploaderClick : function(e)
31654 e.preventDefault();
31656 if(this.fireEvent('beforeselectfile', this) != false){
31657 this.selectorEl.dom.click();
31662 onFileSelected : function(e)
31664 e.preventDefault();
31666 if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
31670 Roo.each(this.selectorEl.dom.files, function(file){
31671 if(this.fireEvent('inspect', this, file) != false){
31672 this.files.push(file);
31682 this.selectorEl.dom.value = '';
31684 if(!this.files || !this.files.length){
31688 if(this.boxes > 0 && this.files.length > this.boxes){
31689 this.files = this.files.slice(0, this.boxes);
31692 this.uploader.show();
31694 if(this.boxes > 0 && this.files.length > this.boxes - 1){
31695 this.uploader.hide();
31704 Roo.each(this.files, function(file){
31706 if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
31707 var f = this.renderPreview(file);
31712 if(file.type.indexOf('image') != -1){
31713 this.delegates.push(
31715 _this.process(file);
31716 }).createDelegate(this)
31724 _this.process(file);
31725 }).createDelegate(this)
31730 this.files = files;
31732 this.delegates = this.delegates.concat(docs);
31734 if(!this.delegates.length){
31739 this.progressBar.aria_valuemax = this.delegates.length;
31746 arrange : function()
31748 if(!this.delegates.length){
31749 this.progressDialog.hide();
31754 var delegate = this.delegates.shift();
31756 this.progressDialog.show();
31758 this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
31760 this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
31765 refresh : function()
31767 this.uploader.show();
31769 if(this.boxes > 0 && this.files.length > this.boxes - 1){
31770 this.uploader.hide();
31773 Roo.isTouch ? this.closable(false) : this.closable(true);
31775 this.fireEvent('refresh', this);
31778 onRemove : function(e, el, o)
31780 e.preventDefault();
31782 this.fireEvent('remove', this, o);
31786 remove : function(o)
31790 Roo.each(this.files, function(file){
31791 if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
31800 this.files = files;
31807 Roo.each(this.files, function(file){
31812 file.target.remove();
31821 onClick : function(e, el, o)
31823 e.preventDefault();
31825 this.fireEvent('click', this, o);
31829 closable : function(closable)
31831 Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
31833 el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
31845 xhrOnLoad : function(xhr)
31847 Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
31851 if (xhr.readyState !== 4) {
31853 this.fireEvent('exception', this, xhr);
31857 var response = Roo.decode(xhr.responseText);
31859 if(!response.success){
31861 this.fireEvent('exception', this, xhr);
31865 var file = this.renderPreview(response.data);
31867 this.files.push(file);
31871 this.fireEvent('afterupload', this, xhr);
31875 xhrOnError : function(xhr)
31877 Roo.log('xhr on error');
31879 var response = Roo.decode(xhr.responseText);
31886 process : function(file)
31888 if(this.fireEvent('process', this, file) !== false){
31889 if(this.editable && file.type.indexOf('image') != -1){
31890 this.fireEvent('edit', this, file);
31894 this.uploadStart(file, false);
31901 uploadStart : function(file, crop)
31903 this.xhr = new XMLHttpRequest();
31905 if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
31910 file.xhr = this.xhr;
31912 this.managerEl.createChild({
31914 cls : 'roo-document-manager-loading',
31918 tooltip : file.name,
31919 cls : 'roo-document-manager-thumb',
31920 html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
31926 this.xhr.open(this.method, this.url, true);
31929 "Accept": "application/json",
31930 "Cache-Control": "no-cache",
31931 "X-Requested-With": "XMLHttpRequest"
31934 for (var headerName in headers) {
31935 var headerValue = headers[headerName];
31937 this.xhr.setRequestHeader(headerName, headerValue);
31943 this.xhr.onload = function()
31945 _this.xhrOnLoad(_this.xhr);
31948 this.xhr.onerror = function()
31950 _this.xhrOnError(_this.xhr);
31953 var formData = new FormData();
31955 formData.append('returnHTML', 'NO');
31958 formData.append('crop', crop);
31961 formData.append(this.paramName, file, file.name);
31968 if(this.fireEvent('prepare', this, formData, options) != false){
31970 if(options.manually){
31974 this.xhr.send(formData);
31978 this.uploadCancel();
31981 uploadCancel : function()
31987 this.delegates = [];
31989 Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
31996 renderPreview : function(file)
31998 if(typeof(file.target) != 'undefined' && file.target){
32002 var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
32004 var previewEl = this.managerEl.createChild({
32006 cls : 'roo-document-manager-preview',
32010 tooltip : file[this.toolTipName],
32011 cls : 'roo-document-manager-thumb',
32012 html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
32017 html : '<i class="fa fa-times-circle"></i>'
32022 var close = previewEl.select('button.close', true).first();
32024 close.on('click', this.onRemove, this, file);
32026 file.target = previewEl;
32028 var image = previewEl.select('img', true).first();
32032 image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
32034 image.on('click', this.onClick, this, file);
32036 this.fireEvent('previewrendered', this, file);
32042 onPreviewLoad : function(file, image)
32044 if(typeof(file.target) == 'undefined' || !file.target){
32048 var width = image.dom.naturalWidth || image.dom.width;
32049 var height = image.dom.naturalHeight || image.dom.height;
32051 if(!this.previewResize) {
32055 if(width > height){
32056 file.target.addClass('wide');
32060 file.target.addClass('tall');
32065 uploadFromSource : function(file, crop)
32067 this.xhr = new XMLHttpRequest();
32069 this.managerEl.createChild({
32071 cls : 'roo-document-manager-loading',
32075 tooltip : file.name,
32076 cls : 'roo-document-manager-thumb',
32077 html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
32083 this.xhr.open(this.method, this.url, true);
32086 "Accept": "application/json",
32087 "Cache-Control": "no-cache",
32088 "X-Requested-With": "XMLHttpRequest"
32091 for (var headerName in headers) {
32092 var headerValue = headers[headerName];
32094 this.xhr.setRequestHeader(headerName, headerValue);
32100 this.xhr.onload = function()
32102 _this.xhrOnLoad(_this.xhr);
32105 this.xhr.onerror = function()
32107 _this.xhrOnError(_this.xhr);
32110 var formData = new FormData();
32112 formData.append('returnHTML', 'NO');
32114 formData.append('crop', crop);
32116 if(typeof(file.filename) != 'undefined'){
32117 formData.append('filename', file.filename);
32120 if(typeof(file.mimetype) != 'undefined'){
32121 formData.append('mimetype', file.mimetype);
32126 if(this.fireEvent('prepare', this, formData) != false){
32127 this.xhr.send(formData);
32137 * @class Roo.bootstrap.DocumentViewer
32138 * @extends Roo.bootstrap.Component
32139 * Bootstrap DocumentViewer class
32140 * @cfg {Boolean} showDownload (true|false) show download button (default true)
32141 * @cfg {Boolean} showTrash (true|false) show trash button (default true)
32144 * Create a new DocumentViewer
32145 * @param {Object} config The config object
32148 Roo.bootstrap.DocumentViewer = function(config){
32149 Roo.bootstrap.DocumentViewer.superclass.constructor.call(this, config);
32154 * Fire after initEvent
32155 * @param {Roo.bootstrap.DocumentViewer} this
32161 * @param {Roo.bootstrap.DocumentViewer} this
32166 * Fire after download button
32167 * @param {Roo.bootstrap.DocumentViewer} this
32172 * Fire after trash button
32173 * @param {Roo.bootstrap.DocumentViewer} this
32180 Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component, {
32182 showDownload : true,
32186 getAutoCreate : function()
32190 cls : 'roo-document-viewer',
32194 cls : 'roo-document-viewer-body',
32198 cls : 'roo-document-viewer-thumb',
32202 cls : 'roo-document-viewer-image'
32210 cls : 'roo-document-viewer-footer',
32213 cls : 'btn-group btn-group-justified roo-document-viewer-btn-group',
32217 cls : 'btn-group roo-document-viewer-download',
32221 cls : 'btn btn-default',
32222 html : '<i class="fa fa-download"></i>'
32228 cls : 'btn-group roo-document-viewer-trash',
32232 cls : 'btn btn-default',
32233 html : '<i class="fa fa-trash"></i>'
32246 initEvents : function()
32248 this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
32249 this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
32251 this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
32252 this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
32254 this.imageEl = this.el.select('.roo-document-viewer-image', true).first();
32255 this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
32257 this.footerEl = this.el.select('.roo-document-viewer-footer', true).first();
32258 this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
32260 this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
32261 this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
32263 this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
32264 this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
32266 this.bodyEl.on('click', this.onClick, this);
32267 this.downloadBtn.on('click', this.onDownload, this);
32268 this.trashBtn.on('click', this.onTrash, this);
32270 this.downloadBtn.hide();
32271 this.trashBtn.hide();
32273 if(this.showDownload){
32274 this.downloadBtn.show();
32277 if(this.showTrash){
32278 this.trashBtn.show();
32281 if(!this.showDownload && !this.showTrash) {
32282 this.footerEl.hide();
32287 initial : function()
32289 this.fireEvent('initial', this);
32293 onClick : function(e)
32295 e.preventDefault();
32297 this.fireEvent('click', this);
32300 onDownload : function(e)
32302 e.preventDefault();
32304 this.fireEvent('download', this);
32307 onTrash : function(e)
32309 e.preventDefault();
32311 this.fireEvent('trash', this);
32323 * @class Roo.bootstrap.NavProgressBar
32324 * @extends Roo.bootstrap.Component
32325 * Bootstrap NavProgressBar class
32328 * Create a new nav progress bar
32329 * @param {Object} config The config object
32332 Roo.bootstrap.NavProgressBar = function(config){
32333 Roo.bootstrap.NavProgressBar.superclass.constructor.call(this, config);
32335 this.bullets = this.bullets || [];
32337 // Roo.bootstrap.NavProgressBar.register(this);
32341 * Fires when the active item changes
32342 * @param {Roo.bootstrap.NavProgressBar} this
32343 * @param {Roo.bootstrap.NavProgressItem} selected The item selected
32344 * @param {Roo.bootstrap.NavProgressItem} prev The previously selected item
32351 Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
32356 getAutoCreate : function()
32358 var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
32362 cls : 'roo-navigation-bar-group',
32366 cls : 'roo-navigation-top-bar'
32370 cls : 'roo-navigation-bullets-bar',
32374 cls : 'roo-navigation-bar'
32381 cls : 'roo-navigation-bottom-bar'
32391 initEvents: function()
32396 onRender : function(ct, position)
32398 Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
32400 if(this.bullets.length){
32401 Roo.each(this.bullets, function(b){
32410 addItem : function(cfg)
32412 var item = new Roo.bootstrap.NavProgressItem(cfg);
32414 item.parentId = this.id;
32415 item.render(this.el.select('.roo-navigation-bar', true).first(), null);
32418 var top = new Roo.bootstrap.Element({
32420 cls : 'roo-navigation-bar-text'
32423 var bottom = new Roo.bootstrap.Element({
32425 cls : 'roo-navigation-bar-text'
32428 top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
32429 bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
32431 var topText = new Roo.bootstrap.Element({
32433 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
32436 var bottomText = new Roo.bootstrap.Element({
32438 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
32441 topText.onRender(top.el, null);
32442 bottomText.onRender(bottom.el, null);
32445 item.bottomEl = bottom;
32448 this.barItems.push(item);
32453 getActive : function()
32455 var active = false;
32457 Roo.each(this.barItems, function(v){
32459 if (!v.isActive()) {
32471 setActiveItem : function(item)
32475 Roo.each(this.barItems, function(v){
32476 if (v.rid == item.rid) {
32480 if (v.isActive()) {
32481 v.setActive(false);
32486 item.setActive(true);
32488 this.fireEvent('changed', this, item, prev);
32491 getBarItem: function(rid)
32495 Roo.each(this.barItems, function(e) {
32496 if (e.rid != rid) {
32507 indexOfItem : function(item)
32511 Roo.each(this.barItems, function(v, i){
32513 if (v.rid != item.rid) {
32524 setActiveNext : function()
32526 var i = this.indexOfItem(this.getActive());
32528 if (i > this.barItems.length) {
32532 this.setActiveItem(this.barItems[i+1]);
32535 setActivePrev : function()
32537 var i = this.indexOfItem(this.getActive());
32543 this.setActiveItem(this.barItems[i-1]);
32546 format : function()
32548 if(!this.barItems.length){
32552 var width = 100 / this.barItems.length;
32554 Roo.each(this.barItems, function(i){
32555 i.el.setStyle('width', width + '%');
32556 i.topEl.el.setStyle('width', width + '%');
32557 i.bottomEl.el.setStyle('width', width + '%');
32566 * Nav Progress Item
32571 * @class Roo.bootstrap.NavProgressItem
32572 * @extends Roo.bootstrap.Component
32573 * Bootstrap NavProgressItem class
32574 * @cfg {String} rid the reference id
32575 * @cfg {Boolean} active (true|false) Is item active default false
32576 * @cfg {Boolean} disabled (true|false) Is item active default false
32577 * @cfg {String} html
32578 * @cfg {String} position (top|bottom) text position default bottom
32579 * @cfg {String} icon show icon instead of number
32582 * Create a new NavProgressItem
32583 * @param {Object} config The config object
32585 Roo.bootstrap.NavProgressItem = function(config){
32586 Roo.bootstrap.NavProgressItem.superclass.constructor.call(this, config);
32591 * The raw click event for the entire grid.
32592 * @param {Roo.bootstrap.NavProgressItem} this
32593 * @param {Roo.EventObject} e
32600 Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, {
32606 position : 'bottom',
32609 getAutoCreate : function()
32611 var iconCls = 'roo-navigation-bar-item-icon';
32613 iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
32617 cls: 'roo-navigation-bar-item',
32627 cfg.cls += ' active';
32630 cfg.cls += ' disabled';
32636 disable : function()
32638 this.setDisabled(true);
32641 enable : function()
32643 this.setDisabled(false);
32646 initEvents: function()
32648 this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
32650 this.iconEl.on('click', this.onClick, this);
32653 onClick : function(e)
32655 e.preventDefault();
32661 if(this.fireEvent('click', this, e) === false){
32665 this.parent().setActiveItem(this);
32668 isActive: function ()
32670 return this.active;
32673 setActive : function(state)
32675 if(this.active == state){
32679 this.active = state;
32682 this.el.addClass('active');
32686 this.el.removeClass('active');
32691 setDisabled : function(state)
32693 if(this.disabled == state){
32697 this.disabled = state;
32700 this.el.addClass('disabled');
32704 this.el.removeClass('disabled');
32707 tooltipEl : function()
32709 return this.el.select('.roo-navigation-bar-item-icon', true).first();;
32722 * @class Roo.bootstrap.FieldLabel
32723 * @extends Roo.bootstrap.Component
32724 * Bootstrap FieldLabel class
32725 * @cfg {String} html contents of the element
32726 * @cfg {String} tag tag of the element default label
32727 * @cfg {String} cls class of the element
32728 * @cfg {String} target label target
32729 * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
32730 * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
32731 * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
32732 * @cfg {String} iconTooltip default "This field is required"
32733 * @cfg {String} indicatorpos (left|right) default left
32736 * Create a new FieldLabel
32737 * @param {Object} config The config object
32740 Roo.bootstrap.FieldLabel = function(config){
32741 Roo.bootstrap.Element.superclass.constructor.call(this, config);
32746 * Fires after the field has been marked as invalid.
32747 * @param {Roo.form.FieldLabel} this
32748 * @param {String} msg The validation message
32753 * Fires after the field has been validated with no errors.
32754 * @param {Roo.form.FieldLabel} this
32760 Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, {
32767 invalidClass : 'has-warning',
32768 validClass : 'has-success',
32769 iconTooltip : 'This field is required',
32770 indicatorpos : 'left',
32772 getAutoCreate : function(){
32775 if (!this.allowBlank) {
32781 cls : 'roo-bootstrap-field-label ' + this.cls,
32786 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
32787 tooltip : this.iconTooltip
32796 if(this.indicatorpos == 'right'){
32799 cls : 'roo-bootstrap-field-label ' + this.cls,
32808 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
32809 tooltip : this.iconTooltip
32818 initEvents: function()
32820 Roo.bootstrap.Element.superclass.initEvents.call(this);
32822 this.indicator = this.indicatorEl();
32824 if(this.indicator){
32825 this.indicator.removeClass('visible');
32826 this.indicator.addClass('invisible');
32829 Roo.bootstrap.FieldLabel.register(this);
32832 indicatorEl : function()
32834 var indicator = this.el.select('i.roo-required-indicator',true).first();
32845 * Mark this field as valid
32847 markValid : function()
32849 if(this.indicator){
32850 this.indicator.removeClass('visible');
32851 this.indicator.addClass('invisible');
32853 if (Roo.bootstrap.version == 3) {
32854 this.el.removeClass(this.invalidClass);
32855 this.el.addClass(this.validClass);
32857 this.el.removeClass('is-invalid');
32858 this.el.addClass('is-valid');
32862 this.fireEvent('valid', this);
32866 * Mark this field as invalid
32867 * @param {String} msg The validation message
32869 markInvalid : function(msg)
32871 if(this.indicator){
32872 this.indicator.removeClass('invisible');
32873 this.indicator.addClass('visible');
32875 if (Roo.bootstrap.version == 3) {
32876 this.el.removeClass(this.validClass);
32877 this.el.addClass(this.invalidClass);
32879 this.el.removeClass('is-valid');
32880 this.el.addClass('is-invalid');
32884 this.fireEvent('invalid', this, msg);
32890 Roo.apply(Roo.bootstrap.FieldLabel, {
32895 * register a FieldLabel Group
32896 * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
32898 register : function(label)
32900 if(this.groups.hasOwnProperty(label.target)){
32904 this.groups[label.target] = label;
32908 * fetch a FieldLabel Group based on the target
32909 * @param {string} target
32910 * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
32912 get: function(target) {
32913 if (typeof(this.groups[target]) == 'undefined') {
32917 return this.groups[target] ;
32926 * page DateSplitField.
32932 * @class Roo.bootstrap.DateSplitField
32933 * @extends Roo.bootstrap.Component
32934 * Bootstrap DateSplitField class
32935 * @cfg {string} fieldLabel - the label associated
32936 * @cfg {Number} labelWidth set the width of label (0-12)
32937 * @cfg {String} labelAlign (top|left)
32938 * @cfg {Boolean} dayAllowBlank (true|false) default false
32939 * @cfg {Boolean} monthAllowBlank (true|false) default false
32940 * @cfg {Boolean} yearAllowBlank (true|false) default false
32941 * @cfg {string} dayPlaceholder
32942 * @cfg {string} monthPlaceholder
32943 * @cfg {string} yearPlaceholder
32944 * @cfg {string} dayFormat default 'd'
32945 * @cfg {string} monthFormat default 'm'
32946 * @cfg {string} yearFormat default 'Y'
32947 * @cfg {Number} labellg set the width of label (1-12)
32948 * @cfg {Number} labelmd set the width of label (1-12)
32949 * @cfg {Number} labelsm set the width of label (1-12)
32950 * @cfg {Number} labelxs set the width of label (1-12)
32954 * Create a new DateSplitField
32955 * @param {Object} config The config object
32958 Roo.bootstrap.DateSplitField = function(config){
32959 Roo.bootstrap.DateSplitField.superclass.constructor.call(this, config);
32965 * getting the data of years
32966 * @param {Roo.bootstrap.DateSplitField} this
32967 * @param {Object} years
32972 * getting the data of days
32973 * @param {Roo.bootstrap.DateSplitField} this
32974 * @param {Object} days
32979 * Fires after the field has been marked as invalid.
32980 * @param {Roo.form.Field} this
32981 * @param {String} msg The validation message
32986 * Fires after the field has been validated with no errors.
32987 * @param {Roo.form.Field} this
32993 Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, {
32996 labelAlign : 'top',
32998 dayAllowBlank : false,
32999 monthAllowBlank : false,
33000 yearAllowBlank : false,
33001 dayPlaceholder : '',
33002 monthPlaceholder : '',
33003 yearPlaceholder : '',
33007 isFormField : true,
33013 getAutoCreate : function()
33017 cls : 'row roo-date-split-field-group',
33022 cls : 'form-hidden-field roo-date-split-field-group-value',
33028 var labelCls = 'col-md-12';
33029 var contentCls = 'col-md-4';
33031 if(this.fieldLabel){
33035 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
33039 html : this.fieldLabel
33044 if(this.labelAlign == 'left'){
33046 if(this.labelWidth > 12){
33047 label.style = "width: " + this.labelWidth + 'px';
33050 if(this.labelWidth < 13 && this.labelmd == 0){
33051 this.labelmd = this.labelWidth;
33054 if(this.labellg > 0){
33055 labelCls = ' col-lg-' + this.labellg;
33056 contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
33059 if(this.labelmd > 0){
33060 labelCls = ' col-md-' + this.labelmd;
33061 contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
33064 if(this.labelsm > 0){
33065 labelCls = ' col-sm-' + this.labelsm;
33066 contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
33069 if(this.labelxs > 0){
33070 labelCls = ' col-xs-' + this.labelxs;
33071 contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
33075 label.cls += ' ' + labelCls;
33077 cfg.cn.push(label);
33080 Roo.each(['day', 'month', 'year'], function(t){
33083 cls : 'column roo-date-split-field-' + t + ' ' + contentCls
33090 inputEl: function ()
33092 return this.el.select('.roo-date-split-field-group-value', true).first();
33095 onRender : function(ct, position)
33099 Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
33101 this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
33103 this.dayField = new Roo.bootstrap.ComboBox({
33104 allowBlank : this.dayAllowBlank,
33105 alwaysQuery : true,
33106 displayField : 'value',
33109 forceSelection : true,
33111 placeholder : this.dayPlaceholder,
33112 selectOnFocus : true,
33113 tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
33114 triggerAction : 'all',
33116 valueField : 'value',
33117 store : new Roo.data.SimpleStore({
33118 data : (function() {
33120 _this.fireEvent('days', _this, days);
33123 fields : [ 'value' ]
33126 select : function (_self, record, index)
33128 _this.setValue(_this.getValue());
33133 this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
33135 this.monthField = new Roo.bootstrap.MonthField({
33136 after : '<i class=\"fa fa-calendar\"></i>',
33137 allowBlank : this.monthAllowBlank,
33138 placeholder : this.monthPlaceholder,
33141 render : function (_self)
33143 this.el.select('span.input-group-addon', true).first().on('click', function(e){
33144 e.preventDefault();
33148 select : function (_self, oldvalue, newvalue)
33150 _this.setValue(_this.getValue());
33155 this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
33157 this.yearField = new Roo.bootstrap.ComboBox({
33158 allowBlank : this.yearAllowBlank,
33159 alwaysQuery : true,
33160 displayField : 'value',
33163 forceSelection : true,
33165 placeholder : this.yearPlaceholder,
33166 selectOnFocus : true,
33167 tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
33168 triggerAction : 'all',
33170 valueField : 'value',
33171 store : new Roo.data.SimpleStore({
33172 data : (function() {
33174 _this.fireEvent('years', _this, years);
33177 fields : [ 'value' ]
33180 select : function (_self, record, index)
33182 _this.setValue(_this.getValue());
33187 this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
33190 setValue : function(v, format)
33192 this.inputEl.dom.value = v;
33194 var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
33196 var d = Date.parseDate(v, f);
33203 this.setDay(d.format(this.dayFormat));
33204 this.setMonth(d.format(this.monthFormat));
33205 this.setYear(d.format(this.yearFormat));
33212 setDay : function(v)
33214 this.dayField.setValue(v);
33215 this.inputEl.dom.value = this.getValue();
33220 setMonth : function(v)
33222 this.monthField.setValue(v, true);
33223 this.inputEl.dom.value = this.getValue();
33228 setYear : function(v)
33230 this.yearField.setValue(v);
33231 this.inputEl.dom.value = this.getValue();
33236 getDay : function()
33238 return this.dayField.getValue();
33241 getMonth : function()
33243 return this.monthField.getValue();
33246 getYear : function()
33248 return this.yearField.getValue();
33251 getValue : function()
33253 var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
33255 var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
33265 this.inputEl.dom.value = '';
33270 validate : function()
33272 var d = this.dayField.validate();
33273 var m = this.monthField.validate();
33274 var y = this.yearField.validate();
33279 (!this.dayAllowBlank && !d) ||
33280 (!this.monthAllowBlank && !m) ||
33281 (!this.yearAllowBlank && !y)
33286 if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
33295 this.markInvalid();
33300 markValid : function()
33303 var label = this.el.select('label', true).first();
33304 var icon = this.el.select('i.fa-star', true).first();
33310 this.fireEvent('valid', this);
33314 * Mark this field as invalid
33315 * @param {String} msg The validation message
33317 markInvalid : function(msg)
33320 var label = this.el.select('label', true).first();
33321 var icon = this.el.select('i.fa-star', true).first();
33323 if(label && !icon){
33324 this.el.select('.roo-date-split-field-label', true).createChild({
33326 cls : 'text-danger fa fa-lg fa-star',
33327 tooltip : 'This field is required',
33328 style : 'margin-right:5px;'
33332 this.fireEvent('invalid', this, msg);
33335 clearInvalid : function()
33337 var label = this.el.select('label', true).first();
33338 var icon = this.el.select('i.fa-star', true).first();
33344 this.fireEvent('valid', this);
33347 getName: function()
33357 * http://masonry.desandro.com
33359 * The idea is to render all the bricks based on vertical width...
33361 * The original code extends 'outlayer' - we might need to use that....
33367 * @class Roo.bootstrap.LayoutMasonry
33368 * @extends Roo.bootstrap.Component
33369 * Bootstrap Layout Masonry class
33372 * Create a new Element
33373 * @param {Object} config The config object
33376 Roo.bootstrap.LayoutMasonry = function(config){
33378 Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
33382 Roo.bootstrap.LayoutMasonry.register(this);
33388 * Fire after layout the items
33389 * @param {Roo.bootstrap.LayoutMasonry} this
33390 * @param {Roo.EventObject} e
33397 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component, {
33400 * @cfg {Boolean} isLayoutInstant = no animation?
33402 isLayoutInstant : false, // needed?
33405 * @cfg {Number} boxWidth width of the columns
33410 * @cfg {Number} boxHeight - 0 for square, or fix it at a certian height
33415 * @cfg {Number} padWidth padding below box..
33420 * @cfg {Number} gutter gutter width..
33425 * @cfg {Number} maxCols maximum number of columns
33431 * @cfg {Boolean} isAutoInitial defalut true
33433 isAutoInitial : true,
33438 * @cfg {Boolean} isHorizontal defalut false
33440 isHorizontal : false,
33442 currentSize : null,
33448 bricks: null, //CompositeElement
33452 _isLayoutInited : false,
33454 // isAlternative : false, // only use for vertical layout...
33457 * @cfg {Number} alternativePadWidth padding below box..
33459 alternativePadWidth : 50,
33461 selectedBrick : [],
33463 getAutoCreate : function(){
33465 var cfg = Roo.apply({}, Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call(this));
33469 cls: 'blog-masonary-wrapper ' + this.cls,
33471 cls : 'mas-boxes masonary'
33478 getChildContainer: function( )
33480 if (this.boxesEl) {
33481 return this.boxesEl;
33484 this.boxesEl = this.el.select('.mas-boxes').first();
33486 return this.boxesEl;
33490 initEvents : function()
33494 if(this.isAutoInitial){
33495 Roo.log('hook children rendered');
33496 this.on('childrenrendered', function() {
33497 Roo.log('children rendered');
33503 initial : function()
33505 this.selectedBrick = [];
33507 this.currentSize = this.el.getBox(true);
33509 Roo.EventManager.onWindowResize(this.resize, this);
33511 if(!this.isAutoInitial){
33519 //this.layout.defer(500,this);
33523 resize : function()
33525 var cs = this.el.getBox(true);
33528 this.currentSize.width == cs.width &&
33529 this.currentSize.x == cs.x &&
33530 this.currentSize.height == cs.height &&
33531 this.currentSize.y == cs.y
33533 Roo.log("no change in with or X or Y");
33537 this.currentSize = cs;
33543 layout : function()
33545 this._resetLayout();
33547 var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
33549 this.layoutItems( isInstant );
33551 this._isLayoutInited = true;
33553 this.fireEvent('layout', this);
33557 _resetLayout : function()
33559 if(this.isHorizontal){
33560 this.horizontalMeasureColumns();
33564 this.verticalMeasureColumns();
33568 verticalMeasureColumns : function()
33570 this.getContainerWidth();
33572 // if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
33573 // this.colWidth = Math.floor(this.containerWidth * 0.8);
33577 var boxWidth = this.boxWidth + this.padWidth;
33579 if(this.containerWidth < this.boxWidth){
33580 boxWidth = this.containerWidth
33583 var containerWidth = this.containerWidth;
33585 var cols = Math.floor(containerWidth / boxWidth);
33587 this.cols = Math.max( cols, 1 );
33589 this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
33591 var totalBoxWidth = this.cols * boxWidth - this.padWidth;
33593 var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
33595 this.colWidth = boxWidth + avail - this.padWidth;
33597 this.unitWidth = Math.round((this.colWidth - (this.gutter * 2)) / 3);
33598 this.unitHeight = this.boxHeight > 0 ? this.boxHeight : this.unitWidth;
33601 horizontalMeasureColumns : function()
33603 this.getContainerWidth();
33605 var boxWidth = this.boxWidth;
33607 if(this.containerWidth < boxWidth){
33608 boxWidth = this.containerWidth;
33611 this.unitWidth = Math.floor((boxWidth - (this.gutter * 2)) / 3);
33613 this.el.setHeight(boxWidth);
33617 getContainerWidth : function()
33619 this.containerWidth = this.el.getBox(true).width; //maybe use getComputedWidth
33622 layoutItems : function( isInstant )
33624 Roo.log(this.bricks);
33626 var items = Roo.apply([], this.bricks);
33628 if(this.isHorizontal){
33629 this._horizontalLayoutItems( items , isInstant );
33633 // if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
33634 // this._verticalAlternativeLayoutItems( items , isInstant );
33638 this._verticalLayoutItems( items , isInstant );
33642 _verticalLayoutItems : function ( items , isInstant)
33644 if ( !items || !items.length ) {
33649 ['xs', 'xs', 'xs', 'tall'],
33650 ['xs', 'xs', 'tall'],
33651 ['xs', 'xs', 'sm'],
33652 ['xs', 'xs', 'xs'],
33658 ['sm', 'xs', 'xs'],
33662 ['tall', 'xs', 'xs', 'xs'],
33663 ['tall', 'xs', 'xs'],
33675 Roo.each(items, function(item, k){
33677 switch (item.size) {
33678 // these layouts take up a full box,
33689 boxes.push([item]);
33712 var filterPattern = function(box, length)
33720 var pattern = box.slice(0, length);
33724 Roo.each(pattern, function(i){
33725 format.push(i.size);
33728 Roo.each(standard, function(s){
33730 if(String(s) != String(format)){
33739 if(!match && length == 1){
33744 filterPattern(box, length - 1);
33748 queue.push(pattern);
33750 box = box.slice(length, box.length);
33752 filterPattern(box, 4);
33758 Roo.each(boxes, function(box, k){
33764 if(box.length == 1){
33769 filterPattern(box, 4);
33773 this._processVerticalLayoutQueue( queue, isInstant );
33777 // _verticalAlternativeLayoutItems : function( items , isInstant )
33779 // if ( !items || !items.length ) {
33783 // this._processVerticalAlternativeLayoutQueue( items, isInstant );
33787 _horizontalLayoutItems : function ( items , isInstant)
33789 if ( !items || !items.length || items.length < 3) {
33795 var eItems = items.slice(0, 3);
33797 items = items.slice(3, items.length);
33800 ['xs', 'xs', 'xs', 'wide'],
33801 ['xs', 'xs', 'wide'],
33802 ['xs', 'xs', 'sm'],
33803 ['xs', 'xs', 'xs'],
33809 ['sm', 'xs', 'xs'],
33813 ['wide', 'xs', 'xs', 'xs'],
33814 ['wide', 'xs', 'xs'],
33827 Roo.each(items, function(item, k){
33829 switch (item.size) {
33840 boxes.push([item]);
33864 var filterPattern = function(box, length)
33872 var pattern = box.slice(0, length);
33876 Roo.each(pattern, function(i){
33877 format.push(i.size);
33880 Roo.each(standard, function(s){
33882 if(String(s) != String(format)){
33891 if(!match && length == 1){
33896 filterPattern(box, length - 1);
33900 queue.push(pattern);
33902 box = box.slice(length, box.length);
33904 filterPattern(box, 4);
33910 Roo.each(boxes, function(box, k){
33916 if(box.length == 1){
33921 filterPattern(box, 4);
33928 var pos = this.el.getBox(true);
33932 var maxX = pos.right - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
33934 var hit_end = false;
33936 Roo.each(queue, function(box){
33940 Roo.each(box, function(b){
33942 b.el.setVisibilityMode(Roo.Element.DISPLAY);
33952 Roo.each(box, function(b){
33954 b.el.setVisibilityMode(Roo.Element.DISPLAY);
33957 mx = Math.max(mx, b.x);
33961 maxX = maxX - this.unitWidth * mx - this.gutter * (mx - 1) - this.padWidth;
33965 Roo.each(box, function(b){
33967 b.el.setVisibilityMode(Roo.Element.DISPLAY);
33981 this._processHorizontalLayoutQueue( prune, eItems, isInstant );
33984 /** Sets position of item in DOM
33985 * @param {Element} item
33986 * @param {Number} x - horizontal position
33987 * @param {Number} y - vertical position
33988 * @param {Boolean} isInstant - disables transitions
33990 _processVerticalLayoutQueue : function( queue, isInstant )
33992 var pos = this.el.getBox(true);
33997 for (var i = 0; i < this.cols; i++){
34001 Roo.each(queue, function(box, k){
34003 var col = k % this.cols;
34005 Roo.each(box, function(b,kk){
34007 b.el.position('absolute');
34009 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
34010 var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
34012 if(b.size == 'md-left' || b.size == 'md-right'){
34013 width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
34014 height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
34017 b.el.setWidth(width);
34018 b.el.setHeight(height);
34020 b.el.select('iframe',true).setSize(width,height);
34024 for (var i = 0; i < this.cols; i++){
34026 if(maxY[i] < maxY[col]){
34031 col = Math.min(col, i);
34035 x = pos.x + col * (this.colWidth + this.padWidth);
34039 var positions = [];
34041 switch (box.length){
34043 positions = this.getVerticalOneBoxColPositions(x, y, box);
34046 positions = this.getVerticalTwoBoxColPositions(x, y, box);
34049 positions = this.getVerticalThreeBoxColPositions(x, y, box);
34052 positions = this.getVerticalFourBoxColPositions(x, y, box);
34058 Roo.each(box, function(b,kk){
34060 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
34062 var sz = b.el.getSize();
34064 maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
34072 for (var i = 0; i < this.cols; i++){
34073 mY = Math.max(mY, maxY[i]);
34076 this.el.setHeight(mY - pos.y);
34080 // _processVerticalAlternativeLayoutQueue : function( items, isInstant )
34082 // var pos = this.el.getBox(true);
34085 // var maxX = pos.right;
34087 // var maxHeight = 0;
34089 // Roo.each(items, function(item, k){
34093 // item.el.position('absolute');
34095 // var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
34097 // item.el.setWidth(width);
34099 // var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
34101 // item.el.setHeight(height);
34104 // item.el.setXY([x, y], isInstant ? false : true);
34106 // item.el.setXY([maxX - width, y], isInstant ? false : true);
34109 // y = y + height + this.alternativePadWidth;
34111 // maxHeight = maxHeight + height + this.alternativePadWidth;
34115 // this.el.setHeight(maxHeight);
34119 _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
34121 var pos = this.el.getBox(true);
34126 var maxX = pos.right;
34128 this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
34130 var maxX = maxX - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
34132 Roo.each(queue, function(box, k){
34134 Roo.each(box, function(b, kk){
34136 b.el.position('absolute');
34138 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
34139 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
34141 if(b.size == 'md-left' || b.size == 'md-right'){
34142 width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
34143 height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
34146 b.el.setWidth(width);
34147 b.el.setHeight(height);
34155 var positions = [];
34157 switch (box.length){
34159 positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
34162 positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
34165 positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
34168 positions = this.getHorizontalFourBoxColPositions(maxX, minY, box);
34174 Roo.each(box, function(b,kk){
34176 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
34178 maxX = Math.min(maxX, positions[kk].x - this.padWidth);
34186 _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
34188 Roo.each(eItems, function(b,k){
34190 b.size = (k == 0) ? 'sm' : 'xs';
34191 b.x = (k == 0) ? 2 : 1;
34192 b.y = (k == 0) ? 2 : 1;
34194 b.el.position('absolute');
34196 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
34198 b.el.setWidth(width);
34200 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
34202 b.el.setHeight(height);
34206 var positions = [];
34209 x : maxX - this.unitWidth * 2 - this.gutter,
34214 x : maxX - this.unitWidth,
34215 y : minY + (this.unitWidth + this.gutter) * 2
34219 x : maxX - this.unitWidth * 3 - this.gutter * 2,
34223 Roo.each(eItems, function(b,k){
34225 b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
34231 getVerticalOneBoxColPositions : function(x, y, box)
34235 var rand = Math.floor(Math.random() * ((4 - box[0].x)));
34237 if(box[0].size == 'md-left'){
34241 if(box[0].size == 'md-right'){
34246 x : x + (this.unitWidth + this.gutter) * rand,
34253 getVerticalTwoBoxColPositions : function(x, y, box)
34257 if(box[0].size == 'xs'){
34261 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
34265 x : x + (this.unitWidth + this.gutter) * (3 - box[1].x),
34279 x : x + (this.unitWidth + this.gutter) * 2,
34280 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
34287 getVerticalThreeBoxColPositions : function(x, y, box)
34291 if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
34299 x : x + (this.unitWidth + this.gutter) * 1,
34304 x : x + (this.unitWidth + this.gutter) * 2,
34312 if(box[0].size == 'xs' && box[1].size == 'xs'){
34321 y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
34325 x : x + (this.unitWidth + this.gutter) * 1,
34339 x : x + (this.unitWidth + this.gutter) * 2,
34344 x : x + (this.unitWidth + this.gutter) * 2,
34345 y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
34352 getVerticalFourBoxColPositions : function(x, y, box)
34356 if(box[0].size == 'xs'){
34365 y : y + (this.unitHeight + this.gutter) * 1
34370 y : y + (this.unitHeight + this.gutter) * 2
34374 x : x + (this.unitWidth + this.gutter) * 1,
34388 x : x + (this.unitWidth + this.gutter) * 2,
34393 x : x + (this.unitHeightunitWidth + this.gutter) * 2,
34394 y : y + (this.unitHeight + this.gutter) * 1
34398 x : x + (this.unitWidth + this.gutter) * 2,
34399 y : y + (this.unitWidth + this.gutter) * 2
34406 getHorizontalOneBoxColPositions : function(maxX, minY, box)
34410 if(box[0].size == 'md-left'){
34412 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
34419 if(box[0].size == 'md-right'){
34421 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
34422 y : minY + (this.unitWidth + this.gutter) * 1
34428 var rand = Math.floor(Math.random() * (4 - box[0].y));
34431 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34432 y : minY + (this.unitWidth + this.gutter) * rand
34439 getHorizontalTwoBoxColPositions : function(maxX, minY, box)
34443 if(box[0].size == 'xs'){
34446 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34451 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34452 y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
34460 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34465 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34466 y : minY + (this.unitWidth + this.gutter) * 2
34473 getHorizontalThreeBoxColPositions : function(maxX, minY, box)
34477 if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
34480 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34485 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34486 y : minY + (this.unitWidth + this.gutter) * 1
34490 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
34491 y : minY + (this.unitWidth + this.gutter) * 2
34498 if(box[0].size == 'xs' && box[1].size == 'xs'){
34501 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34506 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34511 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
34512 y : minY + (this.unitWidth + this.gutter) * 1
34520 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34525 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34526 y : minY + (this.unitWidth + this.gutter) * 2
34530 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
34531 y : minY + (this.unitWidth + this.gutter) * 2
34538 getHorizontalFourBoxColPositions : function(maxX, minY, box)
34542 if(box[0].size == 'xs'){
34545 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34550 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34555 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),
34560 x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
34561 y : minY + (this.unitWidth + this.gutter) * 1
34569 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
34574 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
34575 y : minY + (this.unitWidth + this.gutter) * 2
34579 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
34580 y : minY + (this.unitWidth + this.gutter) * 2
34584 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),
34585 y : minY + (this.unitWidth + this.gutter) * 2
34593 * remove a Masonry Brick
34594 * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
34596 removeBrick : function(brick_id)
34602 for (var i = 0; i<this.bricks.length; i++) {
34603 if (this.bricks[i].id == brick_id) {
34604 this.bricks.splice(i,1);
34605 this.el.dom.removeChild(Roo.get(brick_id).dom);
34612 * adds a Masonry Brick
34613 * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
34615 addBrick : function(cfg)
34617 var cn = new Roo.bootstrap.MasonryBrick(cfg);
34618 //this.register(cn);
34619 cn.parentId = this.id;
34620 cn.render(this.el);
34625 * register a Masonry Brick
34626 * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
34629 register : function(brick)
34631 this.bricks.push(brick);
34632 brick.masonryId = this.id;
34636 * clear all the Masonry Brick
34638 clearAll : function()
34641 //this.getChildContainer().dom.innerHTML = "";
34642 this.el.dom.innerHTML = '';
34645 getSelected : function()
34647 if (!this.selectedBrick) {
34651 return this.selectedBrick;
34655 Roo.apply(Roo.bootstrap.LayoutMasonry, {
34659 * register a Masonry Layout
34660 * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
34663 register : function(layout)
34665 this.groups[layout.id] = layout;
34668 * fetch a Masonry Layout based on the masonry layout ID
34669 * @param {string} the masonry layout to add
34670 * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
34673 get: function(layout_id) {
34674 if (typeof(this.groups[layout_id]) == 'undefined') {
34677 return this.groups[layout_id] ;
34689 * http://masonry.desandro.com
34691 * The idea is to render all the bricks based on vertical width...
34693 * The original code extends 'outlayer' - we might need to use that....
34699 * @class Roo.bootstrap.LayoutMasonryAuto
34700 * @extends Roo.bootstrap.Component
34701 * Bootstrap Layout Masonry class
34704 * Create a new Element
34705 * @param {Object} config The config object
34708 Roo.bootstrap.LayoutMasonryAuto = function(config){
34709 Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this, config);
34712 Roo.extend(Roo.bootstrap.LayoutMasonryAuto, Roo.bootstrap.Component, {
34715 * @cfg {Boolean} isFitWidth - resize the width..
34717 isFitWidth : false, // options..
34719 * @cfg {Boolean} isOriginLeft = left align?
34721 isOriginLeft : true,
34723 * @cfg {Boolean} isOriginTop = top align?
34725 isOriginTop : false,
34727 * @cfg {Boolean} isLayoutInstant = no animation?
34729 isLayoutInstant : false, // needed?
34731 * @cfg {Boolean} isResizingContainer = not sure if this is used..
34733 isResizingContainer : true,
34735 * @cfg {Number} columnWidth width of the columns
34741 * @cfg {Number} maxCols maximum number of columns
34746 * @cfg {Number} padHeight padding below box..
34752 * @cfg {Boolean} isAutoInitial defalut true
34755 isAutoInitial : true,
34761 initialColumnWidth : 0,
34762 currentSize : null,
34764 colYs : null, // array.
34771 bricks: null, //CompositeElement
34772 cols : 0, // array?
34773 // element : null, // wrapped now this.el
34774 _isLayoutInited : null,
34777 getAutoCreate : function(){
34781 cls: 'blog-masonary-wrapper ' + this.cls,
34783 cls : 'mas-boxes masonary'
34790 getChildContainer: function( )
34792 if (this.boxesEl) {
34793 return this.boxesEl;
34796 this.boxesEl = this.el.select('.mas-boxes').first();
34798 return this.boxesEl;
34802 initEvents : function()
34806 if(this.isAutoInitial){
34807 Roo.log('hook children rendered');
34808 this.on('childrenrendered', function() {
34809 Roo.log('children rendered');
34816 initial : function()
34818 this.reloadItems();
34820 this.currentSize = this.el.getBox(true);
34822 /// was window resize... - let's see if this works..
34823 Roo.EventManager.onWindowResize(this.resize, this);
34825 if(!this.isAutoInitial){
34830 this.layout.defer(500,this);
34833 reloadItems: function()
34835 this.bricks = this.el.select('.masonry-brick', true);
34837 this.bricks.each(function(b) {
34838 //Roo.log(b.getSize());
34839 if (!b.attr('originalwidth')) {
34840 b.attr('originalwidth', b.getSize().width);
34845 Roo.log(this.bricks.elements.length);
34848 resize : function()
34851 var cs = this.el.getBox(true);
34853 if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
34854 Roo.log("no change in with or X");
34857 this.currentSize = cs;
34861 layout : function()
34864 this._resetLayout();
34865 //this._manageStamps();
34867 // don't animate first layout
34868 var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
34869 this.layoutItems( isInstant );
34871 // flag for initalized
34872 this._isLayoutInited = true;
34875 layoutItems : function( isInstant )
34877 //var items = this._getItemsForLayout( this.items );
34878 // original code supports filtering layout items.. we just ignore it..
34880 this._layoutItems( this.bricks , isInstant );
34882 this._postLayout();
34884 _layoutItems : function ( items , isInstant)
34886 //this.fireEvent( 'layout', this, items );
34889 if ( !items || !items.elements.length ) {
34890 // no items, emit event with empty array
34895 items.each(function(item) {
34896 Roo.log("layout item");
34898 // get x/y object from method
34899 var position = this._getItemLayoutPosition( item );
34901 position.item = item;
34902 position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
34903 queue.push( position );
34906 this._processLayoutQueue( queue );
34908 /** Sets position of item in DOM
34909 * @param {Element} item
34910 * @param {Number} x - horizontal position
34911 * @param {Number} y - vertical position
34912 * @param {Boolean} isInstant - disables transitions
34914 _processLayoutQueue : function( queue )
34916 for ( var i=0, len = queue.length; i < len; i++ ) {
34917 var obj = queue[i];
34918 obj.item.position('absolute');
34919 obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
34925 * Any logic you want to do after each layout,
34926 * i.e. size the container
34928 _postLayout : function()
34930 this.resizeContainer();
34933 resizeContainer : function()
34935 if ( !this.isResizingContainer ) {
34938 var size = this._getContainerSize();
34940 this.el.setSize(size.width,size.height);
34941 this.boxesEl.setSize(size.width,size.height);
34947 _resetLayout : function()
34949 //this.getSize(); // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
34950 this.colWidth = this.el.getWidth();
34951 //this.gutter = this.el.getWidth();
34953 this.measureColumns();
34959 this.colYs.push( 0 );
34965 measureColumns : function()
34967 this.getContainerWidth();
34968 // if columnWidth is 0, default to outerWidth of first item
34969 if ( !this.columnWidth ) {
34970 var firstItem = this.bricks.first();
34971 Roo.log(firstItem);
34972 this.columnWidth = this.containerWidth;
34973 if (firstItem && firstItem.attr('originalwidth') ) {
34974 this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
34976 // columnWidth fall back to item of first element
34977 Roo.log("set column width?");
34978 this.initialColumnWidth = this.columnWidth ;
34980 // if first elem has no width, default to size of container
34985 if (this.initialColumnWidth) {
34986 this.columnWidth = this.initialColumnWidth;
34991 // column width is fixed at the top - however if container width get's smaller we should
34994 // this bit calcs how man columns..
34996 var columnWidth = this.columnWidth += this.gutter;
34998 // calculate columns
34999 var containerWidth = this.containerWidth + this.gutter;
35001 var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
35002 // fix rounding errors, typically with gutters
35003 var excess = columnWidth - containerWidth % columnWidth;
35006 // if overshoot is less than a pixel, round up, otherwise floor it
35007 var mathMethod = excess && excess < 1 ? 'round' : 'floor';
35008 cols = Math[ mathMethod ]( cols );
35009 this.cols = Math.max( cols, 1 );
35010 this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
35012 // padding positioning..
35013 var totalColWidth = this.cols * this.columnWidth;
35014 var padavail = this.containerWidth - totalColWidth;
35015 // so for 2 columns - we need 3 'pads'
35017 var padNeeded = (1+this.cols) * this.padWidth;
35019 var padExtra = Math.floor((padavail - padNeeded) / this.cols);
35021 this.columnWidth += padExtra
35022 //this.padWidth = Math.floor(padavail / ( this.cols));
35024 // adjust colum width so that padding is fixed??
35026 // we have 3 columns ... total = width * 3
35027 // we have X left over... that should be used by
35029 //if (this.expandC) {
35037 getContainerWidth : function()
35039 /* // container is parent if fit width
35040 var container = this.isFitWidth ? this.element.parentNode : this.element;
35041 // check that this.size and size are there
35042 // IE8 triggers resize on body size change, so they might not be
35044 var size = getSize( container ); //FIXME
35045 this.containerWidth = size && size.innerWidth; //FIXME
35048 this.containerWidth = this.el.getBox(true).width; //maybe use getComputedWidth
35052 _getItemLayoutPosition : function( item ) // what is item?
35054 // we resize the item to our columnWidth..
35056 item.setWidth(this.columnWidth);
35057 item.autoBoxAdjust = false;
35059 var sz = item.getSize();
35061 // how many columns does this brick span
35062 var remainder = this.containerWidth % this.columnWidth;
35064 var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
35065 // round if off by 1 pixel, otherwise use ceil
35066 var colSpan = Math[ mathMethod ]( sz.width / this.columnWidth );
35067 colSpan = Math.min( colSpan, this.cols );
35069 // normally this should be '1' as we dont' currently allow multi width columns..
35071 var colGroup = this._getColGroup( colSpan );
35072 // get the minimum Y value from the columns
35073 var minimumY = Math.min.apply( Math, colGroup );
35074 Roo.log([ 'setHeight', minimumY, sz.height, setHeight ]);
35076 var shortColIndex = colGroup.indexOf( minimumY ); // broken on ie8..?? probably...
35078 // position the brick
35080 x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
35081 y: this.currentSize.y + minimumY + this.padHeight
35085 // apply setHeight to necessary columns
35086 var setHeight = minimumY + sz.height + this.padHeight;
35087 //Roo.log([ 'setHeight', minimumY, sz.height, setHeight ]);
35089 var setSpan = this.cols + 1 - colGroup.length;
35090 for ( var i = 0; i < setSpan; i++ ) {
35091 this.colYs[ shortColIndex + i ] = setHeight ;
35098 * @param {Number} colSpan - number of columns the element spans
35099 * @returns {Array} colGroup
35101 _getColGroup : function( colSpan )
35103 if ( colSpan < 2 ) {
35104 // if brick spans only one column, use all the column Ys
35109 // how many different places could this brick fit horizontally
35110 var groupCount = this.cols + 1 - colSpan;
35111 // for each group potential horizontal position
35112 for ( var i = 0; i < groupCount; i++ ) {
35113 // make an array of colY values for that one group
35114 var groupColYs = this.colYs.slice( i, i + colSpan );
35115 // and get the max value of the array
35116 colGroup[i] = Math.max.apply( Math, groupColYs );
35121 _manageStamp : function( stamp )
35123 var stampSize = stamp.getSize();
35124 var offset = stamp.getBox();
35125 // get the columns that this stamp affects
35126 var firstX = this.isOriginLeft ? offset.x : offset.right;
35127 var lastX = firstX + stampSize.width;
35128 var firstCol = Math.floor( firstX / this.columnWidth );
35129 firstCol = Math.max( 0, firstCol );
35131 var lastCol = Math.floor( lastX / this.columnWidth );
35132 // lastCol should not go over if multiple of columnWidth #425
35133 lastCol -= lastX % this.columnWidth ? 0 : 1;
35134 lastCol = Math.min( this.cols - 1, lastCol );
35136 // set colYs to bottom of the stamp
35137 var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
35140 for ( var i = firstCol; i <= lastCol; i++ ) {
35141 this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
35146 _getContainerSize : function()
35148 this.maxY = Math.max.apply( Math, this.colYs );
35153 if ( this.isFitWidth ) {
35154 size.width = this._getContainerFitWidth();
35160 _getContainerFitWidth : function()
35162 var unusedCols = 0;
35163 // count unused columns
35166 if ( this.colYs[i] !== 0 ) {
35171 // fit container to columns that have been used
35172 return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
35175 needsResizeLayout : function()
35177 var previousWidth = this.containerWidth;
35178 this.getContainerWidth();
35179 return previousWidth !== this.containerWidth;
35194 * @class Roo.bootstrap.MasonryBrick
35195 * @extends Roo.bootstrap.Component
35196 * Bootstrap MasonryBrick class
35199 * Create a new MasonryBrick
35200 * @param {Object} config The config object
35203 Roo.bootstrap.MasonryBrick = function(config){
35205 Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
35207 Roo.bootstrap.MasonryBrick.register(this);
35213 * When a MasonryBrick is clcik
35214 * @param {Roo.bootstrap.MasonryBrick} this
35215 * @param {Roo.EventObject} e
35221 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component, {
35224 * @cfg {String} title
35228 * @cfg {String} html
35232 * @cfg {String} bgimage
35236 * @cfg {String} videourl
35240 * @cfg {String} cls
35244 * @cfg {String} href
35248 * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
35253 * @cfg {String} placetitle (center|bottom)
35258 * @cfg {Boolean} isFitContainer defalut true
35260 isFitContainer : true,
35263 * @cfg {Boolean} preventDefault defalut false
35265 preventDefault : false,
35268 * @cfg {Boolean} inverse defalut false
35270 maskInverse : false,
35272 getAutoCreate : function()
35274 if(!this.isFitContainer){
35275 return this.getSplitAutoCreate();
35278 var cls = 'masonry-brick masonry-brick-full';
35280 if(this.href.length){
35281 cls += ' masonry-brick-link';
35284 if(this.bgimage.length){
35285 cls += ' masonry-brick-image';
35288 if(this.maskInverse){
35289 cls += ' mask-inverse';
35292 if(!this.html.length && !this.maskInverse && !this.videourl.length){
35293 cls += ' enable-mask';
35297 cls += ' masonry-' + this.size + '-brick';
35300 if(this.placetitle.length){
35302 switch (this.placetitle) {
35304 cls += ' masonry-center-title';
35307 cls += ' masonry-bottom-title';
35314 if(!this.html.length && !this.bgimage.length){
35315 cls += ' masonry-center-title';
35318 if(!this.html.length && this.bgimage.length){
35319 cls += ' masonry-bottom-title';
35324 cls += ' ' + this.cls;
35328 tag: (this.href.length) ? 'a' : 'div',
35333 cls: 'masonry-brick-mask'
35337 cls: 'masonry-brick-paragraph',
35343 if(this.href.length){
35344 cfg.href = this.href;
35347 var cn = cfg.cn[1].cn;
35349 if(this.title.length){
35352 cls: 'masonry-brick-title',
35357 if(this.html.length){
35360 cls: 'masonry-brick-text',
35365 if (!this.title.length && !this.html.length) {
35366 cfg.cn[1].cls += ' hide';
35369 if(this.bgimage.length){
35372 cls: 'masonry-brick-image-view',
35377 if(this.videourl.length){
35378 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
35379 // youtube support only?
35382 cls: 'masonry-brick-image-view',
35385 allowfullscreen : true
35393 getSplitAutoCreate : function()
35395 var cls = 'masonry-brick masonry-brick-split';
35397 if(this.href.length){
35398 cls += ' masonry-brick-link';
35401 if(this.bgimage.length){
35402 cls += ' masonry-brick-image';
35406 cls += ' masonry-' + this.size + '-brick';
35409 switch (this.placetitle) {
35411 cls += ' masonry-center-title';
35414 cls += ' masonry-bottom-title';
35417 if(!this.bgimage.length){
35418 cls += ' masonry-center-title';
35421 if(this.bgimage.length){
35422 cls += ' masonry-bottom-title';
35428 cls += ' ' + this.cls;
35432 tag: (this.href.length) ? 'a' : 'div',
35437 cls: 'masonry-brick-split-head',
35441 cls: 'masonry-brick-paragraph',
35448 cls: 'masonry-brick-split-body',
35454 if(this.href.length){
35455 cfg.href = this.href;
35458 if(this.title.length){
35459 cfg.cn[0].cn[0].cn.push({
35461 cls: 'masonry-brick-title',
35466 if(this.html.length){
35467 cfg.cn[1].cn.push({
35469 cls: 'masonry-brick-text',
35474 if(this.bgimage.length){
35475 cfg.cn[0].cn.push({
35477 cls: 'masonry-brick-image-view',
35482 if(this.videourl.length){
35483 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
35484 // youtube support only?
35485 cfg.cn[0].cn.cn.push({
35487 cls: 'masonry-brick-image-view',
35490 allowfullscreen : true
35497 initEvents: function()
35499 switch (this.size) {
35532 this.el.on('touchstart', this.onTouchStart, this);
35533 this.el.on('touchmove', this.onTouchMove, this);
35534 this.el.on('touchend', this.onTouchEnd, this);
35535 this.el.on('contextmenu', this.onContextMenu, this);
35537 this.el.on('mouseenter' ,this.enter, this);
35538 this.el.on('mouseleave', this.leave, this);
35539 this.el.on('click', this.onClick, this);
35542 if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
35543 this.parent().bricks.push(this);
35548 onClick: function(e, el)
35550 var time = this.endTimer - this.startTimer;
35551 // Roo.log(e.preventDefault());
35554 e.preventDefault();
35559 if(!this.preventDefault){
35563 e.preventDefault();
35565 if (this.activeClass != '') {
35566 this.selectBrick();
35569 this.fireEvent('click', this, e);
35572 enter: function(e, el)
35574 e.preventDefault();
35576 if(!this.isFitContainer || this.maskInverse || this.videourl.length){
35580 if(this.bgimage.length && this.html.length){
35581 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
35585 leave: function(e, el)
35587 e.preventDefault();
35589 if(!this.isFitContainer || this.maskInverse || this.videourl.length){
35593 if(this.bgimage.length && this.html.length){
35594 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
35598 onTouchStart: function(e, el)
35600 // e.preventDefault();
35602 this.touchmoved = false;
35604 if(!this.isFitContainer){
35608 if(!this.bgimage.length || !this.html.length){
35612 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
35614 this.timer = new Date().getTime();
35618 onTouchMove: function(e, el)
35620 this.touchmoved = true;
35623 onContextMenu : function(e,el)
35625 e.preventDefault();
35626 e.stopPropagation();
35630 onTouchEnd: function(e, el)
35632 // e.preventDefault();
35634 if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
35641 if(!this.bgimage.length || !this.html.length){
35643 if(this.href.length){
35644 window.location.href = this.href;
35650 if(!this.isFitContainer){
35654 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
35656 window.location.href = this.href;
35659 //selection on single brick only
35660 selectBrick : function() {
35662 if (!this.parentId) {
35666 var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
35667 var index = m.selectedBrick.indexOf(this.id);
35670 m.selectedBrick.splice(index,1);
35671 this.el.removeClass(this.activeClass);
35675 for(var i = 0; i < m.selectedBrick.length; i++) {
35676 var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
35677 b.el.removeClass(b.activeClass);
35680 m.selectedBrick = [];
35682 m.selectedBrick.push(this.id);
35683 this.el.addClass(this.activeClass);
35687 isSelected : function(){
35688 return this.el.hasClass(this.activeClass);
35693 Roo.apply(Roo.bootstrap.MasonryBrick, {
35696 groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
35698 * register a Masonry Brick
35699 * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
35702 register : function(brick)
35704 //this.groups[brick.id] = brick;
35705 this.groups.add(brick.id, brick);
35708 * fetch a masonry brick based on the masonry brick ID
35709 * @param {string} the masonry brick to add
35710 * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
35713 get: function(brick_id)
35715 // if (typeof(this.groups[brick_id]) == 'undefined') {
35718 // return this.groups[brick_id] ;
35720 if(this.groups.key(brick_id)) {
35721 return this.groups.key(brick_id);
35739 * @class Roo.bootstrap.Brick
35740 * @extends Roo.bootstrap.Component
35741 * Bootstrap Brick class
35744 * Create a new Brick
35745 * @param {Object} config The config object
35748 Roo.bootstrap.Brick = function(config){
35749 Roo.bootstrap.Brick.superclass.constructor.call(this, config);
35755 * When a Brick is click
35756 * @param {Roo.bootstrap.Brick} this
35757 * @param {Roo.EventObject} e
35763 Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component, {
35766 * @cfg {String} title
35770 * @cfg {String} html
35774 * @cfg {String} bgimage
35778 * @cfg {String} cls
35782 * @cfg {String} href
35786 * @cfg {String} video
35790 * @cfg {Boolean} square
35794 getAutoCreate : function()
35796 var cls = 'roo-brick';
35798 if(this.href.length){
35799 cls += ' roo-brick-link';
35802 if(this.bgimage.length){
35803 cls += ' roo-brick-image';
35806 if(!this.html.length && !this.bgimage.length){
35807 cls += ' roo-brick-center-title';
35810 if(!this.html.length && this.bgimage.length){
35811 cls += ' roo-brick-bottom-title';
35815 cls += ' ' + this.cls;
35819 tag: (this.href.length) ? 'a' : 'div',
35824 cls: 'roo-brick-paragraph',
35830 if(this.href.length){
35831 cfg.href = this.href;
35834 var cn = cfg.cn[0].cn;
35836 if(this.title.length){
35839 cls: 'roo-brick-title',
35844 if(this.html.length){
35847 cls: 'roo-brick-text',
35854 if(this.bgimage.length){
35857 cls: 'roo-brick-image-view',
35865 initEvents: function()
35867 if(this.title.length || this.html.length){
35868 this.el.on('mouseenter' ,this.enter, this);
35869 this.el.on('mouseleave', this.leave, this);
35872 Roo.EventManager.onWindowResize(this.resize, this);
35874 if(this.bgimage.length){
35875 this.imageEl = this.el.select('.roo-brick-image-view', true).first();
35876 this.imageEl.on('load', this.onImageLoad, this);
35883 onImageLoad : function()
35888 resize : function()
35890 var paragraph = this.el.select('.roo-brick-paragraph', true).first();
35892 paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
35894 if(this.bgimage.length){
35895 var image = this.el.select('.roo-brick-image-view', true).first();
35897 image.setWidth(paragraph.getWidth());
35900 image.setHeight(paragraph.getWidth());
35903 this.el.setHeight(image.getHeight());
35904 paragraph.setHeight(image.getHeight());
35910 enter: function(e, el)
35912 e.preventDefault();
35914 if(this.bgimage.length){
35915 this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
35916 this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
35920 leave: function(e, el)
35922 e.preventDefault();
35924 if(this.bgimage.length){
35925 this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
35926 this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
35941 * @class Roo.bootstrap.NumberField
35942 * @extends Roo.bootstrap.Input
35943 * Bootstrap NumberField class
35949 * Create a new NumberField
35950 * @param {Object} config The config object
35953 Roo.bootstrap.NumberField = function(config){
35954 Roo.bootstrap.NumberField.superclass.constructor.call(this, config);
35957 Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
35960 * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
35962 allowDecimals : true,
35964 * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
35966 decimalSeparator : ".",
35968 * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
35970 decimalPrecision : 2,
35972 * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
35974 allowNegative : true,
35977 * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
35981 * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
35983 minValue : Number.NEGATIVE_INFINITY,
35985 * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
35987 maxValue : Number.MAX_VALUE,
35989 * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
35991 minText : "The minimum value for this field is {0}",
35993 * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
35995 maxText : "The maximum value for this field is {0}",
35997 * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
35998 * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
36000 nanText : "{0} is not a valid number",
36002 * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
36004 thousandsDelimiter : false,
36006 * @cfg {String} valueAlign alignment of value
36008 valueAlign : "left",
36010 getAutoCreate : function()
36012 var hiddenInput = {
36016 cls: 'hidden-number-input'
36020 hiddenInput.name = this.name;
36025 var cfg = Roo.bootstrap.NumberField.superclass.getAutoCreate.call(this);
36027 this.name = hiddenInput.name;
36029 if(cfg.cn.length > 0) {
36030 cfg.cn.push(hiddenInput);
36037 initEvents : function()
36039 Roo.bootstrap.NumberField.superclass.initEvents.call(this);
36041 var allowed = "0123456789";
36043 if(this.allowDecimals){
36044 allowed += this.decimalSeparator;
36047 if(this.allowNegative){
36051 if(this.thousandsDelimiter) {
36055 this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
36057 var keyPress = function(e){
36059 var k = e.getKey();
36061 var c = e.getCharCode();
36064 (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
36065 allowed.indexOf(String.fromCharCode(c)) === -1
36071 if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
36075 if(allowed.indexOf(String.fromCharCode(c)) === -1){
36080 this.el.on("keypress", keyPress, this);
36083 validateValue : function(value)
36086 if(!Roo.bootstrap.NumberField.superclass.validateValue.call(this, value)){
36090 var num = this.parseValue(value);
36093 this.markInvalid(String.format(this.nanText, value));
36097 if(num < this.minValue){
36098 this.markInvalid(String.format(this.minText, this.minValue));
36102 if(num > this.maxValue){
36103 this.markInvalid(String.format(this.maxText, this.maxValue));
36110 getValue : function()
36112 var v = this.hiddenEl().getValue();
36114 return this.fixPrecision(this.parseValue(v));
36117 parseValue : function(value)
36119 if(this.thousandsDelimiter) {
36121 r = new RegExp(",", "g");
36122 value = value.replace(r, "");
36125 value = parseFloat(String(value).replace(this.decimalSeparator, "."));
36126 return isNaN(value) ? '' : value;
36129 fixPrecision : function(value)
36131 if(this.thousandsDelimiter) {
36133 r = new RegExp(",", "g");
36134 value = value.replace(r, "");
36137 var nan = isNaN(value);
36139 if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
36140 return nan ? '' : value;
36142 return parseFloat(value).toFixed(this.decimalPrecision);
36145 setValue : function(v)
36147 v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
36153 this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
36155 this.inputEl().dom.value = (v == '') ? '' :
36156 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
36158 if(!this.allowZero && v === '0') {
36159 this.hiddenEl().dom.value = '';
36160 this.inputEl().dom.value = '';
36167 decimalPrecisionFcn : function(v)
36169 return Math.floor(v);
36172 beforeBlur : function()
36174 var v = this.parseValue(this.getRawValue());
36176 if(v || v === 0 || v === ''){
36181 hiddenEl : function()
36183 return this.el.select('input.hidden-number-input',true).first();
36195 * @class Roo.bootstrap.DocumentSlider
36196 * @extends Roo.bootstrap.Component
36197 * Bootstrap DocumentSlider class
36200 * Create a new DocumentViewer
36201 * @param {Object} config The config object
36204 Roo.bootstrap.DocumentSlider = function(config){
36205 Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
36212 * Fire after initEvent
36213 * @param {Roo.bootstrap.DocumentSlider} this
36218 * Fire after update
36219 * @param {Roo.bootstrap.DocumentSlider} this
36225 * @param {Roo.bootstrap.DocumentSlider} this
36231 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component, {
36237 getAutoCreate : function()
36241 cls : 'roo-document-slider',
36245 cls : 'roo-document-slider-header',
36249 cls : 'roo-document-slider-header-title'
36255 cls : 'roo-document-slider-body',
36259 cls : 'roo-document-slider-prev',
36263 cls : 'fa fa-chevron-left'
36269 cls : 'roo-document-slider-thumb',
36273 cls : 'roo-document-slider-image'
36279 cls : 'roo-document-slider-next',
36283 cls : 'fa fa-chevron-right'
36295 initEvents : function()
36297 this.headerEl = this.el.select('.roo-document-slider-header', true).first();
36298 this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
36300 this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
36301 this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
36303 this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
36304 this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
36306 this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
36307 this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
36309 this.imageEl = this.el.select('.roo-document-slider-image', true).first();
36310 this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
36312 this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
36313 this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
36315 this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
36316 this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
36318 this.thumbEl.on('click', this.onClick, this);
36320 this.prevIndicator.on('click', this.prev, this);
36322 this.nextIndicator.on('click', this.next, this);
36326 initial : function()
36328 if(this.files.length){
36329 this.indicator = 1;
36333 this.fireEvent('initial', this);
36336 update : function()
36338 this.imageEl.attr('src', this.files[this.indicator - 1]);
36340 this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
36342 this.prevIndicator.show();
36344 if(this.indicator == 1){
36345 this.prevIndicator.hide();
36348 this.nextIndicator.show();
36350 if(this.indicator == this.files.length){
36351 this.nextIndicator.hide();
36354 this.thumbEl.scrollTo('top');
36356 this.fireEvent('update', this);
36359 onClick : function(e)
36361 e.preventDefault();
36363 this.fireEvent('click', this);
36368 e.preventDefault();
36370 this.indicator = Math.max(1, this.indicator - 1);
36377 e.preventDefault();
36379 this.indicator = Math.min(this.files.length, this.indicator + 1);
36393 * @class Roo.bootstrap.RadioSet
36394 * @extends Roo.bootstrap.Input
36395 * Bootstrap RadioSet class
36396 * @cfg {String} indicatorpos (left|right) default left
36397 * @cfg {Boolean} inline (true|false) inline the element (default true)
36398 * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
36400 * Create a new RadioSet
36401 * @param {Object} config The config object
36404 Roo.bootstrap.RadioSet = function(config){
36406 Roo.bootstrap.RadioSet.superclass.constructor.call(this, config);
36410 Roo.bootstrap.RadioSet.register(this);
36415 * Fires when the element is checked or unchecked.
36416 * @param {Roo.bootstrap.RadioSet} this This radio
36417 * @param {Roo.bootstrap.Radio} item The checked item
36422 * Fires when the element is click.
36423 * @param {Roo.bootstrap.RadioSet} this This radio set
36424 * @param {Roo.bootstrap.Radio} item The checked item
36425 * @param {Roo.EventObject} e The event object
36432 Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, {
36440 indicatorpos : 'left',
36442 getAutoCreate : function()
36446 cls : 'roo-radio-set-label',
36450 html : this.fieldLabel
36454 if (Roo.bootstrap.version == 3) {
36457 if(this.indicatorpos == 'left'){
36460 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
36461 tooltip : 'This field is required'
36466 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
36467 tooltip : 'This field is required'
36473 cls : 'roo-radio-set-items'
36476 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
36478 if (align === 'left' && this.fieldLabel.length) {
36481 cls : "roo-radio-set-right",
36487 if(this.labelWidth > 12){
36488 label.style = "width: " + this.labelWidth + 'px';
36491 if(this.labelWidth < 13 && this.labelmd == 0){
36492 this.labelmd = this.labelWidth;
36495 if(this.labellg > 0){
36496 label.cls += ' col-lg-' + this.labellg;
36497 items.cls += ' col-lg-' + (12 - this.labellg);
36500 if(this.labelmd > 0){
36501 label.cls += ' col-md-' + this.labelmd;
36502 items.cls += ' col-md-' + (12 - this.labelmd);
36505 if(this.labelsm > 0){
36506 label.cls += ' col-sm-' + this.labelsm;
36507 items.cls += ' col-sm-' + (12 - this.labelsm);
36510 if(this.labelxs > 0){
36511 label.cls += ' col-xs-' + this.labelxs;
36512 items.cls += ' col-xs-' + (12 - this.labelxs);
36518 cls : 'roo-radio-set',
36522 cls : 'roo-radio-set-input',
36525 value : this.value ? this.value : ''
36532 if(this.weight.length){
36533 cfg.cls += ' roo-radio-' + this.weight;
36537 cfg.cls += ' roo-radio-set-inline';
36541 ['xs','sm','md','lg'].map(function(size){
36542 if (settings[size]) {
36543 cfg.cls += ' col-' + size + '-' + settings[size];
36551 initEvents : function()
36553 this.labelEl = this.el.select('.roo-radio-set-label', true).first();
36554 this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
36556 if(!this.fieldLabel.length){
36557 this.labelEl.hide();
36560 this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
36561 this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
36563 this.indicator = this.indicatorEl();
36565 if(this.indicator){
36566 this.indicator.addClass('invisible');
36569 this.originalValue = this.getValue();
36573 inputEl: function ()
36575 return this.el.select('.roo-radio-set-input', true).first();
36578 getChildContainer : function()
36580 return this.itemsEl;
36583 register : function(item)
36585 this.radioes.push(item);
36589 validate : function()
36591 if(this.getVisibilityEl().hasClass('hidden')){
36597 Roo.each(this.radioes, function(i){
36606 if(this.allowBlank) {
36610 if(this.disabled || valid){
36615 this.markInvalid();
36620 markValid : function()
36622 if(this.labelEl.isVisible(true) && this.indicatorEl()){
36623 this.indicatorEl().removeClass('visible');
36624 this.indicatorEl().addClass('invisible');
36628 if (Roo.bootstrap.version == 3) {
36629 this.el.removeClass([this.invalidClass, this.validClass]);
36630 this.el.addClass(this.validClass);
36632 this.el.removeClass(['is-invalid','is-valid']);
36633 this.el.addClass(['is-valid']);
36635 this.fireEvent('valid', this);
36638 markInvalid : function(msg)
36640 if(this.allowBlank || this.disabled){
36644 if(this.labelEl.isVisible(true) && this.indicatorEl()){
36645 this.indicatorEl().removeClass('invisible');
36646 this.indicatorEl().addClass('visible');
36648 if (Roo.bootstrap.version == 3) {
36649 this.el.removeClass([this.invalidClass, this.validClass]);
36650 this.el.addClass(this.invalidClass);
36652 this.el.removeClass(['is-invalid','is-valid']);
36653 this.el.addClass(['is-invalid']);
36656 this.fireEvent('invalid', this, msg);
36660 setValue : function(v, suppressEvent)
36662 if(this.value === v){
36669 this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
36672 Roo.each(this.radioes, function(i){
36674 i.el.removeClass('checked');
36677 Roo.each(this.radioes, function(i){
36679 if(i.value === v || i.value.toString() === v.toString()){
36681 i.el.addClass('checked');
36683 if(suppressEvent !== true){
36684 this.fireEvent('check', this, i);
36695 clearInvalid : function(){
36697 if(!this.el || this.preventMark){
36701 this.el.removeClass([this.invalidClass]);
36703 this.fireEvent('valid', this);
36708 Roo.apply(Roo.bootstrap.RadioSet, {
36712 register : function(set)
36714 this.groups[set.name] = set;
36717 get: function(name)
36719 if (typeof(this.groups[name]) == 'undefined') {
36723 return this.groups[name] ;
36729 * Ext JS Library 1.1.1
36730 * Copyright(c) 2006-2007, Ext JS, LLC.
36732 * Originally Released Under LGPL - original licence link has changed is not relivant.
36735 * <script type="text/javascript">
36740 * @class Roo.bootstrap.SplitBar
36741 * @extends Roo.util.Observable
36742 * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
36746 var split = new Roo.bootstrap.SplitBar("elementToDrag", "elementToSize",
36747 Roo.bootstrap.SplitBar.HORIZONTAL, Roo.bootstrap.SplitBar.LEFT);
36748 split.setAdapter(new Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter("container"));
36749 split.minSize = 100;
36750 split.maxSize = 600;
36751 split.animate = true;
36752 split.on('moved', splitterMoved);
36755 * Create a new SplitBar
36756 * @config {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar.
36757 * @config {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged
36758 * @config {Number} orientation (optional) Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
36759 * @config {Number} placement (optional) Either Roo.bootstrap.SplitBar.LEFT or Roo.bootstrap.SplitBar.RIGHT for horizontal or
36760 Roo.bootstrap.SplitBar.TOP or Roo.bootstrap.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
36761 position of the SplitBar).
36763 Roo.bootstrap.SplitBar = function(cfg){
36768 // dragElement : elm
36769 // resizingElement: el,
36771 // orientation : Either Roo.bootstrap.SplitBar.HORIZONTAL
36772 // placement : Roo.bootstrap.SplitBar.LEFT ,
36773 // existingProxy ???
36776 this.el = Roo.get(cfg.dragElement, true);
36777 this.el.dom.unselectable = "on";
36779 this.resizingEl = Roo.get(cfg.resizingElement, true);
36783 * The orientation of the split. Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
36784 * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
36787 this.orientation = cfg.orientation || Roo.bootstrap.SplitBar.HORIZONTAL;
36790 * The minimum size of the resizing element. (Defaults to 0)
36796 * The maximum size of the resizing element. (Defaults to 2000)
36799 this.maxSize = 2000;
36802 * Whether to animate the transition to the new size
36805 this.animate = false;
36808 * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
36811 this.useShim = false;
36816 if(!cfg.existingProxy){
36818 this.proxy = Roo.bootstrap.SplitBar.createProxy(this.orientation);
36820 this.proxy = Roo.get(cfg.existingProxy).dom;
36823 this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
36826 this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
36829 this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
36832 this.dragSpecs = {};
36835 * @private The adapter to use to positon and resize elements
36837 this.adapter = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
36838 this.adapter.init(this);
36840 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
36842 this.placement = cfg.placement || (this.el.getX() > this.resizingEl.getX() ? Roo.bootstrap.SplitBar.LEFT : Roo.bootstrap.SplitBar.RIGHT);
36843 this.el.addClass("roo-splitbar-h");
36846 this.placement = cfg.placement || (this.el.getY() > this.resizingEl.getY() ? Roo.bootstrap.SplitBar.TOP : Roo.bootstrap.SplitBar.BOTTOM);
36847 this.el.addClass("roo-splitbar-v");
36853 * Fires when the splitter is moved (alias for {@link #event-moved})
36854 * @param {Roo.bootstrap.SplitBar} this
36855 * @param {Number} newSize the new width or height
36860 * Fires when the splitter is moved
36861 * @param {Roo.bootstrap.SplitBar} this
36862 * @param {Number} newSize the new width or height
36866 * @event beforeresize
36867 * Fires before the splitter is dragged
36868 * @param {Roo.bootstrap.SplitBar} this
36870 "beforeresize" : true,
36872 "beforeapply" : true
36875 Roo.util.Observable.call(this);
36878 Roo.extend(Roo.bootstrap.SplitBar, Roo.util.Observable, {
36879 onStartProxyDrag : function(x, y){
36880 this.fireEvent("beforeresize", this);
36882 var o = Roo.DomHelper.insertFirst(document.body, {cls: "roo-drag-overlay", html: " "}, true);
36884 o.enableDisplayMode("block");
36885 // all splitbars share the same overlay
36886 Roo.bootstrap.SplitBar.prototype.overlay = o;
36888 this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
36889 this.overlay.show();
36890 Roo.get(this.proxy).setDisplayed("block");
36891 var size = this.adapter.getElementSize(this);
36892 this.activeMinSize = this.getMinimumSize();;
36893 this.activeMaxSize = this.getMaximumSize();;
36894 var c1 = size - this.activeMinSize;
36895 var c2 = Math.max(this.activeMaxSize - size, 0);
36896 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
36897 this.dd.resetConstraints();
36898 this.dd.setXConstraint(
36899 this.placement == Roo.bootstrap.SplitBar.LEFT ? c1 : c2,
36900 this.placement == Roo.bootstrap.SplitBar.LEFT ? c2 : c1
36902 this.dd.setYConstraint(0, 0);
36904 this.dd.resetConstraints();
36905 this.dd.setXConstraint(0, 0);
36906 this.dd.setYConstraint(
36907 this.placement == Roo.bootstrap.SplitBar.TOP ? c1 : c2,
36908 this.placement == Roo.bootstrap.SplitBar.TOP ? c2 : c1
36911 this.dragSpecs.startSize = size;
36912 this.dragSpecs.startPoint = [x, y];
36913 Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
36917 * @private Called after the drag operation by the DDProxy
36919 onEndProxyDrag : function(e){
36920 Roo.get(this.proxy).setDisplayed(false);
36921 var endPoint = Roo.lib.Event.getXY(e);
36923 this.overlay.hide();
36926 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
36927 newSize = this.dragSpecs.startSize +
36928 (this.placement == Roo.bootstrap.SplitBar.LEFT ?
36929 endPoint[0] - this.dragSpecs.startPoint[0] :
36930 this.dragSpecs.startPoint[0] - endPoint[0]
36933 newSize = this.dragSpecs.startSize +
36934 (this.placement == Roo.bootstrap.SplitBar.TOP ?
36935 endPoint[1] - this.dragSpecs.startPoint[1] :
36936 this.dragSpecs.startPoint[1] - endPoint[1]
36939 newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
36940 if(newSize != this.dragSpecs.startSize){
36941 if(this.fireEvent('beforeapply', this, newSize) !== false){
36942 this.adapter.setElementSize(this, newSize);
36943 this.fireEvent("moved", this, newSize);
36944 this.fireEvent("resize", this, newSize);
36950 * Get the adapter this SplitBar uses
36951 * @return The adapter object
36953 getAdapter : function(){
36954 return this.adapter;
36958 * Set the adapter this SplitBar uses
36959 * @param {Object} adapter A SplitBar adapter object
36961 setAdapter : function(adapter){
36962 this.adapter = adapter;
36963 this.adapter.init(this);
36967 * Gets the minimum size for the resizing element
36968 * @return {Number} The minimum size
36970 getMinimumSize : function(){
36971 return this.minSize;
36975 * Sets the minimum size for the resizing element
36976 * @param {Number} minSize The minimum size
36978 setMinimumSize : function(minSize){
36979 this.minSize = minSize;
36983 * Gets the maximum size for the resizing element
36984 * @return {Number} The maximum size
36986 getMaximumSize : function(){
36987 return this.maxSize;
36991 * Sets the maximum size for the resizing element
36992 * @param {Number} maxSize The maximum size
36994 setMaximumSize : function(maxSize){
36995 this.maxSize = maxSize;
36999 * Sets the initialize size for the resizing element
37000 * @param {Number} size The initial size
37002 setCurrentSize : function(size){
37003 var oldAnimate = this.animate;
37004 this.animate = false;
37005 this.adapter.setElementSize(this, size);
37006 this.animate = oldAnimate;
37010 * Destroy this splitbar.
37011 * @param {Boolean} removeEl True to remove the element
37013 destroy : function(removeEl){
37015 this.shim.remove();
37018 this.proxy.parentNode.removeChild(this.proxy);
37026 * @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.
37028 Roo.bootstrap.SplitBar.createProxy = function(dir){
37029 var proxy = new Roo.Element(document.createElement("div"));
37030 proxy.unselectable();
37031 var cls = 'roo-splitbar-proxy';
37032 proxy.addClass(cls + ' ' + (dir == Roo.bootstrap.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
37033 document.body.appendChild(proxy.dom);
37038 * @class Roo.bootstrap.SplitBar.BasicLayoutAdapter
37039 * Default Adapter. It assumes the splitter and resizing element are not positioned
37040 * elements and only gets/sets the width of the element. Generally used for table based layouts.
37042 Roo.bootstrap.SplitBar.BasicLayoutAdapter = function(){
37045 Roo.bootstrap.SplitBar.BasicLayoutAdapter.prototype = {
37046 // do nothing for now
37047 init : function(s){
37051 * Called before drag operations to get the current size of the resizing element.
37052 * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
37054 getElementSize : function(s){
37055 if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
37056 return s.resizingEl.getWidth();
37058 return s.resizingEl.getHeight();
37063 * Called after drag operations to set the size of the resizing element.
37064 * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
37065 * @param {Number} newSize The new size to set
37066 * @param {Function} onComplete A function to be invoked when resizing is complete
37068 setElementSize : function(s, newSize, onComplete){
37069 if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
37071 s.resizingEl.setWidth(newSize);
37073 onComplete(s, newSize);
37076 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
37081 s.resizingEl.setHeight(newSize);
37083 onComplete(s, newSize);
37086 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
37093 *@class Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter
37094 * @extends Roo.bootstrap.SplitBar.BasicLayoutAdapter
37095 * Adapter that moves the splitter element to align with the resized sizing element.
37096 * Used with an absolute positioned SplitBar.
37097 * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
37098 * document.body, make sure you assign an id to the body element.
37100 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter = function(container){
37101 this.basic = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
37102 this.container = Roo.get(container);
37105 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter.prototype = {
37106 init : function(s){
37107 this.basic.init(s);
37110 getElementSize : function(s){
37111 return this.basic.getElementSize(s);
37114 setElementSize : function(s, newSize, onComplete){
37115 this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
37118 moveSplitter : function(s){
37119 var yes = Roo.bootstrap.SplitBar;
37120 switch(s.placement){
37122 s.el.setX(s.resizingEl.getRight());
37125 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
37128 s.el.setY(s.resizingEl.getBottom());
37131 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
37138 * Orientation constant - Create a vertical SplitBar
37142 Roo.bootstrap.SplitBar.VERTICAL = 1;
37145 * Orientation constant - Create a horizontal SplitBar
37149 Roo.bootstrap.SplitBar.HORIZONTAL = 2;
37152 * Placement constant - The resizing element is to the left of the splitter element
37156 Roo.bootstrap.SplitBar.LEFT = 1;
37159 * Placement constant - The resizing element is to the right of the splitter element
37163 Roo.bootstrap.SplitBar.RIGHT = 2;
37166 * Placement constant - The resizing element is positioned above the splitter element
37170 Roo.bootstrap.SplitBar.TOP = 3;
37173 * Placement constant - The resizing element is positioned under splitter element
37177 Roo.bootstrap.SplitBar.BOTTOM = 4;
37178 Roo.namespace("Roo.bootstrap.layout");/*
37180 * Ext JS Library 1.1.1
37181 * Copyright(c) 2006-2007, Ext JS, LLC.
37183 * Originally Released Under LGPL - original licence link has changed is not relivant.
37186 * <script type="text/javascript">
37190 * @class Roo.bootstrap.layout.Manager
37191 * @extends Roo.bootstrap.Component
37192 * Base class for layout managers.
37194 Roo.bootstrap.layout.Manager = function(config)
37196 Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config);
37202 /** false to disable window resize monitoring @type Boolean */
37203 this.monitorWindowResize = true;
37208 * Fires when a layout is performed.
37209 * @param {Roo.LayoutManager} this
37213 * @event regionresized
37214 * Fires when the user resizes a region.
37215 * @param {Roo.LayoutRegion} region The resized region
37216 * @param {Number} newSize The new size (width for east/west, height for north/south)
37218 "regionresized" : true,
37220 * @event regioncollapsed
37221 * Fires when a region is collapsed.
37222 * @param {Roo.LayoutRegion} region The collapsed region
37224 "regioncollapsed" : true,
37226 * @event regionexpanded
37227 * Fires when a region is expanded.
37228 * @param {Roo.LayoutRegion} region The expanded region
37230 "regionexpanded" : true
37232 this.updating = false;
37235 this.el = Roo.get(config.el);
37241 Roo.extend(Roo.bootstrap.layout.Manager, Roo.bootstrap.Component, {
37246 monitorWindowResize : true,
37252 onRender : function(ct, position)
37255 this.el = Roo.get(ct);
37258 //this.fireEvent('render',this);
37262 initEvents: function()
37266 // ie scrollbar fix
37267 if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
37268 document.body.scroll = "no";
37269 }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
37270 this.el.position('relative');
37272 this.id = this.el.id;
37273 this.el.addClass("roo-layout-container");
37274 Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
37275 if(this.el.dom != document.body ) {
37276 this.el.on('resize', this.layout,this);
37277 this.el.on('show', this.layout,this);
37283 * Returns true if this layout is currently being updated
37284 * @return {Boolean}
37286 isUpdating : function(){
37287 return this.updating;
37291 * Suspend the LayoutManager from doing auto-layouts while
37292 * making multiple add or remove calls
37294 beginUpdate : function(){
37295 this.updating = true;
37299 * Restore auto-layouts and optionally disable the manager from performing a layout
37300 * @param {Boolean} noLayout true to disable a layout update
37302 endUpdate : function(noLayout){
37303 this.updating = false;
37309 layout: function(){
37313 onRegionResized : function(region, newSize){
37314 this.fireEvent("regionresized", region, newSize);
37318 onRegionCollapsed : function(region){
37319 this.fireEvent("regioncollapsed", region);
37322 onRegionExpanded : function(region){
37323 this.fireEvent("regionexpanded", region);
37327 * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
37328 * performs box-model adjustments.
37329 * @return {Object} The size as an object {width: (the width), height: (the height)}
37331 getViewSize : function()
37334 if(this.el.dom != document.body){
37335 size = this.el.getSize();
37337 size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
37339 size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
37340 size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
37345 * Returns the Element this layout is bound to.
37346 * @return {Roo.Element}
37348 getEl : function(){
37353 * Returns the specified region.
37354 * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
37355 * @return {Roo.LayoutRegion}
37357 getRegion : function(target){
37358 return this.regions[target.toLowerCase()];
37361 onWindowResize : function(){
37362 if(this.monitorWindowResize){
37369 * Ext JS Library 1.1.1
37370 * Copyright(c) 2006-2007, Ext JS, LLC.
37372 * Originally Released Under LGPL - original licence link has changed is not relivant.
37375 * <script type="text/javascript">
37378 * @class Roo.bootstrap.layout.Border
37379 * @extends Roo.bootstrap.layout.Manager
37380 * This class represents a common layout manager used in desktop applications. For screenshots and more details,
37381 * please see: examples/bootstrap/nested.html<br><br>
37383 <b>The container the layout is rendered into can be either the body element or any other element.
37384 If it is not the body element, the container needs to either be an absolute positioned element,
37385 or you will need to add "position:relative" to the css of the container. You will also need to specify
37386 the container size if it is not the body element.</b>
37389 * Create a new Border
37390 * @param {Object} config Configuration options
37392 Roo.bootstrap.layout.Border = function(config){
37393 config = config || {};
37394 Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
37398 Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
37399 if(config[region]){
37400 config[region].region = region;
37401 this.addRegion(config[region]);
37407 Roo.bootstrap.layout.Border.regions = ["center", "north","south","east","west"];
37409 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
37411 parent : false, // this might point to a 'nest' or a ???
37414 * Creates and adds a new region if it doesn't already exist.
37415 * @param {String} target The target region key (north, south, east, west or center).
37416 * @param {Object} config The regions config object
37417 * @return {BorderLayoutRegion} The new region
37419 addRegion : function(config)
37421 if(!this.regions[config.region]){
37422 var r = this.factory(config);
37423 this.bindRegion(r);
37425 return this.regions[config.region];
37429 bindRegion : function(r){
37430 this.regions[r.config.region] = r;
37432 r.on("visibilitychange", this.layout, this);
37433 r.on("paneladded", this.layout, this);
37434 r.on("panelremoved", this.layout, this);
37435 r.on("invalidated", this.layout, this);
37436 r.on("resized", this.onRegionResized, this);
37437 r.on("collapsed", this.onRegionCollapsed, this);
37438 r.on("expanded", this.onRegionExpanded, this);
37442 * Performs a layout update.
37444 layout : function()
37446 if(this.updating) {
37450 // render all the rebions if they have not been done alreayd?
37451 Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
37452 if(this.regions[region] && !this.regions[region].bodyEl){
37453 this.regions[region].onRender(this.el)
37457 var size = this.getViewSize();
37458 var w = size.width;
37459 var h = size.height;
37464 //var x = 0, y = 0;
37466 var rs = this.regions;
37467 var north = rs["north"];
37468 var south = rs["south"];
37469 var west = rs["west"];
37470 var east = rs["east"];
37471 var center = rs["center"];
37472 //if(this.hideOnLayout){ // not supported anymore
37473 //c.el.setStyle("display", "none");
37475 if(north && north.isVisible()){
37476 var b = north.getBox();
37477 var m = north.getMargins();
37478 b.width = w - (m.left+m.right);
37481 centerY = b.height + b.y + m.bottom;
37482 centerH -= centerY;
37483 north.updateBox(this.safeBox(b));
37485 if(south && south.isVisible()){
37486 var b = south.getBox();
37487 var m = south.getMargins();
37488 b.width = w - (m.left+m.right);
37490 var totalHeight = (b.height + m.top + m.bottom);
37491 b.y = h - totalHeight + m.top;
37492 centerH -= totalHeight;
37493 south.updateBox(this.safeBox(b));
37495 if(west && west.isVisible()){
37496 var b = west.getBox();
37497 var m = west.getMargins();
37498 b.height = centerH - (m.top+m.bottom);
37500 b.y = centerY + m.top;
37501 var totalWidth = (b.width + m.left + m.right);
37502 centerX += totalWidth;
37503 centerW -= totalWidth;
37504 west.updateBox(this.safeBox(b));
37506 if(east && east.isVisible()){
37507 var b = east.getBox();
37508 var m = east.getMargins();
37509 b.height = centerH - (m.top+m.bottom);
37510 var totalWidth = (b.width + m.left + m.right);
37511 b.x = w - totalWidth + m.left;
37512 b.y = centerY + m.top;
37513 centerW -= totalWidth;
37514 east.updateBox(this.safeBox(b));
37517 var m = center.getMargins();
37519 x: centerX + m.left,
37520 y: centerY + m.top,
37521 width: centerW - (m.left+m.right),
37522 height: centerH - (m.top+m.bottom)
37524 //if(this.hideOnLayout){
37525 //center.el.setStyle("display", "block");
37527 center.updateBox(this.safeBox(centerBox));
37530 this.fireEvent("layout", this);
37534 safeBox : function(box){
37535 box.width = Math.max(0, box.width);
37536 box.height = Math.max(0, box.height);
37541 * Adds a ContentPanel (or subclass) to this layout.
37542 * @param {String} target The target region key (north, south, east, west or center).
37543 * @param {Roo.ContentPanel} panel The panel to add
37544 * @return {Roo.ContentPanel} The added panel
37546 add : function(target, panel){
37548 target = target.toLowerCase();
37549 return this.regions[target].add(panel);
37553 * Remove a ContentPanel (or subclass) to this layout.
37554 * @param {String} target The target region key (north, south, east, west or center).
37555 * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
37556 * @return {Roo.ContentPanel} The removed panel
37558 remove : function(target, panel){
37559 target = target.toLowerCase();
37560 return this.regions[target].remove(panel);
37564 * Searches all regions for a panel with the specified id
37565 * @param {String} panelId
37566 * @return {Roo.ContentPanel} The panel or null if it wasn't found
37568 findPanel : function(panelId){
37569 var rs = this.regions;
37570 for(var target in rs){
37571 if(typeof rs[target] != "function"){
37572 var p = rs[target].getPanel(panelId);
37582 * Searches all regions for a panel with the specified id and activates (shows) it.
37583 * @param {String/ContentPanel} panelId The panels id or the panel itself
37584 * @return {Roo.ContentPanel} The shown panel or null
37586 showPanel : function(panelId) {
37587 var rs = this.regions;
37588 for(var target in rs){
37589 var r = rs[target];
37590 if(typeof r != "function"){
37591 if(r.hasPanel(panelId)){
37592 return r.showPanel(panelId);
37600 * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
37601 * @param {Roo.state.Provider} provider (optional) An alternate state provider
37604 restoreState : function(provider){
37606 provider = Roo.state.Manager;
37608 var sm = new Roo.LayoutStateManager();
37609 sm.init(this, provider);
37615 * Adds a xtype elements to the layout.
37619 xtype : 'ContentPanel',
37626 xtype : 'NestedLayoutPanel',
37632 items : [ ... list of content panels or nested layout panels.. ]
37636 * @param {Object} cfg Xtype definition of item to add.
37638 addxtype : function(cfg)
37640 // basically accepts a pannel...
37641 // can accept a layout region..!?!?
37642 //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
37645 // theory? children can only be panels??
37647 //if (!cfg.xtype.match(/Panel$/)) {
37652 if (typeof(cfg.region) == 'undefined') {
37653 Roo.log("Failed to add Panel, region was not set");
37657 var region = cfg.region;
37663 xitems = cfg.items;
37668 if ( region == 'center') {
37669 Roo.log("Center: " + cfg.title);
37675 case 'Content': // ContentPanel (el, cfg)
37676 case 'Scroll': // ContentPanel (el, cfg)
37678 cfg.autoCreate = cfg.autoCreate || true;
37679 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
37681 // var el = this.el.createChild();
37682 // ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
37685 this.add(region, ret);
37689 case 'TreePanel': // our new panel!
37690 cfg.el = this.el.createChild();
37691 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
37692 this.add(region, ret);
37697 // create a new Layout (which is a Border Layout...
37699 var clayout = cfg.layout;
37700 clayout.el = this.el.createChild();
37701 clayout.items = clayout.items || [];
37705 // replace this exitems with the clayout ones..
37706 xitems = clayout.items;
37708 // force background off if it's in center...
37709 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
37710 cfg.background = false;
37712 cfg.layout = new Roo.bootstrap.layout.Border(clayout);
37715 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
37716 //console.log('adding nested layout panel ' + cfg.toSource());
37717 this.add(region, ret);
37718 nb = {}; /// find first...
37723 // needs grid and region
37725 //var el = this.getRegion(region).el.createChild();
37727 *var el = this.el.createChild();
37728 // create the grid first...
37729 cfg.grid.container = el;
37730 cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
37733 if (region == 'center' && this.active ) {
37734 cfg.background = false;
37737 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
37739 this.add(region, ret);
37741 if (cfg.background) {
37742 // render grid on panel activation (if panel background)
37743 ret.on('activate', function(gp) {
37744 if (!gp.grid.rendered) {
37745 // gp.grid.render(el);
37749 // cfg.grid.render(el);
37755 case 'Border': // it can get called on it'self... - might need to check if this is fixed?
37756 // it was the old xcomponent building that caused this before.
37757 // espeically if border is the top element in the tree.
37767 if (typeof(Roo[cfg.xtype]) != 'undefined') {
37769 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
37770 this.add(region, ret);
37774 throw "Can not add '" + cfg.xtype + "' to Border";
37780 this.beginUpdate();
37784 Roo.each(xitems, function(i) {
37785 region = nb && i.region ? i.region : false;
37787 var add = ret.addxtype(i);
37790 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
37791 if (!i.background) {
37792 abn[region] = nb[region] ;
37799 // make the last non-background panel active..
37800 //if (nb) { Roo.log(abn); }
37803 for(var r in abn) {
37804 region = this.getRegion(r);
37806 // tried using nb[r], but it does not work..
37808 region.showPanel(abn[r]);
37819 factory : function(cfg)
37822 var validRegions = Roo.bootstrap.layout.Border.regions;
37824 var target = cfg.region;
37827 var r = Roo.bootstrap.layout;
37831 return new r.North(cfg);
37833 return new r.South(cfg);
37835 return new r.East(cfg);
37837 return new r.West(cfg);
37839 return new r.Center(cfg);
37841 throw 'Layout region "'+target+'" not supported.';
37848 * Ext JS Library 1.1.1
37849 * Copyright(c) 2006-2007, Ext JS, LLC.
37851 * Originally Released Under LGPL - original licence link has changed is not relivant.
37854 * <script type="text/javascript">
37858 * @class Roo.bootstrap.layout.Basic
37859 * @extends Roo.util.Observable
37860 * This class represents a lightweight region in a layout manager. This region does not move dom nodes
37861 * and does not have a titlebar, tabs or any other features. All it does is size and position
37862 * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
37863 * @cfg {Roo.bootstrap.layout.Manager} mgr The manager
37864 * @cfg {string} region the region that it inhabits..
37865 * @cfg {bool} skipConfig skip config?
37869 Roo.bootstrap.layout.Basic = function(config){
37871 this.mgr = config.mgr;
37873 this.position = config.region;
37875 var skipConfig = config.skipConfig;
37879 * @scope Roo.BasicLayoutRegion
37883 * @event beforeremove
37884 * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
37885 * @param {Roo.LayoutRegion} this
37886 * @param {Roo.ContentPanel} panel The panel
37887 * @param {Object} e The cancel event object
37889 "beforeremove" : true,
37891 * @event invalidated
37892 * Fires when the layout for this region is changed.
37893 * @param {Roo.LayoutRegion} this
37895 "invalidated" : true,
37897 * @event visibilitychange
37898 * Fires when this region is shown or hidden
37899 * @param {Roo.LayoutRegion} this
37900 * @param {Boolean} visibility true or false
37902 "visibilitychange" : true,
37904 * @event paneladded
37905 * Fires when a panel is added.
37906 * @param {Roo.LayoutRegion} this
37907 * @param {Roo.ContentPanel} panel The panel
37909 "paneladded" : true,
37911 * @event panelremoved
37912 * Fires when a panel is removed.
37913 * @param {Roo.LayoutRegion} this
37914 * @param {Roo.ContentPanel} panel The panel
37916 "panelremoved" : true,
37918 * @event beforecollapse
37919 * Fires when this region before collapse.
37920 * @param {Roo.LayoutRegion} this
37922 "beforecollapse" : true,
37925 * Fires when this region is collapsed.
37926 * @param {Roo.LayoutRegion} this
37928 "collapsed" : true,
37931 * Fires when this region is expanded.
37932 * @param {Roo.LayoutRegion} this
37937 * Fires when this region is slid into view.
37938 * @param {Roo.LayoutRegion} this
37940 "slideshow" : true,
37943 * Fires when this region slides out of view.
37944 * @param {Roo.LayoutRegion} this
37946 "slidehide" : true,
37948 * @event panelactivated
37949 * Fires when a panel is activated.
37950 * @param {Roo.LayoutRegion} this
37951 * @param {Roo.ContentPanel} panel The activated panel
37953 "panelactivated" : true,
37956 * Fires when the user resizes this region.
37957 * @param {Roo.LayoutRegion} this
37958 * @param {Number} newSize The new size (width for east/west, height for north/south)
37962 /** A collection of panels in this region. @type Roo.util.MixedCollection */
37963 this.panels = new Roo.util.MixedCollection();
37964 this.panels.getKey = this.getPanelId.createDelegate(this);
37966 this.activePanel = null;
37967 // ensure listeners are added...
37969 if (config.listeners || config.events) {
37970 Roo.bootstrap.layout.Basic.superclass.constructor.call(this, {
37971 listeners : config.listeners || {},
37972 events : config.events || {}
37976 if(skipConfig !== true){
37977 this.applyConfig(config);
37981 Roo.extend(Roo.bootstrap.layout.Basic, Roo.util.Observable,
37983 getPanelId : function(p){
37987 applyConfig : function(config){
37988 this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
37989 this.config = config;
37994 * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
37995 * the width, for horizontal (north, south) the height.
37996 * @param {Number} newSize The new width or height
37998 resizeTo : function(newSize){
37999 var el = this.el ? this.el :
38000 (this.activePanel ? this.activePanel.getEl() : null);
38002 switch(this.position){
38005 el.setWidth(newSize);
38006 this.fireEvent("resized", this, newSize);
38010 el.setHeight(newSize);
38011 this.fireEvent("resized", this, newSize);
38017 getBox : function(){
38018 return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
38021 getMargins : function(){
38022 return this.margins;
38025 updateBox : function(box){
38027 var el = this.activePanel.getEl();
38028 el.dom.style.left = box.x + "px";
38029 el.dom.style.top = box.y + "px";
38030 this.activePanel.setSize(box.width, box.height);
38034 * Returns the container element for this region.
38035 * @return {Roo.Element}
38037 getEl : function(){
38038 return this.activePanel;
38042 * Returns true if this region is currently visible.
38043 * @return {Boolean}
38045 isVisible : function(){
38046 return this.activePanel ? true : false;
38049 setActivePanel : function(panel){
38050 panel = this.getPanel(panel);
38051 if(this.activePanel && this.activePanel != panel){
38052 this.activePanel.setActiveState(false);
38053 this.activePanel.getEl().setLeftTop(-10000,-10000);
38055 this.activePanel = panel;
38056 panel.setActiveState(true);
38058 panel.setSize(this.box.width, this.box.height);
38060 this.fireEvent("panelactivated", this, panel);
38061 this.fireEvent("invalidated");
38065 * Show the specified panel.
38066 * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
38067 * @return {Roo.ContentPanel} The shown panel or null
38069 showPanel : function(panel){
38070 panel = this.getPanel(panel);
38072 this.setActivePanel(panel);
38078 * Get the active panel for this region.
38079 * @return {Roo.ContentPanel} The active panel or null
38081 getActivePanel : function(){
38082 return this.activePanel;
38086 * Add the passed ContentPanel(s)
38087 * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
38088 * @return {Roo.ContentPanel} The panel added (if only one was added)
38090 add : function(panel){
38091 if(arguments.length > 1){
38092 for(var i = 0, len = arguments.length; i < len; i++) {
38093 this.add(arguments[i]);
38097 if(this.hasPanel(panel)){
38098 this.showPanel(panel);
38101 var el = panel.getEl();
38102 if(el.dom.parentNode != this.mgr.el.dom){
38103 this.mgr.el.dom.appendChild(el.dom);
38105 if(panel.setRegion){
38106 panel.setRegion(this);
38108 this.panels.add(panel);
38109 el.setStyle("position", "absolute");
38110 if(!panel.background){
38111 this.setActivePanel(panel);
38112 if(this.config.initialSize && this.panels.getCount()==1){
38113 this.resizeTo(this.config.initialSize);
38116 this.fireEvent("paneladded", this, panel);
38121 * Returns true if the panel is in this region.
38122 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
38123 * @return {Boolean}
38125 hasPanel : function(panel){
38126 if(typeof panel == "object"){ // must be panel obj
38127 panel = panel.getId();
38129 return this.getPanel(panel) ? true : false;
38133 * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
38134 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
38135 * @param {Boolean} preservePanel Overrides the config preservePanel option
38136 * @return {Roo.ContentPanel} The panel that was removed
38138 remove : function(panel, preservePanel){
38139 panel = this.getPanel(panel);
38144 this.fireEvent("beforeremove", this, panel, e);
38145 if(e.cancel === true){
38148 var panelId = panel.getId();
38149 this.panels.removeKey(panelId);
38154 * Returns the panel specified or null if it's not in this region.
38155 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
38156 * @return {Roo.ContentPanel}
38158 getPanel : function(id){
38159 if(typeof id == "object"){ // must be panel obj
38162 return this.panels.get(id);
38166 * Returns this regions position (north/south/east/west/center).
38169 getPosition: function(){
38170 return this.position;
38174 * Ext JS Library 1.1.1
38175 * Copyright(c) 2006-2007, Ext JS, LLC.
38177 * Originally Released Under LGPL - original licence link has changed is not relivant.
38180 * <script type="text/javascript">
38184 * @class Roo.bootstrap.layout.Region
38185 * @extends Roo.bootstrap.layout.Basic
38186 * This class represents a region in a layout manager.
38188 * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
38189 * @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})
38190 * @cfg {String} tabPosition (top|bottom) "top" or "bottom" (defaults to "bottom")
38191 * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
38192 * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
38193 * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
38194 * @cfg {String} title The title for the region (overrides panel titles)
38195 * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
38196 * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
38197 * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
38198 * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
38199 * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
38200 * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
38201 * the space available, similar to FireFox 1.5 tabs (defaults to false)
38202 * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
38203 * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
38204 * @cfg {String} overflow (hidden|visible) if you have menus in the region, then you need to set this to visible.
38206 * @cfg {Boolean} hidden True to start the region hidden (defaults to false)
38207 * @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
38208 * @cfg {Boolean} disableTabTips True to disable tab tooltips
38209 * @cfg {Number} width For East/West panels
38210 * @cfg {Number} height For North/South panels
38211 * @cfg {Boolean} split To show the splitter
38212 * @cfg {Boolean} toolbar xtype configuration for a toolbar - shows on right of tabbar
38214 * @cfg {string} cls Extra CSS classes to add to region
38216 * @cfg {Roo.bootstrap.layout.Manager} mgr The manager
38217 * @cfg {string} region the region that it inhabits..
38220 * @xxxcfg {Boolean} collapsible DISABLED False to disable collapsing (defaults to true)
38221 * @xxxcfg {Boolean} collapsed DISABLED True to set the initial display to collapsed (defaults to false)
38223 * @xxxcfg {String} collapsedTitle DISABLED Optional string message to display in the collapsed block of a north or south region
38224 * @xxxxcfg {Boolean} floatable DISABLED False to disable floating (defaults to true)
38225 * @xxxxcfg {Boolean} showPin True to show a pin button NOT SUPPORTED YET
38227 Roo.bootstrap.layout.Region = function(config)
38229 this.applyConfig(config);
38231 var mgr = config.mgr;
38232 var pos = config.region;
38233 config.skipConfig = true;
38234 Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
38237 this.onRender(mgr.el);
38240 this.visible = true;
38241 this.collapsed = false;
38242 this.unrendered_panels = [];
38245 Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
38247 position: '', // set by wrapper (eg. north/south etc..)
38248 unrendered_panels : null, // unrendered panels.
38250 tabPosition : false,
38252 mgr: false, // points to 'Border'
38255 createBody : function(){
38256 /** This region's body element
38257 * @type Roo.Element */
38258 this.bodyEl = this.el.createChild({
38260 cls: "roo-layout-panel-body tab-content" // bootstrap added...
38264 onRender: function(ctr, pos)
38266 var dh = Roo.DomHelper;
38267 /** This region's container element
38268 * @type Roo.Element */
38269 this.el = dh.append(ctr.dom, {
38271 cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
38273 /** This region's title element
38274 * @type Roo.Element */
38276 this.titleEl = dh.append(this.el.dom, {
38278 unselectable: "on",
38279 cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
38281 {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "},
38282 {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
38286 this.titleEl.enableDisplayMode();
38287 /** This region's title text element
38288 * @type HTMLElement */
38289 this.titleTextEl = this.titleEl.dom.firstChild;
38290 this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
38292 this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
38293 this.closeBtn.enableDisplayMode();
38294 this.closeBtn.on("click", this.closeClicked, this);
38295 this.closeBtn.hide();
38297 this.createBody(this.config);
38298 if(this.config.hideWhenEmpty){
38300 this.on("paneladded", this.validateVisibility, this);
38301 this.on("panelremoved", this.validateVisibility, this);
38303 if(this.autoScroll){
38304 this.bodyEl.setStyle("overflow", "auto");
38306 this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
38308 //if(c.titlebar !== false){
38309 if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
38310 this.titleEl.hide();
38312 this.titleEl.show();
38313 if(this.config.title){
38314 this.titleTextEl.innerHTML = this.config.title;
38318 if(this.config.collapsed){
38319 this.collapse(true);
38321 if(this.config.hidden){
38325 if (this.unrendered_panels && this.unrendered_panels.length) {
38326 for (var i =0;i< this.unrendered_panels.length; i++) {
38327 this.add(this.unrendered_panels[i]);
38329 this.unrendered_panels = null;
38335 applyConfig : function(c)
38338 *if(c.collapsible && this.position != "center" && !this.collapsedEl){
38339 var dh = Roo.DomHelper;
38340 if(c.titlebar !== false){
38341 this.collapseBtn = this.createTool(this.tools.dom, "roo-layout-collapse-"+this.position);
38342 this.collapseBtn.on("click", this.collapse, this);
38343 this.collapseBtn.enableDisplayMode();
38345 if(c.showPin === true || this.showPin){
38346 this.stickBtn = this.createTool(this.tools.dom, "roo-layout-stick");
38347 this.stickBtn.enableDisplayMode();
38348 this.stickBtn.on("click", this.expand, this);
38349 this.stickBtn.hide();
38354 /** This region's collapsed element
38355 * @type Roo.Element */
38358 this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
38359 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
38362 if(c.floatable !== false){
38363 this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
38364 this.collapsedEl.on("click", this.collapseClick, this);
38367 if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
38368 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
38369 id: "message", unselectable: "on", style:{"float":"left"}});
38370 this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
38372 this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
38373 this.expandBtn.on("click", this.expand, this);
38377 if(this.collapseBtn){
38378 this.collapseBtn.setVisible(c.collapsible == true);
38381 this.cmargins = c.cmargins || this.cmargins ||
38382 (this.position == "west" || this.position == "east" ?
38383 {top: 0, left: 2, right:2, bottom: 0} :
38384 {top: 2, left: 0, right:0, bottom: 2});
38386 this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
38389 this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
38391 this.autoScroll = c.autoScroll || false;
38396 this.duration = c.duration || .30;
38397 this.slideDuration = c.slideDuration || .45;
38402 * Returns true if this region is currently visible.
38403 * @return {Boolean}
38405 isVisible : function(){
38406 return this.visible;
38410 * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
38411 * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")
38413 //setCollapsedTitle : function(title){
38414 // title = title || " ";
38415 // if(this.collapsedTitleTextEl){
38416 // this.collapsedTitleTextEl.innerHTML = title;
38420 getBox : function(){
38422 // if(!this.collapsed){
38423 b = this.el.getBox(false, true);
38425 // b = this.collapsedEl.getBox(false, true);
38430 getMargins : function(){
38431 return this.margins;
38432 //return this.collapsed ? this.cmargins : this.margins;
38435 highlight : function(){
38436 this.el.addClass("x-layout-panel-dragover");
38439 unhighlight : function(){
38440 this.el.removeClass("x-layout-panel-dragover");
38443 updateBox : function(box)
38445 if (!this.bodyEl) {
38446 return; // not rendered yet..
38450 if(!this.collapsed){
38451 this.el.dom.style.left = box.x + "px";
38452 this.el.dom.style.top = box.y + "px";
38453 this.updateBody(box.width, box.height);
38455 this.collapsedEl.dom.style.left = box.x + "px";
38456 this.collapsedEl.dom.style.top = box.y + "px";
38457 this.collapsedEl.setSize(box.width, box.height);
38460 this.tabs.autoSizeTabs();
38464 updateBody : function(w, h)
38467 this.el.setWidth(w);
38468 w -= this.el.getBorderWidth("rl");
38469 if(this.config.adjustments){
38470 w += this.config.adjustments[0];
38473 if(h !== null && h > 0){
38474 this.el.setHeight(h);
38475 h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
38476 h -= this.el.getBorderWidth("tb");
38477 if(this.config.adjustments){
38478 h += this.config.adjustments[1];
38480 this.bodyEl.setHeight(h);
38482 h = this.tabs.syncHeight(h);
38485 if(this.panelSize){
38486 w = w !== null ? w : this.panelSize.width;
38487 h = h !== null ? h : this.panelSize.height;
38489 if(this.activePanel){
38490 var el = this.activePanel.getEl();
38491 w = w !== null ? w : el.getWidth();
38492 h = h !== null ? h : el.getHeight();
38493 this.panelSize = {width: w, height: h};
38494 this.activePanel.setSize(w, h);
38496 if(Roo.isIE && this.tabs){
38497 this.tabs.el.repaint();
38502 * Returns the container element for this region.
38503 * @return {Roo.Element}
38505 getEl : function(){
38510 * Hides this region.
38513 //if(!this.collapsed){
38514 this.el.dom.style.left = "-2000px";
38517 // this.collapsedEl.dom.style.left = "-2000px";
38518 // this.collapsedEl.hide();
38520 this.visible = false;
38521 this.fireEvent("visibilitychange", this, false);
38525 * Shows this region if it was previously hidden.
38528 //if(!this.collapsed){
38531 // this.collapsedEl.show();
38533 this.visible = true;
38534 this.fireEvent("visibilitychange", this, true);
38537 closeClicked : function(){
38538 if(this.activePanel){
38539 this.remove(this.activePanel);
38543 collapseClick : function(e){
38545 e.stopPropagation();
38548 e.stopPropagation();
38554 * Collapses this region.
38555 * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
38558 collapse : function(skipAnim, skipCheck = false){
38559 if(this.collapsed) {
38563 if(skipCheck || this.fireEvent("beforecollapse", this) != false){
38565 this.collapsed = true;
38567 this.split.el.hide();
38569 if(this.config.animate && skipAnim !== true){
38570 this.fireEvent("invalidated", this);
38571 this.animateCollapse();
38573 this.el.setLocation(-20000,-20000);
38575 this.collapsedEl.show();
38576 this.fireEvent("collapsed", this);
38577 this.fireEvent("invalidated", this);
38583 animateCollapse : function(){
38588 * Expands this region if it was previously collapsed.
38589 * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
38590 * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
38593 expand : function(e, skipAnim){
38595 e.stopPropagation();
38597 if(!this.collapsed || this.el.hasActiveFx()) {
38601 this.afterSlideIn();
38604 this.collapsed = false;
38605 if(this.config.animate && skipAnim !== true){
38606 this.animateExpand();
38610 this.split.el.show();
38612 this.collapsedEl.setLocation(-2000,-2000);
38613 this.collapsedEl.hide();
38614 this.fireEvent("invalidated", this);
38615 this.fireEvent("expanded", this);
38619 animateExpand : function(){
38623 initTabs : function()
38625 //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
38627 var ts = new Roo.bootstrap.panel.Tabs({
38628 el: this.bodyEl.dom,
38630 tabPosition: this.tabPosition ? this.tabPosition : 'top',
38631 disableTooltips: this.config.disableTabTips,
38632 toolbar : this.config.toolbar
38635 if(this.config.hideTabs){
38636 ts.stripWrap.setDisplayed(false);
38639 ts.resizeTabs = this.config.resizeTabs === true;
38640 ts.minTabWidth = this.config.minTabWidth || 40;
38641 ts.maxTabWidth = this.config.maxTabWidth || 250;
38642 ts.preferredTabWidth = this.config.preferredTabWidth || 150;
38643 ts.monitorResize = false;
38644 //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
38645 ts.bodyEl.addClass('roo-layout-tabs-body');
38646 this.panels.each(this.initPanelAsTab, this);
38649 initPanelAsTab : function(panel){
38650 var ti = this.tabs.addTab(
38654 this.config.closeOnTab && panel.isClosable(),
38657 if(panel.tabTip !== undefined){
38658 ti.setTooltip(panel.tabTip);
38660 ti.on("activate", function(){
38661 this.setActivePanel(panel);
38664 if(this.config.closeOnTab){
38665 ti.on("beforeclose", function(t, e){
38667 this.remove(panel);
38671 panel.tabItem = ti;
38676 updatePanelTitle : function(panel, title)
38678 if(this.activePanel == panel){
38679 this.updateTitle(title);
38682 var ti = this.tabs.getTab(panel.getEl().id);
38684 if(panel.tabTip !== undefined){
38685 ti.setTooltip(panel.tabTip);
38690 updateTitle : function(title){
38691 if(this.titleTextEl && !this.config.title){
38692 this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : " ");
38696 setActivePanel : function(panel)
38698 panel = this.getPanel(panel);
38699 if(this.activePanel && this.activePanel != panel){
38700 if(this.activePanel.setActiveState(false) === false){
38704 this.activePanel = panel;
38705 panel.setActiveState(true);
38706 if(this.panelSize){
38707 panel.setSize(this.panelSize.width, this.panelSize.height);
38710 this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
38712 this.updateTitle(panel.getTitle());
38714 this.fireEvent("invalidated", this);
38716 this.fireEvent("panelactivated", this, panel);
38720 * Shows the specified panel.
38721 * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
38722 * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
38724 showPanel : function(panel)
38726 panel = this.getPanel(panel);
38729 var tab = this.tabs.getTab(panel.getEl().id);
38730 if(tab.isHidden()){
38731 this.tabs.unhideTab(tab.id);
38735 this.setActivePanel(panel);
38742 * Get the active panel for this region.
38743 * @return {Roo.ContentPanel} The active panel or null
38745 getActivePanel : function(){
38746 return this.activePanel;
38749 validateVisibility : function(){
38750 if(this.panels.getCount() < 1){
38751 this.updateTitle(" ");
38752 this.closeBtn.hide();
38755 if(!this.isVisible()){
38762 * Adds the passed ContentPanel(s) to this region.
38763 * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
38764 * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
38766 add : function(panel)
38768 if(arguments.length > 1){
38769 for(var i = 0, len = arguments.length; i < len; i++) {
38770 this.add(arguments[i]);
38775 // if we have not been rendered yet, then we can not really do much of this..
38776 if (!this.bodyEl) {
38777 this.unrendered_panels.push(panel);
38784 if(this.hasPanel(panel)){
38785 this.showPanel(panel);
38788 panel.setRegion(this);
38789 this.panels.add(panel);
38790 /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
38791 // sinle panel - no tab...?? would it not be better to render it with the tabs,
38792 // and hide them... ???
38793 this.bodyEl.dom.appendChild(panel.getEl().dom);
38794 if(panel.background !== true){
38795 this.setActivePanel(panel);
38797 this.fireEvent("paneladded", this, panel);
38804 this.initPanelAsTab(panel);
38808 if(panel.background !== true){
38809 this.tabs.activate(panel.getEl().id);
38811 this.fireEvent("paneladded", this, panel);
38816 * Hides the tab for the specified panel.
38817 * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
38819 hidePanel : function(panel){
38820 if(this.tabs && (panel = this.getPanel(panel))){
38821 this.tabs.hideTab(panel.getEl().id);
38826 * Unhides the tab for a previously hidden panel.
38827 * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
38829 unhidePanel : function(panel){
38830 if(this.tabs && (panel = this.getPanel(panel))){
38831 this.tabs.unhideTab(panel.getEl().id);
38835 clearPanels : function(){
38836 while(this.panels.getCount() > 0){
38837 this.remove(this.panels.first());
38842 * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
38843 * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
38844 * @param {Boolean} preservePanel Overrides the config preservePanel option
38845 * @return {Roo.ContentPanel} The panel that was removed
38847 remove : function(panel, preservePanel)
38849 panel = this.getPanel(panel);
38854 this.fireEvent("beforeremove", this, panel, e);
38855 if(e.cancel === true){
38858 preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
38859 var panelId = panel.getId();
38860 this.panels.removeKey(panelId);
38862 document.body.appendChild(panel.getEl().dom);
38865 this.tabs.removeTab(panel.getEl().id);
38866 }else if (!preservePanel){
38867 this.bodyEl.dom.removeChild(panel.getEl().dom);
38869 if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
38870 var p = this.panels.first();
38871 var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
38872 tempEl.appendChild(p.getEl().dom);
38873 this.bodyEl.update("");
38874 this.bodyEl.dom.appendChild(p.getEl().dom);
38876 this.updateTitle(p.getTitle());
38878 this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
38879 this.setActivePanel(p);
38881 panel.setRegion(null);
38882 if(this.activePanel == panel){
38883 this.activePanel = null;
38885 if(this.config.autoDestroy !== false && preservePanel !== true){
38886 try{panel.destroy();}catch(e){}
38888 this.fireEvent("panelremoved", this, panel);
38893 * Returns the TabPanel component used by this region
38894 * @return {Roo.TabPanel}
38896 getTabs : function(){
38900 createTool : function(parentEl, className){
38901 var btn = Roo.DomHelper.append(parentEl, {
38903 cls: "x-layout-tools-button",
38906 cls: "roo-layout-tools-button-inner " + className,
38910 btn.addClassOnOver("roo-layout-tools-button-over");
38915 * Ext JS Library 1.1.1
38916 * Copyright(c) 2006-2007, Ext JS, LLC.
38918 * Originally Released Under LGPL - original licence link has changed is not relivant.
38921 * <script type="text/javascript">
38927 * @class Roo.SplitLayoutRegion
38928 * @extends Roo.LayoutRegion
38929 * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
38931 Roo.bootstrap.layout.Split = function(config){
38932 this.cursor = config.cursor;
38933 Roo.bootstrap.layout.Split.superclass.constructor.call(this, config);
38936 Roo.extend(Roo.bootstrap.layout.Split, Roo.bootstrap.layout.Region,
38938 splitTip : "Drag to resize.",
38939 collapsibleSplitTip : "Drag to resize. Double click to hide.",
38940 useSplitTips : false,
38942 applyConfig : function(config){
38943 Roo.bootstrap.layout.Split.superclass.applyConfig.call(this, config);
38946 onRender : function(ctr,pos) {
38948 Roo.bootstrap.layout.Split.superclass.onRender.call(this, ctr,pos);
38949 if(!this.config.split){
38954 var splitEl = Roo.DomHelper.append(ctr.dom, {
38956 id: this.el.id + "-split",
38957 cls: "roo-layout-split roo-layout-split-"+this.position,
38960 /** The SplitBar for this region
38961 * @type Roo.SplitBar */
38962 // does not exist yet...
38963 Roo.log([this.position, this.orientation]);
38965 this.split = new Roo.bootstrap.SplitBar({
38966 dragElement : splitEl,
38967 resizingElement: this.el,
38968 orientation : this.orientation
38971 this.split.on("moved", this.onSplitMove, this);
38972 this.split.useShim = this.config.useShim === true;
38973 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
38974 if(this.useSplitTips){
38975 this.split.el.dom.title = this.config.collapsible ? this.collapsibleSplitTip : this.splitTip;
38977 //if(config.collapsible){
38978 // this.split.el.on("dblclick", this.collapse, this);
38981 if(typeof this.config.minSize != "undefined"){
38982 this.split.minSize = this.config.minSize;
38984 if(typeof this.config.maxSize != "undefined"){
38985 this.split.maxSize = this.config.maxSize;
38987 if(this.config.hideWhenEmpty || this.config.hidden || this.config.collapsed){
38988 this.hideSplitter();
38993 getHMaxSize : function(){
38994 var cmax = this.config.maxSize || 10000;
38995 var center = this.mgr.getRegion("center");
38996 return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
38999 getVMaxSize : function(){
39000 var cmax = this.config.maxSize || 10000;
39001 var center = this.mgr.getRegion("center");
39002 return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
39005 onSplitMove : function(split, newSize){
39006 this.fireEvent("resized", this, newSize);
39010 * Returns the {@link Roo.SplitBar} for this region.
39011 * @return {Roo.SplitBar}
39013 getSplitBar : function(){
39018 this.hideSplitter();
39019 Roo.bootstrap.layout.Split.superclass.hide.call(this);
39022 hideSplitter : function(){
39024 this.split.el.setLocation(-2000,-2000);
39025 this.split.el.hide();
39031 this.split.el.show();
39033 Roo.bootstrap.layout.Split.superclass.show.call(this);
39036 beforeSlide: function(){
39037 if(Roo.isGecko){// firefox overflow auto bug workaround
39038 this.bodyEl.clip();
39040 this.tabs.bodyEl.clip();
39042 if(this.activePanel){
39043 this.activePanel.getEl().clip();
39045 if(this.activePanel.beforeSlide){
39046 this.activePanel.beforeSlide();
39052 afterSlide : function(){
39053 if(Roo.isGecko){// firefox overflow auto bug workaround
39054 this.bodyEl.unclip();
39056 this.tabs.bodyEl.unclip();
39058 if(this.activePanel){
39059 this.activePanel.getEl().unclip();
39060 if(this.activePanel.afterSlide){
39061 this.activePanel.afterSlide();
39067 initAutoHide : function(){
39068 if(this.autoHide !== false){
39069 if(!this.autoHideHd){
39070 var st = new Roo.util.DelayedTask(this.slideIn, this);
39071 this.autoHideHd = {
39072 "mouseout": function(e){
39073 if(!e.within(this.el, true)){
39077 "mouseover" : function(e){
39083 this.el.on(this.autoHideHd);
39087 clearAutoHide : function(){
39088 if(this.autoHide !== false){
39089 this.el.un("mouseout", this.autoHideHd.mouseout);
39090 this.el.un("mouseover", this.autoHideHd.mouseover);
39094 clearMonitor : function(){
39095 Roo.get(document).un("click", this.slideInIf, this);
39098 // these names are backwards but not changed for compat
39099 slideOut : function(){
39100 if(this.isSlid || this.el.hasActiveFx()){
39103 this.isSlid = true;
39104 if(this.collapseBtn){
39105 this.collapseBtn.hide();
39107 this.closeBtnState = this.closeBtn.getStyle('display');
39108 this.closeBtn.hide();
39110 this.stickBtn.show();
39113 this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
39114 this.beforeSlide();
39115 this.el.setStyle("z-index", 10001);
39116 this.el.slideIn(this.getSlideAnchor(), {
39117 callback: function(){
39119 this.initAutoHide();
39120 Roo.get(document).on("click", this.slideInIf, this);
39121 this.fireEvent("slideshow", this);
39128 afterSlideIn : function(){
39129 this.clearAutoHide();
39130 this.isSlid = false;
39131 this.clearMonitor();
39132 this.el.setStyle("z-index", "");
39133 if(this.collapseBtn){
39134 this.collapseBtn.show();
39136 this.closeBtn.setStyle('display', this.closeBtnState);
39138 this.stickBtn.hide();
39140 this.fireEvent("slidehide", this);
39143 slideIn : function(cb){
39144 if(!this.isSlid || this.el.hasActiveFx()){
39148 this.isSlid = false;
39149 this.beforeSlide();
39150 this.el.slideOut(this.getSlideAnchor(), {
39151 callback: function(){
39152 this.el.setLeftTop(-10000, -10000);
39154 this.afterSlideIn();
39162 slideInIf : function(e){
39163 if(!e.within(this.el)){
39168 animateCollapse : function(){
39169 this.beforeSlide();
39170 this.el.setStyle("z-index", 20000);
39171 var anchor = this.getSlideAnchor();
39172 this.el.slideOut(anchor, {
39173 callback : function(){
39174 this.el.setStyle("z-index", "");
39175 this.collapsedEl.slideIn(anchor, {duration:.3});
39177 this.el.setLocation(-10000,-10000);
39179 this.fireEvent("collapsed", this);
39186 animateExpand : function(){
39187 this.beforeSlide();
39188 this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
39189 this.el.setStyle("z-index", 20000);
39190 this.collapsedEl.hide({
39193 this.el.slideIn(this.getSlideAnchor(), {
39194 callback : function(){
39195 this.el.setStyle("z-index", "");
39198 this.split.el.show();
39200 this.fireEvent("invalidated", this);
39201 this.fireEvent("expanded", this);
39229 getAnchor : function(){
39230 return this.anchors[this.position];
39233 getCollapseAnchor : function(){
39234 return this.canchors[this.position];
39237 getSlideAnchor : function(){
39238 return this.sanchors[this.position];
39241 getAlignAdj : function(){
39242 var cm = this.cmargins;
39243 switch(this.position){
39259 getExpandAdj : function(){
39260 var c = this.collapsedEl, cm = this.cmargins;
39261 switch(this.position){
39263 return [-(cm.right+c.getWidth()+cm.left), 0];
39266 return [cm.right+c.getWidth()+cm.left, 0];
39269 return [0, -(cm.top+cm.bottom+c.getHeight())];
39272 return [0, cm.top+cm.bottom+c.getHeight()];
39278 * Ext JS Library 1.1.1
39279 * Copyright(c) 2006-2007, Ext JS, LLC.
39281 * Originally Released Under LGPL - original licence link has changed is not relivant.
39284 * <script type="text/javascript">
39287 * These classes are private internal classes
39289 Roo.bootstrap.layout.Center = function(config){
39290 config.region = "center";
39291 Roo.bootstrap.layout.Region.call(this, config);
39292 this.visible = true;
39293 this.minWidth = config.minWidth || 20;
39294 this.minHeight = config.minHeight || 20;
39297 Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
39299 // center panel can't be hidden
39303 // center panel can't be hidden
39306 getMinWidth: function(){
39307 return this.minWidth;
39310 getMinHeight: function(){
39311 return this.minHeight;
39325 Roo.bootstrap.layout.North = function(config)
39327 config.region = 'north';
39328 config.cursor = 'n-resize';
39330 Roo.bootstrap.layout.Split.call(this, config);
39334 this.split.placement = Roo.bootstrap.SplitBar.TOP;
39335 this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
39336 this.split.el.addClass("roo-layout-split-v");
39338 //var size = config.initialSize || config.height;
39339 //if(this.el && typeof size != "undefined"){
39340 // this.el.setHeight(size);
39343 Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split,
39345 orientation: Roo.bootstrap.SplitBar.VERTICAL,
39348 onRender : function(ctr, pos)
39350 Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
39351 var size = this.config.initialSize || this.config.height;
39352 if(this.el && typeof size != "undefined"){
39353 this.el.setHeight(size);
39358 getBox : function(){
39359 if(this.collapsed){
39360 return this.collapsedEl.getBox();
39362 var box = this.el.getBox();
39364 box.height += this.split.el.getHeight();
39369 updateBox : function(box){
39370 if(this.split && !this.collapsed){
39371 box.height -= this.split.el.getHeight();
39372 this.split.el.setLeft(box.x);
39373 this.split.el.setTop(box.y+box.height);
39374 this.split.el.setWidth(box.width);
39376 if(this.collapsed){
39377 this.updateBody(box.width, null);
39379 Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
39387 Roo.bootstrap.layout.South = function(config){
39388 config.region = 'south';
39389 config.cursor = 's-resize';
39390 Roo.bootstrap.layout.Split.call(this, config);
39392 this.split.placement = Roo.bootstrap.SplitBar.BOTTOM;
39393 this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL;
39394 this.split.el.addClass("roo-layout-split-v");
39399 Roo.extend(Roo.bootstrap.layout.South, Roo.bootstrap.layout.Split, {
39400 orientation: Roo.bootstrap.SplitBar.VERTICAL,
39402 onRender : function(ctr, pos)
39404 Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
39405 var size = this.config.initialSize || this.config.height;
39406 if(this.el && typeof size != "undefined"){
39407 this.el.setHeight(size);
39412 getBox : function(){
39413 if(this.collapsed){
39414 return this.collapsedEl.getBox();
39416 var box = this.el.getBox();
39418 var sh = this.split.el.getHeight();
39425 updateBox : function(box){
39426 if(this.split && !this.collapsed){
39427 var sh = this.split.el.getHeight();
39430 this.split.el.setLeft(box.x);
39431 this.split.el.setTop(box.y-sh);
39432 this.split.el.setWidth(box.width);
39434 if(this.collapsed){
39435 this.updateBody(box.width, null);
39437 Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
39441 Roo.bootstrap.layout.East = function(config){
39442 config.region = "east";
39443 config.cursor = "e-resize";
39444 Roo.bootstrap.layout.Split.call(this, config);
39446 this.split.placement = Roo.bootstrap.SplitBar.RIGHT;
39447 this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
39448 this.split.el.addClass("roo-layout-split-h");
39452 Roo.extend(Roo.bootstrap.layout.East, Roo.bootstrap.layout.Split, {
39453 orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
39455 onRender : function(ctr, pos)
39457 Roo.bootstrap.layout.Split.prototype.onRender.call(this, ctr, pos);
39458 var size = this.config.initialSize || this.config.width;
39459 if(this.el && typeof size != "undefined"){
39460 this.el.setWidth(size);
39465 getBox : function(){
39466 if(this.collapsed){
39467 return this.collapsedEl.getBox();
39469 var box = this.el.getBox();
39471 var sw = this.split.el.getWidth();
39478 updateBox : function(box){
39479 if(this.split && !this.collapsed){
39480 var sw = this.split.el.getWidth();
39482 this.split.el.setLeft(box.x);
39483 this.split.el.setTop(box.y);
39484 this.split.el.setHeight(box.height);
39487 if(this.collapsed){
39488 this.updateBody(null, box.height);
39490 Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
39494 Roo.bootstrap.layout.West = function(config){
39495 config.region = "west";
39496 config.cursor = "w-resize";
39498 Roo.bootstrap.layout.Split.call(this, config);
39500 this.split.placement = Roo.bootstrap.SplitBar.LEFT;
39501 this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL;
39502 this.split.el.addClass("roo-layout-split-h");
39506 Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
39507 orientation: Roo.bootstrap.SplitBar.HORIZONTAL,
39509 onRender: function(ctr, pos)
39511 Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos);
39512 var size = this.config.initialSize || this.config.width;
39513 if(typeof size != "undefined"){
39514 this.el.setWidth(size);
39518 getBox : function(){
39519 if(this.collapsed){
39520 return this.collapsedEl.getBox();
39522 var box = this.el.getBox();
39523 if (box.width == 0) {
39524 box.width = this.config.width; // kludge?
39527 box.width += this.split.el.getWidth();
39532 updateBox : function(box){
39533 if(this.split && !this.collapsed){
39534 var sw = this.split.el.getWidth();
39536 this.split.el.setLeft(box.x+box.width);
39537 this.split.el.setTop(box.y);
39538 this.split.el.setHeight(box.height);
39540 if(this.collapsed){
39541 this.updateBody(null, box.height);
39543 Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
39545 });Roo.namespace("Roo.bootstrap.panel");/*
39547 * Ext JS Library 1.1.1
39548 * Copyright(c) 2006-2007, Ext JS, LLC.
39550 * Originally Released Under LGPL - original licence link has changed is not relivant.
39553 * <script type="text/javascript">
39556 * @class Roo.ContentPanel
39557 * @extends Roo.util.Observable
39558 * A basic ContentPanel element.
39559 * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
39560 * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
39561 * @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
39562 * @cfg {Boolean} closable True if the panel can be closed/removed
39563 * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
39564 * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
39565 * @cfg {Toolbar} toolbar A toolbar for this panel
39566 * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
39567 * @cfg {String} title The title for this panel
39568 * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
39569 * @cfg {String} url Calls {@link #setUrl} with this value
39570 * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
39571 * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
39572 * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
39573 * @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
39574 * @cfg {Boolean} iframe contents are an iframe - makes showing remote sources/CSS feasible..
39575 * @cfg {Boolean} badges render the badges
39576 * @cfg {String} cls extra classes to use
39577 * @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
39580 * Create a new ContentPanel.
39581 * @param {String/HTMLElement/Roo.Element} el The container element for this panel
39582 * @param {String/Object} config A string to set only the title or a config object
39583 * @param {String} content (optional) Set the HTML content for this panel
39584 * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
39586 Roo.bootstrap.panel.Content = function( config){
39588 this.tpl = config.tpl || false;
39590 var el = config.el;
39591 var content = config.content;
39593 if(config.autoCreate){ // xtype is available if this is called from factory
39596 this.el = Roo.get(el);
39597 if(!this.el && config && config.autoCreate){
39598 if(typeof config.autoCreate == "object"){
39599 if(!config.autoCreate.id){
39600 config.autoCreate.id = config.id||el;
39602 this.el = Roo.DomHelper.append(document.body,
39603 config.autoCreate, true);
39607 cls: (config.cls || '') +
39608 (config.background ? ' bg-' + config.background : '') +
39609 " roo-layout-inactive-content",
39612 if (config.iframe) {
39616 style : 'border: 0px',
39617 src : 'about:blank'
39623 elcfg.html = config.html;
39627 this.el = Roo.DomHelper.append(document.body, elcfg , true);
39628 if (config.iframe) {
39629 this.iframeEl = this.el.select('iframe',true).first();
39634 this.closable = false;
39635 this.loaded = false;
39636 this.active = false;
39639 if (config.toolbar && !config.toolbar.el && config.toolbar.xtype) {
39641 this.toolbar = new config.toolbar.xns[config.toolbar.xtype](config.toolbar);
39643 this.wrapEl = this.el; //this.el.wrap();
39645 if (config.toolbar.items) {
39646 ti = config.toolbar.items ;
39647 delete config.toolbar.items ;
39651 this.toolbar.render(this.wrapEl, 'before');
39652 for(var i =0;i < ti.length;i++) {
39653 // Roo.log(['add child', items[i]]);
39654 nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
39656 this.toolbar.items = nitems;
39657 this.toolbar.el.insertBefore(this.wrapEl.dom.firstChild);
39658 delete config.toolbar;
39662 // xtype created footer. - not sure if will work as we normally have to render first..
39663 if (this.footer && !this.footer.el && this.footer.xtype) {
39664 if (!this.wrapEl) {
39665 this.wrapEl = this.el.wrap();
39668 this.footer.container = this.wrapEl.createChild();
39670 this.footer = Roo.factory(this.footer, Roo);
39675 if(typeof config == "string"){
39676 this.title = config;
39678 Roo.apply(this, config);
39682 this.resizeEl = Roo.get(this.resizeEl, true);
39684 this.resizeEl = this.el;
39686 // handle view.xtype
39694 * Fires when this panel is activated.
39695 * @param {Roo.ContentPanel} this
39699 * @event deactivate
39700 * Fires when this panel is activated.
39701 * @param {Roo.ContentPanel} this
39703 "deactivate" : true,
39707 * Fires when this panel is resized if fitToFrame is true.
39708 * @param {Roo.ContentPanel} this
39709 * @param {Number} width The width after any component adjustments
39710 * @param {Number} height The height after any component adjustments
39716 * Fires when this tab is created
39717 * @param {Roo.ContentPanel} this
39728 if(this.autoScroll && !this.iframe){
39729 this.resizeEl.setStyle("overflow", "auto");
39731 // fix randome scrolling
39732 //this.el.on('scroll', function() {
39733 // Roo.log('fix random scolling');
39734 // this.scrollTo('top',0);
39737 content = content || this.content;
39739 this.setContent(content);
39741 if(config && config.url){
39742 this.setUrl(this.url, this.params, this.loadOnce);
39747 Roo.bootstrap.panel.Content.superclass.constructor.call(this);
39749 if (this.view && typeof(this.view.xtype) != 'undefined') {
39750 this.view.el = this.el.appendChild(document.createElement("div"));
39751 this.view = Roo.factory(this.view);
39752 this.view.render && this.view.render(false, '');
39756 this.fireEvent('render', this);
39759 Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
39769 setRegion : function(region){
39770 this.region = region;
39771 this.setActiveClass(region && !this.background);
39775 setActiveClass: function(state)
39778 this.el.replaceClass("roo-layout-inactive-content", "roo-layout-active-content");
39779 this.el.setStyle('position','relative');
39781 this.el.replaceClass("roo-layout-active-content", "roo-layout-inactive-content");
39782 this.el.setStyle('position', 'absolute');
39787 * Returns the toolbar for this Panel if one was configured.
39788 * @return {Roo.Toolbar}
39790 getToolbar : function(){
39791 return this.toolbar;
39794 setActiveState : function(active)
39796 this.active = active;
39797 this.setActiveClass(active);
39799 if(this.fireEvent("deactivate", this) === false){
39804 this.fireEvent("activate", this);
39808 * Updates this panel's element (not for iframe)
39809 * @param {String} content The new content
39810 * @param {Boolean} loadScripts (optional) true to look for and process scripts
39812 setContent : function(content, loadScripts){
39817 this.el.update(content, loadScripts);
39820 ignoreResize : function(w, h){
39821 if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
39824 this.lastSize = {width: w, height: h};
39829 * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
39830 * @return {Roo.UpdateManager} The UpdateManager
39832 getUpdateManager : function(){
39836 return this.el.getUpdateManager();
39839 * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
39840 * Does not work with IFRAME contents
39841 * @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:
39844 url: "your-url.php",
39845 params: {param1: "foo", param2: "bar"}, // or a URL encoded string
39846 callback: yourFunction,
39847 scope: yourObject, //(optional scope)
39850 text: "Loading...",
39856 * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
39857 * 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.
39858 * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
39859 * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
39860 * @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.
39861 * @return {Roo.ContentPanel} this
39869 var um = this.el.getUpdateManager();
39870 um.update.apply(um, arguments);
39876 * 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.
39877 * @param {String/Function} url The URL to load the content from or a function to call to get the URL
39878 * @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)
39879 * @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)
39880 * @return {Roo.UpdateManager|Boolean} The UpdateManager or false if IFRAME
39882 setUrl : function(url, params, loadOnce){
39884 this.iframeEl.dom.src = url;
39888 if(this.refreshDelegate){
39889 this.removeListener("activate", this.refreshDelegate);
39891 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
39892 this.on("activate", this.refreshDelegate);
39893 return this.el.getUpdateManager();
39896 _handleRefresh : function(url, params, loadOnce){
39897 if(!loadOnce || !this.loaded){
39898 var updater = this.el.getUpdateManager();
39899 updater.update(url, params, this._setLoaded.createDelegate(this));
39903 _setLoaded : function(){
39904 this.loaded = true;
39908 * Returns this panel's id
39911 getId : function(){
39916 * Returns this panel's element - used by regiosn to add.
39917 * @return {Roo.Element}
39919 getEl : function(){
39920 return this.wrapEl || this.el;
39925 adjustForComponents : function(width, height)
39927 //Roo.log('adjustForComponents ');
39928 if(this.resizeEl != this.el){
39929 width -= this.el.getFrameWidth('lr');
39930 height -= this.el.getFrameWidth('tb');
39933 var te = this.toolbar.getEl();
39934 te.setWidth(width);
39935 height -= te.getHeight();
39938 var te = this.footer.getEl();
39939 te.setWidth(width);
39940 height -= te.getHeight();
39944 if(this.adjustments){
39945 width += this.adjustments[0];
39946 height += this.adjustments[1];
39948 return {"width": width, "height": height};
39951 setSize : function(width, height){
39952 if(this.fitToFrame && !this.ignoreResize(width, height)){
39953 if(this.fitContainer && this.resizeEl != this.el){
39954 this.el.setSize(width, height);
39956 var size = this.adjustForComponents(width, height);
39958 this.iframeEl.setSize(width,height);
39961 this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
39962 this.fireEvent('resize', this, size.width, size.height);
39969 * Returns this panel's title
39972 getTitle : function(){
39974 if (typeof(this.title) != 'object') {
39979 for (var k in this.title) {
39980 if (!this.title.hasOwnProperty(k)) {
39984 if (k.indexOf('-') >= 0) {
39985 var s = k.split('-');
39986 for (var i = 0; i<s.length; i++) {
39987 t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
39990 t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
39997 * Set this panel's title
39998 * @param {String} title
40000 setTitle : function(title){
40001 this.title = title;
40003 this.region.updatePanelTitle(this, title);
40008 * Returns true is this panel was configured to be closable
40009 * @return {Boolean}
40011 isClosable : function(){
40012 return this.closable;
40015 beforeSlide : function(){
40017 this.resizeEl.clip();
40020 afterSlide : function(){
40022 this.resizeEl.unclip();
40026 * Force a content refresh from the URL specified in the {@link #setUrl} method.
40027 * Will fail silently if the {@link #setUrl} method has not been called.
40028 * This does not activate the panel, just updates its content.
40030 refresh : function(){
40031 if(this.refreshDelegate){
40032 this.loaded = false;
40033 this.refreshDelegate();
40038 * Destroys this panel
40040 destroy : function(){
40041 this.el.removeAllListeners();
40042 var tempEl = document.createElement("span");
40043 tempEl.appendChild(this.el.dom);
40044 tempEl.innerHTML = "";
40050 * form - if the content panel contains a form - this is a reference to it.
40051 * @type {Roo.form.Form}
40055 * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
40056 * This contains a reference to it.
40062 * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
40072 * @param {Object} cfg Xtype definition of item to add.
40076 getChildContainer: function () {
40077 return this.getEl();
40082 var ret = new Roo.factory(cfg);
40087 if (cfg.xtype.match(/^Form$/)) {
40090 //if (this.footer) {
40091 // el = this.footer.container.insertSibling(false, 'before');
40093 el = this.el.createChild();
40096 this.form = new Roo.form.Form(cfg);
40099 if ( this.form.allItems.length) {
40100 this.form.render(el.dom);
40104 // should only have one of theses..
40105 if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
40106 // views.. should not be just added - used named prop 'view''
40108 cfg.el = this.el.appendChild(document.createElement("div"));
40111 var ret = new Roo.factory(cfg);
40113 ret.render && ret.render(false, ''); // render blank..
40123 * @class Roo.bootstrap.panel.Grid
40124 * @extends Roo.bootstrap.panel.Content
40126 * Create a new GridPanel.
40127 * @cfg {Roo.bootstrap.Table} grid The grid for this panel
40128 * @param {Object} config A the config object
40134 Roo.bootstrap.panel.Grid = function(config)
40138 this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
40139 {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
40141 config.el = this.wrapper;
40142 //this.el = this.wrapper;
40144 if (config.container) {
40145 // ctor'ed from a Border/panel.grid
40148 this.wrapper.setStyle("overflow", "hidden");
40149 this.wrapper.addClass('roo-grid-container');
40154 if(config.toolbar){
40155 var tool_el = this.wrapper.createChild();
40156 this.toolbar = Roo.factory(config.toolbar);
40158 if (config.toolbar.items) {
40159 ti = config.toolbar.items ;
40160 delete config.toolbar.items ;
40164 this.toolbar.render(tool_el);
40165 for(var i =0;i < ti.length;i++) {
40166 // Roo.log(['add child', items[i]]);
40167 nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
40169 this.toolbar.items = nitems;
40171 delete config.toolbar;
40174 Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
40175 config.grid.scrollBody = true;;
40176 config.grid.monitorWindowResize = false; // turn off autosizing
40177 config.grid.autoHeight = false;
40178 config.grid.autoWidth = false;
40180 this.grid = new config.grid.xns[config.grid.xtype](config.grid);
40182 if (config.background) {
40183 // render grid on panel activation (if panel background)
40184 this.on('activate', function(gp) {
40185 if (!gp.grid.rendered) {
40186 gp.grid.render(this.wrapper);
40187 gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
40192 this.grid.render(this.wrapper);
40193 this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
40196 //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
40197 // ??? needed ??? config.el = this.wrapper;
40202 // xtype created footer. - not sure if will work as we normally have to render first..
40203 if (this.footer && !this.footer.el && this.footer.xtype) {
40205 var ctr = this.grid.getView().getFooterPanel(true);
40206 this.footer.dataSource = this.grid.dataSource;
40207 this.footer = Roo.factory(this.footer, Roo);
40208 this.footer.render(ctr);
40218 Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, {
40219 getId : function(){
40220 return this.grid.id;
40224 * Returns the grid for this panel
40225 * @return {Roo.bootstrap.Table}
40227 getGrid : function(){
40231 setSize : function(width, height){
40232 if(!this.ignoreResize(width, height)){
40233 var grid = this.grid;
40234 var size = this.adjustForComponents(width, height);
40235 // tfoot is not a footer?
40238 var gridel = grid.getGridEl();
40239 gridel.setSize(size.width, size.height);
40241 var tbd = grid.getGridEl().select('tbody', true).first();
40242 var thd = grid.getGridEl().select('thead',true).first();
40243 var tbf= grid.getGridEl().select('tfoot', true).first();
40246 size.height -= tbf.getHeight();
40249 size.height -= thd.getHeight();
40252 tbd.setSize(size.width, size.height );
40253 // this is for the account management tab -seems to work there.
40254 var thd = grid.getGridEl().select('thead',true).first();
40256 // tbd.setSize(size.width, size.height - thd.getHeight());
40265 beforeSlide : function(){
40266 this.grid.getView().scroller.clip();
40269 afterSlide : function(){
40270 this.grid.getView().scroller.unclip();
40273 destroy : function(){
40274 this.grid.destroy();
40276 Roo.bootstrap.panel.Grid.superclass.destroy.call(this);
40281 * @class Roo.bootstrap.panel.Nest
40282 * @extends Roo.bootstrap.panel.Content
40284 * Create a new Panel, that can contain a layout.Border.
40287 * @param {Roo.BorderLayout} layout The layout for this panel
40288 * @param {String/Object} config A string to set only the title or a config object
40290 Roo.bootstrap.panel.Nest = function(config)
40292 // construct with only one argument..
40293 /* FIXME - implement nicer consturctors
40294 if (layout.layout) {
40296 layout = config.layout;
40297 delete config.layout;
40299 if (layout.xtype && !layout.getEl) {
40300 // then layout needs constructing..
40301 layout = Roo.factory(layout, Roo);
40305 config.el = config.layout.getEl();
40307 Roo.bootstrap.panel.Nest.superclass.constructor.call(this, config);
40309 config.layout.monitorWindowResize = false; // turn off autosizing
40310 this.layout = config.layout;
40311 this.layout.getEl().addClass("roo-layout-nested-layout");
40312 this.layout.parent = this;
40319 Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
40321 setSize : function(width, height){
40322 if(!this.ignoreResize(width, height)){
40323 var size = this.adjustForComponents(width, height);
40324 var el = this.layout.getEl();
40325 if (size.height < 1) {
40326 el.setWidth(size.width);
40328 el.setSize(size.width, size.height);
40330 var touch = el.dom.offsetWidth;
40331 this.layout.layout();
40332 // ie requires a double layout on the first pass
40333 if(Roo.isIE && !this.initialized){
40334 this.initialized = true;
40335 this.layout.layout();
40340 // activate all subpanels if not currently active..
40342 setActiveState : function(active){
40343 this.active = active;
40344 this.setActiveClass(active);
40347 this.fireEvent("deactivate", this);
40351 this.fireEvent("activate", this);
40352 // not sure if this should happen before or after..
40353 if (!this.layout) {
40354 return; // should not happen..
40357 for (var r in this.layout.regions) {
40358 reg = this.layout.getRegion(r);
40359 if (reg.getActivePanel()) {
40360 //reg.showPanel(reg.getActivePanel()); // force it to activate..
40361 reg.setActivePanel(reg.getActivePanel());
40364 if (!reg.panels.length) {
40367 reg.showPanel(reg.getPanel(0));
40376 * Returns the nested BorderLayout for this panel
40377 * @return {Roo.BorderLayout}
40379 getLayout : function(){
40380 return this.layout;
40384 * Adds a xtype elements to the layout of the nested panel
40388 xtype : 'ContentPanel',
40395 xtype : 'NestedLayoutPanel',
40401 items : [ ... list of content panels or nested layout panels.. ]
40405 * @param {Object} cfg Xtype definition of item to add.
40407 addxtype : function(cfg) {
40408 return this.layout.addxtype(cfg);
40413 * Ext JS Library 1.1.1
40414 * Copyright(c) 2006-2007, Ext JS, LLC.
40416 * Originally Released Under LGPL - original licence link has changed is not relivant.
40419 * <script type="text/javascript">
40422 * @class Roo.TabPanel
40423 * @extends Roo.util.Observable
40424 * A lightweight tab container.
40428 // basic tabs 1, built from existing content
40429 var tabs = new Roo.TabPanel("tabs1");
40430 tabs.addTab("script", "View Script");
40431 tabs.addTab("markup", "View Markup");
40432 tabs.activate("script");
40434 // more advanced tabs, built from javascript
40435 var jtabs = new Roo.TabPanel("jtabs");
40436 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
40438 // set up the UpdateManager
40439 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
40440 var updater = tab2.getUpdateManager();
40441 updater.setDefaultUrl("ajax1.htm");
40442 tab2.on('activate', updater.refresh, updater, true);
40444 // Use setUrl for Ajax loading
40445 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
40446 tab3.setUrl("ajax2.htm", null, true);
40449 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
40452 jtabs.activate("jtabs-1");
40455 * Create a new TabPanel.
40456 * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
40457 * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
40459 Roo.bootstrap.panel.Tabs = function(config){
40461 * The container element for this TabPanel.
40462 * @type Roo.Element
40464 this.el = Roo.get(config.el);
40467 if(typeof config == "boolean"){
40468 this.tabPosition = config ? "bottom" : "top";
40470 Roo.apply(this, config);
40474 if(this.tabPosition == "bottom"){
40475 // if tabs are at the bottom = create the body first.
40476 this.bodyEl = Roo.get(this.createBody(this.el.dom));
40477 this.el.addClass("roo-tabs-bottom");
40479 // next create the tabs holders
40481 if (this.tabPosition == "west"){
40483 var reg = this.region; // fake it..
40485 if (!reg.mgr.parent) {
40488 reg = reg.mgr.parent.region;
40490 Roo.log("got nest?");
40492 if (reg.mgr.getRegion('west')) {
40493 var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
40494 this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
40495 this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
40496 this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
40497 this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
40505 this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
40506 this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
40507 this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
40508 this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
40513 Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
40516 // finally - if tabs are at the top, then create the body last..
40517 if(this.tabPosition != "bottom"){
40518 /** The body element that contains {@link Roo.TabPanelItem} bodies. +
40519 * @type Roo.Element
40521 this.bodyEl = Roo.get(this.createBody(this.el.dom));
40522 this.el.addClass("roo-tabs-top");
40526 this.bodyEl.setStyle("position", "relative");
40528 this.active = null;
40529 this.activateDelegate = this.activate.createDelegate(this);
40534 * Fires when the active tab changes
40535 * @param {Roo.TabPanel} this
40536 * @param {Roo.TabPanelItem} activePanel The new active tab
40540 * @event beforetabchange
40541 * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
40542 * @param {Roo.TabPanel} this
40543 * @param {Object} e Set cancel to true on this object to cancel the tab change
40544 * @param {Roo.TabPanelItem} tab The tab being changed to
40546 "beforetabchange" : true
40549 Roo.EventManager.onWindowResize(this.onResize, this);
40550 this.cpad = this.el.getPadding("lr");
40551 this.hiddenCount = 0;
40554 // toolbar on the tabbar support...
40555 if (this.toolbar) {
40556 alert("no toolbar support yet");
40557 this.toolbar = false;
40559 var tcfg = this.toolbar;
40560 tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
40561 this.toolbar = new Roo.Toolbar(tcfg);
40562 if (Roo.isSafari) {
40563 var tbl = tcfg.container.child('table', true);
40564 tbl.setAttribute('width', '100%');
40572 Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
40575 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
40577 *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
40579 tabPosition : "top",
40581 *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
40583 currentTabWidth : 0,
40585 *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
40589 *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
40593 *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
40595 preferredTabWidth : 175,
40597 *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
40599 resizeTabs : false,
40601 *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
40603 monitorResize : true,
40605 *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
40607 toolbar : false, // set by caller..
40609 region : false, /// set by caller
40611 disableTooltips : true, // not used yet...
40614 * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
40615 * @param {String} id The id of the div to use <b>or create</b>
40616 * @param {String} text The text for the tab
40617 * @param {String} content (optional) Content to put in the TabPanelItem body
40618 * @param {Boolean} closable (optional) True to create a close icon on the tab
40619 * @return {Roo.TabPanelItem} The created TabPanelItem
40621 addTab : function(id, text, content, closable, tpl)
40623 var item = new Roo.bootstrap.panel.TabItem({
40627 closable : closable,
40630 this.addTabItem(item);
40632 item.setContent(content);
40638 * Returns the {@link Roo.TabPanelItem} with the specified id/index
40639 * @param {String/Number} id The id or index of the TabPanelItem to fetch.
40640 * @return {Roo.TabPanelItem}
40642 getTab : function(id){
40643 return this.items[id];
40647 * Hides the {@link Roo.TabPanelItem} with the specified id/index
40648 * @param {String/Number} id The id or index of the TabPanelItem to hide.
40650 hideTab : function(id){
40651 var t = this.items[id];
40654 this.hiddenCount++;
40655 this.autoSizeTabs();
40660 * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
40661 * @param {String/Number} id The id or index of the TabPanelItem to unhide.
40663 unhideTab : function(id){
40664 var t = this.items[id];
40666 t.setHidden(false);
40667 this.hiddenCount--;
40668 this.autoSizeTabs();
40673 * Adds an existing {@link Roo.TabPanelItem}.
40674 * @param {Roo.TabPanelItem} item The TabPanelItem to add
40676 addTabItem : function(item)
40678 this.items[item.id] = item;
40679 this.items.push(item);
40680 this.autoSizeTabs();
40681 // if(this.resizeTabs){
40682 // item.setWidth(this.currentTabWidth || this.preferredTabWidth);
40683 // this.autoSizeTabs();
40685 // item.autoSize();
40690 * Removes a {@link Roo.TabPanelItem}.
40691 * @param {String/Number} id The id or index of the TabPanelItem to remove.
40693 removeTab : function(id){
40694 var items = this.items;
40695 var tab = items[id];
40696 if(!tab) { return; }
40697 var index = items.indexOf(tab);
40698 if(this.active == tab && items.length > 1){
40699 var newTab = this.getNextAvailable(index);
40704 this.stripEl.dom.removeChild(tab.pnode.dom);
40705 if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
40706 this.bodyEl.dom.removeChild(tab.bodyEl.dom);
40708 items.splice(index, 1);
40709 delete this.items[tab.id];
40710 tab.fireEvent("close", tab);
40711 tab.purgeListeners();
40712 this.autoSizeTabs();
40715 getNextAvailable : function(start){
40716 var items = this.items;
40718 // look for a next tab that will slide over to
40719 // replace the one being removed
40720 while(index < items.length){
40721 var item = items[++index];
40722 if(item && !item.isHidden()){
40726 // if one isn't found select the previous tab (on the left)
40729 var item = items[--index];
40730 if(item && !item.isHidden()){
40738 * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
40739 * @param {String/Number} id The id or index of the TabPanelItem to disable.
40741 disableTab : function(id){
40742 var tab = this.items[id];
40743 if(tab && this.active != tab){
40749 * Enables a {@link Roo.TabPanelItem} that is disabled.
40750 * @param {String/Number} id The id or index of the TabPanelItem to enable.
40752 enableTab : function(id){
40753 var tab = this.items[id];
40758 * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
40759 * @param {String/Number} id The id or index of the TabPanelItem to activate.
40760 * @return {Roo.TabPanelItem} The TabPanelItem.
40762 activate : function(id)
40764 //Roo.log('activite:' + id);
40766 var tab = this.items[id];
40770 if(tab == this.active || tab.disabled){
40774 this.fireEvent("beforetabchange", this, e, tab);
40775 if(e.cancel !== true && !tab.disabled){
40777 this.active.hide();
40779 this.active = this.items[id];
40780 this.active.show();
40781 this.fireEvent("tabchange", this, this.active);
40787 * Gets the active {@link Roo.TabPanelItem}.
40788 * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
40790 getActiveTab : function(){
40791 return this.active;
40795 * Updates the tab body element to fit the height of the container element
40796 * for overflow scrolling
40797 * @param {Number} targetHeight (optional) Override the starting height from the elements height
40799 syncHeight : function(targetHeight){
40800 var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
40801 var bm = this.bodyEl.getMargins();
40802 var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
40803 this.bodyEl.setHeight(newHeight);
40807 onResize : function(){
40808 if(this.monitorResize){
40809 this.autoSizeTabs();
40814 * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
40816 beginUpdate : function(){
40817 this.updating = true;
40821 * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
40823 endUpdate : function(){
40824 this.updating = false;
40825 this.autoSizeTabs();
40829 * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
40831 autoSizeTabs : function()
40833 var count = this.items.length;
40834 var vcount = count - this.hiddenCount;
40837 this.stripEl.hide();
40839 this.stripEl.show();
40842 if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
40847 var w = Math.max(this.el.getWidth() - this.cpad, 10);
40848 var availWidth = Math.floor(w / vcount);
40849 var b = this.stripBody;
40850 if(b.getWidth() > w){
40851 var tabs = this.items;
40852 this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
40853 if(availWidth < this.minTabWidth){
40854 /*if(!this.sleft){ // incomplete scrolling code
40855 this.createScrollButtons();
40858 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
40861 if(this.currentTabWidth < this.preferredTabWidth){
40862 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
40868 * Returns the number of tabs in this TabPanel.
40871 getCount : function(){
40872 return this.items.length;
40876 * Resizes all the tabs to the passed width
40877 * @param {Number} The new width
40879 setTabWidth : function(width){
40880 this.currentTabWidth = width;
40881 for(var i = 0, len = this.items.length; i < len; i++) {
40882 if(!this.items[i].isHidden()) {
40883 this.items[i].setWidth(width);
40889 * Destroys this TabPanel
40890 * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
40892 destroy : function(removeEl){
40893 Roo.EventManager.removeResizeListener(this.onResize, this);
40894 for(var i = 0, len = this.items.length; i < len; i++){
40895 this.items[i].purgeListeners();
40897 if(removeEl === true){
40898 this.el.update("");
40903 createStrip : function(container)
40905 var strip = document.createElement("nav");
40906 strip.className = Roo.bootstrap.version == 4 ?
40907 "navbar-light bg-light" :
40908 "navbar navbar-default"; //"x-tabs-wrap";
40909 container.appendChild(strip);
40913 createStripList : function(strip)
40915 // div wrapper for retard IE
40916 // returns the "tr" element.
40917 strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
40918 //'<div class="x-tabs-strip-wrap">'+
40919 // '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
40920 // '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
40921 return strip.firstChild; //.firstChild.firstChild.firstChild;
40923 createBody : function(container)
40925 var body = document.createElement("div");
40926 Roo.id(body, "tab-body");
40927 //Roo.fly(body).addClass("x-tabs-body");
40928 Roo.fly(body).addClass("tab-content");
40929 container.appendChild(body);
40932 createItemBody :function(bodyEl, id){
40933 var body = Roo.getDom(id);
40935 body = document.createElement("div");
40938 //Roo.fly(body).addClass("x-tabs-item-body");
40939 Roo.fly(body).addClass("tab-pane");
40940 bodyEl.insertBefore(body, bodyEl.firstChild);
40944 createStripElements : function(stripEl, text, closable, tpl)
40946 var td = document.createElement("li"); // was td..
40947 td.className = 'nav-item';
40949 //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
40952 stripEl.appendChild(td);
40954 td.className = "x-tabs-closable";
40955 if(!this.closeTpl){
40956 this.closeTpl = new Roo.Template(
40957 '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
40958 '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
40959 '<div unselectable="on" class="close-icon"> </div></em></span></a>'
40962 var el = this.closeTpl.overwrite(td, {"text": text});
40963 var close = el.getElementsByTagName("div")[0];
40964 var inner = el.getElementsByTagName("em")[0];
40965 return {"el": el, "close": close, "inner": inner};
40968 // not sure what this is..
40969 // if(!this.tabTpl){
40970 //this.tabTpl = new Roo.Template(
40971 // '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
40972 // '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
40974 // this.tabTpl = new Roo.Template(
40975 // '<a href="#">' +
40976 // '<span unselectable="on"' +
40977 // (this.disableTooltips ? '' : ' title="{text}"') +
40978 // ' >{text}</span></a>'
40984 var template = tpl || this.tabTpl || false;
40987 template = new Roo.Template(
40988 Roo.bootstrap.version == 4 ?
40990 '<a class="nav-link" href="#" unselectable="on"' +
40991 (this.disableTooltips ? '' : ' title="{text}"') +
40994 '<a class="nav-link" href="#">' +
40995 '<span unselectable="on"' +
40996 (this.disableTooltips ? '' : ' title="{text}"') +
40997 ' >{text}</span></a>'
41002 switch (typeof(template)) {
41006 template = new Roo.Template(template);
41012 var el = template.overwrite(td, {"text": text});
41014 var inner = el.getElementsByTagName("span")[0];
41016 return {"el": el, "inner": inner};
41024 * @class Roo.TabPanelItem
41025 * @extends Roo.util.Observable
41026 * Represents an individual item (tab plus body) in a TabPanel.
41027 * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
41028 * @param {String} id The id of this TabPanelItem
41029 * @param {String} text The text for the tab of this TabPanelItem
41030 * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
41032 Roo.bootstrap.panel.TabItem = function(config){
41034 * The {@link Roo.TabPanel} this TabPanelItem belongs to
41035 * @type Roo.TabPanel
41037 this.tabPanel = config.panel;
41039 * The id for this TabPanelItem
41042 this.id = config.id;
41044 this.disabled = false;
41046 this.text = config.text;
41048 this.loaded = false;
41049 this.closable = config.closable;
41052 * The body element for this TabPanelItem.
41053 * @type Roo.Element
41055 this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
41056 this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
41057 this.bodyEl.setStyle("display", "block");
41058 this.bodyEl.setStyle("zoom", "1");
41059 //this.hideAction();
41061 var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
41063 this.el = Roo.get(els.el);
41064 this.inner = Roo.get(els.inner, true);
41065 this.textEl = Roo.bootstrap.version == 4 ?
41066 this.el : Roo.get(this.el.dom.firstChild, true);
41068 this.pnode = this.linode = Roo.get(els.el.parentNode, true);
41069 this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
41072 // this.el.on("mousedown", this.onTabMouseDown, this);
41073 this.el.on("click", this.onTabClick, this);
41075 if(config.closable){
41076 var c = Roo.get(els.close, true);
41077 c.dom.title = this.closeText;
41078 c.addClassOnOver("close-over");
41079 c.on("click", this.closeClick, this);
41085 * Fires when this tab becomes the active tab.
41086 * @param {Roo.TabPanel} tabPanel The parent TabPanel
41087 * @param {Roo.TabPanelItem} this
41091 * @event beforeclose
41092 * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
41093 * @param {Roo.TabPanelItem} this
41094 * @param {Object} e Set cancel to true on this object to cancel the close.
41096 "beforeclose": true,
41099 * Fires when this tab is closed.
41100 * @param {Roo.TabPanelItem} this
41104 * @event deactivate
41105 * Fires when this tab is no longer the active tab.
41106 * @param {Roo.TabPanel} tabPanel The parent TabPanel
41107 * @param {Roo.TabPanelItem} this
41109 "deactivate" : true
41111 this.hidden = false;
41113 Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
41116 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
41118 purgeListeners : function(){
41119 Roo.util.Observable.prototype.purgeListeners.call(this);
41120 this.el.removeAllListeners();
41123 * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
41126 this.status_node.addClass("active");
41129 this.tabPanel.stripWrap.repaint();
41131 this.fireEvent("activate", this.tabPanel, this);
41135 * Returns true if this tab is the active tab.
41136 * @return {Boolean}
41138 isActive : function(){
41139 return this.tabPanel.getActiveTab() == this;
41143 * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
41146 this.status_node.removeClass("active");
41148 this.fireEvent("deactivate", this.tabPanel, this);
41151 hideAction : function(){
41152 this.bodyEl.hide();
41153 this.bodyEl.setStyle("position", "absolute");
41154 this.bodyEl.setLeft("-20000px");
41155 this.bodyEl.setTop("-20000px");
41158 showAction : function(){
41159 this.bodyEl.setStyle("position", "relative");
41160 this.bodyEl.setTop("");
41161 this.bodyEl.setLeft("");
41162 this.bodyEl.show();
41166 * Set the tooltip for the tab.
41167 * @param {String} tooltip The tab's tooltip
41169 setTooltip : function(text){
41170 if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
41171 this.textEl.dom.qtip = text;
41172 this.textEl.dom.removeAttribute('title');
41174 this.textEl.dom.title = text;
41178 onTabClick : function(e){
41179 e.preventDefault();
41180 this.tabPanel.activate(this.id);
41183 onTabMouseDown : function(e){
41184 e.preventDefault();
41185 this.tabPanel.activate(this.id);
41188 getWidth : function(){
41189 return this.inner.getWidth();
41192 setWidth : function(width){
41193 var iwidth = width - this.linode.getPadding("lr");
41194 this.inner.setWidth(iwidth);
41195 this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
41196 this.linode.setWidth(width);
41200 * Show or hide the tab
41201 * @param {Boolean} hidden True to hide or false to show.
41203 setHidden : function(hidden){
41204 this.hidden = hidden;
41205 this.linode.setStyle("display", hidden ? "none" : "");
41209 * Returns true if this tab is "hidden"
41210 * @return {Boolean}
41212 isHidden : function(){
41213 return this.hidden;
41217 * Returns the text for this tab
41220 getText : function(){
41224 autoSize : function(){
41225 //this.el.beginMeasure();
41226 this.textEl.setWidth(1);
41228 * #2804 [new] Tabs in Roojs
41229 * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
41231 //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
41232 //this.el.endMeasure();
41236 * Sets the text for the tab (Note: this also sets the tooltip text)
41237 * @param {String} text The tab's text and tooltip
41239 setText : function(text){
41241 this.textEl.update(text);
41242 this.setTooltip(text);
41243 //if(!this.tabPanel.resizeTabs){
41244 // this.autoSize();
41248 * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
41250 activate : function(){
41251 this.tabPanel.activate(this.id);
41255 * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
41257 disable : function(){
41258 if(this.tabPanel.active != this){
41259 this.disabled = true;
41260 this.status_node.addClass("disabled");
41265 * Enables this TabPanelItem if it was previously disabled.
41267 enable : function(){
41268 this.disabled = false;
41269 this.status_node.removeClass("disabled");
41273 * Sets the content for this TabPanelItem.
41274 * @param {String} content The content
41275 * @param {Boolean} loadScripts true to look for and load scripts
41277 setContent : function(content, loadScripts){
41278 this.bodyEl.update(content, loadScripts);
41282 * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
41283 * @return {Roo.UpdateManager} The UpdateManager
41285 getUpdateManager : function(){
41286 return this.bodyEl.getUpdateManager();
41290 * Set a URL to be used to load the content for this TabPanelItem.
41291 * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
41292 * @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)
41293 * @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)
41294 * @return {Roo.UpdateManager} The UpdateManager
41296 setUrl : function(url, params, loadOnce){
41297 if(this.refreshDelegate){
41298 this.un('activate', this.refreshDelegate);
41300 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
41301 this.on("activate", this.refreshDelegate);
41302 return this.bodyEl.getUpdateManager();
41306 _handleRefresh : function(url, params, loadOnce){
41307 if(!loadOnce || !this.loaded){
41308 var updater = this.bodyEl.getUpdateManager();
41309 updater.update(url, params, this._setLoaded.createDelegate(this));
41314 * Forces a content refresh from the URL specified in the {@link #setUrl} method.
41315 * Will fail silently if the setUrl method has not been called.
41316 * This does not activate the panel, just updates its content.
41318 refresh : function(){
41319 if(this.refreshDelegate){
41320 this.loaded = false;
41321 this.refreshDelegate();
41326 _setLoaded : function(){
41327 this.loaded = true;
41331 closeClick : function(e){
41334 this.fireEvent("beforeclose", this, o);
41335 if(o.cancel !== true){
41336 this.tabPanel.removeTab(this.id);
41340 * The text displayed in the tooltip for the close icon.
41343 closeText : "Close this tab"
41346 * This script refer to:
41347 * Title: International Telephone Input
41348 * Author: Jack O'Connor
41349 * Code version: v12.1.12
41350 * Availability: https://github.com/jackocnr/intl-tel-input.git
41353 Roo.bootstrap.PhoneInputData = function() {
41356 "Afghanistan (افغانستان)",
41361 "Albania (Shqipëri)",
41366 "Algeria (الجزائر)",
41391 "Antigua and Barbuda",
41401 "Armenia (Հայաստան)",
41417 "Austria (Österreich)",
41422 "Azerbaijan (Azərbaycan)",
41432 "Bahrain (البحرين)",
41437 "Bangladesh (বাংলাদেশ)",
41447 "Belarus (Беларусь)",
41452 "Belgium (België)",
41482 "Bosnia and Herzegovina (Босна и Херцеговина)",
41497 "British Indian Ocean Territory",
41502 "British Virgin Islands",
41512 "Bulgaria (България)",
41522 "Burundi (Uburundi)",
41527 "Cambodia (កម្ពុជា)",
41532 "Cameroon (Cameroun)",
41541 ["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"]
41544 "Cape Verde (Kabu Verdi)",
41549 "Caribbean Netherlands",
41560 "Central African Republic (République centrafricaine)",
41580 "Christmas Island",
41586 "Cocos (Keeling) Islands",
41597 "Comoros (جزر القمر)",
41602 "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
41607 "Congo (Republic) (Congo-Brazzaville)",
41627 "Croatia (Hrvatska)",
41648 "Czech Republic (Česká republika)",
41653 "Denmark (Danmark)",
41668 "Dominican Republic (República Dominicana)",
41672 ["809", "829", "849"]
41690 "Equatorial Guinea (Guinea Ecuatorial)",
41710 "Falkland Islands (Islas Malvinas)",
41715 "Faroe Islands (Føroyar)",
41736 "French Guiana (Guyane française)",
41741 "French Polynesia (Polynésie française)",
41756 "Georgia (საქართველო)",
41761 "Germany (Deutschland)",
41781 "Greenland (Kalaallit Nunaat)",
41818 "Guinea-Bissau (Guiné Bissau)",
41843 "Hungary (Magyarország)",
41848 "Iceland (Ísland)",
41868 "Iraq (العراق)",
41884 "Israel (ישראל)",
41911 "Jordan (الأردن)",
41916 "Kazakhstan (Казахстан)",
41937 "Kuwait (الكويت)",
41942 "Kyrgyzstan (Кыргызстан)",
41952 "Latvia (Latvija)",
41957 "Lebanon (لبنان)",
41972 "Libya (ليبيا)",
41982 "Lithuania (Lietuva)",
41997 "Macedonia (FYROM) (Македонија)",
42002 "Madagascar (Madagasikara)",
42032 "Marshall Islands",
42042 "Mauritania (موريتانيا)",
42047 "Mauritius (Moris)",
42068 "Moldova (Republica Moldova)",
42078 "Mongolia (Монгол)",
42083 "Montenegro (Crna Gora)",
42093 "Morocco (المغرب)",
42099 "Mozambique (Moçambique)",
42104 "Myanmar (Burma) (မြန်မာ)",
42109 "Namibia (Namibië)",
42124 "Netherlands (Nederland)",
42129 "New Caledonia (Nouvelle-Calédonie)",
42164 "North Korea (조선 민주주의 인민 공화국)",
42169 "Northern Mariana Islands",
42185 "Pakistan (پاکستان)",
42195 "Palestine (فلسطين)",
42205 "Papua New Guinea",
42247 "Réunion (La Réunion)",
42253 "Romania (România)",
42269 "Saint Barthélemy",
42280 "Saint Kitts and Nevis",
42290 "Saint Martin (Saint-Martin (partie française))",
42296 "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
42301 "Saint Vincent and the Grenadines",
42316 "São Tomé and Príncipe (São Tomé e Príncipe)",
42321 "Saudi Arabia (المملكة العربية السعودية)",
42326 "Senegal (Sénégal)",
42356 "Slovakia (Slovensko)",
42361 "Slovenia (Slovenija)",
42371 "Somalia (Soomaaliya)",
42381 "South Korea (대한민국)",
42386 "South Sudan (جنوب السودان)",
42396 "Sri Lanka (ශ්රී ලංකාව)",
42401 "Sudan (السودان)",
42411 "Svalbard and Jan Mayen",
42422 "Sweden (Sverige)",
42427 "Switzerland (Schweiz)",
42432 "Syria (سوريا)",
42477 "Trinidad and Tobago",
42482 "Tunisia (تونس)",
42487 "Turkey (Türkiye)",
42497 "Turks and Caicos Islands",
42507 "U.S. Virgin Islands",
42517 "Ukraine (Україна)",
42522 "United Arab Emirates (الإمارات العربية المتحدة)",
42544 "Uzbekistan (Oʻzbekiston)",
42554 "Vatican City (Città del Vaticano)",
42565 "Vietnam (Việt Nam)",
42570 "Wallis and Futuna (Wallis-et-Futuna)",
42575 "Western Sahara (الصحراء الغربية)",
42581 "Yemen (اليمن)",
42605 * This script refer to:
42606 * Title: International Telephone Input
42607 * Author: Jack O'Connor
42608 * Code version: v12.1.12
42609 * Availability: https://github.com/jackocnr/intl-tel-input.git
42613 * @class Roo.bootstrap.PhoneInput
42614 * @extends Roo.bootstrap.TriggerField
42615 * An input with International dial-code selection
42617 * @cfg {String} defaultDialCode default '+852'
42618 * @cfg {Array} preferedCountries default []
42621 * Create a new PhoneInput.
42622 * @param {Object} config Configuration options
42625 Roo.bootstrap.PhoneInput = function(config) {
42626 Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
42629 Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
42631 listWidth: undefined,
42633 selectedClass: 'active',
42635 invalidClass : "has-warning",
42637 validClass: 'has-success',
42639 allowed: '0123456789',
42644 * @cfg {String} defaultDialCode The default dial code when initializing the input
42646 defaultDialCode: '+852',
42649 * @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
42651 preferedCountries: false,
42653 getAutoCreate : function()
42655 var data = Roo.bootstrap.PhoneInputData();
42656 var align = this.labelAlign || this.parentLabelAlign();
42659 this.allCountries = [];
42660 this.dialCodeMapping = [];
42662 for (var i = 0; i < data.length; i++) {
42664 this.allCountries[i] = {
42668 priority: c[3] || 0,
42669 areaCodes: c[4] || null
42671 this.dialCodeMapping[c[2]] = {
42674 priority: c[3] || 0,
42675 areaCodes: c[4] || null
42687 // type: 'number', -- do not use number - we get the flaky up/down arrows.
42688 maxlength: this.max_length,
42689 cls : 'form-control tel-input',
42690 autocomplete: 'new-password'
42693 var hiddenInput = {
42696 cls: 'hidden-tel-input'
42700 hiddenInput.name = this.name;
42703 if (this.disabled) {
42704 input.disabled = true;
42707 var flag_container = {
42724 cls: this.hasFeedback ? 'has-feedback' : '',
42730 cls: 'dial-code-holder',
42737 cls: 'roo-select2-container input-group',
42744 if (this.fieldLabel.length) {
42747 tooltip: 'This field is required'
42753 cls: 'control-label',
42759 html: this.fieldLabel
42762 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
42768 if(this.indicatorpos == 'right') {
42769 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
42776 if(align == 'left') {
42784 if(this.labelWidth > 12){
42785 label.style = "width: " + this.labelWidth + 'px';
42787 if(this.labelWidth < 13 && this.labelmd == 0){
42788 this.labelmd = this.labelWidth;
42790 if(this.labellg > 0){
42791 label.cls += ' col-lg-' + this.labellg;
42792 input.cls += ' col-lg-' + (12 - this.labellg);
42794 if(this.labelmd > 0){
42795 label.cls += ' col-md-' + this.labelmd;
42796 container.cls += ' col-md-' + (12 - this.labelmd);
42798 if(this.labelsm > 0){
42799 label.cls += ' col-sm-' + this.labelsm;
42800 container.cls += ' col-sm-' + (12 - this.labelsm);
42802 if(this.labelxs > 0){
42803 label.cls += ' col-xs-' + this.labelxs;
42804 container.cls += ' col-xs-' + (12 - this.labelxs);
42814 var settings = this;
42816 ['xs','sm','md','lg'].map(function(size){
42817 if (settings[size]) {
42818 cfg.cls += ' col-' + size + '-' + settings[size];
42822 this.store = new Roo.data.Store({
42823 proxy : new Roo.data.MemoryProxy({}),
42824 reader : new Roo.data.JsonReader({
42835 'name' : 'dialCode',
42839 'name' : 'priority',
42843 'name' : 'areaCodes',
42850 if(!this.preferedCountries) {
42851 this.preferedCountries = [
42858 var p = this.preferedCountries.reverse();
42861 for (var i = 0; i < p.length; i++) {
42862 for (var j = 0; j < this.allCountries.length; j++) {
42863 if(this.allCountries[j].iso2 == p[i]) {
42864 var t = this.allCountries[j];
42865 this.allCountries.splice(j,1);
42866 this.allCountries.unshift(t);
42872 this.store.proxy.data = {
42874 data: this.allCountries
42880 initEvents : function()
42883 Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
42885 this.indicator = this.indicatorEl();
42886 this.flag = this.flagEl();
42887 this.dialCodeHolder = this.dialCodeHolderEl();
42889 this.trigger = this.el.select('div.flag-box',true).first();
42890 this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
42895 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
42896 _this.list.setWidth(lw);
42899 this.list.on('mouseover', this.onViewOver, this);
42900 this.list.on('mousemove', this.onViewMove, this);
42901 this.inputEl().on("keyup", this.onKeyUp, this);
42902 this.inputEl().on("keypress", this.onKeyPress, this);
42904 this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
42906 this.view = new Roo.View(this.list, this.tpl, {
42907 singleSelect:true, store: this.store, selectedClass: this.selectedClass
42910 this.view.on('click', this.onViewClick, this);
42911 this.setValue(this.defaultDialCode);
42914 onTriggerClick : function(e)
42916 Roo.log('trigger click');
42921 if(this.isExpanded()){
42923 this.hasFocus = false;
42925 this.store.load({});
42926 this.hasFocus = true;
42931 isExpanded : function()
42933 return this.list.isVisible();
42936 collapse : function()
42938 if(!this.isExpanded()){
42942 Roo.get(document).un('mousedown', this.collapseIf, this);
42943 Roo.get(document).un('mousewheel', this.collapseIf, this);
42944 this.fireEvent('collapse', this);
42948 expand : function()
42952 if(this.isExpanded() || !this.hasFocus){
42956 var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
42957 this.list.setWidth(lw);
42960 this.restrictHeight();
42962 Roo.get(document).on('mousedown', this.collapseIf, this);
42963 Roo.get(document).on('mousewheel', this.collapseIf, this);
42965 this.fireEvent('expand', this);
42968 restrictHeight : function()
42970 this.list.alignTo(this.inputEl(), this.listAlign);
42971 this.list.alignTo(this.inputEl(), this.listAlign);
42974 onViewOver : function(e, t)
42976 if(this.inKeyMode){
42979 var item = this.view.findItemFromChild(t);
42982 var index = this.view.indexOf(item);
42983 this.select(index, false);
42988 onViewClick : function(view, doFocus, el, e)
42990 var index = this.view.getSelectedIndexes()[0];
42992 var r = this.store.getAt(index);
42995 this.onSelect(r, index);
42997 if(doFocus !== false && !this.blockFocus){
42998 this.inputEl().focus();
43002 onViewMove : function(e, t)
43004 this.inKeyMode = false;
43007 select : function(index, scrollIntoView)
43009 this.selectedIndex = index;
43010 this.view.select(index);
43011 if(scrollIntoView !== false){
43012 var el = this.view.getNode(index);
43014 this.list.scrollChildIntoView(el, false);
43019 createList : function()
43021 this.list = Roo.get(document.body).createChild({
43023 cls: 'typeahead typeahead-long dropdown-menu tel-list',
43024 style: 'display:none'
43027 this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
43030 collapseIf : function(e)
43032 var in_combo = e.within(this.el);
43033 var in_list = e.within(this.list);
43034 var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
43036 if (in_combo || in_list || is_list) {
43042 onSelect : function(record, index)
43044 if(this.fireEvent('beforeselect', this, record, index) !== false){
43046 this.setFlagClass(record.data.iso2);
43047 this.setDialCode(record.data.dialCode);
43048 this.hasFocus = false;
43050 this.fireEvent('select', this, record, index);
43054 flagEl : function()
43056 var flag = this.el.select('div.flag',true).first();
43063 dialCodeHolderEl : function()
43065 var d = this.el.select('input.dial-code-holder',true).first();
43072 setDialCode : function(v)
43074 this.dialCodeHolder.dom.value = '+'+v;
43077 setFlagClass : function(n)
43079 this.flag.dom.className = 'flag '+n;
43082 getValue : function()
43084 var v = this.inputEl().getValue();
43085 if(this.dialCodeHolder) {
43086 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
43091 setValue : function(v)
43093 var d = this.getDialCode(v);
43095 //invalid dial code
43096 if(v.length == 0 || !d || d.length == 0) {
43098 this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
43099 this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
43105 this.setFlagClass(this.dialCodeMapping[d].iso2);
43106 this.setDialCode(d);
43107 this.inputEl().dom.value = v.replace('+'+d,'');
43108 this.hiddenEl().dom.value = this.getValue();
43113 getDialCode : function(v)
43117 if (v.length == 0) {
43118 return this.dialCodeHolder.dom.value;
43122 if (v.charAt(0) != "+") {
43125 var numericChars = "";
43126 for (var i = 1; i < v.length; i++) {
43127 var c = v.charAt(i);
43130 if (this.dialCodeMapping[numericChars]) {
43131 dialCode = v.substr(1, i);
43133 if (numericChars.length == 4) {
43143 this.setValue(this.defaultDialCode);
43147 hiddenEl : function()
43149 return this.el.select('input.hidden-tel-input',true).first();
43152 // after setting val
43153 onKeyUp : function(e){
43154 this.setValue(this.getValue());
43157 onKeyPress : function(e){
43158 if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
43165 * @class Roo.bootstrap.MoneyField
43166 * @extends Roo.bootstrap.ComboBox
43167 * Bootstrap MoneyField class
43170 * Create a new MoneyField.
43171 * @param {Object} config Configuration options
43174 Roo.bootstrap.MoneyField = function(config) {
43176 Roo.bootstrap.MoneyField.superclass.constructor.call(this, config);
43180 Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
43183 * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
43185 allowDecimals : true,
43187 * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
43189 decimalSeparator : ".",
43191 * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
43193 decimalPrecision : 0,
43195 * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
43197 allowNegative : true,
43199 * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true)
43203 * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
43205 minValue : Number.NEGATIVE_INFINITY,
43207 * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
43209 maxValue : Number.MAX_VALUE,
43211 * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
43213 minText : "The minimum value for this field is {0}",
43215 * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
43217 maxText : "The maximum value for this field is {0}",
43219 * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
43220 * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
43222 nanText : "{0} is not a valid number",
43224 * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
43228 * @cfg {String} defaults currency of the MoneyField
43229 * value should be in lkey
43231 defaultCurrency : false,
43233 * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
43235 thousandsDelimiter : false,
43237 * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE)
43248 getAutoCreate : function()
43250 var align = this.labelAlign || this.parentLabelAlign();
43262 cls : 'form-control roo-money-amount-input',
43263 autocomplete: 'new-password'
43266 var hiddenInput = {
43270 cls: 'hidden-number-input'
43273 if(this.max_length) {
43274 input.maxlength = this.max_length;
43278 hiddenInput.name = this.name;
43281 if (this.disabled) {
43282 input.disabled = true;
43285 var clg = 12 - this.inputlg;
43286 var cmd = 12 - this.inputmd;
43287 var csm = 12 - this.inputsm;
43288 var cxs = 12 - this.inputxs;
43292 cls : 'row roo-money-field',
43296 cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
43300 cls: 'roo-select2-container input-group',
43304 cls : 'form-control roo-money-currency-input',
43305 autocomplete: 'new-password',
43307 name : this.currencyName
43311 cls : 'input-group-addon',
43325 cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs,
43329 cls: this.hasFeedback ? 'has-feedback' : '',
43340 if (this.fieldLabel.length) {
43343 tooltip: 'This field is required'
43349 cls: 'control-label',
43355 html: this.fieldLabel
43358 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
43364 if(this.indicatorpos == 'right') {
43365 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
43372 if(align == 'left') {
43380 if(this.labelWidth > 12){
43381 label.style = "width: " + this.labelWidth + 'px';
43383 if(this.labelWidth < 13 && this.labelmd == 0){
43384 this.labelmd = this.labelWidth;
43386 if(this.labellg > 0){
43387 label.cls += ' col-lg-' + this.labellg;
43388 input.cls += ' col-lg-' + (12 - this.labellg);
43390 if(this.labelmd > 0){
43391 label.cls += ' col-md-' + this.labelmd;
43392 container.cls += ' col-md-' + (12 - this.labelmd);
43394 if(this.labelsm > 0){
43395 label.cls += ' col-sm-' + this.labelsm;
43396 container.cls += ' col-sm-' + (12 - this.labelsm);
43398 if(this.labelxs > 0){
43399 label.cls += ' col-xs-' + this.labelxs;
43400 container.cls += ' col-xs-' + (12 - this.labelxs);
43411 var settings = this;
43413 ['xs','sm','md','lg'].map(function(size){
43414 if (settings[size]) {
43415 cfg.cls += ' col-' + size + '-' + settings[size];
43422 initEvents : function()
43424 this.indicator = this.indicatorEl();
43426 this.initCurrencyEvent();
43428 this.initNumberEvent();
43431 initCurrencyEvent : function()
43434 throw "can not find store for combo";
43437 this.store = Roo.factory(this.store, Roo.data);
43438 this.store.parent = this;
43442 this.triggerEl = this.el.select('.input-group-addon', true).first();
43444 this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true });
43449 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
43450 _this.list.setWidth(lw);
43453 this.list.on('mouseover', this.onViewOver, this);
43454 this.list.on('mousemove', this.onViewMove, this);
43455 this.list.on('scroll', this.onViewScroll, this);
43458 this.tpl = '<li><a href="#">{' + this.currencyField + '}</a></li>';
43461 this.view = new Roo.View(this.list, this.tpl, {
43462 singleSelect:true, store: this.store, selectedClass: this.selectedClass
43465 this.view.on('click', this.onViewClick, this);
43467 this.store.on('beforeload', this.onBeforeLoad, this);
43468 this.store.on('load', this.onLoad, this);
43469 this.store.on('loadexception', this.onLoadException, this);
43471 this.keyNav = new Roo.KeyNav(this.currencyEl(), {
43472 "up" : function(e){
43473 this.inKeyMode = true;
43477 "down" : function(e){
43478 if(!this.isExpanded()){
43479 this.onTriggerClick();
43481 this.inKeyMode = true;
43486 "enter" : function(e){
43489 if(this.fireEvent("specialkey", this, e)){
43490 this.onViewClick(false);
43496 "esc" : function(e){
43500 "tab" : function(e){
43503 if(this.fireEvent("specialkey", this, e)){
43504 this.onViewClick(false);
43512 doRelay : function(foo, bar, hname){
43513 if(hname == 'down' || this.scope.isExpanded()){
43514 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
43522 this.currencyEl().on("click", this.onTriggerClick, this, { preventDefault : true });
43526 initNumberEvent : function(e)
43528 this.inputEl().on("keydown" , this.fireKey, this);
43529 this.inputEl().on("focus", this.onFocus, this);
43530 this.inputEl().on("blur", this.onBlur, this);
43532 this.inputEl().relayEvent('keyup', this);
43534 if(this.indicator){
43535 this.indicator.addClass('invisible');
43538 this.originalValue = this.getValue();
43540 if(this.validationEvent == 'keyup'){
43541 this.validationTask = new Roo.util.DelayedTask(this.validate, this);
43542 this.inputEl().on('keyup', this.filterValidation, this);
43544 else if(this.validationEvent !== false){
43545 this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
43548 if(this.selectOnFocus){
43549 this.on("focus", this.preFocus, this);
43552 if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
43553 this.inputEl().on("keypress", this.filterKeys, this);
43555 this.inputEl().relayEvent('keypress', this);
43558 var allowed = "0123456789";
43560 if(this.allowDecimals){
43561 allowed += this.decimalSeparator;
43564 if(this.allowNegative){
43568 if(this.thousandsDelimiter) {
43572 this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
43574 var keyPress = function(e){
43576 var k = e.getKey();
43578 var c = e.getCharCode();
43581 (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
43582 allowed.indexOf(String.fromCharCode(c)) === -1
43588 if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
43592 if(allowed.indexOf(String.fromCharCode(c)) === -1){
43597 this.inputEl().on("keypress", keyPress, this);
43601 onTriggerClick : function(e)
43608 this.loadNext = false;
43610 if(this.isExpanded()){
43615 this.hasFocus = true;
43617 if(this.triggerAction == 'all') {
43618 this.doQuery(this.allQuery, true);
43622 this.doQuery(this.getRawValue());
43625 getCurrency : function()
43627 var v = this.currencyEl().getValue();
43632 restrictHeight : function()
43634 this.list.alignTo(this.currencyEl(), this.listAlign);
43635 this.list.alignTo(this.currencyEl(), this.listAlign);
43638 onViewClick : function(view, doFocus, el, e)
43640 var index = this.view.getSelectedIndexes()[0];
43642 var r = this.store.getAt(index);
43645 this.onSelect(r, index);
43649 onSelect : function(record, index){
43651 if(this.fireEvent('beforeselect', this, record, index) !== false){
43653 this.setFromCurrencyData(index > -1 ? record.data : false);
43657 this.fireEvent('select', this, record, index);
43661 setFromCurrencyData : function(o)
43665 this.lastCurrency = o;
43667 if (this.currencyField) {
43668 currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField];
43670 Roo.log('no currencyField value set for '+ (this.name ? this.name : this.id));
43673 this.lastSelectionText = currency;
43675 //setting default currency
43676 if(o[this.currencyField] * 1 == 0 && this.defaultCurrency) {
43677 this.setCurrency(this.defaultCurrency);
43681 this.setCurrency(currency);
43684 setFromData : function(o)
43688 c[this.currencyField] = !o || typeof(o[this.currencyName]) == 'undefined' ? '' : o[this.currencyName];
43690 this.setFromCurrencyData(c);
43695 value = !o || typeof(o[this.name]) == 'undefined' ? '' : o[this.name];
43697 Roo.log('no value set for '+ (this.name ? this.name : this.id));
43700 this.setValue(value);
43704 setCurrency : function(v)
43706 this.currencyValue = v;
43709 this.currencyEl().dom.value = (v === null || v === undefined ? '' : v);
43714 setValue : function(v)
43716 v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator);
43722 this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
43724 this.inputEl().dom.value = (v == '') ? '' :
43725 Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || '');
43727 if(!this.allowZero && v === '0') {
43728 this.hiddenEl().dom.value = '';
43729 this.inputEl().dom.value = '';
43736 getRawValue : function()
43738 var v = this.inputEl().getValue();
43743 getValue : function()
43745 return this.fixPrecision(this.parseValue(this.getRawValue()));
43748 parseValue : function(value)
43750 if(this.thousandsDelimiter) {
43752 r = new RegExp(",", "g");
43753 value = value.replace(r, "");
43756 value = parseFloat(String(value).replace(this.decimalSeparator, "."));
43757 return isNaN(value) ? '' : value;
43761 fixPrecision : function(value)
43763 if(this.thousandsDelimiter) {
43765 r = new RegExp(",", "g");
43766 value = value.replace(r, "");
43769 var nan = isNaN(value);
43771 if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
43772 return nan ? '' : value;
43774 return parseFloat(value).toFixed(this.decimalPrecision);
43777 decimalPrecisionFcn : function(v)
43779 return Math.floor(v);
43782 validateValue : function(value)
43784 if(!Roo.bootstrap.MoneyField.superclass.validateValue.call(this, value)){
43788 var num = this.parseValue(value);
43791 this.markInvalid(String.format(this.nanText, value));
43795 if(num < this.minValue){
43796 this.markInvalid(String.format(this.minText, this.minValue));
43800 if(num > this.maxValue){
43801 this.markInvalid(String.format(this.maxText, this.maxValue));
43808 validate : function()
43810 if(this.disabled || this.allowBlank){
43815 var currency = this.getCurrency();
43817 if(this.validateValue(this.getRawValue()) && currency.length){
43822 this.markInvalid();
43826 getName: function()
43831 beforeBlur : function()
43837 var v = this.parseValue(this.getRawValue());
43844 onBlur : function()
43848 if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
43849 //this.el.removeClass(this.focusClass);
43852 this.hasFocus = false;
43854 if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
43858 var v = this.getValue();
43860 if(String(v) !== String(this.startValue)){
43861 this.fireEvent('change', this, v, this.startValue);
43864 this.fireEvent("blur", this);
43867 inputEl : function()
43869 return this.el.select('.roo-money-amount-input', true).first();
43872 currencyEl : function()
43874 return this.el.select('.roo-money-currency-input', true).first();
43877 hiddenEl : function()
43879 return this.el.select('input.hidden-number-input',true).first();
43883 * @class Roo.bootstrap.BezierSignature
43884 * @extends Roo.bootstrap.Component
43885 * Bootstrap BezierSignature class
43886 * This script refer to:
43887 * Title: Signature Pad
43889 * Availability: https://github.com/szimek/signature_pad
43892 * Create a new BezierSignature
43893 * @param {Object} config The config object
43896 Roo.bootstrap.BezierSignature = function(config){
43897 Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
43903 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
43910 mouse_btn_down: true,
43913 * @cfg {int} canvas height
43915 canvas_height: '200px',
43918 * @cfg {float|function} Radius of a single dot.
43923 * @cfg {float} Minimum width of a line. Defaults to 0.5.
43928 * @cfg {float} Maximum width of a line. Defaults to 2.5.
43933 * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
43938 * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
43943 * @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.
43945 bg_color: 'rgba(0, 0, 0, 0)',
43948 * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
43950 dot_color: 'black',
43953 * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
43955 velocity_filter_weight: 0.7,
43958 * @cfg {function} Callback when stroke begin.
43963 * @cfg {function} Callback when stroke end.
43967 getAutoCreate : function()
43969 var cls = 'roo-signature column';
43972 cls += ' ' + this.cls;
43982 for(var i = 0; i < col_sizes.length; i++) {
43983 if(this[col_sizes[i]]) {
43984 cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
43994 cls: 'roo-signature-body',
43998 cls: 'roo-signature-body-canvas',
43999 height: this.canvas_height,
44000 width: this.canvas_width
44007 style: 'display: none'
44015 initEvents: function()
44017 Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
44019 var canvas = this.canvasEl();
44021 // mouse && touch event swapping...
44022 canvas.dom.style.touchAction = 'none';
44023 canvas.dom.style.msTouchAction = 'none';
44025 this.mouse_btn_down = false;
44026 canvas.on('mousedown', this._handleMouseDown, this);
44027 canvas.on('mousemove', this._handleMouseMove, this);
44028 Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
44030 if (window.PointerEvent) {
44031 canvas.on('pointerdown', this._handleMouseDown, this);
44032 canvas.on('pointermove', this._handleMouseMove, this);
44033 Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
44036 if ('ontouchstart' in window) {
44037 canvas.on('touchstart', this._handleTouchStart, this);
44038 canvas.on('touchmove', this._handleTouchMove, this);
44039 canvas.on('touchend', this._handleTouchEnd, this);
44042 Roo.EventManager.onWindowResize(this.resize, this, true);
44044 // file input event
44045 this.fileEl().on('change', this.uploadImage, this);
44052 resize: function(){
44054 var canvas = this.canvasEl().dom;
44055 var ctx = this.canvasElCtx();
44056 var img_data = false;
44058 if(canvas.width > 0) {
44059 var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
44061 // setting canvas width will clean img data
44064 var style = window.getComputedStyle ?
44065 getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
44067 var padding_left = parseInt(style.paddingLeft) || 0;
44068 var padding_right = parseInt(style.paddingRight) || 0;
44070 canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
44073 ctx.putImageData(img_data, 0, 0);
44077 _handleMouseDown: function(e)
44079 if (e.browserEvent.which === 1) {
44080 this.mouse_btn_down = true;
44081 this.strokeBegin(e);
44085 _handleMouseMove: function (e)
44087 if (this.mouse_btn_down) {
44088 this.strokeMoveUpdate(e);
44092 _handleMouseUp: function (e)
44094 if (e.browserEvent.which === 1 && this.mouse_btn_down) {
44095 this.mouse_btn_down = false;
44100 _handleTouchStart: function (e) {
44102 e.preventDefault();
44103 if (e.browserEvent.targetTouches.length === 1) {
44104 // var touch = e.browserEvent.changedTouches[0];
44105 // this.strokeBegin(touch);
44107 this.strokeBegin(e); // assume e catching the correct xy...
44111 _handleTouchMove: function (e) {
44112 e.preventDefault();
44113 // var touch = event.targetTouches[0];
44114 // _this._strokeMoveUpdate(touch);
44115 this.strokeMoveUpdate(e);
44118 _handleTouchEnd: function (e) {
44119 var wasCanvasTouched = e.target === this.canvasEl().dom;
44120 if (wasCanvasTouched) {
44121 e.preventDefault();
44122 // var touch = event.changedTouches[0];
44123 // _this._strokeEnd(touch);
44128 reset: function () {
44129 this._lastPoints = [];
44130 this._lastVelocity = 0;
44131 this._lastWidth = (this.min_width + this.max_width) / 2;
44132 this.canvasElCtx().fillStyle = this.dot_color;
44135 strokeMoveUpdate: function(e)
44137 this.strokeUpdate(e);
44139 if (this.throttle) {
44140 this.throttleStroke(this.strokeUpdate, this.throttle);
44143 this.strokeUpdate(e);
44147 strokeBegin: function(e)
44149 var newPointGroup = {
44150 color: this.dot_color,
44154 if (typeof this.onBegin === 'function') {
44158 this.curve_data.push(newPointGroup);
44160 this.strokeUpdate(e);
44163 strokeUpdate: function(e)
44165 var rect = this.canvasEl().dom.getBoundingClientRect();
44166 var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
44167 var lastPointGroup = this.curve_data[this.curve_data.length - 1];
44168 var lastPoints = lastPointGroup.points;
44169 var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
44170 var isLastPointTooClose = lastPoint
44171 ? point.distanceTo(lastPoint) <= this.min_distance
44173 var color = lastPointGroup.color;
44174 if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
44175 var curve = this.addPoint(point);
44177 this.drawDot({color: color, point: point});
44180 this.drawCurve({color: color, curve: curve});
44190 strokeEnd: function(e)
44192 this.strokeUpdate(e);
44193 if (typeof this.onEnd === 'function') {
44198 addPoint: function (point) {
44199 var _lastPoints = this._lastPoints;
44200 _lastPoints.push(point);
44201 if (_lastPoints.length > 2) {
44202 if (_lastPoints.length === 3) {
44203 _lastPoints.unshift(_lastPoints[0]);
44205 var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
44206 var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
44207 _lastPoints.shift();
44213 calculateCurveWidths: function (startPoint, endPoint) {
44214 var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
44215 (1 - this.velocity_filter_weight) * this._lastVelocity;
44217 var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
44220 start: this._lastWidth
44223 this._lastVelocity = velocity;
44224 this._lastWidth = newWidth;
44228 drawDot: function (_a) {
44229 var color = _a.color, point = _a.point;
44230 var ctx = this.canvasElCtx();
44231 var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
44233 this.drawCurveSegment(point.x, point.y, width);
44235 ctx.fillStyle = color;
44239 drawCurve: function (_a) {
44240 var color = _a.color, curve = _a.curve;
44241 var ctx = this.canvasElCtx();
44242 var widthDelta = curve.endWidth - curve.startWidth;
44243 var drawSteps = Math.floor(curve.length()) * 2;
44245 ctx.fillStyle = color;
44246 for (var i = 0; i < drawSteps; i += 1) {
44247 var t = i / drawSteps;
44253 var x = uuu * curve.startPoint.x;
44254 x += 3 * uu * t * curve.control1.x;
44255 x += 3 * u * tt * curve.control2.x;
44256 x += ttt * curve.endPoint.x;
44257 var y = uuu * curve.startPoint.y;
44258 y += 3 * uu * t * curve.control1.y;
44259 y += 3 * u * tt * curve.control2.y;
44260 y += ttt * curve.endPoint.y;
44261 var width = curve.startWidth + ttt * widthDelta;
44262 this.drawCurveSegment(x, y, width);
44268 drawCurveSegment: function (x, y, width) {
44269 var ctx = this.canvasElCtx();
44271 ctx.arc(x, y, width, 0, 2 * Math.PI, false);
44272 this.is_empty = false;
44277 var ctx = this.canvasElCtx();
44278 var canvas = this.canvasEl().dom;
44279 ctx.fillStyle = this.bg_color;
44280 ctx.clearRect(0, 0, canvas.width, canvas.height);
44281 ctx.fillRect(0, 0, canvas.width, canvas.height);
44282 this.curve_data = [];
44284 this.is_empty = true;
44289 return this.el.select('input',true).first();
44292 canvasEl: function()
44294 return this.el.select('canvas',true).first();
44297 canvasElCtx: function()
44299 return this.el.select('canvas',true).first().dom.getContext('2d');
44302 getImage: function(type)
44304 if(this.is_empty) {
44309 return this.canvasEl().dom.toDataURL('image/'+type, 1);
44312 drawFromImage: function(img_src)
44314 var img = new Image();
44316 img.onload = function(){
44317 this.canvasElCtx().drawImage(img, 0, 0);
44322 this.is_empty = false;
44325 selectImage: function()
44327 this.fileEl().dom.click();
44330 uploadImage: function(e)
44332 var reader = new FileReader();
44334 reader.onload = function(e){
44335 var img = new Image();
44336 img.onload = function(){
44338 this.canvasElCtx().drawImage(img, 0, 0);
44340 img.src = e.target.result;
44343 reader.readAsDataURL(e.target.files[0]);
44346 // Bezier Point Constructor
44347 Point: (function () {
44348 function Point(x, y, time) {
44351 this.time = time || Date.now();
44353 Point.prototype.distanceTo = function (start) {
44354 return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
44356 Point.prototype.equals = function (other) {
44357 return this.x === other.x && this.y === other.y && this.time === other.time;
44359 Point.prototype.velocityFrom = function (start) {
44360 return this.time !== start.time
44361 ? this.distanceTo(start) / (this.time - start.time)
44368 // Bezier Constructor
44369 Bezier: (function () {
44370 function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
44371 this.startPoint = startPoint;
44372 this.control2 = control2;
44373 this.control1 = control1;
44374 this.endPoint = endPoint;
44375 this.startWidth = startWidth;
44376 this.endWidth = endWidth;
44378 Bezier.fromPoints = function (points, widths, scope) {
44379 var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
44380 var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
44381 return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
44383 Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
44384 var dx1 = s1.x - s2.x;
44385 var dy1 = s1.y - s2.y;
44386 var dx2 = s2.x - s3.x;
44387 var dy2 = s2.y - s3.y;
44388 var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
44389 var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
44390 var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
44391 var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
44392 var dxm = m1.x - m2.x;
44393 var dym = m1.y - m2.y;
44394 var k = l2 / (l1 + l2);
44395 var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
44396 var tx = s2.x - cm.x;
44397 var ty = s2.y - cm.y;
44399 c1: new scope.Point(m1.x + tx, m1.y + ty),
44400 c2: new scope.Point(m2.x + tx, m2.y + ty)
44403 Bezier.prototype.length = function () {
44408 for (var i = 0; i <= steps; i += 1) {
44410 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
44411 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
44413 var xdiff = cx - px;
44414 var ydiff = cy - py;
44415 length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
44422 Bezier.prototype.point = function (t, start, c1, c2, end) {
44423 return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
44424 + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
44425 + (3.0 * c2 * (1.0 - t) * t * t)
44426 + (end * t * t * t);
44431 throttleStroke: function(fn, wait) {
44432 if (wait === void 0) { wait = 250; }
44434 var timeout = null;
44438 var later = function () {
44439 previous = Date.now();
44441 result = fn.apply(storedContext, storedArgs);
44443 storedContext = null;
44447 return function wrapper() {
44449 for (var _i = 0; _i < arguments.length; _i++) {
44450 args[_i] = arguments[_i];
44452 var now = Date.now();
44453 var remaining = wait - (now - previous);
44454 storedContext = this;
44456 if (remaining <= 0 || remaining > wait) {
44458 clearTimeout(timeout);
44462 result = fn.apply(storedContext, storedArgs);
44464 storedContext = null;
44468 else if (!timeout) {
44469 timeout = window.setTimeout(later, remaining);