X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FComboBox.js;h=8582874e0363c172599d855b7e39890821975104;hb=6cbe44662ecbba0cbd9f4e38d6f94158668f3942;hp=59210c42bfa533dc4e8e670080ee8371151bc0f7;hpb=9cf7f126e3eeda9a0a6d09b11d486f253f317184;p=roojs1 diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js index 59210c42bf..8582874e03 100644 --- a/Roo/bootstrap/ComboBox.js +++ b/Roo/bootstrap/ComboBox.js @@ -17,6 +17,7 @@ * @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 @@ -143,7 +144,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ /** - * @cfg {String/Roo.Template} tpl The template to use to render the output + * @cfg {String/Roo.Template} tpl The template to use to render the output default is '{' + this.displayField + '}' */ /** @@ -295,12 +296,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { multiple : false, /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now */ invalidClass : "has-warning", /** - * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid") + * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now */ validClass : "has-success", @@ -319,6 +320,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ useNativeIOS : false, + /** + * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view + */ + mobile_restrict_height : false, + ios_options : false, //private @@ -338,6 +344,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { emptyResultText: 'Empty', triggerText : 'Select', emptyTitle : '', + width : false, // element that contains real text value.. (when hidden is used..) @@ -442,6 +449,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var box = { tag: 'div', + style : 'display: contents', cn: [ { tag: 'input', @@ -467,6 +475,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var combobox = { cls: 'roo-select2-container input-group roo-select2-container-multi', cn: [ + box // { // tag: 'ul', @@ -487,20 +496,28 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } + + 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'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, @@ -523,17 +540,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { tag : 'span', html : this.fieldLabel }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - } + indicator ] }, { @@ -555,7 +568,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { 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; } @@ -584,11 +599,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } else if ( this.fieldLabel.length) { // Roo.log(" label"); cfg.cn = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, { tag: 'label', //cls : 'input-group-addon', @@ -604,11 +615,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { //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' - }, + indicator, combobox ]; @@ -769,7 +776,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ if(!this.tpl){ - this.tpl = '
  • {' + this.displayField + '}
    • '; + 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, { @@ -960,11 +969,16 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.list.on('scroll', this.onViewScroll, this); if(!this.tpl){ - 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 + singleSelect:true, + tickable:true, + parent:this, + store: this.store, + selectedClass: this.selectedClass }); //this.view.wrapEl.setDisplayed(false); @@ -1071,7 +1085,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, // private - onResize: function(w, h){ + onResize: function(w, h) + { + + // Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments); // // if(typeof w != 'number'){ @@ -1112,7 +1129,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.inputEl().on('mousedown', this.onTriggerClick, this); this.inputEl().addClass('x-combo-noedit'); }else{ - this.inputEl().dom.setAttribute('readOnly', false); + this.inputEl().dom.removeAttribute('readOnly'); this.inputEl().un('mousedown', this.onTriggerClick, this); this.inputEl().removeClass('x-combo-noedit'); } @@ -1513,6 +1530,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { onEmptyResults : function(){ if(this.tickable && this.editable){ + this.hasFocus = false; this.restrictHeight(); return; } @@ -1721,17 +1739,15 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion. */ collapse : function(){ - - this.hasFocus = false; - if(!this.isExpanded()){ return; } this.list.hide(); + this.hasFocus = false; + if(this.tickable){ - this.okBtn.hide(); this.cancelBtn.hide(); this.trigger.show(); @@ -2131,6 +2147,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { validate : function() { + if(this.getVisibilityEl().hasClass('hidden')){ + return true; + } + var v = this.getRawValue(); if(this.multiple){ @@ -2187,7 +2207,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } var inputblock = { - cls : '', + cls : 'roo-combobox-wrap', cn : [ input ] @@ -2198,7 +2218,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { inputblock.cn.unshift({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-prepend input-group-text', html : this.before }); } @@ -2230,63 +2250,49 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-append input-group-text', html : this.after }); } - var box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - inputblock - ] - - }; + + var ibwrap = inputblock; if(this.multiple){ - box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, + ibwrap = { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ - inputblock - ] - } + inputblock ] } ] - } - }; + }; + + + } var combobox = { cls: 'roo-select2-container input-group roo-touchview-combobox ', cn: [ - box + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + ibwrap ] }; if(!this.multiple && this.showToggleBtn){ var caret = { - tag: 'span', - cls: 'caret' + cls: 'caret' }; if (this.caret != false) { @@ -2299,9 +2305,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { combobox.cn.push({ tag :'span', - cls : 'input-group-addon btn dropdown-toggle', + cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', cn : [ - caret, + Roo.bootstrap.version == 3 ? caret : '', { tag: 'span', cls: 'combobox-clear', @@ -2321,24 +2327,29 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { 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 = [ - { - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + required, { tag: 'label', - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, { - cls : '', + cls : 'roo-combobox-wrap ', cn: [ combobox ] @@ -2354,21 +2365,17 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { tag : 'span', html : this.fieldLabel }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - } + required ] }, { - cls : "", + cls : "roo-combobox-wrap ", cn: [ combobox ] @@ -2385,7 +2392,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.labelWidth > 12){ labelCfg.style = "width: " + this.labelWidth + 'px'; } - + if(this.labelWidth < 13 && this.labelmd == 0){ this.labelmd = this.labelWidth; } @@ -2413,11 +2420,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } 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' - }, + required, { tag: 'label', cls : 'control-label', @@ -2439,11 +2442,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { cls : 'control-label', html : this.fieldLabel, cn : [ - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - } + required ] }, { @@ -2528,6 +2527,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { document.activeElement.blur(); }, this); + this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true); + return; @@ -2584,18 +2585,25 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.animate){ var _this = this; - (function(){ _this.touchViewEl.addClass('in'); }).defer(50); + (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50); }else{ - this.touchViewEl.addClass('in'); + 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'); + this.touchViewEl.removeClass(['in','show']); if(this.animate){ var _this = this; @@ -2604,6 +2612,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.touchViewEl.setStyle('display', 'none'); } + if(this._touchViewMask){ + this._touchViewMask.removeClass('show'); + Roo.get(document.body).removeClass("x-body-masked"); + } }, setTouchViewValue : function() @@ -2710,7 +2722,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight(); } - var listHeight = this.touchViewListGroup.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;