如何在ExtJS GridPanel中隐藏行？

Question

假设我知道要定位哪个行索引（例如，this.rowToBeDeleted的值为2），我怎么能只从网格而不是商店隐藏这一行 （我在商店中有一个标志，表示哪些行应该稍后在我的PHP Web服务代码中从db中删除）。

Answer 1

您可以使用store.filter()方法之一，也可以隐藏row元素。

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

我认为只是从商店中删除记录并让商店更新视图要好得多，因为您要删除记录而不是隐藏它。 如果存储处于批处理模式（默认值：batch：true，restful：false），它将记住您已删除的行，并且在调用store.save()之前不会向服务器发出请求。

Answer 2

在ExtJS 4.1中，没有view.getRow(..) 。 相反，你可以使用：

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

隐藏指定索引处的行，和

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

显示它（'this'是网格）。

CSS类hidden定义为

.hidden,
{
    display: none;
}

这对于store.filterBy()不合适的特殊情况很有用。

Answer 3

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

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

我刚刚写了一篇关于gridfiltering的基本博文，你可以在这里阅读： http ：//aboutfrontend.com/extjs/extjs-grid-filter/

Answer 4

在网格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}

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

Answer 5

您可以使用store.filter()或store.filterBy()方法。

在记录上设置“隐藏”属性，并过滤所有隐藏设置为true的记录。 这样他们仍然会在商店中出现但在网格中不可见。