CODEWITHSUNDEEP
extjs
Oualid
Oualid

Reputation: 403

How to highlight the searched string

I have implemented a gridpanel using Extjs that shows the content of a database. In a textfield we can write a keyword that is submitted and used to retrieve information from the database.

My question is: How to do to highligt the keyword in the result in gridpanel? I don't want to highlight the entire row, just the keyword.

/Regards.

Upvotes: 1

Views: 1355

Answers (2)

Rob Boerman
Rob Boerman

Reputation: 2168

If you want to highlight the entire row that matches, you could try redefining the GridView's getRowClass method:

viewConfig: {
        forceFit: true,

//      Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change'); //or loop through all record fields
            if (c.match(...get search string in here...)) {
                return 'highlight';
            } 
        }
    }

If you want to highlight the cell itself you will have to loop through all records and their fields on load of the store, get the grid cell with getCell and apply a cass to that

Upvotes: 0

ChrisR
ChrisR

Reputation: 14447

How have you implemented the search functionality? Are you performing it on the server or are you just filtering your store in javascript?

If you are doing it remotely it'll be alot easier to just highlight the strings in your serverside code (wrap a <span class="highlight"> around the search string for example).

If you are doing it in ExtJS you'll have to re-render all grid columns that can possibly contain the words you searched for. That'll be alot harder.

Upvotes: 2

Related Questions