GXT : How to customize TabPanel close context menu

Question

I have a GXT(3.0.1) TabPanel with many tabs.

This TabPanel has an out-of-the-box CloseContextMenu with 2 options :

Close this tab
Close all other tabs

In order to react to "close tab" events and be able to eventually cancel them, I use some BeforeCloseHandler.

What I need :

When the user closes one tab, be able to display a confirmation dialog for this tab.
When the user chooses to close all other tabs, display one unique confirmation for all tabs.

The problem :

The BeforeCloseHandler is called as many times as there are some tabs to close. So, I do not find any mean to make the distinction between unique and massive closes. I also do not find any mean to customize this menu.

Does anyone have a solution or am I trying to solve the wrong problem?

Laksitha Ranasingha Laksitha Ranasingha · Accepted Answer · 2013-05-16T16:33:14

I don't think there's a cleaner solution provided by Sencha for this problem. Yes as you said if you see the implementation, BeforeCloseEvent is fired for every tab close, so you get a list of events. But there is a solution for that.

1.if you check how they create the closeContextMenu in TabPanel implementation you can see.

closeContextMenu.add(new MenuItem(getMessages().closeOtherTabs(), new SelectionHandler<MenuItem>() {
          @Override
          public void onSelection(SelectionEvent<MenuItem> event) {
            List<Widget> widgets = new ArrayList<Widget>();
            for (int i = 0, len = getWidgetCount(); i < len; i++) {
              widgets.add(getWidget(i));
            }

            for (Widget w : widgets) {
              TabItemConfig config = getConfig(w);
              if (w != contextMenuItem && config.isClosable()) {
                close(w);
              }
            }
          }

        }));

and also the closeContextMenu is protected so if you extend this TabPanel class you can set your own Menu instead of using the default one. Then you can add your own SelectionHandler and provide a relevant message to the user. For example as in the above code, you can show a prompt message before running the for loop which removes the tabs.

2.However context menus are not a great idea in web context. Can't you add a button may be next to tab panel and close all the tabs except selected one ? TabPanel has access to all the panels anyway.

GXT : How to customize TabPanel close context menu

1 Answers