ExtJS 3.4：如何将自定义渲染器动态添加到PropertyGrid？

Question

我需要在PropertyGrid中显示图像。 通常，这是使用customRenderers配置实现的，显式覆盖特定字段的呈现方式：

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

但是在我的情况下，仅在运行时才知道要应用自定义渲染功能的字段（我必须搜索“ http：”之类的字符串）。 但是当时动态添加自定义渲染器似乎无效。

有什么办法吗？ 谢谢。

这是动态属性的查找方式：

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

即使customRenderers是config属性，在创建组件后仍然可以访问它。 您可以在创建网格后动态添加它们。

看看这个jsfiddle： http : //jsfiddle.net/Wxx3M/1/

HTML ：

<p id="button-container"></p>
<div id="prop-grid"></div>

JS ：

Ext.onReady(function(){

    var propsGrid = new Ext.grid.PropertyGrid({
        renderTo: 'prop-grid',
        width: 300,
        autoHeight: true,
        propertyNames: {
            tested: 'QA',
            borderWidth: 'Border Width'
        },
        source: {
            '(name)': 'Properties Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: false,
            created: new Date(Date.parse('10/15/2006')),
            tested: false,
            version: 0.01,
            borderWidth: 1
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });

    // simulate updating the grid data via a button click
    new Ext.Button({
        renderTo: 'button-container',
        text: 'Update custom renderer',
        handler: function(){
            var targetProp = null;
            for (var key in feature.attributes)
            {   
                value = feature.attributes[key];
                if ((value != null) && (value.substring(0, 4) == "http"))
                    targetProp = key;   
            }
            propsGrid.customRenderers[targetProp] = function(v){
                return v ? 'XXX' : '';
            }
            propsGrid.getView().refresh();
        }
    });
});

最初没有自定义渲染器。 如果单击该按钮，则会添加一个新的动态自定义渲染器。

Answer 2

在尝试了许多不同的策略之后，我终于了解了一些可以起作用的东西：

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 + "\\\" />\";"); 
}

feature.attributes是一个字典，其中包含要显示的数据。 一个循环遍历其每个键，搜索可能包含图像URL的字段。

有两个关键因素使我想到了这个解决方案：

• 了解customRenderers本身可以用作字典，从而免除了字段名称的硬编码。

• 使用Function作为对要呈现的确切值进行编码的方法，从而避免了任何范围问题。