PDA

View Full Version : [2.0a1] GridPanel in Accordion - FF ok, IE not ok



FuryVII
16 Oct 2007, 5:09 AM
This is a repost in this forum based on jsakalos suggestion to place it in the bugs forum.

Scrollbars do not show up and forceFit does not work as expected IE 6, while it works fine in FF 2.

The code is pretty much a rip of the example to see how things work. Here it is.



<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

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

var xg = Ext.grid;

// shared reader
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 viewport = new Ext.Viewport({
layout:'border',
items:[
{
region:'east',
title: 'Context',
collapsible: true,
split:true,
width: 150,
minSize: 150,
maxSize: 300,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tabe',
autoScroll:true
},{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
}]
})
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 150,
minSize: 150,
maxSize: 900,
collapsible: false,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:false
},
items: [
new Ext.grid.GridPanel({
autoScroll:true,
ds: new Ext.data.GroupingStore({
reader: reader,
data: Ext.grid.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'price'
}),

columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
title: 'My'
}), {
title: 'My',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'My',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
}
]
},{
region:'center',
title: 'Context',
collapsible: false,
split:true,
layout:'fit',
margins:'0 0 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel </p>',
title: 'Search',
autoScroll:true
},{
html:'<p>A TabPanel. asd </p>',
title: 'Browse',
autoScroll:true
}]
})
}
]
});


});
</script>
</head>
<body>
</body>
</html>

And an image.

jsakalos
18 Oct 2007, 5:45 PM
Thank you for posting. We will investigate it and we will let you know the result.

jack.slocum
20 Oct 2007, 7:31 AM
Try removing this value from the grid:

autoScroll:true,

That is an inherited config from Panel, saying you want the Panel body to scroll. What I think you want is the grid's built in GridView scrolling instead. Both of them together could be the source of issues in IE6.