[Ext JS]5.8 Group Grid-分组网格

oscar999

于 2021-05-17 07:09:25 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext JS开发大全文章标签： Ext JS 分组网格 Group Grid

本文链接：https://blog.csdn.net/oscar999/article/details/116908156

Ext JS开发大全专栏收录该内容

190 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文详细介绍了如何在Ext JS中实现分组网格，包括分组网格的效果、实现方式、分组栏的自定义显示以及如何更改分组属性。通过配置Grid的features和Store的groupField来实现分组，同时可以使用groupHeaderTpl定制分组栏显示。此外，还展示了动态修改分组属性的方法，并提供在线示例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分组网格及其效果

分组Grid，是以数据中的某一个属性对数据进行分组，以上图为例，对三国的武将列表以国家进行分组。
分组Grid的效果是：

每个分组会新增一行组的显示
该分组的属性一般不需要以列进行显示

分组网格的实现

Ext JS 原生就提供了分组网格的实现，实现方式是通过Grid的features 进行配置。以上面的示例效果为例，代码片段如下：

        xtype:'grid',
        columns: [{text: '武将名',dataIndex: 'name',flex:1},
                  {text: '等级',dataIndex: 'rank',flex:1}],
        store:Ext.create('Ext.data.Store', {
            fields: ['name', 'rank', 'country'],