Scrollbar in TabPanel doesn't work

[lanz]

Hi all,

I am working on a panel with a CardLayout which is formerly a
TabPanel. So it looks like a wizard with previous and next buttons.Now
in one of the panels or page I have a TabPanels that shows the
selected materials of the user per tab. The problem is when I have
many tabs that won't fit anymore in the tab panel area, the scroll bar
doesn't show which is expected to show. This happened when I used
CardLayout. I already have the setEnableTabScroll() but still won't
succeed. I have used the doLayout() method of the tabPanel but was not
also successful.

//=================================
tabPanel = new TabPanel();
tabPanel.setResizeTabs(true);
tabPanel.setMinTabWidth(115);
tabPanel.setTabWidth(135);
tabPanel.setEnableTabScroll(true);
//tabPanel.setAutoScroll(true);//-->error
tabPanel.setWidth(700);// 450->600
// tabPanel.setAutoHeight(true);
// tabPanel.setAutoWidth(true);
tabPanel.setHeight(700); // 250-> 700
addTab(null,"default");
//tabPanel.setActiveTab(0);

tabPanel.addListener(new TabPanelListenerAdapter() {
public void onContextMenu(TabPanel source, Panel
tab, EventObject e) {
showMenu(tab, e);
}
});

//============================================
private Panel addTab(Panel intendedUseform,String tabTitle_loc) { //
test data only
Panel tab = new Panel();
tab.setAutoScroll(true);
tab.setTitle(tabTitle_loc);
System.out.println(">>inside addTab... tabTitle_loc = " +
tabTitle_loc +" tab.getId() = " +tab.getId() );
tab.setIconCls("tab-icon");
if(tabTitle_loc.equals("default")){
tab.setHtml("<br/><br/>" + getBogusMarkup());
//intendedUseform.setId(tab.getId());
}else{
tab.add(intendedUseform);
}
tab.setClosable(false);//change true to false
tabPanel.add(tab);
tabPanel.doLayout();//to show scrollbar
return tab;
}

//============================================

I hope you can share some ideas regarding this matter.

Thanks,
Lanz

[lanz]

Hi all,

I made a test to the gwt-ext demo on tab panels. I put it in a
cardLayout
panel.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.EventObject;
import com.gwtext.client.widgets.*;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.event.TabPanelListenerAdapter;
import com.gwtext.client.widgets.layout.CardLayout;
import com.gwtext.client.widgets.layout.VerticalLayout;
import com.gwtext.client.widgets.menu.BaseItem;
import com.gwtext.client.widgets.menu.Item;
import com.gwtext.client.widgets.menu.Menu;
import com.gwtext.client.widgets.menu.event.BaseItemListenerAdapter;

public class MyTest implements EntryPoint {

private TabPanel tabPanel;
private int index;
private Menu menu;

public void onModuleLoad() {

try{
Panel panel = new Panel();
panel.setBorder(false);
panel.setPaddings(15);
Panel verticalPanel = new Panel();
verticalPanel.setLayout(new VerticalLayout(15));

final Panel mytabPanel = new Panel();//TabPanel -> Panel;
mytabPanel -> myPanelCardLayout
// mytabPanel.setActiveTab(0);
mytabPanel.setLayout(new CardLayout());//CardLayout -->>fitlayout
mytabPanel.setTitle("Request Wizard");
mytabPanel.setPaddings(15);
mytabPanel.setHeight(850);
mytabPanel.setWidth(850);

Panel sample1Panel = new Panel();
sample1Panel.setTitle("Step 1");
// sample1Panel.setAutoHeight(true);
sample1Panel.setHeight(800);
sample1Panel.setWidth(800);
sample1Panel.setId("card-1");

final Panel detailsPanel = new Panel();
detailsPanel.setHeight(800);
detailsPanel.setWidth(800);
//detailsTab.setAutoScroll(true);
detailsPanel.setTitle("Step 2");
detailsPanel.setId("card-2");

Button button = new Button("Add Tab", new
ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
Panel tab = addTab();
tabPanel.activate(tab.getId());
tabPanel.scrollToTab(tab, true);
}
});
button.setIconCls("new-tab-icon");
//verticalPanel.add(button);
sample1Panel.add(button);

tabPanel = new TabPanel();
tabPanel.setResizeTabs(true);
tabPanel.setMinTabWidth(115);
tabPanel.setTabWidth(135);
tabPanel.setEnableTabScroll(true);

tabPanel.setWidth(450);
tabPanel.setHeight(250);
tabPanel.setActiveTab(0);

tabPanel.addListener(new TabPanelListenerAdapter() {
public void onContextMenu(TabPanel source, Panel tab,
EventObject e) {
showMenu(tab, e);
}
});

for (index = 0; index <13; index++) {
addTab();
}

verticalPanel.add(tabPanel);
detailsPanel.add(verticalPanel);
mytabPanel.add(sample1Panel);
mytabPanel.add(detailsPanel);

//-->>Next and Previous Button
ButtonListenerAdapter listener = new ButtonListenerAdapter()
{
public void onClick(Button button, EventObject e) {
String btnID = button.getId();
CardLayout cardLayout = (CardLayout)
mytabPanel.getLayout();
String panelID =
cardLayout.getActiveItem().getId();

if (btnID.equals("move-prev")) {
if (panelID.equals("card-4")) {
cardLayout.setActiveItem(2);//
1>2

} else if(panelID.equals("card-3")){
cardLayout.setActiveItem(1);
}else if(panelID.equals("card-2")){
cardLayout.setActiveItem(0);
}
} else { //move-next

if (panelID.equals("card-1")) {
cardLayout.setActiveItem(1);
// detailsPanel.doLayout();
// mytabPanel.doLayout();
//panel.doLayout();
} else if(panelID.equals("card-2")){
cardLayout.setActiveItem(2);
// mytabPanel.doLayout();
}
}
}
};

Toolbar toolbar = new Toolbar();

ToolbarButton backButton = new ToolbarButton("Back",
listener);
backButton.setId("move-prev");
toolbar.addButton(backButton);
toolbar.addFill();

ToolbarButton nextButton = new ToolbarButton("Next",
listener);
nextButton.setId("move-next");
toolbar.addButton(nextButton);
mytabPanel.setBottomToolbar(toolbar);

mytabPanel.setActiveItem(0);

panel.add(mytabPanel);

Viewport viewport = new Viewport(panel);
// RootPanel.get().add(panel);
}catch(Exception ex){
ex.printStackTrace();
}

}

