PDA

View Full Version : Gridpanel getInnerWidth - keeping scrollbar in mind



Juel
27 Feb 2009, 5:43 AM
Hi,

I'm using a Grid-Panel with horizontal Scrollbar.
By setting autoExpandColumn:'lastcolid', the last column gets expanded to fit grid.getInnerWidth() - which is unfortunately not the whole width that you can scroll...

Thus - by using stripeRows:true and disableSelection:false it doesn't look quite nice when you start scrolling and things look cropped because stripes and selection ends in the middle of the scroll position.

I now reimplemented the columnresize event with autoexpand on the last column - but my problem is that I don't see how I can get the total width that you can scroll inside the gridpanel...

Is there a way to get this width - maybe somehow to get the horizontal scrollbar element which I guess should know it?

Thanks for any help, Juel

arthurakay
27 Feb 2009, 7:25 AM
http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel

"autoExpandColumn" takes a string, not a boolean. You should post your code for your grid so we can get a better idea of what you're doing, but try this:



var gridColModel = new Ext.grid.ColumnModel([
{
header: 'Name',
id: 'Name',
dataIndex: 'Name'
}
]);
...

var grid = new Ext.grid.GridPanel({
...
autoExpandColumn: 'Name' // <-- the 'id' of the column
...
});

Juel
27 Feb 2009, 8:20 AM
"autoExpandColumn" takes a string


Sorry - this was only a typo, I corrected it above...

The problem still remains - how can I get the whole width of the panel including the area which appears when the user scrolls to the right side.

getInnerWidth() just returns the width that you see on your screen...

arthurakay
27 Feb 2009, 8:33 AM
you might try panel.getBox().width, though honestly I don't know if it's the value of the visible box or the entire area.

Juel
2 Mar 2009, 12:04 AM
Thx, for this idea - but unfortunately

grid.getBox().width returns the same width as grid.getInnerWidth() ...

I still need a way to get the total width you can scroll inside a gridpanel :(

Animal
2 Mar 2009, 12:09 AM
What do you mean? The total width of all the columns? The width of the scroller element? Both are easily accessible

Juel
2 Mar 2009, 12:17 AM
Yes - width of the scroller element sounds right...

I have the problem that it fits perfekt without scrollbar - but with scrollbar I get this:

http://msg2.me/grid.jpg

So I need the total width of the element inside the scroll-area

Animal
2 Mar 2009, 2:22 AM
That looks wrong. How do you get that?

Juel
2 Mar 2009, 5:10 AM
I used the paging-grid example (Link (http://extjs.com/forum/../deploy/dev/examples/grid/paging.html))

as a basic template and modified it. When you click on "show preview/sequences" the ATCTGT... sequence gets displayed in one line as it should, as well as the scrollbar.

The only thing is that the width of the autoExpandColumn:'colid' doesn't seem to be updated.
So I probably overwrote the columnresize event


grid.on('columnresize',function(a,b){
grid.getColumnModel().setColumnWidth(a,b);
var model = grid.getColumnModel();
model.setColumnWidth(model.getColumnCount()-1,grid.getInnerWidth() - model.getTotalWidth(false) + model.getColumnWidth(grid.getColumnModel().getColumnCount()-1) - 19);
});which seems to work nice - the only thing is that grid.getInnerWidth() didn't return the whole width and I ended up with the same result as before. If I would know how to get the total width I could replace grid.getInnerWidth() and everything would work.


My viewconfig from the gridpanel looks as follows:


viewConfig: {forceFit:false,enableRowBody:true,showPreview:false,getRowClass : function(record, rowIndex, p, store){
grid.fireEvent('columnresize',grid.getColumnModel().getColumnCount()-1,grid.getColumnModel().getColumnWidth(grid.getColumnModel().getColumnCount()-1));
if(this.showPreview){p.body = '<p style="font-family:monospace;font-size:10px">'+record.data.sequence+'<br>'+record.data.structure+'</p>';return 'x-grid3-row-expanded';}return 'x-grid3-row-collapsed';},

templates: {
cell: new Ext.Template('<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>','<div class="x-grid3-cell-inner x-grid3-col-{id}"{attr}>{value}</div>','</td>')
}
},