如何将 EXTJS 4.2.1 网格行按多个关系分组？

Posted 2023-02-26

【中文标题】如何将 EXTJS 4.2.1 网格行按多个关系分组？

【英文标题】：How to group EXTJS 4.2.1 grid rows by a has many relationship?

【发布时间】：2017-03-28 17:17:17

【问题描述】：

我想知道是否可以通过商店的 hasMany 元素中设置的列对 extjs 网格进行分组。我的示例不够彻底，无法重新创建任何内容，但我只是在寻找“是”，这是一个示例，或者“否”。谢谢！

我设置了一个 extjs 商店，用于填充图书馆书籍的 UI。 bookStore 中有一个 hasMany 关系，它指向一个模型，表示每次借出图书。这个 hasMany 模型绑定到 Book 的 UI 中的网格面板，显示结帐列表。

我想对网格面板的行进行分组，图书馆成员借以签出这本书（比如 3 个用户每人签出两次，目前我有 6 行包含 memberName 和 checkoutDate。我想按 memberName 对这些行进行分组，每个显示三个标题它们下面有两行显示 checkoutDate）。

无论我尝试哪种配置，甚至是自定义 groupFields，以及从商店引用“子”对象的不同方式（例如 ExtJS 6 grid group by associated models)

这大致是模型的样子，只是为了帮助澄清我的解释。我知道这在语法上可能并不完全正确，但我只是想知道我的目标是否可行以及我可以采取哪些方法。

Ext.define('Book.model.BookModel', 
    extend : 'Ext.data.Model',
    alias  : 'model.BookModel',
    fields : [
        name: 'Title',
        type: 'String'
    ],
    hasMany:[
        name: 'checkouts',
        model: 'Book.model.Checkouts'
    ]
);

Ext.define('Book.model.Checkouts', 
    extend : 'Ext.data.Model',
    alias  : 'model.Checkouts',
    fields: [
        name: 'Name',
        type: 'string'
    ,
        name: 'checkoutDate',
        type: 'date'
    ],
    associations : [
        model: 'Book.store.BookStore',
        type : 'belongsTo', 
        name: 'bookStore'
    ]
);

Ext.define('Book.store.BookStore', 
extend: 'Ext.data.Store',
model : 'Book.model.BookModel',
groupField: '????',
//etc.
);

我尝试过的配置：

--店内：

groupField: 'Checkouts.Name',

groupField: 'checkouts.Name',

--在网格配置中：

groupers: [ftype:'grouping'],
groupers:  [
                      property: 'Checkouts.name',//and with checkouts.name
                      root: 'data',
                      groupFn: function (val) 
                         return val === val ? val : '';
                    
           ]

【问题讨论】：

你是否有一个我们可以修补的小提琴......也许你已经尝试过做？

我在下面的问题中列出了我尝试过的内容。但不仅仅是一个解决方案，我还想知道这是否可能？

嗯，就是这样...checkouts 在技术上是一家商店，对吧？所以做checkouts.name 并没有真正的意义......你必须有一个单一的Checkouts 模型来获得名称属性。基本上，我得到的是你的网格商店应该是checkouts，然后你的石斑鱼的属性应该是name。

两家商店生产，我知道有更简单的方法可以让 UI 看起来像我所描述的那样，但我希望有人能明确地说出我所描述的分组是否可行. Checkouts 也是 Ext.data.model，我已将商店添加到我的问题中。我只是想获得对该字段的引用，希望相同的对象访问方法适用于这个 hasMany 模型。

那么答案是否定的，它不会按照您的预期工作。是的，我试图用外壳区分两者，因为您的较低 c 似乎是商店实例......仅从架构的角度来看，您的模型不应该是复数，因为它们是单数单位。商店应该是复数版本。至少，这是我遵循的做法。

【参考方案1】：

到目前为止，使用grouping 执行此操作似乎是不可能的，但还有其他几种可能的grid solutions/plugins 可能有效，例如Summary Grid 或Tree Grid 的类型之一。除了两个独立的商店之外的另一个选择可能类似于Data Binding examples 中的内容。