我在extjs中使用了一个选项卡面板。我想在单击选项卡时显示警报。但我不确定如何显示。
这就是我现在所做的:
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'All',
items: [grid]
},
{
xtype: 'panel',
title: 'Closed'
},
{
xtype: 'panel',
title: 'Open'
}
],
listeners: {
click: function () {
alert('test');
}
}
}
单击该选项卡时,如何显示"全部"、"关闭"或"打开"?
TabPanel
中没有选项卡单击事件,但您可以绑定到每个选项卡上的单击事件:
Ext.createWidget('tabpanel', {
items: [...],
listeners: {
render: function() {
this.items.each(function(i){
i.tab.on('click', function(){
alert(i.title);
});
});
}
}
});
注意:这是基于ExtJS 4的代码。
我通过使用tabchange
事件来做到这一点。在下面的例子中,我使用了newCard.xtype
属性,其中xtype的值(即task-archive
)只是我的面板,其中包含控件和相应的xtype属性。
Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#tabWorks': {
tabchange: this.doTest
}
});
},
doTest: function ( tabPanel, newCard, oldCard, eOpts) {
switch (newCard.xtype) {
case "task-archive":
console.log("task-archive");
break;
case "task-creation":
console.log("task-creation");
break;
}
}
});