PDA

View Full Version : [2.0b1][SOLVED] Grid autoWidth renders grid 10x width of screen in IE6



SilveR316
18 Oct 2007, 11:07 AM
Setting autoWidth to true (or not setting a grid width at all for that matter) will expand the grid to about 10x the screen width in IE6.

I modified an example on your website to use autoWidth: true and it does the same thing.


This happens only in IE6. IE7 and FF render it correctly. Tested in alpha 1, beta 1, and rev 1225 from svn and they all produce the same result.




<div id="test"></div>
<script type="text/javascript">
Ext.onReady(function(){

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var cm = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el: 'test',
ds: ds,
cm: cm ,
autoWidth: true,
height: 400,
autoExpandColumn: 'company',
title: 'test grid'
});

// Render the grid!
grid.render();
});

</script>

mystix
18 Oct 2007, 11:13 AM
verified. autoWidth:true results in a grid width of 10001px for me in IE6 (the <div class="x-grid3"> container element (first child of <div class="x-panel-body">) gains a style of "width:10001px;" in IE6)

SilveR316
18 Oct 2007, 11:18 AM
Some screenshots.

This is what it looks like.

http://img100.imageshack.us/img100/360/autowidthgrid1wv5.jpg



While playing around with it, I discovered another bug. Set a specific width and set autoHeight: true, and it renders like this, which is obviously another bug. Notice the column header bar gets rendered to the full width of the screen and the text on the headers doesn't show up until you mouse over it.

http://img153.imageshack.us/img153/3933/autowidthgrid2ol6.jpg

SilveR316
19 Oct 2007, 5:40 AM
Just an update, this same issue also happens in IE7 if you do not declare a proper DOCTYPE. Adding a doctype fixes the issue in IE7, but the problem persists in IE6.

lupin85.luca
24 Oct 2007, 12:31 AM
I've got the same problems.
Did you find how to resolve them?

SilveR316
24 Oct 2007, 3:43 PM
No, not with the width set to auto. I have to put in a pixel width.

jack.slocum
25 Oct 2007, 2:05 AM
A width or container layout is required for the grid. autoWidth effectively means "ignore any widths" which cannot work in a grid which depends on column sizing and other dimension setting.

autoWidth is inherited from Panel and we will get it removed from the docs for the next release.

mystix
25 Oct 2007, 2:47 AM
autoWidth is inherited from Panel and we will get it removed from the docs for the next release.


fixed in SVN.

SilveR316
25 Oct 2007, 1:41 PM
Is there no way to autosize a grid to the width of the screen in IE6? It works in both FF and IE7, but IE6 still makes the grid 10x the screen width, even if I wrap the grid inside a panel.

Animal
25 Oct 2007, 1:45 PM
Just create a Viewport with layout:'fit' and add the Grid to it. Job done.

jmhuge
26 Oct 2007, 6:43 AM
Animal,

Does that answer change if we are already working inside a Viewport and want a couple of grids in 2 columns on a tab panel to automatically size to the available width.

I'm a newbie here, but trying to put another view port in the base layout items I was already using just shoved it to the top of the page. Attached image shows my base layout. Both grids look ok with a set column width. When I remove this I get the problem mentioned by others, but my goal is to allow the grids to expand to each take half of the available space by using relative column widths, which doesn't seem to work.

It should be noted that I am not applying objects to div tags but rather having them render from the onReady() function. Perhaps that is a limiting factor. Also using IE7.

Thanks.

SilveR316
26 Oct 2007, 2:46 PM
Animal, that doesnt solve my problem.

I don't want the grid to be the full width of the browser. I want to be able to specify a specific div container in my page to autosize to 100% of the available area. Then I want the grid to take up the exact space of the div.

Basically I have a webpage that expands to the size of the window with a fixed width menu on the left. I want the grid to expand with the page.

I can do it fine in FF and IE7, but no go in IE6.

FuryVII
26 Oct 2007, 4:03 PM
To Animal:

What if you want an accordion?

tryanDLS
27 Oct 2007, 6:08 AM
The initial bug reported in this thread has been solved/closed. Please post new questions in a thread in the appropriate forum. There are a number of threads in the last few days answering these type of sizing questions.

Closing this thread.