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, '');
	}
});

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