View Full Version : Prevent Tab Change when user clicks on a new tab (Ext.tab.Panel)

14 Aug 2013, 1:16 PM
I have a situation where i have three tabs in a tab panel. Each of these tabs has a form. If the user fills out the form but doesn't hit save and then tries to change a tab, I want to warn them. I've got the following:

beforetabchange : function(tabPanel, newCard, oldCard, opts) {
var abandonEdits = confirm('You have unsaved changes');
if(!abandonEdits) {
return false;

The problem is that, while the actual panels aren't being switched, the tab is changing. In other words, the old active tab is losing the "selected" class and the new tab they clicked on is getting the "selected" class. Shouldn't beforetabchange be catching this and cancelling it when I return false?

Gary Schlosberg
16 Aug 2013, 3:57 PM
I'm unable to recreate this issue. With what version of ExtJS are you seeing this? The following example pulled from the docs (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tab.Panel) works for me:

Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
listeners: {
beforetabchange: function(tabs, newTab, oldTab) {
return newTab.title != 'P2';
items: [{
title: 'P1'
}, {
title: 'P2'
}, {
title: 'P3'

In every version tested, the second tab didn't change, the CSS looked as it should. Perhaps you have a code sample that reproduces the issue?