PDA

View Full Version : Extjs4.1 Grid column misalignment with scroll bar



renganathan
21 Aug 2012, 6:26 AM
Hi All,

i am facing alignment problem in extjs grid column when i try to adjust the length of the column.

When scroll bar is not there in the grid, this issue never happened.

The problem is when scroll bar is there in the grid

i have shared my code


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);

// Define Company entity
// Null out built in convert functions for performance *because the raw data is known to be valid*
// Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float', convert: null, defaultValue: undefined},
{name: 'change', type: 'float', convert: null, defaultValue: undefined},
{name: 'pctChange', type: 'float', convert: null, defaultValue: undefined},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia', defaultValue: undefined}
],
idProperty: 'company'
});

Ext.onReady(function() {
Ext.QuickTips.init();

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('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'],
['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']
];

/**
* 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 = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
sortable : false,
dataIndex: 'company',
width : 250
},
{
text : 'Price',
sortable : true,
dataIndex: 'price',
width : 250
},
{
text : 'Change',
sortable : true,
dataIndex: 'change',
width : 250
},
{
text : '% Change',
sortable : true,
dataIndex: 'pctChange',
width : 250
},
{
text : 'Company',
sortable : false,
dataIndex: 'company',
width : 250
},
{
text : 'Price',
sortable : true,
dataIndex: 'price',
width : 250
},
{
text : 'Change',
sortable : true,
dataIndex: 'change',
width : 250
},
{
text : '% Change',
sortable : true,
dataIndex: 'pctChange',
width : 250
}
],
height: 350,
width:'100%',
autoWidth:true,
columnLines:true,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
});



See the alignment problem in the following image

38120

scottmartin
21 Aug 2012, 10:10 AM
Is this with 4.1.1 GA?

Scott.

renganathan
21 Aug 2012, 8:21 PM
Yes it is 4.1.1 version .

I am not sure about GA



Is this with 4.1.1 GA?

Scott.

renganathan
22 Aug 2012, 6:51 AM
Hi Scott,

Is this a ExtJs Bug? or problem in our code.

Please help us to solve this problem

scottmartin
22 Aug 2012, 7:14 AM
I am unable to duplicate this error. (tested with 4.1.1)

-resized all columns, then scrolled
-scrolled, then resized columns.
-variations ...

see if this works ok: (resizes with browser)




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

Company = Ext.extend(Ext.data.Model, {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
idProperty: 'company'
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: Company,
data: myData
});

Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
store: store,
multiSelect: true,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
title: 'Array Grid',
renderTo: 'gridDiv',
viewConfig: {
stripeRows: true
}
});

// track browser resize
Ext.EventManager.onWindowResize(grid.doLayout, grid);
});


Scott.

renganathan
23 Aug 2012, 6:52 AM
Hi Scott,

Still i am facing the same problem.

can you share the code which doesn't have this problem?

I will leverage that code to fix this issue

scottmartin
23 Aug 2012, 7:35 AM
You can update the example I have listed above.

Scott.

renganathan
27 Aug 2012, 8:02 AM
Hi Scott,

Thanks for your solution.

Now this problem is fixed after migrating Extjs 4.1.1 GPL