PDA

View Full Version : Is it possible got a grid without width in ie?



khatuido
22 Nov 2007, 3:44 AM
the sample :

function doGrid() {
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']
];
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: 'string'}
])
});
ds.loadData(myData);
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, 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, dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
layout : 'fit',
title:'Array Grid',
autoWidth : true,
viewConfig: {
forceFit: true
}
});
return(grid);
}
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
title : 'Tab Panel',
activeTab : 0,
autoWidth : true,
renderTo: 'mainPanel',
monitorResize: true,
items : [doGrid()],
height:200
});
});

In the body :

<div id="mainPanel" style="margin-left: 100px; margin-right: 100px; height: 300px;">
</div>

Result in firefox no worries :
http://www.zimagez.com/miniature/tab20.bmp (http://www.zimagez.com/zimage/tab20.php)

Result in internet explorer :
http://www.zimagez.com/miniature/tab11.bmp (http://www.zimagez.com/zimage/tab11.php)

I want the same result in firefox and in internet explorer. Is there any option for do it? Did i do something bad?

khatuido
22 Nov 2007, 7:14 AM
In fact i just want the grid stay inside the TabPanel without specify a width. But in internet explorer when i don't put width and put inside a TabPanel which doesn't got width too, the TabPanel is good size with the margin and the Grid is not good sized.

Someone can help me?

shenliu
22 Nov 2007, 6:23 PM
i have the same problem, plz help us!!!

khatuido
23 Nov 2007, 1:03 AM
I change the code like this :

var grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
title:'Array Grid',
autoWidth : false
});
return(grid);
}
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
title : 'Tab Panel',
activeTab : 0,
autoWidth : true,
renderTo: 'mainPanel',
monitorResize: true,
monitorWindowResize: true,
items : [doGrid()],
height:200
});
});

It looks same in FF and in ie little better except the title are disappear!

Exemple in internet explorer :
http://www.zimagez.com/miniature/tab30.bmp (http://www.zimagez.com/zimage/tab30.php)

The title appear if we mouseover them. Someone got a solution for it?

When we resize, if it's increase the size no worries but if it's decrease the size of the windows the grid didn't resize... Someone got a solution for this too?

khatuido
26 Nov 2007, 3:50 AM
Nobody can help me to success it?

devil1591
26 Nov 2007, 4:16 AM
I'm having the same problem here !
This example is from the API Documentation, I changed width to 'auto' and added autoWidth:true. The result on IE 7 is a very long horizontal scrollbar, and perfect on FF 2.


var grid = new Ext.grid.GridPanel({
renderTo: 'resultats',
store: new Ext.data.Store({
}),
columns: [
{id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
{header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 120, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
autoWidth:true,
width:'auto',
height:300,
frame:true,
title:'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls:'icon-grid'
});

tryanDLS
26 Nov 2007, 8:47 AM
I haven't played with this lately, so I don't have a complete answer, but autoWidth is NOT a valid config for a GridPanel.

hendricd
26 Nov 2007, 9:26 AM
Have you tried:

var grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
title:'Array Grid',
autoWidth : false,
viewConfig: {forceFit:true}
});
return(grid);

khatuido
27 Nov 2007, 1:16 AM
Have you tried:

var grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
title:'Array Grid',
viewConfig: {forceFit:true}
});
return(grid);



I tried with that and in ie6 it's done :

http://www.zimagez.com/miniature/tabforcefit.bmp (http://www.zimagez.com/zimage/tabforcefit.php)

So it's lil worst.

And me what i really want it's a grid with other things into a TabPane with size auto for the grid :

So the javascript must be almost :


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']
];
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: 'string'}
])
});
ds.loadData(myData);
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 1600, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, 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, dataIndex: 'lastChange'}
]);

// create the Grid
var grid = new Ext.grid.GridPanel({
renderTo: "container",
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
height:100
});

var tabPanel = new Ext.TabPanel({
title : 'Tab Panel',
activeTab : 0,
autoWidth : true,
renderTo: 'mainPanel',
monitorResize: true,
monitorWindowResize: true,
plain:true,
items : [
{contentEl:'tab1', title: 'Test tab'},
{contentEl:'tab2', title: 'Test tab2'}
],
height:200
});
});


In the body :

<div id="mainPanel" style="margin-left: 100px; margin-right: 100px; height: 300px;">
<div id="tab1" class="tab-pane" style="margin:20px">
<div id="container"></div>
Others things here.... like <input id="inputTest" type="text" />
</div>
<div id="tab2" class="tab-pane">
</div>
</div>

This works very well into FF :
http://www.zimagez.com/miniature/gridinsidetabpaneff.bmp (http://www.zimagez.com/zimage/gridinsidetabpaneff.php)

