Accordion not scrolling??

[outrage]

I'm new to extjs and was wondering if somebody could help with my noob problem.

I have a border layout with a tab panel in the center.
In each tab pane I wish to have a further border layout with west and center panels.
In some of the tab panes I require the accordion in the west panel, but I can't seem to get it to scroll and when expanded, it extends beyond the foot of the west region.

Perhaps it's bad practice nesting the border layouts and columns is the way to go?

Here is the code if somebody could please point me in the right direction or offer a better way to accomplish this.

Ext.onReady(function(){
	
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.QuickTips.init();

	var viewport = new Ext.Viewport({
	layout:"border",
	items:[{
	    region:"center",
	    id:"center",
	    title:"",
	    layout:"fit",
	    //border:false,
	    items:[{
	        xtype:"tabpanel",
	        activeTab:0,
	        border:false,
	        items:[{
	            xtype:"panel",
	            title:"Overview",
	            layout:"fit",
	            hideBorders:true,
	            items:[{
	                layout:"border",
	                //hideBorders:true,
	                items:[{
	                    region:"center",
	                    title:"Stuff",
	                    hideBorders:true
	                  },{
	                    region:"west",
	                    id:"overview-west",
	                    title:"Menu",
	                    width:180,
	                    minWidth:180,
	                    maxWidth:180,
	                    split:true,
	                    collapsible:true,
	                    hideBorders:true,
	                    items:[{
	                        layout:"accordion",
	                        layoutConfig:{
	                          animate:true,
	                          autoWidth:true,
	                          fill:true,
	                          titleCollapse:true
	                        },
	                        items:[{
	                            title:"One",
	                            autoHeight:true,
	                            border:false,
	                            html:"<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p>"
	                          },{
	                            title:"Two",
	                            autoHeight:true,
	                            border:false,
	                            html:"Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
	                          },{
	                            title:"Three",
	                            autoHeight:true,
	                            border:false,
	                            html:"Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
	                          },{
	                            title:"Four",
	                            autoHeight:true,
	                            border:false,
	                            html:"Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
	                          }]
	                      }]
	                  }]
	              }]
	          },{
	            xtype:"panel",
	            title:"Tab 2"
	          },{
	            xtype:"panel",
	            title:"Tab 3"
	          },{
	            xtype:"panel",
	            title:"Tab 4"
	          }]
	      }]
	  },{
	    region:"north",
	    id:"north",
	    title:"North",
	    height:100,
	    minHeight:100,
	    maxHeight:100,
	    collapsible:true
	  },{
	    region:"south",
	    id:"south",
	    title:"South",
	    height:50,
	    minHeight:50,
	    maxHeight:50
	  }]
            });
})

[outrage]

What's funny is that I have managed what I thought would be the more difficult parts such as providing the data for the stores, the tree view, grid view etc.
I just seem to keep hitting inconsistances with my layout.

... Actually, I just took another look at it and realised what I was doing wrong. I used an example from the docs which had the accordion layout as "fit" and each panel set to autoheight. I expected this to mean it would fill the container, but I was wrong as it will stretch the container to fit the content.

Sometimes a good nights sleep can work wonders lol.

[Condor]

The west panel with the accordion panel in it is missing layout:'fit'. Also, replace autoHeight:true with autoScroll:true in the panels inside the accordion.

ps. If you're nesting layouts inside a card layout (e.g. TabPanel) you need to add defaults:{hideMode:'offsets'}.

[outrage]

The west panel with the accordion panel in it is missing layout:'fit'. Also, replace autoHeight:true with autoScroll:true in the panels inside the accordion.

ps. If you're nesting layouts inside a card layout (e.g. TabPanel) you need to add defaults:{hideMode:'offsets'}.

Thank you for the tips.
Here is the new code should anyone hit a similar problem:

