How to fit the columns in a grid automatically in extjs?

Question

we have a grid with 6 columns. One column requires more width compae to others. We have to ahow all the columns in that grid without any horizontal scroll bar.

The code we tried for this is:

{
    xtype: 'grid',

    viewConfig: {    
        forceFit: true,    
    }

    columns: [{    
        header: 'column1'    
    }, {    
        header: 'column2'    
    },
    //...
    {    
        header: 'column6',    
        flex: 2    
    }]
}

The above code worked fine in IE8. But in IE9 and Google Chrome, the 6th column content is not displayed.

Could anyone please suggest how to solve it?

Answer 1

Remove the forceFit, you can just flex multiple columns, you can use flex 2 vs 1 on the column you want a bit wider.

{
    xtype: 'grid',

    columns: [{    
        header: 'column1',
        flex: 1   
    }, {    
        header: 'column2',
        flex: 1   
    },
    //...
    {    
        header: 'column6',    
        flex: 2    
    }]
}