Entire Ext JS grid needs to resize to fit contents

Question

The requirements are, the contents of the grid should never be truncated at all. The whole grid should be sized to meet the width of the data, possibly requiring a horizontal scroll bar on the window.

Is this possible?

Ext JS 4.2

Answer 1

This was my final solution:

Ext.define('App.view.patient.MyPanel', {
    autoScroll : true,
    columnLines : true,
    extend : 'App.grid.Panel',
    width : 500,
    height : 500,
    store : 'App.store.MyPanel',

    initComponent : function() {

        // [...]

        // After store data is loaded, resize columns to fit contents
        var store = Ext.data.StoreManager.lookup(me.store);
        store.on('load', function(store, records, options) {
            Ext.each(me.columns, function(column) {

                // Resize to contents and get new width
                column.autoSize();
                var width = column.getWidth();

                // The autoSize doesn't take config option "columnLines: true"
                // into consideration so buffer it. Bug described here:
                // http://www.sencha.com/forum/showthread.php?264068
                width = width + 3;

                // No need to go too crazy
                width = Math.min(width, 400);

                column.setWidth(width);
            });
        });

        me.callParent(arguments);
    }
});