Pramod H C Pramod H C - 5 months ago 32
Java Question

Filters are not showing in grid

I am trying to impliment filters in my grid but I am unable to do it. Please help me to solve it as i am new to Extjs.

I am using sencha fiddle to run this and when i tried to impement filter in grid as
"features : [filters]"

please look to this also

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


// grid

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

If you are using extjs 6 version , then below code is useful for you. You have to give 'gridfilters' plugin to grid to display filters.

var grid = Ext.create('Ext.grid.Panel', { title : 'Employee table', stripRows : true, columnLines : true, store : Ext.data.StoreManager.lookup('employeeStore'), width :'100%', plugins: ['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'
                }
              }
          ]
    });

Running example is on link Grid Filters