From 52a28c787a52683f76ce4b31e65b70189f46b21c Mon Sep 17 00:00:00 2001 From: john Date: Fri, 19 Jan 2018 10:26:30 +0800 Subject: [PATCH] sync --- Roo/bootstrap/ComboBox.js | 5 - Roo/bootstrap/PhoneInput.js | 2734 ++++++++++++++++++++++++++++ buildSDK/dependancy_bootstrap.txt | 1 + roojs-bootstrap-debug.js | 2742 +++++++++++++++++++++++++++++ roojs-bootstrap.js | 127 ++ 5 files changed, 5604 insertions(+), 5 deletions(-) create mode 100644 Roo/bootstrap/PhoneInput.js diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js index 0c1ce3ac55..a5b7622f92 100644 --- a/Roo/bootstrap/ComboBox.js +++ b/Roo/bootstrap/ComboBox.js @@ -368,10 +368,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ if(!this.tickable){ cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this); - if(this.name == 'info_year_invest_id_display_name'){ - Roo.log('cfg.................................................'); - Roo.log(cfg); - } return cfg; } @@ -602,7 +598,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { ]; if(this.indicatorpos == 'right'){ - Roo.log('hidden name:'+this.hiddenName); cfg.cn = [ { tag: 'label', diff --git a/Roo/bootstrap/PhoneInput.js b/Roo/bootstrap/PhoneInput.js new file mode 100644 index 0000000000..3519ecb552 --- /dev/null +++ b/Roo/bootstrap/PhoneInput.js @@ -0,0 +1,2734 @@ +/* + * - LGPL + * + * element + * + */ + +/** + * @class Roo.bootstrap.PhoneInput + * @extends Roo.bootstrap.TriggerField + * Bootstrap PhoneInput class + * + * @constructor + * Create a new PhoneInput + * @param {Object} config The config object +*/ + +Roo.bootstrap.PhoneInput = function(config){ + Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config); + this.addEvents({ + + }); + + //setting global... + 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.PhoneInput, Roo.bootstrap.TriggerField, { + + //setting properties.. + + 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 PhoneInput + */ + if(!this.tickable){ + cfg = Roo.bootstrap.PhoneInput.superclass.getAutoCreate.call(this); + return cfg; + } + + /* + * PhoneInput with tickable selections + */ + + var align = this.labelAlign || this.parentLabelAlign(); + + cfg = { + cls : 'form-group roo-PhoneInput-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', + 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 PhoneInput = { + 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' + }; + + PhoneInput.cn.push(feedback); + } + + + if (align ==='left' && this.fieldLabel.length) { + + cfg.cls += ' roo-form-group-label-left'; + + cfg.cn = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + 'for' : id, + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : "", + cn: [ + PhoneInput + ] + } + + ]; + + 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 + }, + { + tag : 'i', + cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + } + ] + }, + { + cls : "", + cn: [ + PhoneInput + ] + } + + ]; + + + + 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 = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + //cls : 'input-group-addon', + html : this.fieldLabel + }, + PhoneInput + ]; + + 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' + }, + PhoneInput + ]; + + } + + } else { + + cfg = PhoneInput + + + } + + 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.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.PhoneInput.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 = '
  • {' + 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.PhoneInput.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.PhoneInput.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.setAttribute('readOnly', false); + 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.PhoneInput.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.PhoneInput.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){ + (vv.length || vv * 1 > 0) ? close.show() : close.hide(); + } + + if(this.hiddenField){ + this.hiddenField.dom.value = vv; + + this.lastSelectionText = dv; + Roo.bootstrap.PhoneInput.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.PhoneInput.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]){ + _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.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() + { + 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 : '', + cn : [ + input + ] + }; + + if(this.before){ + inputblock.cls += ' input-group'; + + inputblock.cn.unshift({ + tag :'span', + cls : 'input-group-addon', + 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', + html : this.after + }); + } + + var box = { + tag: 'div', + cn: [ + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + inputblock + ] + + }; + + if(this.multiple){ + box = { + tag: 'div', + cn: [ + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ + { + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ + + inputblock + ] + } + ] + } + ] + } + }; + + var PhoneInput = { + cls: 'roo-select2-container input-group roo-touchview-PhoneInput ', + cn: [ + box + ] + }; + + if(!this.multiple && this.showToggleBtn){ + + var caret = { + tag: 'span', + cls: 'caret' + }; + + if (this.caret != false) { + caret = { + tag: 'i', + cls: 'fa fa-' + this.caret + }; + + } + + PhoneInput.cn.push({ + tag :'span', + cls : 'input-group-addon btn dropdown-toggle', + cn : [ + caret, + { + tag: 'span', + cls: 'PhoneInput-clear', + cn : [ + { + tag : 'i', + cls: 'icon-remove' + } + ] + } + ] + + }) + } + + if(this.multiple){ + PhoneInput.cls += ' roo-select2-container-multi'; + } + + 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' + }, + { + tag: 'label', + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + + var labelCfg = cfg.cn[1]; + var contentCfg = cfg.cn[2]; + + + if(this.indicatorpos == 'right'){ + cfg.cn = [ + { + tag: 'label', + 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' + } + ] + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + } + + labelCfg = cfg.cn[0]; + contentCfg = cfg.cn[2]; + + 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 = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + + if(this.indicatorpos == 'right'){ + cfg.cn = [ + { + tag: 'label', + 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' + } + ] + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + } + } else { + cfg.cn = PhoneInput; + } + + + 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); + + return; + + + }, + + renderTouchView : function() + { + this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.PhoneInput.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'); + 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'); }).defer(50); + }else{ + this.touchViewEl.addClass('in'); + } + + this.doTouchViewQuery(); + + }, + + hideTouchView : function() + { + this.touchViewEl.removeClass('in'); + + if(this.animate){ + var _this = this; + (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150); + }else{ + this.touchViewEl.setStyle('display', 'none'); + } + + }, + + 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.PhoneInput.listItemCheckbox : Roo.bootstrap.PhoneInput.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-PhoneInput-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-PhoneInput-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-PhoneInput-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-PhoneInput-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(); + + 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.PhoneInput.emptyResult); + + this.touchViewListGroup.select('.roo-PhoneInput-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-PhoneInput-list-group-item-box > input:checked', true).elements, function(c){ + c.dom.removeAttribute('checked'); + }, this); + + row.select('.roo-PhoneInput-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-PhoneInput-list-group-item-box > input', true).first().dom.removeAttribute('checked'); + this.tickItems.splice(this.tickItems.indexOf(r.data), 1); + return; + } + + row.select('.roo-PhoneInput-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 PhoneInput = { + tag: 'select', + cls : 'roo-ios-select' + }; + + if (this.name) { + PhoneInput.name = this.name; + } + + if (this.disabled) { + PhoneInput.disabled = true; + } + + var settings = this; + + ['xs','sm','md','lg'].map(function(size){ + if (settings[size]) { + cfg.cls += ' col-' + size + '-' + settings[size]; + } + }); + + cfg.cn = PhoneInput; + + 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 --'; + + 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.PhoneInput, { + + 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-PhoneInput-list-group-item-value' + }, + { + tag: 'div', + cls: 'roo-PhoneInput-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-PhoneInput-list-group-item-value' + }, + { + tag: 'div', + cls: 'roo-PhoneInput-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-PhoneInput-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' + } + } + ] + } + ] + + } +}); \ No newline at end of file diff --git a/buildSDK/dependancy_bootstrap.txt b/buildSDK/dependancy_bootstrap.txt index 775d313a8a..8e5bbbab79 100644 --- a/buildSDK/dependancy_bootstrap.txt +++ b/buildSDK/dependancy_bootstrap.txt @@ -149,3 +149,4 @@ Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Tabs Roo.bootstrap.panel.TabItem +Roo.bootstrap.PhoneInput diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 945131dd1c..168b35fbaa 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -37823,3 +37823,2745 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, */ closeText : "Close this tab" }); +/* + * - LGPL + * + * element + * + */ + +/** + * @class Roo.bootstrap.PhoneInput + * @extends Roo.bootstrap.TriggerField + * Bootstrap PhoneInput class + * + * @constructor + * Create a new PhoneInput + * @param {Object} config The config object +*/ + +Roo.bootstrap.PhoneInput = function(config){ + Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config); + this.addEvents({ + + }); + + //setting global... + 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.PhoneInput, Roo.bootstrap.TriggerField, { + + //setting properties.. + + 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 PhoneInput + */ + if(!this.tickable){ + cfg = Roo.bootstrap.PhoneInput.superclass.getAutoCreate.call(this); + if(this.name == 'info_year_invest_id_display_name'){ + Roo.log('cfg.................................................'); + Roo.log(cfg); + } + return cfg; + } + + /* + * PhoneInput with tickable selections + */ + + var align = this.labelAlign || this.parentLabelAlign(); + + cfg = { + cls : 'form-group roo-PhoneInput-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', + 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 PhoneInput = { + 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' + }; + + PhoneInput.cn.push(feedback); + } + + + if (align ==='left' && this.fieldLabel.length) { + + cfg.cls += ' roo-form-group-label-left'; + + cfg.cn = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + 'for' : id, + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : "", + cn: [ + PhoneInput + ] + } + + ]; + + 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 + }, + { + tag : 'i', + cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + } + ] + }, + { + cls : "", + cn: [ + PhoneInput + ] + } + + ]; + + + + 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 = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + //cls : 'input-group-addon', + html : this.fieldLabel + }, + PhoneInput + ]; + + if(this.indicatorpos == 'right'){ + Roo.log('hidden name:'+this.hiddenName); + 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' + }, + PhoneInput + ]; + + } + + } else { + +// Roo.log(" no label && no align"); + cfg = PhoneInput + + + } + + 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.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.PhoneInput.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 = '
  • {' + 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.PhoneInput.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.PhoneInput.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.setAttribute('readOnly', false); + 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.PhoneInput.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.PhoneInput.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){ + (vv.length || vv * 1 > 0) ? close.show() : close.hide(); + } + + if(this.hiddenField){ + this.hiddenField.dom.value = vv; + + this.lastSelectionText = dv; + Roo.bootstrap.PhoneInput.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.PhoneInput.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.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() + { + 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 : '', + cn : [ + input + ] + }; + + if(this.before){ + inputblock.cls += ' input-group'; + + inputblock.cn.unshift({ + tag :'span', + cls : 'input-group-addon', + 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', + html : this.after + }); + } + + var box = { + tag: 'div', + cn: [ + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + inputblock + ] + + }; + + if(this.multiple){ + box = { + tag: 'div', + cn: [ + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ + { + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ + + inputblock + ] + } + ] + } + ] + } + }; + + var PhoneInput = { + cls: 'roo-select2-container input-group roo-touchview-PhoneInput ', + cn: [ + box + ] + }; + + if(!this.multiple && this.showToggleBtn){ + + var caret = { + tag: 'span', + cls: 'caret' + }; + + if (this.caret != false) { + caret = { + tag: 'i', + cls: 'fa fa-' + this.caret + }; + + } + + PhoneInput.cn.push({ + tag :'span', + cls : 'input-group-addon btn dropdown-toggle', + cn : [ + caret, + { + tag: 'span', + cls: 'PhoneInput-clear', + cn : [ + { + tag : 'i', + cls: 'icon-remove' + } + ] + } + ] + + }) + } + + if(this.multiple){ + PhoneInput.cls += ' roo-select2-container-multi'; + } + + 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' + }, + { + tag: 'label', + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + + var labelCfg = cfg.cn[1]; + var contentCfg = cfg.cn[2]; + + + if(this.indicatorpos == 'right'){ + cfg.cn = [ + { + tag: 'label', + 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' + } + ] + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + } + + labelCfg = cfg.cn[0]; + contentCfg = cfg.cn[2]; + + 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 = [ + { + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }, + { + tag: 'label', + cls : 'control-label', + html : this.fieldLabel + + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + + if(this.indicatorpos == 'right'){ + cfg.cn = [ + { + tag: 'label', + 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' + } + ] + }, + { + cls : '', + cn: [ + PhoneInput + ] + } + ]; + } + } else { + cfg.cn = PhoneInput; + } + + + 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); + + return; + + + }, + + renderTouchView : function() + { + this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.PhoneInput.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'); + 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'); }).defer(50); + }else{ + this.touchViewEl.addClass('in'); + } + + this.doTouchViewQuery(); + + }, + + hideTouchView : function() + { + this.touchViewEl.removeClass('in'); + + if(this.animate){ + var _this = this; + (function(){ _this.touchViewEl.setStyle('display', 'none'); }).defer(150); + }else{ + this.touchViewEl.setStyle('display', 'none'); + } + + }, + + 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.PhoneInput.listItemCheckbox : Roo.bootstrap.PhoneInput.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-PhoneInput-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-PhoneInput-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-PhoneInput-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-PhoneInput-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(); + + 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.PhoneInput.emptyResult); + + this.touchViewListGroup.select('.roo-PhoneInput-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-PhoneInput-list-group-item-box > input:checked', true).elements, function(c){ + c.dom.removeAttribute('checked'); + }, this); + + row.select('.roo-PhoneInput-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-PhoneInput-list-group-item-box > input', true).first().dom.removeAttribute('checked'); + this.tickItems.splice(this.tickItems.indexOf(r.data), 1); + return; + } + + row.select('.roo-PhoneInput-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 PhoneInput = { + tag: 'select', + cls : 'roo-ios-select' + }; + + if (this.name) { + PhoneInput.name = this.name; + } + + if (this.disabled) { + PhoneInput.disabled = true; + } + + var settings = this; + + ['xs','sm','md','lg'].map(function(size){ + if (settings[size]) { + cfg.cls += ' col-' + size + '-' + settings[size]; + } + }); + + cfg.cn = PhoneInput; + + 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 --'; + + 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.PhoneInput, { + + 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-PhoneInput-list-group-item-value' + }, + { + tag: 'div', + cls: 'roo-PhoneInput-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-PhoneInput-list-group-item-value' + }, + { + tag: 'div', + cls: 'roo-PhoneInput-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-PhoneInput-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' + } + } + ] + } + ] + + } +}); \ No newline at end of file diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index bbb913de5c..869d1aedef 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -1597,3 +1597,130 @@ this.pnode.addClass("disabled");}},enable:function(){this.disabled=false;this.pn }this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);return this.bodyEl.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.bodyEl.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this)); }},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},_setLoaded:function(){this.loaded=true;},closeClick:function(e){var o={};e.stopEvent();this.fireEvent("beforeclose",this,o);if(o.cancel!==true){this.tabPanel.removeTab(this.id); }},closeText:"Close this tab"}); +// Roo/bootstrap/PhoneInput.js +Roo.bootstrap.PhoneInput=function(A){Roo.bootstrap.PhoneInput.superclass.constructor.call(this,A);this.addEvents({});this.item=[];this.tickItems=[];this.selectedIndex=-1;if(this.mode=='local'){if(A.queryDelay===undefined){this.queryDelay=10;}if(A.minChars===undefined){this.minChars=0; +}}};Roo.extend(Roo.bootstrap.PhoneInput,Roo.bootstrap.TriggerField,{getAutoCreate:function(){var A=false;if(Roo.isIOS&&this.useNativeIOS){A=this.getAutoCreateNativeIOS();return A;}if(Roo.isTouch&&this.mobileTouchView){A=this.getAutoCreateTouchView();return A; +;}if(!this.tickable){A=Roo.bootstrap.PhoneInput.superclass.getAutoCreate.call(this);if(this.name=='info_year_invest_id_display_name'){Roo.log('cfg.................................................');Roo.log(A);}return A;}var B=this.labelAlign||this.parentLabelAlign(); +A={cls:'form-group roo-PhoneInput-tickable'};var C='';var D='';var E='';if(this.btn_text_show){C='Select';D='Done';E='Cancel';}var F={tag:'div',cls:'tickable-buttons',cn:[{tag:'button',type:'button',cls:'btn btn-link btn-edit pull-'+this.btnPosition,html:C} +,{tag:'button',type:'button',name:'ok',cls:'btn btn-link btn-ok pull-'+this.btnPosition,html:D},{tag:'button',type:'button',name:'cancel',cls:'btn btn-link btn-cancel pull-'+this.btnPosition,html:E}]};if(this.editable){F.cn.unshift({tag:'input',cls:'roo-select2-search-field-input'} +);}var G=this;Roo.each(F.cn,function(c){if(G.size){c.cls+=' btn-'+G.size;}if(G.disabled){c.disabled=true;}});var H={tag:'div',cn:[{tag:'input',type:'hidden',cls:'form-hidden-field'},{tag:'ul',cls:'roo-select2-choices',cn:[{tag:'li',cls:'roo-select2-search-field',cn:[F]} +]}]};var I={cls:'roo-select2-container input-group roo-select2-container-multi',cn:[H]};if(this.hasFeedback&&!this.allowBlank){var J={tag:'span',cls:'glyphicon form-control-feedback'};I.cn.push(J);}if(B==='left'&&this.fieldLabel.length){A.cls+=' roo-form-group-label-left'; +A.cn=[{tag:'i',cls:'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',tooltip:'This field is required'},{tag:'label','for':id,cls:'control-label',html:this.fieldLabel},{cls:"",cn:[I]}];var K=A.cn[1];var L=A.cn[2];if(this.indicatorpos=='right'){A.cn=[{tag:'label','for':id,cls:'control-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'}]},{cls:"",cn:[I]}];K=A.cn[0];L=A.cn[1];}if(this.labelWidth>12){K.style="width: "+this.labelWidth+'px';}if(this.labelWidth<13&&this.labelmd==0){this.labelmd=this.labelWidth; +}if(this.labellg>0){K.cls+=' col-lg-'+this.labellg;L.cls+=' col-lg-'+(12-this.labellg);}if(this.labelmd>0){K.cls+=' col-md-'+this.labelmd;L.cls+=' col-md-'+(12-this.labelmd);}if(this.labelsm>0){K.cls+=' col-sm-'+this.labelsm;L.cls+=' col-sm-'+(12-this.labelsm); +}if(this.labelxs>0){K.cls+=' col-xs-'+this.labelxs;L.cls+=' col-xs-'+(12-this.labelxs);}}else if(this.fieldLabel.length){A.cn=[{tag:'i',cls:'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',tooltip:'This field is required'},{tag:'label',html:this.fieldLabel} +,I];if(this.indicatorpos=='right'){Roo.log('hidden name:'+this.hiddenName);A.cn=[{tag:'label',html:this.fieldLabel},{tag:'i',cls:'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',tooltip:'This field is required'},I];}}else{A=I}var M=this; +['xs','sm','md','lg'].map(function(N){if(M[N]){A.cls+=' col-'+N+'-'+M[N];}});return A;},_initEventsCalled:false,initEvents:function(){if(this._initEventsCalled){return;}this._initEventsCalled=true;if(!this.store){throw "can not find store for combo";}this.store=Roo.factory(this.store,Roo.data); +this.store.parent=this;if(Roo.XComponent.build_from_html){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;}if(Roo.isTouch&&this.mobileTouchView){this.initTouchView();return;}if(this.tickable){this.initTickableEvents();return;}Roo.bootstrap.PhoneInput.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:'';this.el.dom.removeAttribute('name');this.hiddenField.dom.setAttribute('name',this.hiddenName);}var A='x-combo-list';var B=this;(function(){var lw=B.listWidth||Math.max(B.inputEl().getWidth(),B.minListWidth); +B.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.displayField+'}
    • ';}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);if(!this.editable){this.editable=true;this.setEditable(false); +}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.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(C,D,E){if(E=='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:'';this.el.dom.removeAttribute('name');this.hiddenField.dom.setAttribute('name',this.hiddenName); +}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 A=this;(function(){var lw=A.listWidth||Math.max(A.inputEl().getWidth(),A.minListWidth);A.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.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,B){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.PhoneInput.superclass.onDestroy.call(this);},fireKey:function(e){if(e.isNavKeyPress()&&!this.list.isVisible()){this.fireEvent("specialkey",this,e); +}},onResize:function(w,h){},setEditable:function(A){if(A==this.editable){return;}this.editable=A;if(!A){this.inputEl().dom.setAttribute('readOnly',true);this.inputEl().on('mousedown',this.onTriggerClick,this);this.inputEl().addClass('x-combo-noedit');}else{this.inputEl().dom.setAttribute('readOnly',false); +this.inputEl().un('mousedown',this.onTriggerClick,this);this.inputEl().removeClass('x-combo-noedit');}},onBeforeLoad:function(A,B){if(!this.hasFocus){return;}if(!B.add){this.list.dom.innerHTML='
  • '+(this.loadingText||'loading')+'
    • '; +}this.restrictHeight();this.selectedIndex=-1;},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();}},onLoadException:function(){this.hasQuery=false; +if(typeof(this.loading)!=='undefined'&&this.loading!==null){this.loading.hide();}if(this.tickable&&this.editable){return;}this.collapse();},onTypeAhead:function(){if(this.store.getCount()>0){var r=this.store.getAt(0);var A=r.data[this.displayField];var B=A.length; +var C=this.getRawValue().length;if(C!=B){this.setRawValue(A);this.selectText(C,A.length);}}},onSelect:function(A,B){if(this.fireEvent('beforeselect',this,A,B)!==false){this.setFromData(B>-1?A.data:false);this.collapse();this.fireEvent('select',this,A,B);} +},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.PhoneInput.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;},clearValue:function(){if(this.hiddenField){this.hiddenField.dom.value=''; +}this.value='';this.setRawValue('');this.lastSelectionText='';this.lastData=false;var A=this.closeTriggerEl();if(A){A.hide();}this.validate();},setValue:function(v){if(Roo.isIOS&&this.useNativeIOS){this.setIOSValue(v);return;}if(this.multiple){this.syncValue(); +return;}var A=v;if(this.valueField){var r=this.findRecord(this.valueField,v);if(r){A=r.data[this.displayField];}else if(this.valueNotFoundText!==undefined){A=this.valueNotFoundText;}}this.lastSelectionText=A;if(this.hiddenField){this.hiddenField.dom.value=v; +}Roo.bootstrap.PhoneInput.superclass.setValue.call(this,A);this.value=v;var B=this.closeTriggerEl();if(B){(v&&(v.length||v*1>0))?B.show():B.hide();}this.validate();},lastData:false,setFromData:function(o){if(this.multiple){this.addItem(o);return;}var dv=''; +var vv='';this.lastData=o;if(this.displayField){dv=!o||typeof(o[this.displayField])=='undefined'?'':o[this.displayField];}else{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 A=this.closeTriggerEl();if(A){(vv.length||vv*1>0)?A.show():A.hide();}if(this.hiddenField){this.hiddenField.dom.value=vv;this.lastSelectionText=dv;Roo.bootstrap.PhoneInput.superclass.setValue.call(this,dv);this.value=vv;return;}this.lastSelectionText=dv; +Roo.bootstrap.PhoneInput.superclass.setValue.call(this,dv);this.value=vv;},reset:function(){if(this.multiple){this.clearItem();return;}this.setValue(this.originalValue);this.lastData=false;if(this.view){this.view.clearSelections();}this.validate();},findRecord:function(A,B){var C; +if(this.store.getCount()>0){this.store.each(function(r){if(r.data[A]==B){C=r;return false;}return true;});}return C;},getName:function(){if(!this.rendered){return ''};return !this.hiddenName&&this.inputEl().dom.name?this.inputEl().dom.name:(this.hiddenName||''); +},onViewMove:function(e,t){this.inKeyMode=false;},onViewOver:function(e,t){if(this.inKeyMode){return;}var A=this.view.findItemFromChild(t);if(A){var B=this.view.indexOf(A);this.select(B,false);}},onViewClick:function(A,B,el,e){var C=this.view.getSelectedIndexes()[0]; +var r=this.store.getAt(C);if(this.tickable){if(typeof(e)!='undefined'&&e.getTarget().nodeName.toLowerCase()!='input'){return;}var rm=false;var D=this;Roo.each(this.tickItems,function(v,k){if(typeof(v)!='undefined'&&v[D.valueField]==r.data[D.valueField]){Roo.log(v); +D.tickItems.splice(k,1);if(typeof(e)=='undefined'&&A==false){Roo.get(D.view.getNodes(C,C)[0]).select('input',true).first().dom.checked=false;}rm=true;return;}});if(rm){return;}if(this.fireEvent('tick',this,r,C,Roo.get(D.view.getNodes(C,C)[0]).select('input',true).first().dom.checked)!==false){this.tickItems.push(r.data); +}if(typeof(e)=='undefined'&&A==false){Roo.get(D.view.getNodes(C,C)[0]).select('input',true).first().dom.checked=true;}return;}if(r){this.onSelect(r,C);}if(B!==false&&!this.blockFocus){this.inputEl().focus();}},restrictHeight:function(){this.list.alignTo(this.inputEl(),this.listAlign); +this.list.alignTo(this.inputEl(),this.listAlign);},onEmptyResults:function(){if(this.tickable&&this.editable){this.restrictHeight();return;}this.collapse();},isExpanded:function(){return this.list.isVisible();},selectByValue:function(v,A){if(v!==undefined&&v!==null){var r=this.findRecord(this.valueField||this.displayField,v); +if(r){this.select(this.store.indexOf(r),A);return true;}}return false;},select:function(A,B){this.selectedIndex=A;this.view.select(A);if(B!==false){var el=this.view.getNode(A);if(el){this.list.scrollChildIntoView(el,false);}}},selectNext:function(){var ct=this.store.getCount(); +if(ct>0){if(this.selectedIndex==-1){this.select(0);}else if(this.selectedIndex0){if(this.selectedIndex==-1){this.select(0);}else if(this.selectedIndex!=0){this.select(this.selectedIndex-1); +}}},onKeyUp:function(e){if(this.editable!==false&&!e.isSpecialKey()){this.lastKey=e.getKey();this.dqTask.delay(this.queryDelay);}},validateBlur:function(){return !this.list||!this.list.isVisible();},initQuery:function(){var v=this.getRawValue();if(this.tickable&&this.editable){v=this.tickableInputEl().getValue(); +}this.doQuery(v);},doForce:function(){if(this.inputEl().dom.value.length>0){this.inputEl().dom.value=this.lastSelectionText===undefined?'':this.lastSelectionText;}},doQuery:function(q,A){if(q===undefined||q===null){q='';}var qe={query:q,forceAll:A,combo:this,cancel:false} +;if(this.fireEvent('beforequery',qe)===false||qe.cancel){return false;}q=qe.query;A=qe.forceAll;if(A===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(A){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 B={params:this.getParams(q)};if(this.loadNext){B.add=true;B.params.start=this.page*this.pageSize;}this.store.load(B);}}else{this.selectedIndex=-1;this.onLoad();}}this.loadNext=false;},getParams:function(q){var p={};if(this.pageSize){p.start=0;p.limit=this.pageSize; +}return p;},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();},collapseIf:function(e){var A=e.within(this.el); +var B=e.within(this.list);var C=(Roo.get(e.getTarget()).id==this.list.id)?true:false;if(A||B||C){return;}if(this.tickable){this.onTickableFooterButtonClick(e,false,false);}this.collapse();},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);},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){if(e.isSpecialKey()){return false; +}var k=String.fromCharCode(e.getKey()).toUpperCase();var A=false;var B=this.view.getSelectedNodes();var C=false;if(B.length){var ix=this.view.indexOf(B[0]);C=this.store.getAt(ix);if(!C.get(this.displayField)||C.get(this.displayField).substring(0,1).toUpperCase()!=k){C=false; +}}this.store.each(function(v){if(C){if(C.id==v.id){C=false;}return true;}if(v.get(this.displayField)&&v.get(this.displayField).substring(0,1).toUpperCase()==k){A=this.store.indexOf(v);return false;}return true;},this);if(A===false){return true;}this.view.select(A); +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().topli.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,A,el){e.preventDefault(); +this.lastItem=Roo.apply([],this.item);if(A&&A.name=='cancel'){this.tickItems=Roo.apply([],this.item);this.collapse();return;}this.clearItem();var B=this;Roo.each(this.tickItems,function(o){B.addItem(o);});this.collapse();},validate:function(){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 A={cls:'form-group'};var B={tag:'input',id:id,type:this.inputType,cls:'form-control x-combo-noedit',autocomplete:'new-password',placeholder:this.placeholder||'',readonly:true};if(this.name){B.name=this.name; +}if(this.size){B.cls+=' input-'+this.size;}if(this.disabled){B.disabled=true;}var C={cls:'',cn:[B]};if(this.before){C.cls+=' input-group';C.cn.unshift({tag:'span',cls:'input-group-addon',html:this.before});}if(this.removable&&!this.multiple){C.cls+=' roo-removable'; +C.cn.push({tag:'button',html:'x',cls:'roo-combo-removable-btn close'});}if(this.hasFeedback&&!this.allowBlank){C.cls+=' has-feedback';C.cn.push({tag:'span',cls:'glyphicon form-control-feedback'});}if(this.after){C.cls+=(this.before)?'':' input-group';C.cn.push({tag:'span',cls:'input-group-addon',html:this.after} +);}var D={tag:'div',cn:[{tag:'input',type:'hidden',cls:'form-hidden-field'},C]};if(this.multiple){D={tag:'div',cn:[{tag:'input',type:'hidden',cls:'form-hidden-field'},{tag:'ul',cls:'roo-select2-choices',cn:[{tag:'li',cls:'roo-select2-search-field',cn:[C]} +]}]}};var E={cls:'roo-select2-container input-group roo-touchview-PhoneInput ',cn:[D]};if(!this.multiple&&this.showToggleBtn){var F={tag:'span',cls:'caret'};if(this.caret!=false){F={tag:'i',cls:'fa fa-'+this.caret};}E.cn.push({tag:'span',cls:'input-group-addon btn dropdown-toggle',cn:[F,{tag:'span',cls:'PhoneInput-clear',cn:[{tag:'i',cls:'icon-remove'} +]}]})}if(this.multiple){E.cls+=' roo-select2-container-multi';}var G=this.labelAlign||this.parentLabelAlign();if(G==='left'&&this.fieldLabel.length){A.cn=[{tag:'i',cls:'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',tooltip:'This field is required'} +,{tag:'label',cls:'control-label',html:this.fieldLabel},{cls:'',cn:[E]}];var H=A.cn[1];var I=A.cn[2];if(this.indicatorpos=='right'){A.cn=[{tag:'label',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'} +]},{cls:'',cn:[E]}];}H=A.cn[0];I=A.cn[2];if(this.labelWidth>12){H.style="width: "+this.labelWidth+'px';}if(this.labelWidth<13&&this.labelmd==0){this.labelmd=this.labelWidth;}if(this.labellg>0){H.cls+=' col-lg-'+this.labellg;I.cls+=' col-lg-'+(12-this.labellg); +}if(this.labelmd>0){H.cls+=' col-md-'+this.labelmd;I.cls+=' col-md-'+(12-this.labelmd);}if(this.labelsm>0){H.cls+=' col-sm-'+this.labelsm;I.cls+=' col-sm-'+(12-this.labelsm);}if(this.labelxs>0){H.cls+=' col-xs-'+this.labelxs;I.cls+=' col-xs-'+(12-this.labelxs); +}}else if(this.fieldLabel.length){A.cn=[{tag:'i',cls:'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',tooltip:'This field is required'},{tag:'label',cls:'control-label',html:this.fieldLabel},{cls:'',cn:[E]}];if(this.indicatorpos=='right'){A.cn=[{tag:'label',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'} +]},{cls:'',cn:[E]}];}}else{A.cn=E;}var J=this;['xs','sm','md','lg'].map(function(K){if(J[K]){A.cls+=' col-'+K+'-'+J[K];}});return A;},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 A=this.closeTriggerEl();if(A){A.setVisibilityMode(Roo.Element.DISPLAY).hide();A.on('click',this.removeBtnClick,this,A);}}this.inputEl().on("focus",function(e){document.activeElement.blur();},this);return;},renderTouchView:function(){this.touchViewEl=Roo.get(document.body).createChild(Roo.bootstrap.PhoneInput.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');this.touchViewEl.select('.modal-dialog > .modal-content',true).first().setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true)); +var A=Roo.lib.Dom.getViewHeight()-this.touchViewFooterEl.getHeight()+this.touchViewBodyEl.getPadding('tb');if(this.modalTitle.length){A=A-this.touchViewHeaderEl.getHeight();}this.touchViewBodyEl.setHeight(A);if(this.animate){var B=this;(function(){B.touchViewEl.addClass('in'); +}).defer(50);}else{this.touchViewEl.addClass('in');}this.doTouchViewQuery();},hideTouchView:function(){this.touchViewEl.removeClass('in');if(this.animate){var A=this;(function(){A.touchViewEl.setStyle('display','none');}).defer(150);}else{this.touchViewEl.setStyle('display','none'); +}},setTouchViewValue:function(){if(this.multiple){this.clearItem();var A=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(A,B){return;},onTouchViewLoad:function(){if(this.store.getCount()<1){this.onTouchViewEmptyResults();return;}this.clearTouchView(); +var A=this.getRawValue();var B=(this.multiple)?Roo.bootstrap.PhoneInput.listItemCheckbox:Roo.bootstrap.PhoneInput.listItemRadio;this.tickItems=[];this.store.data.each(function(d,G){var H=this.touchViewListGroup.createChild(B);if(typeof(d.data.cls)!='undefined'&&d.data.cls.length){H.addClass(d.data.cls); +}if(this.displayField&&typeof(d.data[this.displayField])!='undefined'){var I={data:d.data,html:d.data[this.displayField]};if(this.fireEvent('touchviewdisplay',this,I)!==false){H.select('.roo-PhoneInput-list-group-item-value',true).first().dom.innerHTML=I.html; +}}H.removeClass('selected');if(!this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&d.data[this.valueField]==this.getValue()){H.select('.roo-PhoneInput-list-group-item-box > input',true).first().attr('checked',true);H.addClass('selected'); +}if(this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&this.getValue().indexOf(d.data[this.valueField])!=-1){H.select('.roo-PhoneInput-list-group-item-box > input',true).first().attr('checked',true);this.tickItems.push(d.data);} +H.on('click',this.onTouchViewClick,this,{row:H,rowIndex:G});},this);var C=this.touchViewListGroup.select('.list-group-item > .roo-PhoneInput-list-group-item-box > input:checked',true).first();var D=Roo.lib.Dom.getViewHeight()-this.touchViewFooterEl.getHeight()+this.touchViewBodyEl.getPadding('tb'); +if(this.modalTitle.length){D=D-this.touchViewHeaderEl.getHeight();}var E=this.touchViewListGroup.getHeight();var F=this;if(C&&E>D){(function(){C.findParent('li').scrollIntoView(F.touchViewListGroup.dom);}).defer(500);}},onTouchViewLoadException:function(){this.hideTouchView(); +},onTouchViewEmptyResults:function(){this.clearTouchView();this.touchViewListGroup.createChild(Roo.bootstrap.PhoneInput.emptyResult);this.touchViewListGroup.select('.roo-PhoneInput-touch-view-empty-result',true).first().dom.innerHTML=this.emptyResultText; +},clearTouchView:function(){this.touchViewListGroup.dom.innerHTML='';},onTouchViewClick:function(e,el,o){e.preventDefault();var A=o.row;var B=o.rowIndex;var r=this.store.getAt(B);if(this.fireEvent('beforeselect',this,r,B)!==false){if(!this.multiple){Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-PhoneInput-list-group-item-box > input:checked',true).elements,function(c){c.dom.removeAttribute('checked'); +},this);A.select('.roo-PhoneInput-list-group-item-box > input',true).first().attr('checked',true);this.setFromData(r.data);var C=this.closeTriggerEl();if(C){C.show();}this.hideTouchView();this.fireEvent('select',this,r,B);return;}if(this.valueField&&typeof(r.data[this.valueField])!='undefined'&&this.getValue().indexOf(r.data[this.valueField])!=-1){A.select('.roo-PhoneInput-list-group-item-box > input',true).first().dom.removeAttribute('checked'); +this.tickItems.splice(this.tickItems.indexOf(r.data),1);return;}A.select('.roo-PhoneInput-list-group-item-box > input',true).first().attr('checked',true);this.addItem(r.data);this.tickItems.push(r.data);}},getAutoCreateNativeIOS:function(){var A={cls:'form-group'} +;var B={tag:'select',cls:'roo-ios-select'};if(this.name){B.name=this.name;}if(this.disabled){B.disabled=true;}var C=this;['xs','sm','md','lg'].map(function(D){if(C[D]){A.cls+=' col-'+D+'-'+C[D];}});A.cn=B;return A;},initIOSView:function(){this.store.on('load',this.onIOSViewLoad,this); +return;},onIOSViewLoad:function(){if(this.store.getCount()<1){return;}this.clearIOSView();if(this.allowBlank){var A='-- SELECT --';var B=this.inputEl().createChild({tag:'option',value:0,html:A});var o={};o[this.valueField]=0;o[this.displayField]=A;this.ios_options.push({data:o,el:B} +);}this.store.data.each(function(d,C){var D='';if(this.displayField&&typeof(d.data[this.displayField])!='undefined'){D=d.data[this.displayField];}var E='';if(this.valueField&&typeof(d.data[this.valueField])!='undefined'){E=d.data[this.valueField];}var F={tag:'option',value:E,html:D} +;if(this.value==d.data[this.valueField]){F['selected']=true;}var G=this.inputEl().createChild(F);this.ios_options.push({data:d.data,el:G});},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(A){A.el.dom.removeAttribute('selected');if(A.data[this.valueField]!=v){return;}A.el.dom.setAttribute('selected',true);},this);}});Roo.apply(Roo.bootstrap.PhoneInput,{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-PhoneInput-list-group-item-value'},{tag:'div',cls:'roo-PhoneInput-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-PhoneInput-list-group-item-value'},{tag:'div',cls:'roo-PhoneInput-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-PhoneInput-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'}}]}]}}); -- 2.39.2