X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FComboBox.js;h=21c9aef32ed35fbec9961df4c4760b1519194c15;hb=242e8cb7d4eb31741bfb8d282303ac36f54dd00e;hp=894f2dd5ea1eee3c8d183e144d9b9b50adcfa5b1;hpb=b4f95864aac908636b45a3bf4a1b6ed4c1a4f71c;p=roojs1 diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js index 894f2dd5ea..21c9aef32e 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; } @@ -1657,7 +1675,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { if(this.lastQuery != q || this.alwaysQuery){ this.lastQuery = q; if(this.mode == 'local'){ - Roo.log('it is local'); this.selectedIndex = -1; if(forceAll){ this.store.clearFilter(); @@ -1676,6 +1693,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { this.onLoad(); + }else{ this.store.baseParams[this.queryParam] = q; @@ -2129,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){ @@ -2185,7 +2207,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } var inputblock = { - cls : '', + cls : 'roo-combobox-wrap', cn : [ input ] @@ -2196,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 }); } @@ -2228,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) { @@ -2297,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', @@ -2331,12 +2339,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { }, { tag: 'label', - cls : 'control-label', + cls : 'control-label col-form-label', html : this.fieldLabel }, { - cls : '', + cls : 'roo-combobox-wrap ', cn: [ combobox ] @@ -2352,7 +2360,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { tag: 'label', 'for' : id, - cls : 'control-label', + cls : 'control-label col-form-label', cn : [ { tag : 'span', @@ -2366,7 +2374,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { ] }, { - cls : "", + cls : "roo-combobox-wrap ", cn: [ combobox ] @@ -2383,7 +2391,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; } @@ -2526,6 +2534,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; @@ -2582,18 +2592,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; @@ -2602,6 +2619,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() @@ -2708,7 +2729,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;