TabItems/TabPanels ignore my wishes...

[walsi]

Hi,

I cannot set TabItems invisible/disabled, nor do my events work...

The code:

tabFolder = new TabPanel<TabItem>();
        tabFolder.addListener(Events.SelectionChange,
                new Listener<BaseEvent>() {
                    public void handleEvent(BaseEvent tpe) {
                           // do something - but I never get here...
                    }
                });

[...]

        item = new TabItem();
        item.setText("Auswertung");
        item.addListener(Events.Click, new Listener<BaseEvent>() {
            public void handleEvent(BaseEvent be) {
                // do something - but I never get here...
            }

[...]
        item.setVisible(false);
        item.setEnabled(false);
        item.hide();

Nothing of this works... What am I doing wrong?

[darrellmeyer]

TabPanel fires a Select event on SelectionChange. Also, it passes a ComponentEvent, not a BaseEvent. You select tab items by calling setSelection on tab panel, not changing the visible state of the tab item. Take a look a the example code in the explorer demo.

[walsi]

I do not want to change the selected tab with 'setVisible' and 'setEnabled', I want to hide them (so the user is not able to select them).

But they remain visible, only the content seems grey (but is still working). The exact same coded worked, when I used myGWT - the tabs were hidden with setVisible(false) and got visible again when selecting setVisible(true) - but this doesn't work any more

Same with the Listeners - myGWT recognized when the user clicked on a tab (the event was fired) - but now, it's completely ignored...

[PeteW]

I've come across this problem too, 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

[dangeruss]

I tried to implement a simple listener for when a tabitem closes:

(not a copy/paste, just from memory):

 
tabPanel.addListener(Events.Close,  new Listener<TabPanelEvent>() {
            public void handleEvent(TabPanelEvent te) {
                     dbService.unlockRecord(te.item.getRecord());
            }
});

but the event doesnt seem to fire (no errors). part of this issue? I figured it may be waiting for the tabPanel to close, instead of a tabitem... but why does te.item exist if thats the case?

[walsi]

Hi Darrell,

what's the latest news here? Do you understand my question and the confusing behaviour?

Is this an error in the library? Will it be fixed soon?

I will start a new GWT-project soon, and so I would be interested in the version I should use... mygwt or ext-gwt...

Thank you very much, your work is really appreciated!

[pavan.pappu]

Hi,

I have used the below code the create a tab panel but i am not able to create events on it.How do get a tab selected event in tabpanel. Can some one help me.I have tried all the events list on TabPanel and TabItem objects but i failed in it.I also tried to put a Component event for it but i am not sure how to do it.


public TabPanel getTabPanel(){
final TabPanel tabFolder = new TabPanel();

tabFolder.setTabScroll(true);
tabFolder.setAnimScroll(true);
tabFolder.setHeight("100%");
tabFolder.setAutoWidth(true);



TabItem item = new TabItem();
item.addListener(Events.SelectionChange,this);
item.addListener(Events.OnDoubleClick,this);
item.addListener(Events.Select,this);
item.addListener(Events.OnDoubleClick,this);
item.addListener(Events.SelectionChange,this);
item.addListener(Events.Enable,this);
TabPanelEvent event=new TabPanelEvent(tabFolder,item);


item.setText("T1");
item.setIconStyle("icon-tabs");
String test3="<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html><head><title><body>This is sample.........</body></html>";
htmlPanel=new ContentPanel();
htmlPanel.setHeaderVisible(false);
htmlPanel.setHeight("100%");
htmlPanel.setAutoWidth(true);
//htmlPanel.setWidth("100%");
VerticalPanel vHtmlPanel=new VerticalPanel();
vHtmlPanel.setAutoHeight(true);
vHtmlPanel.setAutoWidth(true);
vHtmlPanel.setHorizontalAlign(HorizontalAlignment.LEFT);
vHtmlPanel.add(new HTML(test3));
htmlPanel.setScrollMode(Scroll.AUTO);
htmlPanel.add(vHtmlPanel);
item.add(htmlPanel);
tabFolder.add(item);
tabFolder.setSelection(item);
TabItem item2 = new TabItem();
item2.setText("T2");
item2.setIconStyle("icon-tabs");
String textContent="This is Sample Text......";
textPanel=new ContentPanel();
textPanel.setHeaderVisible(false);
textPanel.setHeight("100%");
textPanel.setAutoWidth(true);
VerticalPanel vTextPanel=new VerticalPanel();
vTextPanel.setAutoHeight(true);
vTextPanel.setAutoWidth(true);
vTextPanel.setHorizontalAlign(HorizontalAlignment.LEFT);
vTextPanel.add(new HTML(textContent));
textPanel.setScrollMode(Scroll.AUTO);
textPanel.add(vTextPanel);
item2.add(textPanel);
tabFolder.add(item2);
TabItem item3 = new TabItem();
item3.setText("T3");
item3.setIconStyle("icon-tabs");
//item3.add(new HTML("CRF Content"));
ContentPanel c=new ContentPanel();
c.setHeaderVisible(true);
c.setCollapsible(true);
c.setBodyBorder(true);
c.setHeight("100%");
c.setAutoWidth(true);
c.setUrl("http://www.yahoo.com/?fr=fptb-msgr");
//item3.setUrl("http://www.yahoo.com/?fr=fptb-msgr");
item3.add(c);
tabFolder.add(item3);
TabItem item4 = new TabItem();
item4.setText("T4");
item4.setIconStyle("icon-tabs");
item4.add(new HTML("Test Content"));
tabFolder.add(item4);
TabItem item5 = new TabItem();
item5.setText("T5");
item5.setIconStyle("icon-tabs");
item5.add(new HTML("Test Content................"));
tabFolder.add(item5);
return tabFolder;
}

publicvoid handleEvent(BaseEvent be) {
//Window.alert(be.getClass().toString());
if(be instanceof LoadEvent){
LoadEvent x=(LoadEvent)be;
BasePagingLoadResult s=(BasePagingLoadResult)proxy.x;
List q=s.getData();
SummaryBean p=(SummaryBean)q.get(0);
//Window.alert(p.getCampaignId()+" in LoadEvent");
table.addListener(Events.RowClick,this);
}elseif(be instanceof TableEvent){
TableEvent x=(TableEvent)be;

BasePagingLoadResult s=(BasePagingLoadResult)proxy.x;
List q=s.getData();
SummaryBean p=(SummaryBean)q.get(x.rowIndex);
//Window.alert(p.getCampaignId()+" in Table Event");

Object[] y=

table.getItem(x.rowIndex).getValues();

for(int i=0;i<y.length;i++){
Window.alert(y.toString());
}
}elseif(be instanceof TabPanelEvent){
TabPanelEvent t=(TabPanelEvent)be;
//Window.alert(t.item.getText());
if(t.item.getText().trim().equalsIgnoreCase("text")){
//textPanel.show();
textPanel.el().slideIn(Direction.DOWN,FxConfig.NONE);
}elseif(t.item.getText().trim().equalsIgnoreCase("html")){
//htmlPanel.show();
htmlPanel.el().slideIn(Direction.DOWN,FxConfig.NONE);
}
}else{
[i]Window.alert(be.getClass().toString());
}
}

[pavan.pappu]

Hi

Can anyone tell me how to fire events on a TabPanel items.

I want to have a onTabSelected event in the TabPanel and also when the page loads fully i want to select the first tab item by which I want to fire an onTabselected event and make an RPC call to fetch the tab content.

Is this possible in MyGwt TabPanel..........Below is my code and I add this TabPanel to a contentPanel.I also tried a different approach by adding listeners to the TabPanel and the TabItems but i think it is not working out.

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.HTML;
public class TabPanelExt extends TabPanel implements Listener<ComponentEvent>{
public TabPanelExt(){

super();

setTabScroll(true);
setAnimScroll(true);
setHeight("100%");
setAutoWidth(true);

TabItem item = new TabItem();
item.addListener(Events.SelectionChange,this);
item.addListener(Events.OnDoubleClick,this);
item.addListener(Events.Select,this);
item.addListener(Events.OnDoubleClick,this);
item.addListener(Events.SelectionChange,this);
item.addListener(Events.Enable,this);



item.setText("T1");
item.setIconStyle("icon-tabs");
String test3="<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html><head><title><body>This is sample.........</body></html>";
ContentPanel htmlPanel=new ContentPanel();
htmlPanel.setHeaderVisible(false);
htmlPanel.setHeight("100%");
htmlPanel.setAutoWidth(true);
//htmlPanel.setWidth("100%");
VerticalPanel vHtmlPanel=new VerticalPanel();
vHtmlPanel.setAutoHeight(true);
vHtmlPanel.setAutoWidth(true);
vHtmlPanel.setHorizontalAlign(HorizontalAlignment.LEFT);
vHtmlPanel.add(new HTML(test3));
htmlPanel.setScrollMode(Scroll.AUTO);
htmlPanel.add(vHtmlPanel);
item.add(htmlPanel);
add(item);
setSelection(item);
TabItem item2 = new TabItem();
item2.setText("T2");
item2.setIconStyle("icon-tabs");
String textContent="This is Sample Text......";
ContentPanel textPanel=new ContentPanel();
textPanel.setHeaderVisible(false);
textPanel.setHeight("100%");
textPanel.setAutoWidth(true);
VerticalPanel vTextPanel=new VerticalPanel();
vTextPanel.setAutoHeight(true);
vTextPanel.setAutoWidth(true);
vTextPanel.setHorizontalAlign(HorizontalAlignment.LEFT);
vTextPanel.add(new HTML(textContent));
textPanel.setScrollMode(Scroll.AUTO);
textPanel.add(vTextPanel);
item2.add(textPanel);
add(item2);
TabItem item3 = new TabItem();
item3.setText("T3");
item3.setIconStyle("icon-tabs");
//item3.add(new HTML("CRF Content"));
ContentPanel c=new ContentPanel();
c.setHeaderVisible(true);
c.setCollapsible(true);
c.setBodyBorder(true);
c.setHeight("100%");
c.setAutoWidth(true);
c.setUrl("http://www.yahoo.com/?fr=fptb-msgr");
//item3.setUrl("http://www.yahoo.com/?fr=fptb-msgr");
item3.add(c);
add(item3);
TabItem item4 = new TabItem();
item4.setText("T4");
item4.setIconStyle("icon-tabs");
item4.add(new HTML("Test Content"));
add(item4);
TabItem item5 = new TabItem();
item5.setText("T5");
item5.setIconStyle("icon-tabs");
item5.add(new HTML("Test Content"));
add(item5);
}
public void handleEvent(ComponentEvent be) {
Window.alert(be.getClass().toString());
}
}