PDA

View Full Version : Animated collapsed grid displayed outside of tab (Firefox-only)



dragontree
29 Jun 2007, 5:52 AM
When the west panel which contains a grid (animate: true) is collapsed/expanded, the grid is shown outside the grid/tab area during the transition from being hidden to visible (or vice-versa). The image attached illustrates this bug.

In my Windows environment, this only occurs in Firefox 2.0.0.4, but not Safari 3.0.2 or IE 6.0.

Any suggestions?

Thanks.

The code is quite long, so I'll include only the relevant sections:


var tabs = new Ext.TabPanel('tabs1');
var commentTab = tabs.addTab('comments', 'Reviews (0)');
var recommendationTab = tabs.addTab('recommendation', 'Recommendations (0)');
var watchlistTab = tabs.addTab('watchlist', 'Bookmarks (0) ');
var nearbyTab = tabs.addTab('nearby', 'Map of Nearby Restaurants (0)');
tabs.activate(3);

var layout = new Ext.BorderLayout( document.getElementById('nearbytab-borderlayout'), {
west: {
split:true,
initialSize: 320,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 320,
animate: true
},
center: {
autoScroll: false
}
});

layout.beginUpdate();
layout.add('west', new Ext.ContentPanel( 'grid-nearby', {title: 'Details', fitToFrame: true, closable: false } ) );
layout.add('center', new Ext.ContentPanel( 'grid-nearby-map', { autoScroll: false } ) );
layout.endUpdate();

nearbyDs = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(nearbyData),
reader: new Ext.data.ArrayReader({}, [
{name: 'restaurant_id', type: 'int'},
{name: 'restaurant_name'},
{name: 'address'},
{name: 'city'},
{name: 'province'},
{name: 'postal_code'},
{name: 'telephone'},
{name: 'restaurant_name'},
{name: 'average_rating', type: 'int'},
{name: 'latitude', type: 'float'},
{name: 'longitude', type: 'float'},
{name: 'distance', type: 'float'}
])
});

nearbyDs.load();

nearbyTab.setText("Map of Nearby Restaurants (" + nearbyDs.getTotalCount() + ")");
var nearbyCm = new Ext.grid.ColumnModel([{
id:'restaurant_name',
header: "Restaurant",
width: 160,
resizable: false,
sortable: true,
dataIndex: 'restaurant_name',
renderer: renderNearbyRestaurant,
css: 'white-space:normal;'
},{
header: "Average Rating",
width: 90,
resizable: false,
sortable: true,
dataIndex: 'average_rating',
renderer: renderRating
},{
header: "Distance",
width: 65,
resizable: false,
sortable: true,
dataIndex: 'distance',
renderer: renderDistance
}]);

var nearbyGrid = new Ext.grid.Grid('grid-nearby', {
ds: nearbyDs,
cm: nearbyCm,
enableColLock: false,
loadMask: true,
autoExpandColumn: 'restaurant_name'
});

nearbyGrid.getSelectionModel().lock();
nearbyGrid.render();

dragontree
9 Jul 2007, 8:02 AM
There was no response to my intial question:

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

...so here's a live example of the issue:

http://www.hungrytable.com/restaurant2.php?id=1&t=3

If you click on the collapse button you'll see that the grid is displayed outside the tab when it's being animated. This only occurs in Firefox 2+ and does not happen in Internet Explorer 6+ or Safari 3+ for Windows.

Any suggestions?

Version: ExtJS 1.1 beta2

tryanDLS
9 Jul 2007, 8:12 AM
Can you upgrade to beta2 and retry this please.

dragontree
9 Jul 2007, 9:41 AM
Can you upgrade to beta2 and retry this please.

The test case is with 1.1 beta2 and I installed it again, but same result. :(

mystix
9 Jul 2007, 9:51 AM
merged original thread.

mystix
9 Jul 2007, 9:52 AM
could you try a simplified test case with just a grid in a sliding west panel + a center panel?

[edit]
just tried it on both IE7 and Opera 9.21 and they're both fine too.

dragontree
9 Jul 2007, 10:09 AM
could you try a simplified test case with just a grid in a sliding west panel + a center panel?

[edit]
just tried it on both IE7 and Opera 9.21 and they're both fine too.

Thanks for your quick response. Here's a quick-and-dirty testcase:

http://www.hungrytable.com/test.php

In Firefox, you should see that the grid is displayed outside the container when it's collapsing...

jack.slocum
9 Jul 2007, 12:23 PM
Grids use absolute positioned elements and are not compatible with animated collapsing. This has been address for 2.0, but the only workaround in 1.x is to turn off animations for a panel with a grid.

dragontree
10 Jul 2007, 7:24 AM
Grids use absolute positioned elements and are not compatible with animated collapsing. This has been address for 2.0, but the only workaround in 1.x is to turn off animations for a panel with a grid.

I've set animate to false, but the same behaviour occurs when the west panel is collapsed and I click on the bar to temporarily show the panel:

http://www.hungrytable.com/test.php

Any suggestions?

mystix
10 Jul 2007, 9:19 AM
for reference, i've reduced your test case to the following drop-in example and it still occurs:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
Hungry Table | Ottawa Restaurant Reviews
</title>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">

<style>
.grid {
background: #ffffff;
border:1px solid #99bbe8;
overflow: hidden;
width: 680px;
height: 375px;
}
</style>

<script type="text/javascript">
var cuisineData = [
['Aboriginal','68','1'],
['African','2','3'],
['American','3','5'],
['American Bistro','69','1'],
['Asian','4','1'],
['Bakery','5','3'],
['Bar and Grill','62','22'],
['Belgian','7','1'],
['Breakfast','64','11'],
['Brunch','70','1'],
['Cajun','8','2']
];

Ext.onReady(function(){
var layout = new Ext.BorderLayout('nearbytab-borderlayout', {
west: {
split:true,
initialSize: 320,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 320,
animate: false
},
center: {
autoScroll: false
}
});

layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('grid-cuisine', {
title: 'Details',
fitToFrame: true,
closable: false
}));
layout.add('center', new Ext.ContentPanel('grid-cuisine-map', {
autoScroll: false
}));
layout.endUpdate();

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(cuisineData),
reader: new Ext.data.ArrayReader({}, [
{name: 'cuisine_name'},
{name: 'cuisine_id', type: 'int'},
{name: 'restaurant_count', type: 'int'}
])
});

ds.load();

var cm = new Ext.grid.ColumnModel([{
id:'cuisine_name',
header: "Cuisine",
width: 160,
sortable: true,
locked:false,
dataIndex: 'cuisine_name',
renderer: renderCuisine,
resizable: false
},{
header: "Number of Restaurants",
width: 150,
sortable: true,
dataIndex: 'restaurant_count',
resizable: false
}]);

var cuisineGrid = new Ext.grid.Grid('grid-cuisine', {
ds: ds,
cm: cm,
enableColLock:false,
loadMask: true,
autoExpandColumn: 'cuisine_name',
enableColumnMove: false
});

cuisineGrid.getSelectionModel().lock();
cuisineGrid.render();

function renderCuisine(value, p, record){
return String.format(
'<a href="restaurant_list.php?cuisine_id={1}">{0}<\/a>',
value,
record.data['cuisine_id']
);
}
});
</script>
</head>
<body>
<center>
<div class="grid" id="nearbytab-borderlayout">
<div id="grid-cuisine" style="height: 375px;"></div>
<div id="grid-cuisine-map" style="height: 375px;"></div>
</div>
</center>
</body>
</html> tested in Ext 1.1-rc1
(for anyone else who wants to give this a shot. unfortunately, i'm out of time and i need sleep I-|)