To add button in tabpanel [extjs 3.2]

Question

enter image description here

I want to add a button in marked place. Please can anyone help me out. Thank you.

I don't think that's a native option, you can add a Toolbar but it will render separate, if you need it to be there, extend Ext.TabPanel and add the code needed to display a button there. — gunnx

Darin Kolev Darin Kolev · Accepted Answer · 2013-07-24T16:50:32

You can add custom components there, but have to extend the TabPanel class. You can find an examples here: on the left and on the right side.

var scrollMenu = this.header.insertFirst({
    cls: 'x-tab-tabmenu-right'
});

and the css styles for the Button:

.x-tab-scroller-right-over {
    background-position: -18px 0;
}

.x-tab-tabmenu-right {
    background: transparent url(http://dev.sencha.com/deploy/ext-3.4.0/examples/tabs/tab-scroller-menu.gif) no-repeat 0 0;
    border-bottom: 1px solid #8db2e3;
    width:18px;
    position:absolute;
    right:0;
    top:0;
    z-index:10;
    cursor:pointer;
}
.x-tab-tabmenu-over {
    background-position: -18px 0;
}
.x-tab-tabmenu-disabled {
    background-position: 0 0;
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);
    cursor:default;
}

To add button in tabpanel [extjs 3.2]

1 Answers