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
On Mar 26, 2:31 pm, lanz <[email protected]> wrote:
> 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
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/gwt-ext?hl=en.
