Ext JS 4 Alert, in the Twitter Bootstrap Style

DismissableAlert.css

/* CSS originally from http://twitter.github.com/bootstrap/index.html
   and modified slightly since the full bootstrap css is not included */

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

.alert-heading {
  color: inherit;
}

.alert a {
  color: #c09853;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}

.alert-success, 
.alert-success a {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger,
.alert-error,
.alert-danger a, 
.alert-error a {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info,
.alert-info a {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}

.alert-block p + p {
  margin-top: 5px;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  vertical-align: middle;
  margin: 0;
}

DismissableAlert.js

Ext.define('Ext.ux.DismissableAlert', {
	extend: 'Ext.Component',
	alias: 'widget.dismissalert',

	childEls: [
		'btnEl', 'alertTextEl', 'alertEl'
	],

	renderTpl: ''.concat(
			'<div id="{id}-alertEl" class="alert {alertCls}">' +
				'<button id="{id}-btnEl" class="close">&times;</button>' +
				'<span id="{id}-alertTextEl">{text}</span>' +
			'</div>'),

	initComponent: function (){
		var me = this;
		me.callParent(arguments);
	},

	beforeRender: function () {
		var me = this;
		Ext.applyIf(me.renderData, {
			text: me.text || '&#160;',
			alertCls: me.alertCls || ''
		});
	},

	onRender: function(ct, position) {
		var me = this,
			btn;
		me.callParent(arguments);

		btn = me.btnEl;
		me.mon(btn, 'click', me.onClick, me);
	},

	onClick: function(e) {
		var me = this;
		if (me.preventDefault || (me.disabled && me.getHref()) && e) {
			e.preventDefault();
		}
		if (e.button !== 0) {
			return;
		}
		if (!me.disabled) {
			me.hide();
		}
	},

	setText: function (text){
		var me = this;
		me.text = text;
		if (me.rendered) {
			me.alertTextEl.update(text || '');
			me.updateLayout();
		}
	},

	showAlertBox:function (text, cls) {
		var me = this,
				alertEl = me.alertEl,
				oldCls = me.alertCls;
		me.text = text;
		me.alertCls = cls;

		if (me.rendered) {
			Ext.suspendLayouts();
			alertEl.removeCls(oldCls);
			alertEl.addCls(cls);
			me.alertTextEl.update(text || '');
			if (me.hidden) {
				me.show();
			}
			Ext.resumeLayouts(true);
		}
	},

	showError: function (text) {
		this.showAlertBox(text, 'alert-error');
	},

	showSuccess: function (text) {
		this.showAlertBox(text, 'alert-success');
	},

	showInfo: function (text) {
		this.showAlertBox(text, 'alert-info');
	},

	showStandard: function (text) {
		this.showAlertBox(text, '');
	}
});

Added some css to support anchor tags to have the same color as the rest of the message in IE6 and IE7.

Add css to style anchor tags in IE6 and IE7 to have some color.