PDA

View Full Version : GridPanel Column Width Discrepancy



Thinjon100
Dec 31, 2008, 9:42 PM
<ext:GridPanel runat="server" StoreID="Store1" Title="Clients">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="CampaignName" Header="Campaign" DataIndex="CampaignName" Sortable="true" />
<ext:Column ColumnID="Vendor" Header="Vendor" DataIndex="Vendor" Sortable="true" />
<ext:Column ColumnID="CreationDate" Header="Client Transfer Date" DataIndex="CreationDate" Align="Right" Sortable="true" Groupable="false">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
</ext:Column>
<ext:Column ColumnID="FirstName" Header="First Name" DataIndex="FirstName" Sortable="true" Groupable="false" />
<ext:Column ColumnID="LastName" Header="Last Name" DataIndex="LastName" Sortable="true" Groupable="false" />
<ext:Column ColumnID="StatusText" Header="Status" DataIndex="StatusText" Sortable="true" Groupable="true" />
<ext:Column ColumnID="Phone" Header="Phone" DataIndex="Phone" Sortable="true" Groupable="false" Align="right">
<Renderer Fn="phoneHandler" />
</ext:Column>
<ext:Column ColumnID="Value" Header="Value" DataIndex="Value" Sortable="true" Groupable="false" Align="right">
<Renderer Fn="moneyHandler" />
</ext:Column>
<ext:Column ColumnID="LastUpdate" Header="Last Update" DataIndex="LastUpdate" Sortable="true" Groupable="false" Align="right">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
</ext:Column>
<ext:Column ColumnID="Assigned" Header="Assigned" DataIndex="Assigned" Sortable="true" Groupable="true" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView
ID="GroupingView1"
HideGroupedColumn="true"
runat="server"
ForceFit="true"
StartCollapsed="true"
GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Clients" : "Client"]})'
EnableRowBody="false">
</ext:GroupingView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="25" StoreID="Store1" DisplayInfo="true" DisplayMsg="Displaying clients {0} - {1} of {2}" EmptyMsg="No clients to display">
</ext:PagingToolBar>
</BottomBar>
<LoadMask ShowMask="true" />
</ext:GridPanel>


The GridPanel above is inside the <Center> tag of a BorderLayout inside a ViewPort. When the GridPanel renders in IE, all the columns have the same width. When it renders in Firefox or Chrome, however, the last column ("Assigned") is compressed into approximately 10 pixels while all other columns are equal width. After a couple hours trying various permutations of Width="n", Fixed="true|false", Resizeable="true|false", AutoExpandColumn, AutoWidth, etc etc, I was unable to find a combination that rendered logical column widths in all 3 browsers. If I specify Fixed="true" and a width on every column it works, but negates the full-width display of the Grid.

I tried the same layout with and without my Render functions.

I tested this in IE7 (worked as expected), Firefox 3.0.5, and Google Chrome. Firefox and Chrome render the last non-fixed column (or the first column, if all are fixed) with a minimal width.

Oddly enough, a similar page I made earlier has no width issues. The only obvious difference is that the other page loads data through AJAX callback, while this one's data was written into the javascript on the page with the grid.

I can provide more information if necessary