Question

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

我有一个188行的Ext.js视图。在这个视图中，我扩展Ext.grid.Panel，在这个网格中，我设置了selModel，就像这样......

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

在其中一列Status列上，我正在以编程方式设置过滤器，以便在页面第一次呈现时只显示Status Ready的{{1}}行。我在代码中一直这样做：

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

......但结果如下：

enter image description here

动画loading图片只是坐在那里旋转。这可以防止用户以交互方式更改过滤器。我想知道我在这里做错了什么？

Answer 1

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

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

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

这样，网格视图首先显示为过滤 - 而不是最初显示所有行，然后在列菜单呈现并应用过滤器后才将其过滤掉。请注意，在商店的过滤器上设置id: 'x-gridfilter-status'是必需的，以便列的过滤器选择它而不是创建副本。

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

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

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

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

在使用电子表格selModel时以编程方式设置列过滤器的位置？

1 个答案: