2014-06-30 16 views
0

第一次,很长时间... 我使用的是Ext JS 4.2.2.1144 我有一个网格,我的查询从服务器(php)返回的是json形式的元数据以前是在用户决定重新排列并调整列大小然后保存该信息时生成的。当使用metaChanged函数时,所有字段都像width,dataIndex,align以及所有重新配置网格的东西都很好。我遇到的问题是其中一列需要发送tpl的信息,这实际上是要显示的图像的位置。我的Json看起来像这样Ext JS 4.2元数据tpl不被识别

{ 
    "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" 
       } 
      ] 
} 

我已经尝试了各种发送TPL这个最后一列不同的方式,但他们都不是成功的。任何人有任何线索如何实现这一目标?结果最终成为文本而不是实际的图像。如果我使用默认模型直接从商店中加载网格,我从tpl获取图像,但不通过元数据获取图像。我试过单引号,双引号,没有大括号,用大括号,哈哈。我想出点想法。希望我已经够清楚了。安美居,感谢提前任何帮助,这个人是真正推动我疯了, 感谢, C5

回答

0

,当我需要发送渲染器(功能)我已经做了类似的东西很久以前,但他们总是显示为文本。在那个时候,我还没有找到其他方式,但扫描接收到的元数据,看看是否有渲染器,并在接收到的文本上调用eval来获得该函数。

虽然不是“做这个”的答案,我希望它有帮助。

0

我想出了一个解决这个问题的方法,虽然也许不是最理想的解决方案。 当发送TPL到服务器,它实际上会从 <img src="_images/{priorityImage}" height="20px" width="20px" />翻译成 &#60;img src=&#34;_images/{priorityImage}&#34; height=&#34;20&#34; width=&#34;20&#34;/>

因此,这里是我的修复就目前而言: 之前我所说的代码加载店

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

然后在metaChanged功能,它看起来像这样:

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

现在,我在网格中获取我的图像。