Question

如何在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.
            }
          }]

      }]
  });

有什么想法吗？

谢谢！

Answer 1

实际上很难。

如果您检查其源代码，Ext.tab.Panel实际上是使用卡片布局，并且对于每个标签，他们使用Ext.tab.Tab来执行标签按钮。

然后，如果您检查Ext.tab.Tab的源代码，它实际上是扩展Ext.button.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;
}

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

2 个答案: