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作為對要呈現的確切值進行編碼的方法，從而避免了任何范圍問題。