PDA

View Full Version : In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering



minneyar
11 Mar 2011, 3:21 PM
Ext version tested:

Ext 3.3.1


Adapter used:

prototype


css used:

ext-all.css


Browser versions tested against:

Chromium 12.0.700.0
FF3.6.15 (firebug 1.6.2 installed)


Operating System:

Ubuntu Linux 10.10


Description:

If you have a GridPanel whose viewConfig contains "forceFit: true" and it has a column width "fixed: true", if you hide all of the columns but the one with the fixed with, when you then un-hide any other column, the grid rendering breaks horribly.


Test Case:

This example is based on the official Array Grid example. The code has been modified to show off this particular bug.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


<style type=text/css>
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}

/* style for the "buy" ActionColumn icon */
.x-action-col-cell img.buy-col {
height: 16px;
width: 16px;
background-image: url(../shared/icons/fam/accept.png);
}

/* style for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
height: 16px;
width: 16px;
background-image: url(../shared/icons/fam/error.png);
}

</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->

<script type="text/javascript">Ext.onReady(function(){
Ext.QuickTips.init();

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

// sample static data for the store
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'],
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
fixed: true,
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}]
}
],
stripeRows: true,
//autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid',
viewConfig: {
forceFit: true
}
});

// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<h1>Grid Example</h1>
<div id="grid-example"></div>
</body>
</html>


Steps to reproduce the problem:

Click on the menu for the "Company" column header.
Hide every column except the last one (which has no header text).
Show any other column.
At this point, the grid rendering should be obviously broken.
Not only is it broken now, but the broken state persists through the cookie that saves the grid state, and it will continue to be broken after the page is reloaded, until the cookie is removed.


The result that was expected:

The hidden columns should reappear and the grid should render normally.


The result that occurs instead:

The space between grid columns is far too large. After reloading the page, there is no space at all, and grid column contents all run together.


Screenshot or Video:

Attached; brokengrid1.jpg: The appearance of the grid after showing one of the previously hidden columns.
Attached; brokengrid2.jpg: The appearance of the grid after showing all columns and reloading the page.


Debugging already done:

none


Possible fix:

not provided

minneyar
11 Mar 2011, 3:23 PM
Oops, I forgot to attach the screenshots...

ramana_l_v
22 Aug 2011, 2:04 PM
I am facing similar problem, Is there a solution found for this ?

Thanks in advance...