PDA

View Full Version : [CLOSED-568] TreeGrid vertical scroll bar problem when use it in ViewPort



tokibihe
17 Feb 2010, 2:57 AM
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
17 Feb 2010, 5:15 AM
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
17 Feb 2010, 7:05 PM
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
24 Jun 2010, 4:33 AM
I can't reproduce this using the SVN version in any browser. Marking as closed.

Grolubao
6 Jan 2011, 2:10 AM
24132I 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
6 Jan 2011, 2:26 AM
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
12 Jan 2011, 8:39 AM
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
13 Jan 2011, 5:38 AM
This isn't really a bug; It's a feature request.

TreeGrid currently doesn't have fixed headers.

Grolubao
13 Jan 2011, 5:43 AM
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
13 Jan 2011, 6:19 AM
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).

able.li@oocl.com
25 Jun 2012, 9:28 PM
Please see the attachement gif.