javascript - 过滤器未显示在网格中

Question

我正在尝试在我的网格中实现过滤器，但我无法做到这一点。请帮我解决这个问题，因为我是 Extjs 的新手。

我正在使用 sencha fiddle 来运行它，当我尝试在网格中执行过滤器时“功能:[过滤器]”

请也看看这个

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging']);

filters = {
    ftype: 'filters',
    encode: encode, 
   local: local,

    filters: [{
    type: 'numeric',
    dataIndex: 'Id'
}, {
    type: 'string',
    dataIndex: 'fname'
}, {
    type: 'string',
    dataIndex: 'lname'
}, {
    type: 'date',
    dataIndex: 'date'
},{
    type: 'numeric',
    dataIndex: 'age'
},/*{
    type: 'string',
    dataIndex: 'genderId'
}*/,{
    type: 'string',
    dataIndex: 'email'
},{
    type: 'numeric',
    dataIndex: 'phone'
}]
};

//网格

title       : 'Employee table',
              xtype       : 'grid',
              stripRows   : true,
              columnLines : true,
              store       : Ext.data.StoreManager.lookup('employeeStore'),
              width       :'100%',
              features    : [filters]


columns: 
              [
                   {
                    header : 'ID',  dataIndex: 'Id', flex:0.5 ,filterable: true,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'First Name',  dataIndex: 'fname', flex:1 ,sortable : false,filterable: true,
                    filter: 
                    {
                        type: 'string'
                    },
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                 },
                  {
                    header : 'Last Name',  dataIndex: 'lname', flex:1,filterable: true,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'DOB',  dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                  {
                    header : 'Gender',  dataIndex: 'genderId', flex:0.5,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'Age',  dataIndex: 'age', flex:0.5,filterable: true,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'Country',  dataIndex: 'country', flex:1,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'Email', dataIndex: 'email', flex:2,filterable: true,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  },
                  {
                    header : 'Phone', dataIndex: 'phone', flex:1,filterable: true,
                    editor: 
                    {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                  }
              ],

Answer 1

如果您使用的是 extjs 6 版本，那么下面的代码对您有用。您必须为网格提供“gridfilters”插件才能显示过滤器。

var grid = Ext.create('Ext.grid.Panel', { title : '员工表', strip 行:正确， 列行:真， 商店 : Ext.data.StoreManager.lookup('employeeStore'), 宽度:'100%', 插件:['gridfilters']，

        columns: 
          [
               {
                header : 'ID',  dataIndex: 'Id', flex:0.5 ,filterable: true,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
                filter: 
                {
                    type: 'numeric'
                } 
              },
              {
                header : 'First Name',  dataIndex: 'fname', flex:1 ,sortable : false,filterable: true,
                filter: 
                {
                    type: 'string'
                },
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                }
             },
              {
                header : 'Last Name',  dataIndex: 'lname', flex:1,filterable: true,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
            filter: 
                {
                    type: 'string'
                }
              },
              {
                header : 'DOB',  dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'date'
                }

            },
              {
                header : 'Gender',  dataIndex: 'genderId', flex:0.5,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'string'
                }
              },
              {
                header : 'Age',  dataIndex: 'age', flex:0.5,filterable: true,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'numeric'
                }
              },
              {
                header : 'Country',  dataIndex: 'country', flex:1,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'numeric'
                }
              },
              {
                header : 'Email', dataIndex: 'email', flex:2,filterable: true,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'string'
                }
              },
              {
                header : 'Phone', dataIndex: 'phone', flex:1,filterable: true,
                editor: 
                {
                    xtype: 'textfield',
                    allowBlank: false
                },
        filter: 
                {
                    type: 'numeric'
                }
              }
          ]
    });

运行示例位于链接 Grid Filters 上