在Extjs 的 TabPanel在 title标题栏上加按扭button

Posted 2020-09-30 二奎

如何在tabPanel的 标题栏的右侧添加操作按扭，效果如图，我总结了两种实现的方案：

 

第一种方案：

使用tabPanel的tabPbar:

Ext.define("CisApp.view.main.Tab", {
    extend: \'Ext.tab.Panel\',
    tabBar: {
        items: [{
            xtype: \'tbfill\'
        },
            {
                xtype:\'button\',
                text:\'button1\'
            }, {
                xtype:\'button\',
                text: \'button1\'
            }, {
                xtype:\'button\',
                text: \'button1\'
            }, {
                xtype:\'button\',
                text: \'button1\'
            },
.........

这里有一个xtype:\'tbfile\', 作用同：\'->\',使用按扭能够靠右排列。

这种方案使用非常简单 只是放置按扭，如大家看到的比较难看，后续要修改按扭的样式，会麻烦一些。

 

第二方案：

这个方案利用了extjs提供给大家的一个简易的按扭样式：

如下图：

代码如下：

Ext.define("CisApp.view.main.Tab", {
    extend: \'Ext.tab.Panel\',
    tabBarHeaderPosition：0，
    tools: [{
        type: \'refresh\',
        tooltip: \'Refresh form Data\',
        // hidden:true,
        handler: function (event, toolEl, panelHeader) {
            // refresh logic
        }
    },
    {
        type: \'help\',
        tooltip: \'Get Help\',
        callback: function (panel, tool, event) {
            // show help here
        }
    }],
。。。。。。

这个方案要注意tabBarHeaderPosition的设置，如果不设置的话，按扭将会在标题栏的上面加一层。

此方案，也适用于在panel的标题栏上加按扭。