View Full Version : gridview horizontal scroll bar, title bar, and column headings shouldn't scroll!!!

26 Feb 2010, 11:56 AM
Howdy. I have a gridview set up and in general it works quite well. Unfortunately, I have been banging my head against an alteration that I haven't figured out a way to do.

How do I fix(lock) the location of the title bar, the column headers, and the horizontal scroll bar so that they do not scroll...i.e. I only want the data itself to scroll via the vertical scroll bar.

I should probably preface this with the fix I am using to get the horizontal scroll bar to display at all....

Ext.override(Ext.grid.GridView, {
layout : function(){
return; // not rendered
var g = this.grid;
var c = g.getGridEl();
var csize = c.getSize(true);
var vw = csize.width;

if(!g.hideHeaders && (vw < 20 || csize.height < 20)){ // display: none?

this.scroller.dom.style.overflowY = 'visible';
this.scroller.dom.style.position = 'static';
this.el.setSize(csize.width, csize.height);

var hdHeight = this.mainHd.getHeight();
var vh = csize.height - (hdHeight);

this.scroller.setSize(vw, vh);
this.innerHd.style.width = (vw)+'px';
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}else {
this.onLayout(vw, vh);

The container with the gridview....

var data_panel = new Ext.Panel({
deferredRender: true,
autoScroll: true,
region : "center",//I'm in a layout container....
id: "data_panel",

finally, the gridview settings...

var list = new Ext.grid.GridPanel( {
store : datastore,
// autoScroll: true,
title: grid_title,
multiselect : false,
columnResize : true,
columnSort : true,
autoHeight: true,
border: false,
id: "data_grid",
//listeners, viewconfig, column model...other stuff

I dynamically add the gridview to data panel elsewhere...the grid is dynamically generated based on context and has to be replaced under some circumstances.

You help is greatly appreciated!!!

26 Feb 2010, 1:43 PM
How are you expecting data_panel to size the GridPanel that it contains?

26 Feb 2010, 2:20 PM
Are you referring to the layout?

I thought auto would be fine (default), however, if I use 'fit' I get a horizontal scroll bar that is fixed, because the data_panel is generating it (horray). However, this does nothing to lock the grid title and column headers which are part of the grid.

Does this mean that my vertical scroll bar is actually being generated by the data_panel, and I need to figure out how to have the grid itself generate it? That would explain some things...hmmm

26 Feb 2010, 2:29 PM
You're not rendering are you?

26 Feb 2010, 2:52 PM
After I get my data using an Ajax call, I create the gridpanel, and attach it to my data_panel.

I use this code to accomplish this.

grid = CreateDisplay(data);//contains the "var list = new Ext.grid.GridPanel" code

I don't always create the same type of display, hence the complexity.

Does doLayout not do all that I think it does? Should I be doing something else here?

26 Feb 2010, 3:43 PM
The data_panel horizontal scroll bar that layout:'fit' generated isn't really working nearly as well as I thought...
It only adds the width of the vertical scroll bar...it isn't really getting the width of the grid.

Back to square one...

26 Feb 2010, 3:57 PM
setting the data_panel layout to 'fit',
disabling autoScroll in the datapanel,
and disabling autoHeight in the gridpanel...

it works perfectly!!

I nearly fell out of my chair...