PDA

View Full Version : [2.0b1/rc1] GridPanel rendering bug in IE



jozzhart
17 Oct 2007, 8:06 AM
Hello,

Finding some GridPanel rendering issues in both IE6 and IE7.

First issue effects about IE6 and IE7. If I have a gridpanel with a fixed width, and scrolling enabled on the parent container, if the grid is bigger than the available area and the scroll bar appears, scrolling across only scrolls the column header.

http://extjs.jozzhart.com/gridOne.htm


Ext.onReady(function(){

var xg = Ext.grid;

var 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'},
{name: 'industry'},
{name: 'desc'}
]);

var alertsGrid = new xg.GridPanel({
ds: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
new xg.RowNumberer(),
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width : '800',
title:'Grid with Numbered Rows and Fixed width',
iconCls:'icon-grid'
});

var viewport = new Ext.Viewport( {

layout:"border",
items:[{
region:"center",
title:"dashboard",
autoScroll : true,
items : [alertsGrid]
},{
region:"north",
title:"search",
height:40
},{
region:"south",
title:"Top Questions",
collapsible:true,
collapsed:true
},{
region:"west",
title:"good practice",
collapsible:true,
width:200,
collapsed:true
}]
})
});

Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

Second bug only effects IE6. If the gridpanel is set to autoWidth : true, width : 'auto' the grid doens't resize to fit the container, and a scroll bar appears, with the same scrolling issue as described above.

http://extjs.jozzhart.com/gridTwo.htm



Ext.onReady(function(){

var xg = Ext.grid;

var 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'},
{name: 'industry'},
{name: 'desc'}
]);

var alertsGrid = new xg.GridPanel({
ds: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
new xg.RowNumberer(),
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
autoWidth : true,
width : 'auto',
title:'Grid with Numbered Rows and Force Fit',
iconCls:'icon-grid'
});

var viewport = new Ext.Viewport( {

layout:"border",
items:[{
region:"center",
title:"dashboard",
autoScroll : true,
items : [alertsGrid]
},{
region:"north",
title:"search",
height:40
},{
region:"south",
title:"Top Questions",
collapsible:true,
collapsed:true
},{
region:"west",
title:"good practice",
collapsible:true,
width:200,
collapsed:true
}]
})
});

Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

smcneill
17 Oct 2007, 10:04 PM
I have virtually the exact same code resulting in the same scenario. Any suggestions?

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

tony_murphy@yahoo.com
24 Oct 2007, 10:28 AM
Think same problem:

Problem can be seen in from-grid example in release, works ok in firefox, scrolls horizontally for ever in IE6

I manually set width of .x-panel-body in my html file as a quick workaround

<style type="text/css">
/*hack when converting table in ext 2 for ie */
.x-panel-body {
width: 966px;
}
</style>

tryanDLS
24 Oct 2007, 10:50 AM
Try removing the width from you GridPanel config. Since you're putting it into a border layout of the ViewPort, it's layout should handle sizing it to the size of the center region, which should be calculated as whatever is left after sizing the west region.

jozzhart
25 Oct 2007, 5:14 AM
Hi Tim

Removing the width from the GridPanel doesn't fix it......

http://extjs.jozzhart.com/gridThree.htm (http://extjs.jozzhart.com/gridThree.htm)

mystix
25 Oct 2007, 6:08 AM
this is probably a duplicate of the bug reported in this thread:
15642

let us know if the solution there resolves your issue.

Zyclops
4 Nov 2007, 4:08 PM
I'm having the same issue (using 2.0-RC1):

In ie7, ff, safari it looks fine but in ie6 it's about 10x the size of the screen.

I originally just had a grid panel.. then i've tried sticking it in a container layout like below:


this.grid = new Ext.grid.GridPanel( { store: ds,
cm: colModel,
loadMask: true,
plugins: filters,
height: 400,
frame: true});
var container = new Ext.Container({applyTo: this.grid_name + '_panel'
layout: 'fit',
items: this.grid});

Setting a fixed width on the container or the grid stops it being 10* but that doesn't fix the issue as I want the grid to take up any size it can within it's container div (not the viewport).

Zyclops
4 Nov 2007, 9:56 PM
Does anyone know if this is actually a bug or expected behaviour?

If it is expected behaviour what should you normally do to make a grid just fill it's container.

