ExtJS 3.4: How to add a custom renderer dynamically to a PropertyGrid?

Question

I need to display an image in a PropertyGrid. This is usually achieved using the customRenderers config, explicitly overriding the rendered for a specific field:

grid = new Ext.grid.PropertyGrid({
    customRenderers: {
        "picture": function(v)
        {
            return "<img src=\"" + feature.attributes["picture"] + "\" />";
        }
    }
});

But in my case the field on which to apply the custom rendering function is only known at run-time (I have to search for a string like "http:"). But adding the custom renderer dynamically at that time does no seem to work.

Is there any way to do this? Thank you.

Here is how the dynamic property is found:

for (var key in feature.attributes)
{   
    value = feature.attributes[key];
    if ((value != null) && (value.substring(0, 4) == "http"))   
        grid.customRenderers[key] = Function("v", "return \"<img src=\\\"" + value + "\\\" />\";"); 
}

Answer 1

After trying a great deal of different strategies I finally got to something that functions:

grid = new Ext.grid.PropertyGrid();
for (var key in feature.attributes)
{   
    value = feature.attributes[key];
    if ((value != null) && (value.substring(0, 4) == "http"))   
        grid.customRenderers[key] = Function("v", "return \"<img src=\\\"" + value + "\\\" />\";"); 
}

The feature.attributes is a dictionary containing the data to be displayed; a cycle iterates through each of its keys, searching for the fields that might contain image URLs.

There were two key elements that brought me to this solution:

• Understanding that customRenderers can be used itself as a dictionary, thus dispensing the hard-coding of fields names.

• The usage of Function as a means to encode the exact value to be rendered, this way avoiding any scope issues.