Ext JS 4.2 metadata tpl not recognized

Question

First time, long time... I am using Ext JS 4.2.2.1144 I have a grid and my query from the server(php) is returning metadata in the form of json that was previously generated when a user decides to realign and resize the columns and then save that information. All of the fields like width, dataIndex, align, and all that are reconfiguring the grid just fine when using the metaChanged function. The problem that I am having is that one of the columns needs to send over the information for a tpl which is actually the location of an image to show. My Json looks like this

{
    "totalCount":"2",
        "root":"items",
        "metaData":
            {
                "fields":[
                    {"name":"queryid"},
                    {"name":"createUser"},
                    {"name":"subject"},
                    {"name":"priorityImage"}            
                ],
                "columns":[
                    {
                        "dataIndex":"queryid",
                        "width":100,
                        "text":"Queryid"
                    },
                    {
                        "dataIndex":"createUser",
                        "width":100,
                        "text":"Owner",
                        "align":"center"
                    },
                    {
                        "dataIndex":"subject",
                        "width":200,
                        "text":"Subject",
                        "hidden":true
                    },
                    {
                        "dataIndex":"priorityImage",
                        "width":70,"text":"Priority",
                        "hidden":true,
                        "align":"center",
                        "xtype":"templatecolumn",
                        "tpl":['<img src="_images/{priorityImage}" height="20px" width="20px" />']
                    }
                ]
            },
            "items":[
                {
                    "queryid":"1",
                    "createUser":"1",
                    "subject":"Here is a new project",
                    "priorityImage":"orange.png"
                },
                {
                    "queryid":"1",
                    "createUser":"1",
                    "subject":"SAL Form 4",
                    "priorityImage":"roundlightPurple.png"
                }
            ]
}

I have tried all kinds of different ways of sending the tpl for this last column but none of them are success. Anybody with any clues on how to accomplish this? The result ends up being the text and not the actually image. If I load the grid directly from the store using the default model, I get the image from the tpl but just not when doing it through metadata. I have tried single quotes, double quotes, no braces, with braces, lol. Im out of ideas to try. Hopefully I am being clear enough. Anyhoo, thanks for any help in advance, this one is really driving my crazy, thanks, C5

Answer 1

I have done something similar long time ago when I needed to send renderers (functions) but they always appear as text. At that time I haven't found other way but to scan the received metaData to see if there is a renderer and call eval on the received text to get the function.

Although not a "do this" answer, I hope it helps.

Answer 2

I figured a work around for this although maybe not the most ideal solution it does work. When sending the tpl to the Server, it actually gets translated from <img src="_images/{priorityImage}" height="20px" width="20px" /> to <img src="_images/{priorityImage}" height="20" width="20" />

So here is my fix for now anyway: Before I call the code to load the store

Ext.getCmp('lblCurrentMetaGrid').setText('projectsGridGrid');
store.on('metachange', metaChanged, this);

Then in the metaChanged function it looks like this:

    function metaChanged(store,meta){
        var gridname = Ext.getCmp('lblCurrentMetaGrid').text;
        var grid = Ext.getCmp(gridname);
        for(var c = 0; c < meta.columns.length; c++ ){
            var column = meta.columns[c];
            var tpl = column.tpl;
            if ( tpl !== undefined){
                meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace('&#60;','<');
                meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace('&#62;','>');
                meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace(/\&#34;/g,'"');
            }
        }
        //lets look at all the metadata
        grid.reconfigure(store,meta.columns);
    }

Now, I am getting my image in the grid.