thescott18
5 Nov 2007, 1:05 PM
Does anyone know if this is actually a bug or expected behaviour?

If it is expected behaviour what should you normally do to make a grid just fill it's container.

I would like to know this as well. It appears that making any of the dimensions "auto" will cause the grid to break out of its container in IE6. Any solutions without having to preset a width and height?

jay@moduscreate.com
5 Nov 2007, 1:09 PM
Modify your CSS per this thread and let's see if that fixes the issue:
http://extjs.com/forum/showthread.php?p=80794#post80794

To fix the IE Grid run-away issue


Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}

thescott18
5 Nov 2007, 1:23 PM
Modify your CSS per this thread and let's see if that fixes the issue:
http://extjs.com/forum/showthread.php?p=80794#post80794

To fix the IE Grid run-away issue


Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}


That did it! Thank you, kind sir! :D

But why was it set like that? What is going to break by changing 10000px to auto?

jay@moduscreate.com
5 Nov 2007, 1:42 PM
nothing that i could tell. everything works great in both IE6 and FX2.x for winders.

just be aware that grids do not resize properly (yet) and their header text will not appear rendered until the window.resize event is fired (for some reason).

Zyclops
5 Nov 2007, 2:19 PM
Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}


The change fixed the grid being 10* the size of the viewport, and also made the header the same size as the columns. With some playing aorund this also only worked in combination when the grid was in a container, otherwise the body of the table would still overflow.



var container = new Ext.Container({applyTo: element_id,
layout: 'fit',
items: this.grid});


Now the issue is that the grid pushes out it's container and expands to it's full size instead of scrolling inside the grid:


|CONTAINER| (the grid extends the width of the container)
|-GRID---------|
instead of:
|CONTAINER|
|--GRID---| (with scrollbars on the grid)


In firefox/safari everything is as normal

Zyclops
5 Nov 2007, 2:40 PM
I've found an issue with


Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}


If you have a grid with a large number of columns, the later columns start becoming gradually more and more out of sync (to the left side) of the column headers. Changing it back to width: 10000px fixes that issue...

but then back to the problem in ie6.. sigh

jay@moduscreate.com
5 Nov 2007, 3:07 PM
^^ thanks for that :)

neshaug
6 Nov 2007, 12:50 AM
What layout are you guys using for the parent container? I had this bug, and was using tablelayout, I changed it to borderlayout and the grid turned out fine. On the other hand my formpanel on top of the grid doesn't render as it should. Though if I add a comment <!-- --> on top of the html doc, as statet the form will render correctly if I leave out the margins config. I'll check around if this bug is reported before.

Zyclops
7 Nov 2007, 8:07 PM
I was just using a gridpanel, then I tried with a container and fit, and i've tried with borderlayout, but none of them fix the ie6 10x issue.

jay@moduscreate.com
7 Nov 2007, 8:14 PM
A contractor that is working with us has provided a work-around/override. i'll post tomorrow.

Zyclops
8 Nov 2007, 4:46 PM
:) Awesome!

brian.moeskau
8 Nov 2007, 5:34 PM
FYI, we're following this thread and will take a look at the issue.

Zyclops
11 Nov 2007, 2:14 PM
I tried a few more things (playing with overflows floats and positionings). None of them fixed the issue (or none of them fixed the issue without breaking something else :) )


A contractor that is working with us has provided a work-around/override. i'll post tomorrow.
Any luck with your work-around?

dingdangxiaoma
11 Nov 2007, 5:59 PM
你们好啊,我也遇到了这样子的一个问题,但也没有能够很好去解决这个问题,希望你们能给出一个很好的想法,或是意见什么的呢,
一直关注的啊.

Zyclops
11 Nov 2007, 6:29 PM
你们好啊,我也遇到了这样子的一个问题,但也没有能够很好去解决这个问题,希望你们能给出一个很好的想法,或是意见什么的呢,
一直关注的啊.

According to babelfish:
Hello, I have also met a this appearance question, but also does not have to be able very good to solve this problem, hoped you can produce a very good idea, perhaps opinion any, always pays attention

jay@moduscreate.com
12 Nov 2007, 7:19 AM
consider this a temporary patch until Jack & Team can get the official fix out.