It's suck into IE :
http://www.zimagez.com/miniature/gridinsidetabpaneie.bmp (http://www.zimagez.com/zimage/gridinsidetabpaneie.php)

I don't know how to solve that. Is it a bug? or can i solve it with good parameters?

khatuido
27 Nov 2007, 5:57 AM
I haven't played with this lately, so I don't have a complete answer, but autoWidth is NOT a valid config for a GridPanel.

Oh sorry i didn't see this reply. Yes it's right no autowidth in GridPanel. but what can we do for got a width auto?


Humm i see this inside API


width : Number
The width of this component in pixels (defaults to auto).

So normaly without nothing, it must be width auto but why it doesn't work in internet explorer 6?

khatuido
28 Nov 2007, 8:16 AM
Nobody use a grid with width:auto into internet explorer 6?

khatuido
29 Nov 2007, 8:15 AM
please someone help me how got a grid with a width:auto and one column autoexpand?

neshaug
30 Nov 2007, 12:55 PM
add a comment on top of your html page <!-- IE 6.0 quirks mode -->

I think it solves it..

pghosh
30 Nov 2007, 3:38 PM
This works for me on IE7 & FF


grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
loadMask: true,
frame: true,
height: 300,
viewConfig: {
forceFit: true
},
bbar: new Ext.PagingToolbar({
pageSize: tablePageSize,
store: ds,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
var viewport = new Ext.Viewport({
layout:'fit',
items:[grid]
});

khatuido
3 Dec 2007, 1:50 AM
add a comment on top of your html page <!-- IE 6.0 quirks mode -->

I think it solves it..

Yes it solve the problem of title disapear.

But i still cannot do what i want. I guess there is a lot of bug in IE6 with grid and tabpanel.

If i use the hack for the doctype : <!-- IE 6.0 quirks mode -->

My example will looks like :
http://www.zimagez.com/miniature/bug112.jpg (http://www.zimagez.com/zimage/bug112.php)

I remember what i want is the result in FF with little bug just about the appear but not important (the scroll is little hiding) :
http://www.zimagez.com/miniature/bug211.jpg (http://www.zimagez.com/zimage/bug211.php)


So i guess the only solution is to add a width on the grid, we got what i want except for the resize part :
http://www.zimagez.com/miniature/gridwithwidth.jpg (http://www.zimagez.com/zimage/gridwithwidth.php)



pghosh> i tried ur example but it doesn't do what i wanted. Ur example make my grid take all the tabpanel but me i want put a grid with a margin and other element inside.

So i believe with this current version, we cannot get a grid without "width" and an "autoexpandcolumn" in ie6.

shenliu
4 Dec 2007, 5:04 AM
khatuido hava you solved the problem? how?

khatuido
5 Dec 2007, 12:24 AM
khatuido hava you solved the problem? how?
No i didn't solve my problem but i guess what we want do is not possible in ie6.

So we must put a width on the grid and forget the resize windows...

richardtallent
5 Dec 2007, 7:13 AM
I'm having the same problem.

GridPanels that are declared as an Item of some other component seem to work fine, its the ones that need to renderTo existing markup that refuse to contain themselves in IE6.

I can't use ExtJS and a Viewport to manage every page in my site, so this is rather frustrating. All I want is a grid to stay where I put it and take up the full width of its parent.

neshaug
5 Dec 2007, 3:51 PM
Wich layout are you using in that tabpanel khatudio?

richardtallent use layout "fit" on the parent container as pghosh said.

make a panel, set your width and height on it, decide wich layout suits the panel best, and add the grid.

or, make a gridpanel and set the height and width manual

check these threads:

http://extjs.com/forum/showthread.php?t=15530&page=4

http://extjs.com/forum/showthread.php?t=15508

hihumm
26 Dec 2007, 10:49 AM
Hi Everyone,
I had this problem too, and after not seeing a solution I liked (I also did not want to go to IE6 quirks mode), I traced the problem back to this style in the ext-all or grid.css stylesheet:

.x-grid3-header-offset {
padding-left:1px;
width:10000px; /* here's the problem style */
}

You just need to give IE6 a width of 1px for this selector, and everything will fall into place (or should, it did for me. )

dearsina
5 Feb 2008, 2:41 AM
Thanks, that did the trick! What is the best way of creating IE6-7 only style sheets? Is there a way of doing this in Ext?

Also, anybody tried to apply the width:1px to FF? what happens?

keypoint
11 Feb 2008, 4:34 AM
Thank you for the fix. In order to have an IE only stylesheet, throw this in your document's head:



<!--[if lte IE 6]> <link href="css/iestyles.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]> <link href="css/ie7styles.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->


This should give you a stylesheet for the old IEs and one for IE7. Delete the one you don't need.