Question

我正在尝试在网格中使用过滤器，但我无法做到。请帮助我解决它，因为我是Extjs的新手。

我正在使用sencha小提琴来运行这个，当我试图在网格中强制过滤时＆＃34; 功能：[过滤器] ＆＃34;

请同时查看

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[__NSArrayM insertObject:atIndex:]: object cannot be nil'

// grid

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

Answer 1

如果您使用的是extjs 6版本，则以下代码对您有用。您必须将“gridfilters”插件添加到网格以显示过滤器。

var grid = Ext.create（'Ext.grid.Panel'，{ 标题：'员工表'， stripRows：是的， columnLines：true， store：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

上

过滤器未显示在网格中

1 个答案: