* @cfg {Boolean} jumbotron is it a jumbotron element
* @cfg {String} html content of element
* @cfg {String} well (lg|sm|md) a well, large, small or medium.
- * @cfg {String} panel (primary|success|info|warning|danger) render as panel - type - primary/success.....
+ * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel - type - primary/success.....
* @cfg {String} header content of header (for panel)
* @cfg {String} footer content of footer (for panel)
* @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
if (tbd) {
tbd.setSize(ctr.getWidth(),
- ctr.getHeight() - (thd.getHeight() + (tfd ? tfd.getHeight() : 0))
+ ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
);
var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
cw -= barsize;
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]);
}
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..
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) {
return this;
},
+
getItems : function()
{
var r=new Roo.util.MixedCollection(false, function(o){
iter(this);
return r;
-
-
-
-
+
}
});
setFieldLabel : function(v)
{
+ if(!this.rendered){
+ return;
+ }
+
this.fieldLabel = v;
- if(this.rendered){
- this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
+ if(this.indicator){
+ var ar = this.el.select('label > span',true);
+ if (!ar.length) {
+ Roo.log("could not find label > span on element");
+ Roo.log(this);
+ return;
+ }
+ this.el.select('label > span',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
+ return;
}
+
+ this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
}
});
var s = this.meta, Record = this.recordType,
f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
+ Roo.log('----------------------');
+ Roo.log(s);
+ Roo.log(Record);
+ Roo.log(f);
+
+
// Generate extraction functions for the totalProperty, the root, the id, and for each field
if (!this.ef) {
if(s.totalProperty) {
// fixme..
}
var align = Roo.bootstrap.Popover.alignment[placement];
+
+// Roo.log(align);
this.el.alignTo(on_el, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
* @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 {Roo.bootstrap.CheckBox} this This input
* @param {Boolean} checked The new checked value
*/
- check : true
+ check : true,
+ /**
+ * @event click
+ * Fires when the element is click.
+ * @param {Roo.bootstrap.CheckBox} this This input
+ */
+ click : true
});
};
checked: false,
weight : false,
inline: false,
+ tooltip : '',
getAutoCreate : function()
{
tag: 'input',
type : 'hidden',
cls : 'roo-hidden-value',
- value : this.checked ? this.valueOff : this.inputValue
+ value : this.checked ? this.inputValue : this.valueOff
};
}
if(this.checked){
input.checked = this.checked;
-
}
-
if (this.name) {
input.name = this.name;
'for' : id,
cls : 'control-label',
html : this.fieldLabel
-
},
{
cls : "",
cls: 'control-label box-input-label',
//cls : 'input-group-addon',
html : this.fieldLabel
-
},
inputblock
}
},
- onClick : function()
+ onClick : function(e)
{
- this.setChecked(!this.checked);
+ if(this.fireEvent('click', this, e) !== false){
+ this.setChecked(!this.checked);
+ }
+
},
setChecked : function(state,suppressEvent)
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;
var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
- if (label) {
+ if (label && label.iconEl) {
label.iconEl.removeClass(label.validClass);
label.iconEl.removeClass(label.invalidClass);
}
* @param {Roo.bootstrap.DocumentManager} this
* @param {Object} file
*/
- "process" : true
+ "process" : true,
+ /**
+ * @event previewrendered
+ * Fire when preview rendered
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "previewrendered" : true
});
};
{
this.selectorEl.dom.value = '';
- if(!this.files.length){
+ if(!this.files || !this.files.length){
return;
}
image.on('click', this.onClick, this, file);
+ this.fireEvent('previewrendered', this, file);
+
return file;
},
* @cfg {String} cls class of the element
* @cfg {String} target label target
* @cfg {Boolean} allowBlank (true|false) target allowBlank default true
- * @cfg {String} invalidClass default "text-danger fa fa-lg fa-exclamation-triangle"
- * @cfg {String} validClass default "text-success fa fa-lg fa-check"
+ * @cfg {String} invalidClass default "text-warning"
+ * @cfg {String} validClass default "text-success"
* @cfg {String} iconTooltip default "This field is required"
+ * @cfg {String} indicatorpos (left|right) default left
*
* @constructor
* Create a new FieldLabel
html: '',
target: '',
allowBlank : true,
- invalidClass : 'text-danger fa fa-lg fa-exclamation-triangle',
- validClass : 'text-success fa fa-lg fa-check',
+ invalidClass : 'has-warning',
+ validClass : 'has-success',
iconTooltip : 'This field is required',
+ indicatorpos : 'left',
getAutoCreate : function(){
cn : [
{
tag : 'i',
- cls : '',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
tooltip : this.iconTooltip
},
{
]
};
+ 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',
+ tooltip : this.iconTooltip
+ }
+ ]
+ };
+ }
+
return cfg;
},
{
Roo.bootstrap.Element.superclass.initEvents.call(this);
- this.iconEl = this.el.select('i', true).first();
+ this.indicator = this.indicatorEl();
- this.iconEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
+ 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()
{
- this.iconEl.show();
+ if(this.indicator){
+ this.indicator.removeClass('visible');
+ this.indicator.addClass('invisible');
+ }
- this.iconEl.removeClass(this.invalidClass);
+ this.el.removeClass(this.invalidClass);
- this.iconEl.addClass(this.validClass);
+ this.el.addClass(this.validClass);
this.fireEvent('valid', this);
},
*/
markInvalid : function(msg)
{
- this.iconEl.show();
+ if(this.indicator){
+ this.indicator.removeClass('invisible');
+ this.indicator.addClass('visible');
+ }
- this.iconEl.removeClass(this.validClass);
+ this.el.removeClass(this.validClass);
- this.iconEl.addClass(this.invalidClass);
+ this.el.addClass(this.invalidClass);
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);
}
});
/**
* @class Roo.bootstrap.MoneyField
- * @extends Roo.bootstrap.TriggerField
+ * @extends Roo.bootstrap.ComboBox
* Bootstrap MoneyField class
*
* @constructor
*/
Roo.bootstrap.MoneyField = function(config) {
+
Roo.bootstrap.MoneyField.superclass.constructor.call(this, config);
+
};
-Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.TriggerField, {
+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 : 2,
+ /**
+ * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
+ */
+ allowNegative : 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,
+
+ inputlg : 9,
+ inputmd : 9,
+ inputsm : 9,
+ inputxs : 6,
+
+ store : false,
getAutoCreate : function()
{
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 = {
- cls: 'roo-select2-container input-group',
- cn: [
+ tag : 'div',
+ cls : 'row roo-money-field',
+ cn : [
{
tag : 'div',
- cls : 'roo-money-currency-box',
+ cls : 'roo-money-currency column col-lg-' + clg + ' col-md-' + cmd + ' col-sm-' + csm + ' col-xs-' + cxs,
cn : [
{
- tag : 'input',
- cls : 'form-control roo-money-amount-input',
- autocomplete: 'new-password'
- },
- {
- tag :'span',
- cls : 'input-group-addon btn dropdown-toggle',
- cn : [
+ tag : 'div',
+ cls: 'roo-select2-container input-group',
+ cn: [
{
- tag: 'span',
- cls: 'caret'
+ 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: this.hasFeedback ? 'has-feedback' : '',
- cn: [
- input
+ 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',
});
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 += "-";
+ }
+
+ 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;
+
+ 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 = this.fixPrecision(v);
+
+ v = String(v).replace(".", this.decimalSeparator);
+
+ this.value = v;
+
+ if(this.rendered){
+ this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+ this.validate();
+ }
+ },
+
+ getRawValue : function()
+ {
+ var v = this.inputEl().getValue();
+
+ return v;
+ },
+
+ getValue : function()
+ {
+ return this.fixPrecision(this.parseValue(this.getRawValue()));
+ },
+
+ parseValue : function(value)
+ {
+ value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+ return isNaN(value) ? '' : value;
+ },
+
+ fixPrecision : function(value)
+ {
+ 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){
+ 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();
}
});
\ No newline at end of file
projects / roojs1 / blobdiff