ExtJS GridPanel 宽度

Posted 2023-02-26

【中文标题】ExtJS GridPanel 宽度

【英文标题】：ExtJS GridPanel width

【发布时间】：2011-11-16 17:39:04

【问题描述】：

我正在使用 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);
    
);

【参考方案1】：

这与您在之前的问题中遇到的问题相同，viewConfig 是网格面板检查 docs 的配置项，所以应该是

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

更准确地说，viewConfig 接受 Ext.grid.GridView 配置，也可以随意阅读有关该配置的文档。

否则这似乎是唯一的问题，我指的是列宽，而不是网格面板宽度。在网格面板上，您有一个标题和两个似乎没有受到影响的按钮。所以我重复gridPanel的宽度是好的，这是列宽问题。

【参考方案2】：

尝试从GridPanel配置中删除autoWidth，因为设置autoWidth:true意味着浏览器将根据元素的内容管理宽度，而Ext根本不会管理它。

此外，您可以尝试在网格渲染后调用.doLayout(false, true)。

【参考方案3】：

尝试将flex: 1 添加到您的GridPanel