如何在Extjs TabPanel的选项卡中添加工具？

Question

如何在Extjs TabPanel的选项卡中添加工具？

extjsextjs4extjs3

5

如何在TabControl的每个选项卡的标题中添加按钮（工具）？

我只能在TabPanel中添加工具，但我想在选项卡中添加。

图像

我也尝试过这个方法，但没有成功：

      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.
            }
          }]

      }]
  });

任何想法？

谢谢！

- Roberto Schuster

2个回答

0

感谢分享解决方案！这是我的方法（基于你的）：

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;
}

- Alex Dzeiko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lionel Chan · Accepted Answer

实际上相当棘手。

如果您检查它们的源代码，Ext.tab.Panel实际上使用卡片布局，对于每个选项卡，它们使用Ext.tab.Tab来创建选项卡按钮。

然后，如果您检查Ext.tab.Tab的源代码，它实际上是扩展了Ext.button.Button，这只是一个修改过的按钮。

所以，如果您需要添加工具，我恐怕最好的方法是扩展Ext.tab.Tab并编写自己的选项卡按钮。您可能需要查看他们在/src/tab/Tab.js的233行中如何创建可关闭按钮。

(Ext-4.0.2a)

祝好

编辑

因此我们知道Ext.tab.Tab正在扩展Ext.button.Button，我们可以利用这一事实，并提出了这种解决方案，请在fiddle中查看：http://jsfiddle.net/uBxqY/4/

基本上，我扩展了Ext.tab.Tab，并修改了buttonWrapper类，以便添加箭头样式。没有什么花哨的东西，一切都可以毫不费力地工作。

我还覆盖了onClick函数，以便在用户单击选项卡本身时不会展开菜单。有点不洁，但它有效（从Ext.button.Split中借鉴了prototype.onClick）。

工作示例：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.'
    }]
});