Ext JS 4: Twitter Bootstrap Style Dismissable Alerts

I don’t know why, but I keep changing the style of notification/alert messages that I am using in my applications. Probably not a good thing to have different styles in my application, but I guess I haven’t settled on the perfect one yet.

I’m using another one I made (Notification Bar) a lot in my applications when I have a grid or panel with a toolbar. Now I wanted one that is a little more modern looking. As a result, I created a simple Ext JS 4 component with dismissable alert messages, styled like the alerts in Twitter’s Bootstrap.

First a screenshot of them all:
Dismissable Alert screenshot There are a few differences from the Bootstrap look, but I’m not a CSS guru, so I’m not sure why. In addition to Chrome and Firefox, I’ve looked at the alerts in IE6, IE7 and IE8. The ‘x’ is shifted lower in IE6 and IE7, but it’s acceptable.

The new component has some helper methods to show the different types of alerts. The alerts are dismissable. The helper methods will change the css if needed and show the alert if the alert is rendered. The “show” methods do not add the alert to your items. “Dismissing” the alert just hides it. It is not being removed from the DOM.

The code is in gist 3277584.

Here is an example of using the DismissableAlert. I’m including it in my view in the items config, initially as hidden. Without a width, the alert will stretch across to the max of whatever is containing it.

	itemId: 'myalert',
	xtype: 'dismissalert',
	width: 500,
	hidden: true

Below is an abbreviated version of my controller. A bunch of stuff has been cut out, so it might not completely make sense, but what matters is an example of hiding (in actionShow) and showing the alert (in myAjaxCallback).

	extend: 'Ext.app.Controller',

	views : [

	refs : [
		{ ref: 'alertBox', selector: '#myalert'}

	init: function(application) {
		// control stuff here

	actionShow : function() {
		var alertBox = this.getAlertBox();
		if (this.needsRefresh) {
			if (alertBox) {
				url: 'ajax/url/here',
				scope: this,
				callback: this.myAjaxCallback

	myAjaxCallback : function (options, success, response) {
		var json, showError = false, alertBox;
		// snip
		// other codes that evals AJAX json reponse and does something w/it

		if (showError) {
			alertBox = this.getAlertBox();
			alertBox.showError("An unexpected error occurred loading your latest data.");

Version Info: Ext JS 4.1
Tested on Chrome 21, Firefox 14.0.1, IE6, IE7, IE8


One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s