How do I get the rendered value from a table cell in ExtJS TableStore

Question

I am building a filter function that filters across all cells in my table.

To do this I am iterating through my tablestore and accessing each of my record item fields, like so.

tablestore.each(function (rec, idx) {
    contains = false;

    for (field in rec.data) {

        var cellValueAsString = "" + rec.data[field]
    }
}

My question is: how do I get the rendered value that the user sees in the HTML page?

I have a number of renderers, eg a date renderer, and a renderer which creates strings from a status number.

the value cellValueAsString in the above code just returns the underlying value, and not the displayed value. Is there any way of accessing the displayed value from the tableStore and/or the rec object?

thhx!

Answer 1

Every Grid column has a property called renderer , which is a function. Your task is then to get to this function. And for that you could build somewhere an array (map fieldName => renderer) and call it both in your grid and in the new place or only in your new place.

Answer 2

Please try this

Add the itemclick listener to your grid as follows

listeners:{
            itemclick: this.getRowItem,
            scope:this
        }

Add a tdCls to your column from which you want to retrieve the display value.Like below

{ 
   text: 'Name',  
   dataIndex: 'name',
   renderer: function(value, metadata, record){

        return value+" hello";

        },
        tdCls:'name-render'

    }

Your function getRowItems should be like the below

getRowItem: function(gridPanel, record, item, index, e, eOpts){


   var tdItem= item.getElementsByClassName('name-render');
   var actualTextDisplayed = tdItem.firstChild.innerHTML;
   return actualTextDisplayed ;

}

This is alternative i think.