1. #1
    Ext User zerodivide's Avatar
    Join Date
    Feb 2008
    Posts
    16
    Vote Rating
    0
    zerodivide is on a distinguished road

      0  

    Default Scrollbar in Tree inside an Accordion Problem

    Scrollbar in Tree inside an Accordion Problem


    Hi,

    I've a problem with scrollbars, unfortunally i cannot find a good solution myself. I hope someone can tell me the configuration problem i encounter.

    I've a splitted Border Panel, on the west side i've an accordion.
    I've a tree inside one of the Border Panel
    When i expand my tree, the scrollbars are wel displayed vertically, but when my context is too large to be displayed, the content push the vertical scrollbars and there is no horizontal scrollbar displayed.

    I suppose it's a configuration problem because in a standard border layout with tree on the left side i've no problems.

    Here is the code, to test it, just add a div with the referenced id

    Some screenshots in attachment


    Code:
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif'; 
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
      
    // application main entry point 
    Ext.onReady(function() { 
    
    //----------------------- Media tree definition ---------------------------
    var treeMedias = new Ext.tree.TreePanel({
             // tree
             animate:true,
             enableDD:false,
             rootVisible:false,
             lines:false,
    	border:false, 
    	autoHeight :true,
    	autoWidth:true,
             margins: '5 0 5 5'
        });
    
    var tloaderMedia = new Ext.tree.TreeLoader({
    	dataUrl: '/config/mediatree.asp',
    	waitMsg:'Loading',
    	waitMsgTarget: true,
    	requestMethod:"GET"
    });
    
    tloaderMedia.on("beforeload", function(tl, node){
          this.baseParams.folder = node.attributes.path;
          });
    
    var rootMedias = new Ext.tree.AsyncTreeNode({
    		loader: tloaderMedia
    	});
    treeMedias.setRootNode(rootMedias);
     
    //--------------------------------------------------------------------
    
    
      
    var w = new Ext.Panel({ 
    		title: 'Navigation'
    		,layout: 'accordion' 
    		,width:300 
    		,height:600
    		,closable:false 
    		,collapsible:true
    		,margins:'5 0 5 5'
    		,cmargins:'5 5 5 5'
    		,border:true 
    		,region: 'west'
            ,split: true
    		,margin:'10 10 10 10'
    		//,collapsible:true
    		,layoutConfig:{animate:true} 
    		,defaults: { 
    		stateEvents: ["collapse","expand"] 
    		,getState:function() { 
    			return {collapsed:this.collapsed}; 
    		} 
    		//,bodyStyle:'padding:8px' 
    	} 
    	,items:[{ 
    		stateId:'first' 
    		,title:'Pages' 
    		,html: 'First' 
    		,border:false
    		,bodyStyle:'padding:10px' 
    		},{ 
    		stateId:'medias' 
    		,title:'Medias' 	
    		,border:false
    		,xtype:'panel'
    		,items:[treeMedias]
    		,autoScroll : true
    		,hideCollapseTool :true
    		
    
    		},{ 
    		stateId:'third' 
    		,title:'Navigation' 
    		,html: 'Third' 
    		,border:false
    		,bodyStyle:'padding:10px' 
    		},{ 
    		stateId:'fourth' 
    		,title:'Users' 
    		,html: 'Fourth' 
    		,border:false
    		,bodyStyle:'padding:10px' 
    	}] 
    }); 
    
    
    	
    
     var p = new Ext.Panel({
            title: 'My Panel',        
            margins:'5 5 5 0',
    		cmargins:'5 5 5 5',
    		region: 'center',
    		border:true,
            split: true,
    		layout:'card',
    		items: [{
    		        id: 'welcomePanel',
    		        html: 'Welcome',
    				margins:'5 5 5 5',
    				cmargins:'5 5 5 5',
    				xtype:'panel',
    				border:false
    		    },{
    		        id: 'card-1',
    		        html: '<p>Step 2 of 3</p>',
    				margins:'5 5 5 5',
    				cmargins:'5 5 5 5',
    				border:false
    		    },{
    		        id: 'card-2',
    		        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    		    }]
    
        });
    	
    var layout = new Ext.Panel({
            layout: 'border',
            border:true,
            height:600,
    		title : 'Ext-JS : POC',
            items: [w, p],
            bbar: new Ext.StatusBar({
                defaultText: 'Ready',
    			statusAlign: 'right',
                id: 'basic-statusbar',
    	        items: [ '<table border="0" cellpadding="0" cellspacing="0"><tr><td style="padding-top:2px;padding-left:2px"><img src="/display/lbilogo.gif" border="0" /></td></tr></table>', ' ', ' ']
            })
            //style:"border:1px solid #87ACC3;margin:10px"
        });
    	
    	layout.render('accordionHome');
    	p.layout.setActiveItem('welcomePanel');
    	
    	// Allow to display the status of your application in the bottom bar
    	function statusBarActionBusy(msg,i){
    		statusBar = Ext.getCmp('basic-statusbar');
    			if (i){
    			statusBar.showBusy(msg);
    		}
    		else {
    			statusBar.clearStatus({useDefaults:true})
    		}
    	}
    });

    And here the content returned by the '/config/mediatree.asp' file (a static content for the test)

    Code:
    [
    	{
    		text:"Documents, expanded to himself because no params",
    		iconCls:"folder-documents", 
    		id:"documents-node",
    		path:"/content/documents/",
    		title:"Documents",
    		leaf:false
    	},
    	{
    		text:"Images",
    		iconCls:"folder-images", 
    		id:"images-node",
    		path:"/content/images/",
    		title:"Images",
    		leaf:true
    	}
    ]
    Thx in advance
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    677
    Vote Rating
    12
    Dumbledore will become famous soon enough

      0  

    Default


    i confirm this behaviour in Internet-Explorer. With Firefox all runs fine...

    Bye, Dumbledore

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
    afathman is on a distinguished road

      0  

    Default


    I had this same problem... I wrapped my treepanel in another panel with a border layout to fix...

    Code:
          
    
          // Wrap the OUTree in a border panel so the Tree's AutoScroll will work.
          //  When the tree was just used directly in the panel w/ the accordian layout
          //  there was a problem (mostly in IE) with the treepanel scrolling.
          //  Horizontal and Vertical had different problems too...
          //  Different results occured in IE vs Firefox vs Safari so make sure you
          //  test accross browsers if you make a change to this. Problem with ExtJS 2.0.2
          title: 'TreePanelBorderWrapper',
          id: 'SidebarOUPanelWrapper',
          layout:'border',
          items:[
            new Ext.tree.TreePanel({
              id: 'SidebarOUPanel',
              title: 'TreePanelTitle',
              region: 'center',
              border: false,
              autoScroll: true,
              header: false // you could show this - but I'm letting the Wrapper's header show
              // Other config options go here....
            })
          ]

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Mettawa, IL
    Posts
    99
    Vote Rating
    0
    james.tucker is on a distinguished road

      0  

    Default


    Any solution to this?

  5. #5
    Ext User
    Join Date
    Nov 2007
    Posts
    28
    Vote Rating
    0
    gysheng is on a distinguished road

      0  

    Default I have the same problem

    I have the same problem


    I have the same problem

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

      0  

    Default


    OVER. NESTING.

    AS usual.

    WHY WHY WHY wrap any Panel inside another Panel for no reason?

    Read this code:

    Code:
    { 
    		stateId:'medias' 
    		,title:'Medias' 	
    		,border:false
    		,xtype:'panel'
    		,items:[treeMedias]
    		,autoScroll : true
    		,hideCollapseTool :true
    		
    
    		}
    treeMedias is INSIDE another Panel.

    Inside another Panel which has no layout, and will not perform any sizing on its child item!

    READ THE API DOCS!

    JUst configure treeMedias with title: 'Medias', autoScroll:true and put it directly into the accordion.