【问题标题】:How can I add tools in a tab of an Extjs TabPanel?如何在 Extjs TabPanel 的选项卡中添加工具?
【发布时间】:2011-07-19 17:03:10
【问题描述】:

如何在 TabControl 中的每个选项卡的标题中添加按钮(工具)?

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

Image

我也试过这个,但没有成功:

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

      }]
  });

有什么想法吗?

谢谢!

【问题讨论】:

    标签: extjs extjs4 extjs3


    【解决方案1】:

    其实挺难的。

    如果你查看他们的源代码,Ext.tab.Panel 实际上是在使用卡片布局,并且对于每个选项卡,他们使用Ext.tab.Tab 来做选项卡按钮。

    那么你查看Ext.tab.Tab的源码,其实是扩展了Ext.button.Button,只是一个修改过的按钮。

    所以如果你需要添加工具,恐怕最好的方法是扩展Ext.tab.Tab并编写你自己的标签按钮。您可能想看看他们如何在/src/tab/Tab.js 的第 233 行中创建 closeable 按钮。

    (Ext-4.0.2a)

    干杯

    编辑

    所以我们知道Ext.tab.Tab 正在扩展Ext.button.Button,我们可以利用这个事实,我已经提出了这个解决方案,在fiddle 中查看:http://jsfiddle.net/uBxqY/4/

    基本上,我扩展了Ext.tab.Tab,并修改了buttonWrapper 类,以便添加箭头css。没什么花哨的,一切都是开箱即用的。

    我还重写了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.'
        }]
    });
    

    【讨论】:

    • 感谢莱昂内尔的帮助!所以,如果一个选项卡实际上扩展了 Ext.button.Button,我可以向它添加一个菜单,对吗?就像一个普通的按钮......你怎么看?如果是的话,你能给我一个关于如何做到这一点的想法吗? (我将开始尝试这个)。 Ps:为了清楚起见,这个想法是添加工具,然后将菜单链接到它。如果无法添加工具,也可以只添加一个菜单。
    • 这是一个很好的解决方案!但是,我使用的是 ext-4.0.0,我把它放在我的应用程序中,菜单没有出现。我尝试使用 ext-4.0.2a 并且也不起作用......但是在 jsFiddle 中是完美的。我会继续努力...感谢您的帮助!
    • 很奇怪。我所做的只是基本的东西,不依赖任何第三方脚本(如 jsfiddle 中所证明的那样)。它应该完美地开箱即用:)
    • Lionel,因为我使用的是 ext-all-debug.js 而不是 ext-all.js,所以无法正常工作。很奇怪,不是吗?无论如何,感谢您的帮助。
    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-06-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多