Ext JS 4.1 Step Bar - sizes hardcoded for 5 steps right now

StepBar.css

div.stepbar {
	height: 44px;
}

ul.steplist {
	height: 44px;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 2px 10px 0;
	padding: 10px 0;
	position: relative;
}

.x-ie6 ul.steplist, .x-ie7 ul.steplist {
	height: 24px !important;
	padding-top: 5px !important;
}

ul.steplist li {
	display: block;
	float: left;
	height: 24px;
	list-style-type: none;
	position: relative;
	width: 130px;
	background-color: #ECECEC;
	border: 1px #ffffff solid;
	margin-right: 1px;
	padding-left: 10px;
	padding-top: 3px;
}

.x-ie6 ul.steplist li, .x-ie7 ul.steplist li {
	width: 122px;
}

ul.steplist li.current {
	/*background-color: #F60;*/
	background-color: #FFDA57;
	/*color: #ffffff;*/
	color: #003399;
}

StepBar.js

Ext.define('Ext.ux.StepBar', {
	extend: 'Ext.Component',
	alias: 'widget.stepbar',

	cls: 'stepbar',

	/**
	 * @cfg {Number} current
	 * The index of the current step that will be highlighted, 1 based
	 */
	current: null,

	currentCls: 'current',

	childEls: ['stepEl'],

	renderTpl: ''.concat(
		'<ul class="steplist">' +
		  '<tpl for="steps">' +
			'<li id="{[Ext.id()]}-stepEl">{.}</li>'+
		  '</tpl>' +
		'</ul>'
	),

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

	beforeRender: function () {
		var me = this;
		Ext.apply(me.renderData, {
			steps: me.steps || []
		});
	},

	afterRender : function () {
		var me = this,
			current;

		me.callParent(arguments);
		if (me.current) {
			current = me.current;
			me.current = null;
			me.select(current);
		}
	},

	/**
	 * Highlight the passed in step as the current one. Steps are 1 based.
	 * @param step
	 */
	select : function (step) {
		var me = this,
			currentCls = me.currentCls,
			current = me.current,
			el, newStep;

		if (!me.rendered) {
			me.current = step;
			return;
		}

		if (current !== step) {
			el = me.el;
			if (current) {
				el.down('li:nth(' + current +')').removeCls(currentCls);
			}
			newStep = el.down('li:nth(' + step + ')');
			newStep.addCls(currentCls);
		}
	}

});