listener on tab click or activation not working properly / extjs4
I am developing an application with extjs4 and c#, it is based on the browser-layout example. I have a menu on the left side, where you can click each item of that menu. On the right side I have all of my tabs.
The event listener I'm using on the tabs works when I click on the tab, but doesn't work after the first time I click on it from the left menu.
To be clearer, when I first load my application, I have to select an item from left menu, it then shows my tab with tab1 activated. Everything works well, except it doesn't work when I select another item then go back to m开发者_运维百科y tab.
This is my listener:
listeners: { activate: function () {
alert('tab1');
}
},
Here is the code called when clicking the menu:
menuPanel.getSelectionModel().on('select', function (selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
Ext.getCmp('cardTabs').setActiveTab(0);
}}
Thanks in advance!
once check the below url:
http://jsfiddle.net/6NK7n/6/
var sample1 = {
id : 'example1',
border : false,
title : 'sample1'
};
var sample2 = {
id : 'example2',
border : false,
title : 'sample2'
};
Ext.create('Ext.tab.Panel',{
title : 'example',
width : 300,
height : 300,
draggable : false,
plain : true,
id : 'examplepanel',
activeTab : 0,
border : true,
renderTo : document.body,
items : [sample1,sample2],
listeners : {
beforetabchange : function(tab,newTab,currentTab){
if(newTab.getId() == 'example1'){
alert('sample1 tab is selected');
}else if(newTab.getId() == 'example2'){
alert('sample2 tab is selected');
}
}
}
});
Better to use beforetabchange
instead of activate
listener.Try the following one:
listeners : {
beforetabchange : function(tab, newTab, currentTab){
if(newTab != null){
if(newTab.getId()=='tab1'){
alert('tab1');
}
}
}
}
Like above you can write tha listeners for each tab that you wish to execute.
Solved
I added a listener to my tabpanel
listeners: { tabchange: function () {
//refresh
switch (this.getActiveTab().id) {
case 'myId1': myFunction();
.........
}
},
精彩评论