Ext JS GridPanel autoHeight 不适用于组展开折叠

Posted

技术标签:

【中文标题】Ext JS GridPanel autoHeight 不适用于组展开折叠【英文标题】:Ext JS GridPanel autoHeight not working for group expand collapse 【发布时间】:2012-03-16 01:36:09 【问题描述】:

在使用 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()
);

我应该如何解决这个问题并在展开或折叠项目时调整网格大小?

【问题讨论】:

【参考方案1】:

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

但这种行为显然是一个错误,并且已经在 Ext JS 4.1 中修复。

对于 4.0.7 中的解决方法,您可以明确强制布局在组展开/折叠时发生:

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

【讨论】:

以上是关于Ext JS GridPanel autoHeight 不适用于组展开折叠的主要内容,如果未能解决你的问题,请参考以下文章

如何:在 Ext JS4 中自动调整 GridPanel 列宽 + 读取网格中的所有列值

ext js 传入行号后grid自动选中

Ext.Net学习笔记17:Ext.Net GridPanel Selection

Ext GridPanel

为啥 Ext.grid.GridPanel 很慢?

Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法