Ext JS GridPanel autoHeight无法用于组展开折叠 [英] Ext JS GridPanel autoHeight not working for group expand collapse

问题描述

将gridPanel上的autoHeight属性与分组功能一起使用时似乎存在缺陷.

There seems to be a defect when using the autoHeight property on the gridPanel along with the grouping feature.

当您将分组设置为startCollapsed时，网格的高度将设置为折叠行的高度(这是正确的)，但是当我扩展组时，网格的高度不会更新，因此新内容会被推送旧内容变成一个看不见的区域.

When you set the grouping to startCollapsed the height of the grid is set to the height of the collapsed rows (which is correct) but when I expand a group the height of the grid doesn't updated and hence the new content pushes old content into an invisible area.

您可以在sensha文档

You can replicate the issue easily on the sensha docs http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel by going to the Grouping section and pasting in the code below:

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

当我展开或折叠项目时，应该怎么做才能解决此问题并调整网格大小?

What should I do to work around this problem and have the grid resize when I expand or collapse an item?

推荐答案

首先，网格(或任何组件)不支持autoHeight配置.

First off, the autoHeight config is not supported by grid (or by any component).

但是这种行为显然是一个错误，并且在Ext JS 4.1中已经得到修复.

But the behavior is clearly a bug, and it's been already fixed in Ext JS 4.1.

对于4.0.7中的解决方法，您可以在组扩展/折叠时显式强制布局:

For a workaround in 4.0.7 you can explicitly force the layout to happen when groups get expanded/collapsed:

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

这篇关于Ext JS GridPanel autoHeight无法用于组展开折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！