Extjs 4 + programatically add renderer during metachange

Question

I have and Ext JS 4.2 grid that has to change based on the Metadata and all works well except when a column has a renderer. Is it even possible to have the renderer created at this time. Here is basically what I am trying to do

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

}

I have only added one renderer type to the switch statement but there will be multiple types of renderers that I will need to create so yes, I know it looks a little silly to have only one case in a switch statement. any help would be greatly appreciated. I have also tried having the reconfigure statement after the enumerations of the columns but no luck so far.

Wouldn't it be easier to pass new columns that would already contain the renderers to reconfigure call so that no additional logic would be needed? — Saki
the user selects the columns that they want from something like 116 available columns and then saves the layout. I drop the metadata from each column into a database table and then each user can recall whatevery saved layout that they want so I dont know exactly what columns they want to see. — C5m7b4

C5m7b4 C5m7b4 · Accepted Answer · 2015-02-18T23:53:30

I figured it out. I feel kind of stupid. Here is the final version and what I did to fix it.

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

Basically the column that I was using was a copy so the change that I was making was not affecting meta.columns. After I found that I was getting a bunch of css after the image becuase if you look closely you can see that I missed closing the img tag so I added the height and width and closed the tag. All is wonderful now.

Extjs 4 + programatically add renderer during metachange

1 Answers