1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    22
    Vote Rating
    -1
    outrage is an unknown quantity at this point

      0  

    Default Accordion not scrolling??

    Accordion not scrolling??


    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.

    Code:
    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
    	  }]
                });
    })

  2. #2
    Ext User
    Join Date
    Feb 2008
    Posts
    22
    Vote Rating
    -1
    outrage is an unknown quantity at this point

      0  

    Default


    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.
    Last edited by outrage; 27 Feb 2008 at 1:54 AM. Reason: Solved

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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'}.

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    22
    Vote Rating
    -1
    outrage is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Condor View Post
    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:

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

  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    12
    Vote Rating
    0
    urban10 is on a distinguished road

      0  

    Default


    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:

    Code:
    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:
    Code:
    {"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!

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

  7. #7
    Sencha User
    Join Date
    Apr 2009
    Posts
    5
    Vote Rating
    0
    pgagnon is on a distinguished road

      0  

    Default Accordion not scrolling

    Accordion not scrolling


    We can read the manual all we want but at some point, something like layout:'fit' and/or autoScoll:true should do it.

    Admittedly, when 12 different people have the same problem, it might be time to go back and test the framework some. If autoScroll:true is not going to work because it conflicts with another structure, the framework should tell what/why. Any form of error handling would be appreciated.

    Trying 17 different things to make something working just ain't the way to go. Posting full fleshed EXT-JS code is also complicated.You never which other piece it's conflicting with.

    The accordion is not scrolling because it isn't, at least as of 4.0.7. The panel seems confused about when to display a scroll back since it depends on the size of the item panels it renders.