Ext JS GridPanel autoHeight가 그룹 확장 축소를 위해 작동하지 않습니다.

Question

그룹 기능과 함께 gridPanel에서 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 구성은 그리드 (또는 모든 구성 요소)에서 지원되지 않습니다.

하지만이 동작은 분명히 버그이며 Ext JS 4.1에서 이미 수정되었습니다. 명시 적으로 그룹을 확장받을 때 일어날 레이아웃을 강제 할 수 4.0.7에서 해결 방법에 대한

는/붕괴 :

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