実際かなり厳しい。
ソースコードを確認するExt.tab.Panelと、実際には Card Layout を使用しており、タブごとExt.tab.Tabにタブボタンを使用していました。
次に、 のソース コードを確認するとExt.tab.Tab、実際にExt.button.Buttonは、変更されたボタンである が拡張されています。
したがって、ツールを追加する必要がある場合、最善の方法はExt.tab.Tab独自のタブ ボタンを拡張して作成することです。の233行目でcloseableボタンを作成する方法を確認することをお勧めします。/src/tab/Tab.js
(Ext-4.0.2a)
乾杯
編集
だから私たちExt.tab.Tabは拡張していることを知っExt.button.Buttonています、私たちはこの事実を利用することができます、そして私はこの解決策を思いつきました.fiddleでこれをチェックしてください: 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.'
}]
});
