CODEWITHSUNDEEP
javascriptextjs
Dónal
Dónal

Reputation: 187399

ExtJS GridPanel width

I'm using Ext JS 2.3.0 and have created the search dialog shown below.

enter image description here

The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):

enter image description here

How can I make the column display correctly when it's shown initially? The relevant code is shown below:

FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {

    constructor: function() {

        var queryTextField = new Ext.form.TextField({
            hideLabel: true,
            width: 275,
            colspan: 2,
        });
        var self = this;

        // the search query panel
        var entitySearchForm = new Ext.form.FormPanel({
            width: '100%',
            frame: true,
            layout:'table',
            layoutConfig: {columns: 3},
            items: [
                queryTextField,
                {
                    xtype: 'button',
                    text: locale["dialogSearch.button.search"],
                    handler: function() {
                        var queryString = queryTextField.getValue();
                        self._doSearch(queryString);
                    }
                }
            ]
        });

        // the search results model and view
        this._searchResultsStore = new Ext.data.SimpleStore({
            data: [],
            fields: ['name']
        });

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

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

        this._searchResultsPanel = new Ext.grid.GridPanel({
            title: locale['dialogSearch.results.name'],
            height: 400,
            stripeRows: true,
            autoWidth: true,
            autoExpandColumn: 'name',
            store: this._searchResultsStore,

            colModel: colModel,
            selModel: selectionModel,
            hidden: false,
            buttonAlign: 'center',
            buttons: [
                {
                    text: locale["dialogSearch.button.add"],
                    handler: function () {
                        entitySearchWindow.close();
                    }
                },
                {
                    text: locale["dialogSearch.button.cancel"],
                    handler: function () {
                        entitySearchWindow.close();
                    }
                }
            ]
        });

        // a modal window that contains both the search query and results panels
        var entitySearchWindow = new Ext.Window({
            closable: true,
            resizable: false,
            draggable: true,
            modal: true,
            viewConfig: {
                forceFit: true
            },
            title: locale['dialogSearch.title'],
            items: [entitySearchForm, this._searchResultsPanel]
        });

        entitySearchWindow.show();
    },

    /**
     * Search for an entity that matches the query and update the results panel with a list of matches
     * @param queryString
     */
    _doSearch: function(queryString) {

        def dummyResults = [['foo'], ['bar'], ['baz']];       
        self._searchResultsStore.loadData(dummyResults, false);
    }
});

Upvotes: 0

Views: 6004

Answers (3)

Andrey Selitsky
Andrey Selitsky

Reputation: 2604

Try to add flex: 1 to your GridPanel

Upvotes: 0

Pavel Podlipensky
Pavel Podlipensky

Reputation: 8269

Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.

In addition you can try to call .doLayout(false, true) on your grid after it was rendered.

Upvotes: 1

nscrob
nscrob

Reputation: 4493

It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be 

this._searchResultsPanel = new Ext.grid.GridPanel({
  viewConfig: {
            forceFit: true
        },
  ....other configs you need,

To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.

Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.

Upvotes: 1

Related Questions