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

我需要在PropertyGrid中显示图像。这通常通过使用CustomRenders配置来实现，显式覆盖特定字段的渲染：

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

---

尽管CustomRenders是一个配置属性，但在创建组件后仍然可以访问它。可以在创建网格后动态添加它们

看看这个JSFIDLE：

HTML:

---

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

在尝试了大量不同的策略后，我终于找到了一些功能：

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的字段

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

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

使用函数作为对要呈现的确切值进行编码的方法，这样可以避免任何范围问题

---

要在其中应用自定义渲染器的字段仅在运行时已知，因此您的建议不会这样做。无论如何谢谢你的回答。我的回答也是如此！自定义渲染器仅在您单击按钮时添加。只有在您事先知道要应用自定义渲染器的字段时，此解决方案才起作用。我在问题中明确指出，情况并非如此。您的问题没有说明如何动态查找您的属性，除了一些关于搜索字符串的模糊注释。在我的按钮处理程序中，您可以进行搜索，然后在下一行propsGrid.CustomRenders[your_field]=functionv{我简化了我的答案，因为我想您没有意识到在json对象中，a.b等同于a['b']…你的答案和我写的一模一样…只是你仍然对自己在做什么感到困惑。Functionv，return…和写Functionv{return…}完全一样而且CustomRenders确实是组件的一个属性，它在创建后可能会受到影响…就像我的示例一样，如果您费心阅读它…叹气

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();
        }
    });
});

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