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?

Solution

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    
    }]
}

Comments

[ramya sri]

Thanks for your reply. and sorry for responding late. Can I know why do we have to remove forceFit when flex is used?