X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_MoneyField.js.html;fp=docs%2Fsrc%2FRoo_bootstrap_MoneyField.js.html;h=489ea795c2145b4e3709aa3ba75c05fd5979cfd8;hb=9ff8ded6bbbd258ecd646184ba26020874e2c085;hp=0000000000000000000000000000000000000000;hpb=2542b67d1a0768025056f2f330bfe50b64d1ad38;p=roojs1 diff --git a/docs/src/Roo_bootstrap_MoneyField.js.html b/docs/src/Roo_bootstrap_MoneyField.js.html new file mode 100644 index 0000000000..489ea795c2 --- /dev/null +++ b/docs/src/Roo_bootstrap_MoneyField.js.html @@ -0,0 +1,720 @@ +/home/alan/gitlive/roojs1/Roo/bootstrap/MoneyField.js +/** + * @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, + + 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 = '<li><a href="#">{' + this.currencyField + '}</a></li>'; + } + + 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