* {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
* @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @cfg {String} caret (search|calendar) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
+ * @cfg {String} caret (search|calendar) BS3 only - carat fa name
* @constructor
* Create a new TriggerField.
]
};
}
-
+
} else {
if(this.removable && !this.editable && !this.tickable){
inputblock = {
if (this.before) {
inputblock.cn.push({
tag :'span',
- cls : 'input-group-addon',
+ cls : 'input-group-addon input-group-prepend input-group-text',
html : this.before
});
}
if (this.after) {
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){
- Roo.log('multiple');
-
- box = {
- tag: 'div',
- cn: [
+ ibwrap = {
+ tag: 'ul',
+ cls: 'roo-select2-choices',
+ cn:[
{
- tag: 'input',
- type : 'hidden',
- cls: 'form-hidden-field'
- },
- {
- tag: 'ul',
- cls: 'select2-choices',
- cn:[
- {
- tag: 'li',
- cls: 'select2-search-field',
- cn: [
+ tag: 'li',
+ cls: 'roo-select2-search-field',
+ cn: [
- inputblock
- ]
- }
+ inputblock
]
}
]
- }
- };
+ };
+
+ }
var combobox = {
- cls: 'select2-container input-group',
+ cls: 'roo-select2-container input-group',
cn: [
- box
-// {
-// tag: 'ul',
-// cls: 'typeahead typeahead-long dropdown-menu',
-// style: 'display:none'
-// }
+ {
+ tag: 'input',
+ type : 'hidden',
+ cls: 'form-hidden-field'
+ },
+ ibwrap
]
};
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',
}
if(this.multiple){
- combobox.cls += ' select2-container-multi';
+ combobox.cls += ' roo-select2-container-multi';
+ }
+ 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) {
- Roo.log("left and has label");
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
+
+ cfg.cn = [
+ indicator,
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label',
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "",
+ cn: [
+ combobox
+ ]
+ }
+
+ ];
+
+ var labelCfg = cfg.cn[1];
+ var contentCfg = cfg.cn[2];
+
+ if(this.indicatorpos == 'right'){
cfg.cn = [
-
{
tag: 'label',
'for' : id,
- cls : 'control-label col-sm-' + this.labelWidth,
- html : this.fieldLabel
-
+ cls : 'control-label',
+ cn : [
+ {
+ tag : 'span',
+ html : this.fieldLabel
+ },
+ indicator
+ ]
},
{
- cls : "col-sm-" + (12 - this.labelWidth),
+ cls : "",
cn: [
combobox
]
}
-
+
];
+
+ 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 = [
-
+// Roo.log(" label");
+ cfg.cn = [
+ indicator,
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ combobox
+
+ ];
+
+ if(this.indicatorpos == 'right'){
+
+ cfg.cn = [
{
- tag: 'label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
+ tag: 'label',
+ cn : [
+ {
+ tag : 'span',
+ html : this.fieldLabel
+ },
+ indicator
+ ]
+
},
-
combobox
-
+
];
+ }
+
} else {
- Roo.log(" no label && no align");
+// Roo.log(" no label && no align");
cfg = combobox
}
-
+
var settings=this;
['xs','sm','md','lg'].map(function(size){
if (settings[size]) {
}
if(this.removable && !this.editable && !this.tickable){
- var close = this.el.select('.roo-combo-removable-btn', true).first();
+ var close = this.closeTriggerEl();
if(close){
- Roo.log(close);
- close.on('click', this.removeBtnClick, close);
+ close.setVisibilityMode(Roo.Element.DISPLAY).hide();
+ close.on('click', this.removeBtnClick, this, close);
}
-
}
//this.trigger.addClassOnOver('x-form-trigger-over');
//}
},
- removeBtnClick : function(e, el, o)
+ closeTriggerEl : function()
{
- Roo.log([a,b,c,d]);
+ var close = this.el.select('.roo-combo-removable-btn', true).first();
+ return close ? close : false;
+ },
+
+ removeBtnClick : function(e, h, el)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent("remove", this) !== false){
+ this.reset();
+ this.fireEvent("afterremove", this)
+ }
},
createList : function()
{
this.list = Roo.get(document.body).createChild({
- tag: 'ul',
+ tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
cls: 'typeahead typeahead-long dropdown-menu',
style: 'display:none'
});
projects / roojs1 / blobdiff