ChecklistFilterCombo

A specialized Combo box that displays its items as a list of checkboxes with a search field and "remove all" button, used for filtering data in Grid columns.

To customize its contents you can:

• Supply listItemPillTpl to render additional information in a pill alongside search results
• Override listItemTpl to fully control item rendering
• Configure showApplyButton to control when change events are fired
• Reconfigure built-in widgets by providing override configs in the picker config's tbar, bbar, and items
• Configure the store to change sorting of results

• Built-in widgets

The built-in tbar widgets are:

The built-in items widgets are:

The built-in bbar buttons are:

Removing a built-in item

To remove a built-in widget, specify its ref as null in the items, tbar.items, or bbar.items config:

{
    type : 'checklistfiltercombo',
    bbar : {
        items : {
            selectAllButton : null   // Remove the selectAllButton
        }
    }
}

Customizing a built-in widget

To customize a built-in widget, use its ref as the key in the items config and specify the configs you want to change (they will merge with the widgets default configs):

{
    type : 'checklistfiltercombo',
    tbar : {
        items : {
            searchField : {
                placeholder : 'Search items...'
            }
        }
    }
}

Use with the FilterBar feature

To use a ChecklistFilterCombo as the filtering UI for a Grid column when using the FilterBar feature, specify it using type in the filterField config inside the column's filterable config:

{
    text       : 'City',
    field      : 'city',
    filterable : {
        filterField : {
            type     : 'checklistfiltercombo',
            operator : 'isIncludedIn'
            // ...any further ChecklistFilterCombo configs
        }
    }
},

Note the use of the 'isIncludedIn' operator on the filterField to get the expected "or" behavior.