Results 1 to 4 of 4

Thread: Changing tab markup

  1. #1

    Default Changing tab markup

    Hi folks - I want to modify a tabpanel so that it behaves like a wizard-style breadcrumb (step one, step 2, etc...). TabPanel does most of what I want out of the box, but I need to modify the HTML of each tab and add a separate label, a bit like this:

    |Clickable Button|
    "Button Label"

    I guess I can extent tab.Tab and change the renderTpl, but I can't figure out how to tell the framework ''Make me a TabPanel using tab.MyCustomTab for the tabs"

    Can someone pls tell me the best approach to this?


    - - - -

    I should add that I've tried altering the tabPanel's renderTpl, which (obviously) only affects the markup of the panel itself.

    I've also tried passing renderTpl in the tabPanel::tabConfig property, hoping it would be applied to the tab, but no joy:

    Ext.define('Backstage.view.form.User', {
        extend      : '',
        alias       : 'widget.form_user',
        ui          : 'bs-tab-crumb',
         tabConfig  : {

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Houston, Tx

  3. #3


    Thx for reading Scott, but I've no idea what you mean by that.

    I re-read the the card layout docs - they mention toolbars and setActiveItem(), so I suppose I could ditch the TabPanel and use a standard Panel(layout:card) with a tbar and set of MyCustomButton components to achieve the same thing, although I would lose features like tab-scrolling that come with a TabPanel.

    Is there no simple way to customize the tabs' markup in a tab panel?

  4. #4


    I've just come back to this on a Xmas day off - in case anyone out there cares, the renderTpl property in my example code above is in the wrong place. You don't apply it to the tabPanel, you apply it to each child item - or alternatively add it to the parent's defaults config.

    Tabs don't have their own renderTpl by default - it's inherited from the button class, so I grabbed the renderTpl from Ext.button.Button and modified it.

    Here's an example that customizes the markup of each tab:

        var tabs = Ext.createWidget('tabpanel', {
             renderTo: document.body,
            width: 450,
            defaults :{
                    renderTpl:['<span id="{id}-btnWrap" class="{baseCls}-wrap">',
                        '<span id="{id}-btnEl" class="{baseCls}-button">',
                            '<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}">',
                            '<span>NEW BIT OF MARKUP</span>',
                    // if "closable" (tab) add a close element icon
                    '<tpl if="closable">',
                        '<span id="{id}-closeEl" class="{baseCls}-close-btn" title="{closeText}" tabIndex="0"></span>',
            items: [{
                html:'I am your moose',
                title: 'Short Text',
                closable: true
                html:'The MOOSE is loose',
                title: 'Long Text'

    - - -

    Edit: See this post for similar ramblings:

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts