confirmation message and beforerender in extjs

[madhusanmani]

Hi All,

I am having mutiple panels, when the user edit and click on other tabpanel, user should get a confirmation message saying that "whether they need o save the changes",when i tried to implement this its going to next panel and then showing the Confirmation message.

As per the requirement user should get the confirmation message in the current panel,but the current implementation traverse to next panel and then it displays teh confirmation message.

Thanks in Advance,
Madhu

[mdlincoln]

You probably want to use the beforetabchange event. Then you can check the data and return false to prevent the navigation to the new tab.

[madhusanmani]

Hi,

I am using before render tab event , but the application wont wait until the user secltes yes/no from the confirmation message.
which will traverse to the next tab and then it will display the message, "whether you want to move to other tab"

[madhusanmani]

Hi,

Thanks for the reply,
i am using beforetab change method as shown below.

but the message is getting displayed and the application wont wait for the user to clik either Yes r no button.

sg.bia.panel.BIATabPanel=Ext.extend(BIATabPanel, Ext.TabPanel, {
centerPanelText:'Center Panel',
listeners: {
beforetabchange: function(tabpanel, newTab, oldTab){
// headerTabCancel ia method
var resultHeader1 = headerTabCancel(cancel_header_flag);
if(resultHeader1==true){
return false;
}
return true;
}
}
});


function headerTabCancel(cancel_header_flag){
if(cancel_header_flag==true){
Ext.MessageBox.confirm('Confirm Action', 'Do you wish to continue?. Changes will not be saved in Header', function(response) {

if (response == 'yes') {
return false;
}else if(response == 'no'){
return true;
}
});

}

[madhusanmani]

Hi,

cancel_header_flag is varibale which is created as a global variable, so no compillation errors.

[sword-it]

beforetabchange( this,newTab,currentTab )
This event fires before the active tab changes.
It takes three arguments:

• this: TabPanel
• newTab: The tab being activated in the tabpanel.
• currentTab: The cuurent active tab in the tabpanel.
  
  So, Your Code will be something like this:

beforeTabChange: function() {
       this.showConfirmation();
}

showConfirmation: function() {
   Ext.Msg.show({
     title:'Save Changes?'
     , msg:'Would you like to save your changes before changing the current tab?'
     , buttons:Ext.Msg.YESNOCANCEL   
      , fn: processResult
     , animEl:'elId'
     , icon:Ext.MessageBox.QUESTION
   });
}

If You Still Get Some Issues, Please Let Me Know.

[madhusanmani]

i have implemented this, the message box will be displayed once the tabchange events occurs. The tab change even should occur only based on User input Yes/No.

Can any one help me how to suspend tab change event in beforetabchangeevent method.

which will solve my problem.

[sword-it]

Hi,

check this:-http://www.sencha.com/forum/showthre...eforetabchange

[madhusanmani]

HI ,

Thanks a lot, its working fine..