1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    140
    Vote Rating
    9
    predator is on a distinguished road

      0  

    Default Grid templatecolumn - Highlighter for store filter

    Grid templatecolumn - Highlighter for store filter


    Lets say you have a grid and you remote filter it, depends on how you want filters applied on the backend it may not be immediately visible to the user why particular result is included in the set. For example if you have a place with a name and address, you can include a result when either one of those matches the user search. In this case it seems appropriate to highlight the portion of the result that matches exactly what the user have typed in the search field.

    Screenshot:
    highlighter.jpg


    Here is the column definition:
    PHP Code:
    columns: [
        {
            
    xtype'templatecolumn',
            
    text'Customer',
            
    flex1,
            
    tpl: new Ext.XTemplate(
            
    '<div>[{_customer_type}] <strong>{[this.hl(values.customer_name)]}</strong></div>',
            
    '<div>Phone: {[this.hl(values.customer_phone)]}, Fax: {customer_fax}</div>',
            
    '<div><em>{[this.hl(values.customer_address)]}, {[this.hl(values.customer_city)]}, {[this.hl(values.customer_zip)]}</em></div>',
                {
                    
    hl: function(value) {
                        if(
    typeof this.store == 'undefined') {
                            
    //Get the store instance
                            
    this.store Ext.getStore('customers.Customers');
                        }

                        var 
    filters this.store.getFilters();
                        if(!
    this.store.isFiltered()) {
                            return 
    value;
                        } else {
                            var 
    filter_value filters.items[0]._value//fixme needs proper way to access the filter value
                            
    return value.replace(new RegExp('(' filter_value ')''gi'), "<span style='color: #D01F3C'>$1</span>");
                        }
                    }
                }
            )
        }


  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,711
    Vote Rating
    88
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Looks nice! Thanks for sharing this with the community.


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 1