-/*
- * - LGPL
- *
- * Alert
- *
- */
-
/**
* @class Roo.bootstrap.Alert
* @extends Roo.bootstrap.Component
- * Bootstrap Alert class
+ * Bootstrap Alert class - shows an alert area box
+ * eg
+ * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
+ Enter a valid email address
+</div>
+ * @licence LGPL
* @cfg {String} title The title of alert
* @cfg {String} html The content of alert
* @cfg {String} weight ( success | info | warning | danger )
title: '',
html: '',
- weight: '',
+ weight: false,
faicon: false,
getAutoCreate : function()
tag : 'div',
cls : 'alert',
cn : [
+ {
+ tag : 'i',
+ cls : 'roo-alert-icon'
+
+ },
{
tag : 'b',
cls : 'roo-alert-title',
},
{
tag : 'span',
- cls : 'roo-alert-content',
+ cls : 'roo-alert-text',
html : this.html
}
]
};
if(this.faicon){
- cfg.cn.unshift({
- tag : 'i',
- cls : 'fa ' + this.faicon
- });
+ cfg.cn[0].cls += ' fa ' + this.faicon;
}
-
+ if(this.weight){
+ cfg.cls += ' alert-' + this.weight;
+ }
return cfg;
},
initEvents: function()
{
-
+ this.el.setVisibilityMode(Roo.Element.DISPLAY);
+ },
+
+ setTitle : function(str)
+ {
+ this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
},
setText : function(str)
{
- this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
+ this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
+ },
+
+ setWeight : function(weight)
+ {
+ if(this.weight){
+ this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
+ }
+
+ this.weight = weight;
+
+ this.el.select('.alert',true).first().addClass('alert-' + this.weight);
+ },
+
+ setIcon : function(icon)
+ {
+ if(this.faicon){
+ this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
+ }
+
+ this.faicon = icon;
+
+ this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
},
hide: function()