PDA

View Full Version : Grid column locking leading to blank space with collapsing regions.



netemp
31 Oct 2011, 4:28 AM
I am not sure if I am doing something wrong or is this a bug in ExtJS 4.0.7.

I have a window with border layout having north and center regions.

The center region has a grid with column locking ability.

The problem is that when user locks a column from the header menu and then collapses the north region, then there is blank space created at the locked columns.

This blank space does not get created if the locking is not done from the header menu.

Below is the sample code (similar to my actual code) which I have created using the online examples of ExtJS.



function showGrid() {

// 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'],
['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']
];


// create the data store
var store = Ext.create('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'
}],
data: myData
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
region:'center',
store: store,
columnLines: true,
autoScroll:true,
columns: [{
text: 'Company Name',
locked: true,
width:250,
sortable: false,
dataIndex: 'company'
}, {
text: 'Price',
width: 150,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 150,
sortable: true,
dataIndex: 'change'
}, {
text: '% Change',
width: 150,
sortable: true,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 150,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
title: 'Locking Grid Column',
viewConfig: {
stripeRows: true
}
});


return grid;
}
Ext.onReady(function() {
var win = Ext.create('Ext.window.Window', {
title:'Locking test',
height:500,
width:800,
autoScroll:true,
layout:'border',
items: [
{
region: 'north',
collapsible: true,
title: 'North Region',
height: 200,
width:200,
html: 'Content of north region'
},
showGrid()
]
});
win.show();
});


Attached is an image and here is a video of the issue:

http://www.screencast.com/t/2nWtvBHsszXF (http://www.screencast.com/t/2nWtvBHsszXF)

Could anyone suggest something on this.

Thanks in advance.

28959

mitchellsimoens
31 Oct 2011, 7:38 AM
Tested in 4.1PR1 and that blank space is gone (other things aren't looking 100%). Looks like in 4.0.7 that the locked columns' height doesn't get adjusted. doLayout or doComponentLayout doesn't fix the situation. Wonder if reconfigure will fix it.

netemp
31 Oct 2011, 11:05 PM
Thanks for the post Mithcellsimoens.

Could you please elaborate that what are you referring to through -
Wonder if reconfigure will fix it.

I too tested this with 4.0.2a and found that this issue was not existing there, but creeped up in 4.0.7.

Hopefully 4.0.1 resolves all
(other things aren't looking 100%)

Thanks again for the time.

shakti2038
30 Nov 2011, 5:35 AM
I am also having similar issue, how to resolve this problem

whalethewise
1 Dec 2011, 1:50 PM
as well in FireFox for me locked part of the grid rows and unlocked part of the grid rows have different heights even when I enforce syncRowHeight: true