javascript - 使用电子表格 selModel 时，在哪里以编程方式设置列过滤器？

Question

这是我在这里得到回答的后续问题:How can I programmatically set column filters?

我有一个 188 行的 Ext.js View 。在此 View 中，我扩展了 Ext.grid.Panel ，并在该网格中设置了 selModel，如下所示...

  selModel: {
    cellSelect: false,          // Only support row selection.
    type: 'spreadsheet'         // Use the new "spreadsheet" style grid selection model.
  },  

在其中一列“状态”列上，我以编程方式设置过滤器，以便仅显示“状态”为“就绪”的行将在页面首次呈现时出现。我一直在代码中这样做:

  columns: [
...
    {
      text: 'Status',
      dataIndex: 'status',
      itemId: 'status',
      renderer: function(value, metaData) {
      var filter = this.up('panel').down('#status').filter;
      if (!filter.menu) {
         filter.createMenu();
         filter.menu
            .down('menuitem[value="Ready"]')
            .setChecked(true);
      }
        metaData.tdStyle = (value == 'Ready') ?
          'color:green;font-weight: bold' :
          'color:red;font-style: italic'
        return(value)
      },
      filter: 'list',
      flex: 1,
      },

... more columns ... 

一位有用的 SO 成员指出，这不是设置过滤器的代码最有效的位置，因为代码将为网格中的每一行执行。

我尝试添加一个 afterrender 函数，如下所示......

    {
      text: 'Status',
      dataIndex: 'status',
      itemId: 'status',
      renderer: function(value, metaData) {
        metaData.tdStyle = (value == 'Ready') ?
          'color:green;font-weight: bold' :
          'color:red;font-style: italic'
        return(value)
      },
      filter: 'list',
      flex: 1,
   listeners: {
      afterrender: function(value) {
      Ext.Msg.alert('We have been rendered value is ' + value );
      var filter = this.up('panel').down('#status').filter;
         if (!filter.menu) {
            filter.createMenu();
            filter.menu
               .down('menuitem[value="Ready"]')
               .setChecked(true); //Uncaught TypeError: Cannot read property 'setChecked' of null
         }
      }},

...但这会导致此错误消息，//Uncaught TypeError: Cannot read property 'setChecked' of null。

我在这里做错了什么？我需要listeners:吗？我是否没有传递我认为传递给我的 afterrender 函数的数据？我应该定义一个 initComponent 函数吗？

更新:
我将代码更改为 DrakeES 建议的内容，...

    {
      text: 'Status',
      dataIndex: 'status',
      itemId: 'status',
      renderer: function(value, metaData) {
        metaData.tdStyle = (value == 'Ready') ?
          'color:green;font-weight: bold' :
          'color:red;font-style: italic'
        return(value)
      },
      flex: 1,
      filter: {
        type: 'list',
        value: 'Ready'
      }

...但结果是这样的:

动画加载图像只是坐在那里并旋转。这使得用户无法交互地更改过滤器。我想知道我在这里做错了什么？

Answer 1

I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders

检查过滤器复选框的有效作用是在商店上设置过滤器。 因为您希望首先应用过滤器，所以最好立即将其添加到商店配置中:

filters: [
    {
       id: 'x-gridfilter-status',
       property: 'status',
       value: 'Ready'
    }
]

这样， GridView 首先会显示为已过滤的，而不是最初显示所有行，然后在列菜单呈现并应用过滤器后才将其过滤掉。请注意，商店的过滤器上需要有 id: 'x-gridfilter-status' ，以便列的过滤器拾取它而不是创建重复项。

但是，在商店上设置过滤器不会向列过滤器菜单发送反馈，因此后者将保持未选中状态，除非您明确检查它。因此，您仍然需要在网格或列上使用 afterrender 处理程序，以使事物看起来同步。

一个简单而优雅的解决方案，没有听众和其他东西:

filter: {
    type: 'list',
    value: 'Ready'
}

完整工作示例:https://fiddle.sencha.com/#fiddle/prp