From: Alan Knowles Date: Fri, 30 Jul 2021 07:40:08 +0000 (+0800) Subject: sync X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=d7b225294b7387a24fde8cf337415c8907ee351c sync --- diff --git a/Roo/bootstrap/ButtonGroup.js b/Roo/bootstrap/ButtonGroup.js index e2554f78c6..e45cc9d20f 100644 --- a/Roo/bootstrap/ButtonGroup.js +++ b/Roo/bootstrap/ButtonGroup.js @@ -10,7 +10,7 @@ * @class Roo.bootstrap.ButtonGroup * @extends Roo.bootstrap.Component * Bootstrap ButtonGroup class - * @children Roo.bootstrap.Button Roo.bootstrap.Form + * @children Roo.bootstrap.Button Roo.bootstrap.form.Form * * @cfg {String} size lg | sm | xs (default empty normal) * @cfg {String} align vertical | justified (default none) diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js deleted file mode 100644 index 7f0d5f1f10..0000000000 --- a/Roo/bootstrap/CardUploader.js +++ /dev/null @@ -1,386 +0,0 @@ - -/* -* Licence: LGPL -*/ - -/** - * @class Roo.bootstrap.CardUploader - * @extends Roo.bootstrap.Button - * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name... - * @cfg {Number} errorTimeout default 3000 - * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. - * @cfg {Array} html The button text. - - * - * @constructor - * Create a new CardUploader - * @param {Object} config The config object - */ - -Roo.bootstrap.CardUploader = function(config){ - - - - Roo.bootstrap.CardUploader.superclass.constructor.call(this, config); - - - this.fileCollection = new Roo.util.MixedCollection(false,function(r) { - return r.data.id - }); - - this.addEvents({ - // raw events - /** - * @event preview - * When a image is clicked on - and needs to display a slideshow or similar.. - * @param {Roo.bootstrap.Card} this - * @param {Object} The image information data - * - */ - 'preview' : true, - /** - * @event download - * When a the download link is clicked - * @param {Roo.bootstrap.Card} this - * @param {Object} The image information data contains - */ - 'download' : true - - }); -}; - -Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { - - - errorTimeout : 3000, - - images : false, - - fileCollection : false, - allowBlank : true, - - getAutoCreate : function() - { - - var cfg = { - cls :'form-group' , - cn : [ - - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - - { - tag: 'input', - type : 'hidden', - name : this.name, - value : this.value, - cls : 'd-none form-control' - }, - - { - tag: 'input', - multiple : 'multiple', - type : 'file', - cls : 'd-none roo-card-upload-selector' - }, - - { - cls : 'roo-card-uploader-button-container w-100 mb-2' - }, - { - cls : 'card-columns roo-card-uploader-container' - } - - ] - }; - - - return cfg; - }, - - getChildContainer : function() /// what children are added to. - { - return this.containerEl; - }, - - getButtonContainer : function() /// what children are added to. - { - return this.el.select(".roo-card-uploader-button-container").first(); - }, - - initEvents : function() - { - - Roo.bootstrap.Input.prototype.initEvents.call(this); - - var t = this; - this.addxtype({ - xns: Roo.bootstrap, - - xtype : 'Button', - container_method : 'getButtonContainer' , - html : this.html, // fix changable? - cls : 'w-100 ', - listeners : { - 'click' : function(btn, e) { - t.onClick(e); - } - } - }); - - - - - this.urlAPI = (window.createObjectURL && window) || - (window.URL && URL.revokeObjectURL && URL) || - (window.webkitURL && webkitURL); - - - - - this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); - - this.selectorEl.on('change', this.onFileSelected, this); - if (this.images) { - var t = this; - this.images.forEach(function(img) { - t.addCard(img) - }); - this.images = false; - } - this.containerEl = this.el.select('.roo-card-uploader-container', true).first(); - - - }, - - - onClick : function(e) - { - e.preventDefault(); - - this.selectorEl.dom.click(); - - }, - - onFileSelected : function(e) - { - e.preventDefault(); - - if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ - return; - } - - Roo.each(this.selectorEl.dom.files, function(file){ - this.addFile(file); - }, this); - - }, - - - - - - addFile : function(file) - { - - if(typeof(file) === 'string'){ - throw "Add file by name?"; // should not happen - return; - } - - if(!file || !this.urlAPI){ - return; - } - - // file; - // file.type; - - var _this = this; - - - var url = _this.urlAPI.createObjectURL( file); - - this.addCard({ - id : Roo.bootstrap.CardUploader.ID--, - is_uploaded : false, - src : url, - srcfile : file, - title : file.name, - mimetype : file.type, - preview : false, - is_deleted : 0 - }); - - }, - - /** - * addCard - add an Attachment to the uploader - * @param data - the data about the image to upload - * - * { - id : 123 - title : "Title of file", - is_uploaded : false, - src : "http://.....", - srcfile : { the File upload object }, - mimetype : file.type, - preview : false, - is_deleted : 0 - .. any other data... - } - * - * - */ - - addCard : function (data) - { - // hidden input element? - // if the file is not an image... - //then we need to use something other that and header_image - var t = this; - // remove..... - var footer = [ - { - xns : Roo.bootstrap, - xtype : 'CardFooter', - items: [ - { - xns : Roo.bootstrap, - xtype : 'Element', - cls : 'd-flex', - items : [ - - { - xns : Roo.bootstrap, - xtype : 'Button', - html : String.format("{0}", data.title), - cls : 'col-10 text-left', - size: 'sm', - weight: 'link', - fa : 'download', - listeners : { - click : function() { - - t.fireEvent( "download", t, data ); - } - } - }, - - { - xns : Roo.bootstrap, - xtype : 'Button', - style: 'max-height: 28px; ', - size : 'sm', - weight: 'danger', - cls : 'col-2', - fa : 'times', - listeners : { - click : function() { - t.removeCard(data.id) - } - } - } - ] - } - - ] - } - - ]; - - var cn = this.addxtype( - { - - xns : Roo.bootstrap, - xtype : 'Card', - closeable : true, - header : !data.mimetype.match(/image/) && !data.preview ? "Document": false, - header_image : data.mimetype.match(/image/) ? data.src : data.preview, - header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this. - data : data, - html : false, - - items : footer, - initEvents : function() { - Roo.bootstrap.Card.prototype.initEvents.call(this); - var card = this; - this.imgEl = this.el.select('.card-img-top').first(); - if (this.imgEl) { - this.imgEl.on('click', function() { t.fireEvent( "preview", t, data ); }, this); - this.imgEl.set({ 'pointer' : 'cursor' }); - - } - this.getCardFooter().addClass('p-1'); - - - } - - } - ); - // dont' really need ot update items. - // this.items.push(cn); - this.fileCollection.add(cn); - - if (!data.srcfile) { - this.updateInput(); - return; - } - - var _t = this; - var reader = new FileReader(); - reader.addEventListener("load", function() { - data.srcdata = reader.result; - _t.updateInput(); - }); - reader.readAsDataURL(data.srcfile); - - - - }, - removeCard : function(id) - { - - var card = this.fileCollection.get(id); - card.data.is_deleted = 1; - card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc. - //this.fileCollection.remove(card); - //this.items = this.items.filter(function(e) { return e != card }); - // dont' really need ot update items. - card.el.dom.parentNode.removeChild(card.el.dom); - this.updateInput(); - - - }, - reset: function() - { - this.fileCollection.each(function(card) { - if (card.el.dom && card.el.dom.parentNode) { - card.el.dom.parentNode.removeChild(card.el.dom); - } - }); - this.fileCollection.clear(); - this.updateInput(); - }, - - updateInput : function() - { - var data = []; - this.fileCollection.each(function(e) { - data.push(e.data); - - }); - this.inputEl().dom.value = JSON.stringify(data); - - - - } - - -}); - - -Roo.bootstrap.CardUploader.ID = -1; \ No newline at end of file diff --git a/Roo/bootstrap/CheckBox.js b/Roo/bootstrap/CheckBox.js deleted file mode 100644 index 9602dceeda..0000000000 --- a/Roo/bootstrap/CheckBox.js +++ /dev/null @@ -1,728 +0,0 @@ -/* - * - LGPL - * - * CheckBox - * - */ - -/** - * @class Roo.bootstrap.CheckBox - * @extends Roo.bootstrap.Input - * Bootstrap CheckBox class - * - * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked. - * @cfg {String} inputValue The value that should go into the generated input element's value when checked. - * @cfg {String} boxLabel The text that appears beside the checkbox - * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox - * @cfg {Boolean} checked initnal the element - * @cfg {Boolean} inline inline the element (default false) - * @cfg {String} groupId the checkbox group id // normal just use for checkbox - * @cfg {String} tooltip label tooltip - * - * @constructor - * Create a new CheckBox - * @param {Object} config The config object - */ - -Roo.bootstrap.CheckBox = function(config){ - Roo.bootstrap.CheckBox.superclass.constructor.call(this, config); - - this.addEvents({ - /** - * @event check - * Fires when the element is checked or unchecked. - * @param {Roo.bootstrap.CheckBox} this This input - * @param {Boolean} checked The new checked value - */ - check : true, - /** - * @event click - * Fires when the element is click. - * @param {Roo.bootstrap.CheckBox} this This input - */ - click : true - }); - -}; - -Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { - - inputType: 'checkbox', - inputValue: 1, - valueOff: 0, - boxLabel: false, - checked: false, - weight : false, - inline: false, - tooltip : '', - - // checkbox success does not make any sense really.. - invalidClass : "", - validClass : "", - - - getAutoCreate : function() - { - var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign; - - var id = Roo.id(); - - var cfg = {}; - - cfg.cls = 'form-group form-check ' + this.inputType; //input-group - - if(this.inline){ - cfg.cls += ' ' + this.inputType + '-inline form-check-inline'; - } - - var input = { - tag: 'input', - id : id, - type : this.inputType, - value : this.inputValue, - cls : 'roo-' + this.inputType, //'form-box', - placeholder : this.placeholder || '' - - }; - - if(this.inputType != 'radio'){ - var hidden = { - tag: 'input', - type : 'hidden', - cls : 'roo-hidden-value', - value : this.checked ? this.inputValue : this.valueOff - }; - } - - - if (this.weight) { // Validity check? - cfg.cls += " " + this.inputType + "-" + this.weight; - } - - if (this.disabled) { - input.disabled=true; - } - - if(this.checked){ - input.checked = this.checked; - } - - if (this.name) { - - input.name = this.name; - - if(this.inputType != 'radio'){ - hidden.name = this.name; - input.name = '_hidden_' + this.name; - } - } - - if (this.size) { - input.cls += ' input-' + this.size; - } - - var settings=this; - - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - var inputblock = input; - - if (this.before || this.after) { - - inputblock = { - cls : 'input-group', - cn : [] - }; - - if (this.before) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon', - html : this.before - }); - } - - inputblock.cn.push(input); - - if(this.inputType != 'radio'){ - inputblock.cn.push(hidden); - } - - if (this.after) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon', - html : this.after - }); - } - - } - var boxLabelCfg = false; - - if(this.boxLabel){ - - boxLabelCfg = { - tag: 'label', - //'for': id, // box label is handled by onclick - so no for... - cls: 'box-label', - html: this.boxLabel - }; - if(this.tooltip){ - boxLabelCfg.tooltip = this.tooltip; - } - - } - - - if (align ==='left' && this.fieldLabel.length) { -// Roo.log("left and has label"); - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label', - html : this.fieldLabel - }, - { - cls : "", - cn: [ - inputblock - ] - } - ]; - - if (boxLabelCfg) { - cfg.cn[1].cn.push(boxLabelCfg); - } - - if(this.labelWidth > 12){ - cfg.cn[0].style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - cfg.cn[0].cls += ' col-lg-' + this.labellg; - cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - cfg.cn[0].cls += ' col-md-' + this.labelmd; - cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - cfg.cn[0].cls += ' col-sm-' + this.labelsm; - cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - cfg.cn[0].cls += ' col-xs-' + this.labelxs; - cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs); - } - - } else if ( this.fieldLabel.length) { -// Roo.log(" label"); - cfg.cn = [ - - { - tag: this.boxLabel ? 'span' : 'label', - 'for': id, - cls: 'control-label box-input-label', - //cls : 'input-group-addon', - html : this.fieldLabel - }, - - inputblock - - ]; - if (boxLabelCfg) { - cfg.cn.push(boxLabelCfg); - } - - } else { - -// Roo.log(" no label && no align"); - cfg.cn = [ inputblock ] ; - if (boxLabelCfg) { - cfg.cn.push(boxLabelCfg); - } - - - } - - - - if(this.inputType != 'radio'){ - cfg.cn.push(hidden); - } - - return cfg; - - }, - - /** - * return the real input element. - */ - inputEl: function () - { - return this.el.select('input.roo-' + this.inputType,true).first(); - }, - hiddenEl: function () - { - return this.el.select('input.roo-hidden-value',true).first(); - }, - - labelEl: function() - { - return this.el.select('label.control-label',true).first(); - }, - /* depricated... */ - - label: function() - { - return this.labelEl(); - }, - - boxLabelEl: function() - { - return this.el.select('label.box-label',true).first(); - }, - - initEvents : function() - { -// Roo.bootstrap.CheckBox.superclass.initEvents.call(this); - - this.inputEl().on('click', this.onClick, this); - - if (this.boxLabel) { - this.el.select('label.box-label',true).first().on('click', this.onClick, this); - } - - this.startValue = this.getValue(); - - if(this.groupId){ - Roo.bootstrap.CheckBox.register(this); - } - }, - - onClick : function(e) - { - if(this.fireEvent('click', this, e) !== false){ - this.setChecked(!this.checked); - } - - }, - - setChecked : function(state,suppressEvent) - { - this.startValue = this.getValue(); - - if(this.inputType == 'radio'){ - - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.dom.checked = false; - }); - - this.inputEl().dom.checked = true; - - this.inputEl().dom.value = this.inputValue; - - if(suppressEvent !== true){ - this.fireEvent('check', this, true); - } - - this.validate(); - - return; - } - - this.checked = state; - - this.inputEl().dom.checked = state; - - - this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff; - - if(suppressEvent !== true){ - this.fireEvent('check', this, state); - } - - this.validate(); - }, - - getValue : function() - { - if(this.inputType == 'radio'){ - return this.getGroupValue(); - } - - return this.hiddenEl().dom.value; - - }, - - getGroupValue : function() - { - if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){ - return ''; - } - - return this.el.up('form').child('input[name='+this.name+']:checked', true).value; - }, - - setValue : function(v,suppressEvent) - { - if(this.inputType == 'radio'){ - this.setGroupValue(v, suppressEvent); - return; - } - - this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent); - - this.validate(); - }, - - setGroupValue : function(v, suppressEvent) - { - this.startValue = this.getValue(); - - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.dom.checked = false; - - if(e.dom.value == v){ - e.dom.checked = true; - } - }); - - if(suppressEvent !== true){ - this.fireEvent('check', this, true); - } - - this.validate(); - - return; - }, - - validate : function() - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - if( - this.disabled || - (this.inputType == 'radio' && this.validateRadio()) || - (this.inputType == 'checkbox' && this.validateCheckbox()) - ){ - this.markValid(); - return true; - } - - this.markInvalid(); - return false; - }, - - validateRadio : function() - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - if(this.allowBlank){ - return true; - } - - var valid = false; - - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - if(!e.dom.checked){ - return; - } - - valid = true; - - return false; - }); - - return valid; - }, - - validateCheckbox : function() - { - if(!this.groupId){ - return (this.getValue() == this.inputValue || this.allowBlank) ? true : false; - //return (this.getValue() == this.inputValue) ? true : false; - } - - var group = Roo.bootstrap.CheckBox.get(this.groupId); - - if(!group){ - return false; - } - - var r = false; - - for(var i in group){ - if(group[i].el.isVisible(true)){ - r = false; - break; - } - - r = true; - } - - for(var i in group){ - if(r){ - break; - } - - r = (group[i].getValue() == group[i].inputValue) ? true : false; - } - - return r; - }, - - /** - * Mark this field as valid - */ - markValid : function() - { - var _this = this; - - this.fireEvent('valid', this); - - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); - - if(this.groupId){ - label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group'); - } - - if(label){ - label.markValid(); - } - - if(this.inputType == 'radio'){ - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - var fg = e.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([_this.invalidClass, _this.validClass]); - fg.addClass(_this.validClass); - } else { - fg.removeClass(['is-valid', 'is-invalid']); - fg.addClass('is-valid'); - } - }); - - return; - } - - if(!this.groupId){ - var fg = this.el.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([this.invalidClass, this.validClass]); - fg.addClass(this.validClass); - } else { - fg.removeClass(['is-valid', 'is-invalid']); - fg.addClass('is-valid'); - } - return; - } - - var group = Roo.bootstrap.CheckBox.get(this.groupId); - - if(!group){ - return; - } - - for(var i in group){ - var fg = group[i].el.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([this.invalidClass, this.validClass]); - fg.addClass(this.validClass); - } else { - fg.removeClass(['is-valid', 'is-invalid']); - fg.addClass('is-valid'); - } - } - }, - - /** - * Mark this field as invalid - * @param {String} msg The validation message - */ - markInvalid : function(msg) - { - if(this.allowBlank){ - return; - } - - var _this = this; - - this.fireEvent('invalid', this, msg); - - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); - - if(this.groupId){ - label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group'); - } - - if(label){ - label.markInvalid(); - } - - if(this.inputType == 'radio'){ - - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - var fg = e.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([_this.invalidClass, _this.validClass]); - fg.addClass(_this.invalidClass); - } else { - fg.removeClass(['is-invalid', 'is-valid']); - fg.addClass('is-invalid'); - } - }); - - return; - } - - if(!this.groupId){ - var fg = this.el.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([_this.invalidClass, _this.validClass]); - fg.addClass(_this.invalidClass); - } else { - fg.removeClass(['is-invalid', 'is-valid']); - fg.addClass('is-invalid'); - } - return; - } - - var group = Roo.bootstrap.CheckBox.get(this.groupId); - - if(!group){ - return; - } - - for(var i in group){ - var fg = group[i].el.findParent('.form-group', false, true); - if (Roo.bootstrap.version == 3) { - fg.removeClass([_this.invalidClass, _this.validClass]); - fg.addClass(_this.invalidClass); - } else { - fg.removeClass(['is-invalid', 'is-valid']); - fg.addClass('is-invalid'); - } - } - - }, - - clearInvalid : function() - { - Roo.bootstrap.Input.prototype.clearInvalid.call(this); - - // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); - - if (label && label.iconEl) { - label.iconEl.removeClass([ label.validClass, label.invalidClass ]); - label.iconEl.removeClass(['is-invalid', 'is-valid']); - } - }, - - disable : function() - { - if(this.inputType != 'radio'){ - Roo.bootstrap.CheckBox.superclass.disable.call(this); - return; - } - - var _this = this; - - if(this.rendered){ - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - _this.getActionEl().addClass(this.disabledClass); - e.dom.disabled = true; - }); - } - - this.disabled = true; - this.fireEvent("disable", this); - return this; - }, - - enable : function() - { - if(this.inputType != 'radio'){ - Roo.bootstrap.CheckBox.superclass.enable.call(this); - return; - } - - var _this = this; - - if(this.rendered){ - Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - _this.getActionEl().removeClass(this.disabledClass); - e.dom.disabled = false; - }); - } - - this.disabled = false; - this.fireEvent("enable", this); - return this; - }, - - setBoxLabel : function(v) - { - this.boxLabel = v; - - if(this.rendered){ - this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v); - } - } - -}); - -Roo.apply(Roo.bootstrap.CheckBox, { - - groups: {}, - - /** - * register a CheckBox Group - * @param {Roo.bootstrap.CheckBox} the CheckBox to add - */ - register : function(checkbox) - { - if(typeof(this.groups[checkbox.groupId]) == 'undefined'){ - this.groups[checkbox.groupId] = {}; - } - - if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){ - return; - } - - this.groups[checkbox.groupId][checkbox.name] = checkbox; - - }, - /** - * fetch a CheckBox Group based on the group ID - * @param {string} the group ID - * @returns {Roo.bootstrap.CheckBox} the CheckBox group - */ - get: function(groupId) { - if (typeof(this.groups[groupId]) == 'undefined') { - return false; - } - - return this.groups[groupId] ; - } - - -}); diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js deleted file mode 100644 index 8582874e03..0000000000 --- a/Roo/bootstrap/ComboBox.js +++ /dev/null @@ -1,3100 +0,0 @@ -/* - * - LGPL - * * - */ - -/** - * @class Roo.bootstrap.ComboBox - * @extends Roo.bootstrap.TriggerField - * A combobox control with support for autocomplete, remote-loading, paging and many other features. - * @cfg {Boolean} append (true|false) default false - * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true - * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false - * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true - * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true - * @cfg {String} btnPosition set the position of the trigger button (left | right) default right - * @cfg {Boolean} animate default true - * @cfg {Boolean} emptyResultText only for touch device - * @cfg {String} triggerText multiple combobox trigger button text default 'Select' - * @cfg {String} emptyTitle default '' - * @cfg {Number} width fixed with? experimental - * @constructor - * Create a new ComboBox. - * @param {Object} config Configuration options - */ -Roo.bootstrap.ComboBox = function(config){ - Roo.bootstrap.ComboBox.superclass.constructor.call(this, config); - this.addEvents({ - /** - * @event expand - * Fires when the dropdown list is expanded - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'expand' : true, - /** - * @event collapse - * Fires when the dropdown list is collapsed - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'collapse' : true, - /** - * @event beforeselect - * Fires before a list item is selected. Return false to cancel the selection. - * @param {Roo.bootstrap.ComboBox} combo This combo box - * @param {Roo.data.Record} record The data record returned from the underlying store - * @param {Number} index The index of the selected item in the dropdown list - */ - 'beforeselect' : true, - /** - * @event select - * Fires when a list item is selected - * @param {Roo.bootstrap.ComboBox} combo This combo box - * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear) - * @param {Number} index The index of the selected item in the dropdown list - */ - 'select' : true, - /** - * @event beforequery - * Fires before all queries are processed. Return false to cancel the query or set cancel to true. - * The event object passed has these properties: - * @param {Roo.bootstrap.ComboBox} combo This combo box - * @param {String} query The query - * @param {Boolean} forceAll true to force "all" query - * @param {Boolean} cancel true to cancel the query - * @param {Object} e The query event object - */ - 'beforequery': true, - /** - * @event add - * Fires when the 'add' icon is pressed (add a listener to enable add button) - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'add' : true, - /** - * @event edit - * Fires when the 'edit' icon is pressed (add a listener to enable add button) - * @param {Roo.bootstrap.ComboBox} combo This combo box - * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected) - */ - 'edit' : true, - /** - * @event remove - * Fires when the remove value from the combobox array - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'remove' : true, - /** - * @event afterremove - * Fires when the remove value from the combobox array - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'afterremove' : true, - /** - * @event specialfilter - * Fires when specialfilter - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'specialfilter' : true, - /** - * @event tick - * Fires when tick the element - * @param {Roo.bootstrap.ComboBox} combo This combo box - */ - 'tick' : true, - /** - * @event touchviewdisplay - * Fires when touch view require special display (default is using displayField) - * @param {Roo.bootstrap.ComboBox} combo This combo box - * @param {Object} cfg set html . - */ - 'touchviewdisplay' : true - - }); - - this.item = []; - this.tickItems = []; - - this.selectedIndex = -1; - if(this.mode == 'local'){ - if(config.queryDelay === undefined){ - this.queryDelay = 10; - } - if(config.minChars === undefined){ - this.minChars = 0; - } - } -}; - -Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { - - /** - * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when - * rendering into an Roo.Editor, defaults to false) - */ - /** - * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to: - * {tag: "input", type: "text", size: "24", autocomplete: "off"}) - */ - /** - * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined) - */ - /** - * @cfg {String} title If supplied, a header element is created containing this text and added into the top of - * the dropdown list (defaults to undefined, with no header element) - */ - - /** - * @cfg {String/Roo.Template} tpl The template to use to render the output default is '{' + this.displayField + '}' - */ - - /** - * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field) - */ - listWidth: undefined, - /** - * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if - * mode = 'remote' or 'text' if mode = 'local') - */ - displayField: undefined, - - /** - * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if - * mode = 'remote' or 'value' if mode = 'local'). - * Note: use of a valueField requires the user make a selection - * in order for a value to be mapped. - */ - valueField: undefined, - /** - * @cfg {String} modalTitle The title of the dialog that pops up on mobile views. - */ - modalTitle : '', - - /** - * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the - * field's data value (defaults to the underlying DOM element's name) - */ - hiddenName: undefined, - /** - * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '') - */ - listClass: '', - /** - * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected') - */ - selectedClass: 'active', - - /** - * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right - */ - shadow:'sides', - /** - * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported - * anchor positions (defaults to 'tl-bl') - */ - listAlign: 'tl-bl?', - /** - * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300) - */ - maxHeight: 300, - /** - * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the - * query specified by the allQuery config option (defaults to 'query') - */ - triggerAction: 'query', - /** - * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate - * (defaults to 4, does not apply if editable = false) - */ - minChars : 4, - /** - * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable - * delay (typeAheadDelay) if it matches a known value (defaults to false) - */ - typeAhead: false, - /** - * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the - * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local') - */ - queryDelay: 500, - /** - * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the - * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0) - */ - pageSize: 0, - /** - * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies - * when editable = true (defaults to false) - */ - selectOnFocus:false, - /** - * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query') - */ - queryParam: 'query', - /** - * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies - * when mode = 'remote' (defaults to 'Loading...') - */ - loadingText: 'Loading...', - /** - * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false) - */ - resizable: false, - /** - * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8) - */ - handleHeight : 8, - /** - * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a - * traditional select (defaults to true) - */ - editable: true, - /** - * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '') - */ - allQuery: '', - /** - * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server) - */ - mode: 'remote', - /** - * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if - * listWidth has a higher value) - */ - minListWidth : 70, - /** - * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to - * allow the user to set arbitrary text into the field (defaults to false) - */ - forceSelection:false, - /** - * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed - * if typeAhead = true (defaults to 250) - */ - typeAheadDelay : 250, - /** - * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in - * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined) - */ - valueNotFoundText : undefined, - /** - * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar - */ - blockFocus : false, - - /** - * @cfg {Boolean} disableClear Disable showing of clear button. - */ - disableClear : false, - /** - * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query - */ - alwaysQuery : false, - - /** - * @cfg {Boolean} multiple (true|false) ComboBobArray, default false - */ - multiple : false, - - /** - * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now - */ - invalidClass : "has-warning", - - /** - * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now - */ - validClass : "has-success", - - /** - * @cfg {Boolean} specialFilter (true|false) special filter default false - */ - specialFilter : false, - - /** - * @cfg {Boolean} mobileTouchView (true|false) show mobile touch view when using a mobile default true - */ - mobileTouchView : true, - - /** - * @cfg {Boolean} useNativeIOS (true|false) render it as classic select for ios, not support dynamic load data (default false) - */ - useNativeIOS : false, - - /** - * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view - */ - mobile_restrict_height : false, - - ios_options : false, - - //private - addicon : false, - editicon: false, - - page: 0, - hasQuery: false, - append: false, - loadNext: false, - autoFocus : true, - tickable : false, - btnPosition : 'right', - triggerList : true, - showToggleBtn : true, - animate : true, - emptyResultText: 'Empty', - triggerText : 'Select', - emptyTitle : '', - width : false, - - // element that contains real text value.. (when hidden is used..) - - getAutoCreate : function() - { - var cfg = false; - //render - /* - * Render classic select for iso - */ - - if(Roo.isIOS && this.useNativeIOS){ - cfg = this.getAutoCreateNativeIOS(); - return cfg; - } - - /* - * Touch Devices - */ - - if(Roo.isTouch && this.mobileTouchView){ - cfg = this.getAutoCreateTouchView(); - return cfg;; - } - - /* - * Normal ComboBox - */ - if(!this.tickable){ - cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this); - return cfg; - } - - /* - * ComboBox with tickable selections - */ - - var align = this.labelAlign || this.parentLabelAlign(); - - cfg = { - cls : 'form-group roo-combobox-tickable' //input-group - }; - - var btn_text_select = ''; - var btn_text_done = ''; - var btn_text_cancel = ''; - - if (this.btn_text_show) { - btn_text_select = 'Select'; - btn_text_done = 'Done'; - btn_text_cancel = 'Cancel'; - } - - var buttons = { - tag : 'div', - cls : 'tickable-buttons', - cn : [ - { - tag : 'button', - type : 'button', - cls : 'btn btn-link btn-edit pull-' + this.btnPosition, - //html : this.triggerText - html: btn_text_select - }, - { - tag : 'button', - type : 'button', - name : 'ok', - cls : 'btn btn-link btn-ok pull-' + this.btnPosition, - //html : 'Done' - html: btn_text_done - }, - { - tag : 'button', - type : 'button', - name : 'cancel', - cls : 'btn btn-link btn-cancel pull-' + this.btnPosition, - //html : 'Cancel' - html: btn_text_cancel - } - ] - }; - - if(this.editable){ - buttons.cn.unshift({ - tag: 'input', - cls: 'roo-select2-search-field-input' - }); - } - - var _this = this; - - Roo.each(buttons.cn, function(c){ - if (_this.size) { - c.cls += ' btn-' + _this.size; - } - - if (_this.disabled) { - c.disabled = true; - } - }); - - var box = { - tag: 'div', - style : 'display: contents', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ - buttons - ] - } - ] - } - ] - }; - - var combobox = { - cls: 'roo-select2-container input-group roo-select2-container-multi', - cn: [ - - box -// { -// tag: 'ul', -// cls: 'typeahead typeahead-long dropdown-menu', -// style: 'display:none; max-height:' + this.maxHeight + 'px;' -// } - ] - }; - - if(this.hasFeedback && !this.allowBlank){ - - var feedback = { - tag: 'span', - cls: 'glyphicon form-control-feedback' - }; - - combobox.cn.push(feedback); - } - - - - var indicator = { - tag : 'i', - cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }; - if (Roo.bootstrap.version == 4) { - indicator = { - tag : 'i', - style : 'display:none' - }; - } - if (align ==='left' && this.fieldLabel.length) { - - cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); - - cfg.cn = [ - indicator, - { - tag: 'label', - 'for' : id, - cls : 'control-label col-form-label', - html : this.fieldLabel - - }, - { - cls : "", - cn: [ - combobox - ] - } - - ]; - - var labelCfg = cfg.cn[1]; - var contentCfg = cfg.cn[2]; - - - if(this.indicatorpos == 'right'){ - - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label col-form-label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - }, - indicator - ] - }, - { - cls : "", - cn: [ - combobox - ] - } - - ]; - - - - labelCfg = cfg.cn[0]; - contentCfg = cfg.cn[1]; - - } - - if(this.labelWidth > 12){ - labelCfg.style = "width: " + this.labelWidth + 'px'; - } - if(this.width * 1 > 0){ - contentCfg.style = "width: " + this.width + 'px'; - } - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - labelCfg.cls += ' col-lg-' + this.labellg; - contentCfg.cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - labelCfg.cls += ' col-md-' + this.labelmd; - contentCfg.cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - labelCfg.cls += ' col-sm-' + this.labelsm; - contentCfg.cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - labelCfg.cls += ' col-xs-' + this.labelxs; - contentCfg.cls += ' col-xs-' + (12 - this.labelxs); - } - - - } else if ( this.fieldLabel.length) { -// Roo.log(" label"); - cfg.cn = [ - indicator, - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - }, - combobox - ]; - - if(this.indicatorpos == 'right'){ - cfg.cn = [ - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - }, - indicator, - combobox - ]; - - } - - } else { - -// Roo.log(" no label && no align"); - cfg = combobox - - - } - - var settings=this; - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - return cfg; - - }, - - _initEventsCalled : false, - - // private - initEvents: function() - { - if (this._initEventsCalled) { // as we call render... prevent looping... - return; - } - this._initEventsCalled = true; - - if (!this.store) { - throw "can not find store for combo"; - } - - this.indicator = this.indicatorEl(); - - this.store = Roo.factory(this.store, Roo.data); - this.store.parent = this; - - // if we are building from html. then this element is so complex, that we can not really - // use the rendered HTML. - // so we have to trash and replace the previous code. - if (Roo.XComponent.build_from_html) { - // remove this element.... - var e = this.el.dom, k=0; - while (e ) { e = e.previousSibling; ++k;} - - this.el.remove(); - - this.el=false; - this.rendered = false; - - this.render(this.parent().getChildContainer(true), k); - } - - if(Roo.isIOS && this.useNativeIOS){ - this.initIOSView(); - return; - } - - /* - * Touch Devices - */ - - if(Roo.isTouch && this.mobileTouchView){ - this.initTouchView(); - return; - } - - if(this.tickable){ - this.initTickableEvents(); - return; - } - - Roo.bootstrap.ComboBox.superclass.initEvents.call(this); - - if(this.hiddenName){ - - this.hiddenField = this.el.select('input.form-hidden-field',true).first(); - - this.hiddenField.dom.value = - this.hiddenValue !== undefined ? this.hiddenValue : - this.value !== undefined ? this.value : ''; - - // prevent input submission - this.el.dom.removeAttribute('name'); - this.hiddenField.dom.setAttribute('name', this.hiddenName); - - - } - //if(Roo.isGecko){ - // this.el.dom.setAttribute('autocomplete', 'off'); - //} - - var cls = 'x-combo-list'; - - //this.list = new Roo.Layer({ - // shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false - //}); - - var _this = this; - - (function(){ - var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth); - _this.list.setWidth(lw); - }).defer(100); - - this.list.on('mouseover', this.onViewOver, this); - this.list.on('mousemove', this.onViewMove, this); - this.list.on('scroll', this.onViewScroll, this); - - /* - this.list.swallowEvent('mousewheel'); - this.assetHeight = 0; - - if(this.title){ - this.header = this.list.createChild({cls:cls+'-hd', html: this.title}); - this.assetHeight += this.header.getHeight(); - } - - this.innerList = this.list.createChild({cls:cls+'-inner'}); - this.innerList.on('mouseover', this.onViewOver, this); - this.innerList.on('mousemove', this.onViewMove, this); - this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); - - if(this.allowBlank && !this.pageSize && !this.disableClear){ - this.footer = this.list.createChild({cls:cls+'-ft'}); - this.pageTb = new Roo.Toolbar(this.footer); - - } - if(this.pageSize){ - this.footer = this.list.createChild({cls:cls+'-ft'}); - this.pageTb = new Roo.PagingToolbar(this.footer, this.store, - {pageSize: this.pageSize}); - - } - - if (this.pageTb && this.allowBlank && !this.disableClear) { - var _this = this; - this.pageTb.add(new Roo.Toolbar.Fill(), { - cls: 'x-btn-icon x-btn-clear', - text: ' ', - handler: function() - { - _this.collapse(); - _this.clearValue(); - _this.onSelect(false, -1); - } - }); - } - if (this.footer) { - this.assetHeight += this.footer.getHeight(); - } - */ - - if(!this.tpl){ - this.tpl = Roo.bootstrap.version == 4 ? - '{' + this.displayField + '}' : // 4 does not need
  • and it get's really confisued. - '
  • {' + this.displayField + '}
    • '; - } - - this.view = new Roo.View(this.list, this.tpl, { - singleSelect:true, store: this.store, selectedClass: this.selectedClass - }); - //this.view.wrapEl.setDisplayed(false); - this.view.on('click', this.onViewClick, this); - - - this.store.on('beforeload', this.onBeforeLoad, this); - this.store.on('load', this.onLoad, this); - this.store.on('loadexception', this.onLoadException, this); - /* - if(this.resizable){ - this.resizer = new Roo.Resizable(this.list, { - pinned:true, handles:'se' - }); - this.resizer.on('resize', function(r, w, h){ - this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight; - this.listWidth = w; - this.innerList.setWidth(w - this.list.getFrameWidth('lr')); - this.restrictHeight(); - }, this); - this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px'); - } - */ - if(!this.editable){ - this.editable = true; - this.setEditable(false); - } - - /* - - if (typeof(this.events.add.listeners) != 'undefined') { - - this.addicon = this.wrap.createChild( - {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' }); - - this.addicon.on('click', function(e) { - this.fireEvent('add', this); - }, this); - } - if (typeof(this.events.edit.listeners) != 'undefined') { - - this.editicon = this.wrap.createChild( - {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' }); - if (this.addicon) { - this.editicon.setStyle('margin-left', '40px'); - } - this.editicon.on('click', function(e) { - - // we fire even if inothing is selected.. - this.fireEvent('edit', this, this.lastData ); - - }, this); - } - */ - - this.keyNav = new Roo.KeyNav(this.inputEl(), { - "up" : function(e){ - this.inKeyMode = true; - this.selectPrev(); - }, - - "down" : function(e){ - if(!this.isExpanded()){ - this.onTriggerClick(); - }else{ - this.inKeyMode = true; - this.selectNext(); - } - }, - - "enter" : function(e){ -// this.onViewClick(); - //return true; - this.collapse(); - - if(this.fireEvent("specialkey", this, e)){ - this.onViewClick(false); - } - - return true; - }, - - "esc" : function(e){ - this.collapse(); - }, - - "tab" : function(e){ - this.collapse(); - - if(this.fireEvent("specialkey", this, e)){ - this.onViewClick(false); - } - - return true; - }, - - scope : this, - - doRelay : function(foo, bar, hname){ - if(hname == 'down' || this.scope.isExpanded()){ - return Roo.KeyNav.prototype.doRelay.apply(this, arguments); - } - return true; - }, - - forceKeyDown: true - }); - - - this.queryDelay = Math.max(this.queryDelay || 10, - this.mode == 'local' ? 10 : 250); - - - this.dqTask = new Roo.util.DelayedTask(this.initQuery, this); - - if(this.typeAhead){ - this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this); - } - if(this.editable !== false){ - this.inputEl().on("keyup", this.onKeyUp, this); - } - if(this.forceSelection){ - this.inputEl().on('blur', this.doForce, this); - } - - if(this.multiple){ - this.choices = this.el.select('ul.roo-select2-choices', true).first(); - this.searchField = this.el.select('ul li.roo-select2-search-field', true).first(); - } - }, - - initTickableEvents: function() - { - this.createList(); - - if(this.hiddenName){ - - this.hiddenField = this.el.select('input.form-hidden-field',true).first(); - - this.hiddenField.dom.value = - this.hiddenValue !== undefined ? this.hiddenValue : - this.value !== undefined ? this.value : ''; - - // prevent input submission - this.el.dom.removeAttribute('name'); - this.hiddenField.dom.setAttribute('name', this.hiddenName); - - - } - -// this.list = this.el.select('ul.dropdown-menu',true).first(); - - this.choices = this.el.select('ul.roo-select2-choices', true).first(); - this.searchField = this.el.select('ul li.roo-select2-search-field', true).first(); - if(this.triggerList){ - this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true}); - } - - this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first(); - this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true}); - - this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first(); - this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first(); - - this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn); - this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn); - - this.trigger.setVisibilityMode(Roo.Element.DISPLAY); - this.okBtn.setVisibilityMode(Roo.Element.DISPLAY); - this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY); - - this.okBtn.hide(); - this.cancelBtn.hide(); - - var _this = this; - - (function(){ - var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth); - _this.list.setWidth(lw); - }).defer(100); - - this.list.on('mouseover', this.onViewOver, this); - this.list.on('mousemove', this.onViewMove, this); - - this.list.on('scroll', this.onViewScroll, this); - - if(!this.tpl){ - this.tpl = '
    • '; - } - - this.view = new Roo.View(this.list, this.tpl, { - singleSelect:true, - tickable:true, - parent:this, - store: this.store, - selectedClass: this.selectedClass - }); - - //this.view.wrapEl.setDisplayed(false); - this.view.on('click', this.onViewClick, this); - - - - this.store.on('beforeload', this.onBeforeLoad, this); - this.store.on('load', this.onLoad, this); - this.store.on('loadexception', this.onLoadException, this); - - if(this.editable){ - this.keyNav = new Roo.KeyNav(this.tickableInputEl(), { - "up" : function(e){ - this.inKeyMode = true; - this.selectPrev(); - }, - - "down" : function(e){ - this.inKeyMode = true; - this.selectNext(); - }, - - "enter" : function(e){ - if(this.fireEvent("specialkey", this, e)){ - this.onViewClick(false); - } - - return true; - }, - - "esc" : function(e){ - this.onTickableFooterButtonClick(e, false, false); - }, - - "tab" : function(e){ - this.fireEvent("specialkey", this, e); - - this.onTickableFooterButtonClick(e, false, false); - - return true; - }, - - scope : this, - - doRelay : function(e, fn, key){ - if(this.scope.isExpanded()){ - return Roo.KeyNav.prototype.doRelay.apply(this, arguments); - } - return true; - }, - - forceKeyDown: true - }); - } - - this.queryDelay = Math.max(this.queryDelay || 10, - this.mode == 'local' ? 10 : 250); - - - this.dqTask = new Roo.util.DelayedTask(this.initQuery, this); - - if(this.typeAhead){ - this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this); - } - - if(this.editable !== false){ - this.tickableInputEl().on("keyup", this.onKeyUp, this); - } - - this.indicator = this.indicatorEl(); - - if(this.indicator){ - this.indicator.setVisibilityMode(Roo.Element.DISPLAY); - this.indicator.hide(); - } - - }, - - onDestroy : function(){ - if(this.view){ - this.view.setStore(null); - this.view.el.removeAllListeners(); - this.view.el.remove(); - this.view.purgeListeners(); - } - if(this.list){ - this.list.dom.innerHTML = ''; - } - - if(this.store){ - this.store.un('beforeload', this.onBeforeLoad, this); - this.store.un('load', this.onLoad, this); - this.store.un('loadexception', this.onLoadException, this); - } - Roo.bootstrap.ComboBox.superclass.onDestroy.call(this); - }, - - // private - fireKey : function(e){ - if(e.isNavKeyPress() && !this.list.isVisible()){ - this.fireEvent("specialkey", this, e); - } - }, - - // private - onResize: function(w, h) - { - - -// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments); -// -// if(typeof w != 'number'){ -// // we do not handle it!?!? -// return; -// } -// var tw = this.trigger.getWidth(); -// // tw += this.addicon ? this.addicon.getWidth() : 0; -// // tw += this.editicon ? this.editicon.getWidth() : 0; -// var x = w - tw; -// this.inputEl().setWidth( this.adjustWidth('input', x)); -// -// //this.trigger.setStyle('left', x+'px'); -// -// if(this.list && this.listWidth === undefined){ -// var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth); -// this.list.setWidth(lw); -// this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); -// } - - - - }, - - /** - * Allow or prevent the user from directly editing the field text. If false is passed, - * the user will only be able to select from the items defined in the dropdown list. This method - * is the runtime equivalent of setting the 'editable' config option at config time. - * @param {Boolean} value True to allow the user to directly edit the field text - */ - setEditable : function(value){ - if(value == this.editable){ - return; - } - this.editable = value; - if(!value){ - this.inputEl().dom.setAttribute('readOnly', true); - this.inputEl().on('mousedown', this.onTriggerClick, this); - this.inputEl().addClass('x-combo-noedit'); - }else{ - this.inputEl().dom.removeAttribute('readOnly'); - this.inputEl().un('mousedown', this.onTriggerClick, this); - this.inputEl().removeClass('x-combo-noedit'); - } - }, - - // private - - onBeforeLoad : function(combo,opts){ - if(!this.hasFocus){ - return; - } - if (!opts.add) { - this.list.dom.innerHTML = '
  • '+(this.loadingText||'loading')+'
    • ' ; - } - this.restrictHeight(); - this.selectedIndex = -1; - }, - - // private - onLoad : function(){ - - this.hasQuery = false; - - if(!this.hasFocus){ - return; - } - - if(typeof(this.loading) !== 'undefined' && this.loading !== null){ - this.loading.hide(); - } - - if(this.store.getCount() > 0){ - - this.expand(); - this.restrictHeight(); - if(this.lastQuery == this.allQuery){ - if(this.editable && !this.tickable){ - this.inputEl().dom.select(); - } - - if( - !this.selectByValue(this.value, true) && - this.autoFocus && - ( - !this.store.lastOptions || - typeof(this.store.lastOptions.add) == 'undefined' || - this.store.lastOptions.add != true - ) - ){ - this.select(0, true); - } - }else{ - if(this.autoFocus){ - this.selectNext(); - } - if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){ - this.taTask.delay(this.typeAheadDelay); - } - } - }else{ - this.onEmptyResults(); - } - - //this.el.focus(); - }, - // private - onLoadException : function() - { - this.hasQuery = false; - - if(typeof(this.loading) !== 'undefined' && this.loading !== null){ - this.loading.hide(); - } - - if(this.tickable && this.editable){ - return; - } - - this.collapse(); - // only causes errors at present - //Roo.log(this.store.reader.jsonData); - //if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') { - // fixme - //Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg); - //} - - - }, - // private - onTypeAhead : function(){ - if(this.store.getCount() > 0){ - var r = this.store.getAt(0); - var newValue = r.data[this.displayField]; - var len = newValue.length; - var selStart = this.getRawValue().length; - - if(selStart != len){ - this.setRawValue(newValue); - this.selectText(selStart, newValue.length); - } - } - }, - - // private - onSelect : function(record, index){ - - if(this.fireEvent('beforeselect', this, record, index) !== false){ - - this.setFromData(index > -1 ? record.data : false); - - this.collapse(); - this.fireEvent('select', this, record, index); - } - }, - - /** - * Returns the currently selected field value or empty string if no value is set. - * @return {String} value The selected value - */ - getValue : function() - { - if(Roo.isIOS && this.useNativeIOS){ - return this.ios_options[this.inputEl().dom.selectedIndex].data[this.valueField]; - } - - if(this.multiple){ - return (this.hiddenField) ? this.hiddenField.dom.value : this.value; - } - - if(this.valueField){ - return typeof this.value != 'undefined' ? this.value : ''; - }else{ - return Roo.bootstrap.ComboBox.superclass.getValue.call(this); - } - }, - - getRawValue : function() - { - if(Roo.isIOS && this.useNativeIOS){ - return this.ios_options[this.inputEl().dom.selectedIndex].data[this.displayField]; - } - - var v = this.inputEl().getValue(); - - return v; - }, - - /** - * Clears any text/value currently set in the field - */ - clearValue : function(){ - - if(this.hiddenField){ - this.hiddenField.dom.value = ''; - } - this.value = ''; - this.setRawValue(''); - this.lastSelectionText = ''; - this.lastData = false; - - var close = this.closeTriggerEl(); - - if(close){ - close.hide(); - } - - this.validate(); - - }, - - /** - * Sets the specified value into the field. If the value finds a match, the corresponding record text - * will be displayed in the field. If the value does not match the data value of an existing item, - * and the valueNotFoundText config option is defined, it will be displayed as the default field text. - * Otherwise the field will be blank (although the value will still be set). - * @param {String} value The value to match - */ - setValue : function(v) - { - if(Roo.isIOS && this.useNativeIOS){ - this.setIOSValue(v); - return; - } - - if(this.multiple){ - this.syncValue(); - return; - } - - var text = v; - if(this.valueField){ - var r = this.findRecord(this.valueField, v); - if(r){ - text = r.data[this.displayField]; - }else if(this.valueNotFoundText !== undefined){ - text = this.valueNotFoundText; - } - } - this.lastSelectionText = text; - if(this.hiddenField){ - this.hiddenField.dom.value = v; - } - Roo.bootstrap.ComboBox.superclass.setValue.call(this, text); - this.value = v; - - var close = this.closeTriggerEl(); - - if(close){ - (v && (v.length || v * 1 > 0)) ? close.show() : close.hide(); - } - - this.validate(); - }, - /** - * @property {Object} the last set data for the element - */ - - lastData : false, - /** - * Sets the value of the field based on a object which is related to the record format for the store. - * @param {Object} value the value to set as. or false on reset? - */ - setFromData : function(o){ - - if(this.multiple){ - this.addItem(o); - return; - } - - var dv = ''; // display value - var vv = ''; // value value.. - this.lastData = o; - if (this.displayField) { - dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField]; - } else { - // this is an error condition!!! - Roo.log('no displayField value set for '+ (this.name ? this.name : this.id)); - } - - if(this.valueField){ - vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField]; - } - - var close = this.closeTriggerEl(); - - if(close){ - if(dv.length || vv * 1 > 0){ - close.show() ; - this.blockFocus=true; - } else { - close.hide(); - } - } - - if(this.hiddenField){ - this.hiddenField.dom.value = vv; - - this.lastSelectionText = dv; - Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv); - this.value = vv; - return; - } - // no hidden field.. - we store the value in 'value', but still display - // display field!!!! - this.lastSelectionText = dv; - Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv); - this.value = vv; - - - - }, - // private - reset : function(){ - // overridden so that last data is reset.. - - if(this.multiple){ - this.clearItem(); - return; - } - - this.setValue(this.originalValue); - //this.clearInvalid(); - this.lastData = false; - if (this.view) { - this.view.clearSelections(); - } - - this.validate(); - }, - // private - findRecord : function(prop, value){ - var record; - if(this.store.getCount() > 0){ - this.store.each(function(r){ - if(r.data[prop] == value){ - record = r; - return false; - } - return true; - }); - } - return record; - }, - - getName: function() - { - // returns hidden if it's set.. - if (!this.rendered) {return ''}; - return !this.hiddenName && this.inputEl().dom.name ? this.inputEl().dom.name : (this.hiddenName || ''); - - }, - // private - onViewMove : function(e, t){ - this.inKeyMode = false; - }, - - // private - onViewOver : function(e, t){ - if(this.inKeyMode){ // prevent key nav and mouse over conflicts - return; - } - var item = this.view.findItemFromChild(t); - - if(item){ - var index = this.view.indexOf(item); - this.select(index, false); - } - }, - - // private - onViewClick : function(view, doFocus, el, e) - { - var index = this.view.getSelectedIndexes()[0]; - - var r = this.store.getAt(index); - - if(this.tickable){ - - if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){ - return; - } - - var rm = false; - var _this = this; - - Roo.each(this.tickItems, function(v,k){ - - if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){ - Roo.log(v); - _this.tickItems.splice(k, 1); - - if(typeof(e) == 'undefined' && view == false){ - Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false; - } - - rm = true; - return; - } - }); - - if(rm){ - return; - } - - if(this.fireEvent('tick', this, r, index, Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked) !== false){ - this.tickItems.push(r.data); - } - - if(typeof(e) == 'undefined' && view == false){ - Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true; - } - - return; - } - - if(r){ - this.onSelect(r, index); - } - if(doFocus !== false && !this.blockFocus){ - this.inputEl().focus(); - } - }, - - // private - restrictHeight : function(){ - //this.innerList.dom.style.height = ''; - //var inner = this.innerList.dom; - //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight); - //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight); - //this.list.beginUpdate(); - //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight); - this.list.alignTo(this.inputEl(), this.listAlign); - this.list.alignTo(this.inputEl(), this.listAlign); - //this.list.endUpdate(); - }, - - // private - onEmptyResults : function(){ - - if(this.tickable && this.editable){ - this.hasFocus = false; - this.restrictHeight(); - return; - } - - this.collapse(); - }, - - /** - * Returns true if the dropdown list is expanded, else false. - */ - isExpanded : function(){ - return this.list.isVisible(); - }, - - /** - * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. - * The store must be loaded and the list expanded for this function to work, otherwise use setValue. - * @param {String} value The data value of the item to select - * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the - * selected item if it is not currently in view (defaults to true) - * @return {Boolean} True if the value matched an item in the list, else false - */ - selectByValue : function(v, scrollIntoView){ - if(v !== undefined && v !== null){ - var r = this.findRecord(this.valueField || this.displayField, v); - if(r){ - this.select(this.store.indexOf(r), scrollIntoView); - return true; - } - } - return false; - }, - - /** - * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire. - * The store must be loaded and the list expanded for this function to work, otherwise use setValue. - * @param {Number} index The zero-based index of the list item to select - * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the - * selected item if it is not currently in view (defaults to true) - */ - select : function(index, scrollIntoView){ - this.selectedIndex = index; - this.view.select(index); - if(scrollIntoView !== false){ - var el = this.view.getNode(index); - /* - * el && !this.multiple && !this.tickable // not sure why we disable multiple before.. - */ - if(el){ - this.list.scrollChildIntoView(el, false); - } - } - }, - - // private - selectNext : function(){ - var ct = this.store.getCount(); - if(ct > 0){ - if(this.selectedIndex == -1){ - this.select(0); - }else if(this.selectedIndex < ct-1){ - this.select(this.selectedIndex+1); - } - } - }, - - // private - selectPrev : function(){ - var ct = this.store.getCount(); - if(ct > 0){ - if(this.selectedIndex == -1){ - this.select(0); - }else if(this.selectedIndex != 0){ - this.select(this.selectedIndex-1); - } - } - }, - - // private - onKeyUp : function(e){ - if(this.editable !== false && !e.isSpecialKey()){ - this.lastKey = e.getKey(); - this.dqTask.delay(this.queryDelay); - } - }, - - // private - validateBlur : function(){ - return !this.list || !this.list.isVisible(); - }, - - // private - initQuery : function(){ - - var v = this.getRawValue(); - - if(this.tickable && this.editable){ - v = this.tickableInputEl().getValue(); - } - - this.doQuery(v); - }, - - // private - doForce : function(){ - if(this.inputEl().dom.value.length > 0){ - this.inputEl().dom.value = - this.lastSelectionText === undefined ? '' : this.lastSelectionText; - - } - }, - - /** - * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the - * query allowing the query action to be canceled if needed. - * @param {String} query The SQL query to execute - * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters - * in the field than the minimum specified by the minChars config option. It also clears any filter previously - * saved in the current store (defaults to false) - */ - doQuery : function(q, forceAll){ - - if(q === undefined || q === null){ - q = ''; - } - var qe = { - query: q, - forceAll: forceAll, - combo: this, - cancel:false - }; - if(this.fireEvent('beforequery', qe)===false || qe.cancel){ - return false; - } - q = qe.query; - - forceAll = qe.forceAll; - if(forceAll === true || (q.length >= this.minChars)){ - - this.hasQuery = true; - - if(this.lastQuery != q || this.alwaysQuery){ - this.lastQuery = q; - if(this.mode == 'local'){ - this.selectedIndex = -1; - if(forceAll){ - this.store.clearFilter(); - }else{ - - if(this.specialFilter){ - this.fireEvent('specialfilter', this); - this.onLoad(); - return; - } - - this.store.filter(this.displayField, q); - } - - this.store.fireEvent("datachanged", this.store); - - this.onLoad(); - - - }else{ - - this.store.baseParams[this.queryParam] = q; - - var options = {params : this.getParams(q)}; - - if(this.loadNext){ - options.add = true; - options.params.start = this.page * this.pageSize; - } - - this.store.load(options); - - /* - * this code will make the page width larger, at the beginning, the list not align correctly, - * we should expand the list on onLoad - * so command out it - */ -// this.expand(); - } - }else{ - this.selectedIndex = -1; - this.onLoad(); - } - } - - this.loadNext = false; - }, - - // private - getParams : function(q){ - var p = {}; - //p[this.queryParam] = q; - - if(this.pageSize){ - p.start = 0; - p.limit = this.pageSize; - } - return p; - }, - - /** - * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion. - */ - collapse : function(){ - if(!this.isExpanded()){ - return; - } - - this.list.hide(); - - this.hasFocus = false; - - if(this.tickable){ - this.okBtn.hide(); - this.cancelBtn.hide(); - this.trigger.show(); - - if(this.editable){ - this.tickableInputEl().dom.value = ''; - this.tickableInputEl().blur(); - } - - } - - Roo.get(document).un('mousedown', this.collapseIf, this); - Roo.get(document).un('mousewheel', this.collapseIf, this); - if (!this.editable) { - Roo.get(document).un('keydown', this.listKeyPress, this); - } - this.fireEvent('collapse', this); - - this.validate(); - }, - - // private - collapseIf : function(e){ - var in_combo = e.within(this.el); - var in_list = e.within(this.list); - var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false; - - if (in_combo || in_list || is_list) { - //e.stopPropagation(); - return; - } - - if(this.tickable){ - this.onTickableFooterButtonClick(e, false, false); - } - - this.collapse(); - - }, - - /** - * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion. - */ - expand : function(){ - - if(this.isExpanded() || !this.hasFocus){ - return; - } - - var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth); - this.list.setWidth(lw); - - Roo.log('expand'); - - this.list.show(); - - this.restrictHeight(); - - if(this.tickable){ - - this.tickItems = Roo.apply([], this.item); - - this.okBtn.show(); - this.cancelBtn.show(); - this.trigger.hide(); - - if(this.editable){ - this.tickableInputEl().focus(); - } - - } - - Roo.get(document).on('mousedown', this.collapseIf, this); - Roo.get(document).on('mousewheel', this.collapseIf, this); - if (!this.editable) { - Roo.get(document).on('keydown', this.listKeyPress, this); - } - - this.fireEvent('expand', this); - }, - - // private - // Implements the default empty TriggerField.onTriggerClick function - onTriggerClick : function(e) - { - Roo.log('trigger click'); - - if(this.disabled || !this.triggerList){ - return; - } - - this.page = 0; - this.loadNext = false; - - if(this.isExpanded()){ - this.collapse(); - if (!this.blockFocus) { - this.inputEl().focus(); - } - - }else { - this.hasFocus = true; - if(this.triggerAction == 'all') { - this.doQuery(this.allQuery, true); - } else { - this.doQuery(this.getRawValue()); - } - if (!this.blockFocus) { - this.inputEl().focus(); - } - } - }, - - onTickableTriggerClick : function(e) - { - if(this.disabled){ - return; - } - - this.page = 0; - this.loadNext = false; - this.hasFocus = true; - - if(this.triggerAction == 'all') { - this.doQuery(this.allQuery, true); - } else { - this.doQuery(this.getRawValue()); - } - }, - - onSearchFieldClick : function(e) - { - if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){ - this.onTickableFooterButtonClick(e, false, false); - return; - } - - if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){ - return; - } - - this.page = 0; - this.loadNext = false; - this.hasFocus = true; - - if(this.triggerAction == 'all') { - this.doQuery(this.allQuery, true); - } else { - this.doQuery(this.getRawValue()); - } - }, - - listKeyPress : function(e) - { - //Roo.log('listkeypress'); - // scroll to first matching element based on key pres.. - if (e.isSpecialKey()) { - return false; - } - var k = String.fromCharCode(e.getKey()).toUpperCase(); - //Roo.log(k); - var match = false; - var csel = this.view.getSelectedNodes(); - var cselitem = false; - if (csel.length) { - var ix = this.view.indexOf(csel[0]); - cselitem = this.store.getAt(ix); - if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) { - cselitem = false; - } - - } - - this.store.each(function(v) { - if (cselitem) { - // start at existing selection. - if (cselitem.id == v.id) { - cselitem = false; - } - return true; - } - - if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) { - match = this.store.indexOf(v); - return false; - } - return true; - }, this); - - if (match === false) { - return true; // no more action? - } - // scroll to? - this.view.select(match); - var sn = Roo.get(this.view.getSelectedNodes()[0]); - sn.scrollIntoView(sn.dom.parentNode, false); - }, - - onViewScroll : function(e, t){ - - 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){ - return; - } - - this.hasQuery = true; - - this.loading = this.list.select('.loading', true).first(); - - if(this.loading === null){ - this.list.createChild({ - tag: 'div', - cls: 'loading roo-select2-more-results roo-select2-active', - html: 'Loading more results...' - }); - - this.loading = this.list.select('.loading', true).first(); - - this.loading.setVisibilityMode(Roo.Element.DISPLAY); - - this.loading.hide(); - } - - this.loading.show(); - - var _combo = this; - - this.page++; - this.loadNext = true; - - (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500); - - return; - }, - - addItem : function(o) - { - var dv = ''; // display value - - if (this.displayField) { - dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField]; - } else { - // this is an error condition!!! - Roo.log('no displayField value set for '+ (this.name ? this.name : this.id)); - } - - if(!dv.length){ - return; - } - - var choice = this.choices.createChild({ - tag: 'li', - cls: 'roo-select2-search-choice', - cn: [ - { - tag: 'div', - html: dv - }, - { - tag: 'a', - href: '#', - cls: 'roo-select2-search-choice-close fa fa-times', - tabindex: '-1' - } - ] - - }, this.searchField); - - var close = choice.select('a.roo-select2-search-choice-close', true).first(); - - close.on('click', this.onRemoveItem, this, { item : choice, data : o} ); - - this.item.push(o); - - this.lastData = o; - - this.syncValue(); - - this.inputEl().dom.value = ''; - - this.validate(); - }, - - onRemoveItem : function(e, _self, o) - { - e.preventDefault(); - - this.lastItem = Roo.apply([], this.item); - - var index = this.item.indexOf(o.data) * 1; - - if( index < 0){ - Roo.log('not this item?!'); - return; - } - - this.item.splice(index, 1); - o.item.remove(); - - this.syncValue(); - - this.fireEvent('remove', this, e); - - this.validate(); - - }, - - syncValue : function() - { - if(!this.item.length){ - this.clearValue(); - return; - } - - var value = []; - var _this = this; - Roo.each(this.item, function(i){ - if(_this.valueField){ - value.push(i[_this.valueField]); - return; - } - - value.push(i); - }); - - this.value = value.join(','); - - if(this.hiddenField){ - this.hiddenField.dom.value = this.value; - } - - this.store.fireEvent("datachanged", this.store); - - this.validate(); - }, - - clearItem : function() - { - if(!this.multiple){ - return; - } - - this.item = []; - - Roo.each(this.choices.select('>li.roo-select2-search-choice', true).elements, function(c){ - c.remove(); - }); - - this.syncValue(); - - this.validate(); - - if(this.tickable && !Roo.isTouch){ - this.view.refresh(); - } - }, - - inputEl: function () - { - if(Roo.isIOS && this.useNativeIOS){ - return this.el.select('select.roo-ios-select', true).first(); - } - - if(Roo.isTouch && this.mobileTouchView){ - return this.el.select('input.form-control',true).first(); - } - - if(this.tickable){ - return this.searchField; - } - - return this.el.select('input.form-control',true).first(); - }, - - onTickableFooterButtonClick : function(e, btn, el) - { - e.preventDefault(); - - this.lastItem = Roo.apply([], this.item); - - if(btn && btn.name == 'cancel'){ - this.tickItems = Roo.apply([], this.item); - this.collapse(); - return; - } - - this.clearItem(); - - var _this = this; - - Roo.each(this.tickItems, function(o){ - _this.addItem(o); - }); - - this.collapse(); - - }, - - validate : function() - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - var v = this.getRawValue(); - - if(this.multiple){ - v = this.getValue(); - } - - if(this.disabled || this.allowBlank || v.length){ - this.markValid(); - return true; - } - - this.markInvalid(); - return false; - }, - - tickableInputEl : function() - { - if(!this.tickable || !this.editable){ - return this.inputEl(); - } - - return this.inputEl().select('.roo-select2-search-field-input', true).first(); - }, - - - getAutoCreateTouchView : function() - { - var id = Roo.id(); - - var cfg = { - cls: 'form-group' //input-group - }; - - var input = { - tag: 'input', - id : id, - type : this.inputType, - cls : 'form-control x-combo-noedit', - autocomplete: 'new-password', - placeholder : this.placeholder || '', - readonly : true - }; - - if (this.name) { - input.name = this.name; - } - - if (this.size) { - input.cls += ' input-' + this.size; - } - - if (this.disabled) { - input.disabled = true; - } - - var inputblock = { - cls : 'roo-combobox-wrap', - cn : [ - input - ] - }; - - if(this.before){ - inputblock.cls += ' input-group'; - - inputblock.cn.unshift({ - tag :'span', - cls : 'input-group-addon input-group-prepend input-group-text', - html : this.before - }); - } - - if(this.removable && !this.multiple){ - inputblock.cls += ' roo-removable'; - - inputblock.cn.push({ - tag: 'button', - html : 'x', - cls : 'roo-combo-removable-btn close' - }); - } - - if(this.hasFeedback && !this.allowBlank){ - - inputblock.cls += ' has-feedback'; - - inputblock.cn.push({ - tag: 'span', - cls: 'glyphicon form-control-feedback' - }); - - } - - if (this.after) { - - inputblock.cls += (this.before) ? '' : ' input-group'; - - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon input-group-append input-group-text', - html : this.after - }); - } - - - var ibwrap = inputblock; - - if(this.multiple){ - ibwrap = { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ - - inputblock - ] - } - ] - }; - - - } - - var combobox = { - cls: 'roo-select2-container input-group roo-touchview-combobox ', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - ibwrap - ] - }; - - if(!this.multiple && this.showToggleBtn){ - - var caret = { - cls: 'caret' - }; - - if (this.caret != false) { - caret = { - tag: 'i', - cls: 'fa fa-' + this.caret - }; - - } - - combobox.cn.push({ - tag :'span', - cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', - cn : [ - Roo.bootstrap.version == 3 ? caret : '', - { - tag: 'span', - cls: 'combobox-clear', - cn : [ - { - tag : 'i', - cls: 'icon-remove' - } - ] - } - ] - - }) - } - - if(this.multiple){ - combobox.cls += ' roo-select2-container-multi'; - } - - var required = this.allowBlank ? { - tag : 'i', - style: 'display: none' - } : { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }; - - var align = this.labelAlign || this.parentLabelAlign(); - - if (align ==='left' && this.fieldLabel.length) { - - cfg.cn = [ - required, - { - tag: 'label', - cls : 'control-label col-form-label', - html : this.fieldLabel - - }, - { - cls : 'roo-combobox-wrap ', - cn: [ - combobox - ] - } - ]; - - var labelCfg = cfg.cn[1]; - var contentCfg = cfg.cn[2]; - - - if(this.indicatorpos == 'right'){ - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label col-form-label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - }, - required - ] - }, - { - cls : "roo-combobox-wrap ", - cn: [ - combobox - ] - } - - ]; - - labelCfg = cfg.cn[0]; - contentCfg = cfg.cn[1]; - } - - - - if(this.labelWidth > 12){ - labelCfg.style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - labelCfg.cls += ' col-lg-' + this.labellg; - contentCfg.cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - labelCfg.cls += ' col-md-' + this.labelmd; - contentCfg.cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - labelCfg.cls += ' col-sm-' + this.labelsm; - contentCfg.cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - labelCfg.cls += ' col-xs-' + this.labelxs; - contentCfg.cls += ' col-xs-' + (12 - this.labelxs); - } - - - } else if ( this.fieldLabel.length) { - cfg.cn = [ - required, - { - tag: 'label', - cls : 'control-label', - html : this.fieldLabel - - }, - { - cls : '', - cn: [ - combobox - ] - } - ]; - - if(this.indicatorpos == 'right'){ - cfg.cn = [ - { - tag: 'label', - cls : 'control-label', - html : this.fieldLabel, - cn : [ - required - ] - }, - { - cls : '', - cn: [ - combobox - ] - } - ]; - } - } else { - cfg.cn = combobox; - } - - - var settings = this; - - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - return cfg; - }, - - initTouchView : function() - { - this.renderTouchView(); - - this.touchViewEl.on('scroll', function(){ - this.el.dom.scrollTop = 0; - }, this); - - this.originalValue = this.getValue(); - - this.triggerEl = this.el.select('span.dropdown-toggle',true).first(); - - this.inputEl().on("click", this.showTouchView, this); - if (this.triggerEl) { - this.triggerEl.on("click", this.showTouchView, this); - } - - - this.touchViewFooterEl.select('.roo-touch-view-cancel', true).first().on('click', this.hideTouchView, this); - this.touchViewFooterEl.select('.roo-touch-view-ok', true).first().on('click', this.setTouchViewValue, this); - - this.maskEl = new Roo.LoadMask(this.touchViewEl, { store : this.store, msgCls: 'roo-el-mask-msg' }); - - this.store.on('beforeload', this.onTouchViewBeforeLoad, this); - this.store.on('load', this.onTouchViewLoad, this); - this.store.on('loadexception', this.onTouchViewLoadException, this); - - if(this.hiddenName){ - - this.hiddenField = this.el.select('input.form-hidden-field',true).first(); - - this.hiddenField.dom.value = - this.hiddenValue !== undefined ? this.hiddenValue : - this.value !== undefined ? this.value : ''; - - this.el.dom.removeAttribute('name'); - this.hiddenField.dom.setAttribute('name', this.hiddenName); - } - - if(this.multiple){ - this.choices = this.el.select('ul.roo-select2-choices', true).first(); - this.searchField = this.el.select('ul li.roo-select2-search-field', true).first(); - } - - if(this.removable && !this.multiple){ - var close = this.closeTriggerEl(); - if(close){ - close.setVisibilityMode(Roo.Element.DISPLAY).hide(); - close.on('click', this.removeBtnClick, this, close); - } - } - /* - * fix the bug in Safari iOS8 - */ - this.inputEl().on("focus", function(e){ - document.activeElement.blur(); - }, this); - - this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true); - - return; - - - }, - - renderTouchView : function() - { - this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.ComboBox.touchViewTemplate); - this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first(); - this.touchViewHeaderEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.touchViewBodyEl = this.touchViewEl.select('.modal-body', true).first(); - this.touchViewBodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - this.touchViewBodyEl.setStyle('overflow', 'auto'); - - this.touchViewListGroup = this.touchViewBodyEl.select('.list-group', true).first(); - this.touchViewListGroup.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.touchViewFooterEl = this.touchViewEl.select('.modal-footer', true).first(); - this.touchViewFooterEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - }, - - showTouchView : function() - { - if(this.disabled){ - return; - } - - this.touchViewHeaderEl.hide(); - - if(this.modalTitle.length){ - this.touchViewHeaderEl.dom.innerHTML = this.modalTitle; - this.touchViewHeaderEl.show(); - } - - this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++); - this.touchViewEl.show(); - - this.touchViewEl.select('.modal-dialog', true).first().setStyle({ margin : '0px', width : '100%'}); - - //this.touchViewEl.select('.modal-dialog > .modal-content', true).first().setSize( - // Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true)); - - var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb'); - - if(this.modalTitle.length){ - bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight(); - } - - this.touchViewBodyEl.setHeight(bodyHeight); - - if(this.animate){ - var _this = this; - (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50); - }else{ - this.touchViewEl.addClass(['in','show']); - } - - if(this._touchViewMask){ - Roo.get(document.body).addClass("x-body-masked"); - this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true)); - this._touchViewMask.setStyle('z-index', 10000); - this._touchViewMask.addClass('show'); - } - - this.doTouchViewQuery(); - - }, - - hideTouchView : function() - { - this.touchViewEl.removeClass(['in','show']); - - if(this.animate){ - var _this = this; - (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150); - }else{ - this.touchViewEl.setStyle('display', 'none'); - } - - if(this._touchViewMask){ - this._touchViewMask.removeClass('show'); - Roo.get(document.body).removeClass("x-body-masked"); - } - }, - - setTouchViewValue : function() - { - if(this.multiple){ - this.clearItem(); - - var _this = this; - - Roo.each(this.tickItems, function(o){ - this.addItem(o); - }, this); - } - - this.hideTouchView(); - }, - - doTouchViewQuery : function() - { - var qe = { - query: '', - forceAll: true, - combo: this, - cancel:false - }; - - if(this.fireEvent('beforequery', qe) ===false || qe.cancel){ - return false; - } - - if(!this.alwaysQuery || this.mode == 'local'){ - this.onTouchViewLoad(); - return; - } - - this.store.load(); - }, - - onTouchViewBeforeLoad : function(combo,opts) - { - return; - }, - - // private - onTouchViewLoad : function() - { - if(this.store.getCount() < 1){ - this.onTouchViewEmptyResults(); - return; - } - - this.clearTouchView(); - - var rawValue = this.getRawValue(); - - var template = (this.multiple) ? Roo.bootstrap.ComboBox.listItemCheckbox : Roo.bootstrap.ComboBox.listItemRadio; - - this.tickItems = []; - - this.store.data.each(function(d, rowIndex){ - var row = this.touchViewListGroup.createChild(template); - - if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){ - row.addClass(d.data.cls); - } - - if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){ - var cfg = { - data : d.data, - html : d.data[this.displayField] - }; - - if(this.fireEvent('touchviewdisplay', this, cfg) !== false){ - row.select('.roo-combobox-list-group-item-value', true).first().dom.innerHTML = cfg.html; - } - } - row.removeClass('selected'); - if(!this.multiple && this.valueField && - typeof(d.data[this.valueField]) != 'undefined' && d.data[this.valueField] == this.getValue()) - { - // radio buttons.. - row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true); - row.addClass('selected'); - } - - if(this.multiple && this.valueField && - typeof(d.data[this.valueField]) != 'undefined' && this.getValue().indexOf(d.data[this.valueField]) != -1) - { - - // checkboxes... - row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true); - this.tickItems.push(d.data); - } - - row.on('click', this.onTouchViewClick, this, {row : row, rowIndex : rowIndex}); - - }, this); - - var firstChecked = this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).first(); - - var bodyHeight = Roo.lib.Dom.getViewHeight() - this.touchViewFooterEl.getHeight() + this.touchViewBodyEl.getPadding('tb'); - - if(this.modalTitle.length){ - bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight(); - } - - var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2; - - if(this.mobile_restrict_height && listHeight < bodyHeight){ - this.touchViewBodyEl.setHeight(listHeight); - } - - var _this = this; - - if(firstChecked && listHeight > bodyHeight){ - (function() { firstChecked.findParent('li').scrollIntoView(_this.touchViewListGroup.dom); }).defer(500); - } - - }, - - onTouchViewLoadException : function() - { - this.hideTouchView(); - }, - - onTouchViewEmptyResults : function() - { - this.clearTouchView(); - - this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult); - - this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText; - - }, - - clearTouchView : function() - { - this.touchViewListGroup.dom.innerHTML = ''; - }, - - onTouchViewClick : function(e, el, o) - { - e.preventDefault(); - - var row = o.row; - var rowIndex = o.rowIndex; - - var r = this.store.getAt(rowIndex); - - if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){ - - if(!this.multiple){ - Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){ - c.dom.removeAttribute('checked'); - }, this); - - row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true); - - this.setFromData(r.data); - - var close = this.closeTriggerEl(); - - if(close){ - close.show(); - } - - this.hideTouchView(); - - this.fireEvent('select', this, r, rowIndex); - - return; - } - - if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){ - row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked'); - this.tickItems.splice(this.tickItems.indexOf(r.data), 1); - return; - } - - row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true); - this.addItem(r.data); - this.tickItems.push(r.data); - } - }, - - getAutoCreateNativeIOS : function() - { - var cfg = { - cls: 'form-group' //input-group, - }; - - var combobox = { - tag: 'select', - cls : 'roo-ios-select' - }; - - if (this.name) { - combobox.name = this.name; - } - - if (this.disabled) { - combobox.disabled = true; - } - - var settings = this; - - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - cfg.cn = combobox; - - return cfg; - - }, - - initIOSView : function() - { - this.store.on('load', this.onIOSViewLoad, this); - - return; - }, - - onIOSViewLoad : function() - { - if(this.store.getCount() < 1){ - return; - } - - this.clearIOSView(); - - if(this.allowBlank) { - - var default_text = '-- SELECT --'; - - if(this.placeholder.length){ - default_text = this.placeholder; - } - - if(this.emptyTitle.length){ - default_text += ' - ' + this.emptyTitle + ' -'; - } - - var opt = this.inputEl().createChild({ - tag: 'option', - value : 0, - html : default_text - }); - - var o = {}; - o[this.valueField] = 0; - o[this.displayField] = default_text; - - this.ios_options.push({ - data : o, - el : opt - }); - - } - - this.store.data.each(function(d, rowIndex){ - - var html = ''; - - if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){ - html = d.data[this.displayField]; - } - - var value = ''; - - if(this.valueField && typeof(d.data[this.valueField]) != 'undefined'){ - value = d.data[this.valueField]; - } - - var option = { - tag: 'option', - value : value, - html : html - }; - - if(this.value == d.data[this.valueField]){ - option['selected'] = true; - } - - var opt = this.inputEl().createChild(option); - - this.ios_options.push({ - data : d.data, - el : opt - }); - - }, this); - - this.inputEl().on('change', function(){ - this.fireEvent('select', this); - }, this); - - }, - - clearIOSView: function() - { - this.inputEl().dom.innerHTML = ''; - - this.ios_options = []; - }, - - setIOSValue: function(v) - { - this.value = v; - - if(!this.ios_options){ - return; - } - - Roo.each(this.ios_options, function(opts){ - - opts.el.dom.removeAttribute('selected'); - - if(opts.data[this.valueField] != v){ - return; - } - - opts.el.dom.setAttribute('selected', true); - - }, this); - } - - /** - * @cfg {Boolean} grow - * @hide - */ - /** - * @cfg {Number} growMin - * @hide - */ - /** - * @cfg {Number} growMax - * @hide - */ - /** - * @hide - * @method autoSize - */ -}); - -Roo.apply(Roo.bootstrap.ComboBox, { - - header : { - tag: 'div', - cls: 'modal-header', - cn: [ - { - tag: 'h4', - cls: 'modal-title' - } - ] - }, - - body : { - tag: 'div', - cls: 'modal-body', - cn: [ - { - tag: 'ul', - cls: 'list-group' - } - ] - }, - - listItemRadio : { - tag: 'li', - cls: 'list-group-item', - cn: [ - { - tag: 'span', - cls: 'roo-combobox-list-group-item-value' - }, - { - tag: 'div', - cls: 'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info', - cn: [ - { - tag: 'input', - type: 'radio' - }, - { - tag: 'label' - } - ] - } - ] - }, - - listItemCheckbox : { - tag: 'li', - cls: 'list-group-item', - cn: [ - { - tag: 'span', - cls: 'roo-combobox-list-group-item-value' - }, - { - tag: 'div', - cls: 'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info', - cn: [ - { - tag: 'input', - type: 'checkbox' - }, - { - tag: 'label' - } - ] - } - ] - }, - - emptyResult : { - tag: 'div', - cls: 'alert alert-danger roo-combobox-touch-view-empty-result' - }, - - footer : { - tag: 'div', - cls: 'modal-footer', - cn: [ - { - tag: 'div', - cls: 'row', - cn: [ - { - tag: 'div', - cls: 'col-xs-6 text-left', - cn: { - tag: 'button', - cls: 'btn btn-danger roo-touch-view-cancel', - html: 'Cancel' - } - }, - { - tag: 'div', - cls: 'col-xs-6 text-right', - cn: { - tag: 'button', - cls: 'btn btn-success roo-touch-view-ok', - html: 'OK' - } - } - ] - } - ] - - } -}); - -Roo.apply(Roo.bootstrap.ComboBox, { - - touchViewTemplate : { - tag: 'div', - cls: 'modal fade roo-combobox-touch-view', - cn: [ - { - tag: 'div', - cls: 'modal-dialog', - style : 'position:fixed', // we have to fix position.... - cn: [ - { - tag: 'div', - cls: 'modal-content', - cn: [ - Roo.bootstrap.ComboBox.header, - Roo.bootstrap.ComboBox.body, - Roo.bootstrap.ComboBox.footer - ] - } - ] - } - ] - } -}); \ No newline at end of file diff --git a/Roo/bootstrap/DateField.js b/Roo/bootstrap/DateField.js deleted file mode 100644 index ba18ac35df..0000000000 --- a/Roo/bootstrap/DateField.js +++ /dev/null @@ -1,1144 +0,0 @@ -/* - * - LGPL - * - * DateField - * - */ - -/** - * @class Roo.bootstrap.DateField - * @extends Roo.bootstrap.Input - * Bootstrap DateField class - * @cfg {Number} weekStart default 0 - * @cfg {String} viewMode default empty, (months|years) - * @cfg {String} minViewMode default empty, (months|years) - * @cfg {Number} startDate default -Infinity - * @cfg {Number} endDate default Infinity - * @cfg {Boolean} todayHighlight default false - * @cfg {Boolean} todayBtn default false - * @cfg {Boolean} calendarWeeks default false - * @cfg {Object} daysOfWeekDisabled default empty - * @cfg {Boolean} singleMode default false (true | false) - * - * @cfg {Boolean} keyboardNavigation default true - * @cfg {String} language default en - * - * @constructor - * Create a new DateField - * @param {Object} config The config object - */ - -Roo.bootstrap.DateField = function(config){ - Roo.bootstrap.DateField.superclass.constructor.call(this, config); - this.addEvents({ - /** - * @event show - * Fires when this field show. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - show : true, - /** - * @event show - * Fires when this field hide. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - hide : true, - /** - * @event select - * Fires when select a date. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - select : true, - /** - * @event beforeselect - * Fires when before select a date. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - beforeselect : true - }); -}; - -Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { - - /** - * @cfg {String} format - * The default date format string which can be overriden for localization support. The format must be - * valid according to {@link Date#parseDate} (defaults to 'm/d/y'). - */ - format : "m/d/y", - /** - * @cfg {String} altFormats - * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined - * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'). - */ - altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d", - - weekStart : 0, - - viewMode : '', - - minViewMode : '', - - todayHighlight : false, - - todayBtn: false, - - language: 'en', - - keyboardNavigation: true, - - calendarWeeks: false, - - startDate: -Infinity, - - endDate: Infinity, - - daysOfWeekDisabled: [], - - _events: [], - - singleMode : false, - - UTCDate: function() - { - return new Date(Date.UTC.apply(Date, arguments)); - }, - - UTCToday: function() - { - var today = new Date(); - return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()); - }, - - getDate: function() { - var d = this.getUTCDate(); - return new Date(d.getTime() + (d.getTimezoneOffset()*60000)); - }, - - getUTCDate: function() { - return this.date; - }, - - setDate: function(d) { - this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000))); - }, - - setUTCDate: function(d) { - this.date = d; - this.setValue(this.formatDate(this.date)); - }, - - onRender: function(ct, position) - { - - Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position); - - this.language = this.language || 'en'; - this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0]; - this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en"; - - this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false; - this.format = this.format || 'm/d/y'; - this.isInline = false; - this.isInput = true; - this.component = this.el.select('.add-on', true).first() || false; - this.component = (this.component && this.component.length === 0) ? false : this.component; - this.hasInput = this.component && this.inputEl().length; - - if (typeof(this.minViewMode === 'string')) { - switch (this.minViewMode) { - case 'months': - this.minViewMode = 1; - break; - case 'years': - this.minViewMode = 2; - break; - default: - this.minViewMode = 0; - break; - } - } - - if (typeof(this.viewMode === 'string')) { - switch (this.viewMode) { - case 'months': - this.viewMode = 1; - break; - case 'years': - this.viewMode = 2; - break; - default: - this.viewMode = 0; - break; - } - } - - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template); - -// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template); - - this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.picker().on('mousedown', this.onMousedown, this); - this.picker().on('click', this.onClick, this); - - this.picker().addClass('datepicker-dropdown'); - - this.startViewMode = this.viewMode; - - if(this.singleMode){ - Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){ - v.setVisibilityMode(Roo.Element.DISPLAY); - v.hide(); - }); - - Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){ - v.setStyle('width', '189px'); - }); - } - - Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){ - if(!this.calendarWeeks){ - v.remove(); - return; - } - - v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today; - v.attr('colspan', function(i, val){ - return parseInt(val) + 1; - }); - }); - - - this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1; - - this.setStartDate(this.startDate); - this.setEndDate(this.endDate); - - this.setDaysOfWeekDisabled(this.daysOfWeekDisabled); - - this.fillDow(); - this.fillMonths(); - this.update(); - this.showMode(); - - if(this.isInline) { - this.showPopup(); - } - }, - - picker : function() - { - return this.pickerEl; -// return this.el.select('.datepicker', true).first(); - }, - - fillDow: function() - { - var dowCnt = this.weekStart; - - var dow = { - tag: 'tr', - cn: [ - - ] - }; - - if(this.calendarWeeks){ - dow.cn.push({ - tag: 'th', - cls: 'cw', - html: ' ' - }) - } - - while (dowCnt < this.weekStart + 7) { - dow.cn.push({ - tag: 'th', - cls: 'dow', - html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7] - }); - } - - this.picker().select('>.datepicker-days thead', true).first().createChild(dow); - }, - - fillMonths: function() - { - var i = 0; - var months = this.picker().select('>.datepicker-months td', true).first(); - - months.dom.innerHTML = ''; - - while (i < 12) { - var month = { - tag: 'span', - cls: 'month', - html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++] - }; - - months.createChild(month); - } - - }, - - update: function() - { - 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; - - if (this.date < this.startDate) { - this.viewDate = new Date(this.startDate); - } else if (this.date > this.endDate) { - this.viewDate = new Date(this.endDate); - } else { - this.viewDate = new Date(this.date); - } - - this.fill(); - }, - - fill: function() - { - var d = new Date(this.viewDate), - year = d.getUTCFullYear(), - month = d.getUTCMonth(), - startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity, - startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity, - endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity, - endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity, - currentDate = this.date && this.date.valueOf(), - today = this.UTCToday(); - - this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year; - -// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today; - -// this.picker.select('>tfoot th.today'). -// .text(dates[this.language].today) -// .toggle(this.todayBtn !== false); - - this.updateNavArrows(); - this.fillMonths(); - - var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0), - - day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth()); - - prevMonth.setUTCDate(day); - - prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7); - - var nextMonth = new Date(prevMonth); - - nextMonth.setUTCDate(nextMonth.getUTCDate() + 42); - - nextMonth = nextMonth.valueOf(); - - var fillMonths = false; - - this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = ''; - - while(prevMonth.valueOf() <= nextMonth) { - var clsName = ''; - - if (prevMonth.getUTCDay() === this.weekStart) { - if(fillMonths){ - this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths); - } - - fillMonths = { - tag: 'tr', - cn: [] - }; - - if(this.calendarWeeks){ - // ISO 8601: First week contains first thursday. - // ISO also states week starts on Monday, but we can be more abstract here. - var - // Start of current week: based on weekstart/current date - ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5), - // Thursday of this week - th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5), - // First Thursday of year, year from thursday - yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5), - // Calendar week: ms between thursdays, div ms per day, div 7 days - calWeek = (th - yth) / 864e5 / 7 + 1; - - fillMonths.cn.push({ - tag: 'td', - cls: 'cw', - html: calWeek - }); - } - } - - if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) { - clsName += ' old'; - } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) { - clsName += ' new'; - } - if (this.todayHighlight && - prevMonth.getUTCFullYear() == today.getFullYear() && - prevMonth.getUTCMonth() == today.getMonth() && - prevMonth.getUTCDate() == today.getDate()) { - clsName += ' today'; - } - - if (currentDate && prevMonth.valueOf() === currentDate) { - clsName += ' active'; - } - - if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate || - this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) { - clsName += ' disabled'; - } - - fillMonths.cn.push({ - tag: 'td', - cls: 'day ' + clsName, - html: prevMonth.getDate() - }); - - prevMonth.setDate(prevMonth.getDate()+1); - } - - var currentYear = this.date && this.date.getUTCFullYear(); - var currentMonth = this.date && this.date.getUTCMonth(); - - this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year; - - Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){ - v.removeClass('active'); - - if(currentYear === year && k === currentMonth){ - v.addClass('active'); - } - - if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) { - v.addClass('disabled'); - } - - }); - - - year = parseInt(year/10, 10) * 10; - - this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9); - - this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = ''; - - year -= 1; - for (var i = -1; i < 11; i++) { - this.picker().select('>.datepicker-years tbody td',true).first().createChild({ - tag: 'span', - cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''), - html: year - }); - - year += 1; - } - }, - - showMode: function(dir) - { - if (dir) { - this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir)); - } - - Roo.each(this.picker().select('>div',true).elements, function(v){ - v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - v.hide(); - }); - this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show(); - }, - - place: function() - { - if(this.isInline) { - return; - } - - this.picker().removeClass(['bottom', 'top']); - - if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ - /* - * place to the top of element! - * - */ - - this.picker().addClass('top'); - this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft()); - - return; - } - - this.picker().addClass('bottom'); - - this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft()); - }, - - parseDate : function(value) - { - if(!value || value instanceof Date){ - return value; - } - var v = Date.parseDate(value, this.format); - if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) { - v = Date.parseDate(value, 'Y-m-d'); - } - if(!v && this.altFormats){ - if(!this.altFormatsArray){ - this.altFormatsArray = this.altFormats.split("|"); - } - for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){ - v = Date.parseDate(value, this.altFormatsArray[i]); - } - } - return v; - }, - - formatDate : function(date, fmt) - { - return (!date || !(date instanceof Date)) ? - date : date.dateFormat(fmt || this.format); - }, - - onFocus : function() - { - Roo.bootstrap.DateField.superclass.onFocus.call(this); - this.showPopup(); - }, - - onBlur : function() - { - Roo.bootstrap.DateField.superclass.onBlur.call(this); - - var d = this.inputEl().getValue(); - - this.setValue(d); - - this.hidePopup(); - }, - - showPopup : function() - { - this.picker().show(); - this.update(); - this.place(); - - this.fireEvent('showpopup', this, this.date); - }, - - hidePopup : function() - { - if(this.isInline) { - return; - } - this.picker().hide(); - this.viewMode = this.startViewMode; - this.showMode(); - - this.fireEvent('hidepopup', this, this.date); - - }, - - onMousedown: function(e) - { - e.stopPropagation(); - e.preventDefault(); - }, - - keyup: function(e) - { - Roo.bootstrap.DateField.superclass.keyup.call(this); - this.update(); - }, - - setValue: function(v) - { - if(this.fireEvent('beforeselect', this, v) !== false){ - var d = new Date(this.parseDate(v) ).clearTime(); - - if(isNaN(d.getTime())){ - this.date = this.viewDate = ''; - Roo.bootstrap.DateField.superclass.setValue.call(this, ''); - return; - } - - v = this.formatDate(d); - - Roo.bootstrap.DateField.superclass.setValue.call(this, v); - - this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000); - - this.update(); - - this.fireEvent('select', this, this.date); - } - }, - - getValue: function() - { - return this.formatDate(this.date); - }, - - fireKey: function(e) - { - if (!this.picker().isVisible()){ - if (e.keyCode == 27) { // allow escape to hide and re-show picker - this.showPopup(); - } - return; - } - - var dateChanged = false, - dir, day, month, - newDate, newViewDate; - - switch(e.keyCode){ - case 27: // escape - this.hidePopup(); - e.preventDefault(); - break; - case 37: // left - case 39: // right - if (!this.keyboardNavigation) { - break; - } - dir = e.keyCode == 37 ? -1 : 1; - - if (e.ctrlKey){ - newDate = this.moveYear(this.date, dir); - newViewDate = this.moveYear(this.viewDate, dir); - } else if (e.shiftKey){ - newDate = this.moveMonth(this.date, dir); - newViewDate = this.moveMonth(this.viewDate, dir); - } else { - newDate = new Date(this.date); - newDate.setUTCDate(this.date.getUTCDate() + dir); - newViewDate = new Date(this.viewDate); - newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir); - } - if (this.dateWithinRange(newDate)){ - this.date = newDate; - this.viewDate = newViewDate; - this.setValue(this.formatDate(this.date)); -// this.update(); - e.preventDefault(); - dateChanged = true; - } - break; - case 38: // up - case 40: // down - if (!this.keyboardNavigation) { - break; - } - dir = e.keyCode == 38 ? -1 : 1; - if (e.ctrlKey){ - newDate = this.moveYear(this.date, dir); - newViewDate = this.moveYear(this.viewDate, dir); - } else if (e.shiftKey){ - newDate = this.moveMonth(this.date, dir); - newViewDate = this.moveMonth(this.viewDate, dir); - } else { - newDate = new Date(this.date); - newDate.setUTCDate(this.date.getUTCDate() + dir * 7); - newViewDate = new Date(this.viewDate); - newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7); - } - if (this.dateWithinRange(newDate)){ - this.date = newDate; - this.viewDate = newViewDate; - this.setValue(this.formatDate(this.date)); -// this.update(); - e.preventDefault(); - dateChanged = true; - } - break; - case 13: // enter - this.setValue(this.formatDate(this.date)); - this.hidePopup(); - e.preventDefault(); - break; - case 9: // tab - this.setValue(this.formatDate(this.date)); - this.hidePopup(); - break; - case 16: // shift - case 17: // ctrl - case 18: // alt - break; - default : - this.hidePopup(); - - } - }, - - - onClick: function(e) - { - e.stopPropagation(); - e.preventDefault(); - - var target = e.getTarget(); - - if(target.nodeName.toLowerCase() === 'i'){ - target = Roo.get(target).dom.parentNode; - } - - var nodeName = target.nodeName; - var className = target.className; - var html = target.innerHTML; - //Roo.log(nodeName); - - switch(nodeName.toLowerCase()) { - case 'th': - switch(className) { - case 'switch': - this.showMode(1); - break; - case 'prev': - case 'next': - var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1); - switch(this.viewMode){ - case 0: - this.viewDate = this.moveMonth(this.viewDate, dir); - break; - case 1: - case 2: - this.viewDate = this.moveYear(this.viewDate, dir); - break; - } - this.fill(); - break; - case 'today': - var date = new Date(); - this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); -// this.fill() - this.setValue(this.formatDate(this.date)); - - this.hidePopup(); - break; - } - break; - case 'span': - if (className.indexOf('disabled') < 0) { - if (!this.viewDate) { - this.viewDate = new Date(); - } - this.viewDate.setUTCDate(1); - if (className.indexOf('month') > -1) { - this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html)); - } else { - var year = parseInt(html, 10) || 0; - this.viewDate.setUTCFullYear(year); - - } - - if(this.singleMode){ - this.setValue(this.formatDate(this.viewDate)); - this.hidePopup(); - return; - } - - this.showMode(-1); - this.fill(); - } - break; - - case 'td': - //Roo.log(className); - if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){ - var day = parseInt(html, 10) || 1; - var year = (this.viewDate || new Date()).getUTCFullYear(), - month = (this.viewDate || new Date()).getUTCMonth(); - - if (className.indexOf('old') > -1) { - if(month === 0 ){ - month = 11; - year -= 1; - }else{ - month -= 1; - } - } else if (className.indexOf('new') > -1) { - if (month == 11) { - month = 0; - year += 1; - } else { - month += 1; - } - } - //Roo.log([year,month,day]); - this.date = this.UTCDate(year, month, day,0,0,0,0); - this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0); -// this.fill(); - //Roo.log(this.formatDate(this.date)); - this.setValue(this.formatDate(this.date)); - this.hidePopup(); - } - break; - } - }, - - setStartDate: function(startDate) - { - this.startDate = startDate || -Infinity; - if (this.startDate !== -Infinity) { - this.startDate = this.parseDate(this.startDate); - } - this.update(); - this.updateNavArrows(); - }, - - setEndDate: function(endDate) - { - this.endDate = endDate || Infinity; - if (this.endDate !== Infinity) { - this.endDate = this.parseDate(this.endDate); - } - this.update(); - this.updateNavArrows(); - }, - - setDaysOfWeekDisabled: function(daysOfWeekDisabled) - { - this.daysOfWeekDisabled = daysOfWeekDisabled || []; - if (typeof(this.daysOfWeekDisabled) !== 'object') { - this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/); - } - this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) { - return parseInt(d, 10); - }); - this.update(); - this.updateNavArrows(); - }, - - updateNavArrows: function() - { - if(this.singleMode){ - return; - } - - var d = new Date(this.viewDate), - year = d.getUTCFullYear(), - month = d.getUTCMonth(); - - Roo.each(this.picker().select('.prev', true).elements, function(v){ - v.show(); - switch (this.viewMode) { - case 0: - - if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) { - v.hide(); - } - break; - case 1: - case 2: - if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) { - v.hide(); - } - break; - } - }); - - Roo.each(this.picker().select('.next', true).elements, function(v){ - v.show(); - switch (this.viewMode) { - case 0: - - if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) { - v.hide(); - } - break; - case 1: - case 2: - if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) { - v.hide(); - } - break; - } - }) - }, - - moveMonth: function(date, dir) - { - if (!dir) { - return date; - } - var new_date = new Date(date.valueOf()), - day = new_date.getUTCDate(), - month = new_date.getUTCMonth(), - mag = Math.abs(dir), - new_month, test; - dir = dir > 0 ? 1 : -1; - if (mag == 1){ - test = dir == -1 - // If going back one month, make sure month is not current month - // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02) - ? function(){ - return new_date.getUTCMonth() == month; - } - // If going forward one month, make sure month is as expected - // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02) - : function(){ - return new_date.getUTCMonth() != new_month; - }; - new_month = month + dir; - new_date.setUTCMonth(new_month); - // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11 - if (new_month < 0 || new_month > 11) { - new_month = (new_month + 12) % 12; - } - } else { - // For magnitudes >1, move one month at a time... - for (var i=0; i= this.startDate && date <= this.endDate; - }, - - - remove: function() - { - this.picker().remove(); - }, - - validateValue : function(value) - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - if(value.length < 1) { - if(this.allowBlank){ - return true; - } - return false; - } - - if(value.length < this.minLength){ - return false; - } - if(value.length > this.maxLength){ - return false; - } - if(this.vtype){ - var vt = Roo.form.VTypes; - if(!vt[this.vtype](value, this)){ - return false; - } - } - if(typeof this.validator == "function"){ - var msg = this.validator(value); - if(msg !== true){ - return false; - } - } - - if(this.regex && !this.regex.test(value)){ - return false; - } - - if(typeof(this.parseDate(value)) == 'undefined'){ - return false; - } - - if (this.endDate !== Infinity && this.parseDate(value).getTime() > this.endDate.getTime()) { - return false; - } - - if (this.startDate !== -Infinity && this.parseDate(value).getTime() < this.startDate.getTime()) { - return false; - } - - - return true; - }, - - reset : function() - { - this.date = this.viewDate = ''; - - Roo.bootstrap.DateField.superclass.setValue.call(this, ''); - } - -}); - -Roo.apply(Roo.bootstrap.DateField, { - - head : { - tag: 'thead', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'th', - cls: 'prev', - html: '' - }, - { - tag: 'th', - cls: 'switch', - colspan: '5' - }, - { - tag: 'th', - cls: 'next', - html: '' - } - - ] - } - ] - }, - - content : { - tag: 'tbody', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'td', - colspan: '7' - } - ] - } - ] - }, - - footer : { - tag: 'tfoot', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'th', - colspan: '7', - cls: 'today' - } - - ] - } - ] - }, - - dates:{ - en: { - days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], - daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], - daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], - months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - today: "Today" - } - }, - - modes: [ - { - clsName: 'days', - navFnc: 'Month', - navStep: 1 - }, - { - clsName: 'months', - navFnc: 'FullYear', - navStep: 1 - }, - { - clsName: 'years', - navFnc: 'FullYear', - navStep: 10 - }] -}); - -Roo.apply(Roo.bootstrap.DateField, { - - template : { - tag: 'div', - cls: 'datepicker dropdown-menu roo-dynamic shadow', - cn: [ - { - tag: 'div', - cls: 'datepicker-days', - cn: [ - { - tag: 'table', - cls: 'table-condensed', - cn:[ - Roo.bootstrap.DateField.head, - { - tag: 'tbody' - }, - Roo.bootstrap.DateField.footer - ] - } - ] - }, - { - tag: 'div', - cls: 'datepicker-months', - cn: [ - { - tag: 'table', - cls: 'table-condensed', - cn:[ - Roo.bootstrap.DateField.head, - Roo.bootstrap.DateField.content, - Roo.bootstrap.DateField.footer - ] - } - ] - }, - { - tag: 'div', - cls: 'datepicker-years', - cn: [ - { - tag: 'table', - cls: 'table-condensed', - cn:[ - Roo.bootstrap.DateField.head, - Roo.bootstrap.DateField.content, - Roo.bootstrap.DateField.footer - ] - } - ] - } - ] - } -}); - - - - \ No newline at end of file diff --git a/Roo/bootstrap/DateSplitField.js b/Roo/bootstrap/DateSplitField.js deleted file mode 100644 index 421a119371..0000000000 --- a/Roo/bootstrap/DateSplitField.js +++ /dev/null @@ -1,432 +0,0 @@ -/* - * - LGPL - * - * page DateSplitField. - * - */ - - -/** - * @class Roo.bootstrap.DateSplitField - * @extends Roo.bootstrap.Component - * Bootstrap DateSplitField class - * @cfg {string} fieldLabel - the label associated - * @cfg {Number} labelWidth set the width of label (0-12) - * @cfg {String} labelAlign (top|left) - * @cfg {Boolean} dayAllowBlank (true|false) default false - * @cfg {Boolean} monthAllowBlank (true|false) default false - * @cfg {Boolean} yearAllowBlank (true|false) default false - * @cfg {string} dayPlaceholder - * @cfg {string} monthPlaceholder - * @cfg {string} yearPlaceholder - * @cfg {string} dayFormat default 'd' - * @cfg {string} monthFormat default 'm' - * @cfg {string} yearFormat default 'Y' - * @cfg {Number} labellg set the width of label (1-12) - * @cfg {Number} labelmd set the width of label (1-12) - * @cfg {Number} labelsm set the width of label (1-12) - * @cfg {Number} labelxs set the width of label (1-12) - - * - * @constructor - * Create a new DateSplitField - * @param {Object} config The config object - */ - -Roo.bootstrap.DateSplitField = function(config){ - Roo.bootstrap.DateSplitField.superclass.constructor.call(this, config); - - this.addEvents({ - // raw events - /** - * @event years - * getting the data of years - * @param {Roo.bootstrap.DateSplitField} this - * @param {Object} years - */ - "years" : true, - /** - * @event days - * getting the data of days - * @param {Roo.bootstrap.DateSplitField} this - * @param {Object} days - */ - "days" : true, - /** - * @event invalid - * Fires after the field has been marked as invalid. - * @param {Roo.form.Field} this - * @param {String} msg The validation message - */ - invalid : true, - /** - * @event valid - * Fires after the field has been validated with no errors. - * @param {Roo.form.Field} this - */ - valid : true - }); -}; - -Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, { - - fieldLabel : '', - labelAlign : 'top', - labelWidth : 3, - dayAllowBlank : false, - monthAllowBlank : false, - yearAllowBlank : false, - dayPlaceholder : '', - monthPlaceholder : '', - yearPlaceholder : '', - dayFormat : 'd', - monthFormat : 'm', - yearFormat : 'Y', - isFormField : true, - labellg : 0, - labelmd : 0, - labelsm : 0, - labelxs : 0, - - getAutoCreate : function() - { - var cfg = { - tag : 'div', - cls : 'row roo-date-split-field-group', - cn : [ - { - tag : 'input', - type : 'hidden', - cls : 'form-hidden-field roo-date-split-field-group-value', - name : this.name - } - ] - }; - - var labelCls = 'col-md-12'; - var contentCls = 'col-md-4'; - - if(this.fieldLabel){ - - var label = { - tag : 'div', - cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth), - cn : [ - { - tag : 'label', - html : this.fieldLabel - } - ] - }; - - if(this.labelAlign == 'left'){ - - if(this.labelWidth > 12){ - label.style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - labelCls = ' col-lg-' + this.labellg; - contentCls = ' col-lg-' + ((12 - this.labellg) / 3); - } - - if(this.labelmd > 0){ - labelCls = ' col-md-' + this.labelmd; - contentCls = ' col-md-' + ((12 - this.labelmd) / 3); - } - - if(this.labelsm > 0){ - labelCls = ' col-sm-' + this.labelsm; - contentCls = ' col-sm-' + ((12 - this.labelsm) / 3); - } - - if(this.labelxs > 0){ - labelCls = ' col-xs-' + this.labelxs; - contentCls = ' col-xs-' + ((12 - this.labelxs) / 3); - } - } - - label.cls += ' ' + labelCls; - - cfg.cn.push(label); - } - - Roo.each(['day', 'month', 'year'], function(t){ - cfg.cn.push({ - tag : 'div', - cls : 'column roo-date-split-field-' + t + ' ' + contentCls - }); - }, this); - - return cfg; - }, - - inputEl: function () - { - return this.el.select('.roo-date-split-field-group-value', true).first(); - }, - - onRender : function(ct, position) - { - var _this = this; - - Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position); - - this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first(); - - this.dayField = new Roo.bootstrap.ComboBox({ - allowBlank : this.dayAllowBlank, - alwaysQuery : true, - displayField : 'value', - editable : false, - fieldLabel : '', - forceSelection : true, - mode : 'local', - placeholder : this.dayPlaceholder, - selectOnFocus : true, - tpl : '
    {value}
    ', - triggerAction : 'all', - typeAhead : true, - valueField : 'value', - store : new Roo.data.SimpleStore({ - data : (function() { - var days = []; - _this.fireEvent('days', _this, days); - return days; - })(), - fields : [ 'value' ] - }), - listeners : { - select : function (_self, record, index) - { - _this.setValue(_this.getValue()); - } - } - }); - - this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null); - - this.monthField = new Roo.bootstrap.MonthField({ - after : '', - allowBlank : this.monthAllowBlank, - placeholder : this.monthPlaceholder, - readOnly : true, - listeners : { - render : function (_self) - { - this.el.select('span.input-group-addon', true).first().on('click', function(e){ - e.preventDefault(); - _self.focus(); - }); - }, - select : function (_self, oldvalue, newvalue) - { - _this.setValue(_this.getValue()); - } - } - }); - - this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null); - - this.yearField = new Roo.bootstrap.ComboBox({ - allowBlank : this.yearAllowBlank, - alwaysQuery : true, - displayField : 'value', - editable : false, - fieldLabel : '', - forceSelection : true, - mode : 'local', - placeholder : this.yearPlaceholder, - selectOnFocus : true, - tpl : '
    {value}
    ', - triggerAction : 'all', - typeAhead : true, - valueField : 'value', - store : new Roo.data.SimpleStore({ - data : (function() { - var years = []; - _this.fireEvent('years', _this, years); - return years; - })(), - fields : [ 'value' ] - }), - listeners : { - select : function (_self, record, index) - { - _this.setValue(_this.getValue()); - } - } - }); - - this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null); - }, - - setValue : function(v, format) - { - this.inputEl.dom.value = v; - - var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat); - - var d = Date.parseDate(v, f); - - if(!d){ - this.validate(); - return; - } - - this.setDay(d.format(this.dayFormat)); - this.setMonth(d.format(this.monthFormat)); - this.setYear(d.format(this.yearFormat)); - - this.validate(); - - return; - }, - - setDay : function(v) - { - this.dayField.setValue(v); - this.inputEl.dom.value = this.getValue(); - this.validate(); - return; - }, - - setMonth : function(v) - { - this.monthField.setValue(v, true); - this.inputEl.dom.value = this.getValue(); - this.validate(); - return; - }, - - setYear : function(v) - { - this.yearField.setValue(v); - this.inputEl.dom.value = this.getValue(); - this.validate(); - return; - }, - - getDay : function() - { - return this.dayField.getValue(); - }, - - getMonth : function() - { - return this.monthField.getValue(); - }, - - getYear : function() - { - return this.yearField.getValue(); - }, - - getValue : function() - { - var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat; - - var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue(); - - return date; - }, - - reset : function() - { - this.setDay(''); - this.setMonth(''); - this.setYear(''); - this.inputEl.dom.value = ''; - this.validate(); - return; - }, - - validate : function() - { - var d = this.dayField.validate(); - var m = this.monthField.validate(); - var y = this.yearField.validate(); - - var valid = true; - - if( - (!this.dayAllowBlank && !d) || - (!this.monthAllowBlank && !m) || - (!this.yearAllowBlank && !y) - ){ - valid = false; - } - - if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){ - return valid; - } - - if(valid){ - this.markValid(); - return valid; - } - - this.markInvalid(); - - return valid; - }, - - markValid : function() - { - - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(label && icon){ - icon.remove(); - } - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as invalid - * @param {String} msg The validation message - */ - markInvalid : function(msg) - { - - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(label && !icon){ - this.el.select('.roo-date-split-field-label', true).createChild({ - tag : 'i', - cls : 'text-danger fa fa-lg fa-star', - tooltip : 'This field is required', - style : 'margin-right:5px;' - }, label, true); - } - - this.fireEvent('invalid', this, msg); - }, - - clearInvalid : function() - { - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(label && icon){ - icon.remove(); - } - - this.fireEvent('valid', this); - }, - - getName: function() - { - return this.name; - } - -}); - - \ No newline at end of file diff --git a/Roo/bootstrap/FieldLabel.js b/Roo/bootstrap/FieldLabel.js deleted file mode 100644 index c59405c8ab..0000000000 --- a/Roo/bootstrap/FieldLabel.js +++ /dev/null @@ -1,210 +0,0 @@ -/* - * - LGPL - * - * FieldLabel - * - */ - -/** - * @class Roo.bootstrap.FieldLabel - * @extends Roo.bootstrap.Component - * Bootstrap FieldLabel class - * @cfg {String} html contents of the element - * @cfg {String} tag tag of the element default label - * @cfg {String} cls class of the element - * @cfg {String} target label target - * @cfg {Boolean} allowBlank (true|false) target allowBlank default true - * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid - * @cfg {String} validClass DEPRICATED - BS4 uses is-valid - * @cfg {String} iconTooltip default "This field is required" - * @cfg {String} indicatorpos (left|right) default left - * - * @constructor - * Create a new FieldLabel - * @param {Object} config The config object - */ - -Roo.bootstrap.FieldLabel = function(config){ - Roo.bootstrap.Element.superclass.constructor.call(this, config); - - this.addEvents({ - /** - * @event invalid - * Fires after the field has been marked as invalid. - * @param {Roo.form.FieldLabel} this - * @param {String} msg The validation message - */ - invalid : true, - /** - * @event valid - * Fires after the field has been validated with no errors. - * @param {Roo.form.FieldLabel} this - */ - valid : true - }); -}; - -Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { - - tag: 'label', - cls: '', - html: '', - target: '', - allowBlank : true, - invalidClass : 'has-warning', - validClass : 'has-success', - iconTooltip : 'This field is required', - indicatorpos : 'left', - - getAutoCreate : function(){ - - var cls = ""; - if (!this.allowBlank) { - cls = "visible"; - } - - var cfg = { - tag : this.tag, - cls : 'roo-bootstrap-field-label ' + this.cls, - for : this.target, - cn : [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls, - tooltip : this.iconTooltip - }, - { - tag : 'span', - html : this.html - } - ] - }; - - if(this.indicatorpos == 'right'){ - var cfg = { - tag : this.tag, - cls : 'roo-bootstrap-field-label ' + this.cls, - for : this.target, - cn : [ - { - tag : 'span', - html : this.html - }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls, - tooltip : this.iconTooltip - } - ] - }; - } - - return cfg; - }, - - initEvents: function() - { - Roo.bootstrap.Element.superclass.initEvents.call(this); - - this.indicator = this.indicatorEl(); - - if(this.indicator){ - this.indicator.removeClass('visible'); - this.indicator.addClass('invisible'); - } - - Roo.bootstrap.FieldLabel.register(this); - }, - - indicatorEl : function() - { - var indicator = this.el.select('i.roo-required-indicator',true).first(); - - if(!indicator){ - return false; - } - - return indicator; - - }, - - /** - * Mark this field as valid - */ - markValid : function() - { - if(this.indicator){ - this.indicator.removeClass('visible'); - this.indicator.addClass('invisible'); - } - if (Roo.bootstrap.version == 3) { - this.el.removeClass(this.invalidClass); - this.el.addClass(this.validClass); - } else { - this.el.removeClass('is-invalid'); - this.el.addClass('is-valid'); - } - - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as invalid - * @param {String} msg The validation message - */ - markInvalid : function(msg) - { - if(this.indicator){ - this.indicator.removeClass('invisible'); - this.indicator.addClass('visible'); - } - if (Roo.bootstrap.version == 3) { - this.el.removeClass(this.validClass); - this.el.addClass(this.invalidClass); - } else { - this.el.removeClass('is-valid'); - this.el.addClass('is-invalid'); - } - - - this.fireEvent('invalid', this, msg); - } - - -}); - -Roo.apply(Roo.bootstrap.FieldLabel, { - - groups: {}, - - /** - * register a FieldLabel Group - * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add - */ - register : function(label) - { - if(this.groups.hasOwnProperty(label.target)){ - return; - } - - this.groups[label.target] = label; - - }, - /** - * fetch a FieldLabel Group based on the target - * @param {string} target - * @returns {Roo.bootstrap.FieldLabel} the CheckBox group - */ - get: function(target) { - if (typeof(this.groups[target]) == 'undefined') { - return false; - } - - return this.groups[target] ; - } -}); - - - - \ No newline at end of file diff --git a/Roo/bootstrap/Form.js b/Roo/bootstrap/Form.js deleted file mode 100644 index c67994148b..0000000000 --- a/Roo/bootstrap/Form.js +++ /dev/null @@ -1,795 +0,0 @@ -/* - * - LGPL - * - * form - * - */ - -/** - * @class Roo.bootstrap.Form - * @extends Roo.bootstrap.Component - * @children Roo.bootstrap.Component - * Bootstrap Form class - * @cfg {String} method GET | POST (default POST) - * @cfg {String} labelAlign top | left (default top) - * @cfg {String} align left | right - for navbars - * @cfg {Boolean} loadMask load mask when submit (default true) - - * - * @constructor - * Create a new Form - * @param {Object} config The config object - */ - - -Roo.bootstrap.Form = function(config){ - - Roo.bootstrap.Form.superclass.constructor.call(this, config); - - Roo.bootstrap.Form.popover.apply(); - - this.addEvents({ - /** - * @event clientvalidation - * If the monitorValid config option is true, this event fires repetitively to notify of valid state - * @param {Form} this - * @param {Boolean} valid true if the form has passed client-side validation - */ - clientvalidation: true, - /** - * @event beforeaction - * Fires before any action is performed. Return false to cancel the action. - * @param {Form} this - * @param {Action} action The action to be performed - */ - beforeaction: true, - /** - * @event actionfailed - * Fires when an action fails. - * @param {Form} this - * @param {Action} action The action that failed - */ - actionfailed : true, - /** - * @event actioncomplete - * Fires when an action is completed. - * @param {Form} this - * @param {Action} action The action that completed - */ - actioncomplete : true - }); -}; - -Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, { - - /** - * @cfg {String} method - * The request method to use (GET or POST) for form actions if one isn't supplied in the action options. - */ - method : 'POST', - /** - * @cfg {String} url - * The URL to use for form actions if one isn't supplied in the action options. - */ - /** - * @cfg {Boolean} fileUpload - * Set to true if this form is a file upload. - */ - - /** - * @cfg {Object} baseParams - * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}. - */ - - /** - * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds). - */ - timeout: 30, - /** - * @cfg {Sting} align (left|right) for navbar forms - */ - align : 'left', - - // private - activeAction : null, - - /** - * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific - * element by passing it or its id or mask the form itself by passing in true. - * @type Mixed - */ - waitMsgTarget : false, - - loadMask : true, - - /** - * @cfg {Boolean} errorMask (true|false) default false - */ - errorMask : false, - - /** - * @cfg {Number} maskOffset Default 100 - */ - maskOffset : 100, - - /** - * @cfg {Boolean} maskBody - */ - maskBody : false, - - getAutoCreate : function(){ - - var cfg = { - tag: 'form', - method : this.method || 'POST', - id : this.id || Roo.id(), - cls : '' - }; - if (this.parent().xtype.match(/^Nav/)) { - cfg.cls = 'navbar-form form-inline navbar-' + this.align; - - } - - if (this.labelAlign == 'left' ) { - cfg.cls += ' form-horizontal'; - } - - - return cfg; - }, - initEvents : function() - { - this.el.on('submit', this.onSubmit, this); - // this was added as random key presses on the form where triggering form submit. - this.el.on('keypress', function(e) { - if (e.getCharCode() != 13) { - return true; - } - // we might need to allow it for textareas.. and some other items. - // check e.getTarget(). - - if(e.getTarget().nodeName.toLowerCase() === 'textarea'){ - return true; - } - - Roo.log("keypress blocked"); - - e.preventDefault(); - return false; - }); - - }, - // private - onSubmit : function(e){ - e.stopEvent(); - }, - - /** - * Returns true if client-side validation on the form is successful. - * @return Boolean - */ - isValid : function(){ - var items = this.getItems(); - var valid = true; - var target = false; - - items.each(function(f){ - - if(f.validate()){ - return; - } - - Roo.log('invalid field: ' + f.name); - - valid = false; - - if(!target && f.el.isVisible(true)){ - target = f; - } - - }); - - if(this.errorMask && !valid){ - Roo.bootstrap.Form.popover.mask(this, target); - } - - return valid; - }, - - /** - * Returns true if any fields in this form have changed since their original load. - * @return Boolean - */ - isDirty : function(){ - var dirty = false; - var items = this.getItems(); - items.each(function(f){ - if(f.isDirty()){ - dirty = true; - return false; - } - return true; - }); - return dirty; - }, - /** - * Performs a predefined action (submit or load) or custom actions you define on this form. - * @param {String} actionName The name of the action type - * @param {Object} options (optional) The options to pass to the action. All of the config options listed - * below are supported by both the submit and load actions unless otherwise noted (custom actions could also - * accept other config options): - * 
    -Property          Type             Description
-----------------  ---------------  ----------------------------------------------------------------------------------
-url               String           The url for the action (defaults to the form's url)
-method            String           The form method to use (defaults to the form's method, or POST if not defined)
-params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
-clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
-                                   validate the form on the client (defaults to false)
-     *
    - * @return {BasicForm} this - */ - doAction : function(action, options){ - if(typeof action == 'string'){ - action = new Roo.form.Action.ACTION_TYPES[action](this, options); - } - if(this.fireEvent('beforeaction', this, action) !== false){ - this.beforeAction(action); - action.run.defer(100, action); - } - return this; - }, - - // private - beforeAction : function(action){ - var o = action.options; - - if(this.loadMask){ - - if(this.maskBody){ - Roo.get(document.body).mask(o.waitMsg || "Sending", 'x-mask-loading') - } else { - this.el.mask(o.waitMsg || "Sending", 'x-mask-loading'); - } - } - // not really supported yet.. ?? - - //if(this.waitMsgTarget === true){ - // this.el.mask(o.waitMsg || "Sending", 'x-mask-loading'); - //}else if(this.waitMsgTarget){ - // this.waitMsgTarget = Roo.get(this.waitMsgTarget); - // this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading'); - //}else { - // Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...'); - // } - - }, - - // private - afterAction : function(action, success){ - this.activeAction = null; - var o = action.options; - - if(this.loadMask){ - - if(this.maskBody){ - Roo.get(document.body).unmask(); - } else { - this.el.unmask(); - } - } - - //if(this.waitMsgTarget === true){ -// this.el.unmask(); - //}else if(this.waitMsgTarget){ - // this.waitMsgTarget.unmask(); - //}else{ - // Roo.MessageBox.updateProgress(1); - // Roo.MessageBox.hide(); - // } - // - if(success){ - if(o.reset){ - this.reset(); - } - Roo.callback(o.success, o.scope, [this, action]); - this.fireEvent('actioncomplete', this, action); - - }else{ - - // failure condition.. - // we have a scenario where updates need confirming. - // eg. if a locking scenario exists.. - // we look for { errors : { needs_confirm : true }} in the response. - if ( - (typeof(action.result) != 'undefined') && - (typeof(action.result.errors) != 'undefined') && - (typeof(action.result.errors.needs_confirm) != 'undefined') - ){ - var _t = this; - Roo.log("not supported yet"); - /* - - Roo.MessageBox.confirm( - "Change requires confirmation", - action.result.errorMsg, - function(r) { - if (r != 'yes') { - return; - } - _t.doAction('submit', { params : { _submit_confirmed : 1 } } ); - } - - ); - */ - - - return; - } - - Roo.callback(o.failure, o.scope, [this, action]); - // show an error message if no failed handler is set.. - if (!this.hasListener('actionfailed')) { - Roo.log("need to add dialog support"); - /* - Roo.MessageBox.alert("Error", - (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ? - action.result.errorMsg : - "Saving Failed, please check your entries or try again" - ); - */ - } - - this.fireEvent('actionfailed', this, action); - } - - }, - /** - * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName - * @param {String} id The value to search for - * @return Field - */ - findField : function(id){ - var items = this.getItems(); - var field = items.get(id); - if(!field){ - items.each(function(f){ - if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){ - field = f; - return false; - } - return true; - }); - } - return field || null; - }, - /** - * Mark fields in this form invalid in bulk. - * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2} - * @return {BasicForm} this - */ - markInvalid : function(errors){ - if(errors instanceof Array){ - for(var i = 0, len = errors.length; i < len; i++){ - var fieldError = errors[i]; - var f = this.findField(fieldError.id); - if(f){ - f.markInvalid(fieldError.msg); - } - } - }else{ - var field, id; - for(id in errors){ - if(typeof errors[id] != 'function' && (field = this.findField(id))){ - field.markInvalid(errors[id]); - } - } - } - //Roo.each(this.childForms || [], function (f) { - // f.markInvalid(errors); - //}); - - return this; - }, - - /** - * Set values for fields in this form in bulk. - * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2} - * @return {BasicForm} this - */ - setValues : function(values){ - if(values instanceof Array){ // array of objects - for(var i = 0, len = values.length; i < len; i++){ - var v = values[i]; - var f = this.findField(v.id); - if(f){ - f.setValue(v.value); - if(this.trackResetOnLoad){ - f.originalValue = f.getValue(); - } - } - } - }else{ // object hash - var field, id; - for(id in values){ - if(typeof values[id] != 'function' && (field = this.findField(id))){ - - if (field.setFromData && - field.valueField && - field.displayField && - // combos' with local stores can - // be queried via setValue() - // to set their value.. - (field.store && !field.store.isLocal) - ) { - // it's a combo - var sd = { }; - sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName]; - sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name]; - field.setFromData(sd); - - } else if(field.setFromData && (field.store && !field.store.isLocal)) { - - field.setFromData(values); - - } else { - field.setValue(values[id]); - } - - - if(this.trackResetOnLoad){ - field.originalValue = field.getValue(); - } - } - } - } - - //Roo.each(this.childForms || [], function (f) { - // f.setValues(values); - //}); - - return this; - }, - - /** - * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name - * they are returned as an array. - * @param {Boolean} asString - * @return {Object} - */ - getValues : function(asString){ - //if (this.childForms) { - // copy values from the child forms - // Roo.each(this.childForms, function (f) { - // this.setValues(f.getValues()); - // }, this); - //} - - - - var fs = Roo.lib.Ajax.serializeForm(this.el.dom); - if(asString === true){ - return fs; - } - return Roo.urlDecode(fs); - }, - - /** - * Returns the fields in this form as an object with key/value pairs. - * This differs from getValues as it calls getValue on each child item, rather than using dom data. - * @return {Object} - */ - getFieldValues : function(with_hidden) - { - var items = this.getItems(); - var ret = {}; - items.each(function(f){ - - if (!f.getName()) { - return; - } - - var v = f.getValue(); - - if (f.inputType =='radio') { - if (typeof(ret[f.getName()]) == 'undefined') { - ret[f.getName()] = ''; // empty.. - } - - if (!f.el.dom.checked) { - return; - - } - v = f.el.dom.value; - - } - - if(f.xtype == 'MoneyField'){ - ret[f.currencyName] = f.getCurrency(); - } - - // not sure if this supported any more.. - if ((typeof(v) == 'object') && f.getRawValue) { - v = f.getRawValue() ; // dates.. - } - // combo boxes where name != hiddenName... - if (f.name !== false && f.name != '' && f.name != f.getName()) { - ret[f.name] = f.getRawValue(); - } - ret[f.getName()] = v; - }); - - return ret; - }, - - /** - * Clears all invalid messages in this form. - * @return {BasicForm} this - */ - clearInvalid : function(){ - var items = this.getItems(); - - items.each(function(f){ - f.clearInvalid(); - }); - - return this; - }, - - /** - * Resets this form. - * @return {BasicForm} this - */ - reset : function(){ - var items = this.getItems(); - items.each(function(f){ - f.reset(); - }); - - Roo.each(this.childForms || [], function (f) { - f.reset(); - }); - - - return this; - }, - - getItems : function() - { - var r=new Roo.util.MixedCollection(false, function(o){ - return o.id || (o.id = Roo.id()); - }); - var iter = function(el) { - if (el.inputEl) { - r.add(el); - } - if (!el.items) { - return; - } - Roo.each(el.items,function(e) { - iter(e); - }); - }; - - iter(this); - return r; - }, - - hideFields : function(items) - { - Roo.each(items, function(i){ - - var f = this.findField(i); - - if(!f){ - return; - } - - f.hide(); - - }, this); - }, - - showFields : function(items) - { - Roo.each(items, function(i){ - - var f = this.findField(i); - - if(!f){ - return; - } - - f.show(); - - }, this); - } - -}); - -Roo.apply(Roo.bootstrap.Form, { - - popover : { - - padding : 5, - - isApplied : false, - - isMasked : false, - - form : false, - - target : false, - - toolTip : false, - - intervalID : false, - - maskEl : false, - - apply : function() - { - if(this.isApplied){ - return; - } - - this.maskEl = { - top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true), - left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true), - bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true), - right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true) - }; - - this.maskEl.top.enableDisplayMode("block"); - this.maskEl.left.enableDisplayMode("block"); - this.maskEl.bottom.enableDisplayMode("block"); - this.maskEl.right.enableDisplayMode("block"); - - this.toolTip = new Roo.bootstrap.Tooltip({ - cls : 'roo-form-error-popover', - alignment : { - 'left' : ['r-l', [-2,0], 'right'], - 'right' : ['l-r', [2,0], 'left'], - 'bottom' : ['tl-bl', [0,2], 'top'], - 'top' : [ 'bl-tl', [0,-2], 'bottom'] - } - }); - - this.toolTip.render(Roo.get(document.body)); - - this.toolTip.el.enableDisplayMode("block"); - - Roo.get(document.body).on('click', function(){ - this.unmask(); - }, this); - - Roo.get(document.body).on('touchstart', function(){ - this.unmask(); - }, this); - - this.isApplied = true - }, - - mask : function(form, target) - { - this.form = form; - - this.target = target; - - if(!this.form.errorMask || !target.el){ - return; - } - - var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body); - - Roo.log(scrollable); - - var ot = this.target.el.calcOffsetsTo(scrollable); - - var scrollTo = ot[1] - this.form.maskOffset; - - scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight); - - scrollable.scrollTo('top', scrollTo); - - var box = this.target.el.getBox(); - Roo.log(box); - var zIndex = Roo.bootstrap.Modal.zIndex++; - - - this.maskEl.top.setStyle('position', 'absolute'); - this.maskEl.top.setStyle('z-index', zIndex); - this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding); - this.maskEl.top.setLeft(0); - this.maskEl.top.setTop(0); - this.maskEl.top.show(); - - this.maskEl.left.setStyle('position', 'absolute'); - this.maskEl.left.setStyle('z-index', zIndex); - this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2); - this.maskEl.left.setLeft(0); - this.maskEl.left.setTop(box.y - this.padding); - this.maskEl.left.show(); - - this.maskEl.bottom.setStyle('position', 'absolute'); - this.maskEl.bottom.setStyle('z-index', zIndex); - this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding); - this.maskEl.bottom.setLeft(0); - this.maskEl.bottom.setTop(box.bottom + this.padding); - this.maskEl.bottom.show(); - - this.maskEl.right.setStyle('position', 'absolute'); - this.maskEl.right.setStyle('z-index', zIndex); - this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2); - this.maskEl.right.setLeft(box.right + this.padding); - this.maskEl.right.setTop(box.y - this.padding); - this.maskEl.right.show(); - - this.toolTip.bindEl = this.target.el; - - this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++); - - var tip = this.target.blankText; - - if(this.target.getValue() !== '' ) { - - if (this.target.invalidText.length) { - tip = this.target.invalidText; - } else if (this.target.regexText.length){ - tip = this.target.regexText; - } - } - - this.toolTip.show(tip); - - this.intervalID = window.setInterval(function() { - Roo.bootstrap.Form.popover.unmask(); - }, 10000); - - window.onwheel = function(){ return false;}; - - (function(){ this.isMasked = true; }).defer(500, this); - - }, - - unmask : function() - { - if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){ - return; - } - - this.maskEl.top.setStyle('position', 'absolute'); - this.maskEl.top.setSize(0, 0).setXY([0, 0]); - this.maskEl.top.hide(); - - this.maskEl.left.setStyle('position', 'absolute'); - this.maskEl.left.setSize(0, 0).setXY([0, 0]); - this.maskEl.left.hide(); - - this.maskEl.bottom.setStyle('position', 'absolute'); - this.maskEl.bottom.setSize(0, 0).setXY([0, 0]); - this.maskEl.bottom.hide(); - - this.maskEl.right.setStyle('position', 'absolute'); - this.maskEl.right.setSize(0, 0).setXY([0, 0]); - this.maskEl.right.hide(); - - this.toolTip.hide(); - - this.toolTip.el.hide(); - - window.onwheel = function(){ return true;}; - - if(this.intervalID){ - window.clearInterval(this.intervalID); - this.intervalID = false; - } - - this.isMasked = false; - - } - - } - -}); - diff --git a/Roo/bootstrap/HtmlEditor.js b/Roo/bootstrap/HtmlEditor.js deleted file mode 100644 index 244d4de5df..0000000000 --- a/Roo/bootstrap/HtmlEditor.js +++ /dev/null @@ -1,435 +0,0 @@ -/* - * - LGPL - * - * HtmlEditor - * - */ - -/** - * @class Roo.bootstrap.HtmlEditor - * @extends Roo.bootstrap.TextArea - * Bootstrap HtmlEditor class - - * @constructor - * Create a new HtmlEditor - * @param {Object} config The config object - */ - -Roo.bootstrap.HtmlEditor = function(config){ - Roo.bootstrap.HtmlEditor.superclass.constructor.call(this, config); - if (!this.toolbars) { - this.toolbars = []; - } - - this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config)); - this.addEvents({ - /** - * @event initialize - * Fires when the editor is fully initialized (including the iframe) - * @param {HtmlEditor} this - */ - initialize: true, - /** - * @event activate - * Fires when the editor is first receives the focus. Any insertion must wait - * until after this event. - * @param {HtmlEditor} this - */ - activate: true, - /** - * @event beforesync - * Fires before the textarea is updated with content from the editor iframe. Return false - * to cancel the sync. - * @param {HtmlEditor} this - * @param {String} html - */ - beforesync: true, - /** - * @event beforepush - * Fires before the iframe editor is updated with content from the textarea. Return false - * to cancel the push. - * @param {HtmlEditor} this - * @param {String} html - */ - beforepush: true, - /** - * @event sync - * Fires when the textarea is updated with content from the editor iframe. - * @param {HtmlEditor} this - * @param {String} html - */ - sync: true, - /** - * @event push - * Fires when the iframe editor is updated with content from the textarea. - * @param {HtmlEditor} this - * @param {String} html - */ - push: true, - /** - * @event editmodechange - * Fires when the editor switches edit modes - * @param {HtmlEditor} this - * @param {Boolean} sourceEdit True if source edit, false if standard editing. - */ - editmodechange: true, - /** - * @event editorevent - * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks. - * @param {HtmlEditor} this - */ - editorevent: true, - /** - * @event firstfocus - * Fires when on first focus - needed by toolbars.. - * @param {HtmlEditor} this - */ - firstfocus: true, - /** - * @event autosave - * Auto save the htmlEditor value as a file into Events - * @param {HtmlEditor} this - */ - autosave: true, - /** - * @event savedpreview - * preview the saved version of htmlEditor - * @param {HtmlEditor} this - */ - savedpreview: true - }); -}; - - -Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea, { - - - /** - * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one - */ - toolbars : false, - - /** - * @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty - */ - btns : [], - - /** - * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a - * Roo.resizable. - */ - resizable : false, - /** - * @cfg {Number} height (in pixels) - */ - height: 300, - /** - * @cfg {Number} width (in pixels) - */ - width: false, - - /** - * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets. - * - */ - stylesheets: false, - - // id of frame.. - frameId: false, - - // private properties - validationEvent : false, - deferHeight: true, - initialized : false, - activated : false, - - onFocus : Roo.emptyFn, - iframePad:3, - hideMode:'offsets', - - tbContainer : false, - - bodyCls : '', - - toolbarContainer :function() { - return this.wrap.select('.x-html-editor-tb',true).first(); - }, - - /** - * Protected method that will not generally be called directly. It - * is called when the editor creates its toolbar. Override this method if you need to - * add custom toolbar buttons. - * @param {HtmlEditor} editor - */ - createToolbar : function(){ - Roo.log('renewing'); - Roo.log("create toolbars"); - - this.toolbars = [ new Roo.bootstrap.htmleditor.ToolbarStandard({editor: this} ) ]; - this.toolbars[0].render(this.toolbarContainer()); - - return; - -// if (!editor.toolbars || !editor.toolbars.length) { -// editor.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard() ]; // can be empty? -// } -// -// for (var i =0 ; i < editor.toolbars.length;i++) { -// editor.toolbars[i] = Roo.factory( -// typeof(editor.toolbars[i]) == 'string' ? -// { xtype: editor.toolbars[i]} : editor.toolbars[i], -// Roo.bootstrap.HtmlEditor); -// editor.toolbars[i].init(editor); -// } - }, - - - // private - onRender : function(ct, position) - { - // Roo.log("Call onRender: " + this.xtype); - var _t = this; - Roo.bootstrap.HtmlEditor.superclass.onRender.call(this, ct, position); - - this.wrap = this.inputEl().wrap({ - cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'} - }); - - this.editorcore.onRender(ct, position); - - if (this.resizable) { - this.resizeEl = new Roo.Resizable(this.wrap, { - pinned : true, - wrap: true, - dynamic : true, - minHeight : this.height, - height: this.height, - handles : this.resizable, - width: this.width, - listeners : { - resize : function(r, w, h) { - _t.onResize(w,h); // -something - } - } - }); - - } - this.createToolbar(this); - - - if(!this.width && this.resizable){ - this.setSize(this.wrap.getSize()); - } - if (this.resizeEl) { - this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] ); - // should trigger onReize.. - } - - }, - - // private - onResize : function(w, h) - { - Roo.log('resize: ' +w + ',' + h ); - Roo.bootstrap.HtmlEditor.superclass.onResize.apply(this, arguments); - var ew = false; - var eh = false; - - if(this.inputEl() ){ - if(typeof w == 'number'){ - var aw = w - this.wrap.getFrameWidth('lr'); - this.inputEl().setWidth(this.adjustWidth('textarea', aw)); - ew = aw; - } - if(typeof h == 'number'){ - var tbh = -11; // fixme it needs to tool bar size! - for (var i =0; i < this.toolbars.length;i++) { - // fixme - ask toolbars for heights? - tbh += this.toolbars[i].el.getHeight(); - //if (this.toolbars[i].footer) { - // tbh += this.toolbars[i].footer.el.getHeight(); - //} - } - - - - - - var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight(); - ah -= 5; // knock a few pixes off for look.. - this.inputEl().setHeight(this.adjustWidth('textarea', ah)); - var eh = ah; - } - } - Roo.log('onResize:' + [w,h,ew,eh].join(',') ); - this.editorcore.onResize(ew,eh); - - }, - - /** - * Toggles the editor between standard and source edit mode. - * @param {Boolean} sourceEdit (optional) True for source edit, false for standard - */ - toggleSourceEdit : function(sourceEditMode) - { - this.editorcore.toggleSourceEdit(sourceEditMode); - - if(this.editorcore.sourceEditMode){ - Roo.log('editor - showing textarea'); - -// Roo.log('in'); -// Roo.log(this.syncValue()); - this.syncValue(); - this.inputEl().removeClass(['hide', 'x-hidden']); - this.inputEl().dom.removeAttribute('tabIndex'); - this.inputEl().focus(); - }else{ - Roo.log('editor - hiding textarea'); -// Roo.log('out') -// Roo.log(this.pushValue()); - this.pushValue(); - - this.inputEl().addClass(['hide', 'x-hidden']); - this.inputEl().dom.setAttribute('tabIndex', -1); - //this.deferFocus(); - } - - if(this.resizable){ - this.setSize(this.wrap.getSize()); - } - - this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode); - }, - - // private (for BoxComponent) - adjustSize : Roo.BoxComponent.prototype.adjustSize, - - // private (for BoxComponent) - getResizeEl : function(){ - return this.wrap; - }, - - // private (for BoxComponent) - getPositionEl : function(){ - return this.wrap; - }, - - // private - initEvents : function(){ - this.originalValue = this.getValue(); - }, - -// /** -// * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide -// * @method -// */ -// markInvalid : Roo.emptyFn, -// /** -// * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide -// * @method -// */ -// clearInvalid : Roo.emptyFn, - - setValue : function(v){ - Roo.bootstrap.HtmlEditor.superclass.setValue.call(this, v); - this.editorcore.pushValue(); - }, - - - // private - deferFocus : function(){ - this.focus.defer(10, this); - }, - - // doc'ed in Field - focus : function(){ - this.editorcore.focus(); - - }, - - - // private - onDestroy : function(){ - - - - if(this.rendered){ - - for (var i =0; i < this.toolbars.length;i++) { - // fixme - ask toolbars for heights? - this.toolbars[i].onDestroy(); - } - - this.wrap.dom.innerHTML = ''; - this.wrap.remove(); - } - }, - - // private - onFirstFocus : function(){ - //Roo.log("onFirstFocus"); - this.editorcore.onFirstFocus(); - for (var i =0; i < this.toolbars.length;i++) { - this.toolbars[i].onFirstFocus(); - } - - }, - - // private - syncValue : function() - { - this.editorcore.syncValue(); - }, - - pushValue : function() - { - this.editorcore.pushValue(); - } - - - // hide stuff that is not compatible - /** - * @event blur - * @hide - */ - /** - * @event change - * @hide - */ - /** - * @event focus - * @hide - */ - /** - * @event specialkey - * @hide - */ - /** - * @cfg {String} fieldClass @hide - */ - /** - * @cfg {String} focusClass @hide - */ - /** - * @cfg {String} autoCreate @hide - */ - /** - * @cfg {String} inputType @hide - */ - - /** - * @cfg {String} invalidText @hide - */ - /** - * @cfg {String} msgFx @hide - */ - /** - * @cfg {String} validateOnBlur @hide - */ -}); - - - - - - \ No newline at end of file diff --git a/Roo/bootstrap/Input.js b/Roo/bootstrap/Input.js deleted file mode 100644 index d02460329d..0000000000 --- a/Roo/bootstrap/Input.js +++ /dev/null @@ -1,1107 +0,0 @@ -/* - * - LGPL - * - * Input - * - */ - -/** - * @class Roo.bootstrap.Input - * @extends Roo.bootstrap.Component - * Bootstrap Input class - * @cfg {Boolean} disabled is it disabled - * @cfg {String} inputType (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text) - * @cfg {String} name name of the input - * @cfg {string} fieldLabel - the label associated - * @cfg {string} placeholder - placeholder to put in text. - * @cfg {string} before - input group add on before - * @cfg {string} after - input group add on after - * @cfg {string} size - (lg|sm) or leave empty.. - * @cfg {Number} xs colspan out of 12 for mobile-sized screens - * @cfg {Number} sm colspan out of 12 for tablet-sized screens - * @cfg {Number} md colspan out of 12 for computer-sized screens - * @cfg {Number} lg colspan out of 12 for large computer-sized screens - * @cfg {string} value default value of the input - * @cfg {Number} labelWidth set the width of label - * @cfg {Number} labellg set the width of label (1-12) - * @cfg {Number} labelmd set the width of label (1-12) - * @cfg {Number} labelsm set the width of label (1-12) - * @cfg {Number} labelxs set the width of label (1-12) - * @cfg {String} labelAlign (top|left) - * @cfg {Boolean} readOnly Specifies that the field should be read-only - * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en - * @cfg {String} indicatorpos (left|right) default left - * @cfg {String} capture (user|camera) use for file input only. (default empty) - * @cfg {String} accept (image|video|audio) use for file input only. (default empty) - * @cfg {Boolean} preventMark Do not show tick or cross if error/success - * @cfg {Roo.bootstrap.Button} before Button to show before - * @cfg {Roo.bootstrap.Button} afterButton to show before - * @cfg {String} align (left|center|right) Default left - * @cfg {Boolean} forceFeedback (true|false) Default false - * - * @constructor - * Create a new Input - * @param {Object} config The config object - */ - -Roo.bootstrap.Input = function(config){ - - Roo.bootstrap.Input.superclass.constructor.call(this, config); - - this.addEvents({ - /** - * @event focus - * Fires when this field receives input focus. - * @param {Roo.form.Field} this - */ - focus : true, - /** - * @event blur - * Fires when this field loses input focus. - * @param {Roo.form.Field} this - */ - blur : true, - /** - * @event specialkey - * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check - * {@link Roo.EventObject#getKey} to determine which key was pressed. - * @param {Roo.form.Field} this - * @param {Roo.EventObject} e The event object - */ - specialkey : true, - /** - * @event change - * Fires just before the field blurs if the field value has changed. - * @param {Roo.form.Field} this - * @param {Mixed} newValue The new value - * @param {Mixed} oldValue The original value - */ - change : true, - /** - * @event invalid - * Fires after the field has been marked as invalid. - * @param {Roo.form.Field} this - * @param {String} msg The validation message - */ - invalid : true, - /** - * @event valid - * Fires after the field has been validated with no errors. - * @param {Roo.form.Field} this - */ - valid : true, - /** - * @event keyup - * Fires after the key up - * @param {Roo.form.Field} this - * @param {Roo.EventObject} e The event Object - */ - keyup : true, - /** - * @event paste - * Fires after the user pastes into input - * @param {Roo.form.Field} this - * @param {Roo.EventObject} e The event Object - */ - paste : true - }); -}; - -Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { - /** - * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable - automatic validation (defaults to "keyup"). - */ - validationEvent : "keyup", - /** - * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true). - */ - validateOnBlur : true, - /** - * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250) - */ - validationDelay : 250, - /** - * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus") - */ - focusClass : "x-form-focus", // not needed??? - - - /** - * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid - */ - invalidClass : "has-warning", - - /** - * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid - */ - validClass : "has-success", - - /** - * @cfg {Boolean} hasFeedback (true|false) default true - */ - hasFeedback : true, - - /** - * @cfg {String} invalidFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid") - */ - invalidFeedbackClass : "glyphicon-warning-sign", - - /** - * @cfg {String} validFeedbackIcon The CSS class to use when create feedback icon (defaults to "x-form-invalid") - */ - validFeedbackClass : "glyphicon-ok", - - /** - * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false) - */ - selectOnFocus : false, - - /** - * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null) - */ - maskRe : null, - /** - * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null) - */ - vtype : null, - - /** - * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false) - */ - disableKeyFilter : false, - - /** - * @cfg {Boolean} disabled True to disable the field (defaults to false). - */ - disabled : false, - /** - * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true) - */ - allowBlank : true, - /** - * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required") - */ - blankText : "Please complete this mandatory field", - - /** - * @cfg {Number} minLength Minimum input field length required (defaults to 0) - */ - minLength : 0, - /** - * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE) - */ - maxLength : Number.MAX_VALUE, - /** - * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}") - */ - minLengthText : "The minimum length for this field is {0}", - /** - * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}") - */ - maxLengthText : "The maximum length for this field is {0}", - - - /** - * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null). - * If available, this function will be called only after the basic validators all return true, and will be passed the - * current field value and expected to return boolean true if the value is valid or a string error message if invalid. - */ - validator : null, - /** - * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null). - * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the - * current field value. If the test fails, the field will be marked invalid using {@link #regexText}. - */ - regex : null, - /** - * @cfg {String} regexText -- Depricated - use Invalid Text - */ - regexText : "", - - /** - * @cfg {String} invalidText The error text to display if {@link #validator} test fails during validation (defaults to "") - */ - invalidText : "", - - - - autocomplete: false, - - - fieldLabel : '', - inputType : 'text', - - name : false, - placeholder: false, - before : false, - after : false, - size : false, - hasFocus : false, - preventMark: false, - isFormField : true, - value : '', - labelWidth : 2, - labelAlign : false, - readOnly : false, - align : false, - formatedValue : false, - forceFeedback : false, - - indicatorpos : 'left', - - labellg : 0, - labelmd : 0, - labelsm : 0, - labelxs : 0, - - capture : '', - accept : '', - - parentLabelAlign : function() - { - var parent = this; - while (parent.parent()) { - parent = parent.parent(); - if (typeof(parent.labelAlign) !='undefined') { - return parent.labelAlign; - } - } - return 'left'; - - }, - - getAutoCreate : function() - { - var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign; - - var id = Roo.id(); - - var cfg = {}; - - if(this.inputType != 'hidden'){ - cfg.cls = 'form-group' //input-group - } - - var input = { - tag: 'input', - id : id, - type : this.inputType, - value : this.value, - cls : 'form-control', - placeholder : this.placeholder || '', - autocomplete : this.autocomplete || 'new-password' - }; - if (this.inputType == 'file') { - input.style = 'overflow:hidden'; // why not in CSS? - } - - if(this.capture.length){ - input.capture = this.capture; - } - - if(this.accept.length){ - input.accept = this.accept + "/*"; - } - - if(this.align){ - input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align); - } - - if(this.maxLength && this.maxLength != Number.MAX_VALUE){ - input.maxLength = this.maxLength; - } - - if (this.disabled) { - input.disabled=true; - } - - if (this.readOnly) { - input.readonly=true; - } - - if (this.name) { - input.name = this.name; - } - - if (this.size) { - input.cls += ' input-' + this.size; - } - - var settings=this; - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - var inputblock = input; - - var feedback = { - tag: 'span', - cls: 'glyphicon form-control-feedback' - }; - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - - inputblock = { - cls : 'has-feedback', - cn : [ - input, - feedback - ] - }; - } - - if (this.before || this.after) { - - inputblock = { - cls : 'input-group', - cn : [] - }; - - if (this.before && typeof(this.before) == 'string') { - - inputblock.cn.push({ - tag :'span', - cls : 'roo-input-before input-group-addon input-group-prepend input-group-text', - html : this.before - }); - } - if (this.before && typeof(this.before) == 'object') { - this.before = Roo.factory(this.before); - - inputblock.cn.push({ - tag :'span', - cls : 'roo-input-before input-group-prepend input-group-' + - (this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? - }); - } - - inputblock.cn.push(input); - - if (this.after && typeof(this.after) == 'string') { - inputblock.cn.push({ - tag :'span', - cls : 'roo-input-after input-group-append input-group-text input-group-addon', - html : this.after - }); - } - if (this.after && typeof(this.after) == 'object') { - this.after = Roo.factory(this.after); - - inputblock.cn.push({ - tag :'span', - cls : 'roo-input-after input-group-append input-group-' + - (this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought? - }); - } - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - inputblock.cls += ' has-feedback'; - inputblock.cn.push(feedback); - } - }; - var indicator = { - tag : 'i', - cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }; - if (this.allowBlank ) { - indicator.style = this.allowBlank ? ' display:none' : ''; - } - if (align ==='left' && this.fieldLabel.length) { - - cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); - - cfg.cn = [ - indicator, - { - tag: 'label', - 'for' : id, - cls : 'control-label col-form-label', - html : this.fieldLabel - - }, - { - cls : "", - cn: [ - inputblock - ] - } - ]; - - var labelCfg = cfg.cn[1]; - var contentCfg = cfg.cn[2]; - - if(this.indicatorpos == 'right'){ - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label col-form-label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - }, - indicator - ] - }, - { - cls : "", - cn: [ - inputblock - ] - } - - ]; - - labelCfg = cfg.cn[0]; - contentCfg = cfg.cn[1]; - - } - - if(this.labelWidth > 12){ - labelCfg.style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth; - } - - if(this.labellg > 0){ - labelCfg.cls += ' col-lg-' + this.labellg; - contentCfg.cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - labelCfg.cls += ' col-md-' + this.labelmd; - contentCfg.cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - labelCfg.cls += ' col-sm-' + this.labelsm; - contentCfg.cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - labelCfg.cls += ' col-xs-' + this.labelxs; - contentCfg.cls += ' col-xs-' + (12 - this.labelxs); - } - - - } else if ( this.fieldLabel.length) { - - - - cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required', - style : this.allowBlank ? ' display:none' : '' - }, - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - - inputblock - - ]; - - if(this.indicatorpos == 'right'){ - - cfg.cn = [ - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required', - style : this.allowBlank ? ' display:none' : '' - }, - - inputblock - - ]; - - } - - } else { - - cfg.cn = [ - - inputblock - - ]; - - - }; - - if (this.parentType === 'Navbar' && this.parent().bar) { - cfg.cls += ' navbar-form'; - } - - if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) { - // on BS4 we do this only if not form - cfg.cls += ' navbar-form'; - cfg.tag = 'li'; - } - - return cfg; - - }, - /** - * return the real input element. - */ - inputEl: function () - { - return this.el.select('input.form-control',true).first(); - }, - - tooltipEl : function() - { - return this.inputEl(); - }, - - indicatorEl : function() - { - if (Roo.bootstrap.version == 4) { - return false; // not enabled in v4 yet. - } - - var indicator = this.el.select('i.roo-required-indicator',true).first(); - - if(!indicator){ - return false; - } - - return indicator; - - }, - - setDisabled : function(v) - { - var i = this.inputEl().dom; - if (!v) { - i.removeAttribute('disabled'); - return; - - } - i.setAttribute('disabled','true'); - }, - initEvents : function() - { - - this.inputEl().on("keydown" , this.fireKey, this); - this.inputEl().on("focus", this.onFocus, this); - this.inputEl().on("blur", this.onBlur, this); - - this.inputEl().relayEvent('keyup', this); - this.inputEl().relayEvent('paste', this); - - this.indicator = this.indicatorEl(); - - if(this.indicator){ - this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? - - } - - // reference to original value for reset - this.originalValue = this.getValue(); - //Roo.form.TextField.superclass.initEvents.call(this); - if(this.validationEvent == 'keyup'){ - this.validationTask = new Roo.util.DelayedTask(this.validate, this); - this.inputEl().on('keyup', this.filterValidation, this); - } - else if(this.validationEvent !== false){ - this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay}); - } - - if(this.selectOnFocus){ - this.on("focus", this.preFocus, this); - - } - if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){ - this.inputEl().on("keypress", this.filterKeys, this); - } else { - this.inputEl().relayEvent('keypress', this); - } - /* if(this.grow){ - this.el.on("keyup", this.onKeyUp, this, {buffer:50}); - this.el.on("click", this.autoSize, this); - } - */ - if(this.inputEl().is('input[type=password]') && Roo.isSafari){ - this.inputEl().on('keydown', this.SafariOnKeyDown, this); - } - - if (typeof(this.before) == 'object') { - this.before.render(this.el.select('.roo-input-before',true).first()); - } - if (typeof(this.after) == 'object') { - this.after.render(this.el.select('.roo-input-after',true).first()); - } - - this.inputEl().on('change', this.onChange, this); - - }, - filterValidation : function(e){ - if(!e.isNavKeyPress()){ - this.validationTask.delay(this.validationDelay); - } - }, - /** - * Validates the field value - * @return {Boolean} True if the value is valid, else false - */ - validate : function(){ - //if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){ - if(this.disabled || this.validateValue(this.getRawValue())){ - this.markValid(); - return true; - } - - this.markInvalid(); - return false; - }, - - - /** - * Validates a value according to the field's validation rules and marks the field as invalid - * if the validation fails - * @param {Mixed} value The value to validate - * @return {Boolean} True if the value is valid, else false - */ - validateValue : function(value) - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - if(value.length < 1) { // if it's blank - if(this.allowBlank){ - return true; - } - return false; - } - - if(value.length < this.minLength){ - return false; - } - if(value.length > this.maxLength){ - return false; - } - if(this.vtype){ - var vt = Roo.form.VTypes; - if(!vt[this.vtype](value, this)){ - return false; - } - } - if(typeof this.validator == "function"){ - var msg = this.validator(value); - if(msg !== true){ - return false; - } - if (typeof(msg) == 'string') { - this.invalidText = msg; - } - } - - if(this.regex && !this.regex.test(value)){ - return false; - } - - return true; - }, - - // private - fireKey : function(e){ - //Roo.log('field ' + e.getKey()); - if(e.isNavKeyPress()){ - this.fireEvent("specialkey", this, e); - } - }, - focus : function (selectText){ - if(this.rendered){ - this.inputEl().focus(); - if(selectText === true){ - this.inputEl().dom.select(); - } - } - return this; - } , - - onFocus : function(){ - if(!Roo.isOpera && this.focusClass){ // don't touch in Opera - // this.el.addClass(this.focusClass); - } - if(!this.hasFocus){ - this.hasFocus = true; - this.startValue = this.getValue(); - this.fireEvent("focus", this); - } - }, - - beforeBlur : Roo.emptyFn, - - - // private - onBlur : function(){ - this.beforeBlur(); - if(!Roo.isOpera && this.focusClass){ // don't touch in Opera - //this.el.removeClass(this.focusClass); - } - this.hasFocus = false; - if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){ - this.validate(); - } - var v = this.getValue(); - if(String(v) !== String(this.startValue)){ - this.fireEvent('change', this, v, this.startValue); - } - this.fireEvent("blur", this); - }, - - onChange : function(e) - { - var v = this.getValue(); - if(String(v) !== String(this.startValue)){ - this.fireEvent('change', this, v, this.startValue); - } - - }, - - /** - * Resets the current field value to the originally loaded value and clears any validation messages - */ - reset : function(){ - this.setValue(this.originalValue); - this.validate(); - }, - /** - * Returns the name of the field - * @return {Mixed} name The name field - */ - getName: function(){ - return this.name; - }, - /** - * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}. - * @return {Mixed} value The field value - */ - getValue : function(){ - - var v = this.inputEl().getValue(); - - return v; - }, - /** - * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}. - * @return {Mixed} value The field value - */ - getRawValue : function(){ - var v = this.inputEl().getValue(); - - return v; - }, - - /** - * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}. - * @param {Mixed} value The value to set - */ - setRawValue : function(v){ - return this.inputEl().dom.value = (v === null || v === undefined ? '' : v); - }, - - selectText : function(start, end){ - var v = this.getRawValue(); - if(v.length > 0){ - start = start === undefined ? 0 : start; - end = end === undefined ? v.length : end; - var d = this.inputEl().dom; - if(d.setSelectionRange){ - d.setSelectionRange(start, end); - }else if(d.createTextRange){ - var range = d.createTextRange(); - range.moveStart("character", start); - range.moveEnd("character", v.length-end); - range.select(); - } - } - }, - - /** - * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}. - * @param {Mixed} value The value to set - */ - setValue : function(v){ - this.value = v; - if(this.rendered){ - this.inputEl().dom.value = (v === null || v === undefined ? '' : v); - this.validate(); - } - }, - - /* - processValue : function(value){ - if(this.stripCharsRe){ - var newValue = value.replace(this.stripCharsRe, ''); - if(newValue !== value){ - this.setRawValue(newValue); - return newValue; - } - } - return value; - }, - */ - preFocus : function(){ - - if(this.selectOnFocus){ - this.inputEl().dom.select(); - } - }, - filterKeys : function(e){ - var k = e.getKey(); - if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){ - return; - } - var c = e.getCharCode(), cc = String.fromCharCode(c); - if(Roo.isIE && (e.isSpecialKey() || !cc)){ - return; - } - if(!this.maskRe.test(cc)){ - e.stopEvent(); - } - }, - /** - * Clear any invalid styles/messages for this field - */ - clearInvalid : function(){ - - if(!this.el || this.preventMark){ // not rendered - return; - } - - - this.el.removeClass([this.invalidClass, 'is-invalid']); - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass); - } - - } - - if(this.indicator){ - this.indicator.removeClass('visible'); - this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); - } - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as valid - */ - markValid : function() - { - if(!this.el || this.preventMark){ // not rendered... - return; - } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.inputEl().removeClass(['is-valid', 'is-invalid']); - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - } - - if(this.indicator){ - this.indicator.removeClass('visible'); - this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); - } - - if(this.disabled){ - return; - } - - - if(this.allowBlank && !this.getRawValue().length){ - return; - } - if (Roo.bootstrap.version == 3) { - this.el.addClass(this.validClass); - } else { - this.inputEl().addClass('is-valid'); - } - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]); - } - - } - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as invalid - * @param {String} msg The validation message - */ - markInvalid : function(msg) - { - if(!this.el || this.preventMark){ // not rendered - return; - } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.inputEl().removeClass(['is-valid', 'is-invalid']); - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass( - [this.invalidFeedbackClass, this.validFeedbackClass]); - } - - if(this.disabled){ - return; - } - - if(this.allowBlank && !this.getRawValue().length){ - return; - } - - if(this.indicator){ - this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); - this.indicator.addClass('visible'); - } - if (Roo.bootstrap.version == 3) { - this.el.addClass(this.invalidClass); - } else { - this.inputEl().addClass('is-invalid'); - } - - - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - - if(this.getValue().length || this.forceFeedback){ - this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]); - } - - } - - } - - this.fireEvent('invalid', this, msg); - }, - // private - SafariOnKeyDown : function(event) - { - // this is a workaround for a password hang bug on chrome/ webkit. - if (this.inputEl().dom.type != 'password') { - return; - } - - var isSelectAll = false; - - if(this.inputEl().dom.selectionEnd > 0){ - isSelectAll = (this.inputEl().dom.selectionEnd - this.inputEl().dom.selectionStart - this.getValue().length == 0) ? true : false; - } - if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key - event.preventDefault(); - this.setValue(''); - return; - } - - if(isSelectAll && event.getCharCode() > 31 && !event.ctrlKey) { // not backspace and delete key (or ctrl-v) - - event.preventDefault(); - // this is very hacky as keydown always get's upper case. - // - var cc = String.fromCharCode(event.getCharCode()); - this.setValue( event.shiftKey ? cc : cc.toLowerCase()); - - } - }, - adjustWidth : function(tag, w){ - tag = tag.toLowerCase(); - if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){ - if(Roo.isIE && (tag == 'input' || tag == 'textarea')){ - if(tag == 'input'){ - return w + 2; - } - if(tag == 'textarea'){ - return w-2; - } - }else if(Roo.isOpera){ - if(tag == 'input'){ - return w + 2; - } - if(tag == 'textarea'){ - return w-2; - } - } - } - return w; - }, - - setFieldLabel : function(v) - { - if(!this.rendered){ - return; - } - - if(this.indicatorEl()){ - var ar = this.el.select('label > span',true); - - if (ar.elements.length) { - this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v); - this.fieldLabel = v; - return; - } - - var br = this.el.select('label',true); - - if(br.elements.length) { - this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v); - this.fieldLabel = v; - return; - } - - Roo.log('Cannot Found any of label > span || label in input'); - return; - } - - this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v); - this.fieldLabel = v; - - - } -}); - - diff --git a/Roo/bootstrap/Markdown.js b/Roo/bootstrap/Markdown.js deleted file mode 100644 index 8b0447e075..0000000000 --- a/Roo/bootstrap/Markdown.js +++ /dev/null @@ -1,96 +0,0 @@ - -/* - * - LGPL - */ - -/** - * @class Roo.bootstrap.Markdown - * @extends Roo.bootstrap.TextArea - * Bootstrap Showdown editable area - * @cfg {string} content - * - * @constructor - * Create a new Showdown - */ - -Roo.bootstrap.Markdown = function(config){ - Roo.bootstrap.Markdown.superclass.constructor.call(this, config); - -}; - -Roo.extend(Roo.bootstrap.Markdown, Roo.bootstrap.TextArea, { - - editing :false, - - initEvents : function() - { - - Roo.bootstrap.TextArea.prototype.initEvents.call(this); - this.markdownEl = this.el.createChild({ - cls : 'roo-markdown-area' - }); - this.inputEl().addClass('d-none'); - if (this.getValue() == '') { - this.markdownEl.dom.innerHTML = String.format('{0}', this.placeholder || ''); - - } else { - this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue())); - } - this.markdownEl.on('click', this.toggleTextEdit, this); - this.on('blur', this.toggleTextEdit, this); - this.on('specialkey', this.resizeTextArea, this); - }, - - toggleTextEdit : function() - { - var sh = this.markdownEl.getHeight(); - this.inputEl().addClass('d-none'); - this.markdownEl.addClass('d-none'); - if (!this.editing) { - // show editor? - this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30))); - this.inputEl().removeClass('d-none'); - this.inputEl().focus(); - this.editing = true; - return; - } - // show showdown... - this.updateMarkdown(); - this.markdownEl.removeClass('d-none'); - this.editing = false; - return; - }, - updateMarkdown : function() - { - if (this.getValue() == '') { - this.markdownEl.dom.innerHTML = String.format('{0}', this.placeholder || ''); - return; - } - - this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue())); - }, - - resizeTextArea: function () { - - var sh = 100; - Roo.log([sh, this.getValue().split("\n").length * 30]); - this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30))); - }, - setValue : function(val) - { - Roo.bootstrap.TextArea.prototype.setValue.call(this,val); - if (!this.editing) { - this.updateMarkdown(); - } - - }, - focus : function() - { - if (!this.editing) { - this.toggleTextEdit(); - } - - } - - -}); \ No newline at end of file diff --git a/Roo/bootstrap/MoneyField.js b/Roo/bootstrap/MoneyField.js deleted file mode 100644 index 391894df98..0000000000 --- a/Roo/bootstrap/MoneyField.js +++ /dev/null @@ -1,722 +0,0 @@ - -/** - * @class Roo.bootstrap.MoneyField - * @extends Roo.bootstrap.ComboBox - * Bootstrap MoneyField class - * - * @constructor - * Create a new MoneyField. - * @param {Object} config Configuration options - */ - -Roo.bootstrap.MoneyField = function(config) { - - Roo.bootstrap.MoneyField.superclass.constructor.call(this, config); - -}; - -Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, { - - /** - * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true) - */ - allowDecimals : true, - /** - * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.') - */ - decimalSeparator : ".", - /** - * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2) - */ - decimalPrecision : 0, - /** - * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true) - */ - allowNegative : true, - /** - * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true) - */ - allowZero: true, - /** - * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY) - */ - minValue : Number.NEGATIVE_INFINITY, - /** - * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE) - */ - maxValue : Number.MAX_VALUE, - /** - * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}") - */ - minText : "The minimum value for this field is {0}", - /** - * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}") - */ - maxText : "The maximum value for this field is {0}", - /** - * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen - * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number") - */ - nanText : "{0} is not a valid number", - /** - * @cfg {Boolean} castInt (true|false) cast int if true (defalut true) - */ - castInt : true, - /** - * @cfg {String} defaults currency of the MoneyField - * value should be in lkey - */ - defaultCurrency : false, - /** - * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter - */ - thousandsDelimiter : false, - /** - * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE) - */ - max_length: false, - - inputlg : 9, - inputmd : 9, - inputsm : 9, - inputxs : 6, - /** - * @cfg {Roo.data.Store} store Store to lookup currency?? - */ - store : false, - - getAutoCreate : function() - { - var align = this.labelAlign || this.parentLabelAlign(); - - var id = Roo.id(); - - var cfg = { - cls: 'form-group', - cn: [] - }; - - var input = { - tag: 'input', - id : id, - cls : 'form-control roo-money-amount-input', - autocomplete: 'new-password' - }; - - var hiddenInput = { - tag: 'input', - type: 'hidden', - id: Roo.id(), - cls: 'hidden-number-input' - }; - - if(this.max_length) { - input.maxlength = this.max_length; - } - - if (this.name) { - hiddenInput.name = this.name; - } - - if (this.disabled) { - input.disabled = true; - } - - var clg = 12 - this.inputlg; - var cmd = 12 - this.inputmd; - var csm = 12 - this.inputsm; - var cxs = 12 - this.inputxs; - - var container = { - tag : 'div', - cls : 'row roo-money-field', - cn : [ - { - tag : 'div', - cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs, - cn : [ - { - tag : 'div', - cls: 'roo-select2-container input-group', - cn: [ - { - tag : 'input', - cls : 'form-control roo-money-currency-input', - autocomplete: 'new-password', - readOnly : 1, - name : this.currencyName - }, - { - tag :'span', - cls : 'input-group-addon', - cn : [ - { - tag: 'span', - cls: 'caret' - } - ] - } - ] - } - ] - }, - { - tag : 'div', - cls : 'roo-money-amount column col-lg-' + this.inputlg + ' col-md-' + this.inputmd + ' col-sm-' + this.inputsm + ' col-xs-' + this.inputxs, - cn : [ - { - tag: 'div', - cls: this.hasFeedback ? 'has-feedback' : '', - cn: [ - input - ] - } - ] - } - ] - - }; - - if (this.fieldLabel.length) { - var indicator = { - tag: 'i', - tooltip: 'This field is required' - }; - - var label = { - tag: 'label', - 'for': id, - cls: 'control-label', - cn: [] - }; - - var label_text = { - tag: 'span', - html: this.fieldLabel - }; - - indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator'; - label.cn = [ - indicator, - label_text - ]; - - if(this.indicatorpos == 'right') { - indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator'; - label.cn = [ - label_text, - indicator - ]; - } - - if(align == 'left') { - container = { - tag: 'div', - cn: [ - container - ] - }; - - if(this.labelWidth > 12){ - label.style = "width: " + this.labelWidth + 'px'; - } - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - if(this.labellg > 0){ - label.cls += ' col-lg-' + this.labellg; - input.cls += ' col-lg-' + (12 - this.labellg); - } - if(this.labelmd > 0){ - label.cls += ' col-md-' + this.labelmd; - container.cls += ' col-md-' + (12 - this.labelmd); - } - if(this.labelsm > 0){ - label.cls += ' col-sm-' + this.labelsm; - container.cls += ' col-sm-' + (12 - this.labelsm); - } - if(this.labelxs > 0){ - label.cls += ' col-xs-' + this.labelxs; - container.cls += ' col-xs-' + (12 - this.labelxs); - } - } - } - - cfg.cn = [ - label, - container, - hiddenInput - ]; - - var settings = this; - - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - return cfg; - }, - - initEvents : function() - { - this.indicator = this.indicatorEl(); - - this.initCurrencyEvent(); - - this.initNumberEvent(); - }, - - initCurrencyEvent : function() - { - if (!this.store) { - throw "can not find store for combo"; - } - - this.store = Roo.factory(this.store, Roo.data); - this.store.parent = this; - - this.createList(); - - this.triggerEl = this.el.select('.input-group-addon', true).first(); - - this.triggerEl.on("click", this.onTriggerClick, this, { preventDefault : true }); - - var _this = this; - - (function(){ - var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth); - _this.list.setWidth(lw); - }).defer(100); - - this.list.on('mouseover', this.onViewOver, this); - this.list.on('mousemove', this.onViewMove, this); - this.list.on('scroll', this.onViewScroll, this); - - if(!this.tpl){ - this.tpl = '
  • {' + this.currencyField + '}
    • '; - } - - this.view = new Roo.View(this.list, this.tpl, { - singleSelect:true, store: this.store, selectedClass: this.selectedClass - }); - - this.view.on('click', this.onViewClick, this); - - this.store.on('beforeload', this.onBeforeLoad, this); - this.store.on('load', this.onLoad, this); - this.store.on('loadexception', this.onLoadException, this); - - this.keyNav = new Roo.KeyNav(this.currencyEl(), { - "up" : function(e){ - this.inKeyMode = true; - this.selectPrev(); - }, - - "down" : function(e){ - if(!this.isExpanded()){ - this.onTriggerClick(); - }else{ - this.inKeyMode = true; - this.selectNext(); - } - }, - - "enter" : function(e){ - this.collapse(); - - if(this.fireEvent("specialkey", this, e)){ - this.onViewClick(false); - } - - return true; - }, - - "esc" : function(e){ - this.collapse(); - }, - - "tab" : function(e){ - this.collapse(); - - if(this.fireEvent("specialkey", this, e)){ - this.onViewClick(false); - } - - return true; - }, - - scope : this, - - doRelay : function(foo, bar, hname){ - if(hname == 'down' || this.scope.isExpanded()){ - return Roo.KeyNav.prototype.doRelay.apply(this, arguments); - } - return true; - }, - - forceKeyDown: true - }); - - this.currencyEl().on("click", this.onTriggerClick, this, { preventDefault : true }); - - }, - - initNumberEvent : function(e) - { - this.inputEl().on("keydown" , this.fireKey, this); - this.inputEl().on("focus", this.onFocus, this); - this.inputEl().on("blur", this.onBlur, this); - - this.inputEl().relayEvent('keyup', this); - - if(this.indicator){ - this.indicator.addClass('invisible'); - } - - this.originalValue = this.getValue(); - - if(this.validationEvent == 'keyup'){ - this.validationTask = new Roo.util.DelayedTask(this.validate, this); - this.inputEl().on('keyup', this.filterValidation, this); - } - else if(this.validationEvent !== false){ - this.inputEl().on(this.validationEvent, this.validate, this, {buffer: this.validationDelay}); - } - - if(this.selectOnFocus){ - this.on("focus", this.preFocus, this); - - } - if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){ - this.inputEl().on("keypress", this.filterKeys, this); - } else { - this.inputEl().relayEvent('keypress', this); - } - - var allowed = "0123456789"; - - if(this.allowDecimals){ - allowed += this.decimalSeparator; - } - - if(this.allowNegative){ - allowed += "-"; - } - - if(this.thousandsDelimiter) { - allowed += ","; - } - - this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi'); - - var keyPress = function(e){ - - var k = e.getKey(); - - var c = e.getCharCode(); - - if( - (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') && - allowed.indexOf(String.fromCharCode(c)) === -1 - ){ - e.stopEvent(); - return; - } - - if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){ - return; - } - - if(allowed.indexOf(String.fromCharCode(c)) === -1){ - e.stopEvent(); - } - }; - - this.inputEl().on("keypress", keyPress, this); - - }, - - onTriggerClick : function(e) - { - if(this.disabled){ - return; - } - - this.page = 0; - this.loadNext = false; - - if(this.isExpanded()){ - this.collapse(); - return; - } - - this.hasFocus = true; - - if(this.triggerAction == 'all') { - this.doQuery(this.allQuery, true); - return; - } - - this.doQuery(this.getRawValue()); - }, - - getCurrency : function() - { - var v = this.currencyEl().getValue(); - - return v; - }, - - restrictHeight : function() - { - this.list.alignTo(this.currencyEl(), this.listAlign); - this.list.alignTo(this.currencyEl(), this.listAlign); - }, - - onViewClick : function(view, doFocus, el, e) - { - var index = this.view.getSelectedIndexes()[0]; - - var r = this.store.getAt(index); - - if(r){ - this.onSelect(r, index); - } - }, - - onSelect : function(record, index){ - - if(this.fireEvent('beforeselect', this, record, index) !== false){ - - this.setFromCurrencyData(index > -1 ? record.data : false); - - this.collapse(); - - this.fireEvent('select', this, record, index); - } - }, - - setFromCurrencyData : function(o) - { - var currency = ''; - - this.lastCurrency = o; - - if (this.currencyField) { - currency = !o || typeof(o[this.currencyField]) == 'undefined' ? '' : o[this.currencyField]; - } else { - Roo.log('no currencyField value set for '+ (this.name ? this.name : this.id)); - } - - this.lastSelectionText = currency; - - //setting default currency - if(o[this.currencyField] * 1 == 0 && this.defaultCurrency) { - this.setCurrency(this.defaultCurrency); - return; - } - - this.setCurrency(currency); - }, - - setFromData : function(o) - { - var c = {}; - - c[this.currencyField] = !o || typeof(o[this.currencyName]) == 'undefined' ? '' : o[this.currencyName]; - - this.setFromCurrencyData(c); - - var value = ''; - - if (this.name) { - value = !o || typeof(o[this.name]) == 'undefined' ? '' : o[this.name]; - } else { - Roo.log('no value set for '+ (this.name ? this.name : this.id)); - } - - this.setValue(value); - - }, - - setCurrency : function(v) - { - this.currencyValue = v; - - if(this.rendered){ - this.currencyEl().dom.value = (v === null || v === undefined ? '' : v); - this.validate(); - } - }, - - setValue : function(v) - { - v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator); - - this.value = v; - - if(this.rendered){ - - this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v); - - this.inputEl().dom.value = (v == '') ? '' : - Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || ''); - - if(!this.allowZero && v === '0') { - this.hiddenEl().dom.value = ''; - this.inputEl().dom.value = ''; - } - - this.validate(); - } - }, - - getRawValue : function() - { - var v = this.inputEl().getValue(); - - return v; - }, - - getValue : function() - { - return this.fixPrecision(this.parseValue(this.getRawValue())); - }, - - parseValue : function(value) - { - if(this.thousandsDelimiter) { - value += ""; - r = new RegExp(",", "g"); - value = value.replace(r, ""); - } - - value = parseFloat(String(value).replace(this.decimalSeparator, ".")); - return isNaN(value) ? '' : value; - - }, - - fixPrecision : function(value) - { - if(this.thousandsDelimiter) { - value += ""; - r = new RegExp(",", "g"); - value = value.replace(r, ""); - } - - var nan = isNaN(value); - - if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){ - return nan ? '' : value; - } - return parseFloat(value).toFixed(this.decimalPrecision); - }, - - decimalPrecisionFcn : function(v) - { - return Math.floor(v); - }, - - validateValue : function(value) - { - if(!Roo.bootstrap.MoneyField.superclass.validateValue.call(this, value)){ - return false; - } - - var num = this.parseValue(value); - - if(isNaN(num)){ - this.markInvalid(String.format(this.nanText, value)); - return false; - } - - if(num < this.minValue){ - this.markInvalid(String.format(this.minText, this.minValue)); - return false; - } - - if(num > this.maxValue){ - this.markInvalid(String.format(this.maxText, this.maxValue)); - return false; - } - - return true; - }, - - validate : function() - { - if(this.disabled || this.allowBlank){ - this.markValid(); - return true; - } - - var currency = this.getCurrency(); - - if(this.validateValue(this.getRawValue()) && currency.length){ - this.markValid(); - return true; - } - - this.markInvalid(); - return false; - }, - - getName: function() - { - return this.name; - }, - - beforeBlur : function() - { - if(!this.castInt){ - return; - } - - var v = this.parseValue(this.getRawValue()); - - if(v || v == 0){ - this.setValue(v); - } - }, - - onBlur : function() - { - this.beforeBlur(); - - if(!Roo.isOpera && this.focusClass){ // don't touch in Opera - //this.el.removeClass(this.focusClass); - } - - this.hasFocus = false; - - if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){ - this.validate(); - } - - var v = this.getValue(); - - if(String(v) !== String(this.startValue)){ - this.fireEvent('change', this, v, this.startValue); - } - - this.fireEvent("blur", this); - }, - - inputEl : function() - { - return this.el.select('.roo-money-amount-input', true).first(); - }, - - currencyEl : function() - { - return this.el.select('.roo-money-currency-input', true).first(); - }, - - hiddenEl : function() - { - return this.el.select('input.hidden-number-input',true).first(); - } - -}); \ No newline at end of file diff --git a/Roo/bootstrap/MonthField.js b/Roo/bootstrap/MonthField.js deleted file mode 100644 index 9348c26d1c..0000000000 --- a/Roo/bootstrap/MonthField.js +++ /dev/null @@ -1,393 +0,0 @@ -/* - * - LGPL - * - * MonthField - * - */ - -/** - * @class Roo.bootstrap.MonthField - * @extends Roo.bootstrap.Input - * Bootstrap MonthField class - * - * @cfg {String} language default en - * - * @constructor - * Create a new MonthField - * @param {Object} config The config object - */ - -Roo.bootstrap.MonthField = function(config){ - Roo.bootstrap.MonthField.superclass.constructor.call(this, config); - - this.addEvents({ - /** - * @event show - * Fires when this field show. - * @param {Roo.bootstrap.MonthField} this - * @param {Mixed} date The date value - */ - show : true, - /** - * @event show - * Fires when this field hide. - * @param {Roo.bootstrap.MonthField} this - * @param {Mixed} date The date value - */ - hide : true, - /** - * @event select - * Fires when select a date. - * @param {Roo.bootstrap.MonthField} this - * @param {String} oldvalue The old value - * @param {String} newvalue The new value - */ - select : true - }); -}; - -Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { - - onRender: function(ct, position) - { - - Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position); - - this.language = this.language || 'en'; - this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0]; - this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en"; - - this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false; - this.isInline = false; - this.isInput = true; - this.component = this.el.select('.add-on', true).first() || false; - this.component = (this.component && this.component.length === 0) ? false : this.component; - this.hasInput = this.component && this.inputEL().length; - - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template); - - this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.picker().on('mousedown', this.onMousedown, this); - this.picker().on('click', this.onClick, this); - - this.picker().addClass('datepicker-dropdown'); - - Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){ - v.setStyle('width', '189px'); - }); - - this.fillMonths(); - - this.update(); - - if(this.isInline) { - this.show(); - } - - }, - - setValue: function(v, suppressEvent) - { - var o = this.getValue(); - - Roo.bootstrap.MonthField.superclass.setValue.call(this, v); - - this.update(); - - if(suppressEvent !== true){ - this.fireEvent('select', this, o, v); - } - - }, - - getValue: function() - { - return this.value; - }, - - onClick: function(e) - { - e.stopPropagation(); - e.preventDefault(); - - var target = e.getTarget(); - - if(target.nodeName.toLowerCase() === 'i'){ - target = Roo.get(target).dom.parentNode; - } - - var nodeName = target.nodeName; - var className = target.className; - var html = target.innerHTML; - - if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){ - return; - } - - this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html); - - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); - - this.hide(); - - }, - - picker : function() - { - return this.pickerEl; - }, - - fillMonths: function() - { - var i = 0; - var months = this.picker().select('>.datepicker-months td', true).first(); - - months.dom.innerHTML = ''; - - while (i < 12) { - var month = { - tag: 'span', - cls: 'month', - html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++] - }; - - months.createChild(month); - } - - }, - - update: function() - { - var _this = this; - - if(typeof(this.vIndex) == 'undefined' && this.value.length){ - this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value); - } - - Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){ - e.removeClass('active'); - - if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){ - e.addClass('active'); - } - }) - }, - - place: function() - { - if(this.isInline) { - return; - } - - this.picker().removeClass(['bottom', 'top']); - - if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ - /* - * place to the top of element! - * - */ - - this.picker().addClass('top'); - this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft()); - - return; - } - - this.picker().addClass('bottom'); - - this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft()); - }, - - onFocus : function() - { - Roo.bootstrap.MonthField.superclass.onFocus.call(this); - this.show(); - }, - - onBlur : function() - { - Roo.bootstrap.MonthField.superclass.onBlur.call(this); - - var d = this.inputEl().getValue(); - - this.setValue(d); - - this.hide(); - }, - - show : function() - { - this.picker().show(); - this.picker().select('>.datepicker-months', true).first().show(); - this.update(); - this.place(); - - this.fireEvent('show', this, this.date); - }, - - hide : function() - { - if(this.isInline) { - return; - } - this.picker().hide(); - this.fireEvent('hide', this, this.date); - - }, - - onMousedown: function(e) - { - e.stopPropagation(); - e.preventDefault(); - }, - - keyup: function(e) - { - Roo.bootstrap.MonthField.superclass.keyup.call(this); - this.update(); - }, - - fireKey: function(e) - { - if (!this.picker().isVisible()){ - if (e.keyCode == 27) {// allow escape to hide and re-show picker - this.show(); - } - return; - } - - var dir; - - switch(e.keyCode){ - case 27: // escape - this.hide(); - e.preventDefault(); - break; - case 37: // left - case 39: // right - dir = e.keyCode == 37 ? -1 : 1; - - this.vIndex = this.vIndex + dir; - - if(this.vIndex < 0){ - this.vIndex = 0; - } - - if(this.vIndex > 11){ - this.vIndex = 11; - } - - if(isNaN(this.vIndex)){ - this.vIndex = 0; - } - - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); - - break; - case 38: // up - case 40: // down - - dir = e.keyCode == 38 ? -1 : 1; - - this.vIndex = this.vIndex + dir * 4; - - if(this.vIndex < 0){ - this.vIndex = 0; - } - - if(this.vIndex > 11){ - this.vIndex = 11; - } - - if(isNaN(this.vIndex)){ - this.vIndex = 0; - } - - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); - break; - - case 13: // enter - - if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){ - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); - } - - this.hide(); - e.preventDefault(); - break; - case 9: // tab - if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){ - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); - } - this.hide(); - break; - case 16: // shift - case 17: // ctrl - case 18: // alt - break; - default : - this.hide(); - - } - }, - - remove: function() - { - this.picker().remove(); - } - -}); - -Roo.apply(Roo.bootstrap.MonthField, { - - content : { - tag: 'tbody', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'td', - colspan: '7' - } - ] - } - ] - }, - - dates:{ - en: { - months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] - } - } -}); - -Roo.apply(Roo.bootstrap.MonthField, { - - template : { - tag: 'div', - cls: 'datepicker dropdown-menu roo-dynamic', - cn: [ - { - tag: 'div', - cls: 'datepicker-months', - cn: [ - { - tag: 'table', - cls: 'table-condensed', - cn:[ - Roo.bootstrap.DateField.content - ] - } - ] - } - ] - } -}); - - - - - \ No newline at end of file diff --git a/Roo/bootstrap/NumberField.js b/Roo/bootstrap/NumberField.js deleted file mode 100644 index e82d69fc92..0000000000 --- a/Roo/bootstrap/NumberField.js +++ /dev/null @@ -1,255 +0,0 @@ -/* - * - LGPL - * - * Number field - */ - -/** - * @class Roo.bootstrap.NumberField - * @extends Roo.bootstrap.Input - * Bootstrap NumberField class - * - * - * - * - * @constructor - * Create a new NumberField - * @param {Object} config The config object - */ - -Roo.bootstrap.NumberField = function(config){ - Roo.bootstrap.NumberField.superclass.constructor.call(this, config); -}; - -Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, { - - /** - * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true) - */ - allowDecimals : true, - /** - * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.') - */ - decimalSeparator : ".", - /** - * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2) - */ - decimalPrecision : 2, - /** - * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true) - */ - allowNegative : true, - - /** - * @cfg {Boolean} allowZero False to blank out if the user enters '0' (defaults to true) - */ - allowZero: true, - /** - * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY) - */ - minValue : Number.NEGATIVE_INFINITY, - /** - * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE) - */ - maxValue : Number.MAX_VALUE, - /** - * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}") - */ - minText : "The minimum value for this field is {0}", - /** - * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}") - */ - maxText : "The maximum value for this field is {0}", - /** - * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen - * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number") - */ - nanText : "{0} is not a valid number", - /** - * @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter - */ - thousandsDelimiter : false, - /** - * @cfg {String} valueAlign alignment of value - */ - valueAlign : "left", - - getAutoCreate : function() - { - var hiddenInput = { - tag: 'input', - type: 'hidden', - id: Roo.id(), - cls: 'hidden-number-input' - }; - - if (this.name) { - hiddenInput.name = this.name; - } - - this.name = ''; - - var cfg = Roo.bootstrap.NumberField.superclass.getAutoCreate.call(this); - - this.name = hiddenInput.name; - - if(cfg.cn.length > 0) { - cfg.cn.push(hiddenInput); - } - - return cfg; - }, - - // private - initEvents : function() - { - Roo.bootstrap.NumberField.superclass.initEvents.call(this); - - var allowed = "0123456789"; - - if(this.allowDecimals){ - allowed += this.decimalSeparator; - } - - if(this.allowNegative){ - allowed += "-"; - } - - if(this.thousandsDelimiter) { - allowed += ","; - } - - this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi'); - - var keyPress = function(e){ - - var k = e.getKey(); - - var c = e.getCharCode(); - - if( - (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') && - allowed.indexOf(String.fromCharCode(c)) === -1 - ){ - e.stopEvent(); - return; - } - - if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){ - return; - } - - if(allowed.indexOf(String.fromCharCode(c)) === -1){ - e.stopEvent(); - } - }; - - this.el.on("keypress", keyPress, this); - }, - - validateValue : function(value) - { - - if(!Roo.bootstrap.NumberField.superclass.validateValue.call(this, value)){ - return false; - } - - var num = this.parseValue(value); - - if(isNaN(num)){ - this.markInvalid(String.format(this.nanText, value)); - return false; - } - - if(num < this.minValue){ - this.markInvalid(String.format(this.minText, this.minValue)); - return false; - } - - if(num > this.maxValue){ - this.markInvalid(String.format(this.maxText, this.maxValue)); - return false; - } - - return true; - }, - - getValue : function() - { - var v = this.hiddenEl().getValue(); - - return this.fixPrecision(this.parseValue(v)); - }, - - parseValue : function(value) - { - if(this.thousandsDelimiter) { - value += ""; - r = new RegExp(",", "g"); - value = value.replace(r, ""); - } - - value = parseFloat(String(value).replace(this.decimalSeparator, ".")); - return isNaN(value) ? '' : value; - }, - - fixPrecision : function(value) - { - if(this.thousandsDelimiter) { - value += ""; - r = new RegExp(",", "g"); - value = value.replace(r, ""); - } - - var nan = isNaN(value); - - if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){ - return nan ? '' : value; - } - return parseFloat(value).toFixed(this.decimalPrecision); - }, - - setValue : function(v) - { - v = String(this.fixPrecision(v)).replace(".", this.decimalSeparator); - - this.value = v; - - if(this.rendered){ - - this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v); - - this.inputEl().dom.value = (v == '') ? '' : - Roo.util.Format.number(v, this.decimalPrecision, this.thousandsDelimiter || ''); - - if(!this.allowZero && v === '0') { - this.hiddenEl().dom.value = ''; - this.inputEl().dom.value = ''; - } - - this.validate(); - } - }, - - decimalPrecisionFcn : function(v) - { - return Math.floor(v); - }, - - beforeBlur : function() - { - var v = this.parseValue(this.getRawValue()); - - if(v || v === 0 || v === ''){ - this.setValue(v); - } - }, - - hiddenEl : function() - { - return this.el.select('input.hidden-number-input',true).first(); - } - -}); - - diff --git a/Roo/bootstrap/PhoneInput.js b/Roo/bootstrap/PhoneInput.js deleted file mode 100644 index d3d82f13b0..0000000000 --- a/Roo/bootstrap/PhoneInput.js +++ /dev/null @@ -1,562 +0,0 @@ -/** -* This script refer to: -* Title: International Telephone Input -* Author: Jack O'Connor -* Code version: v12.1.12 -* Availability: https://github.com/jackocnr/intl-tel-input.git -**/ - -/** - * @class Roo.bootstrap.PhoneInput - * @extends Roo.bootstrap.TriggerField - * An input with International dial-code selection - - * @cfg {String} defaultDialCode default '+852' - * @cfg {Array} preferedCountries default [] - - * @constructor - * Create a new PhoneInput. - * @param {Object} config Configuration options - */ - -Roo.bootstrap.PhoneInput = function(config) { - Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config); -}; - -Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, { - /** - * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined) - */ - listWidth: undefined, - - selectedClass: 'active', - - invalidClass : "has-warning", - - validClass: 'has-success', - - allowed: '0123456789', - - max_length: 15, - - /** - * @cfg {String} defaultDialCode The default dial code when initializing the input - */ - defaultDialCode: '+852', - - /** - * @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 - */ - preferedCountries: false, - - getAutoCreate : function() - { - var data = Roo.bootstrap.PhoneInputData(); - var align = this.labelAlign || this.parentLabelAlign(); - var id = Roo.id(); - - this.allCountries = []; - this.dialCodeMapping = []; - - for (var i = 0; i < data.length; i++) { - var c = data[i]; - this.allCountries[i] = { - name: c[0], - iso2: c[1], - dialCode: c[2], - priority: c[3] || 0, - areaCodes: c[4] || null - }; - this.dialCodeMapping[c[2]] = { - name: c[0], - iso2: c[1], - priority: c[3] || 0, - areaCodes: c[4] || null - }; - } - - var cfg = { - cls: 'form-group', - cn: [] - }; - - var input = { - tag: 'input', - id : id, - // type: 'number', -- do not use number - we get the flaky up/down arrows. - maxlength: this.max_length, - cls : 'form-control tel-input', - autocomplete: 'new-password' - }; - - var hiddenInput = { - tag: 'input', - type: 'hidden', - cls: 'hidden-tel-input' - }; - - if (this.name) { - hiddenInput.name = this.name; - } - - if (this.disabled) { - input.disabled = true; - } - - var flag_container = { - tag: 'div', - cls: 'flag-box', - cn: [ - { - tag: 'div', - cls: 'flag' - }, - { - tag: 'div', - cls: 'caret' - } - ] - }; - - var box = { - tag: 'div', - cls: this.hasFeedback ? 'has-feedback' : '', - cn: [ - hiddenInput, - input, - { - tag: 'input', - cls: 'dial-code-holder', - disabled: true - } - ] - }; - - var container = { - cls: 'roo-select2-container input-group', - cn: [ - flag_container, - box - ] - }; - - if (this.fieldLabel.length) { - var indicator = { - tag: 'i', - tooltip: 'This field is required' - }; - - var label = { - tag: 'label', - 'for': id, - cls: 'control-label', - cn: [] - }; - - var label_text = { - tag: 'span', - html: this.fieldLabel - }; - - indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator'; - label.cn = [ - indicator, - label_text - ]; - - if(this.indicatorpos == 'right') { - indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator'; - label.cn = [ - label_text, - indicator - ]; - } - - if(align == 'left') { - container = { - tag: 'div', - cn: [ - container - ] - }; - - if(this.labelWidth > 12){ - label.style = "width: " + this.labelWidth + 'px'; - } - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - if(this.labellg > 0){ - label.cls += ' col-lg-' + this.labellg; - input.cls += ' col-lg-' + (12 - this.labellg); - } - if(this.labelmd > 0){ - label.cls += ' col-md-' + this.labelmd; - container.cls += ' col-md-' + (12 - this.labelmd); - } - if(this.labelsm > 0){ - label.cls += ' col-sm-' + this.labelsm; - container.cls += ' col-sm-' + (12 - this.labelsm); - } - if(this.labelxs > 0){ - label.cls += ' col-xs-' + this.labelxs; - container.cls += ' col-xs-' + (12 - this.labelxs); - } - } - } - - cfg.cn = [ - label, - container - ]; - - var settings = this; - - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - this.store = new Roo.data.Store({ - proxy : new Roo.data.MemoryProxy({}), - reader : new Roo.data.JsonReader({ - fields : [ - { - 'name' : 'name', - 'type' : 'string' - }, - { - 'name' : 'iso2', - 'type' : 'string' - }, - { - 'name' : 'dialCode', - 'type' : 'string' - }, - { - 'name' : 'priority', - 'type' : 'string' - }, - { - 'name' : 'areaCodes', - 'type' : 'string' - } - ] - }) - }); - - if(!this.preferedCountries) { - this.preferedCountries = [ - 'hk', - 'gb', - 'us' - ]; - } - - var p = this.preferedCountries.reverse(); - - if(p) { - for (var i = 0; i < p.length; i++) { - for (var j = 0; j < this.allCountries.length; j++) { - if(this.allCountries[j].iso2 == p[i]) { - var t = this.allCountries[j]; - this.allCountries.splice(j,1); - this.allCountries.unshift(t); - } - } - } - } - - this.store.proxy.data = { - success: true, - data: this.allCountries - }; - - return cfg; - }, - - initEvents : function() - { - this.createList(); - Roo.bootstrap.PhoneInput.superclass.initEvents.call(this); - - this.indicator = this.indicatorEl(); - this.flag = this.flagEl(); - this.dialCodeHolder = this.dialCodeHolderEl(); - - this.trigger = this.el.select('div.flag-box',true).first(); - this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true}); - - var _this = this; - - (function(){ - var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth); - _this.list.setWidth(lw); - }).defer(100); - - this.list.on('mouseover', this.onViewOver, this); - this.list.on('mousemove', this.onViewMove, this); - this.inputEl().on("keyup", this.onKeyUp, this); - this.inputEl().on("keypress", this.onKeyPress, this); - - this.tpl = '
  • {name} +{dialCode}
    • '; - - this.view = new Roo.View(this.list, this.tpl, { - singleSelect:true, store: this.store, selectedClass: this.selectedClass - }); - - this.view.on('click', this.onViewClick, this); - this.setValue(this.defaultDialCode); - }, - - onTriggerClick : function(e) - { - Roo.log('trigger click'); - if(this.disabled){ - return; - } - - if(this.isExpanded()){ - this.collapse(); - this.hasFocus = false; - }else { - this.store.load({}); - this.hasFocus = true; - this.expand(); - } - }, - - isExpanded : function() - { - return this.list.isVisible(); - }, - - collapse : function() - { - if(!this.isExpanded()){ - return; - } - this.list.hide(); - Roo.get(document).un('mousedown', this.collapseIf, this); - Roo.get(document).un('mousewheel', this.collapseIf, this); - this.fireEvent('collapse', this); - this.validate(); - }, - - expand : function() - { - Roo.log('expand'); - - if(this.isExpanded() || !this.hasFocus){ - return; - } - - var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth); - this.list.setWidth(lw); - - this.list.show(); - this.restrictHeight(); - - Roo.get(document).on('mousedown', this.collapseIf, this); - Roo.get(document).on('mousewheel', this.collapseIf, this); - - this.fireEvent('expand', this); - }, - - restrictHeight : function() - { - this.list.alignTo(this.inputEl(), this.listAlign); - this.list.alignTo(this.inputEl(), this.listAlign); - }, - - onViewOver : function(e, t) - { - if(this.inKeyMode){ - return; - } - var item = this.view.findItemFromChild(t); - - if(item){ - var index = this.view.indexOf(item); - this.select(index, false); - } - }, - - // private - onViewClick : function(view, doFocus, el, e) - { - var index = this.view.getSelectedIndexes()[0]; - - var r = this.store.getAt(index); - - if(r){ - this.onSelect(r, index); - } - if(doFocus !== false && !this.blockFocus){ - this.inputEl().focus(); - } - }, - - onViewMove : function(e, t) - { - this.inKeyMode = false; - }, - - select : function(index, scrollIntoView) - { - this.selectedIndex = index; - this.view.select(index); - if(scrollIntoView !== false){ - var el = this.view.getNode(index); - if(el){ - this.list.scrollChildIntoView(el, false); - } - } - }, - - createList : function() - { - this.list = Roo.get(document.body).createChild({ - tag: 'ul', - cls: 'typeahead typeahead-long dropdown-menu tel-list', - style: 'display:none' - }); - - this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - }, - - collapseIf : function(e) - { - var in_combo = e.within(this.el); - var in_list = e.within(this.list); - var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false; - - if (in_combo || in_list || is_list) { - return; - } - this.collapse(); - }, - - onSelect : function(record, index) - { - if(this.fireEvent('beforeselect', this, record, index) !== false){ - - this.setFlagClass(record.data.iso2); - this.setDialCode(record.data.dialCode); - this.hasFocus = false; - this.collapse(); - this.fireEvent('select', this, record, index); - } - }, - - flagEl : function() - { - var flag = this.el.select('div.flag',true).first(); - if(!flag){ - return false; - } - return flag; - }, - - dialCodeHolderEl : function() - { - var d = this.el.select('input.dial-code-holder',true).first(); - if(!d){ - return false; - } - return d; - }, - - setDialCode : function(v) - { - this.dialCodeHolder.dom.value = '+'+v; - }, - - setFlagClass : function(n) - { - this.flag.dom.className = 'flag '+n; - }, - - getValue : function() - { - var v = this.inputEl().getValue(); - if(this.dialCodeHolder) { - v = this.dialCodeHolder.dom.value+this.inputEl().getValue(); - } - return v; - }, - - setValue : function(v) - { - var d = this.getDialCode(v); - - //invalid dial code - if(v.length == 0 || !d || d.length == 0) { - if(this.rendered){ - this.inputEl().dom.value = (v === null || v === undefined ? '' : v); - this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v); - } - return; - } - - //valid dial code - this.setFlagClass(this.dialCodeMapping[d].iso2); - this.setDialCode(d); - this.inputEl().dom.value = v.replace('+'+d,''); - this.hiddenEl().dom.value = this.getValue(); - - this.validate(); - }, - - getDialCode : function(v) - { - v = v || ''; - - if (v.length == 0) { - return this.dialCodeHolder.dom.value; - } - - var dialCode = ""; - if (v.charAt(0) != "+") { - return false; - } - var numericChars = ""; - for (var i = 1; i < v.length; i++) { - var c = v.charAt(i); - if (!isNaN(c)) { - numericChars += c; - if (this.dialCodeMapping[numericChars]) { - dialCode = v.substr(1, i); - } - if (numericChars.length == 4) { - break; - } - } - } - return dialCode; - }, - - reset : function() - { - this.setValue(this.defaultDialCode); - this.validate(); - }, - - hiddenEl : function() - { - return this.el.select('input.hidden-tel-input',true).first(); - }, - - // after setting val - onKeyUp : function(e){ - this.setValue(this.getValue()); - }, - - onKeyPress : function(e){ - if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){ - e.stopEvent(); - } - } - -}); \ No newline at end of file diff --git a/Roo/bootstrap/PhoneInputData.js b/Roo/bootstrap/PhoneInputData.js deleted file mode 100644 index 88039e097e..0000000000 --- a/Roo/bootstrap/PhoneInputData.js +++ /dev/null @@ -1,1260 +0,0 @@ -/** -* This script refer to: -* Title: International Telephone Input -* Author: Jack O'Connor -* Code version: v12.1.12 -* Availability: https://github.com/jackocnr/intl-tel-input.git -**/ - -Roo.bootstrap.PhoneInputData = function() { - var d = [ - [ - "Afghanistan (‫افغانستان‬‎)", - "af", - "93" - ], - [ - "Albania (Shqipëri)", - "al", - "355" - ], - [ - "Algeria (‫الجزائر‬‎)", - "dz", - "213" - ], - [ - "American Samoa", - "as", - "1684" - ], - [ - "Andorra", - "ad", - "376" - ], - [ - "Angola", - "ao", - "244" - ], - [ - "Anguilla", - "ai", - "1264" - ], - [ - "Antigua and Barbuda", - "ag", - "1268" - ], - [ - "Argentina", - "ar", - "54" - ], - [ - "Armenia (Հայաստան)", - "am", - "374" - ], - [ - "Aruba", - "aw", - "297" - ], - [ - "Australia", - "au", - "61", - 0 - ], - [ - "Austria (Österreich)", - "at", - "43" - ], - [ - "Azerbaijan (Azərbaycan)", - "az", - "994" - ], - [ - "Bahamas", - "bs", - "1242" - ], - [ - "Bahrain (‫البحرين‬‎)", - "bh", - "973" - ], - [ - "Bangladesh (বাংলাদেশ)", - "bd", - "880" - ], - [ - "Barbados", - "bb", - "1246" - ], - [ - "Belarus (Беларусь)", - "by", - "375" - ], - [ - "Belgium (België)", - "be", - "32" - ], - [ - "Belize", - "bz", - "501" - ], - [ - "Benin (Bénin)", - "bj", - "229" - ], - [ - "Bermuda", - "bm", - "1441" - ], - [ - "Bhutan (འབྲུག)", - "bt", - "975" - ], - [ - "Bolivia", - "bo", - "591" - ], - [ - "Bosnia and Herzegovina (Босна и Херцеговина)", - "ba", - "387" - ], - [ - "Botswana", - "bw", - "267" - ], - [ - "Brazil (Brasil)", - "br", - "55" - ], - [ - "British Indian Ocean Territory", - "io", - "246" - ], - [ - "British Virgin Islands", - "vg", - "1284" - ], - [ - "Brunei", - "bn", - "673" - ], - [ - "Bulgaria (България)", - "bg", - "359" - ], - [ - "Burkina Faso", - "bf", - "226" - ], - [ - "Burundi (Uburundi)", - "bi", - "257" - ], - [ - "Cambodia (កម្ពុជា)", - "kh", - "855" - ], - [ - "Cameroon (Cameroun)", - "cm", - "237" - ], - [ - "Canada", - "ca", - "1", - 1, - ["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"] - ], - [ - "Cape Verde (Kabu Verdi)", - "cv", - "238" - ], - [ - "Caribbean Netherlands", - "bq", - "599", - 1 - ], - [ - "Cayman Islands", - "ky", - "1345" - ], - [ - "Central African Republic (République centrafricaine)", - "cf", - "236" - ], - [ - "Chad (Tchad)", - "td", - "235" - ], - [ - "Chile", - "cl", - "56" - ], - [ - "China (中国)", - "cn", - "86" - ], - [ - "Christmas Island", - "cx", - "61", - 2 - ], - [ - "Cocos (Keeling) Islands", - "cc", - "61", - 1 - ], - [ - "Colombia", - "co", - "57" - ], - [ - "Comoros (‫جزر القمر‬‎)", - "km", - "269" - ], - [ - "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", - "cd", - "243" - ], - [ - "Congo (Republic) (Congo-Brazzaville)", - "cg", - "242" - ], - [ - "Cook Islands", - "ck", - "682" - ], - [ - "Costa Rica", - "cr", - "506" - ], - [ - "Côte d’Ivoire", - "ci", - "225" - ], - [ - "Croatia (Hrvatska)", - "hr", - "385" - ], - [ - "Cuba", - "cu", - "53" - ], - [ - "Curaçao", - "cw", - "599", - 0 - ], - [ - "Cyprus (Κύπρος)", - "cy", - "357" - ], - [ - "Czech Republic (Česká republika)", - "cz", - "420" - ], - [ - "Denmark (Danmark)", - "dk", - "45" - ], - [ - "Djibouti", - "dj", - "253" - ], - [ - "Dominica", - "dm", - "1767" - ], - [ - "Dominican Republic (República Dominicana)", - "do", - "1", - 2, - ["809", "829", "849"] - ], - [ - "Ecuador", - "ec", - "593" - ], - [ - "Egypt (‫مصر‬‎)", - "eg", - "20" - ], - [ - "El Salvador", - "sv", - "503" - ], - [ - "Equatorial Guinea (Guinea Ecuatorial)", - "gq", - "240" - ], - [ - "Eritrea", - "er", - "291" - ], - [ - "Estonia (Eesti)", - "ee", - "372" - ], - [ - "Ethiopia", - "et", - "251" - ], - [ - "Falkland Islands (Islas Malvinas)", - "fk", - "500" - ], - [ - "Faroe Islands (Føroyar)", - "fo", - "298" - ], - [ - "Fiji", - "fj", - "679" - ], - [ - "Finland (Suomi)", - "fi", - "358", - 0 - ], - [ - "France", - "fr", - "33" - ], - [ - "French Guiana (Guyane française)", - "gf", - "594" - ], - [ - "French Polynesia (Polynésie française)", - "pf", - "689" - ], - [ - "Gabon", - "ga", - "241" - ], - [ - "Gambia", - "gm", - "220" - ], - [ - "Georgia (საქართველო)", - "ge", - "995" - ], - [ - "Germany (Deutschland)", - "de", - "49" - ], - [ - "Ghana (Gaana)", - "gh", - "233" - ], - [ - "Gibraltar", - "gi", - "350" - ], - [ - "Greece (Ελλάδα)", - "gr", - "30" - ], - [ - "Greenland (Kalaallit Nunaat)", - "gl", - "299" - ], - [ - "Grenada", - "gd", - "1473" - ], - [ - "Guadeloupe", - "gp", - "590", - 0 - ], - [ - "Guam", - "gu", - "1671" - ], - [ - "Guatemala", - "gt", - "502" - ], - [ - "Guernsey", - "gg", - "44", - 1 - ], - [ - "Guinea (Guinée)", - "gn", - "224" - ], - [ - "Guinea-Bissau (Guiné Bissau)", - "gw", - "245" - ], - [ - "Guyana", - "gy", - "592" - ], - [ - "Haiti", - "ht", - "509" - ], - [ - "Honduras", - "hn", - "504" - ], - [ - "Hong Kong (香港)", - "hk", - "852" - ], - [ - "Hungary (Magyarország)", - "hu", - "36" - ], - [ - "Iceland (Ísland)", - "is", - "354" - ], - [ - "India (भारत)", - "in", - "91" - ], - [ - "Indonesia", - "id", - "62" - ], - [ - "Iran (‫ایران‬‎)", - "ir", - "98" - ], - [ - "Iraq (‫العراق‬‎)", - "iq", - "964" - ], - [ - "Ireland", - "ie", - "353" - ], - [ - "Isle of Man", - "im", - "44", - 2 - ], - [ - "Israel (‫ישראל‬‎)", - "il", - "972" - ], - [ - "Italy (Italia)", - "it", - "39", - 0 - ], - [ - "Jamaica", - "jm", - "1876" - ], - [ - "Japan (日本)", - "jp", - "81" - ], - [ - "Jersey", - "je", - "44", - 3 - ], - [ - "Jordan (‫الأردن‬‎)", - "jo", - "962" - ], - [ - "Kazakhstan (Казахстан)", - "kz", - "7", - 1 - ], - [ - "Kenya", - "ke", - "254" - ], - [ - "Kiribati", - "ki", - "686" - ], - [ - "Kosovo", - "xk", - "383" - ], - [ - "Kuwait (‫الكويت‬‎)", - "kw", - "965" - ], - [ - "Kyrgyzstan (Кыргызстан)", - "kg", - "996" - ], - [ - "Laos (ລາວ)", - "la", - "856" - ], - [ - "Latvia (Latvija)", - "lv", - "371" - ], - [ - "Lebanon (‫لبنان‬‎)", - "lb", - "961" - ], - [ - "Lesotho", - "ls", - "266" - ], - [ - "Liberia", - "lr", - "231" - ], - [ - "Libya (‫ليبيا‬‎)", - "ly", - "218" - ], - [ - "Liechtenstein", - "li", - "423" - ], - [ - "Lithuania (Lietuva)", - "lt", - "370" - ], - [ - "Luxembourg", - "lu", - "352" - ], - [ - "Macau (澳門)", - "mo", - "853" - ], - [ - "Macedonia (FYROM) (Македонија)", - "mk", - "389" - ], - [ - "Madagascar (Madagasikara)", - "mg", - "261" - ], - [ - "Malawi", - "mw", - "265" - ], - [ - "Malaysia", - "my", - "60" - ], - [ - "Maldives", - "mv", - "960" - ], - [ - "Mali", - "ml", - "223" - ], - [ - "Malta", - "mt", - "356" - ], - [ - "Marshall Islands", - "mh", - "692" - ], - [ - "Martinique", - "mq", - "596" - ], - [ - "Mauritania (‫موريتانيا‬‎)", - "mr", - "222" - ], - [ - "Mauritius (Moris)", - "mu", - "230" - ], - [ - "Mayotte", - "yt", - "262", - 1 - ], - [ - "Mexico (México)", - "mx", - "52" - ], - [ - "Micronesia", - "fm", - "691" - ], - [ - "Moldova (Republica Moldova)", - "md", - "373" - ], - [ - "Monaco", - "mc", - "377" - ], - [ - "Mongolia (Монгол)", - "mn", - "976" - ], - [ - "Montenegro (Crna Gora)", - "me", - "382" - ], - [ - "Montserrat", - "ms", - "1664" - ], - [ - "Morocco (‫المغرب‬‎)", - "ma", - "212", - 0 - ], - [ - "Mozambique (Moçambique)", - "mz", - "258" - ], - [ - "Myanmar (Burma) (မြန်မာ)", - "mm", - "95" - ], - [ - "Namibia (Namibië)", - "na", - "264" - ], - [ - "Nauru", - "nr", - "674" - ], - [ - "Nepal (नेपाल)", - "np", - "977" - ], - [ - "Netherlands (Nederland)", - "nl", - "31" - ], - [ - "New Caledonia (Nouvelle-Calédonie)", - "nc", - "687" - ], - [ - "New Zealand", - "nz", - "64" - ], - [ - "Nicaragua", - "ni", - "505" - ], - [ - "Niger (Nijar)", - "ne", - "227" - ], - [ - "Nigeria", - "ng", - "234" - ], - [ - "Niue", - "nu", - "683" - ], - [ - "Norfolk Island", - "nf", - "672" - ], - [ - "North Korea (조선 민주주의 인민 공화국)", - "kp", - "850" - ], - [ - "Northern Mariana Islands", - "mp", - "1670" - ], - [ - "Norway (Norge)", - "no", - "47", - 0 - ], - [ - "Oman (‫عُمان‬‎)", - "om", - "968" - ], - [ - "Pakistan (‫پاکستان‬‎)", - "pk", - "92" - ], - [ - "Palau", - "pw", - "680" - ], - [ - "Palestine (‫فلسطين‬‎)", - "ps", - "970" - ], - [ - "Panama (Panamá)", - "pa", - "507" - ], - [ - "Papua New Guinea", - "pg", - "675" - ], - [ - "Paraguay", - "py", - "595" - ], - [ - "Peru (Perú)", - "pe", - "51" - ], - [ - "Philippines", - "ph", - "63" - ], - [ - "Poland (Polska)", - "pl", - "48" - ], - [ - "Portugal", - "pt", - "351" - ], - [ - "Puerto Rico", - "pr", - "1", - 3, - ["787", "939"] - ], - [ - "Qatar (‫قطر‬‎)", - "qa", - "974" - ], - [ - "Réunion (La Réunion)", - "re", - "262", - 0 - ], - [ - "Romania (România)", - "ro", - "40" - ], - [ - "Russia (Россия)", - "ru", - "7", - 0 - ], - [ - "Rwanda", - "rw", - "250" - ], - [ - "Saint Barthélemy", - "bl", - "590", - 1 - ], - [ - "Saint Helena", - "sh", - "290" - ], - [ - "Saint Kitts and Nevis", - "kn", - "1869" - ], - [ - "Saint Lucia", - "lc", - "1758" - ], - [ - "Saint Martin (Saint-Martin (partie française))", - "mf", - "590", - 2 - ], - [ - "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", - "pm", - "508" - ], - [ - "Saint Vincent and the Grenadines", - "vc", - "1784" - ], - [ - "Samoa", - "ws", - "685" - ], - [ - "San Marino", - "sm", - "378" - ], - [ - "São Tomé and Príncipe (São Tomé e Príncipe)", - "st", - "239" - ], - [ - "Saudi Arabia (‫المملكة العربية السعودية‬‎)", - "sa", - "966" - ], - [ - "Senegal (Sénégal)", - "sn", - "221" - ], - [ - "Serbia (Србија)", - "rs", - "381" - ], - [ - "Seychelles", - "sc", - "248" - ], - [ - "Sierra Leone", - "sl", - "232" - ], - [ - "Singapore", - "sg", - "65" - ], - [ - "Sint Maarten", - "sx", - "1721" - ], - [ - "Slovakia (Slovensko)", - "sk", - "421" - ], - [ - "Slovenia (Slovenija)", - "si", - "386" - ], - [ - "Solomon Islands", - "sb", - "677" - ], - [ - "Somalia (Soomaaliya)", - "so", - "252" - ], - [ - "South Africa", - "za", - "27" - ], - [ - "South Korea (대한민국)", - "kr", - "82" - ], - [ - "South Sudan (‫جنوب السودان‬‎)", - "ss", - "211" - ], - [ - "Spain (España)", - "es", - "34" - ], - [ - "Sri Lanka (ශ්‍රී ලංකාව)", - "lk", - "94" - ], - [ - "Sudan (‫السودان‬‎)", - "sd", - "249" - ], - [ - "Suriname", - "sr", - "597" - ], - [ - "Svalbard and Jan Mayen", - "sj", - "47", - 1 - ], - [ - "Swaziland", - "sz", - "268" - ], - [ - "Sweden (Sverige)", - "se", - "46" - ], - [ - "Switzerland (Schweiz)", - "ch", - "41" - ], - [ - "Syria (‫سوريا‬‎)", - "sy", - "963" - ], - [ - "Taiwan (台灣)", - "tw", - "886" - ], - [ - "Tajikistan", - "tj", - "992" - ], - [ - "Tanzania", - "tz", - "255" - ], - [ - "Thailand (ไทย)", - "th", - "66" - ], - [ - "Timor-Leste", - "tl", - "670" - ], - [ - "Togo", - "tg", - "228" - ], - [ - "Tokelau", - "tk", - "690" - ], - [ - "Tonga", - "to", - "676" - ], - [ - "Trinidad and Tobago", - "tt", - "1868" - ], - [ - "Tunisia (‫تونس‬‎)", - "tn", - "216" - ], - [ - "Turkey (Türkiye)", - "tr", - "90" - ], - [ - "Turkmenistan", - "tm", - "993" - ], - [ - "Turks and Caicos Islands", - "tc", - "1649" - ], - [ - "Tuvalu", - "tv", - "688" - ], - [ - "U.S. Virgin Islands", - "vi", - "1340" - ], - [ - "Uganda", - "ug", - "256" - ], - [ - "Ukraine (Україна)", - "ua", - "380" - ], - [ - "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", - "ae", - "971" - ], - [ - "United Kingdom", - "gb", - "44", - 0 - ], - [ - "United States", - "us", - "1", - 0 - ], - [ - "Uruguay", - "uy", - "598" - ], - [ - "Uzbekistan (OÊ»zbekiston)", - "uz", - "998" - ], - [ - "Vanuatu", - "vu", - "678" - ], - [ - "Vatican City (Città del Vaticano)", - "va", - "39", - 1 - ], - [ - "Venezuela", - "ve", - "58" - ], - [ - "Vietnam (Việt Nam)", - "vn", - "84" - ], - [ - "Wallis and Futuna (Wallis-et-Futuna)", - "wf", - "681" - ], - [ - "Western Sahara (‫الصحراء الغربية‬‎)", - "eh", - "212", - 1 - ], - [ - "Yemen (‫اليمن‬‎)", - "ye", - "967" - ], - [ - "Zambia", - "zm", - "260" - ], - [ - "Zimbabwe", - "zw", - "263" - ], - [ - "Åland Islands", - "ax", - "358", - 1 - ] - ]; - - return d; -} \ No newline at end of file diff --git a/Roo/bootstrap/Radio.js b/Roo/bootstrap/Radio.js deleted file mode 100644 index cddcdd1169..0000000000 --- a/Roo/bootstrap/Radio.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - * - LGPL - * - * RadioItem - * - */ - -/** - * @class Roo.bootstrap.Radio - * @extends Roo.bootstrap.Component - * Bootstrap Radio class - * @cfg {String} boxLabel - the label associated - * @cfg {String} value - the value of radio - * - * @constructor - * Create a new Radio - * @param {Object} config The config object - */ -Roo.bootstrap.Radio = function(config){ - Roo.bootstrap.Radio.superclass.constructor.call(this, config); - -}; - -Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, { - - boxLabel : '', - - value : '', - - getAutoCreate : function() - { - var cfg = { - tag : 'div', - cls : 'form-group radio', - cn : [ - { - tag : 'label', - cls : 'box-label', - html : this.boxLabel - } - ] - }; - - return cfg; - }, - - initEvents : function() - { - this.parent().register(this); - - this.el.on('click', this.onClick, this); - - }, - - onClick : function(e) - { - if(this.parent().fireEvent('click', this.parent(), this, e) !== false){ - this.setChecked(true); - } - }, - - setChecked : function(state, suppressEvent) - { - this.parent().setValue(this.value, suppressEvent); - - }, - - setBoxLabel : function(v) - { - this.boxLabel = v; - - if(this.rendered){ - this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v); - } - } - -}); - - - \ No newline at end of file diff --git a/Roo/bootstrap/RadioSet.js b/Roo/bootstrap/RadioSet.js deleted file mode 100644 index b654347abd..0000000000 --- a/Roo/bootstrap/RadioSet.js +++ /dev/null @@ -1,344 +0,0 @@ -/* - * - LGPL - * - * RadioSet - * - * - */ - -/** - * @class Roo.bootstrap.RadioSet - * @extends Roo.bootstrap.Input - * @children Roo.bootstrap.Radio - * Bootstrap RadioSet class - * @cfg {String} indicatorpos (left|right) default left - * @cfg {Boolean} inline (true|false) inline the element (default true) - * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio - * @constructor - * Create a new RadioSet - * @param {Object} config The config object - */ - -Roo.bootstrap.RadioSet = function(config){ - - Roo.bootstrap.RadioSet.superclass.constructor.call(this, config); - - this.radioes = []; - - Roo.bootstrap.RadioSet.register(this); - - this.addEvents({ - /** - * @event check - * Fires when the element is checked or unchecked. - * @param {Roo.bootstrap.RadioSet} this This radio - * @param {Roo.bootstrap.Radio} item The checked item - */ - check : true, - /** - * @event click - * Fires when the element is click. - * @param {Roo.bootstrap.RadioSet} this This radio set - * @param {Roo.bootstrap.Radio} item The checked item - * @param {Roo.EventObject} e The event object - */ - click : true - }); - -}; - -Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { - - radioes : false, - - inline : true, - - weight : '', - - indicatorpos : 'left', - - getAutoCreate : function() - { - var label = { - tag : 'label', - cls : 'roo-radio-set-label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - } - ] - }; - if (Roo.bootstrap.version == 3) { - - - if(this.indicatorpos == 'left'){ - label.cn.unshift({ - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); - } else { - label.cn.push({ - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); - } - } - var items = { - tag : 'div', - cls : 'roo-radio-set-items' - }; - - var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign; - - if (align === 'left' && this.fieldLabel.length) { - - items = { - cls : "roo-radio-set-right", - cn: [ - items - ] - }; - - if(this.labelWidth > 12){ - label.style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - label.cls += ' col-lg-' + this.labellg; - items.cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - label.cls += ' col-md-' + this.labelmd; - items.cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - label.cls += ' col-sm-' + this.labelsm; - items.cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - label.cls += ' col-xs-' + this.labelxs; - items.cls += ' col-xs-' + (12 - this.labelxs); - } - } - - var cfg = { - tag : 'div', - cls : 'roo-radio-set', - cn : [ - { - tag : 'input', - cls : 'roo-radio-set-input', - type : 'hidden', - name : this.name, - value : this.value ? this.value : '' - }, - label, - items - ] - }; - - if(this.weight.length){ - cfg.cls += ' roo-radio-' + this.weight; - } - - if(this.inline) { - cfg.cls += ' roo-radio-set-inline'; - } - - var settings=this; - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - return cfg; - - }, - - initEvents : function() - { - this.labelEl = this.el.select('.roo-radio-set-label', true).first(); - this.labelEl.setVisibilityMode(Roo.Element.DISPLAY); - - if(!this.fieldLabel.length){ - this.labelEl.hide(); - } - - this.itemsEl = this.el.select('.roo-radio-set-items', true).first(); - this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY); - - this.indicator = this.indicatorEl(); - - if(this.indicator){ - this.indicator.addClass('invisible'); - } - - this.originalValue = this.getValue(); - - }, - - inputEl: function () - { - return this.el.select('.roo-radio-set-input', true).first(); - }, - - getChildContainer : function() - { - return this.itemsEl; - }, - - register : function(item) - { - this.radioes.push(item); - - }, - - validate : function() - { - if(this.getVisibilityEl().hasClass('hidden')){ - return true; - } - - var valid = false; - - Roo.each(this.radioes, function(i){ - if(!i.checked){ - return; - } - - valid = true; - return false; - }); - - if(this.allowBlank) { - return true; - } - - if(this.disabled || valid){ - this.markValid(); - return true; - } - - this.markInvalid(); - return false; - - }, - - markValid : function() - { - if(this.labelEl.isVisible(true) && this.indicatorEl()){ - this.indicatorEl().removeClass('visible'); - this.indicatorEl().addClass('invisible'); - } - - - if (Roo.bootstrap.version == 3) { - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.validClass); - } else { - this.el.removeClass(['is-invalid','is-valid']); - this.el.addClass(['is-valid']); - } - this.fireEvent('valid', this); - }, - - markInvalid : function(msg) - { - if(this.allowBlank || this.disabled){ - return; - } - - if(this.labelEl.isVisible(true) && this.indicatorEl()){ - this.indicatorEl().removeClass('invisible'); - this.indicatorEl().addClass('visible'); - } - if (Roo.bootstrap.version == 3) { - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.invalidClass); - } else { - this.el.removeClass(['is-invalid','is-valid']); - this.el.addClass(['is-invalid']); - } - - this.fireEvent('invalid', this, msg); - - }, - - setValue : function(v, suppressEvent) - { - if(this.value === v){ - return; - } - - this.value = v; - - if(this.rendered){ - this.inputEl().dom.value = (v === null || v === undefined ? '' : v); - } - - Roo.each(this.radioes, function(i){ - i.checked = false; - i.el.removeClass('checked'); - }); - - Roo.each(this.radioes, function(i){ - - if(i.value === v || i.value.toString() === v.toString()){ - i.checked = true; - i.el.addClass('checked'); - - if(suppressEvent !== true){ - this.fireEvent('check', this, i); - } - - return false; - } - - }, this); - - this.validate(); - }, - - clearInvalid : function(){ - - if(!this.el || this.preventMark){ - return; - } - - this.el.removeClass([this.invalidClass]); - - this.fireEvent('valid', this); - } - -}); - -Roo.apply(Roo.bootstrap.RadioSet, { - - groups: {}, - - register : function(set) - { - this.groups[set.name] = set; - }, - - get: function(name) - { - if (typeof(this.groups[name]) == 'undefined') { - return false; - } - - return this.groups[name] ; - } - -}); diff --git a/Roo/bootstrap/SecurePass.js b/Roo/bootstrap/SecurePass.js deleted file mode 100644 index bbb84ca8d1..0000000000 --- a/Roo/bootstrap/SecurePass.js +++ /dev/null @@ -1,354 +0,0 @@ -/* - * - LGPL - * - * Input - * - */ - -/** - * @class Roo.bootstrap.SecurePass - * @extends Roo.bootstrap.Input - * Bootstrap SecurePass class - * - * - * @constructor - * Create a new SecurePass - * @param {Object} config The config object - */ - -Roo.bootstrap.SecurePass = function (config) { - // these go here, so the translation tool can replace them.. - this.errors = { - PwdEmpty: "Please type a password, and then retype it to confirm.", - PwdShort: "Your password must be at least 6 characters long. Please type a different password.", - PwdLong: "Your password can't contain more than 16 characters. Please type a different password.", - PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.", - IDInPwd: "Your password can't include the part of your ID. Please type a different password.", - FNInPwd: "Your password can't contain your first name. Please type a different password.", - LNInPwd: "Your password can't contain your last name. Please type a different password.", - TooWeak: "Your password is Too Weak." - }, - this.meterLabel = "Password strength:"; - this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"]; - this.meterClass = [ - "roo-password-meter-tooweak", - "roo-password-meter-weak", - "roo-password-meter-medium", - "roo-password-meter-strong", - "roo-password-meter-grey" - ]; - - this.errors = {}; - - Roo.bootstrap.SecurePass.superclass.constructor.call(this, config); -} - -Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { - /** - * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to - * { - * PwdEmpty: "Please type a password, and then retype it to confirm.", - * PwdShort: "Your password must be at least 6 characters long. Please type a different password.", - * PwdLong: "Your password can't contain more than 16 characters. Please type a different password.", - * PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.", - * IDInPwd: "Your password can't include the part of your ID. Please type a different password.", - * FNInPwd: "Your password can't contain your first name. Please type a different password.", - * LNInPwd: "Your password can't contain your last name. Please type a different password." - * }) - */ - // private - - meterWidth: 300, - errorMsg :'', - errors: false, - imageRoot: '/', - /** - * @cfg {String/Object} Label for the strength meter (defaults to - * 'Password strength:') - */ - // private - meterLabel: '', - /** - * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to - * ['Weak', 'Medium', 'Strong']) - */ - // private - pwdStrengths: false, - // private - strength: 0, - // private - _lastPwd: null, - // private - kCapitalLetter: 0, - kSmallLetter: 1, - kDigit: 2, - kPunctuation: 3, - - insecure: false, - // private - initEvents: function () - { - Roo.bootstrap.SecurePass.superclass.initEvents.call(this); - - if (this.el.is('input[type=password]') && Roo.isSafari) { - this.el.on('keydown', this.SafariOnKeyDown, this); - } - - this.el.on('keyup', this.checkStrength, this, {buffer: 50}); - }, - // private - onRender: function (ct, position) - { - Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position); - this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); - this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass}); - - this.trigger.createChild({ - cn: [ - { - //id: 'PwdMeter', - tag: 'div', - cls: 'roo-password-meter-grey col-xs-12', - style: { - //width: 0, - //width: this.meterWidth + 'px' - } - }, - { - cls: 'roo-password-meter-text' - } - ] - }); - - - if (this.hideTrigger) { - this.trigger.setDisplayed(false); - } - this.setSize(this.width || '', this.height || ''); - }, - // private - onDestroy: function () - { - if (this.trigger) { - this.trigger.removeAllListeners(); - this.trigger.remove(); - } - if (this.wrap) { - this.wrap.remove(); - } - Roo.bootstrap.TriggerField.superclass.onDestroy.call(this); - }, - // private - checkStrength: function () - { - var pwd = this.inputEl().getValue(); - if (pwd == this._lastPwd) { - return; - } - - var strength; - if (this.ClientSideStrongPassword(pwd)) { - strength = 3; - } else if (this.ClientSideMediumPassword(pwd)) { - strength = 2; - } else if (this.ClientSideWeakPassword(pwd)) { - strength = 1; - } else { - strength = 0; - } - - Roo.log('strength1: ' + strength); - - //var pm = this.trigger.child('div/div/div').dom; - var pm = this.trigger.child('div/div'); - pm.removeClass(this.meterClass); - pm.addClass(this.meterClass[strength]); - - - var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom; - - pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength]; - - this._lastPwd = pwd; - }, - reset: function () - { - Roo.bootstrap.SecurePass.superclass.reset.call(this); - - this._lastPwd = ''; - - var pm = this.trigger.child('div/div'); - pm.removeClass(this.meterClass); - pm.addClass('roo-password-meter-grey'); - - - var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom; - - pt.innerHTML = ''; - this.inputEl().dom.type='password'; - }, - // private - validateValue: function (value) - { - if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) { - return false; - } - if (value.length == 0) { - if (this.allowBlank) { - this.clearInvalid(); - return true; - } - - this.markInvalid(this.errors.PwdEmpty); - this.errorMsg = this.errors.PwdEmpty; - return false; - } - - if(this.insecure){ - return true; - } - - if (!value.match(/[\x21-\x7e]+/)) { - this.markInvalid(this.errors.PwdBadChar); - this.errorMsg = this.errors.PwdBadChar; - return false; - } - if (value.length < 6) { - this.markInvalid(this.errors.PwdShort); - this.errorMsg = this.errors.PwdShort; - return false; - } - if (value.length > 16) { - this.markInvalid(this.errors.PwdLong); - this.errorMsg = this.errors.PwdLong; - return false; - } - var strength; - if (this.ClientSideStrongPassword(value)) { - strength = 3; - } else if (this.ClientSideMediumPassword(value)) { - strength = 2; - } else if (this.ClientSideWeakPassword(value)) { - strength = 1; - } else { - strength = 0; - } - - - if (strength < 2) { - //this.markInvalid(this.errors.TooWeak); - this.errorMsg = this.errors.TooWeak; - //return false; - } - - - console.log('strength2: ' + strength); - - //var pm = this.trigger.child('div/div/div').dom; - - var pm = this.trigger.child('div/div'); - pm.removeClass(this.meterClass); - pm.addClass(this.meterClass[strength]); - - var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom; - - pt.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength]; - - this.errorMsg = ''; - return true; - }, - // private - CharacterSetChecks: function (type) - { - this.type = type; - this.fResult = false; - }, - // private - isctype: function (character, type) - { - switch (type) { - case this.kCapitalLetter: - if (character >= 'A' && character <= 'Z') { - return true; - } - break; - - case this.kSmallLetter: - if (character >= 'a' && character <= 'z') { - return true; - } - break; - - case this.kDigit: - if (character >= '0' && character <= '9') { - return true; - } - break; - - case this.kPunctuation: - if ('!@#$%^&*()_+-=\'";:[{]}|.>,= 0) { - return true; - } - break; - - default: - return false; - } - - }, - // private - IsLongEnough: function (pwd, size) - { - return !(pwd == null || isNaN(size) || pwd.length < size); - }, - // private - SpansEnoughCharacterSets: function (word, nb) - { - if (!this.IsLongEnough(word, nb)) - { - return false; - } - - var characterSetChecks = new Array( - new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter), - new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation) - ); - - for (var index = 0; index < word.length; ++index) { - for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) { - if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) { - characterSetChecks[nCharSet].fResult = true; - break; - } - } - } - - var nCharSets = 0; - for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) { - if (characterSetChecks[nCharSet].fResult) { - ++nCharSets; - } - } - - if (nCharSets < nb) { - return false; - } - return true; - }, - // private - ClientSideStrongPassword: function (pwd) - { - return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3); - }, - // private - ClientSideMediumPassword: function (pwd) - { - return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2); - }, - // private - ClientSideWeakPassword: function (pwd) - { - return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0); - } - -}) \ No newline at end of file diff --git a/Roo/bootstrap/Table/AbstractSelectionModel.js b/Roo/bootstrap/Table/AbstractSelectionModel.js deleted file mode 100644 index 6d80350cbd..0000000000 --- a/Roo/bootstrap/Table/AbstractSelectionModel.js +++ /dev/null @@ -1,5 +0,0 @@ - -/** - * @depricated - * Just use grid selection model - */ diff --git a/Roo/bootstrap/Table/RowSelectionModel.js b/Roo/bootstrap/Table/RowSelectionModel.js deleted file mode 100644 index eaf7c33bfe..0000000000 --- a/Roo/bootstrap/Table/RowSelectionModel.js +++ /dev/null @@ -1,495 +0,0 @@ - -/** - * @deprecated - * - * - */ - -Roo.bootstrap.Table.RowSelectionModel = function(config){ - Roo.apply(this, config); - this.selections = new Roo.util.MixedCollection(false, function(o){ - return o.id; - }); - - this.last = false; - this.lastActive = false; - - this.addEvents({ - /** - * @event selectionchange - * Fires when the selection changes - * @param {SelectionModel} this - */ - "selectionchange" : true, - /** - * @event afterselectionchange - * Fires after the selection changes (eg. by key press or clicking) - * @param {SelectionModel} this - */ - "afterselectionchange" : true, - /** - * @event beforerowselect - * Fires when a row is selected being selected, return false to cancel. - * @param {SelectionModel} this - * @param {Number} rowIndex The selected index - * @param {Boolean} keepExisting False if other selections will be cleared - */ - "beforerowselect" : true, - /** - * @event rowselect - * Fires when a row is selected. - * @param {SelectionModel} this - * @param {Number} rowIndex The selected index - * @param {Roo.data.Record} r The record - */ - "rowselect" : true, - /** - * @event rowdeselect - * Fires when a row is deselected. - * @param {SelectionModel} this - * @param {Number} rowIndex The selected index - */ - "rowdeselect" : true - }); - Roo.bootstrap.Table.RowSelectionModel.superclass.constructor.call(this); - this.locked = false; - }; - -Roo.extend(Roo.bootstrap.Table.RowSelectionModel, Roo.bootstrap.Table.AbstractSelectionModel, { - /** - * @cfg {Boolean} singleSelect - * True to allow selection of only one row at a time (defaults to false) - */ - singleSelect : false, - - // private - initEvents : function() - { - - //if(!this.grid.enableDragDrop && !this.grid.enableDrag){ - // this.growclickrid.on("mousedown", this.handleMouseDown, this); - //}else{ // allow click to work like normal - // this.grid.on("rowclick", this.handleDragableRowClick, this); - //} - //this.grid.on("rowdblclick", this.handleMouseDBClick, this); - this.grid.on("rowclick", this.handleMouseDown, this); - - this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), { - "up" : function(e){ - if(!e.shiftKey){ - this.selectPrevious(e.shiftKey); - }else if(this.last !== false && this.lastActive !== false){ - var last = this.last; - this.selectRange(this.last, this.lastActive-1); - this.grid.getView().focusRow(this.lastActive); - if(last !== false){ - this.last = last; - } - }else{ - this.selectFirstRow(); - } - this.fireEvent("afterselectionchange", this); - }, - "down" : function(e){ - if(!e.shiftKey){ - this.selectNext(e.shiftKey); - }else if(this.last !== false && this.lastActive !== false){ - var last = this.last; - this.selectRange(this.last, this.lastActive+1); - this.grid.getView().focusRow(this.lastActive); - if(last !== false){ - this.last = last; - } - }else{ - this.selectFirstRow(); - } - this.fireEvent("afterselectionchange", this); - }, - scope: this - }); - this.grid.store.on('load', function(){ - this.selections.clear(); - },this); - /* - var view = this.grid.view; - view.on("refresh", this.onRefresh, this); - view.on("rowupdated", this.onRowUpdated, this); - view.on("rowremoved", this.onRemove, this); - */ - }, - - // private - onRefresh : function() - { - var ds = this.grid.store, i, v = this.grid.view; - var s = this.selections; - s.each(function(r){ - if((i = ds.indexOfId(r.id)) != -1){ - v.onRowSelect(i); - }else{ - s.remove(r); - } - }); - }, - - // private - onRemove : function(v, index, r){ - this.selections.remove(r); - }, - - // private - onRowUpdated : function(v, index, r){ - if(this.isSelected(r)){ - v.onRowSelect(index); - } - }, - - /** - * Select records. - * @param {Array} records The records to select - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectRecords : function(records, keepExisting) - { - if(!keepExisting){ - this.clearSelections(); - } - var ds = this.grid.store; - for(var i = 0, len = records.length; i < len; i++){ - this.selectRow(ds.indexOf(records[i]), true); - } - }, - - /** - * Gets the number of selected rows. - * @return {Number} - */ - getCount : function(){ - return this.selections.length; - }, - - /** - * Selects the first row in the grid. - */ - selectFirstRow : function(){ - this.selectRow(0); - }, - - /** - * Select the last row. - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectLastRow : function(keepExisting){ - //this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting); - this.selectRow(this.grid.store.getCount() - 1, keepExisting); - }, - - /** - * Selects the row immediately following the last selected row. - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectNext : function(keepExisting) - { - if(this.last !== false && (this.last+1) < this.grid.store.getCount()){ - this.selectRow(this.last+1, keepExisting); - this.grid.getView().focusRow(this.last); - } - }, - - /** - * Selects the row that precedes the last selected row. - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectPrevious : function(keepExisting){ - if(this.last){ - this.selectRow(this.last-1, keepExisting); - this.grid.getView().focusRow(this.last); - } - }, - - /** - * Returns the selected records - * @return {Array} Array of selected records - */ - getSelections : function(){ - return [].concat(this.selections.items); - }, - - /** - * Returns the first selected record. - * @return {Record} - */ - getSelected : function(){ - return this.selections.itemAt(0); - }, - - - /** - * Clears all selections. - */ - clearSelections : function(fast) - { - if(this.locked) { - return; - } - if(fast !== true){ - var ds = this.grid.store; - var s = this.selections; - s.each(function(r){ - this.deselectRow(ds.indexOfId(r.id)); - }, this); - s.clear(); - }else{ - this.selections.clear(); - } - this.last = false; - }, - - - /** - * Selects all rows. - */ - selectAll : function(){ - if(this.locked) { - return; - } - this.selections.clear(); - for(var i = 0, len = this.grid.store.getCount(); i < len; i++){ - this.selectRow(i, true); - } - }, - - /** - * Returns True if there is a selection. - * @return {Boolean} - */ - hasSelection : function(){ - return this.selections.length > 0; - }, - - /** - * Returns True if the specified row is selected. - * @param {Number/Record} record The record or index of the record to check - * @return {Boolean} - */ - isSelected : function(index){ - var r = typeof index == "number" ? this.grid.store.getAt(index) : index; - return (r && this.selections.key(r.id) ? true : false); - }, - - /** - * Returns True if the specified record id is selected. - * @param {String} id The id of record to check - * @return {Boolean} - */ - isIdSelected : function(id){ - return (this.selections.key(id) ? true : false); - }, - - - // private - handleMouseDBClick : function(e, t){ - - }, - // private - handleMouseDown : function(e, t) - { - var rowIndex = this.grid.headerShow ? t.dom.rowIndex - 1 : t.dom.rowIndex ; // first row is header??? - if(this.isLocked() || rowIndex < 0 ){ - return; - }; - if(e.shiftKey && this.last !== false){ - var last = this.last; - this.selectRange(last, rowIndex, e.ctrlKey); - this.last = last; // reset the last - t.focus(); - - }else{ - var isSelected = this.isSelected(rowIndex); - //Roo.log("select row:" + rowIndex); - if(isSelected){ - this.deselectRow(rowIndex); - } else { - this.selectRow(rowIndex, true); - } - - /* - if(e.button !== 0 && isSelected){ - alert('rowIndex 2: ' + rowIndex); - view.focusRow(rowIndex); - }else if(e.ctrlKey && isSelected){ - this.deselectRow(rowIndex); - }else if(!isSelected){ - this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey)); - view.focusRow(rowIndex); - } - */ - } - this.fireEvent("afterselectionchange", this); - }, - // private - handleDragableRowClick : function(grid, rowIndex, e) - { - if(e.button === 0 && !e.shiftKey && !e.ctrlKey) { - this.selectRow(rowIndex, false); - grid.view.focusRow(rowIndex); - this.fireEvent("afterselectionchange", this); - } - }, - - /** - * Selects multiple rows. - * @param {Array} rows Array of the indexes of the row to select - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectRows : function(rows, keepExisting){ - if(!keepExisting){ - this.clearSelections(); - } - for(var i = 0, len = rows.length; i < len; i++){ - this.selectRow(rows[i], true); - } - }, - - /** - * Selects a range of rows. All rows in between startRow and endRow are also selected. - * @param {Number} startRow The index of the first row in the range - * @param {Number} endRow The index of the last row in the range - * @param {Boolean} keepExisting (optional) True to retain existing selections - */ - selectRange : function(startRow, endRow, keepExisting){ - if(this.locked) { - return; - } - if(!keepExisting){ - this.clearSelections(); - } - if(startRow <= endRow){ - for(var i = startRow; i <= endRow; i++){ - this.selectRow(i, true); - } - }else{ - for(var i = startRow; i >= endRow; i--){ - this.selectRow(i, true); - } - } - }, - - /** - * Deselects a range of rows. All rows in between startRow and endRow are also deselected. - * @param {Number} startRow The index of the first row in the range - * @param {Number} endRow The index of the last row in the range - */ - deselectRange : function(startRow, endRow, preventViewNotify){ - if(this.locked) { - return; - } - for(var i = startRow; i <= endRow; i++){ - this.deselectRow(i, preventViewNotify); - } - }, - - /** - * Selects a row. - * @param {Number} row The index of the row to select - * @param {Boolean} keepExisting (optional) True to keep existing selections - */ - selectRow : function(index, keepExisting, preventViewNotify) - { - if(this.locked || (index < 0 || index > this.grid.store.getCount())) { - return; - } - if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){ - if(!keepExisting || this.singleSelect){ - this.clearSelections(); - } - - var r = this.grid.store.getAt(index); - //console.log('selectRow - record id :' + r.id); - - this.selections.add(r); - this.last = this.lastActive = index; - if(!preventViewNotify){ - var proxy = new Roo.Element( - this.grid.getRowDom(index) - ); - proxy.addClass('bg-info info'); - } - this.fireEvent("rowselect", this, index, r); - this.fireEvent("selectionchange", this); - } - }, - - /** - * Deselects a row. - * @param {Number} row The index of the row to deselect - */ - deselectRow : function(index, preventViewNotify) - { - if(this.locked) { - return; - } - if(this.last == index){ - this.last = false; - } - if(this.lastActive == index){ - this.lastActive = false; - } - - var r = this.grid.store.getAt(index); - if (!r) { - return; - } - - this.selections.remove(r); - //.console.log('deselectRow - record id :' + r.id); - if(!preventViewNotify){ - - var proxy = new Roo.Element( - this.grid.getRowDom(index) - ); - proxy.removeClass('bg-info info'); - } - this.fireEvent("rowdeselect", this, index); - this.fireEvent("selectionchange", this); - }, - - // private - restoreLast : function(){ - if(this._last){ - this.last = this._last; - } - }, - - // private - acceptsNav : function(row, col, cm){ - return !cm.isHidden(col) && cm.isCellEditable(col, row); - }, - - // private - onEditorKey : function(field, e){ - var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor; - if(k == e.TAB){ - e.stopEvent(); - ed.completeEdit(); - if(e.shiftKey){ - newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this); - }else{ - newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this); - } - }else if(k == e.ENTER && !e.ctrlKey){ - e.stopEvent(); - ed.completeEdit(); - if(e.shiftKey){ - newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this); - }else{ - newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this); - } - }else if(k == e.ESC){ - ed.cancelEdit(); - } - if(newCell){ - g.startEditing(newCell[0], newCell[1]); - } - } -}); diff --git a/Roo/bootstrap/TextArea.js b/Roo/bootstrap/TextArea.js deleted file mode 100644 index 3eb51d9c30..0000000000 --- a/Roo/bootstrap/TextArea.js +++ /dev/null @@ -1,369 +0,0 @@ -/* - * - LGPL - * - * Input - * - */ - -/** - * @class Roo.bootstrap.TextArea - * @extends Roo.bootstrap.Input - * Bootstrap TextArea class - * @cfg {Number} cols Specifies the visible width of a text area - * @cfg {Number} rows Specifies the visible number of lines in a text area - * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form - * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial) - * @cfg {string} html text - * - * @constructor - * Create a new TextArea - * @param {Object} config The config object - */ - -Roo.bootstrap.TextArea = function(config){ - Roo.bootstrap.TextArea.superclass.constructor.call(this, config); - -}; - -Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { - - cols : false, - rows : 5, - readOnly : false, - warp : 'soft', - resize : false, - value: false, - html: false, - - getAutoCreate : function(){ - - var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign; - - var id = Roo.id(); - - var cfg = {}; - - if(this.inputType != 'hidden'){ - cfg.cls = 'form-group' //input-group - } - - var input = { - tag: 'textarea', - id : id, - warp : this.warp, - rows : this.rows, - value : this.value || '', - html: this.html || '', - cls : 'form-control', - placeholder : this.placeholder || '' - - }; - - if(this.maxLength && this.maxLength != Number.MAX_VALUE){ - input.maxLength = this.maxLength; - } - - if(this.resize){ - input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize; - } - - if(this.cols){ - input.cols = this.cols; - } - - if (this.readOnly) { - input.readonly = true; - } - - if (this.name) { - input.name = this.name; - } - - if (this.size) { - input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size; - } - - var settings=this; - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - var inputblock = input; - - if(this.hasFeedback && !this.allowBlank){ - - var feedback = { - tag: 'span', - cls: 'glyphicon form-control-feedback' - }; - - inputblock = { - cls : 'has-feedback', - cn : [ - input, - feedback - ] - }; - } - - - if (this.before || this.after) { - - inputblock = { - cls : 'input-group', - cn : [] - }; - if (this.before) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon', - html : this.before - }); - } - - inputblock.cn.push(input); - - if(this.hasFeedback && !this.allowBlank){ - inputblock.cls += ' has-feedback'; - inputblock.cn.push(feedback); - } - - if (this.after) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon', - html : this.after - }); - } - - } - - if (align ==='left' && this.fieldLabel.length) { - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label', - html : this.fieldLabel - }, - { - cls : "", - cn: [ - inputblock - ] - } - - ]; - - if(this.labelWidth > 12){ - cfg.cn[0].style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - cfg.cn[0].cls += ' col-lg-' + this.labellg; - cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - cfg.cn[0].cls += ' col-md-' + this.labelmd; - cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - cfg.cn[0].cls += ' col-sm-' + this.labelsm; - cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - cfg.cn[0].cls += ' col-xs-' + this.labelxs; - cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs); - } - - } else if ( this.fieldLabel.length) { - cfg.cn = [ - - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - - inputblock - - ]; - - } else { - - cfg.cn = [ - - inputblock - - ]; - - } - - if (this.disabled) { - input.disabled=true; - } - - return cfg; - - }, - /** - * return the real textarea element. - */ - inputEl: function () - { - return this.el.select('textarea.form-control',true).first(); - }, - - /** - * Clear any invalid styles/messages for this field - */ - clearInvalid : function() - { - - if(!this.el || this.preventMark){ // not rendered - return; - } - - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(label && icon){ - icon.remove(); - } - this.el.removeClass( this.validClass); - this.inputEl().removeClass('is-invalid'); - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass); - } - - } - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as valid - */ - markValid : function() - { - if(!this.el || this.preventMark){ // not rendered - return; - } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.inputEl().removeClass(['is-valid', 'is-invalid']); - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - } - - if(this.disabled || this.allowBlank){ - return; - } - - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(label && icon){ - icon.remove(); - } - if (Roo.bootstrap.version == 3) { - this.el.addClass(this.validClass); - } else { - this.inputEl().addClass('is-valid'); - } - - - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]); - } - - } - - this.fireEvent('valid', this); - }, - - /** - * Mark this field as invalid - * @param {String} msg The validation message - */ - markInvalid : function(msg) - { - if(!this.el || this.preventMark){ // not rendered - return; - } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.inputEl().removeClass(['is-valid', 'is-invalid']); - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - } - - if(this.disabled || this.allowBlank){ - return; - } - - var label = this.el.select('label', true).first(); - var icon = this.el.select('i.fa-star', true).first(); - - if(!this.getValue().length && label && !icon){ - this.el.createChild({ - tag : 'i', - cls : 'text-danger fa fa-lg fa-star', - tooltip : 'This field is required', - style : 'margin-right:5px;' - }, label, true); - } - - if (Roo.bootstrap.version == 3) { - this.el.addClass(this.invalidClass); - } else { - this.inputEl().addClass('is-invalid'); - } - - // fixme ... this may be depricated need to test.. - if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ - - var feedback = this.el.select('.form-control-feedback', true).first(); - - if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); - - if(this.getValue().length || this.forceFeedback){ - this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]); - } - - } - - } - - this.fireEvent('invalid', this, msg); - } -}); - - diff --git a/Roo/bootstrap/TimeField.js b/Roo/bootstrap/TimeField.js deleted file mode 100644 index b258728282..0000000000 --- a/Roo/bootstrap/TimeField.js +++ /dev/null @@ -1,517 +0,0 @@ -/* - * - LGPL - * - * TimeField - * - */ - -/** - * @class Roo.bootstrap.TimeField - * @extends Roo.bootstrap.Input - * Bootstrap DateField class - * - * - * @constructor - * Create a new TimeField - * @param {Object} config The config object - */ - -Roo.bootstrap.TimeField = function(config){ - Roo.bootstrap.TimeField.superclass.constructor.call(this, config); - this.addEvents({ - /** - * @event show - * Fires when this field show. - * @param {Roo.bootstrap.DateField} thisthis - * @param {Mixed} date The date value - */ - show : true, - /** - * @event show - * Fires when this field hide. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - hide : true, - /** - * @event select - * Fires when select a date. - * @param {Roo.bootstrap.DateField} this - * @param {Mixed} date The date value - */ - select : true - }); -}; - -Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { - - /** - * @cfg {String} format - * The default time format string which can be overriden for localization support. The format must be - * valid according to {@link Date#parseDate} (defaults to 'H:i'). - */ - format : "H:i", - - getAutoCreate : function() - { - this.after = ''; - return Roo.bootstrap.TimeField.superclass.getAutoCreate.call(this); - - - }, - onRender: function(ct, position) - { - - Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position); - - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.TimeField.template); - - this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.pop = this.picker().select('>.datepicker-time',true).first(); - this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - - this.picker().on('mousedown', this.onMousedown, this); - this.picker().on('click', this.onClick, this); - - this.picker().addClass('datepicker-dropdown'); - - this.fillTime(); - this.update(); - - this.pop.select('.hours-up', true).first().on('click', this.onIncrementHours, this); - this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this); - this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this); - this.pop.select('.minutes-down', true).first().on('click', this.onDecrementMinutes, this); - this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this); - this.pop.select('button.ok', true).first().on('click', this.setTime, this); - - }, - - fireKey: function(e){ - if (!this.picker().isVisible()){ - if (e.keyCode == 27) { // allow escape to hide and re-show picker - this.show(); - } - return; - } - - e.preventDefault(); - - switch(e.keyCode){ - case 27: // escape - this.hide(); - break; - case 37: // left - case 39: // right - this.onTogglePeriod(); - break; - case 38: // up - this.onIncrementMinutes(); - break; - case 40: // down - this.onDecrementMinutes(); - break; - case 13: // enter - case 9: // tab - this.setTime(); - break; - } - }, - - onClick: function(e) { - e.stopPropagation(); - e.preventDefault(); - }, - - picker : function() - { - return this.pickerEl; - }, - - fillTime: function() - { - var time = this.pop.select('tbody', true).first(); - - time.dom.innerHTML = ''; - - time.createChild({ - tag: 'tr', - cn: [ - { - tag: 'td', - cn: [ - { - tag: 'a', - href: '#', - cls: 'btn', - cn: [ - { - tag: 'i', - cls: 'hours-up fa fas fa-chevron-up' - } - ] - } - ] - }, - { - tag: 'td', - cls: 'separator' - }, - { - tag: 'td', - cn: [ - { - tag: 'a', - href: '#', - cls: 'btn', - cn: [ - { - tag: 'i', - cls: 'minutes-up fa fas fa-chevron-up' - } - ] - } - ] - }, - { - tag: 'td', - cls: 'separator' - } - ] - }); - - time.createChild({ - tag: 'tr', - cn: [ - { - tag: 'td', - cn: [ - { - tag: 'span', - cls: 'timepicker-hour', - html: '00' - } - ] - }, - { - tag: 'td', - cls: 'separator', - html: ':' - }, - { - tag: 'td', - cn: [ - { - tag: 'span', - cls: 'timepicker-minute', - html: '00' - } - ] - }, - { - tag: 'td', - cls: 'separator' - }, - { - tag: 'td', - cn: [ - { - tag: 'button', - type: 'button', - cls: 'btn btn-primary period', - html: 'AM' - - } - ] - } - ] - }); - - time.createChild({ - tag: 'tr', - cn: [ - { - tag: 'td', - cn: [ - { - tag: 'a', - href: '#', - cls: 'btn', - cn: [ - { - tag: 'span', - cls: 'hours-down fa fas fa-chevron-down' - } - ] - } - ] - }, - { - tag: 'td', - cls: 'separator' - }, - { - tag: 'td', - cn: [ - { - tag: 'a', - href: '#', - cls: 'btn', - cn: [ - { - tag: 'span', - cls: 'minutes-down fa fas fa-chevron-down' - } - ] - } - ] - }, - { - tag: 'td', - cls: 'separator' - } - ] - }); - - }, - - update: function() - { - - this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time; - - this.fill(); - }, - - fill: function() - { - var hours = this.time.getHours(); - var minutes = this.time.getMinutes(); - var period = 'AM'; - - if(hours > 11){ - period = 'PM'; - } - - if(hours == 0){ - hours = 12; - } - - - if(hours > 12){ - hours = hours - 12; - } - - if(hours < 10){ - hours = '0' + hours; - } - - if(minutes < 10){ - minutes = '0' + minutes; - } - - this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours; - this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes; - this.pop.select('button', true).first().dom.innerHTML = period; - - }, - - place: function() - { - this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']); - - var cls = ['bottom']; - - if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top - cls.pop(); - cls.push('top'); - } - - cls.push('right'); - - if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left - cls.pop(); - cls.push('left'); - } - //this.picker().setXY(20000,20000); - this.picker().addClass(cls.join('-')); - - var _this = this; - - Roo.each(cls, function(c){ - if(c == 'bottom'){ - (function() { - // - }).defer(200); - _this.picker().alignTo(_this.inputEl(), "tr-br", [0, 10], false); - //_this.picker().setTop(_this.inputEl().getHeight()); - return; - } - if(c == 'top'){ - _this.picker().alignTo(_this.inputEl(), "br-tr", [0, 10], false); - - //_this.picker().setTop(0 - _this.picker().getHeight()); - return; - } - /* - if(c == 'left'){ - _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth()); - return; - } - if(c == 'right'){ - _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft()); - return; - } - */ - }); - - }, - - onFocus : function() - { - Roo.bootstrap.TimeField.superclass.onFocus.call(this); - this.show(); - }, - - onBlur : function() - { - Roo.bootstrap.TimeField.superclass.onBlur.call(this); - this.hide(); - }, - - show : function() - { - this.picker().show(); - this.pop.show(); - this.update(); - this.place(); - - this.fireEvent('show', this, this.date); - }, - - hide : function() - { - this.picker().hide(); - this.pop.hide(); - - this.fireEvent('hide', this, this.date); - }, - - setTime : function() - { - this.hide(); - this.setValue(this.time.format(this.format)); - - this.fireEvent('select', this, this.date); - - - }, - - onMousedown: function(e){ - e.stopPropagation(); - e.preventDefault(); - }, - - onIncrementHours: function() - { - Roo.log('onIncrementHours'); - this.time = this.time.add(Date.HOUR, 1); - this.update(); - - }, - - onDecrementHours: function() - { - Roo.log('onDecrementHours'); - this.time = this.time.add(Date.HOUR, -1); - this.update(); - }, - - onIncrementMinutes: function() - { - Roo.log('onIncrementMinutes'); - this.time = this.time.add(Date.MINUTE, 1); - this.update(); - }, - - onDecrementMinutes: function() - { - Roo.log('onDecrementMinutes'); - this.time = this.time.add(Date.MINUTE, -1); - this.update(); - }, - - onTogglePeriod: function() - { - Roo.log('onTogglePeriod'); - this.time = this.time.add(Date.HOUR, 12); - this.update(); - } - - -}); - - -Roo.apply(Roo.bootstrap.TimeField, { - - template : { - tag: 'div', - cls: 'datepicker dropdown-menu', - cn: [ - { - tag: 'div', - cls: 'datepicker-time', - cn: [ - { - tag: 'table', - cls: 'table-condensed', - cn:[ - { - tag: 'tbody', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'td', - colspan: '7' - } - ] - } - ] - }, - { - tag: 'tfoot', - cn: [ - { - tag: 'tr', - cn: [ - { - tag: 'th', - colspan: '7', - cls: '', - cn: [ - { - tag: 'button', - cls: 'btn btn-info ok', - html: 'OK' - } - ] - } - - ] - } - ] - } - ] - } - ] - } - ] - } -}); - - - - \ No newline at end of file diff --git a/Roo/bootstrap/TriggerField.js b/Roo/bootstrap/TriggerField.js deleted file mode 100644 index 73731e487d..0000000000 --- a/Roo/bootstrap/TriggerField.js +++ /dev/null @@ -1,606 +0,0 @@ -/* - * - LGPL - * - * trigger field - base class for combo.. - * - */ - -/** - * @class Roo.bootstrap.TriggerField - * @extends Roo.bootstrap.Input - * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default). - * The trigger has no default action, so you must assign a function to implement the trigger click handler by - * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox - * for which you can provide a custom implementation. For example: - * 
    
-var trigger = new Roo.bootstrap.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyTo('my-field');
-
    - * - * However, in general you will most likely want to use TriggerField as the base class for a reusable component. - * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this. - * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the - * class 'x-form-trigger' by default and triggerClass will be appended if specified. - * @cfg {String} caret (search|calendar) BS3 only - carat fa name - - * @constructor - * Create a new TriggerField. - * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied - * to the base TextField) - */ -Roo.bootstrap.TriggerField = function(config){ - this.mimicing = false; - Roo.bootstrap.TriggerField.superclass.constructor.call(this, config); -}; - -Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { - /** - * @cfg {String} triggerClass A CSS class to apply to the trigger - */ - /** - * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false) - */ - hideTrigger:false, - - /** - * @cfg {Boolean} removable (true|false) special filter default false - */ - removable : false, - - /** @cfg {Boolean} grow @hide */ - /** @cfg {Number} growMin @hide */ - /** @cfg {Number} growMax @hide */ - - /** - * @hide - * @method - */ - autoSize: Roo.emptyFn, - // private - monitorTab : true, - // private - deferHeight : true, - - - actionMode : 'wrap', - - caret : false, - - - getAutoCreate : function(){ - - var align = this.labelAlign || this.parentLabelAlign(); - - var id = Roo.id(); - - var cfg = { - cls: 'form-group' //input-group - }; - - - var input = { - tag: 'input', - id : id, - type : this.inputType, - cls : 'form-control', - autocomplete: 'new-password', - placeholder : this.placeholder || '' - - }; - if (this.name) { - input.name = this.name; - } - if (this.size) { - input.cls += ' input-' + this.size; - } - - if (this.disabled) { - input.disabled=true; - } - - var inputblock = input; - - if(this.hasFeedback && !this.allowBlank){ - - var feedback = { - tag: 'span', - cls: 'glyphicon form-control-feedback' - }; - - if(this.removable && !this.editable ){ - inputblock = { - cls : 'has-feedback', - cn : [ - inputblock, - { - tag: 'button', - html : 'x', - cls : 'roo-combo-removable-btn close' - }, - feedback - ] - }; - } else { - inputblock = { - cls : 'has-feedback', - cn : [ - inputblock, - feedback - ] - }; - } - - } else { - if(this.removable && !this.editable ){ - inputblock = { - cls : 'roo-removable', - cn : [ - inputblock, - { - tag: 'button', - html : 'x', - cls : 'roo-combo-removable-btn close' - } - ] - }; - } - } - - if (this.before || this.after) { - - inputblock = { - cls : 'input-group', - cn : [] - }; - if (this.before) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon input-group-prepend input-group-text', - html : this.before - }); - } - - inputblock.cn.push(input); - - if(this.hasFeedback && !this.allowBlank){ - inputblock.cls += ' has-feedback'; - inputblock.cn.push(feedback); - } - - if (this.after) { - inputblock.cn.push({ - tag :'span', - cls : 'input-group-addon input-group-append input-group-text', - html : this.after - }); - } - - }; - - - - var ibwrap = inputblock; - - if(this.multiple){ - ibwrap = { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ - - inputblock - ] - } - ] - }; - - } - - var combobox = { - cls: 'roo-select2-container input-group', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - ibwrap - ] - }; - - if(!this.multiple && this.showToggleBtn){ - - var caret = { - tag: 'span', - cls: 'caret' - }; - if (this.caret != false) { - caret = { - tag: 'i', - cls: 'fa fa-' + this.caret - }; - - } - - combobox.cn.push({ - tag :'span', - cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', - cn : [ - Roo.bootstrap.version == 3 ? caret : '', - { - tag: 'span', - cls: 'combobox-clear', - cn : [ - { - tag : 'i', - cls: 'icon-remove' - } - ] - } - ] - - }) - } - - if(this.multiple){ - combobox.cls += ' roo-select2-container-multi'; - } - var indicator = { - tag : 'i', - cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }; - if (Roo.bootstrap.version == 4) { - indicator = { - tag : 'i', - style : 'display:none' - }; - } - - - if (align ==='left' && this.fieldLabel.length) { - - cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); - - cfg.cn = [ - indicator, - { - tag: 'label', - 'for' : id, - cls : 'control-label', - html : this.fieldLabel - - }, - { - cls : "", - cn: [ - combobox - ] - } - - ]; - - var labelCfg = cfg.cn[1]; - var contentCfg = cfg.cn[2]; - - if(this.indicatorpos == 'right'){ - cfg.cn = [ - { - tag: 'label', - 'for' : id, - cls : 'control-label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - }, - indicator - ] - }, - { - cls : "", - cn: [ - combobox - ] - } - - ]; - - labelCfg = cfg.cn[0]; - contentCfg = cfg.cn[1]; - } - - if(this.labelWidth > 12){ - labelCfg.style = "width: " + this.labelWidth + 'px'; - } - - if(this.labelWidth < 13 && this.labelmd == 0){ - this.labelmd = this.labelWidth; - } - - if(this.labellg > 0){ - labelCfg.cls += ' col-lg-' + this.labellg; - contentCfg.cls += ' col-lg-' + (12 - this.labellg); - } - - if(this.labelmd > 0){ - labelCfg.cls += ' col-md-' + this.labelmd; - contentCfg.cls += ' col-md-' + (12 - this.labelmd); - } - - if(this.labelsm > 0){ - labelCfg.cls += ' col-sm-' + this.labelsm; - contentCfg.cls += ' col-sm-' + (12 - this.labelsm); - } - - if(this.labelxs > 0){ - labelCfg.cls += ' col-xs-' + this.labelxs; - contentCfg.cls += ' col-xs-' + (12 - this.labelxs); - } - - } else if ( this.fieldLabel.length) { -// Roo.log(" label"); - cfg.cn = [ - indicator, - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, - - combobox - - ]; - - if(this.indicatorpos == 'right'){ - - cfg.cn = [ - { - tag: 'label', - cn : [ - { - tag : 'span', - html : this.fieldLabel - }, - indicator - ] - - }, - combobox - - ]; - - } - - } else { - -// Roo.log(" no label && no align"); - cfg = combobox - - - } - - var settings=this; - ['xs','sm','md','lg'].map(function(size){ - if (settings[size]) { - cfg.cls += ' col-' + size + '-' + settings[size]; - } - }); - - return cfg; - - }, - - - - // private - onResize : function(w, h){ -// Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments); -// if(typeof w == 'number'){ -// var x = w - this.trigger.getWidth(); -// this.inputEl().setWidth(this.adjustWidth('input', x)); -// this.trigger.setStyle('left', x+'px'); -// } - }, - - // private - adjustSize : Roo.BoxComponent.prototype.adjustSize, - - // private - getResizeEl : function(){ - return this.inputEl(); - }, - - // private - getPositionEl : function(){ - return this.inputEl(); - }, - - // private - alignErrorIcon : function(){ - this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]); - }, - - // private - initEvents : function(){ - - this.createList(); - - Roo.bootstrap.TriggerField.superclass.initEvents.call(this); - //this.wrap = this.el.wrap({cls: "x-form-field-wrap"}); - if(!this.multiple && this.showToggleBtn){ - this.trigger = this.el.select('span.dropdown-toggle',true).first(); - if(this.hideTrigger){ - this.trigger.setDisplayed(false); - } - this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true}); - } - - if(this.multiple){ - this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true}); - } - - if(this.removable && !this.editable && !this.tickable){ - var close = this.closeTriggerEl(); - - if(close){ - close.setVisibilityMode(Roo.Element.DISPLAY).hide(); - close.on('click', this.removeBtnClick, this, close); - } - } - - //this.trigger.addClassOnOver('x-form-trigger-over'); - //this.trigger.addClassOnClick('x-form-trigger-click'); - - //if(!this.width){ - // this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth()); - //} - }, - - closeTriggerEl : function() - { - var close = this.el.select('.roo-combo-removable-btn', true).first(); - return close ? close : false; - }, - - removeBtnClick : function(e, h, el) - { - e.preventDefault(); - - if(this.fireEvent("remove", this) !== false){ - this.reset(); - this.fireEvent("afterremove", this) - } - }, - - createList : function() - { - this.list = Roo.get(document.body).createChild({ - tag: Roo.bootstrap.version == 4 ? 'div' : 'ul', - cls: 'typeahead typeahead-long dropdown-menu shadow', - style: 'display:none' - }); - - this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';; - - }, - - // private - initTrigger : function(){ - - }, - - // private - onDestroy : function(){ - if(this.trigger){ - this.trigger.removeAllListeners(); - // this.trigger.remove(); - } - //if(this.wrap){ - // this.wrap.remove(); - //} - Roo.bootstrap.TriggerField.superclass.onDestroy.call(this); - }, - - // private - onFocus : function(){ - Roo.bootstrap.TriggerField.superclass.onFocus.call(this); - /* - if(!this.mimicing){ - this.wrap.addClass('x-trigger-wrap-focus'); - this.mimicing = true; - Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this); - if(this.monitorTab){ - this.el.on("keydown", this.checkTab, this); - } - } - */ - }, - - // private - checkTab : function(e){ - if(e.getKey() == e.TAB){ - this.triggerBlur(); - } - }, - - // private - onBlur : function(){ - // do nothing - }, - - // private - mimicBlur : function(e, t){ - /* - if(!this.wrap.contains(t) && this.validateBlur()){ - this.triggerBlur(); - } - */ - }, - - // private - triggerBlur : function(){ - this.mimicing = false; - Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur); - if(this.monitorTab){ - this.el.un("keydown", this.checkTab, this); - } - //this.wrap.removeClass('x-trigger-wrap-focus'); - Roo.bootstrap.TriggerField.superclass.onBlur.call(this); - }, - - // private - // This should be overriden by any subclass that needs to check whether or not the field can be blurred. - validateBlur : function(e, t){ - return true; - }, - - // private - onDisable : function(){ - this.inputEl().dom.disabled = true; - //Roo.bootstrap.TriggerField.superclass.onDisable.call(this); - //if(this.wrap){ - // this.wrap.addClass('x-item-disabled'); - //} - }, - - // private - onEnable : function(){ - this.inputEl().dom.disabled = false; - //Roo.bootstrap.TriggerField.superclass.onEnable.call(this); - //if(this.wrap){ - // this.el.removeClass('x-item-disabled'); - //} - }, - - // private - onShow : function(){ - var ae = this.getActionEl(); - - if(ae){ - ae.dom.style.display = ''; - ae.dom.style.visibility = 'visible'; - } - }, - - // private - - onHide : function(){ - var ae = this.getActionEl(); - ae.dom.style.display = 'none'; - }, - - /** - * The function that should handle the trigger's click event. This method does nothing by default until overridden - * by an implementing function. - * @method - * @param {EventObject} e - */ - onTriggerClick : Roo.emptyFn -}); - \ No newline at end of file diff --git a/Roo/bootstrap/form/CheckBox.js b/Roo/bootstrap/form/CheckBox.js index 9602dceeda..6e668a9ebc 100644 --- a/Roo/bootstrap/form/CheckBox.js +++ b/Roo/bootstrap/form/CheckBox.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.CheckBox - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.CheckBox + * @extends Roo.bootstrap.form.Input * Bootstrap CheckBox class * * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked. @@ -24,28 +24,28 @@ * @param {Object} config The config object */ -Roo.bootstrap.CheckBox = function(config){ - Roo.bootstrap.CheckBox.superclass.constructor.call(this, config); +Roo.bootstrap.form.CheckBox = function(config){ + Roo.bootstrap.form.CheckBox.superclass.constructor.call(this, config); this.addEvents({ /** * @event check * Fires when the element is checked or unchecked. - * @param {Roo.bootstrap.CheckBox} this This input + * @param {Roo.bootstrap.form.CheckBox} this This input * @param {Boolean} checked The new checked value */ check : true, /** * @event click * Fires when the element is click. - * @param {Roo.bootstrap.CheckBox} this This input + * @param {Roo.bootstrap.form.CheckBox} this This input */ click : true }); }; -Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.CheckBox, Roo.bootstrap.form.Input, { inputType: 'checkbox', inputValue: 1, @@ -297,7 +297,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { initEvents : function() { -// Roo.bootstrap.CheckBox.superclass.initEvents.call(this); +// Roo.bootstrap.form.CheckBox.superclass.initEvents.call(this); this.inputEl().on('click', this.onClick, this); @@ -308,7 +308,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { this.startValue = this.getValue(); if(this.groupId){ - Roo.bootstrap.CheckBox.register(this); + Roo.bootstrap.form.CheckBox.register(this); } }, @@ -460,7 +460,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { //return (this.getValue() == this.inputValue) ? true : false; } - var group = Roo.bootstrap.CheckBox.get(this.groupId); + var group = Roo.bootstrap.form.CheckBox.get(this.groupId); if(!group){ return false; @@ -497,10 +497,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { this.fireEvent('valid', this); - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); + var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group'); if(this.groupId){ - label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group'); + label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group'); } if(label){ @@ -534,7 +534,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { return; } - var group = Roo.bootstrap.CheckBox.get(this.groupId); + var group = Roo.bootstrap.form.CheckBox.get(this.groupId); if(!group){ return; @@ -566,10 +566,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { this.fireEvent('invalid', this, msg); - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); + var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group'); if(this.groupId){ - label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group'); + label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group'); } if(label){ @@ -604,7 +604,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { return; } - var group = Roo.bootstrap.CheckBox.get(this.groupId); + var group = Roo.bootstrap.form.CheckBox.get(this.groupId); if(!group){ return; @@ -625,11 +625,11 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { clearInvalid : function() { - Roo.bootstrap.Input.prototype.clearInvalid.call(this); + Roo.bootstrap.form.Input.prototype.clearInvalid.call(this); // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); + var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group'); if (label && label.iconEl) { label.iconEl.removeClass([ label.validClass, label.invalidClass ]); @@ -640,7 +640,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { disable : function() { if(this.inputType != 'radio'){ - Roo.bootstrap.CheckBox.superclass.disable.call(this); + Roo.bootstrap.form.CheckBox.superclass.disable.call(this); return; } @@ -661,7 +661,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { enable : function() { if(this.inputType != 'radio'){ - Roo.bootstrap.CheckBox.superclass.enable.call(this); + Roo.bootstrap.form.CheckBox.superclass.enable.call(this); return; } @@ -690,13 +690,13 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { }); -Roo.apply(Roo.bootstrap.CheckBox, { +Roo.apply(Roo.bootstrap.form.CheckBox, { groups: {}, /** * register a CheckBox Group - * @param {Roo.bootstrap.CheckBox} the CheckBox to add + * @param {Roo.bootstrap.form.CheckBox} the CheckBox to add */ register : function(checkbox) { @@ -714,7 +714,7 @@ Roo.apply(Roo.bootstrap.CheckBox, { /** * fetch a CheckBox Group based on the group ID * @param {string} the group ID - * @returns {Roo.bootstrap.CheckBox} the CheckBox group + * @returns {Roo.bootstrap.form.CheckBox} the CheckBox group */ get: function(groupId) { if (typeof(this.groups[groupId]) == 'undefined') { diff --git a/Roo/bootstrap/form/ComboBox.js b/Roo/bootstrap/form/ComboBox.js index 8582874e03..3e51788d79 100644 --- a/Roo/bootstrap/form/ComboBox.js +++ b/Roo/bootstrap/form/ComboBox.js @@ -4,8 +4,8 @@ */ /** - * @class Roo.bootstrap.ComboBox - * @extends Roo.bootstrap.TriggerField + * @class Roo.bootstrap.form.ComboBox + * @extends Roo.bootstrap.form.TriggerField * A combobox control with support for autocomplete, remote-loading, paging and many other features. * @cfg {Boolean} append (true|false) default false * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true @@ -22,25 +22,25 @@ * Create a new ComboBox. * @param {Object} config Configuration options */ -Roo.bootstrap.ComboBox = function(config){ - Roo.bootstrap.ComboBox.superclass.constructor.call(this, config); +Roo.bootstrap.form.ComboBox = function(config){ + Roo.bootstrap.form.ComboBox.superclass.constructor.call(this, config); this.addEvents({ /** * @event expand * Fires when the dropdown list is expanded - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'expand' : true, /** * @event collapse * Fires when the dropdown list is collapsed - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'collapse' : true, /** * @event beforeselect * Fires before a list item is selected. Return false to cancel the selection. - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box * @param {Roo.data.Record} record The data record returned from the underlying store * @param {Number} index The index of the selected item in the dropdown list */ @@ -48,7 +48,7 @@ Roo.bootstrap.ComboBox = function(config){ /** * @event select * Fires when a list item is selected - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear) * @param {Number} index The index of the selected item in the dropdown list */ @@ -57,7 +57,7 @@ Roo.bootstrap.ComboBox = function(config){ * @event beforequery * Fires before all queries are processed. Return false to cancel the query or set cancel to true. * The event object passed has these properties: - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box * @param {String} query The query * @param {Boolean} forceAll true to force "all" query * @param {Boolean} cancel true to cancel the query @@ -67,44 +67,44 @@ Roo.bootstrap.ComboBox = function(config){ /** * @event add * Fires when the 'add' icon is pressed (add a listener to enable add button) - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'add' : true, /** * @event edit * Fires when the 'edit' icon is pressed (add a listener to enable add button) - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected) */ 'edit' : true, /** * @event remove * Fires when the remove value from the combobox array - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'remove' : true, /** * @event afterremove * Fires when the remove value from the combobox array - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'afterremove' : true, /** * @event specialfilter * Fires when specialfilter - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'specialfilter' : true, /** * @event tick * Fires when tick the element - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box */ 'tick' : true, /** * @event touchviewdisplay * Fires when touch view require special display (default is using displayField) - * @param {Roo.bootstrap.ComboBox} combo This combo box + * @param {Roo.bootstrap.form.ComboBox} combo This combo box * @param {Object} cfg set html . */ 'touchviewdisplay' : true @@ -125,7 +125,7 @@ Roo.bootstrap.ComboBox = function(config){ } }; -Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { +Roo.extend(Roo.bootstrap.form.ComboBox, Roo.bootstrap.form.TriggerField, { /** * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when @@ -374,7 +374,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { * Normal ComboBox */ if(!this.tickable){ - cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this); + cfg = Roo.bootstrap.form.ComboBox.superclass.getAutoCreate.call(this); return cfg; } @@ -694,7 +694,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { return; } - Roo.bootstrap.ComboBox.superclass.initEvents.call(this); + Roo.bootstrap.form.ComboBox.superclass.initEvents.call(this); if(this.hiddenName){ @@ -1074,7 +1074,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.store.un('load', this.onLoad, this); this.store.un('loadexception', this.onLoadException, this); } - Roo.bootstrap.ComboBox.superclass.onDestroy.call(this); + Roo.bootstrap.form.ComboBox.superclass.onDestroy.call(this); }, // private @@ -1089,7 +1089,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { -// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments); +// Roo.bootstrap.form.ComboBox.superclass.onResize.apply(this, arguments); // // if(typeof w != 'number'){ // // we do not handle it!?!? @@ -1262,7 +1262,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.valueField){ return typeof this.value != 'undefined' ? this.value : ''; }else{ - return Roo.bootstrap.ComboBox.superclass.getValue.call(this); + return Roo.bootstrap.form.ComboBox.superclass.getValue.call(this); } }, @@ -1332,7 +1332,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.hiddenField){ this.hiddenField.dom.value = v; } - Roo.bootstrap.ComboBox.superclass.setValue.call(this, text); + Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, text); this.value = v; var close = this.closeTriggerEl(); @@ -1388,14 +1388,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.hiddenField.dom.value = vv; this.lastSelectionText = dv; - Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv); + Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv); this.value = vv; return; } // no hidden field.. - we store the value in 'value', but still display // display field!!!! this.lastSelectionText = dv; - Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv); + Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv); this.value = vv; @@ -2536,7 +2536,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { renderTouchView : function() { - this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.ComboBox.touchViewTemplate); + this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.form.ComboBox.touchViewTemplate); this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first(); @@ -2671,7 +2671,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var rawValue = this.getRawValue(); - var template = (this.multiple) ? Roo.bootstrap.ComboBox.listItemCheckbox : Roo.bootstrap.ComboBox.listItemRadio; + var template = (this.multiple) ? Roo.bootstrap.form.ComboBox.listItemCheckbox : Roo.bootstrap.form.ComboBox.listItemRadio; this.tickItems = []; @@ -2745,7 +2745,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { this.clearTouchView(); - this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult); + this.touchViewListGroup.createChild(Roo.bootstrap.form.ComboBox.emptyResult); this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText; @@ -2963,7 +2963,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ }); -Roo.apply(Roo.bootstrap.ComboBox, { +Roo.apply(Roo.bootstrap.form.ComboBox, { header : { tag: 'div', @@ -3073,7 +3073,7 @@ Roo.apply(Roo.bootstrap.ComboBox, { } }); -Roo.apply(Roo.bootstrap.ComboBox, { +Roo.apply(Roo.bootstrap.form.ComboBox, { touchViewTemplate : { tag: 'div', @@ -3088,9 +3088,9 @@ Roo.apply(Roo.bootstrap.ComboBox, { tag: 'div', cls: 'modal-content', cn: [ - Roo.bootstrap.ComboBox.header, - Roo.bootstrap.ComboBox.body, - Roo.bootstrap.ComboBox.footer + Roo.bootstrap.form.ComboBox.header, + Roo.bootstrap.form.ComboBox.body, + Roo.bootstrap.form.ComboBox.footer ] } ] diff --git a/Roo/bootstrap/form/DateField.js b/Roo/bootstrap/form/DateField.js index ba18ac35df..6f07f05fe7 100644 --- a/Roo/bootstrap/form/DateField.js +++ b/Roo/bootstrap/form/DateField.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.DateField - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.DateField + * @extends Roo.bootstrap.form.Input * Bootstrap DateField class * @cfg {Number} weekStart default 0 * @cfg {String} viewMode default empty, (months|years) @@ -28,41 +28,41 @@ * @param {Object} config The config object */ -Roo.bootstrap.DateField = function(config){ - Roo.bootstrap.DateField.superclass.constructor.call(this, config); +Roo.bootstrap.form.DateField = function(config){ + Roo.bootstrap.form.DateField.superclass.constructor.call(this, config); this.addEvents({ /** * @event show * Fires when this field show. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ show : true, /** * @event show * Fires when this field hide. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ hide : true, /** * @event select * Fires when select a date. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ select : true, /** * @event beforeselect * Fires when before select a date. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ beforeselect : true }); }; -Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.DateField, Roo.bootstrap.form.Input, { /** * @cfg {String} format @@ -135,13 +135,13 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { onRender: function(ct, position) { - Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position); + Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position); this.language = this.language || 'en'; - this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0]; - this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en"; + this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0]; + this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en"; - this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false; + this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false; this.format = this.format || 'm/d/y'; this.isInline = false; this.isInput = true; @@ -177,9 +177,9 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { } } - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template); + this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.DateField.template); -// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template); +// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.form.DateField.template); this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; @@ -207,7 +207,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { return; } - v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today; + v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today; v.attr('colspan', function(i, val){ return parseInt(val) + 1; }); @@ -260,7 +260,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { dow.cn.push({ tag: 'th', cls: 'dow', - html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7] + html: Roo.bootstrap.form.DateField.dates[this.language].daysMin[(dowCnt++)%7] }); } @@ -278,7 +278,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { var month = { tag: 'span', cls: 'month', - html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++] + html: Roo.bootstrap.form.DateField.dates[this.language].monthsShort[i++] }; months.createChild(month); @@ -313,9 +313,9 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { currentDate = this.date && this.date.valueOf(), today = this.UTCToday(); - this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year; + this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year; -// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today; +// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today; // this.picker.select('>tfoot th.today'). // .text(dates[this.language].today) @@ -453,7 +453,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; v.hide(); }); - this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show(); + this.picker().select('>.datepicker-'+Roo.bootstrap.form.DateField.modes[this.viewMode].clsName, true).first().show(); }, place: function() @@ -509,13 +509,13 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { onFocus : function() { - Roo.bootstrap.DateField.superclass.onFocus.call(this); + Roo.bootstrap.form.DateField.superclass.onFocus.call(this); this.showPopup(); }, onBlur : function() { - Roo.bootstrap.DateField.superclass.onBlur.call(this); + Roo.bootstrap.form.DateField.superclass.onBlur.call(this); var d = this.inputEl().getValue(); @@ -554,7 +554,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { keyup: function(e) { - Roo.bootstrap.DateField.superclass.keyup.call(this); + Roo.bootstrap.form.DateField.superclass.keyup.call(this); this.update(); }, @@ -565,13 +565,13 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { if(isNaN(d.getTime())){ this.date = this.viewDate = ''; - Roo.bootstrap.DateField.superclass.setValue.call(this, ''); + Roo.bootstrap.form.DateField.superclass.setValue.call(this, ''); return; } v = this.formatDate(d); - Roo.bootstrap.DateField.superclass.setValue.call(this, v); + Roo.bootstrap.form.DateField.superclass.setValue.call(this, v); this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000); @@ -703,7 +703,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { break; case 'prev': case 'next': - var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1); + var dir = Roo.bootstrap.form.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1); switch(this.viewMode){ case 0: this.viewDate = this.moveMonth(this.viewDate, dir); @@ -732,7 +732,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { } this.viewDate.setUTCDate(1); if (className.indexOf('month') > -1) { - this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html)); + this.viewDate.setUTCMonth(Roo.bootstrap.form.DateField.dates[this.language].monthsShort.indexOf(html)); } else { var year = parseInt(html, 10) || 0; this.viewDate.setUTCFullYear(year); @@ -987,12 +987,12 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, { { this.date = this.viewDate = ''; - Roo.bootstrap.DateField.superclass.setValue.call(this, ''); + Roo.bootstrap.form.DateField.superclass.setValue.call(this, ''); } }); -Roo.apply(Roo.bootstrap.DateField, { +Roo.apply(Roo.bootstrap.form.DateField, { head : { tag: 'thead', @@ -1082,7 +1082,7 @@ Roo.apply(Roo.bootstrap.DateField, { }] }); -Roo.apply(Roo.bootstrap.DateField, { +Roo.apply(Roo.bootstrap.form.DateField, { template : { tag: 'div', @@ -1096,11 +1096,11 @@ Roo.apply(Roo.bootstrap.DateField, { tag: 'table', cls: 'table-condensed', cn:[ - Roo.bootstrap.DateField.head, + Roo.bootstrap.form.DateField.head, { tag: 'tbody' }, - Roo.bootstrap.DateField.footer + Roo.bootstrap.form.DateField.footer ] } ] @@ -1113,9 +1113,9 @@ Roo.apply(Roo.bootstrap.DateField, { tag: 'table', cls: 'table-condensed', cn:[ - Roo.bootstrap.DateField.head, - Roo.bootstrap.DateField.content, - Roo.bootstrap.DateField.footer + Roo.bootstrap.form.DateField.head, + Roo.bootstrap.form.DateField.content, + Roo.bootstrap.form.DateField.footer ] } ] @@ -1128,9 +1128,9 @@ Roo.apply(Roo.bootstrap.DateField, { tag: 'table', cls: 'table-condensed', cn:[ - Roo.bootstrap.DateField.head, - Roo.bootstrap.DateField.content, - Roo.bootstrap.DateField.footer + Roo.bootstrap.form.DateField.head, + Roo.bootstrap.form.DateField.content, + Roo.bootstrap.form.DateField.footer ] } ] diff --git a/Roo/bootstrap/form/DateSplitField.js b/Roo/bootstrap/form/DateSplitField.js index 421a119371..2108c5ab70 100644 --- a/Roo/bootstrap/form/DateSplitField.js +++ b/Roo/bootstrap/form/DateSplitField.js @@ -7,7 +7,7 @@ /** - * @class Roo.bootstrap.DateSplitField + * @class Roo.bootstrap.form.DateSplitField * @extends Roo.bootstrap.Component * Bootstrap DateSplitField class * @cfg {string} fieldLabel - the label associated @@ -33,22 +33,22 @@ * @param {Object} config The config object */ -Roo.bootstrap.DateSplitField = function(config){ - Roo.bootstrap.DateSplitField.superclass.constructor.call(this, config); +Roo.bootstrap.form.DateSplitField = function(config){ + Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config); this.addEvents({ // raw events /** * @event years * getting the data of years - * @param {Roo.bootstrap.DateSplitField} this + * @param {Roo.bootstrap.form.DateSplitField} this * @param {Object} years */ "years" : true, /** * @event days * getting the data of days - * @param {Roo.bootstrap.DateSplitField} this + * @param {Roo.bootstrap.form.DateSplitField} this * @param {Object} days */ "days" : true, @@ -68,7 +68,7 @@ Roo.bootstrap.DateSplitField = function(config){ }); }; -Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component, { fieldLabel : '', labelAlign : 'top', @@ -178,7 +178,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, { this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first(); - this.dayField = new Roo.bootstrap.ComboBox({ + this.dayField = new Roo.bootstrap.form.ComboBox({ allowBlank : this.dayAllowBlank, alwaysQuery : true, displayField : 'value', @@ -210,7 +210,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, { this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null); - this.monthField = new Roo.bootstrap.MonthField({ + this.monthField = new Roo.bootstrap.form.MonthField({ after : '', allowBlank : this.monthAllowBlank, placeholder : this.monthPlaceholder, @@ -232,7 +232,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, { this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null); - this.yearField = new Roo.bootstrap.ComboBox({ + this.yearField = new Roo.bootstrap.form.ComboBox({ allowBlank : this.yearAllowBlank, alwaysQuery : true, displayField : 'value', diff --git a/Roo/bootstrap/form/FieldLabel.js b/Roo/bootstrap/form/FieldLabel.js index c59405c8ab..c8e28139f9 100644 --- a/Roo/bootstrap/form/FieldLabel.js +++ b/Roo/bootstrap/form/FieldLabel.js @@ -6,7 +6,7 @@ */ /** - * @class Roo.bootstrap.FieldLabel + * @class Roo.bootstrap.form.FieldLabel * @extends Roo.bootstrap.Component * Bootstrap FieldLabel class * @cfg {String} html contents of the element @@ -24,7 +24,7 @@ * @param {Object} config The config object */ -Roo.bootstrap.FieldLabel = function(config){ +Roo.bootstrap.form.FieldLabel = function(config){ Roo.bootstrap.Element.superclass.constructor.call(this, config); this.addEvents({ @@ -44,7 +44,7 @@ Roo.bootstrap.FieldLabel = function(config){ }); }; -Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.form.FieldLabel, Roo.bootstrap.Component, { tag: 'label', cls: '', @@ -113,7 +113,7 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { this.indicator.addClass('invisible'); } - Roo.bootstrap.FieldLabel.register(this); + Roo.bootstrap.form.FieldLabel.register(this); }, indicatorEl : function() @@ -174,13 +174,13 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { }); -Roo.apply(Roo.bootstrap.FieldLabel, { +Roo.apply(Roo.bootstrap.form.FieldLabel, { groups: {}, /** * register a FieldLabel Group - * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add + * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add */ register : function(label) { @@ -194,7 +194,7 @@ Roo.apply(Roo.bootstrap.FieldLabel, { /** * fetch a FieldLabel Group based on the target * @param {string} target - * @returns {Roo.bootstrap.FieldLabel} the CheckBox group + * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group */ get: function(target) { if (typeof(this.groups[target]) == 'undefined') { diff --git a/Roo/bootstrap/form/Form.js b/Roo/bootstrap/form/Form.js index c67994148b..e8504c468a 100644 --- a/Roo/bootstrap/form/Form.js +++ b/Roo/bootstrap/form/Form.js @@ -6,7 +6,7 @@ */ /** - * @class Roo.bootstrap.Form + * @class Roo.bootstrap.form.Form * @extends Roo.bootstrap.Component * @children Roo.bootstrap.Component * Bootstrap Form class @@ -22,11 +22,11 @@ */ -Roo.bootstrap.Form = function(config){ +Roo.bootstrap.form.Form = function(config){ - Roo.bootstrap.Form.superclass.constructor.call(this, config); + Roo.bootstrap.form.Form.superclass.constructor.call(this, config); - Roo.bootstrap.Form.popover.apply(); + Roo.bootstrap.form.Form.popover.apply(); this.addEvents({ /** @@ -60,7 +60,7 @@ Roo.bootstrap.Form = function(config){ }); }; -Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.form.Form, Roo.bootstrap.Component, { /** * @cfg {String} method @@ -190,7 +190,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, { }); if(this.errorMask && !valid){ - Roo.bootstrap.Form.popover.mask(this, target); + Roo.bootstrap.form.Form.popover.mask(this, target); } return valid; @@ -607,7 +607,7 @@ clientValidation Boolean Applies to submit only. Pass true to call fo }); -Roo.apply(Roo.bootstrap.Form, { +Roo.apply(Roo.bootstrap.form.Form, { popover : { @@ -743,7 +743,7 @@ Roo.apply(Roo.bootstrap.Form, { this.toolTip.show(tip); this.intervalID = window.setInterval(function() { - Roo.bootstrap.Form.popover.unmask(); + Roo.bootstrap.form.Form.popover.unmask(); }, 10000); window.onwheel = function(){ return false;}; diff --git a/Roo/bootstrap/form/Input.js b/Roo/bootstrap/form/Input.js index d02460329d..7fdabc35f6 100644 --- a/Roo/bootstrap/form/Input.js +++ b/Roo/bootstrap/form/Input.js @@ -6,7 +6,7 @@ */ /** - * @class Roo.bootstrap.Input + * @class Roo.bootstrap.form.Input * @extends Roo.bootstrap.Component * Bootstrap Input class * @cfg {Boolean} disabled is it disabled @@ -44,9 +44,9 @@ * @param {Object} config The config object */ -Roo.bootstrap.Input = function(config){ +Roo.bootstrap.form.Input = function(config){ - Roo.bootstrap.Input.superclass.constructor.call(this, config); + Roo.bootstrap.form.Input.superclass.constructor.call(this, config); this.addEvents({ /** @@ -107,7 +107,7 @@ Roo.bootstrap.Input = function(config){ }); }; -Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component, { /** * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup"). diff --git a/Roo/bootstrap/form/MoneyField.js b/Roo/bootstrap/form/MoneyField.js index 391894df98..21852b8668 100644 --- a/Roo/bootstrap/form/MoneyField.js +++ b/Roo/bootstrap/form/MoneyField.js @@ -1,7 +1,7 @@ /** - * @class Roo.bootstrap.MoneyField - * @extends Roo.bootstrap.ComboBox + * @class Roo.bootstrap.form.MoneyField + * @extends Roo.bootstrap.form.ComboBox * Bootstrap MoneyField class * * @constructor @@ -9,13 +9,13 @@ * @param {Object} config Configuration options */ -Roo.bootstrap.MoneyField = function(config) { +Roo.bootstrap.form.MoneyField = function(config) { - Roo.bootstrap.MoneyField.superclass.constructor.call(this, config); + Roo.bootstrap.form.MoneyField.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, { +Roo.extend(Roo.bootstrap.form.MoneyField, Roo.bootstrap.form.ComboBox, { /** * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true) @@ -621,7 +621,7 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, { validateValue : function(value) { - if(!Roo.bootstrap.MoneyField.superclass.validateValue.call(this, value)){ + if(!Roo.bootstrap.form.MoneyField.superclass.validateValue.call(this, value)){ return false; } diff --git a/Roo/bootstrap/form/MonthField.js b/Roo/bootstrap/form/MonthField.js index 9348c26d1c..aec28b9b9c 100644 --- a/Roo/bootstrap/form/MonthField.js +++ b/Roo/bootstrap/form/MonthField.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.MonthField - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.MonthField + * @extends Roo.bootstrap.form.Input * Bootstrap MonthField class * * @cfg {String} language default en @@ -17,28 +17,28 @@ * @param {Object} config The config object */ -Roo.bootstrap.MonthField = function(config){ - Roo.bootstrap.MonthField.superclass.constructor.call(this, config); +Roo.bootstrap.form.MonthField = function(config){ + Roo.bootstrap.form.MonthField.superclass.constructor.call(this, config); this.addEvents({ /** * @event show * Fires when this field show. - * @param {Roo.bootstrap.MonthField} this + * @param {Roo.bootstrap.form.MonthField} this * @param {Mixed} date The date value */ show : true, /** * @event show * Fires when this field hide. - * @param {Roo.bootstrap.MonthField} this + * @param {Roo.bootstrap.form.MonthField} this * @param {Mixed} date The date value */ hide : true, /** * @event select * Fires when select a date. - * @param {Roo.bootstrap.MonthField} this + * @param {Roo.bootstrap.form.MonthField} this * @param {String} oldvalue The old value * @param {String} newvalue The new value */ @@ -46,25 +46,25 @@ Roo.bootstrap.MonthField = function(config){ }); }; -Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.MonthField, Roo.bootstrap.form.Input, { onRender: function(ct, position) { - Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position); + Roo.bootstrap.form.MonthField.superclass.onRender.call(this, ct, position); this.language = this.language || 'en'; - this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0]; - this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en"; + this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : this.language.split('-')[0]; + this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : "en"; - this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false; + this.isRTL = Roo.bootstrap.form.MonthField.dates[this.language].rtl || false; this.isInline = false; this.isInput = true; this.component = this.el.select('.add-on', true).first() || false; this.component = (this.component && this.component.length === 0) ? false : this.component; this.hasInput = this.component && this.inputEL().length; - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template); + this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.MonthField.template); this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; @@ -91,7 +91,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { { var o = this.getValue(); - Roo.bootstrap.MonthField.superclass.setValue.call(this, v); + Roo.bootstrap.form.MonthField.superclass.setValue.call(this, v); this.update(); @@ -125,9 +125,9 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { return; } - this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html); + this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].monthsShort.indexOf(html); - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); + this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]); this.hide(); @@ -149,7 +149,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { var month = { tag: 'span', cls: 'month', - html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++] + html: Roo.bootstrap.form.MonthField.dates[this.language].monthsShort[i++] }; months.createChild(month); @@ -162,7 +162,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { var _this = this; if(typeof(this.vIndex) == 'undefined' && this.value.length){ - this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value); + this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].months.indexOf(this.value); } Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){ @@ -201,13 +201,13 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { onFocus : function() { - Roo.bootstrap.MonthField.superclass.onFocus.call(this); + Roo.bootstrap.form.MonthField.superclass.onFocus.call(this); this.show(); }, onBlur : function() { - Roo.bootstrap.MonthField.superclass.onBlur.call(this); + Roo.bootstrap.form.MonthField.superclass.onBlur.call(this); var d = this.inputEl().getValue(); @@ -244,7 +244,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { keyup: function(e) { - Roo.bootstrap.MonthField.superclass.keyup.call(this); + Roo.bootstrap.form.MonthField.superclass.keyup.call(this); this.update(); }, @@ -282,7 +282,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { this.vIndex = 0; } - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); + this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]); break; case 38: // up @@ -304,13 +304,13 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { this.vIndex = 0; } - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); + this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]); break; case 13: // enter if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){ - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); + this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]); } this.hide(); @@ -318,7 +318,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { break; case 9: // tab if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){ - this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]); + this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]); } this.hide(); break; @@ -339,7 +339,7 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, { }); -Roo.apply(Roo.bootstrap.MonthField, { +Roo.apply(Roo.bootstrap.form.MonthField, { content : { tag: 'tbody', @@ -364,7 +364,7 @@ Roo.apply(Roo.bootstrap.MonthField, { } }); -Roo.apply(Roo.bootstrap.MonthField, { +Roo.apply(Roo.bootstrap.form.MonthField, { template : { tag: 'div', @@ -378,7 +378,7 @@ Roo.apply(Roo.bootstrap.MonthField, { tag: 'table', cls: 'table-condensed', cn:[ - Roo.bootstrap.DateField.content + Roo.bootstrap.form.DateField.content ] } ] diff --git a/Roo/bootstrap/form/NumberField.js b/Roo/bootstrap/form/NumberField.js index e82d69fc92..1cf7017b5d 100644 --- a/Roo/bootstrap/form/NumberField.js +++ b/Roo/bootstrap/form/NumberField.js @@ -5,8 +5,8 @@ */ /** - * @class Roo.bootstrap.NumberField - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.NumberField + * @extends Roo.bootstrap.form.Input * Bootstrap NumberField class * * @@ -17,11 +17,11 @@ * @param {Object} config The config object */ -Roo.bootstrap.NumberField = function(config){ - Roo.bootstrap.NumberField.superclass.constructor.call(this, config); +Roo.bootstrap.form.NumberField = function(config){ + Roo.bootstrap.form.NumberField.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.NumberField, Roo.bootstrap.form.Input, { /** * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true) @@ -89,7 +89,7 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, { this.name = ''; - var cfg = Roo.bootstrap.NumberField.superclass.getAutoCreate.call(this); + var cfg = Roo.bootstrap.form.NumberField.superclass.getAutoCreate.call(this); this.name = hiddenInput.name; @@ -103,7 +103,7 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, { // private initEvents : function() { - Roo.bootstrap.NumberField.superclass.initEvents.call(this); + Roo.bootstrap.form.NumberField.superclass.initEvents.call(this); var allowed = "0123456789"; @@ -150,7 +150,7 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, { validateValue : function(value) { - if(!Roo.bootstrap.NumberField.superclass.validateValue.call(this, value)){ + if(!Roo.bootstrap.form.NumberField.superclass.validateValue.call(this, value)){ return false; } diff --git a/Roo/bootstrap/form/PhoneInput.js b/Roo/bootstrap/form/PhoneInput.js index d3d82f13b0..e9513665f7 100644 --- a/Roo/bootstrap/form/PhoneInput.js +++ b/Roo/bootstrap/form/PhoneInput.js @@ -7,8 +7,8 @@ **/ /** - * @class Roo.bootstrap.PhoneInput - * @extends Roo.bootstrap.TriggerField + * @class Roo.bootstrap.form.PhoneInput + * @extends Roo.bootstrap.form.TriggerField * An input with International dial-code selection * @cfg {String} defaultDialCode default '+852' @@ -19,11 +19,11 @@ * @param {Object} config Configuration options */ -Roo.bootstrap.PhoneInput = function(config) { - Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config); +Roo.bootstrap.form.PhoneInput = function(config) { + Roo.bootstrap.form.PhoneInput.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, { +Roo.extend(Roo.bootstrap.form.PhoneInput, Roo.bootstrap.form.TriggerField, { /** * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined) */ @@ -51,7 +51,7 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, { getAutoCreate : function() { - var data = Roo.bootstrap.PhoneInputData(); + var data = Roo.bootstrap.form.PhoneInputData(); var align = this.labelAlign || this.parentLabelAlign(); var id = Roo.id(); @@ -279,7 +279,7 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, { initEvents : function() { this.createList(); - Roo.bootstrap.PhoneInput.superclass.initEvents.call(this); + Roo.bootstrap.form.PhoneInput.superclass.initEvents.call(this); this.indicator = this.indicatorEl(); this.flag = this.flagEl(); diff --git a/Roo/bootstrap/form/PhoneInputData.js b/Roo/bootstrap/form/PhoneInputData.js index 88039e097e..c3075d6e60 100644 --- a/Roo/bootstrap/form/PhoneInputData.js +++ b/Roo/bootstrap/form/PhoneInputData.js @@ -6,7 +6,7 @@ * Availability: https://github.com/jackocnr/intl-tel-input.git **/ -Roo.bootstrap.PhoneInputData = function() { +Roo.bootstrap.form.PhoneInputData = function() { var d = [ [ "Afghanistan (‫افغانستان‬‎)", diff --git a/Roo/bootstrap/form/Radio.js b/Roo/bootstrap/form/Radio.js index cddcdd1169..6d51e4b4bf 100644 --- a/Roo/bootstrap/form/Radio.js +++ b/Roo/bootstrap/form/Radio.js @@ -6,7 +6,7 @@ */ /** - * @class Roo.bootstrap.Radio + * @class Roo.bootstrap.form.Radio * @extends Roo.bootstrap.Component * Bootstrap Radio class * @cfg {String} boxLabel - the label associated @@ -16,12 +16,12 @@ * Create a new Radio * @param {Object} config The config object */ -Roo.bootstrap.Radio = function(config){ - Roo.bootstrap.Radio.superclass.constructor.call(this, config); +Roo.bootstrap.form.Radio = function(config){ + Roo.bootstrap.form.Radio.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.form.Radio, Roo.bootstrap.Component, { boxLabel : '', diff --git a/Roo/bootstrap/form/RadioSet.js b/Roo/bootstrap/form/RadioSet.js index b654347abd..b43b151e8a 100644 --- a/Roo/bootstrap/form/RadioSet.js +++ b/Roo/bootstrap/form/RadioSet.js @@ -7,9 +7,9 @@ */ /** - * @class Roo.bootstrap.RadioSet - * @extends Roo.bootstrap.Input - * @children Roo.bootstrap.Radio + * @class Roo.bootstrap.form.RadioSet + * @extends Roo.bootstrap.form.Input + * @children Roo.bootstrap.form.Radio * Bootstrap RadioSet class * @cfg {String} indicatorpos (left|right) default left * @cfg {Boolean} inline (true|false) inline the element (default true) @@ -19,27 +19,27 @@ * @param {Object} config The config object */ -Roo.bootstrap.RadioSet = function(config){ +Roo.bootstrap.form.RadioSet = function(config){ - Roo.bootstrap.RadioSet.superclass.constructor.call(this, config); + Roo.bootstrap.form.RadioSet.superclass.constructor.call(this, config); this.radioes = []; - Roo.bootstrap.RadioSet.register(this); + Roo.bootstrap.form.RadioSet.register(this); this.addEvents({ /** * @event check * Fires when the element is checked or unchecked. - * @param {Roo.bootstrap.RadioSet} this This radio - * @param {Roo.bootstrap.Radio} item The checked item + * @param {Roo.bootstrap.form.RadioSet} this This radio + * @param {Roo.bootstrap.form.Radio} item The checked item */ check : true, /** * @event click * Fires when the element is click. - * @param {Roo.bootstrap.RadioSet} this This radio set - * @param {Roo.bootstrap.Radio} item The checked item + * @param {Roo.bootstrap.form.RadioSet} this This radio set + * @param {Roo.bootstrap.form.Radio} item The checked item * @param {Roo.EventObject} e The event object */ click : true @@ -47,7 +47,7 @@ Roo.bootstrap.RadioSet = function(config){ }; -Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.RadioSet, Roo.bootstrap.form.Input, { radioes : false, @@ -323,7 +323,7 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { }); -Roo.apply(Roo.bootstrap.RadioSet, { +Roo.apply(Roo.bootstrap.form.RadioSet, { groups: {}, diff --git a/Roo/bootstrap/form/SecurePass.js b/Roo/bootstrap/form/SecurePass.js index bbb84ca8d1..e921d79187 100644 --- a/Roo/bootstrap/form/SecurePass.js +++ b/Roo/bootstrap/form/SecurePass.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.SecurePass - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.SecurePass + * @extends Roo.bootstrap.form.Input * Bootstrap SecurePass class * * @@ -16,7 +16,7 @@ * @param {Object} config The config object */ -Roo.bootstrap.SecurePass = function (config) { +Roo.bootstrap.form.SecurePass = function (config) { // these go here, so the translation tool can replace them.. this.errors = { PwdEmpty: "Please type a password, and then retype it to confirm.", @@ -40,10 +40,10 @@ Roo.bootstrap.SecurePass = function (config) { this.errors = {}; - Roo.bootstrap.SecurePass.superclass.constructor.call(this, config); + Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config); } -Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, { /** * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to * { @@ -88,7 +88,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { // private initEvents: function () { - Roo.bootstrap.SecurePass.superclass.initEvents.call(this); + Roo.bootstrap.form.SecurePass.superclass.initEvents.call(this); if (this.el.is('input[type=password]') && Roo.isSafari) { this.el.on('keydown', this.SafariOnKeyDown, this); @@ -99,7 +99,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { // private onRender: function (ct, position) { - Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position); + Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position); this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass}); @@ -136,7 +136,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { if (this.wrap) { this.wrap.remove(); } - Roo.bootstrap.TriggerField.superclass.onDestroy.call(this); + Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this); }, // private checkStrength: function () @@ -173,7 +173,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { }, reset: function () { - Roo.bootstrap.SecurePass.superclass.reset.call(this); + Roo.bootstrap.form.SecurePass.superclass.reset.call(this); this._lastPwd = ''; @@ -190,7 +190,7 @@ Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, { // private validateValue: function (value) { - if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) { + if (!Roo.bootstrap.form.SecurePass.superclass.validateValue.call(this, value)) { return false; } if (value.length == 0) { diff --git a/Roo/bootstrap/form/TextArea.js b/Roo/bootstrap/form/TextArea.js index 3eb51d9c30..d76f2599fc 100644 --- a/Roo/bootstrap/form/TextArea.js +++ b/Roo/bootstrap/form/TextArea.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.TextArea - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.TextArea + * @extends Roo.bootstrap.form.Input * Bootstrap TextArea class * @cfg {Number} cols Specifies the visible width of a text area * @cfg {Number} rows Specifies the visible number of lines in a text area @@ -20,12 +20,12 @@ * @param {Object} config The config object */ -Roo.bootstrap.TextArea = function(config){ - Roo.bootstrap.TextArea.superclass.constructor.call(this, config); +Roo.bootstrap.form.TextArea = function(config){ + Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input, { cols : false, rows : 5, diff --git a/Roo/bootstrap/form/TimeField.js b/Roo/bootstrap/form/TimeField.js index b258728282..4138a9756b 100644 --- a/Roo/bootstrap/form/TimeField.js +++ b/Roo/bootstrap/form/TimeField.js @@ -6,8 +6,8 @@ */ /** - * @class Roo.bootstrap.TimeField - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.TimeField + * @extends Roo.bootstrap.form.Input * Bootstrap DateField class * * @@ -16,34 +16,34 @@ * @param {Object} config The config object */ -Roo.bootstrap.TimeField = function(config){ - Roo.bootstrap.TimeField.superclass.constructor.call(this, config); +Roo.bootstrap.form.TimeField = function(config){ + Roo.bootstrap.form.TimeField.superclass.constructor.call(this, config); this.addEvents({ /** * @event show * Fires when this field show. - * @param {Roo.bootstrap.DateField} thisthis + * @param {Roo.bootstrap.form.DateField} thisthis * @param {Mixed} date The date value */ show : true, /** * @event show * Fires when this field hide. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ hide : true, /** * @event select * Fires when select a date. - * @param {Roo.bootstrap.DateField} this + * @param {Roo.bootstrap.form.DateField} this * @param {Mixed} date The date value */ select : true }); }; -Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input, { /** * @cfg {String} format @@ -55,16 +55,16 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { getAutoCreate : function() { this.after = ''; - return Roo.bootstrap.TimeField.superclass.getAutoCreate.call(this); + return Roo.bootstrap.form.TimeField.superclass.getAutoCreate.call(this); }, onRender: function(ct, position) { - Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position); + Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position); - this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.TimeField.template); + this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template); this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; @@ -370,13 +370,13 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { onFocus : function() { - Roo.bootstrap.TimeField.superclass.onFocus.call(this); + Roo.bootstrap.form.TimeField.superclass.onFocus.call(this); this.show(); }, onBlur : function() { - Roo.bootstrap.TimeField.superclass.onBlur.call(this); + Roo.bootstrap.form.TimeField.superclass.onBlur.call(this); this.hide(); }, @@ -453,7 +453,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, { }); -Roo.apply(Roo.bootstrap.TimeField, { +Roo.apply(Roo.bootstrap.form.TimeField, { template : { tag: 'div', diff --git a/Roo/bootstrap/form/TriggerField.js b/Roo/bootstrap/form/TriggerField.js index 73731e487d..c85102f5e5 100644 --- a/Roo/bootstrap/form/TriggerField.js +++ b/Roo/bootstrap/form/TriggerField.js @@ -6,35 +6,35 @@ */ /** - * @class Roo.bootstrap.TriggerField - * @extends Roo.bootstrap.Input + * @class Roo.bootstrap.form.TriggerField + * @extends Roo.bootstrap.form.Input * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default). * The trigger has no default action, so you must assign a function to implement the trigger click handler by * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox * for which you can provide a custom implementation. For example: * 
    
-var trigger = new Roo.bootstrap.TriggerField();
+var trigger = new Roo.bootstrap.form.TriggerField();
 trigger.onTriggerClick = myTriggerFn;
 trigger.applyTo('my-field');
    * * However, in general you will most likely want to use TriggerField as the base class for a reusable component. - * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this. + * {@link Roo.bootstrap.form.DateField} and {@link Roo.bootstrap.form.ComboBox} are perfect examples of this. * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the * class 'x-form-trigger' by default and triggerClass will be appended if specified. * @cfg {String} caret (search|calendar) BS3 only - carat fa name * @constructor * Create a new TriggerField. - * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied + * @param {Object} config Configuration options (valid {@Roo.bootstrap.form.Input} config options will also be applied * to the base TextField) */ -Roo.bootstrap.TriggerField = function(config){ +Roo.bootstrap.form.TriggerField = function(config){ this.mimicing = false; - Roo.bootstrap.TriggerField.superclass.constructor.call(this, config); + Roo.bootstrap.form.TriggerField.superclass.constructor.call(this, config); }; -Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { +Roo.extend(Roo.bootstrap.form.TriggerField, Roo.bootstrap.form.Input, { /** * @cfg {String} triggerClass A CSS class to apply to the trigger */ @@ -400,7 +400,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { // private onResize : function(w, h){ -// Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments); +// Roo.bootstrap.form.TriggerField.superclass.onResize.apply(this, arguments); // if(typeof w == 'number'){ // var x = w - this.trigger.getWidth(); // this.inputEl().setWidth(this.adjustWidth('input', x)); @@ -431,7 +431,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { this.createList(); - Roo.bootstrap.TriggerField.superclass.initEvents.call(this); + Roo.bootstrap.form.TriggerField.superclass.initEvents.call(this); //this.wrap = this.el.wrap({cls: "x-form-field-wrap"}); if(!this.multiple && this.showToggleBtn){ this.trigger = this.el.select('span.dropdown-toggle',true).first(); @@ -504,12 +504,12 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { //if(this.wrap){ // this.wrap.remove(); //} - Roo.bootstrap.TriggerField.superclass.onDestroy.call(this); + Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this); }, // private onFocus : function(){ - Roo.bootstrap.TriggerField.superclass.onFocus.call(this); + Roo.bootstrap.form.TriggerField.superclass.onFocus.call(this); /* if(!this.mimicing){ this.wrap.addClass('x-trigger-wrap-focus'); @@ -551,7 +551,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { this.el.un("keydown", this.checkTab, this); } //this.wrap.removeClass('x-trigger-wrap-focus'); - Roo.bootstrap.TriggerField.superclass.onBlur.call(this); + Roo.bootstrap.form.TriggerField.superclass.onBlur.call(this); }, // private @@ -563,7 +563,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { // private onDisable : function(){ this.inputEl().dom.disabled = true; - //Roo.bootstrap.TriggerField.superclass.onDisable.call(this); + //Roo.bootstrap.form.TriggerField.superclass.onDisable.call(this); //if(this.wrap){ // this.wrap.addClass('x-item-disabled'); //} @@ -572,7 +572,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { // private onEnable : function(){ this.inputEl().dom.disabled = false; - //Roo.bootstrap.TriggerField.superclass.onEnable.call(this); + //Roo.bootstrap.form.TriggerField.superclass.onEnable.call(this); //if(this.wrap){ // this.el.removeClass('x-item-disabled'); //} diff --git a/Roo/bootstrap/htmleditor/ToolbarStandard.js b/Roo/bootstrap/htmleditor/ToolbarStandard.js deleted file mode 100644 index a2f55901b9..0000000000 --- a/Roo/bootstrap/htmleditor/ToolbarStandard.js +++ /dev/null @@ -1,287 +0,0 @@ - -Roo.namespace('Roo.bootstrap.htmleditor'); -/** - * @class Roo.bootstrap.HtmlEditorToolbar1 - * @extends Roo.bootstrap.nav.Simplebar - * Basic Toolbar - * - * @example - * Usage: - * - new Roo.bootstrap.HtmlEditor({ - .... - toolbars : [ - new Roo.bootstrap.HtmlEditorToolbar1({ - disable : { fonts: 1 , format: 1, ..., ... , ...], - btns : [ .... ] - }) - } - - * - * @cfg {Object} disable List of elements to disable.. - * @cfg {Array} btns List of additional buttons. - * - * - * NEEDS Extra CSS? - * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; } - */ - -Roo.bootstrap.htmleditor.ToolbarStandard = function(config) -{ - - Roo.apply(this, config); - - // default disabled, based on 'good practice'.. - this.disable = this.disable || {}; - Roo.applyIf(this.disable, { - fontSize : true, - colors : true, - specialElements : true - }); - Roo.bootstrap.htmleditor.ToolbarStandard.superclass.constructor.call(this, config); - - this.editor = config.editor; - this.editorcore = config.editor.editorcore; - - this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.cmd; }); - - //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config); - // dont call parent... till later. -} -Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.nav.Simplebar, { - - bar : true, - - editor : false, - editorcore : false, - - - formats : [ - "p" , - "h1","h2","h3","h4","h5","h6", - "pre", "code", - "abbr", "acronym", "address", "cite", "samp", "var", - 'div','span' - ], - - onRender : function(ct, position) - { - // Roo.log("Call onRender: " + this.xtype); - - Roo.bootstrap.htmleditor.ToolbarStandard.superclass.onRender.call(this, ct, position); - Roo.log(this.el); - this.el.dom.style.marginBottom = '0'; - var _this = this; - var editorcore = this.editorcore; - var editor= this.editor; - - var children = []; - var btn = function(id,cmd , toggle, handler, html){ - - var event = toggle ? 'toggle' : 'click'; - - var a = { - size : 'sm', - xtype: 'Button', - xns: Roo.bootstrap, - //glyphicon : id, - fa: id, - cmd : id || cmd, - enableToggle:toggle !== false, - html : html || '', - pressed : toggle ? false : null, - listeners : {} - }; - a.listeners[toggle ? 'toggle' : 'click'] = function() { - handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd || id); - }; - children.push(a); - return a; - } - - // var cb_box = function... - - var style = { - xtype: 'Button', - size : 'sm', - xns: Roo.bootstrap, - fa : 'font', - //html : 'submit' - menu : { - xtype: 'Menu', - xns: Roo.bootstrap, - items: [] - } - }; - Roo.each(this.formats, function(f) { - style.menu.items.push({ - xtype :'MenuItem', - xns: Roo.bootstrap, - html : '<'+ f+' style="margin:2px">'+f +'', - tagname : f, - listeners : { - click : function() - { - editorcore.insertTag(this.tagname); - editor.focus(); - } - } - - }); - }); - children.push(style); - - btn('bold',false,true); - btn('italic',false,true); - btn('align-left', 'justifyleft',true); - btn('align-center', 'justifycenter',true); - btn('align-right' , 'justifyright',true); - btn('link', false, false, function(btn) { - //Roo.log("create link?"); - var url = prompt(this.createLinkText, this.defaultLinkValue); - if(url && url != 'http:/'+'/'){ - this.editorcore.relayCmd('createlink', url); - } - }), - btn('list','insertunorderedlist',true); - btn('pencil', false,true, function(btn){ - Roo.log(this); - this.toggleSourceEdit(btn.pressed); - }); - - if (this.editor.btns.length > 0) { - for (var i = 0; i