Ext.override(Ext.layout.ContainerLayout,{
layout : function(){
var target = this.container.getLayoutTarget();
// this is to fit the body el to the wrapper again...
if ( this.container.bwrap ) {
var w=this.container.bwrap.getBox().width;
if(this.container.frame){
w-=this.container.getFrameWidth();
}
if(w!=target.getBox().width){
//alert("Resizing container from "+target.getBox().width+" to "+w);
target.setWidth(w);
}
}
this.onLayout(this.container, target);

}
});
Ext.override(Ext.grid.GridView,{layout : function(){
if(!this.mainBody){
return; // not rendered
}
var g = this.grid;
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this;

var csize = c.getSize(true);
csize.width=g.getEl().getBox().width;
var vw = csize.width;

if(!vw || !csize.height){ // display: none?
return;
}

if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
}else{
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.forceFit){
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}
}else {
this.autoExpand();
}
this.onLayout(vw, vh);
}
});

jack.slocum
12 Nov 2007, 1:15 PM
Some things to try:

- Remove autoScroll:true from the GridPanel
- width:'800' is invalid. You want width:800
- A grid cannot have an auto width. It must either have a width set or be part of a layout which will manage setting its width.

jay@moduscreate.com
12 Nov 2007, 1:17 PM
Welcome back my man!

Zyclops
12 Nov 2007, 3:08 PM
- A grid cannot have an auto width. It must either have a width set or be part of a layout
Does sticking it in a container without a specified width count?
var container = new Ext.Container({applyTo: element_id,
layout: 'fit',
items: this.grid});


consider this a temporary patch until Jack & Team can get the official fix out.

Cheers for posting.. couldn't get it to resize the grid. I'm wondering if we've got slightly different setup. I've just got a single GridPanel with almost no settings wrapped in the fit layout shown above.

It didn't run because bwrap in this.container is undefined (checked through firebug). brwap only seems to be definied in panel layouts.

