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寬度

回答

相關問題