ExtJS GridPanel ширина

Question

Я использую Ext JS 2.3.0 и создал диалоговое окно поиска, показанное ниже.

Результаты поиска отображаются в GridPanel с одним столбцом имени,но обратите внимание, что этот столбец не растягивается, чтобы заполнить все доступное горизонтальное пространство.Однако после выполнения поиска размер столбца изменяется должным образом (даже если результаты не возвращаются):

Как правильно настроить отображение столбца при его первоначальном отображении?Соответствующий код показан ниже:

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

Answer 1

Это та же проблема, что и у вас в предыдущем вопросе, viewConfig - это элемент конфигурации для панели сетки, проверьте документы , поэтому он должен быть

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

Чтобы быть более точным, viewConfig принимает конфиги Ext.grid.GridView, не стесняйтесь читать также и документы.

В противном случае это кажется единственной проблемой, и я ссылаюсь на ширину столбца, а не на ширину панели сетки. На сетке у вас есть заголовок и две кнопки, которые, кажется, не затрагиваются. Поэтому я повторяю, что ширина gridPanel в порядке, это проблема ширины столбцов.

Answer 2

Попробуйте удалить autoWidth из конфигурации GridPanel, поскольку настройка autoWidth:true означает, что браузер будет управлять шириной на основе содержимого элемента, а Ext вообще не будет управлять этим.

Кроме того, вы можете попытаться вызвать .doLayout(false, true) в вашей сетке после того, как она была обработана.

Answer 3

Попробуйте добавить flex: 1 к вашей GridPanel