Ext.override(Ext.layout.ContainerLayout,{
layout : function(){
var target = this.container.getLayoutTarget();
// this is to fit the body el to the wrapper again...
if (this.container.bwrap) {


I've also tried just on the gridpanel itself using:


new Ext.grid.GridPanel({applyTo: 'myelementid',
store: ds,
cm: colModel})

jay@moduscreate.com
12 Nov 2007, 5:08 PM
wrap your grid in a panel and your fine then --- for now ;)

Zyclops
12 Nov 2007, 5:43 PM
I tried that.. but the target.getBox then isn't the offending grid so it didn't resize.

I'm organising a party if I manage to get this working :)

jay@moduscreate.com
12 Nov 2007, 5:59 PM
is your grid issue specific to IE? Did you apply the CSS patch?

Zyclops
12 Nov 2007, 8:30 PM
The grid being 10* larger is just in ie6.

Changing the css like

Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}

causes other issues like misalignment of column and column headings on longer tables. I reckon that's what it's used for.

jay@moduscreate.com
12 Nov 2007, 8:31 PM
Crap, that's correct. At the moment, this works if you only have a few columns. You'll probably have to wait until an official fix is out. :(

timezz
12 Nov 2007, 8:58 PM
Try remove the DOCTYPE. I know it doesn't make any sense. But when I remove these two line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The "header not appear" bug is fixed.

Of course, firefox still works perfectly.

jay@moduscreate.com
13 Nov 2007, 4:15 AM
I still have that issue with no doctype :(

Zyclops
13 Nov 2007, 2:49 PM
Try remove the DOCTYPE. I know it doesn't make any sense. But when I remove these two line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The "header not appear" bug is fixed.

Of course, firefox still works perfectly.

Ahh think we're talking about a different error. the issue we have is the grid is 10* the size of the window in ie6... the header still appears.

jay@moduscreate.com
13 Nov 2007, 6:13 PM
Ahh think we're talking about a different error. the issue we have is the grid is 10* the size of the window in ie6... the header still appears.

yeah, 100000 pixels wide.

Zyclops
13 Nov 2007, 7:33 PM
yeah, 100000 pixels wide.
What kind of monitor do you have? an imax cinema projector :)

mehdi
16 Nov 2007, 2:44 PM
Actually, I embedded my Ext.grid.GridPanel, the one that was getting off the screen, in an Ext.TabPanel which 'width' property is forced to "width: screen.width*0.95".
It now works in both IE7 and FF2 (FF2 always worked fine).

I don't know what was causing the issue, but it's now solved.

If it can help anyone with a similar problem...

Mehdi.

neshaug
2 Dec 2007, 4:01 AM
I have a standalone GridPanel in a div, with width specified to screen.width and the issue is gone! :)

brian.moeskau
2 Dec 2007, 11:50 AM
OK, this thread has meandered a bit, so I want to try to refocus it and see if there is anything we still need to look at. First off, in the OP's code, the problem is a missing layout on the center region. Don't forget that every container level in a nested layout MUST have a layout if you want layout management, or it will default to layout:'container' which does not manage any sizing for you. I made this change and the OP's layout works perfectly in IE/FF/Safari:


var viewport = new Ext.Viewport( {

layout:"border",
items:[{
region:"center",
title:"dashboard",
layout:'fit',
autoScroll : true,
items : [alertsGrid]
},{
region:"north",
title:"search",
height:40
},{
region:"south",
title:"Top Questions",
collapsible:true,
collapsed:true
},{
region:"west",
title:"good practice",
collapsible:true,
width:200,
collapsed:true
}]
})


Regarding the header positions in IE, Condor proposed a patch (thanks again) in this thread (http://extjs.com/forum/showthread.php?t=19672) which has been tested in IE 6/7 and committed in SVN.

If anyone still has problems that are not addressed by these two items, please provide a runnable test case that demonstrates your issue. Thanks.

Thylia
11 Dec 2007, 3:38 AM
Hi,

I use Ext 2.0

I have a problem with the headers in IE6

My code :



var panel = new Ext.Panel({
id:'conTpt',
title:'Transport(s)',
collapsible:false,
frame:true,
layout:'form',
labelWidth:45,
items:[{
layout:'column',
items:[{
width:160,
layout:'form',
items:Demande.dateFieldDti
},{
layout:'form',
labelWidth:30,
items:Demande.mutatList
}]
},{
id:'grid-container',
// renderHidden:true,
items:[{
id:'grid-tpt'
},{
id:'iObsRet2',
layout:'form',
labelWidth:145,
items:initTextField('ObsRet2' ,580)
},{
id:'iObsRet3',
layout:'form',
labelWidth:145,
items:initTextField('ObsRet3' ,580)
},{
id:'iObsRetR',
layout:'form',
labelWidth:145,
items:initTextField('ObsRetR' ,580)
}
]
}]
});


...

Demande.gridTpt = new Ext.grid.GridPanel({
store: Demande.tptDs,
cm: cm,
loadMask: true
});

var elGrid = Ext.get('grid-tpt');
// Demande.gridTpt.doLayout();

Demande.gridTpt.render(elGrid);

jsakalos
11 Dec 2007, 5:27 AM
Try to remove doctype, if any, from your html markup. There are several threads here on doctype and IE, if you want to get more info.

Thylia
11 Dec 2007, 5:42 AM
This solution djliquidice works :

[update]
To fix the IE Grid run-away issue
PHP Code:

Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}
Why it's not been incorporated into version 2.0 ?

jay@moduscreate.com
11 Dec 2007, 6:22 AM
Hi Thylia,

I use Ext 2.0 (stable), unmodified and it works perfectly. Have you upgraded to that version?

Thylia
11 Dec 2007, 6:30 AM
Yes i use Ext 2.0 (stable).

jay@moduscreate.com
11 Dec 2007, 6:58 AM
So you have an issue with the grid in IE going > 1000px width?

Thylia
11 Dec 2007, 7:20 AM
http://www.thylia.fr/VideoExport/ExtJs/12_11_2007%2004_13%20.swf

Condor
11 Dec 2007, 7:38 AM
I have a problem with the headers in IE6

The 'grid-container' and 'grid-tpt' containers both don't have a specified layout.
Could you try setting them to 'fit'?

jay@moduscreate.com
11 Dec 2007, 7:40 AM
Hi Thylia,

I'm not trying to be difficult, but I'd like to request that you look at the page: http://extjs.com/deploy/dev/examples/grid/array-grid.html

does it happen there for you too? It doesn't for me. During the RC1 testing, it was showing in the examples.

If not, i would look at caching, and totally wiping out your extjs directory as a whole and deploy a new copy of the full 2.0 stable.

Thylia
11 Dec 2007, 9:16 AM
Hi djliquidice,

I have no problem in the example which you give.
I abolished well all cache and to replace the directory everything of ext.
I always have the same problem.

Thanks a lot for your help

Thylia
11 Dec 2007, 10:05 AM
I my to make a test without the doctype.
Here is result, it is not perfect.

jay@moduscreate.com
11 Dec 2007, 11:12 AM
I apologize, but I don't see this as a bug. your SC suggests that you have a lot of nesting panels. Please post code in the help section and we can continue the troubleshooting. I really doubt this is a bug. :)

I modified the example and added frame: true and it works perfectly.
http://tdg-i.com/img/screencasts/12_11_2007_02_10_PM.swf

pjacobs
12 Dec 2007, 9:42 AM
Hey guys, I'm having an ie6 compliance issue with the grid within a container. I've already figured out the X10 width issue, but cannot figure out the window.resize fix on the grid header not appearing. The funny thing is that in my case this occurs when I select a record in the grid. Here I post before and after images showing what happens.

before:
http://labs.cosential.com/images/before.jpg

after:

http://labs.cosential.com/images/after.jpg

Thanks in advance,
-Phillip

jay@moduscreate.com
12 Dec 2007, 12:41 PM
can you guys replicate this in a stand alone grid panel? it might be an issue with the many nestings i'm seeing.

pjacobs
12 Dec 2007, 1:05 PM
Absolutely,

Here is a standalone replica of what we're doing in the example screenshots:

The code bellow uses a lightly modified version of the autogrid ux found in the community docs.



Ext.onReady(function() {
// Original record Grid/Store
var origStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'index.php?m=contactsImport&action=getRecord&csvId=0'
}),
reader: new Ext.data.JsonReader({root: 'rows', totalProperty: 'totalCount', id: 'id'})
});

