* @cfg {Boolean} emptyResultText only for touch device
* @cfg {String} triggerText multiple combobox trigger button text default 'Select'
* @cfg {String} emptyTitle default ''
+ * @cfg {Number} width fixed with? experimental
* @constructor
* Create a new ComboBox.
* @param {Object} config Configuration options
*/
/**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
+ * @cfg {String/Roo.Template} tpl The template to use to render the output default is '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>'
*/
/**
multiple : false,
/**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+ * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
*/
invalidClass : "has-warning",
/**
- * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid")
+ * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
*/
validClass : "has-success",
*/
useNativeIOS : false,
+ /**
+ * @cfg {Boolean} mobile_restrict_height (true|false) restrict height for touch view
+ */
+ mobile_restrict_height : false,
+
ios_options : false,
//private
emptyResultText: 'Empty',
triggerText : 'Select',
emptyTitle : '',
+ width : false,
// element that contains real text value.. (when hidden is used..)
var box = {
tag: 'div',
+ style : 'display: contents',
cn: [
{
tag: 'input',
var combobox = {
cls: 'roo-select2-container input-group roo-select2-container-multi',
cn: [
+
box
// {
// tag: 'ul',
}
+
+ var indicator = {
+ tag : 'i',
+ cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ };
+ if (Roo.bootstrap.version == 4) {
+ indicator = {
+ tag : 'i',
+ style : 'display:none'
+ };
+ }
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ indicator,
{
tag: 'label',
'for' : id,
- cls : 'control-label',
+ cls : 'control-label col-form-label',
html : this.fieldLabel
},
{
tag: 'label',
'for' : id,
- cls : 'control-label',
+ cls : 'control-label col-form-label',
cn : [
{
tag : 'span',
html : this.fieldLabel
},
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ indicator
]
},
{
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+ if(this.width * 1 > 0){
+ contentCfg.style = "width: " + this.width + 'px';
+ }
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
} else if ( this.fieldLabel.length) {
// Roo.log(" label");
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ indicator,
{
tag: 'label',
//cls : 'input-group-addon',
//cls : 'input-group-addon',
html : this.fieldLabel
},
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ indicator,
combobox
];
*/
if(!this.tpl){
- this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
+ this.tpl = Roo.bootstrap.version == 4 ?
+ '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' : // 4 does not need <li> and it get's really confisued.
+ '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
}
this.view = new Roo.View(this.list, this.tpl, {
this.list.on('scroll', this.onViewScroll, this);
if(!this.tpl){
- this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
+ this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}"' +
+ 'type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
}
this.view = new Roo.View(this.list, this.tpl, {
- singleSelect:true, tickable:true, parent:this, store: this.store, selectedClass: this.selectedClass
+ singleSelect:true,
+ tickable:true,
+ parent:this,
+ store: this.store,
+ selectedClass: this.selectedClass
});
//this.view.wrapEl.setDisplayed(false);
},
// private
- onResize: function(w, h){
+ onResize: function(w, h)
+ {
+
+
// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
//
// if(typeof w != 'number'){
this.inputEl().on('mousedown', this.onTriggerClick, this);
this.inputEl().addClass('x-combo-noedit');
}else{
- this.inputEl().dom.setAttribute('readOnly', false);
+ this.inputEl().dom.removeAttribute('readOnly');
this.inputEl().un('mousedown', this.onTriggerClick, this);
this.inputEl().removeClass('x-combo-noedit');
}
onEmptyResults : function(){
if(this.tickable && this.editable){
+ this.hasFocus = false;
this.restrictHeight();
return;
}
validate : function()
{
+ if(this.getVisibilityEl().hasClass('hidden')){
+ return true;
+ }
+
var v = this.getRawValue();
if(this.multiple){
}
var inputblock = {
- cls : '',
+ cls : 'roo-combobox-wrap',
cn : [
input
]
inputblock.cn.unshift({
tag :'span',
- cls : 'input-group-addon',
+ cls : 'input-group-addon input-group-prepend input-group-text',
html : this.before
});
}
inputblock.cn.push({
tag :'span',
- cls : 'input-group-addon',
+ cls : 'input-group-addon input-group-append input-group-text',
html : this.after
});
}
- var box = {
- tag: 'div',
- cn: [
- {
- tag: 'input',
- type : 'hidden',
- cls: 'form-hidden-field'
- },
- inputblock
- ]
-
- };
+
+ var ibwrap = inputblock;
if(this.multiple){
- box = {
- tag: 'div',
- cn: [
- {
- tag: 'input',
- type : 'hidden',
- cls: 'form-hidden-field'
- },
+ ibwrap = {
+ tag: 'ul',
+ cls: 'roo-select2-choices',
+ cn:[
{
- tag: 'ul',
- cls: 'roo-select2-choices',
- cn:[
- {
- tag: 'li',
- cls: 'roo-select2-search-field',
- cn: [
+ tag: 'li',
+ cls: 'roo-select2-search-field',
+ cn: [
- inputblock
- ]
- }
+ inputblock
]
}
]
- }
- };
+ };
+
+
+ }
var combobox = {
cls: 'roo-select2-container input-group roo-touchview-combobox ',
cn: [
- box
+ {
+ tag: 'input',
+ type : 'hidden',
+ cls: 'form-hidden-field'
+ },
+ ibwrap
]
};
if(!this.multiple && this.showToggleBtn){
var caret = {
- tag: 'span',
- cls: 'caret'
+ cls: 'caret'
};
if (this.caret != false) {
combobox.cn.push({
tag :'span',
- cls : 'input-group-addon btn dropdown-toggle',
+ cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
cn : [
- caret,
+ Roo.bootstrap.version == 3 ? caret : '',
{
tag: 'span',
cls: 'combobox-clear',
},
{
tag: 'label',
- cls : 'control-label',
+ cls : 'control-label col-form-label',
html : this.fieldLabel
},
{
- cls : '',
+ cls : 'roo-combobox-wrap ',
cn: [
combobox
]
{
tag: 'label',
'for' : id,
- cls : 'control-label',
+ cls : 'control-label col-form-label',
cn : [
{
tag : 'span',
]
},
{
- cls : "",
+ cls : "roo-combobox-wrap ",
cn: [
combobox
]
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
document.activeElement.blur();
}, this);
+ this._touchViewMask = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
+
return;
if(this.animate){
var _this = this;
- (function(){ _this.touchViewEl.addClass('in'); }).defer(50);
+ (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
}else{
- this.touchViewEl.addClass('in');
+ this.touchViewEl.addClass(['in','show']);
}
-
+
+ if(this._touchViewMask){
+ Roo.get(document.body).addClass("x-body-masked");
+ this._touchViewMask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ this._touchViewMask.setStyle('z-index', 10000);
+ this._touchViewMask.addClass('show');
+ }
+
this.doTouchViewQuery();
},
hideTouchView : function()
{
- this.touchViewEl.removeClass('in');
+ this.touchViewEl.removeClass(['in','show']);
if(this.animate){
var _this = this;
this.touchViewEl.setStyle('display', 'none');
}
+ if(this._touchViewMask){
+ this._touchViewMask.removeClass('show');
+ Roo.get(document.body).removeClass("x-body-masked");
+ }
},
setTouchViewValue : function()
bodyHeight = bodyHeight - this.touchViewHeaderEl.getHeight();
}
- var listHeight = this.touchViewListGroup.getHeight();
+ var listHeight = this.touchViewListGroup.getHeight() + this.touchViewBodyEl.getPadding('tb') * 2;
+
+ if(this.mobile_restrict_height && listHeight < bodyHeight){
+ this.touchViewBodyEl.setHeight(listHeight);
+ }
var _this = this;
var default_text = '-- SELECT --';
if(this.placeholder.length){
- default_text = this.placeholder + ' - ';
+ default_text = this.placeholder;
+ }
+
+ if(this.emptyTitle.length){
+ default_text += ' - ' + this.emptyTitle + ' -';
}
var opt = this.inputEl().createChild({
projects / roojs1 / blobdiff