Renderer in ext-js

What is (in summary) the function of the renderer in ext j开发者_开发知识库s?

A renderer is basically the function responsible for showing the underlying data to the user in a fashion or format that looks nice or makes sense.

Some examples might make it more clear:

A date renderer could take a javascript Date object and format it nicely like:

January 27, 2011

A number renderer could take a number like 2.23535346 and format it to 2 decimals like:

2.26

A renderer could even take a string like 'Y' or 'N' and instead show it as an image like:

Basically, the sky is the limit.

The renderer allows you to format data from a store in any way you see fit. It's a function that takes an data value and can return HTML. This is used to keep code that generates HTML separate from the code that generates the data.

Renderes transforms the value of display field into custom fashion. let say i want to display any prize value into dollar

{ xtype:'displayfield',   
  name:'name',   
  value:'45',   
  renderer:this.transformIntoDollarConvention 
}

here, transformIntoDollarConvention is a function defind above the constructor with a return statemnt .

transformIntoDollarConvention:function(value)
{
return value+'$';
}