MessageBox to Confirm close tabitem gxt 2.0.1

[Castro]

Hello..
I have a problem when closing a TabItem. I close a TabItem but I have a confirmation message. when I click on the yes, closes the TabItem ,when I click no, the TabItem keeps active.
Source code I'm using:



TabPanel tab = new TabPanel();
TabItem item = new TabItem("Tab Test");
item.setLayout(new FitLayout());
item.setClosable(true);
tab.add(item);
item.addListener(Events.BeforeClose, new Listener<TabPanelEvent>() {
public void handleEvent(TabPanelEvent be) {
be.setCancelled(true);
buttonBar.add(new Button("Yes/No/Cancel", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
MessageBox box = new MessageBox();
box.setButtons(MessageBox.YESNOCANCEL);
box.setIcon(MessageBox.QUESTION);
box.setTitle("Close Tab");
box.setMessage("Close Tab?");
box.getButtonById(Dialog.YES).addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
be.setCancelled(false);
}
});
box.show();
}
}));


However with this approach the TabItem doesn't close.
If anybody have a solution, please help me...

[Arno.Nyhm]

the firstbe.setCancelled(true); and the second be.setCancelled(false); are different things! the first one is of TabPanelEvent and the second of ButtonEvent.

one trick. give the first TabPanelEvent a different variable name. then you can access it from within the componentSelected

[Arno.Nyhm]

a) you realy on GXT 2.0.1?

the getButtonById is only in GXT 1.xx


b) i can not replay your example because of missing buttonbar :-(

[Arno.Nyhm]

more notice i see in the logic:
if you open the messagebox then the CloseEvent is gone. the listener on the yes/no buttons fires later. so you have to close the tab by yourself if someone click on YES (and also remember somehow that the close event comes from the yes button otherwise you have a loop)

[Arno.Nyhm]

working sample where you remember in a variable that you have clicked the button:



package org.yournamehere.client.forum.code.snippets;

import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.MessageBoxEvent;
import com.extjs.gxt.ui.client.event.TabPanelEvent;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;

/**
*
* @author anonym
*/
public class ForumThread371978 implements EntryPoint {

public void onModuleLoad() {

new Window() {

{
TabPanel tab = new TabPanel();
add(tab);

final TabItem item = new TabItem("Tab Test");
item.setLayout(new FitLayout());
item.setClosable(true);
item.add(new Html("Text"));

tab.add(item);

item.addListener(Events.BeforeClose, new Listener<TabPanelEvent>() {

boolean isConfirmedTabClose = false;

public void handleEvent(final TabPanelEvent be) {

if (isConfirmedTabClose) {
isConfirmedTabClose = false;
} else {
be.setCancelled(true);

MessageBox box = new MessageBox();
box.setButtons(MessageBox.YESNO);
box.setIcon(MessageBox.QUESTION);
box.setTitle("Close Tab");
box.setMessage("Close Tab?");
box.addCallback(new Listener<MessageBoxEvent>() {

public void handleEvent(MessageBoxEvent be) {
if (be.getButtonClicked().getItemId().equals(Dialog.YES)) {
isConfirmedTabClose = true;
item.close();
isConfirmedTabClose = false;
}
}
});
box.show();
}
}
});
}
}.show();
}
}



an other solution is to save the listener in a variable and remove this listener before closting and add again after closing (if you need to reuse the tab etc)

[Castro]

Works .. :)

Thank you for your help..