深入分析Extjs中商店分组功能的使用

在项目实践过程中，我们满足了按照某个领域对网格中的数据进行分组的要求。当然，这个函数在api中是可用的，这里列出来供您查找：

需要注意两点：

1.创建存储时，需要设置groupField属性的值，即要分组的值。

例如：

JavaScript代码

Ext.define('Person '，{ extend: 'Ext.data.Model '，fields: ['name '，' sex ']})；在这个数据模型中，我们需要按性别分组，所以请查看下面的商店。

JavaScript代码

var Person store=ext . create(' ext . data . store '，{ storeId: 'PersonStore '，model: 'Person '，groupField: 'sex '，data: [{ name: '李红梅'，sex: '女性' }，{ name: '三丈'，sex: '男性' }，{ name 3: '吉姆格林'，sex 3: '男性' }，{ name 33: '接下来，我们需要定义分组显示的第三方物流。

JavaScript代码

var GroupingFeature=ext . create(' ext . grid . feature . grouping '，{ GroupHeadertpl: ' sex : { name }({ rows . length } Item {[values . rows . length 1？s ' : ' ']})' })；//请注意，{name}是与商店中的sex列相对应的值。在gridPanel中，代码如下：将功能配置为上面定义的groupingFeature。

JavaScript代码

var grid=ext . create(' ext . grid . panel '，{ renderTo: Ext.getBody()，store: PersonStore，width: 600，height: 400，title: 'Person '，features 3360[group feature]，columns 3360[{ text : ' Name '，flex 3: 1，dataIndex: ' name ' }，{ text: ' sex '，flex 3360效果图如下：

当然，实现分组后，可以省略gridPanel中的列性。

需要注意的是，如果商店中的数据发生变化，分组是否可以正常显示？

现在向网格中添加一个itemclick事件，代码如下：

JavaScript代码

listener : { item click : function(this view，record){ personstore . span style=' color : # ff 0000；'add/span([{name:'li '，sex: '男' }，{name:'zhang '，sex: '女' }])；}}效果如下。

可见界面不是我们想要的，那么如何解决呢？(起初，愚蠢的解决方案是我移除、销毁并重新加载这个gridPanel。)我对代码做了一些修改，让监听器监听事件。

JavaScript代码

listeners: { itemclick:函数(thisview，record){ personstore . load data([{ name : ' Li '，sex: '男' }，{name: 'zhang '，sex: '女' }]，true)；}}看效果：

这就是我们想要的效果。当动态改变存储中的数据时，也应该实现分组，而不是将数据追加到gridPanel的末尾。这两个代码的主要区别在于存储中添加数据的方法，前者是add(记录)，后者是loadData(记录，[追加])。

一开始我不明白为什么商店同时添加数据，但是效果不一样。看完了官方文档的解释，add()，新的模型实例将添加到现有集合的末尾，我突然意识到loadData是按照存储的规则加载数据。

另外，如何删除组中最旧的一行，我自己查过了，文档已经实现了。我想在这里和大家分享一下：

//修改前面的侦听器侦听事件，如下所示：

注意第一个([boolean group])方法，如果没有传递参数，则获取存储中的第一个数据；当参数为true时，它返回按存储分组的多个对象，组名为键，组中的第一个数据为值；PersonStore.first(真)。女性获得女性组中的第一个数据；如果你想获得男性的数据，你可以使用personstore。第一个(。

JavaScript代码

listeners: { itemclick:函数(此视图，记录){ personstore。加载数据([{ name : ' Li '，sex: '男}，{name: 'zhang '，sex: '女}]，真)；alert(PersonStore.first(true))。女声。get(' name ')；控制台。日志(personstore。第一个(真的).女性);个人商店。移除(个人商店。第一个(真的).女性);//控制台。日志(personstore。GetAT(0))；} }为避免移除记录占用内存，进行了进一步的处理，功能可以实现，但是方法有些笨，大家有好的办法可以交流交流

看代码：

监听器： {项目点击：功能(此视图，记录){ personstore。加载数据([{ name : ' Li '，sex: '男}，{name:'zhang '，sex: '女}]，真)；alert(PersonStore.first(true))。女声。get(' name ')；控制台。日志(personstore。first(true))；个人商店。移除(个人商店。第一个(真的).女性);var RECs=个人商店。GetRange()；控制台。日志；//personstore。remove all(true)；//这句有没有都可以个人商店。装载记录；//重新负荷数据，内存中记录的离开的掉的就没有了控制台。日志(PersonStore)；警报(personstore。getremovedrecords。长度)；//这句警报结果为0//控制台。日志(personstore。GetAT(0))；} }