PDA

View Full Version : issue in Tab Scroll



nitipatil
9 Jun 2008, 1:12 AM
Hi all,

I am using the TabPanel.setTabScroll(true) to set scrolls on tab if tabpanel's width is less than that of all the sum of the width of its tabItems.

I am using WindowResizeListener.onResize() API to change the tabPanel's width depending window's current width;

on resize,tabPanel get resized,and show scroll if width is less than its tabitems total width,

when i press right arrow button till the last tabitem get shown completly, and then I resize the main window,then TabPanel's tabItems get misplaced.

http://nitin638.files.wordpress.com/2008/06/tabs.jpg

gslender
9 Jun 2008, 3:21 AM
why not use a viewport to have this done automatically?

nitipatil
9 Jun 2008, 5:01 AM
Hi,

I tried using viewport as used in this forum link
http://extjs.com/forum/showthread.php?p=173071

But its not getting resized on window resized,so no scrolls too..

nitipatil
9 Jun 2008, 5:08 AM
Hi..
Sorry..I was wrong in implementation for view port.
It is getting resized on window resized, but same issue..

whn i scroll right scroll completly and then resized tabitems get misplaced

gslender
9 Jun 2008, 12:45 PM
post a complete code snippet that demonstrates your problem - this might be a feature bug, but even so, post complete code to be sure.

nitipatil
9 Jun 2008, 7:04 PM
tabPanel Creator->


public Viewport buildTabFolder() {
topFolder = new TabPanel();
topFolder.setTabScroll(true);

TabItem views = new TabItem();
views.setText("one");
topFolder.add(views);

TabItem reports = new TabItem();
reports.setText("two");
topFolder.add(reports);

TabItem dataEntry = new TabItem();
dataEntry.setText("three");
topFolder.add(dataEntry);

TabItem consoleConfiguration = new TabItem();
consoleConfiguration.setText("four");
topFolder.add(consoleConfiguration);

TabItem applications = new TabItem();
applications.setText("five");
topFolder.add(applications);

topFolder.setBorders(false);

//VerticalPanel vPanel = new VerticalPanel();
//vPanel.add(topFolder);
Viewport container = new Viewport();
container.add(topFolder);
return container;
}
Entry point ->



public void onModuleLoad() {
Viewport container = buildTabFolder();
container.layout();
//container.setLayout(new FillLayout());
RootPanel.get().add(container);
}

gslender
9 Jun 2008, 8:58 PM
Post complete code - this snippet requires bits that you have left out.

As per these guidelines...
http://extjs.com/forum/showthread.php?t=33778

Thanks

nitipatil
9 Jun 2008, 9:10 PM
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;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ConsoleTabs implements EntryPoint {

/**
* Execute when the module is loaded.
*/
public void onModuleLoad() {
Viewport container = buildTabFolder();
container.layout();
container.setLayout(new FillLayout());
RootPanel.get().add(container);
}

public Viewport buildTabFolder() {
TabPanel topFolder = new TabPanel();
topFolder.setTabScroll(true);

TabItem views = new TabItem();
views.setText("one");
topFolder.add(views);

TabItem reports = new TabItem();
reports.setText("two");
topFolder.add(reports);

TabItem dataEntry = new TabItem();
dataEntry.setText("three");
topFolder.add(dataEntry);

TabItem consoleConfiguration = new TabItem();
consoleConfiguration.setText("four");
topFolder.add(consoleConfiguration);

TabItem applications = new TabItem();
applications.setText("five");
topFolder.add(applications);

topFolder.setBorders(false);

Viewport container = new Viewport();
container.add(topFolder);
return container;
}
}

gslender
9 Jun 2008, 11:01 PM
I've tried the code you supplied and I can't see what's wrong with it... can you provide clear step by step action you do, and what you think should happen and explain what isn't happening.

nitipatil
10 Jun 2008, 12:45 AM
Hi,

I will tell you exact steps to reproduce this issue:

1. reduce the window's width to see scroll on the right side.
2. then, click the right scroll button, till you see "five" last tabitem complete.
3. now again increase the size of window (in order to see the scrolls again), you will see the tab item misplaced.

I also added zip which has recording as wmv file

gslender
10 Jun 2008, 1:20 AM
nope - couldn't get it to cause the bug you demonstrated - tried both hostedmode and FF2 and it works fine.

download the latest build again (even if using beta4) just to be sure you've not got an old/buggy version... ??

sorry

nitipatil
10 Jun 2008, 7:53 PM
I downloaded zip again...still same issue.:s
have you seen the wmv recording, in that I have shown exact scenario to reproduce this issue.

gslender
10 Jun 2008, 7:58 PM
well, I'm using Windows XP SP2, Java 1.6, GWT 1.5 RC1 and ExtGWT beta4 and I can't reproduce the problem you are showing... so I can only guess it might be environmental.

What/client and setup are you using?

nitipatil
10 Jun 2008, 8:28 PM
I am using JAVA 1.5. thats the only thing different..
Might be that's cause of issue...but for now I cant go for Java 1.6..

Thanks a lot !! :)

karacutey
12 Dec 2008, 8:31 AM
i get that bug too, i get it when i set the tab resize to true usually, i haven't seen it to much cuz i found a work around after screwing around with some of the component on your content panel