Ext-JS GridPanel行数に基づいた動的な高さ

Question

私はExt-JS GridPanelで動作するジレンマに直面しています。そのストアをロードするために使用されるデータは動的なので、必要な行の数はあらかじめわかりませんグリッドに表示されます。

グリッドの高さには苦労しています。autoHeightをtrueに設定しようとしましたが、グリッドは最初の行のみを表示し、残りの部分は隠しています。明示的に高さを設定すると、行の数が高さで指定された領域を満たさない場合は、グリッドに空白が表示されます。

理想的には、すべての行を表示するためにグリッドを垂直方向に拡大/縮小する必要があります。 グリッドの高さをダイナミックにする方法はありますか？

グリッドがレンダリングされるまで待つことができます。行数を取得し、それに基づいてグリッドの高さを再計算しますが、ハッキーのように見えます。

これは、参考のために私のコードです：助けを

var store = new Ext.data.ArrayStore({fields:[{name: 'sign_up_date'}, {name: 'business_name'}, {name: 'owner_name'}, {name: 'status'}]}); 
// buildResultsArray is a method that returns arrays of varying lengths based on some business logic. The arrays can contain no elements or up to 15 
store.loadData(buildResultsArray()); 
var resultsGrid = new Ext.grid.GridPanel({ 
    store: store, 
    columns: [ 
     {id: "sign_up_date", header: "Sign Up Date", dataIndex: "sign_up_date", width: 70}, 
     {id: "business_name", header: "Business Name", dataIndex: "business_name", width: 100}, 
     {id: "owner_name",header: "Owner Name", dataIndex: "owner_name", width: 100}, 
     {id: "status", header: "Sign Up Status", dataIndex: "status", width: 70} 
    ], 
    stripeRows: true, 
    columnLines: true, 
    enableColumnHide: false, 
    enableColumnMove: false, 
    enableHdMenu: false, 
    id: "results_grid", 
    renderTo: "results_grid_div", 
    //height: 300, 
    autoHeight: true, 
    selModel: new Ext.grid.RowSelectionModel({singleSelect: false}) 
}); 

感謝。

Answer 1

はExtJSの3で、それは、アウト・オブ・ボックス機能していないが、それは、GridViewコントロールを拡張することで実装するのは簡単です：

AutoGridView = Ext.extend(
    Ext.grid.GridView, 
    { 
     fixOverflow: function() { 
      if (this.grid.autoHeight === true || this.autoHeight === true){ 
       Ext.get(this.innerHd).setStyle("float", "none"); 
       this.scroller.setStyle("overflow-x", this.scroller.getWidth() < this.mainBody.getWidth() ? "scroll" : "auto"); 
      } 
     }, 
     layout: function() { 
      AutoGridView.superclass.layout.call(this); 
      this.fixOverflow(); 
     }, 
     render: function(){ 
      AutoGridView.superclass.render.apply(this, arguments); 

      this.scroller.on('resize', this.fixOverflow, this); 

      if (this.grid.autoHeight === true || this.autoHeight === true){ 
       this.grid.getStore().on('datachanged', function(){ 
        if (this.ownerCt) { this.ownerCt.doLayout(); } 
       }, this.grid, { delay: 10 }); 
      } 
     } 
    } 
); 

使用法：

new Ext.grid.GridPanel({ 
    autoHeight: true, 
    view: new AutoGridView() 
});