Search code examples
javascriptextjsextjs4

Visually indicate that filter has been set in extjs grid

Is there a way to visually indicate that a filter has been set in extjs (4.2) grid?

Per default the header text becomes itallic. But i am using the ext-theme-gray look and feel and the visual indication is hard to see.

I would like to set an icon on the header, or even darken the header text. Even adding some text to the toolbar would suffice.

Solution

  • I figured out how to visually change the column header when setting a filter on a column.

    Make sure you include the GridFilters.css.

    eg :

    <link rel="stylesheet" type="text/css" href="js/lib/ext-4.2.1.883/ux/grid/css/GridFilters.css" />

    Then inside the CSS file you can change style values. Per default you see this :

    .ux-filtered-column {
    font-style: italic;
    font-weight: bold;
    background: #56b8ff;
}

    You can change the color or even add an icon.

    This fixed my problem.