PDA

View Full Version : beforetabchange



sbodanapu
10 Apr 2012, 9:13 PM
Hi,
My task now is that i have two tabs. when ever i edit the data in the current tab and click on the next tab with out saving the changes, it should display an alert message asking my confirmation. if i click "yes" it should stay in the current tab or if i click "no" it should navigate to the next tab...

Here is my working code..

listeners:{
'beforetabchange' : function(this,newTab,currentTab){
if(true){
Ext.MessageBox.confirm('Alert','Do you want to save the changes?,function(btn,text){
if(btn=='no'){
Ext.Panel(newTab.getId()).show();
}
else
Ext.Panel(currentTab.getId()).show();
}
)};
}


but this is not performing the required task and as soon as the alert message is displayed, it is navigating to the newTab even before i press YES or NO button.
Can i use the function Ext.Panel(Panelid).show() ??

Please help....

Thanks in Advance,
Sandeep

chramer
10 Apr 2012, 10:45 PM
no.. actually you do

'beforetabchange' : function(tabpanel,newTab,currentTab){...
tabpanel.setActiveTab(newTab) or tabpanel.setActiveTab(currentTab).
The thing is that 'setActiveTab' method will also fire the 'beforechange' event.

vietits
10 Apr 2012, 11:17 PM
FYI


Ext.onReady(function(){

var pnl = Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 250,
title: 'test',
items: [{
title: 'tab1',
},{
title: 'tab2'
}],
listeners: {
beforetabchange: function(tabPanel, newTab){
if(!tabPanel.suspendTabChange){
Ext.MessageBox.confirm('Alert','Do you want to save the changes?',function(btn,text){
if(btn=='no'){
tabPanel.suspendTabChange = true;
tabPanel.setActiveTab(newTab);
delete tabPanel.suspendTabChange;
}
});
return false;
}
}
}
});
});