Extjs中关于使用分组表格控件之后无法获取对应的行记录问题。

一、功能描述。

展示信息的时候需要将信息根据地区分组。并且添加一摘要行用来显示其他三列在这一地区分组下的总面积之和。

并且根据点击不同的分类弹出不同的提示信息。

 

二、问题描述：

因为需要根据点击的分类显示不同的提示，所以要对点击的分类进行判断，于是监听分类列的点击事件，用点击事件函数参数中的record(行记录)来获取当前选中行的分类列中单元格的数据。

在第一个地区分组下操作任何行不存在问题。

但是换第二组第三组的时候确无法获取相应的数据，record记录均为第一组的数据。

 三、思路&解决方案

1:思路、既然只有第一组能成功获取相应记录，并且点击其他组获得的依然是第一组的数据，证明数据并不存在record中，但是确显示出来了证明html元素中有值，

 

。

首先来看column列监听事件中函数的参数

click:function(grid,td,rowIndex,cellIndex,element,rec,tr){
         //grid 即当前grid
         //td  即单击的td元素
        //rowIndex 行索引
        //cellIndex  列索引
        //element dom元素
       //rec    被选中的记录
       //tr    tr元素
}

原来我们不仅仅能够获得record，并且能得到点击的td元素。

我们于是可以通过Ext.get(td),获得一个Ext.dom.Element对象,这个对象包含了td的所有元素。根据第三个图可以看到td元素下还包了一个层div。我们就可以通过这个对象的first方法获得这个div对象。console这个div对象，分类列的显示信息在dom的innerHTML属性里，我们直接通过对象‘点’这个属性就获取到了。

写法如下：

 

cellclick:function(table,td,cellindex,rec,tr,rowIndex){
         	var title=Ext.get(td).first().dom.innerHTML;
}

 这里用的是grid的单元格点击事件，但是用列的单击事件也没问题，该有的参数还是有。

最终效果如下

 无论是点击第一行还是其他行，始终能够获取对应的记录，从而作出判断显示不同的分类信息