If anyone's interested, extending Ext.tab.Panel and overriding OnAdd does work, butI'm still curious to know if there's a better solution.

Here's my 'StepPanel' class that customises the tabBar's renderTpl and defaults to using xtype:'step' for the tabs


Code:
/**
 * Tab Progress Panel - a tab panel with customised tabs  to represent wizard steps rather than tabs e.g. 
 * |step 1| ----> |step 2|
 */
Ext.define('Backstage.view.tab.StepPanel', {
    extend   : 'Ext.tab.Panel',
    alias    : 'widget.steppanel',
    cls      : 'step-panel',
    /**
     * Override tabbar class and renderTpl
     * @note This would be tidier in its own class but Ext.tab.Bar is added explicitly in Ext.tab.Panel::initComponent, making override complicated
     */
    tabBar: {
        baseCls : 'stepbar',
        renderTpl: [
            '<div class="stripe"></div>',
            '<div id="{id}-body" class="{baseCls}-body {bodyCls} {bodyTargetCls}{childElCls}<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
                '{%this.renderContainer(out,values)%}',
            '</div>',
            
            '<div id="{id}-strip" class="{baseCls}-strip {baseCls}-strip-{dock}{childElCls}',
                '<tpl if="ui"> {baseCls}-strip-{ui}',
                    '<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl>',
                '</tpl>">',
            '</div>'
        ]
    },
    requires : [ 'Backstage.view.tab.Step' ],

/**
 * @NOTE Overriding onAdd is the only way to choose a custom xType for tabs as tabBar::defaultType
 * does not do anything.
 */
    onAdd: function(item, index) {
        // Default to 'step' tabs - the only functional step in this override
        tabXType = this.tabXType || 'step';

        var me = this,
            cfg = item.tabConfig || {},
            defaultConfig = {
                xtype: tabXType, // Added to allow custom tabs
                renderData: {index:index+1}, // added to allow numeral on tab
                ui: me.tabBar.ui,
                card: item,
                disabled: item.disabled,
                closable: item.closable,
                hidden: item.hidden && !item.hiddenByLayout, // only hide if it wasn't hidden by the layout itself
                tooltip: item.tooltip,
                tabBar: me.tabBar,
                position: me.tabPosition,
                closeText: item.closeText
            };

        cfg = Ext.applyIf(cfg, defaultConfig);

        // Create the corresponding tab in the tab bar
        item.tab = me.tabBar.insert(index, cfg);

        item.on({
            scope : me,
            enable: me.onItemEnable,
            disable: me.onItemDisable,
            beforeshow: me.onItemBeforeShow,
            iconchange: me.onItemIconChange,
            iconclschange: me.onItemIconClsChange,
            titlechange: me.onItemTitleChange
        });

        if (item.isPanel) {
            if (me.removePanelHeader) {
                if (item.rendered) {
                    if (item.header) {
                        item.header.hide();
                    }
                } else {
                    item.header = false;
                }
            }
            if (item.isPanel && me.border) {
                item.setBorder(false);
            }
        }
    }    
});