1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    3
    Vote Rating
    0
    harismohd is on a distinguished road

      0  

    Question Scrollable TabPanel within Viewport

    Scrollable TabPanel within Viewport


    Hi...

    I'm a new user to ExtJS. I'm trying to integrate ExtJS with Oracle APEX. My application needs tabpanel inside the center region of viewport. The problem I have is, I'm not getting the tab scrolling. When I try to close any tab (using closable: true and clicking on 'x') the tab scroll button appears.

    I'm using TabPanel as a child to the Panel of center region.

    html code
    Code:
        :::
      <div id="pageContent">
        <div id="messages" align="center">#GLOBAL_NOTIFICATION##NOTIFICATION_MESSAGE##SUCCESS_MESSAGE#</div>
        <div id="region_box_body">#BOX_BODY#
          <div id="tabContent"></div>
          <div id="tab01" class="x-hide-display">First</div>
          <div id="tab02" class="x-hide-display">Another one</div>
            :::
          <div id="tab10" class="x-hide-display">Ten</div>
        </div>
        <div id="region_position_04">#REGION_POSITION_04#</div>
          :::
      </div>
        :::
    js code
    Code:
      :::
    var tabPanelContainer = new Ext.Panel({
          id: 'tabPanelContainer',
          border: false,
          enableTabScroll: true, autoScroll: true,
          layoutConfig: {animate: true},
          contentEl: 'tabContent'
        });
      :::
    var tabPanel = new Ext.TabPanel({
      id: 'tabPanel', activeTab: 0,
      overflow: 'auto', autoShow: true,
      tabWidth: 135, minTabWidth: 135, resizeTabs: true,
      enableTabScroll: true, autoScroll: true,
      deferredRender: false, hideBorders:true, 
      defaults: {
        layout: 'fit'
        ,autoScroll: true
        ,hideMode: 'offsets'
      },
      layoutOnTabChange: true,
      items:[
        { title:'Close Me ', html: '<h1 style="font-size:25pt">I\'m a dummy Tab.<br>Please close Me by clicking \'x\' on tab<br>for other tabs to render properly.</h1>', closable: true }
      ]
    });
      :::
    Ext.onReady(function() {
      Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
      var vp = new Ext.Viewport({
        layout: 'border',
        items: [
          {
            :::
          },
          {
            region: 'center',
            id: 'center-panel',
            overflow: 'auto', autoShow: true,
            autoScroll: true, enableTabScroll: true,
            deferredRender: false, hideBorders: true,
            items: [ messagePanel, tabPanelContainer, mainBox ]
          }
        ]
      });
      vp.doLayout();
    });
    tabPanelContainer.add(tabPanel);
    tabPanelContainer.doLayout();
    tabPanel.add( { contentEl:'tab01', title:'Tab Number Title Number 01' } );
    tabPanel.add( { contentEl:'tab02', title:'Tab Number Title Number 02' } );
    tabPanel.add( { contentEl:'tab03', title:'Tab Number Title Number 03' } );
    tabPanel.add( { contentEl:'tab04', title:'Tab Number Title Number 04' } );
      :::
    tabPanel.doLayout(true);
    Please help..

    PS: full code attached.

    Regards,
    Mohammed Haris
    Attached Files

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,648
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to put autoScroll on the item, not the tabpanel itself.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    3
    Vote Rating
    0
    harismohd is on a distinguished road

      0  

    Exclamation


    tried this but in vain... Can anyone please guide me with some examples...

    Code:
      :::
    tabPanel.add( { contentEl:'tab01', title:'Tab Number Title Number 01', autoScroll: true, enableTabScroll: true } );
    tabPanel.add( { contentEl:'tab02', title:'Tab Number Title Number 02', autoScroll: true, enableTabScroll: true } );
    tabPanel.add( { contentEl:'tab03', title:'Tab Number Title Number 03', autoScroll: true, enableTabScroll: true } );
      :::
    Sorry once again If I've missed anything...

    Regards,
    Haris

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    3
    Vote Rating
    0
    harismohd is on a distinguished road

      0  

    Default Please help me out...

    Please help me out...


    .... Please help me....

Thread Participants: 1