使用电子表格selModel时，可以在哪里以编程方式设置列过滤器? [英] Where to programmatically set column filters when using a spreadsheet selModel?

问题描述

这是一个后续问题，我在这里得到了回答:我如何以编程方式设置列过滤器?

This is a follow up question that I got answered here: How can I programmatically set column filters?

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

I have a 188 line Ext.js view. In this view I extend Ext.grid.Panel and in this grid I have set the selModel like so ...

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

在其中一列Status列中，我以编程方式设置了过滤器，以便在页面首次呈现时仅显示Status为Ready的行.我在代码中一直在这样做:

On one of the columns, the Status column, I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders. I have been doing this here in the code:

  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成员指出，设置过滤器的代码并不是最有效的地方，因为将对网格中的每一行执行该代码.

A helpful SO member pointed out that is not the most efficient place for the code that sets the filter as the code will be executed for each row in the grid.

我已经尝试过添加afterrender函数，例如...

I have tried adding an afterrender function like so ...

    {
      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.

... but that results in this error message, //Uncaught TypeError: Cannot read property 'setChecked' of null.

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

What am I doing wrong here? Do I need the listeners:? Am I not getting passed the data I think I am getting passed to my afterrender function? Should I defining a initComponent function?

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

UPDATE:
I changed my code to what DrakeES suggested, ...

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

...但是结果是这样的:

... but the result is this:

动画loading图像只是坐在那里旋转.这阻止了用户能够交互地更改过滤器.我想知道我在做什么错了吗?

Where the animated loading image just sits there and spins. This prevents the user from be able to change the filter interactively. I wonder what it is I am doing wrong here?

推荐答案

我正在以编程方式设置过滤器，以便仅具有以下内容的行 页面首次渲染时将显示就绪"状态

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

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

What checking the filter's checkbox effectively does is setting filter on the store. Because you want the filter to be applied initially, it would be better to have it in the store config right away:

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

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

That way the grid view appear filtered in the first place — instead of initially showing all rows and only then filtering them out once the column menu renders and applies the filter. Note that having id: 'x-gridfilter-status' on the store's filter is required so that the column's filter picks it up instead of creating a duplicate.

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

Setting filter on the store, however, will not send feedback to the column filter menu, so the latter will remain unchecked unless you explicitly check it. Therefore, you still need an afterrender handler on either the grid or the column to make things look in sync.

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

A simple and elegant solution without listeners and stuff:

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

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

这篇关于使用电子表格selModel时，可以在哪里以编程方式设置列过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！