Ext JS GridPanel autoHeightがグループエキスパンドコラプスで機能しない

Question

groupPanelでautoHeightプロパティをグループ化機能とともに使用すると、問題が発生しているようです。

グループをstartCollapsedに設定すると、グリッドの高さは折りたたまれた行の高さに設定されます（これは正しい）が、グループを展開するとグリッドの高さが更新されないため、新しいコンテンツ古いコンテンツを目に見えない領域にプッシュします。

あなたは以下のコードでグループ化セクションと貼り付けに行くことによってsenshaドキュメントhttp://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panelに簡単に問題を複製することができます。

var store = Ext.create('Ext.data.Store', { 
    storeId:'employeeStore', 
    fields:['name', 'senority', 'department'], 
    groupField: 'department', 
    data: {'employees':[ 
     { "name": "Michael Scott", "senority": 7, "department": "Manangement" }, 
     { "name": "Dwight Schrute", "senority": 2, "department": "Sales" }, 
     { "name": "Jim Halpert", "senority": 3, "department": "Sales" }, 
     { "name": "Kevin Malone", "senority": 4, "department": "Accounting" }, 
     { "name": "Angela Martin", "senority": 5, "department": "Accounting" } 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'employees' 
     } 
    } 
}); 

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{ 
     startCollapsed: true 
    }); 

Ext.create('Ext.grid.Panel', { 
    title: 'Employees', 
    store: Ext.data.StoreManager.lookup('employeeStore'), 
    columns: [ 
     { header: 'Name',  dataIndex: 'name' }, 
     { header: 'Senority', dataIndex: 'senority' } 
    ], 
    features: [groupingFeature], 
    width: 200, 
    autoHeight: true, 
    renderTo: Ext.getBody() 
}); 

私はこの問題を回避し、グリッドを持って何をすべき時にサイズを変更アイテムを展開または折りたたんでいますか？

Answer 1

まず、autoHeight configはグリッド（または任意のコンポーネント）でサポートされていません。

しかし、この動作は明らかにバグであり、既にExt JS 4.1で修正されています。あなたが明示的にグループが展開取得するときに発生するレイアウトを強制することができます4.0.7でこの問題を回避するために

は/崩壊：

grid.getView().on({ 
    "groupexpand": function() { 
     grid.doLayout(); 
    }, 
    "groupcollapse": function() { 
     grid.doLayout(); 
    } 
});