* {@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.
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){
- 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',
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 += ' 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) {
- 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,
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
]
},
{
} 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',
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
]
},
// private
initEvents : function(){
- //this.createList();
+ this.createList();
Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
//this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
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'
});