PDA

View Full Version : [CLOSED] TabItem.setVisible(false) not working



PeteW
30 Apr 2008, 2:32 AM
As of 1.0 (betas 1 and 2), I can no longer hide tabs, here's an example...


import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class SimpleTest implements EntryPoint {

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new FillLayout());

TabPanel tabPanel = new TabPanel();

TabItem tab1 = new TabItem();
TabItem tab2 = new TabItem();

tab1.setText("Tab 1");
tab2.setText("Tab 2");
tab2.setVisible(false);

tabPanel.add(tab1);
tabPanel.add(tab2);

viewport.add(tabPanel);

viewport.layout();
RootPanel.get("slot1").add(viewport);

}
}
tab2 should not be visible, but it is

darrellmeyer
30 Apr 2008, 5:08 AM
The TabPanel hides and show the TabItem internally, overriding what you have set. If you do not want it visible, then remove it from the tab panel.

PeteW
30 Apr 2008, 7:47 AM
I'm a little surprised this has been closed. setVisible() used to work prior to 1.0, it now doesn't.

I have four tabs, the visibility of tabs 2, 3 and 4 are dependent on the state of content in tab 1. If I'm to maintain the correct order for the tabs I need to be very careful to insert them in the correct place.

For example, if I'm showing tab 3, I need to insert it at index 1 if tab 2 is not showing, but index 2 if it is. This is all very messy and something which can be avoided with the use of setVisible().

PeteW
7 May 2008, 9:17 AM
OK, so I've taken a look at adding and removing a tab item from a tab panel rather than using setVisible(true|false). This throws up the following exception the second time the tab item is added...

java.lang.IllegalStateException: Should only call onAttach when the widget is detached from the browser's document
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:487)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:275)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:121)
at com.extjs.gxt.ui.client.util.WidgetHelper.doAttach(WidgetHelper.java:17)
at com.extjs.gxt.ui.client.widget.TabPanel.insert(TabPanel.java:362)
at com.extjs.gxt.ui.client.widget.TabPanel.add(TabPanel.java:203)
at test.client.ViewportTest$1.componentSelected(ViewportTest.java:33)
at com.extjs.gxt.ui.client.event.TypedListener.handleEvent(TypedListener.java:48)
at com.extjs.gxt.ui.client.util.EventTable.sendEvent(EventTable.java:72)
at com.extjs.gxt.ui.client.util.Observable.fireEvent(Observable.java:94)

Here's a simple test, press the button 3 times to add, then remove, then re-add the tab.





import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Button;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class ViewportTest implements EntryPoint {

private boolean tab2added = false;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new FillLayout());

final TabPanel tabPanel = new TabPanel();

TabItem tab1 = new TabItem();
final TabItem tab2 = new TabItem();

Button button = new Button("Push Me Three Times");
button.addSelectionListener(new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
if (tab2added) {
tabPanel.remove(tab2);
tab2added = false;
} else {
tabPanel.add(tab2);
tab2added = true;
}

}
});
tab1.add(button);

tab1.setText("Tab 1");
tab2.setText("Tab 2");

tabPanel.add(tab1);

viewport.add(tabPanel);

viewport.layout();
RootPanel.get("slot1").add(viewport);

}
}

darrellmeyer
7 May 2008, 11:38 AM
I have already made some changes to support what you are trying to do. With the latest code, the TabItem is the container, not the component that represents the tab.

There is a new getHeader() method added to TabItem that returns the header which you can call setVisible on. The code is in SVN and will go out in beta 3.

I will also look at the code you posted.

PeteW
8 May 2008, 4:08 AM
Great stuff. I Look forward to working with it once beta 3 comes out.