How to add tools on Extjs TabPanel tab tab?

Question

How to add buttons (tools) to the title of each tab in TabControl?

I just added tools to TabPanel, but I want to add tabs.

Picture

I also tried this, but did not have time:

      var lTabPanel = Ext.create('Ext.tab.Panel', {
      width: 400,
      height: 400,
      renderTo: document.body,
      items: [{
          title: 'Home',
          html: 'Home',
          itemId: 'home'
      }, {
          title: 'Users',
          html: 'Users',
          itemId: 'users',
          hidden: true
      }, {
          title      : 'Tickets',
          html       : 'Tickets',
          itemId     : 'tickets',
          tools:[{
            type:'gear',
            tooltip: 'Options',
            handler: function(event, toolEl, panel){
                // Some code.
            }
          }]

      }]
  });

Any idea?

Thank!

Answer 1

Actually pretty tough.

If you check the source code, Ext.tab.Panelit actually uses a map layout and for each tab they used Ext.tab.Tabto create tab buttons.

Then, if you check the source code Ext.tab.Tab, it actually extends Ext.button.Button, which is just a modified button.

, , , - Ext.tab.Tab . , closeable 233 /src/tab/Tab.js.

(Ext-4.0.2a)

, , Ext.tab.Tab Ext.button.Button, , , : http://jsfiddle.net/uBxqY/4/

, Ext.tab.Tab buttonWrapper, css. , .

onClick, , . , ( prototype.onClick Ext.button.Split.

: http://jsfiddle.net/uBxqY/4/ :

Ext.define('Ext.ux.tab.Tab', {
    extend: 'Ext.tab.Tab',
    alias: 'widget.ux.menutab',
    requires: [
        //We just need the onClick from Split button
        'Ext.button.Split'
    ],

    /**
     * Menu align, if you need to hack the menu alignment
     */
    menuAlign: 'tl-bl?',

    constructor: function() {
        this.callParent(arguments);

        //Kind of harsh, we need the click action from
        //split button instead.
        //Or if you preferred, you can always override this
        //function and write your own handler.
        this.onClick = Ext.button.Split.prototype.onClick;
    },


    /**
     * Hack the default css class and add
     * some resonable padding so to make it looks
     * great :)
     */
    onRender: function() {
        this.callParent(arguments);

        //We change the button wrap class here! (HACK!)
        this.btnWrap.replaceCls('x-tab-arrow x-tab-arrow-right',
                               'x-btn-split x-btn-split-right')
                    .setStyle('padding-right', '20px !important');
    }
});

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    style: 'margin:10px;',
    defaults: {
        bodyStyle: 'padding:10px;'
    },
    plain: true,
    items: [{
        title: 'Split Tab',

        //tabConfig is taken up during tab formation
        tabConfig: {
            //We use our own custom tab!
            xtype: 'ux.menutab',
            menu: [{
                text: 'Menu item 1'
            },{
                text: 'Menu item 2'
            }]
        },
        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },{
        title: 'Normal Tab',
        html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }]
});

Answer 2

! ( ):

Ext.define('CB.view.ux.TabMenu', {
  extend: 'Ext.tab.Tab',
  alias: 'widget.tabmenu',
  requires: [
    'Ext.button.Split'
  ],

  menuAlign: 'tl-bl?',

  constructor: function() {
    this.callParent(arguments);
    this.onClick = Ext.button.Split.prototype.onClick;
  },

  onRender: function() {
    this.callParent(arguments);

    this.btnWrap.insertSibling({
      tag: 'a',
      cls: 'arrow-inside-tab',
      href: '#'
    }, 'after');

    this.btnWrap.addCls(['pdr10']);  //padding-right: 10px; to make some place for arrow

  }
});

CSS

.arrow-inside-tab {
  display: block;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 5px;
  right: 4px;
  background: url("../js/extjs/resources/ext-theme-classic/images/button/arrow.gif") 1px 0 no-repeat;
}