private void showMenu(final Panel tab, EventObject e) {
if (menu == null) {
menu = new Menu();
Item close = new Item("Close Tab");
close.setId("close-tab-item");
close.addListener(new BaseItemListenerAdapter() {
public void onClick(BaseItem item, EventObject e) {
tabPanel.remove(tabPanel.getActiveTab());
}
});
menu.addItem(close);

Item closeOthers = new Item("Close Other Tabs");
closeOthers.setId("close-others-item");
closeOthers.addListener(new BaseItemListenerAdapter() {
public void onClick(BaseItem item, EventObject e) {
Component[] items = tabPanel.getItems();
/*for (int i = 0; i < items.length; i++) {
Component component = items[i];
if (!
component.getId().equals(tabPanel.getActiveTab().getId())) {
tabPanel.remove(component);
}
}
*/
}
});
menu.addItem(closeOthers);
}

BaseItem closeOthers = menu.getItem("close-others-item");
if (tabPanel.getItems().length == 1) {
closeOthers.disable();
} else {
closeOthers.enable();
}
menu.showAt(e.getXY());
}

private Panel addTab() {

Panel tab = new Panel();
tab.setAutoScroll(true);

tab.setTitle("New Tab " + (++index));
tab.setIconCls("tab-icon");
tab.setHtml("Tab Body " + index + "<br/><br/>" +
getBogusMarkup());
tab.setClosable(true);
tabPanel.add(tab);
return tab;
}

private static String getBogusMarkup() {
return "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. " +
"Sed metus nibh, sodales a, porta at, vulputate eget,
dui. " +
"In pellentesque nisl non sem. Suspendisse nunc sem,
pretium eget, " +
"cursus a, fringilla vel, urna.";
}
}

//<<====================

The scrollbar of the tab Panel won't display if its not in the first
panel of the cardLayout.
Is there any work around for this? I tried the mytabPanel.doLayout()
but still won't activate
the scrollbar of the tabPanel programmatically.

Thanks,
Lanz

[Patrizio De Michele]

first take a look at the java sources and try to understand the reason...
if isn't resolved take a look at javascript sources......
i don't have any answer....
i didn't know workarounds....
bye pat

In data 05 aprile 2010 alle ore 09:58:25, lanz <allan.z...@gmail.com>
ha scritto:

[lanz]

I made a progress on this. I used the solution as suggested in
http://gwt-ext.com/forum/viewtopic.php?f=8&t=3065&p=9988#p9988.
I modify the code. I used the code below:

//-->> p1 is the panel
p1.setHideMode("offsets");

//<<--

I was successful in showing the scrollbar in the tabPanel even this
tabPanel is not in the 1st card.
Unfortunately the tab details or its contents doesn't show unless the
tab other than the first tab is clicked. I already tried
to set the tabPanel to setHidMode just as I did with the other panels
of the cards but still won't show.

On Apr 6, 4:24 am, "Patrizio De Michele" <patrag...@gmail.com> wrote:
> first take a look at the java sources and try to understand the reason...
> if isn't resolved take a look at javascript sources......
> i don't have any answer....
> i didn't know workarounds....
> bye pat
>

> In data 05 aprile 2010 alle ore 09:58:25, lanz <allan.zarsu...@gmail.com>  

> >> tabTitle_loc +" tab.getId() = "- Hide quoted text -
>
> - Show quoted text -...
>
> read more »

[Patrizio De Michele]

from the thread you linked maybe the solution is easy:
"MY WORKAROUND:

I used the "DeckPanel" out of the native GWT widget library"

if you want to continue on this way...
probable solutions are as usual...call doLayout...
setDeferredRendering(false) on the cardlayout
and on tabpanels...and set to do layout on every tab change...

bye pat

2010/4/8 lanz <allan.z...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "GWT-Ext Developer Forum" group.
To post to this group, send email to gwt...@googlegroups.com.
To unsubscribe from this group, send email to gwt-ext+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/gwt-ext?hl=en.

[lanz]

The method setDeferredRender(boolean) is undefined for the type Panel.
So I can't call
it to the panel which have the cardLayout.Plus I already tried and
tested the setDeferredRendering(false)
on tabPanel as well as the doLayout in the tabPanel and tabs. I also
set the tabPanel to the setHideMode("offset").
I'll try the deckPanel.

II

On Apr 8, 3:42 pm, Patrizio De Michele <patrag...@gmail.com> wrote:
> from the thread you linked maybe the solution is easy:

> "MY WORKAROUND:...
>
> read more »

>
> I used the "DeckPanel" out of the native GWT widget library"
>
> if you want to continue on this way...
> probable solutions are as usual...call doLayout...
> setDeferredRendering(false) on the cardlayout
> and on tabpanels...and set to do layout on every tab change...
>
> bye pat
>

> 2010/4/8 lanz <allan.zarsu...@gmail.com>

> > > > Is there any work around for this? I tried the mytabPanel.doLayout()- Hide quoted text -