Tuesday, March 29, 2011

ExtJS - Confirm close of tab in tabpanel

Couldn't find a complete solution when trying to solve this problem so here's how I did it.

A handler is added for the 'beforeclose' event. Due to the Ext MessageBox being asynchronous, the confirm box will show while the function returns false and cancels the 'close' event of the tab. If 'no' is selected (the user does not wish to save changes) then the tab is removed from it's parent container. Can be used to extend any type of component you are using in your tabpanel.

Hope this saves someone some time and trouble.


Ext.ConfirmPanel = Ext.extend(Ext.Panel, {

  initComponent: function(){

    Ext.ConfirmPanel.superclass.initComponent.apply(this, arguments);

    this.addListener({
      beforeclose:{
        fn: this.onClose,
        scope: this
      }
    });


  },

  onClose: function(p){
    Ext.MessageBox.show({
      title: 'Save changes?',
      msg: 'Do you want to save changes?',
      buttons: Ext.MessageBox.YESNOCANCEL,
      fn: function(buttonId){
        switch(buttonId){
          case 'no':
            this.ownerCt.remove(p);   // manually removes tab from tab panel
            break;
          case 'yes':
            this.saveToFile();
            this.ownerCt.remove(p);
            break;
          case 'cancel':
            // leave blank if no action required on cancel
            break;
        }
      },
      scope: this
    });
    return false;  // returning false to beforeclose cancels the close event
  }

  saveToFile: function(){
    //your code to save changes here
  }

});

Ext.reg('confirmpanel', Ext.ConfirmPanel);  // register the extension as an xtype

var yourTabPanel = new Ext.TabPanel({
  activeTab: 0,
  items: {
    xtype: 'confirmpanel',   // using the new xtype as your tab panel item will give the confirm function on closing
    closable: true
  }
});
 
Please leave a comment if this code helped you or if you have anything to add.

3 comments:

  1. Thanks for this great snipet

    Ivan S

    ReplyDelete
  2. Thank you, I encountered this problem and used your solution, with some modifications.

    ReplyDelete
  3. This is a ExtJS 4 version (sorry for bad code):

    Ext.define('Ext.ConfirmPanel', {
    extend : 'Ext.Panel',
    alias : 'widget.confirmpanel',

    initComponent: function()
    {
    Ext.ConfirmPanel.superclass.initComponent.apply(this, arguments);
    this.addListener({ beforeclose:{ fn: this.onClose, scope: this } });
    },

    onClose: function(p)
    {
    Ext.MessageBox.show({
    title : 'Save changes?',
    msg : 'Do you want to save changes?',
    buttons : Ext.MessageBox.YESNOCANCEL,
    fn : function(buttonId)
    {
    switch(buttonId) {
    case 'no':
    this.clearParameters();
    this.ownerCt.remove(p);
    break; // manually removes tab from tab panel
    case 'yes':
    this.saveToFile();
    this.ownerCt.remove(p); break;
    case 'cancel': break; // leave blank if no action required on cancel
    }
    },
    scope: this
    });

    return false; /*returning false to beforeclose cancels the close event*/
    },

    clearParameters: function(){ /*your code to save changes here*/ },

    saveToFile: function(){ /*your code to save changes here*/ }

    });

    ReplyDelete