Auto-Fitting the Ext Grid to it's Layout Container

After several days of wrestling with the trying to make the Ext grid component auto-fit to its container in a Ext layout, I finally have had success.

In order to do this you must add a Ext.GridPanel to the layout: 



layout.add('center', new Ext.GridPanel(grid, {title: 'Grid', closable: false, fitContainer: true}));

This information was ready available on the ExtJs.com forums, however, as far as I could find, it ended there. After doing this, the grid still did not resize the columns, only the header bar.
I finally found the autoExpandColumn and fitContainer properties of the grid. After setting these, the grid automatically resizes to fit its container. Hind sight it the reason is obvious: without knowing what to expand on the grid, what would it do? 

1
2
3
4
5
6
7

grid = new Ext.grid.EditorGrid('transaction_grid', {
                        ds: ds,
                        cm: cm,
                        selModel: sm,
                        autoExpandColumn: 2,
                        fitContainer: true
                        });

It seems easy now, but it took me a long time to figure this out. Hope it helps someone else.

Posted by cjharrelson Filed in development Tagged with ui 
Comments closed