Ext JS 4: Notification Bar

I have a view in my Ext JS 4 app that has a grid panel which fills the viewport. I wanted some notification UI for success/failure upon save or other actions but not a modal dialog and not the notification window user extension (which I think looks great). Instead, I wanted a “bar” that would go across the page at the top. I’ve seen it all over the place recently. The way I ended up implementing it was to use a toolbar. This is what it looks like:

The GridBar code is pretty straightforward. I have a small animation to fade the bar in, but haven’t done anything to fade it out.

Ext.define('MyStuff.GridBar', {
	extend: 'Ext.toolbar.Toolbar',
	alias: 'widget.gridbar',
	requires: [
		'Ext.toolbar.*'
	],

	cls: 'gridbar',

	initComponent : function() {
		this.items = [
			{
				itemId: 'msg',
				xtype: 'tbtext',
				text: ''
			},
			'->',
			{
				text: 'X',
				scope: this,
				handler: this.hideBar
			}
		]

		this.callParent(arguments);
		this.msgItem = this.child('#msg');
	},

	showSuccess : function(msg) {
		this.getEl().setOpacity(0.25, false);
		this.addClass('gridbar-success');
		this.showBar(msg);
	},

	showError : function(msg) {
		this.getEl().setOpacity(0.25, false);
		this.addClass('gridbar-error');
		this.showBar(msg);
	},

	showBar : function(msg) {
		this.msgItem.update(msg);
		this.show();
		this.getEl().fadeIn({opacity: 1, duration: 1000});
		this.ownerCt.forceComponentLayout();
	},

	hideBar : function () {
		if (!this.isHidden()) {
			this.hide();
			this.ownerCt.forceComponentLayout();
			this.removeCls("gridbar-success");
			this.removeCls("gridbar-error");
			this.msgItem.update('');
		}
	},

    // Add custom processing to the onRender phase.
    afterRender: function() {
        this.callParent(arguments);
		this.hide();
    }
});

I used the following css:

.gridbar {
    margin: 3px !important;
}
.gridbar-success, .x-nlg .gridbar-success {
    border: 1px solid #AEE0AE !important;
    background-color: #D1EED1 !important;
    background-image: none !important;
}
.gridbar-error, .x-nlg .gridbar-error {
    border:  1px solid #F79897 !important;
    background-color: #FDDFDE !important;
    background-image: none !important;
}

The way to use it is to just add the GridBar into the docked items. Like this:

 {
			xtype: 'grid',
			itemId: 'myGrid',
			// more grid configs
			columns : [
				// column definitions here
			],
			dockedItems : [
				{
					itemId: 'gridBar',
					xtype: 'gridbar',
					dock: 'top'
				},
				{
					xtype: 'toolbar',
					dock: 'top',
					items: [
						// put in whatever items you have here
					]
				}
			]
		};

By default, the GridBar will be hidden on render. I had to call forceComponentLayout whenever hiding and showing the GridBar to get the UI to look correct. I tried many things to not call it, but that was the only thing that seemed to work.

Ext 4.1.0 Update
I revisited my “notification bar” with the release of Ext JS 4.1.0, and I was able to streamline it a little bit. Most importantly, I was able to remove the forceComponentLayout. Here is this code. I updated the name to be a little more generic, from GridBar to NotifyBar. Usage is the same as above.

Advertisements

6 comments

  1. Nice one, only one mess up in your posted code; in your initComponent have:

    this.items = [
    12
    {
    13
    itemId: ‘msg’,
    14
    xtype: ‘tbtext’,
    15
    text: ”
    16
    },
    17
    ‘->’,
    18
    {
    19
    text: ‘X’,
    20
    scope: this,
    21
    handler: this.hideBar
    22
    }

    …note ‘-&gt’

    You meant ‘->’

    What I do on my blog is I copy-paste into WordPress visual editor, then in HTML I add

     
    
    (assuming it uses same plugin).
    
    Otherwise, if I copy-paste your code it won't work.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s