Extjs 4 +在metachange期间以编程方式添加渲染器

时间:2015-02-18 18:45:07

标签: extjs metadata

我有和Ext JS 4.2网格必须根据元数据进行更改,除了列有渲染器之外,所有工作都很好。甚至可以在此时创建渲染器。这基本上就是我想做的事情

function metaChanged(store,meta){
    var grid = Ext.ComponentQuery.query('#mainItemGrid')[0];
    grid.reconfigure(store,meta.columns);
    var colPosition = 0;
    Ext.each(meta.columns,function(col){
       if (col.renderer !== undefined){
           switch(col.dataIndex){
               case 'chgflag':
                   var myCol = grid.columns[colPosition];
                   var f = function(value,metaData,record,rowIndex,colIndex,store,view){
                       return Ext.String.format("<img src='_images/{0}", record.data.chgflag); 
                   };
                   myCol.renderer = f;
                   break;
           }
       } 
       colPosition++;
    }, this);

}

我只在switch语句中添加了一个渲染器类型,但是我需要创建多种类型的渲染器,所以是的,我知道在switch语句中只有一个案例看起来有点傻。任何帮助将不胜感激。我也尝试在列的枚举之后使用重新配置语句但到目前为止没有运气。

1 个答案:

答案 0 :(得分:1)

我明白了。我觉得有点愚蠢。这是最终版本以及我采取的措施。

function metaChanged(store,meta){
    var grid = Ext.ComponentQuery.query('#mainItemGrid')[0];    
    var colPosition = 0;
    Ext.each(meta.columns,function(col){
       if (col.renderer !== undefined){
           switch(col.dataIndex){
               case 'chgflag':
                   var f = function(value,metaData,record,rowIndex,colIndex,store,view){
                       return Ext.String.format("<img src='_images/{0}' height=15px width=15px />", record.data.chgflag); 
                   };
                   meta.columns[colPosition].renderer = f;
                   break;
               case 'rc':
                   var rc = function(value,metaData,record,rowIndex,colIndex,store,view){
                       return Ext.String.format("<img src='_images/{0}' height=15px width=15px />", record.data.rc); 
                   };
                   meta.columns[colPosition].renderer = rc;                   
                   break;                                      
           }

       } 
       colPosition++;
    }, this);
    grid.reconfigure(store,meta.columns);

基本上我使用的列是副本,因此我所做的更改不会影响meta.columns。在我发现我得到一堆css后,如果你仔细观察,你会发现我错过了关闭img标签,所以我添加了高度和宽度并关闭了标签。一切都很棒。