Extjs中如何遍历grid的数据（正在显示的数据）

Posted 2023-03-18

现有一个grid对应的store中已有数据
列中有设置renderer
也就是说显示在grid的中的数据并不一定是store的数据，有可能是经过处理显示的
那么我如何能遍历这个grid获取到grid中所有（正在显示）的数据呢？

“也就是说显示在grid的中的数据并不一定是store的数据”这句话是错误的！
你用store加载的数据，是经过Record解析的，也就是说，store装的就是record解析完的数组，而数组里的对象就是你record解析的对象。而你所说的，只是通过renderer方法，把store中的数据renderer后展现在grid上，而这个renderer是属于ColumnModel的，它只是用来做grid上的显示，而真正记录的数据只有sotre！
解决这个有两种方式：
1.你sotre加载数据之前，把该对象数组重新组织，组织成你真正想要的数据后再load！
2.遍历store的record记录，在遍历到你经过处理的dataIndex时，在按你的处理方式处理遍数据即可！
for(var i=0,len=store.data.length;i<len;i++)
var data = store.getAt(i).data;//data就是对应record的一个一个的对象
data.dataIndex //获取的就是该对象dataIndex属性对应的值
.........


这两种说白了就是你真实想要什么记录的对象，要么在sotre之前组织，要么在遍历之后组织！总之store所load的数据会一直被store持有着，你不remove也不reload，他就不会变！追问

其实我的意思就是要遍历的就是展现在grid上的数据，而不是在store里存的那些，因为他既然已经展现在grid上了，我是想他是不是有什么方法或者属性可以方便的取出来，你这样说也是没错，我只是想知道有什么方便一些的方法，毕竟那些东西已经展现在grid上了嘛~

追答

呵呵~~~
用这个你试试： alert(Ext.encode(grid.getView().renderRows(0,1)));
这里就有你要的展示在grid上的所有信息~~~~
你在去Ext.grid.ColumnModel的源码里看一下setRenderer，两个参数col,fn
注释如下： @param Number col The column index
* @param Function fn The function to use to process the cell's raw data to return html markup for the grid view.

也就是说，它renderer后的就是html的标记了，直接展现在grid的view上，因此，你看到的grid的数据就是那个alert，接下来，看怎么拿出那个数据了~~~
个人觉得，还是直接操作store吧~~~~

参考技术A grid.getStore().each(function(record)
var value = record.get("field_name");
);

ExtJs 6：如何在两个网格之间绑定数据？

【中文标题】ExtJs 6：如何在两个网格之间绑定数据？

【英文标题】：ExtJs 6: How to bind data between two grids?

【发布时间】：2019-01-08 06:29:17

【问题描述】：

我的主面板 (Main.js) 中有 3 个项目：

表格（显示来自 Grid1 选定行的数据） Grid1 -Ext.grid.Panel（从 JSON 文件中获取数据） Grid2 -Ext.grid.Panel（应显示 Grid1 中选定行的某些列）

所有 3 个视图共享与 Main.js 关联的相同 MainModel.js。

我可以使用公式将 Grid1 数据绑定到表单：

formulas: 
    someVal: 
        bind: 'employeeDetails.selection',  //reference to grid1
        get: function(item)
            return item;
        
    ,

表格-

items:[
        
            xtype: 'form',
            title: 'Form',
            defaultType: 'textfield',
            items: [
                
                    xtype: 'displayfield',
                    fieldLabel: 'ID',
                    bind: 'someVal.id'
                , //...

但我找不到任何方法在 Grid1 和 Grid2 之间做同样的事情。我用谷歌搜索了几个小时。 ExtJs 网格的唯一数据源似乎是存储。本质上，除了使用 store 之外，还有其他方法可以填充网格。我们可以在列内使用绑定吗？谢谢。

编辑： 更新的选择公式：

myStoreDataFormula: 
    bind:
        bindTo:'employeeDetails.selection',
        deep:true
    ,
    get: function(employee)
        if(employee!=null)
            var empArray = [];
            empArray.push(employee.data);
        return empArray;
        
    

【问题讨论】：

为什么需要公式？如果组件属于同一个referenceHolder，你可以使用bind: 'employeeDetails.selection.id'

【参考方案1】：

在使用视图模型中定义的存储时，一个有点模糊的功能是，您可以使用“ ... ”小胡子来绑定到其他视图模型字段/公式或组件配置，而不是定义具体值通过他们的参考发布（我个人发现这对于将路径变量放入商店代理的 url 最有用）。

这是一个绑定存储的网格示例，它又将数据绑定到公式：

Ext.define('MyView', 
    viewModel: 
        stores: 
            myStore: 
                fields: ['name'],
                data: 'myStoreDataFormula'
            
        ,
        formulas: 
            myStoreDataFormula: function(get) 
                return [
                    name: 'Foo'
                , 
                    name: 'Bar'
                ];
            
        
    ,

    extend: 'Ext.grid.Panel',
    xtype: 'MyView',
    bind: 
        store: 'myStore'
    ,
    columns:[
        dataIndex: 'name',
        flex: 1
    ]
);

Ext.application(
    name : 'Fiddle',

    launch : function() 
        Ext.create(
            xtype: 'MyView',
            width: 300,
            height: 300,
            renderTo: Ext.getBody()
        );
    
);

是的，这仍然需要您拥有 2 个商店，但您可以使第二个网格的商店完全依赖于第一个网格的已发布 selection 配置。

【讨论】：

谢谢，您的解决方案有效。但是当我在 myStoreDataFormula () 中绑定到 Grid1 选择时会出现问题。我想与视图不同，商店不听公式中的数据更改（单击一行时选择更改），因此选定的行不会被填充到网格 2 中（有问题的更新公式）。您能提出任何解决方案吗？

好的，成功了。请忽略我上面的评论。谢谢！

@mustafa1993，您可以将单个存储与 viewModel 存储一起使用。只需为两个网格设置绑定： store: 'storename', selection: 'id' 。他们两个的选择都会改变