CODEWITHSUNDEEP
javascriptextjs
Dónal
Dónal

Reputation: 187499

expand Ext JS GridPanel column width

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();
                }
            }
        ]
    });

Upvotes: 2

Views: 1993

Answers (3)

user2555515
user2555515

Reputation: 1029

Add 

    flex: 1,

to one of the the columns config

Upvotes: 0

nscrob
nscrob

Reputation: 4483

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(),

Upvotes: 2

Stefan Gehrig
Stefan Gehrig

Reputation: 83622

The problem is not the column but the grid itself which does not stretch to fill the window body completely.

Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.

Upvotes: 0

Related Questions