1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    0
    msauter is on a distinguished road

      0  

    Question Tabscroll problem with the TabPanel inside ViewPort

    Tabscroll problem with the TabPanel inside ViewPort


    Hi,
    i have a problem using the TabPanel with the TabScroll-Feature, inside a ViewPort-Layout. I am using the standard BorderLayoutExample and added a TabPanel inside the CENTER-ContentPanel. At startup, i create 20 Tabs for the TabPanel.

    When the screen is first shown, you can see (at picture tab1), that after "Test Tab 3" the other following Tabs are not rendered. When i click for example on "Test Tab 3", the other missing tabs are now rendered.

    The other problem is the resizing of the whole window. When i reduce the width of the window, then the right-Tabscroll-icon is disappearing (picture tab2). When i enlarge the window, it appears at the last position.

    When i make a fullscreen-size, then i see that the other hidden tabs are not rendered (same issue like picture tab1).

    Any idea how to solve the problem?

    Code:
      public void onModuleLoad() {  
        LayoutContainer viewport = new Viewport();  
        viewport.setLayout(new FillLayout());  
        viewport.add(new BorderLayoutExample());  
        RootPanel.get().add(viewport);  
      }
    Code:
    public class BorderLayoutExample extends LayoutContainer { 
        public BorderLayoutExample() {  
        final BorderLayout layout = new BorderLayout();  
        setLayout(layout); 
          ContentPanel north = new ContentPanel();  
        ContentPanel west = new ContentPanel();  
        ContentPanel center = new ContentPanel();  
        center.setHeading("BorderLayout Example");  
        center.setScrollMode(Scroll.AUTOX);  
      
        // ****** Add here my TabPanel ******  
        center.add(demo());  
      
      
        FlexTable table = new FlexTable();  
        table.getElement().getStyle().setProperty("margin", "10px");  
        table.setCellSpacing(8);  
        table.setCellPadding(4); 
          for (int i = 0; i < LayoutRegion.values().length; i++) {  
          final LayoutRegion r = LayoutRegion.values()[i];  
          if (r == LayoutRegion.CENTER) {  
            continue;  
          }  
          SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() { 
              @Override  
            public void componentSelected(ButtonEvent ce) {  
              String txt = ce.getButton().getText();  
              if (txt.equals("Expand")) {  
                layout.expand(r);  
              } else if (txt.equals("Collapse")) {  
                layout.collapse(r);  
              } else if (txt.equals("Show")) {  
                layout.show(r);  
              } else {  
                layout.hide(r);  
              } 
              }  
          };  
          table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + r.name() + ":</span>");  
          table.setWidget(i, 1, new Button("Expand", sl));  
          table.setWidget(i, 2, new Button("Collapse", sl));  
          table.setWidget(i, 3, new Button("Show", sl));  
          table.setWidget(i, 4, new Button("Hide", sl));  
        }  
        center.add(table); 
          ContentPanel east = new ContentPanel();  
        ContentPanel south = new ContentPanel(); 
          BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);  
        northData.setCollapsible(true);  
        northData.setFloatable(true);  
        northData.setHideCollapseTool(true);  
        northData.setSplit(true);  
        northData.setMargins(new Margins(5, 5, 0, 5)); 
          BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);  
        westData.setSplit(true);  
        westData.setCollapsible(true);  
        westData.setMargins(new Margins(5)); 
          BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);  
        centerData.setMargins(new Margins(5, 0, 5, 0)); 
          BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);  
        eastData.setSplit(true);  
        eastData.setCollapsible(true);  
        eastData.setMargins(new Margins(5)); 
          BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);  
        southData.setSplit(true);  
        southData.setCollapsible(true);  
        southData.setFloatable(true);  
        southData.setMargins(new Margins(0, 5, 5, 5)); 
          add(north, northData);  
        add(west, westData);  
        add(center, centerData);  
        add(east, eastData);  
        add(south, southData);  
      } 
          private TabPanel demo () {  
        TabPanel mainTabPanel = new TabPanel();  
        mainTabPanel.setStyleName("maintabpanel_verticalpanel_tabpanel");  
        mainTabPanel.setMinTabWidth(115);  
        mainTabPanel.setResizeTabs(true);  
        mainTabPanel.setAnimScroll(true);  
        mainTabPanel.setTabScroll(true);  
        mainTabPanel.setCloseContextMenu(true);  
        mainTabPanel.setPlain(false);  
        addDemoTabs(mainTabPanel); 
          return  mainTabPanel;  
      } 
     
       private void addDemoTabs(TabPanel tabp) {  
        for (int i = 0; i < 20; i++) {  
          TabItem item = new TabItem("Test Tab "+i);  
          item.setStyleName("tabpanelcontent");  
          item.add(new ContentPanel());  
          item.setClosable(true);  
          tabp.add(item);  
        }  
      } 
      }
    Attached Images

  2. #2
    Ext GWT Premium Member
    Join Date
    Mar 2009
    Posts
    226
    Vote Rating
    3
    The_Jackal is on a distinguished road

      0  

    Default


    The issue you have is you add the TabPanel to a ContentPanel using the default layout (FlowLayout) and this doesn't work well for dynamic layouts.

    Instead you want to use a RowLayout and add the TabPanel with a RowData(1,1). This will add it with 100% with and 100% height and resize the child as the window resizes.

    Here are the modifications to your code:
    Code:
        public LayoutContainer getBorderLayoutEx()
        {
            ....
    
            ContentPanel north = new ContentPanel();
            ContentPanel west = new ContentPanel();
            ContentPanel center = new ContentPanel();
            
            center.setHeading("BorderLayout Example");
            center.setScrollMode(Scroll.AUTOX);
    
    // NEW CODE START 
            center.setLayout(new RowLayout());
            RowData rd = new RowData(1,1);
    
            // ****** Add here my TabPanel ******
            center.add(demo(), rd);
    // NEW CODE END
    Regards,
    Carl

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    0
    msauter is on a distinguished road

      0  

    Default


    This was the solution, thank you very much!

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar