Javascript 使用电子表格模型时，在何处以编程方式设置列过滤器？

这是我在这里得到回答的后续问题：

我有一个188行的Ext.js视图。在这个视图中，我扩展了

Ext.grid.Panel

，并在这个网格中设置了selModel，如下所示

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

    {
      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
         }
      }},

在其中一列的

Status

列上，我正在以编程方式设置过滤器，以便在第一次呈现页面时，只有状态为

Ready

的行才会出现。我一直在代码中这样做：

  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

函数，就像这样

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

    {
      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
         }
      }},

。。。但这会导致此错误消息，

//uncaughttypeerror:无法读取null的属性“setChecked”

我做错了什么？我是否需要

侦听器：

？我是否没有将我认为正在传递给我的

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

。。。但结果是：

在那里，动画的

加载

图像只是坐在那里旋转。这会阻止用户以交互方式更改过滤器。我不知道我做错了什么

我正在以编程方式设置过滤器，以便只有 页面首次呈现时，将显示就绪状态

有效地检查过滤器复选框的作用是在商店中设置过滤器。因为您希望在最初应用过滤器，所以最好立即将其保存在存储配置中：

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

这样一来，网格视图首先显示为已过滤，而不是最初显示所有行，然后在列菜单呈现并应用过滤器后才将其过滤掉。请注意，需要在存储的筛选器上设置

id:'x-gridfilter-status'

，以便列的筛选器将其拾取，而不是创建副本

但是，在存储上设置筛选器不会向列筛选器菜单发送反馈，因此除非您明确选中，否则后者将保持未选中状态。因此，在网格或列上仍然需要一个

afterrender

处理程序来使事情看起来同步

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

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

---

完整的工作示例：

谢谢Drakes。我想我现在明白了。我希望这个周末我能有机会尝试一下。只是找到了一个更好的解决办法。回答和小提琴更新。谢谢！我希望那对我有用。是的，这是一个简单而优雅的解决方案，但我仍然很难让它发挥作用。请查看我对该问题的更新。是否检查了控制台中的错误消息？持续加载旋转通常意味着存在错误。