ExtJs 3 - Normal looking buttons in toolbars

Seems like ages since I last did any serious blogging, feels good to be back. That too with an interesting solution to a common problem with ExtJs.

I have often seen end-users complain about non-intuitiveness of buttons in ExtJs toolbars. They simply look like static labels, not clickable buttons until you hover over them.

We had been using some custom css to make them more intuitive, but today I faced an altogether different situation. An application (with its UI built in ExtJs) has been in production for a good time, and a particular panel was using buttons config option to provide actions related to that panel. And the client recently requested that we move these buttons to the top of the panel (you already know, buttons always render towards the bottom of an ExtJs panel and you have no option to control their vertical positioning with respect to the parent panel).

Now the solution was as such simple, to use a tbar on the Panel and that would move buttons to the top of the panel. But tbar buttons render differently than the components in Panel's buttons config option (you can see the same in the live demo below in first panel). And I was sure the client won't approve that, he would like the UI to remain consistent with the previous one.

Now I was already aware the buttons config option actually renders as normal buttons inside a toolbar as the Panel's fbar, fbar being nothing but a regular toolbar on the Panel like tbar and bbar. So I decided to investigate into how come fbar buttons preserve native ExtJs button's look and feel while a regular toolbar button does not.

A brief inspection into ExtJs' code revelaed the answer fairly quickly, the Panel applies "x-panel-fbar" class to the fbar toolbar, which is responsible for maintaining the regular look on the button inside the toolbar.

So the solution was simply to apply this class manually to a tbar or bbar in the Panel, and you would get regular looking buttons. You can see an example of the same below.

The first panel has normal tbar and bbar, clearly containing buttons that do not look like themselves. The second panel has toolbarCls: 'x-panel-fbar' applied to the toolbars and that gives you regular looking buttons.

For completeness sake, here's a sample panel that has regular looking buttons in tbar and bbar:

{
	region: 'south',
	height: 200,
	html: 'This is another Panel with a tbat, bbar and buttons defined.',
	tbar: {
		toolbarCls: 'x-panel-fbar',
		items: [
			{ xtype: 'tbfill' },
			{ text: 'Add toolbarCls: "x-panel-fbar" and things change' }
		]
	},
	bbar: {
		toolbarCls: 'x-panel-fbar',
		items: [
			{ xtype: 'tbfill' },
			{ text: 'Add toolbarCls: "x-panel-fbar" and things change' }
		]
	}
}

The code which reproduces the sample is attached below with this blog post.