View Full Version : [CLOSED][3.0.0] AutoExpandColumn Fix

11 Aug 2009, 3:54 PM
If autoexpand is used and width is left undefined for that column bad things happen.
Adding || 0 makes it happy.

getColumnWidth :function(col){

11 Aug 2009, 3:59 PM
Please post a short test case, see: http://extjs.com/forum/showthread.php?t=71015


11 Aug 2009, 4:28 PM
I am time limited. My application makes use of a grid that builds its headers off of meta json data, and 1 field is autoExpanded. In short the above function returns NaN to getTotalWidth which is then used by autoExpand.

getTotalWidth :function(includeHidden){


this.totalWidth =0;

for(var i =0, len =this.config.length; i < len; i++){

if(includeHidden ||!this.isHidden(i)){

this.totalWidth +=this.getColumnWidth(i); //this will be NaN





autoExpand :function(preventUpdate){

var g =this.grid, cm =this.cm;

if(!this.userResized && g.autoExpandColumn){

var tw = cm.getTotalWidth(false); //this will be NaN

var aw =this.grid.getGridEl().getWidth(true)-this.scrollOffset;

if(tw != aw){

var ci = cm.getIndexById(g.autoExpandColumn);

var currentWidth = cm.getColumnWidth(ci);

var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax);

if(cw != currentWidth){

cm.setColumnWidth(ci, cw,true);

if(preventUpdate !==true){

this.updateColumnWidth(ci, cw);





I don't have anymore time to spend on this. Sorry. If you want to give me a year of svn access so I can get updates, I will be happy to spend more time :)

11 Aug 2009, 4:34 PM
I don't think that's correct, which is why we ask you to provide test cases.

For example:

* Ext JS Library 3.0+
* Copyright(c) 2006-2009, Ext JS, LLC.
* [email protected]
* http://extjs.com/license


// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
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'],
['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 = 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

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', 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'}
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'

// render the grid to the specified div in the page

Company has no width specified, but is used as the auto expand column. This causes no problems.

11 Aug 2009, 4:49 PM
Yes, I tried that too...which is why I was unable to come up with a quick example in a short amount of time. I guess you would have to define the grid with an empty columnModel({}). Then use metaData in the data sample to generate the columnModel after the grid has been renderred. That is essentially what my version of autogrid does. My real intention is to benefit other metagrid autogrid type users.

11 Aug 2009, 4:54 PM
Since it's not reproducible with a simple test case I'm going to mark this as INFOREQ, perhaps you'll get some time later to build a test case.

29 Aug 2009, 5:32 AM
There has been no update to this thread in some time, updating status of this thread to CLOSED. Please post information requested to reopen.