ExtJS GridPanel宽度

我正在使用Ext JS 2.3.0并创建了如下所示的搜索对话框。ExtJS GridPanel宽度

enter image description here

搜索结果显示在一个单一的名称列的GridPanel，但是请注意，此列不拉伸，以填补所有可用的水平空间。但是，我执行搜索之后，列正确（即使没有返回结果）调整：

enter image description here

我怎样才能正确地使显示的列时，它最初显示？相关代码如下所示：

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

来源

2011-11-16 Dónal

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

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

来源

2011-11-16 18:34:35

这是你在前面的问题有同样的问题，该viewConfig是网格面板的配置项检查docs，所以它应该是

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

为了更精确的viewConfig接受Ext.grid.GridView CONFIGS ，随时阅读关于该文档的文档。

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

来源

2011-11-16 19:00:50 nscrob

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

来源

2011-11-17 17:21:03

ExtJS GridPanel宽度

回答

相关问题