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

[tokibihe]

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:

		<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

[Animal]

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?

[tokibihe]

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.

        <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>

[evant]

I can't reproduce this using the SVN version in any browser. Marking as closed.

[Grolubao]

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

[Grolubao]

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;
}

[Grolubao]

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?

[Condor]

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

TreeGrid currently doesn't have fixed headers.

[Grolubao]

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.

[Condor]

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).