javascript - 在 Extjs GridView 中隐藏行不起作用

Question

我需要在主/细节网格中隐藏重复的行。我找到了这个 fiddle http://jsfiddle.net/tPB8Z/1465/这隐藏了一些基于用户选择的单元格，但是当我在我的代码中应用它时 http://jsfiddle.net/alebotello/axvhtrcL/21/方法 addRowCls() 来自 View 网格，它不适用于行。主网格和详细网格共享同一个商店，我只想更改主网格中的行可见性，而不修改商店或创建新的商店。

在主网格监听器中:

    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;
}

Answer 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 fork 出来的工作示例:- http://jsfiddle.net/chetanbh/rpbdq4ex/