在 Extjs 网格视图中隐藏行不起作用

Posted 2023-02-26

【中文标题】在 Extjs 网格视图中隐藏行不起作用

【英文标题】：Hide row in Extjs grid view not work

【发布时间】：2014-12-10 21:34:14

【问题描述】：

我需要在主/明细网格中隐藏重复的行。我发现这个小提琴http://jsfiddle.net/tPB8Z/1465/ 隐藏了一些基于用户选择的单元格，但是当我在我的代码http://jsfiddle.net/alebotello/axvhtrcL/21/ 方法addRowCls() 从视图网格中应用它时，它不适用于行。主网格和详细网格共享同一个存储，我只想更改主网格中的行可见性，而不修改存储或创建新存储。

在主网格监听器中：

    afterrender: function (comp) 
            var st = comp.getStore();
            var arr = [];
            var i = 0;
            var view = comp.getView();
            st.each(function (record) 
//                console.log(record);
                if (arr.indexOf(record.data['idOrden']) === -1) 
                    arr.push(record.data['idOrden']);
                 else 
                    view.removeRowCls(record, 'x-grid-view');
                    view.addRowCls(record, 'oculto');
//                    console.log(view);                    
                
                i++;
            );

css

.oculto
    display: none;

【参考方案1】：

修复很简单，将主网格监听器从“afterrender”更改为“viewready”。

对于大多数基于 Ext.view.View 的组件，如 Grid，List 开发人员应该使用 viewready 事件而不是 afterrender 来执行渲染后 DOM 操作。

这在他们的 API 文档和指南中有记录。

   viewready: function (comp) 
        var st = comp.getStore();
        var arr = [];
        var i = 0;
        var view = comp.getView();
        st.each(function (record) 
            debugger;
            if (arr.indexOf(record.data['idOrden']) === -1) 
                arr.push(record.data['idOrden']);
             else 
                view.removeRowCls(record, 'x-grid-view');
                view.addRowCls(record, 'oculto');
                console.log(view);                    
            
            i++;
        );
    

从上面的 jsfiddle 分叉的工作示例：- http://jsfiddle.net/chetanbh/rpbdq4ex/