Ext.onReady(function(){
	
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.QuickTips.init();

	var viewport = new Ext.Viewport({
	layout:"border",
	items:[{
	    region:"center",
	    id:"center",
	    title:"",
	    layout:"fit",
	    hideBorders:true,
	    items:[{
	        xtype:"tabpanel",
	        activeTab:0,
	        border:false,
	        hideBorders:true,
	        items:[{
	            xtype:"panel",
	            title:"Overview",
	            layout:"fit",
	            hideBorders:true,
	            items:[{
	                layout:"border",
	                items:[{
	                    region:"center",
	                    title:"Stuff",
	                    layout:"fit",
	                  },{
	                    region:"west",
	                    id:"overview-west",
	                    title:"Menu",
	                    width:180,
	                    minWidth:180,
	                    maxWidth:180,
	                    split:true,
	                    collapsible:true,
	                    hideBorders:true,
	                    layout:"fit",
	                    items:[{
	                        layout:"accordion",
	                        layoutConfig:{
	                          animate:true,
	                          autoWidth:true,
	                          titleCollapse:true
	                        },
	                        items:[{
	                            title:"One",
	                            autoScroll:true,
	                            border:false,
	                            html:"<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p>"
	                          },{
	                            title:"Two",
	                            autoScroll:true,
	                            border:false,
	                            html:"Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
	                          },{
	                            title:"Three",
	                            autoScroll:true,
	                            border:false,
	                            html:"Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
	                          },{
	                            title:"Four",
	                            autoScroll:true,
	                            border:false,
	                            html:"Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
	                          }]
	                      }]
	                  }]
	              }]
	          },{
	            xtype:"panel",
	            title:"Tab 2"
	          },{
	            xtype:"panel",
	            title:"Tab 3"
	          },{
	            xtype:"panel",
	            title:"Tab 4"
	          }]
	      }]
	  },{
	    region:"north",
	    id:"north",
	    title:"North",
	    height:100,
	    minHeight:100,
	    maxHeight:100,
	    border:false,
	    collapsible:true
	  },{
	    region:"south",
	    id:"south",
	    title:"South",
	    height:50,
	    minHeight:50,
	    maxHeight:50
	  }]
	});
})

The only thing I'm not quite happy about is the extra 1 pixel border around the border layout in the tabs. Removing it takes the border off the split region too which looks odd. I can live with it though.
ExtJS is just so cool, thanks again guys.

[urban10]

I'm having a similar issue in which I use an accordion layout inside a popup window. I have followed the instructions described here... setting layout:'fit' on each main Panel element and autoScroll:true for each of its internal Panel items. When an accordion item expands to reveal the panels within it, there is spacing on the right side where the scrollbar would be, and the scrollbar appears for a brief moment, but then the contents expand to fill the entire available width within the window and this padding/scrollbar disappear. I've tried everything I can think of to no avail...

Here's the code for the Window containing the accordian:

Ext.extend(BroadcasterApp.wizards.ComponentDialog, Ext.Window, {
    objname: 'BroadcasterApp.wizards.ComponentDialog',
    title: 'Components',
    modal: false,
    minimizable: false,
    resizable: true,
    floating: true,
    shadow: true,
    shim: false,
    width: 200,
    height: 200,
    components: [],
    layout: 'accordion',
    autoScroll: true,
    listeners: {
        remove: function(){
            BroadcasterApp.Debugger.debug('ComponentDialog::removed');
        },
        modified: function(){
            BroadcasterApp.Debugger.debug('ComponentDialog::modified');
        }
    },
    defaults: {
        bodyStyle: 'padding:1px'
    },
    layoutConfig: {
        titleCollapse: true,
        animate: true,
        activeOnTop: false,
        autoScroll: true
    },
    beforeRender: function () {
        return false;
    },
    afterRender: function() {
        BroadcasterApp.wizards.ComponentDialog.superclass.afterRender.apply(this);
    }
});

I then have code to populate the accordion items based on backend data from the database, which outputs something like:

{"total": 6, "success": true, "response": "", "data": [{"id":"26","title":"Footer","layout":"fit","items":[{"id":"comp-menu-32","compid":"32","html":"Footer Links","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/32","autoScroll":true}]},{"id":"24","title":"General Content","layout":"fit","items":[{"id":"comp-menu-25","compid":"25","html":"w&w definitions","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/25","autoScroll":true},{"id":"comp-menu-26","compid":"26","html":"Threatened Resources","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/26","autoScroll":true},{"id":"comp-menu-27","compid":"27","html":"Windfield Table","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/27","autoScroll":true},{"id":"comp-menu-30","compid":"30","html":"Public Advisory","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/30","autoScroll":true},{"id":"comp-menu-2365","compid":"2365","html":"Product Sample Test","xtype":"applayoutcomponent","dataUrl":"\/product_components\/fetch\/2365","autoScroll":true}......

Thanks in advance for any assistance!

[Animal]

Don't follow anyone.

Unless it's me, Condor, evant, hendricd, mjlecomte.. well quite a few others.

Because if you engage in cargo cult programming, where you accept any kind of voodoo as a good ritual, then you'll end up in trouble.

Instead, use a rational approach. Read the manual, experiment with simple code and build up.

Overnesting (even if you use layout fit) is bad practice.

Show some more code. That's just your pointless subclass (Why create a subclass? What capabilities is the new class adding over the superclass?)

What do you add to it and what is the actual description of YOUR problem?