- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在 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.
}
}]
}]
});
最佳答案
其实挺难的。
如果你查看他们的源代码,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
,我们可以利用这个事实,我已经提出了这个解决方案,在 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.'
}]
});
关于extjs - 如何在 Extjs TabPanel 的选项卡中添加工具?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6751071/
我是一名优秀的程序员,十分优秀!