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,833
    Vote Rating
    609
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi