Scrollable TabPanel within Viewport

[harismohd]

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

    :::
  <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

  :::
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

[evant]

You need to put autoScroll on the item, not the tabpanel itself.

[harismohd]

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

  :::
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

[harismohd]

.... Please help me....