在Extjs 的 TabPanel在 title標題列上加按扭button

標籤：logs   有一個   div   file   簡易   bsp   ade   header   xtend   

如何在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的標題列上加按扭。

 

在Extjs 的 TabPanel在 title標題列上加按扭button