var origGrid = new Ext.grid.AutoGrid({
store: origStore,
autoHeight: true,
width: 1000,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock: false,
loadMask: true,
autoSizeColumns:true,
title: 'Original record:'
});

var dupesWindow = new Ext.Window({
title: 'Duplicate(s) Window',
width: 1000,
height:500,
layout: 'fit',
items: origGrid
});

origStore.load();
dupesWindow.show();
});

Results of the store load:

{"metaData":{"root":"rows","id":0,"totalProperty":"totalCount","fields":[{"name":"vchFirstName","header":"vchFirstName"},{"name":"vchMiddle","header":"vchMiddle"},{"name":"vchLastName","header":"vchLastName"},{"name":"vchEmail","header":"vchEmail"},{"name":"Company","header":"Company"},{"name":"Address1","header":"Address1"},{"name":"Address2","header":"Address2"},{"name":"Address3","header":"Address3"},{"name":"City","header":"City"},{"name":"StateId","header":"StateId"},{"name":"Country","header":"Country"},{"name":"zip","header":"zip"}]},"totalCount":12,"rows":[{"vchFirstName":"test1","vchMiddle":null,"vchLastName":"test1","vchEmail":null,"Company":"E=mc_","Address1":null,"Address2":null,"Address3":null,"City":null,"StateId":null,"Country":null,"zip":null}]}

Thanks in advance for taking a look.

tryanDLS
12 Dec 2007, 2:28 PM
totalProperty:'totalCount' is invalid. That should be

totalCount:23 // <- the name you mapped to totalProperty and the number of rows

pjacobs
12 Dec 2007, 2:35 PM
Thanks Tim,

I was returning the wrong count. Unfortunately that didn't solve my problem with the grid header not drawing..

runnersixty
1 Jan 2008, 8:04 AM
Any workaround splitted regions not working in ie6 when not in quirks mode ?
I found that on my box with 512MB and poor old Celeron 1.7 when you don't put a DOCTYPE performance is penalized (ie6); don't know if this is due to Extjs architecture, my application design or if it is a normal browser behaviour.

Solved (for me)
adding this :
<style>
.x-layout-split {
background-color: #DFE8F6;
}
</style>
does the trick here and splitted regions work in ie6.
Note that if you set color to transparent split bar doesn't work.

Zyclops
8 Jan 2008, 9:57 PM
I still have the 10X grid issue and have not been able to fix it. I'm running final version of EXT 2.0:

