如何在ExtJS GridPanel中隐藏行？

Question

假设我知道要定位的行索引（例如，this.rowToBeDeleted 的值为 2），如何才能仅 在网格中隐藏此行而不是在数据集中隐藏（我在数据集中有一个标识符，用于表示稍后在PHP Web服务代码中哪些行应该从数据库中删除）。

- ppecher

Answer 1

你可以使用其中一个store.filter()方法，或者隐藏行元素。

grid.getView().getRow(rowIndex).style.display = 'none';

我认为更好的做法是直接从store中删除记录，让store更新视图，因为你要删除的是记录而不是隐藏它。使用批处理模式的store（默认值：batch: true, restful: false），它会记住你删除的哪些行，并且只有在调用store.save()时才会向服务器发送请求。

- Robby Pond

Answer 2

我建议使用store.FilterBy()并传递一个函数来测试要删除行中的值：

store.filterBy(function(record) {
    return record.get("rowToBeDeleted") != 2;
});

我之前写过一篇关于网格过滤的基础博客文章，你可以在这里阅读：http://aboutfrontend.com/extjs/extjs-grid-filter/

- Nils-Fredrik

Answer 3

在 ExtJS 4.1 中，不存在 view.getRow(..)。相反，您可以使用以下方法：

this.view.addRowCls(index, 'hidden');

隐藏指定索引处的行，并且...

this.view.removeRowCls(index, 'hidden');

展示它（其中“this”是网格）。

CSS类 hidden 定义为

.hidden,
{
    display: none;
}

这对于特殊情况非常有用，其中store.filterBy()不合适。

- Timur K

---

谢谢，这很有帮助。过滤器取消选择被过滤掉的功能，而这个不会。 - Sergio Tx

Answer 4

在grid js文件中编写以下代码，应用CSS样式来隐藏您想要隐藏的行。

<pre><code>
    Ext.define('MyGrid',{
    extend : 'Ext.grid.Panel',
    xtype : ''mygrid',
    viewConfig : {
       getRowClass : function(record,id){
          if(record.get('rowToBeDeleted') == 2){
             return 'hide-row';
          }
       }
    },
    .................
    .................
    });
</code></pre>

现在在custom.css文件中定义自定义CSS：

.hide-row{display:none}

这将隐藏网格中的行，而不会从存储中删除或过滤。

- Nikhil Ganage

---

使用这种方式会给我一个空白的白色行。可能是因为该行实际上在专门为该行的表格内？注意：围绕该行的表格是由Extjs生成的。 - user2052618

Answer 5

您可以使用store.filter()或store.filterBy()方法来实现。例如，将“hidden”属性设置为您的记录，并过滤所有设置为true的隐藏记录。这样，它们仍然存在于存储中，但在网格中不可见。

- ChrisR