expand Ext JS GridPanel column width

Question

I using Ext JS 2.3.0 and have a GridPanel that looks like this:

enter image description here

I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.

The relevant code is shown below:

    var colModel = new Ext.grid.ColumnModel([
        {
            id: 'name',
            header: locale['dialogSearch.column.name'],
            sortable: true,
            dataIndex: 'name'
        }
    ]);

    var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});

    this._searchResultsPanel = new Ext.grid.GridPanel({
        title: locale['dialogSearch.results.name'],
        height: 400,
        layout: 'fit',
        stripeRows: true,
        autoExpandColumn: 'name',
        store: this._searchResultsStore,
        view: new Ext.grid.GridView(),
        colModel: colModel,
        selModel: selModel,
        hidden: true,
        buttonAlign: 'center',
        buttons: [
            {
                text: locale["dialogSearch.button.add"],
                width: 50,
                handler: function () {
                }
            },
            {
                text: locale["dialogSearch.button.cancel"],
                width: 50,
                handler: function () {
                    entitySearchWindow.close();
                }
            }
        ]
    });

nscrob nscrob · Accepted Answer · 2011-11-16T12:19:41

You should use the forceFit config for the grid view:

this._searchResultsPanel = new Ext.grid.GridPanel({
        title: locale['dialogSearch.results.name'],
        height: 400,
        layout: 'fit',
        viewConfig: {
          forceFit: true
        }, ....

I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),

expand Ext JS GridPanel column width

3 Answers