PDA

View Full Version : how can I update a renderer icon inside a grid ??



luisparada
10 Aug 2012, 2:25 PM
Hello, I'm having some difficulties trying to update a column value inside a grid, when its rendered it loads an icon into the grid:


this.columns = [
{header: 'Estado', dataIndex:'icon', renderer:this.renderIcon, width:45},
{header: 'Descripcion', dataIndex:'descripcion',flex:1},
{header: 'id', dataIndex:'id', hidden:true}
];

The renderer function calls this.renderIcon:


renderIcon:function(val){
return '<div class="' + val + '" width="24px" height="24px"></div>';
}

This part works correctly, but I have a task manager updating this image, so, I tried this:


vstore.each(function(rec){
var record = tstore.getById(rec.data.id);
if(record!==undefined){
record.set({
icon:rec.data.icon
});
if(record.data.googlelat!==rec.data.googlelat || record.data.googlelong!==rec.data.googlelong){
record.data.googlelat = rec.data.googlelat;
record.data.googlelong = rec.data.googlelong*-1;
}
}
Ext.each(markers,function(mrk){
if(mrk.id == 'marker-'+rec.data.imei){
point = new google.maps.LatLng(rec.data.googlelat, rec.data.googlelong*-1);
mrk.setPosition(point);
mrk.setIcon(rec.data.icon);
}
});
});


So, record.set doesn't do what I want, which is, to render a new icon inside the column grid; All i get with the set function is to change the icon to the text:'/images/status-busy.png' How can I achieve this ??
Thank you.

vietits
10 Aug 2012, 5:27 PM
It seems that you are missing the closed DIV tag. Try to fix the renderIcon() to see if it will fix the problem:


renderIcon:function(val){
return '<div class="' + val + '" width="24px" height="24px"></div>';
}

luisparada
10 Aug 2012, 5:32 PM
That was a Typo, sorry, What I'm trying to say is that when it first loads it renders correctly because I'm passing the function renderer in the columns definition, what I'm try to do is to get the record and update the icon with an ajax result from a different store, so right now when I try record.set it doesn't render an html element, it just removes the icon and replace it with the string '<div class="' + val + '" width="24px" height="24px"></div>'

luisparada
11 Aug 2012, 6:37 AM
Can anybody give me a tip or a hand on this ?? thanks...

luisparada
12 Aug 2012, 4:43 PM
Can anybody help me on this please ?? its urgent...

vietits
12 Aug 2012, 5:02 PM
Hi luisparada,

I don't see any problem with the code you supplied. So let try to isolate the problem:
- What will happen if you call tstore.getAt(0).setIcon('iconClass').
- With "Inspect Element" tool, try to see what is the HTML markup of the rendered data
- What will happen if you mark comment all other command line except record.set({icon:rec.data.icon});
It will be better if you can post a complete test case that reflect your case.

redraid
13 Aug 2012, 4:53 AM
Try http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View-method-refreshNode after icon change.