I've tried a huge number of things, and still have not been able to get this to work. My simple test case is as follows:



<div style="width: 300px; height: 300px; border: 1px solid red;">
<div id="test"></div>
</div>

<script>
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 store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

this.grid = new Ext.grid.GridPanel({applyTo: 'test',
ds: store,
layout: 'fit',
cm: new Ext.grid.ColumnModel([{id:'company1',header: "Company", width: 160, sortable: true, dataIndex: 'company'},{id:'company2',header: "Company", width: 160, sortable: true, dataIndex: 'company'}])
});
});
</script>


The desired behaviour is that grid should expand to fill the size of the box, not be 10X the width of the screen.

Any help on this would be greatly appreciated as i've been struggling with it for quite a while.

mystix
9 Jan 2008, 1:26 AM
@zyclops, does your 'test' div have a width set (either via the div's style property, or via css)?

i.e.


<div id="test" style="width:500px;height;200px;"></div>

jsakalos
9 Jan 2008, 11:56 AM
I don't see any reason to use applyTo config option and html markup of nested divs to be used as the container for the grid. Docs say:



applyTo : Mixed The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo (http://extjs.com/forum/../deploy/dev/docs/output/Ext.Component.html#renderTo) will be ignored and the target element's parent node will automatically be used as the component's container.
applyTo is good for some predefined structures such as tab panel containing tabs or similar.

Check if the problem persists if you use more standard grid config:



var grid = new Ext.grid.GridPanel({
renderTo:document.body,
width:500,
height:200,
// etc

Zyclops
9 Jan 2008, 3:41 PM
@mystix: no the test div which I was using applyTo did not have a fixed width. I wanted the table just to take up the avaliable space as it does in FF. In ie6 it occupies 10X the length of the screen.

@jsakalos: I switched to using render to, but without a width, I still want it just to takeup whatever width is avaliable in it's container, and it still takes up 10X the length. In FF however it behaves normally

Setting a fixed width fixes the issue but that then restricts every single grid to being the size of the smallest monitor our system has to cope with (1024 * 768).

The solution i'm looking for is to stick a grid within a <div> of any width, that in IE6 only fills up to the width of that grid. The only fix i've found so far, mentioned earlier in this thread causes the column headings to gradually misalign themselves with column data.

jsakalos
9 Jan 2008, 4:15 PM
I'd use a viewport in your case. AFAIK, grid must have width.

Zyclops
9 Jan 2008, 5:53 PM
The viewport as far as I know only enlarges to the size of the browser window not to a container div.


AFAIK, grid must have width
In that case it would be that grid must have width only in ie6. Can anyone else confirm this?

jsakalos
9 Jan 2008, 6:41 PM
Have you seen this thread: http://extjs.com/forum/showthread.php?t=15642 ?

Zyclops
9 Jan 2008, 7:02 PM
Have you seen this thread: http://extjs.com/forum/showthread.php?t=15642 ?

I have, it doesn't solve the issue i'm having. It just says use a viewport.

Also from the thread:


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.
I can do it fine in FF and IE7, but no go in IE6.
That's the exact issue i'm having

Condor
9 Jan 2008, 11:01 PM
This thread (http://extjs.com/forum/showthread.php?t=21265) probably has the solution (CSS change + small JS fix).

Zyclops
10 Jan 2008, 8:13 PM
This thread probably has the solution (CSS change + small JS fix).
That fixed the 10000px wide issue (thankyou @condor) but it still pushes the grid out to larger than it's container(just in ie6).

I.e. <div style="width: 300px"><!-- EXT Grid Goes Here (width: ~600) --> </div>
and the div will be the size of the grid, no 300px with the grid having scrollbars. I've tried hacking around the css and playing with overflow's on various grid elements but I can't get it to work (without breaking other stuff).

The fixes I applied we're to ext-all.css
Swapped
.x-grid3-header-offset{padding-left:1px;width:10000px;}
to
.x-grid3-header-offset{padding-left:1px;width:auto;}

Changed the code in ext-all.js under Ext.grid.GridView.layout to:

if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
}else{
this.el.setSize(csize.width, csize.height);

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

this.scroller.setSize(vw, vh);
if(this.innerHd){
//this.innerHd.style.width = (vw)+'px';
this.innerHd.style.width = (vw-this.scrollOffset)+'px'; //add to fix side effect
}
}
and i'm using the following page to test the implementation:


<div id="test" style="width: 300px; height: 300px; border: 1px solid red;">
</div>

<script>
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 store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

this.grid = new Ext.grid.GridPanel({renderTo: 'test',
ds: store,
frame: true,
fitToFrame: true,
autoScroll: true,
cm: new Ext.grid.ColumnModel([{id:'company1',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company2',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company3',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company4',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company5',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company6',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company7',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company8',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company9',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company10',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company11',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{id:'company12',header: "Company", width: 160, sortable: true, dataIndex: 'company'}])
});
});
</script>

KciNicK
14 Jan 2008, 10:40 AM
i have the same issue as Zyclops (http://yui-ext.com/forum/member.php?u=8205), do someone has a solution?

Zyclops
26 Jan 2008, 1:51 PM
I'm still stuck on this one, and it's still broken in 2.0.1, so i've applied for a premium subscription and i'll promote it into those forums... once I get it :)

mdelmarter
27 Jan 2008, 5:35 PM
That would be great Zyclops - this is a very frustrating issue, especially considering it worked fine in Ext 1.0.

To clarify - I have a DIV that is set to a % height and width. The grid is assigned to the DIV and is set to autoWidth:true and autoHeight:true. In IE7 I never see a scrollbar. In Firefox 2 I am getting the vertical scrollbar, but not the horizontal. I have not tested in IE6 yet.

If I set the width and height of the Grid to absolute pixel size then the problem does not occur - both scrollbars appear as required.

Does this sound like the same problem?

Update: This is occurring in 2.0.1. As soon as I get a chance I will try and post an example page.

aconran
27 Jan 2008, 8:44 PM
After looking through this thread there seems to have been a multitude of different issues relating to grid's and sizing. If you are still having an issue with the latest 2.0.1 codebase please create a new thread. If you could include your specific circumstances as well as an example which illustrates the issue it would help us in getting the issues resolved as quickly as possible.

Thanks,

watrboy00
27 Jan 2008, 8:52 PM
Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}


I had the 10x issue in IE6 when I used autoWidth: true for a editorgrid panel within a tabpanel and changing the css fixed this issue.

Zyclops
28 Jan 2008, 3:57 PM
I had the 10x issue in IE6 when I used autoWidth: true for a editorgrid panel within a tabpanel and changing the css fixed this issue.
This causes a number of other issues such as column headings not lining up on larger tables etc. I'll do up a test case and open a new thread in the next few hours.

Zyclops
20 Feb 2008, 6:07 PM
I've continued this post in http://extjs.com/forum/showthread.php?p=126784#post126784

p4bl0
23 Aug 2008, 5:37 AM
Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}
to
.x-grid3-header-offset{padding-left:1px;width:10000px;#width:auto;_width:auto;}

--------------------------

width:10000px;/* apply to all browsers */
#width:auto;/* override for Microsoft Internet Explorer browsers*/
_width:auto;/* override for IE browsers 6.0 and older */

-------------------------------
i found this in http://geekswithblogs.net/mnf/archive/2008/02/13/declare-different-css-rules-for-firefox-and-internet-explorer-7.aspx

dingzhongxiang
19 Apr 2011, 2:12 AM
Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}

to
.x-grid3-header-offset{padding-left:1px;width:auto;}

it no use ,the ie6 were no problem, the IE8 width=10000 why?

extjs_bugmenot
24 May 2011, 5:32 AM
I've got the same problems.
Did you find how to resolve them?

jsakalos
24 May 2011, 11:13 PM
This thread is quite old referring to Ext 2.0. Are you still using this version?

Sriram Ramani
4 Nov 2011, 4:15 AM
I had the same issue, what i did was

Retrieved the parent element's width
subtracted some 35 (which suits my width)
set it to the width

var grid = new Ext.grid.GridPanel(
{
id : 'gridPane',
cm : cm,
store : store,
tools : tools,
title : gridTitle,
//autoWidth : true,
width : datagrid.getWindowWidth(),
. . . . .
. . . . .
. . . . .



Where getWindowWidth is

getWindowWidth:function(){
return window.parent.$('center').parentNode.style.width.split("p")[0] - 37;
}