View Full Version : GridPanel column way too small

20 Oct 2010, 12:24 AM

I created a GridPanel with the following configuration:

// ...
columns: [
{ xtype: 'actioncolumn', width: 24, fixed: true, dataIndex: 'InputResult', getClass: this.getInputResultClass },
{ width: 80, header: 'Transaktion #', dataIndex: 'TransactionId', sortable: true },
{ width: 80, header: 'EAN', dataIndex: 'Isbn', sortable: true },
{ width: 240, header: 'Buchtitel', dataIndex: 'Title', sortable: true },
{ width: 200, header: 'Verlag', dataIndex: 'PublisherName', sortable: false },
{ width: 200, header: 'Verkäufer', dataIndex: 'SellerName', sortable: false },
{ width: 80, header: 'Brutto-Preis', dataIndex: 'GrossAmount', align: 'right', sortable: true },
{ xtype: 'datecolumn', width: 120, header: 'Bestelldatum', dataIndex: 'Date', align: 'center', format: 'd.m.Y', sortable: true },

{ xtype: 'actioncolumn', width: 24, fixed: true, tooltip: 'Berechnung', header: ' ', dataIndex: 'StatusKernel', getClass: this.getGetStatusClass('StatusKernelInt', 'StatusKernel'), sortable: true },
{ xtype: 'actioncolumn', width: 24, fixed: true, tooltip: 'Verlagsabrechnung', header: ' ', dataIndex: 'StatusProducerPublisher', getClass: this.getGetStatusClass('StatusProducerPublisherInt', 'StatusProducerPublisher'), sortable: true },
{ xtype: 'actioncolumn', width: 24, fixed: true, tooltip: 'Buchhändlerabrechnung', header: ' ', dataIndex: 'StatusProducerBookseller', getClass: this.getGetStatusClass('StatusProducerBooksellerInt', 'StatusProducerBookseller'), sortable: true }
viewConfig: {
forceFit: true,
// ...
// ...
The column definition written in red is the one I've got problems with. The problem is (as mentioned in the thread title) that this column renders way too small. To be more precise: Its width is 15 pixels. The column before ("Brutto-Preis") has a width of 171 pixels (so Ext scaled it by ~2 due to forceFit: true). I'm not sure what is the problem here. Ext seems to calculate this column's width incorrectly. If I set the width of my datecolumn to fixed: true, the column "Brutto-Preis" gets a width of just about 11 pixels. In both cases, the other columns are wide enough. So maybe it has something to do with the last columns having fixed: true?

OK, so I gave it another try: I removed fixed: true from the last three columns. Now it looks like this: The datecolumn and the "Brutto-Preis" column have exactly the same width: 107px (for whatever reason). But now it gets really interesting: The first two actioncolumns have a width of 107px, too! Only the last column is too small: 21px... I don't get it! How can I fix this? It's always the last non-fixed-width column whose width seems to be calculated completely wrong.

Thanks in advance.

- Andy

P.S.: I just found out: If I set all columns to non-fixed, the behavior is the same.

P.P.S.: The width of the whole panel when I ran these tests was ~1280px (GridPanel in Container in Viewport at 1280x1024).

P.P.P.S.: I know I could combine the last three ActionColumns to one column - but they need to be hideable individually.

20 Oct 2010, 12:49 AM
1. Are you sure you want forceFit:true?
2. Could it be that you are using a state manager and the width comes from your Cookie?

20 Oct 2010, 12:52 AM
1. Why shouldn't I want it? I hate horizontal scrolling ;) and I don't know the resolution of our customers' screens.

2. No, I'm not using a state manager, there a no cookies.

Edit: I forgot: All the testing was done in FF 3.6.10. In Chrome (newest) and IE 8 the red column is even a few pixels smaller than in FF (only tested the first scenario).

20 Oct 2010, 1:02 AM
1. forceFit:true reduces the width of all non-fixed columns so all columns will fit. But when your grid is rendered smaller and later expanded to full width this can leave rounding artifacts. What kind of layouts is your grid in (IIRC this could be a problem in anchor layouts)?

2. Are you sure? Just in case, configure your gridpanel with stateful:false.

20 Oct 2010, 1:29 AM
1. As you can see, the total width of all non-fixed columns is 1000px. In addition there are 96px of fixed-width columns. The GridPanel's width is (in my case) 1278px, so the 1000px must be scaled to 1182px. But here is what Ext has calculated:

Defined width: 24, 80, 80, 240, 200, 200, 80, 120, 24, 24, 24
Expected width: 24, 95, 95, 284, 236, 236, 95, 142, 24, 24, 24
Resulting width: 24, 171, 171, 239, 197, 197, 171, 15, 24, 24, 24<edit> I must admit that I forgot to include the scrollbar in my calculation, but that doesn't change the sense... ;) </edit>

For me this seems to be completely wrong! Some columns are smaller, and some are larger. I don't think that these are rounding artifacts.

The structure of my panels looks like this:

Viewport (layout: border)
Panel (region: center; layout: card; created with activeItem:0)

0: some other Panel
1: the GridPanel
2: ...
2. I set stateful to false, but there is no change.

20 Oct 2010, 2:07 AM
I think your grid is indeed initially rendered with less than 1278px and later resized to 1278px, resulting in those width rounding errors.

Could you try if adding hideMode:'offsets' to the gridpanel helps?

20 Oct 2010, 3:02 AM
No, this doesn't help. The column widths are the same as in my previous post.

20 Oct 2010, 3:15 AM
To check if I'm correct, could you add the following test code to your grid config?

viewConfig: {
layout: function() {
this.constructor.prototype.layout.apply(this, arguments);

20 Oct 2010, 3:25 AM
It writes 866 when the Panels are initialized and several times 1276 when the GridPanel is shown (2 times before store load, 1 time after).

Now I'm a bit confused. Where does this 866 come from? I have no size like this or any other constant size in my code.

Nevertheless the GridPanel should be correctly layouted even if the size was 866, don't you think so?

20 Oct 2010, 3:36 AM
I agree. The wrong size is probably caused by the 866px, but I can't see how...

ps. Which Ext version are you using?

20 Oct 2010, 3:42 AM
I'm using version 3.3.0 (public).

I just found out I have another GridPanel that exhibits this behavior: The defined column widths are [20, 100, 100, 20] - the resulting widths are [127, 521, 521, 86]. And again, the last column is pretty small. But in this case, there are no fixed-width columns.

20 Oct 2010, 3:46 AM
Could you provide a stand-alone testcase that demonstrates the behaviour?

20 Oct 2010, 3:47 AM
That's exactly what I'm doing now. :) I'll keep you posted...

20 Oct 2010, 4:20 AM
OMG, I found it!

The one and only thing that lead to this error was a CSS definition I almost forgot about. The Panel that contains the GridPanel was rendered to a div that had the CSS property position set to absolute. When I removed that definition (which came from a very old version of the app), everything was layouted correctly. (head -> table) 8-|

Thank you for taking so much time for me.

- Andy