Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    2
    Vote Rating
    0
    tokibihe is on a distinguished road

      0  

    Default [CLOSED-568] TreeGrid vertical scroll bar problem when use it in ViewPort

    [CLOSED-568] TreeGrid vertical scroll bar problem when use it in ViewPort


    Ext version tested:
    • Ext 3.1.1


    Adapter used:
    • ext


    css used:
    • only default ext-all.css




    Browser versions tested against:
    • ____
    • IE8
    • FF3.5 (no firebug installed)


    Operating System:
    • WinXP Pro SP3


    Description:
    • After expanding all nodes in treegrid the scroll bar appears but when I scroll it down
      all column headers are not on the top of the treegrid. (They are also moved)


    Coding:

    Code:
    		<script type="text/javascript">
    			Ext.onReady(function(){
    
    				var gridView = new Ext.ux.tree.TreeGrid({
    					        id: 'Products',
    							title: 'Products',
    							enableDD: true,
    							autoHeight:false,
    							rootVisible:false,
    							autoScroll: true,
    							region: 'center',
    							layout: 'fit',
    							border: false,
    							columns:[{
    								header: 'Product Name',
    								width: 200,
    								dataIndex: 'name'
    							},{
    								header: 'Note',
    								width: 500,
    								dataIndex: 'note'
    							}],
    							dataUrl: 'getProducts.php'
    				});
    
    				var viewport = new Ext.Viewport({
    					layout:'border',
    					items:[
    						gridView
    					 ]
    				});
    
    			});
    		</script>

    Steps to reproduce the problem:


    The result that was expected:
    • The column headers should always be at the top of the treegrid.


    The result that occurs instead:


    Screenshot or Video:
    • please look at the attached images.


    Debugging already done:
    • none


    Possible fix:
    • not provided
    Attached Images

  2. #2
    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


    Bit bizarre to use a border layout with just a center region instead of a fit layout, but that's minor.

    That is all of your code? Just in a simple page which you just load straight into the browser?

  3. #3
    Ext User
    Join Date
    Feb 2010
    Posts
    2
    Vote Rating
    0
    tokibihe is on a distinguished road

      0  

    Default


    No, that is not all of my code.

    Actually, I want to create a web application which has the left panel as a menus' container panel and the center panel as a tab panel which is used for view items' details.
    Here is more of my code.

    Code:
            <script type="text/javascript">
                Ext.onReady(function(){
    
                    var myLeftPanel = new Ext.tree.TreePanel({        
                        id: "My Panel",
                        title: "My Panel",
                        margins: '0 0 5 5',
                        cmargins:'0 5 5 5',
                        autoScroll: true,
                        rootVisible: false,
                        collapsible: true,
                        split: true,
                        lines: false,
                        region: 'west',
                        autoScroll:true,
                        root: new Ext.tree.AsyncTreeNode({ id: 'Root', text: 'Root'}),
                        loader: new Ext.tree.TreeLoader({
                            dataUrl: 'getPanelMenus.php'
                        }),
                        boxMinHeight: '150',
                        boxMaxHeight: '550',
                        height: '550'
                    });            
                    
    
    
                    var myLeftPanel2 = new Ext.tree.TreePanel({        
                        id: "My Panel 2",
                        title: "My Panel 2",
                        margins: '0 0 5 5',
                        cmargins:'0 5 5 5',
                        autoScroll: true,
                        rootVisible: false,
                        collapsible: true,
                        split: true,
                        lines: false,
                        region: 'west',
                        autoScroll:true,
                        root: new Ext.tree.AsyncTreeNode({ id: 'Root', text: 'Root'}),
                        loader: new Ext.tree.TreeLoader({
                            dataUrl: 'getPanelMenus.php'
                        }),
                        boxMinHeight: '150',
                        boxMaxHeight: '550',
                        height: '550'
                    });    
    
                    var gridView = new Ext.ux.tree.TreeGrid({
                                id: 'Products',
                                title: 'Products',
                                enableDD: true,
                                autoHeight:false,
                                rootVisible:false,
                                autoScroll: true,
                                region: 'center',
                                layout: 'fit',
                                border: false,
                                columns:[{
                                    header: 'Product Name',
                                    width: 200,
                                    dataIndex: 'name'
                                },{
                                    header: 'Note',
                                    width: 500,
                                    dataIndex: 'note'
                                }],
                                dataUrl: 'getProducts.php'
                    });
    
                    var tabs = new Ext.TabPanel({
                        activeTab: 0,
                        region: 'center',
                        autoHeight: false,
                        autoScroll: false,
                        items: [ gridView ]
                    });
    
                    var viewport = new Ext.Viewport({
                        layout:'border',
                        enableDD: false,
                        autoHeight: false,
                        autoScroll: false,
                        items:[
                            {
                                region: 'west',
                                collapsible: true,
                                title: 'Home',
                                split: true,
                                lines: false,
                                autoScroll:true,
                                width: 200,
                                minSize: 175,
                                maxSize: 400,
                                items:[ myLeftPanel, myLeftPanel2 ]                            
                            },
                            tabs
                            
                         ]
                    });
                });
            </script>
    Attached Images

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,989
    Vote Rating
    649
    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


    I can't reproduce this using the SVN version in any browser. Marking as closed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Untitled.pngI can reproduce it. I believe the screenshots represent what is happening. Whenever you scroll the headers disappear. This is due to an overflow auto on the outer panel and not only inside of the tree.

    The overflow auto should be on the table and not on the outer div

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    I figured out what the problem was and how to fix it:

    Place autoScroll: false in the TreeGrid and then change the treegrid.css to:

    .x-treegrid-root-node {
    overflow: auto !important;
    }

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    My fix didn't fix it all since now although the headers maintain there when I vertical scroll, the horizontal scroll is broken since it doesn't synchronize with the headers...

    Anybody progressed in this?

  8. #8
    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


    This isn't really a bug; It's a feature request.

    TreeGrid currently doesn't have fixed headers.

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    I honestly fail to see how it's a feature request. Can't see the advantage of scrolling vertically and losing sight of the headers. This way, if a TreeGrid has lots of columns it's impossible to track which cell belongs to which column.

  10. #10
    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


    I didn't say it isn't a very useful request, but still not a bug.

    ps. MaximGB's TreeGrid does have fixed headers (see User Extensions forum).

Similar Threads

  1. Vertical scroll bar brings horizontal scroll bar
    By smiletolead in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 26 Nov 2009, 1:14 AM
  2. How to add vertical scroll bar to grid?
    By chinadust in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Apr 2009, 8:39 AM
  3. vertical scroll bar
    By D-L in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 29 Jan 2009, 12:32 AM
  4. Strange Vertical Scroll bar in window
    By bucka in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Nov 2007, 3:56 PM

Thread Participants: 5