Results 1 to 2 of 2

Thread: Scrollbar misplaced on TabPanel with Accordion

  1. #1

    Default Scrollbar misplaced on TabPanel with Accordion

    Hi,

    I want to implement an Accordion inside a TabPanel. And I need the Tab to have a scrollbar when the Accordion expands to avoid the Accordion panels disappear behind the Tab.

    So far so good. I managed to introduce the scrollbar but unfortunately the Accordion also need a scrollbar inside for each panel.
    The problem is that the accordion scrollbar appears outside behind the Tab scrollbar.

    If I set the Accordion autoWidth = false, the Accordion Scrollbar appears correctly but I need to give the tabpanel a width larger than the accordion (19px), to avoid the Tab scrollbar being in front of the accordion scrollbar. But It is "ugly" to have a space of 19px when no scrollbar is needed.
    Also, when the tab is resized with the window, the Accordion width stays the same.


    If I set autoWidth = true, the accordion scrollbar appears outside behind the Tab scrollbar.

    I have tried a lot of configurations and none of them worked.
    What can I do to avoid such situation?

    Code:
    WebApp.ThemeWin = Ext.extend(Ext.Window, {
       AccordionThemes: null,
       TabsThemes: null,
       SearchThemes: null,
       titleText: 'Themes',
       id: "winthemesId",
       layout: 'fit',
       
       initComponent: function() {
          this.SearchThemes = new Skysoft.LisMapas.WebApp.ThemeHelper.FreeSearchField({
             id: 'themeSearchButton',
             fieldLabel: '',
             hideLabel: true,
             width: 238
          });
    
          this.AccordionThemes = new Ext.Panel({
             layout: 'accordion',
             id: 'accthemesid',
             layoutConfig: {
                scrollOffset: 19,
                frame: false,
                activeOnTop: false,
                autoWidth: true,
                animate: true,
                collapseFirst: true,
                fill: false,
                border: false,
                hideCollapseTool: false
             }
          });
          
          this.TabsThemes = new Ext.TabPanel({
             id: 'tabthemesid'
            , activeTab: 0
    	, layoutOnTabChange: true
            , width: 300
            , frame: false
            , defaults: { autoScroll: true }
            , layoutConfig: {
               scrollOffset: 19
            }
            , border: false
            , items: [
            {
               title: 'Themes'
               , items: this.AccordionThemes
            }
            , {
                title: 'Visible Themes'
                , frame: false
            }, {
               title: 'Results'
               , frame: false
            }]
          });
    
       WebApp.ThemeHelper.ThemesLoad();
    
       Ext.apply(this, {
          title: this.titleText,
          closable: true,
          draggable: true,
          closeAction: "close",
          collapsible: true,
          tbar: [this.SearchThemes],
          items: [this.TabsThemes]
       });
    
       WebApp.ThemeWin.superclass.initComponent.apply(this, arguments);
    }
    });
    
    
    WebApp.ThemeHelper.ThemesLoad = function() {
       Ext.Ajax.request({
          url: 'AspxBL/GetThemes.aspx',
          method: 'POST',
          params: { Cmd: 'GetTree' },
          success: function(result, request) {
             var treenodes = Ext.util.JSON.decode(result.responseText);
             var winthemes = Ext.getCmp('winthemesId');
             for (var i = 0; i < treenodes.length; i++) {
                var treeaux = new Ext.ux.tree.RemoteTreePanel({
                   id: 'themetree' + i
    	       , rootVisible: false
    	       , border: false
    	       , autoScroll: true
    	       , root: {
    	          nodeType: 'async'
    		  , id: 'root'
    		  , text: 'Root'
    		  , expanded: true
    		  , uiProvider: false
    	       }
    	       , loader: {
    	          url: 'aspxbl/GetThemes.aspx'
    		  , preloadChildren: true
    		  , baseParams: {
    		     Cmd: 'GetTreeByParent'
    	             , Parent: treenodes[i].pnodeid
    		     , Name: ''
    		  }
    	        }
                });
    
                var aux = new Ext.Panel({
                   title: treenodes[i].text
                   , layout: 'fit'
                   , height: 300
                   , width: 280
                   , border: false
                   , iconCls: 'tabs'
                   , frame: false
                   , collapsed: true
                   , items: treeaux
                });
    
                winthemes.AccordionThemes.add(aux);
             }
    
             winthemes.doLayout();
          },
          failure: function(result, request) {
          }
       });
    };

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Accordion layout has problems with sizing items.

    You could try if this override fixes the problem.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •