/** * This plugin enables user-defined filters for a grid. * @since 6.7.0 * * In general an gridfilters plugin will be passed to the grid: * * @example packages=[extangular] * import { Component } from '@angular/core' * declare var Ext: any; * * Ext.require('Ext.grid.filters'); * @Component({ * selector: 'app-root-1', * styles: [` * `], * template: ` * <grid #item * [height]="600" * [title]="'Filter Grid Demo'" * [itemConfig]="{viewModel: true}" * [plugins]="{gridfilters: true}" * [store]="store" * [columns]="columns" * ></grid> * ` * }) * export class AppComponent { * store = Ext.create('Ext.data.Store', { * fields: ['firstname', 'lastname', 'seniority', 'department', 'hired', 'active'], * data: [ * { * firstname:"Michael", * lastname:"Scott", * seniority:7, * department:"Management", * hired:"01/10/2004", * active: true * }, * { * firstname:"Dwight", * lastname:"Schrute", * seniority:2, * department:"Sales", * hired:"04/01/2004", * active: true * }, * { * firstname:"Jim", * lastname:"Halpert", * seniority:3, * department:"Sales", * hired:"02/22/2006", * active: false * }, * { * firstname:"Kevin", * lastname:"Malone", * seniority:4, * department:"Accounting", * hired:"06/10/2007", * active: true * }, * { * firstname:"Angela", * lastname:"Martin", * seniority:5, * department:"Accounting", * hired:"10/21/2008", * active: false * } * ] * }); * * columns = [ * {text: 'First Name', width: 120, dataIndex:'firstname'}, * {text: 'Last Name', width: 120, dataIndex:'lastname'}, * {text: 'Hired Month', width: 150, dataIndex:'hired'}, * {text: 'Department', width: 200, cell: {bind: '{record.department} ({record.seniority})'}} * ] * } * * * # Convenience Subclasses * * There are several menu subclasses that provide default rendering for various data types * * - {@link Ext.grid.filters.menu.Boolean}: Renders for boolean input fields * - {@link Ext.grid.filters.menu.Date}: Renders for date input fields * - {@link Ext.grid.filters.menu.Number}: Renders for numeric input fields * - {@link Ext.grid.filters.menu.String}: Renders for string input fields * * These subclasses can be configured in columns as such: * * * columns: [ * {text: 'First Name', dataIndex:'firstname'}, * {text: 'Last Name', dataIndex:'lastname', filter: 'string'}, * {text: 'seniority', dataIndex: 'seniority', filter: 'number'}, * {text: 'Hired Month', dataIndex:'hired', filter: 'date'}, * {text: 'Active', dataIndex:'active', filter: 'boolean'} * ] * * * Menu items can also be customised as shown below: * * * columns: [ * { * text: 'First Name', * dataIndex:'firstname' * }, * { * text: 'Last Name', * filter: { * type: 'string', * menu: { * items: { * like: { * placeholder: 'Custom Like...' * } * } * } * } * }, * { * text: 'Hired Month', * filter: { * type: 'date', * menu: { * items: { * lt: { * label: 'Custom Less than', * placeholder: 'Custom Less than...', * dateFormat: 'd-m-y' * }, * gt: { * label: 'Custom Greater than', * placeholder: 'Custom Greater than...', * dateFormat: 'd-m-y' * }, * eq: { * label: 'Custom On', * placeholder: 'Custom On...', * dateFormat: 'd-m-y' * } * } * } * } * }, * { * text: 'seniority' * filter: { * type: 'number', * menu: { * items: { * lt: { * label: 'Custom Less than', * placeholder: 'Custom Less than...', * }, * gt: { * label: 'Custom Greater than', * placeholder: 'Custom Greater than...', * }, * eq: { * label: 'Custom Equal to', * placeholder: 'Custom Equal to...', * } * } * } * } * }, * { * text: 'Active', * filter: { * type: 'boolean', * menu: { * items: { * yes: { * text: 'Custom True' * }, * no: { * text: 'Custom False' * } * } * } * } * } * ] * */ /** * @cfg {String/Object} activeFilter * This config holds the current filter. This config is stateful. * @private */