View Full Version : Implementing the rating plugin in a gridpanel

19 Jul 2010, 5:20 AM
Hello everyone,

I have been spending the last few days migrating a lot of stuff from YUI to EXTjs. Now the last thing i need to do is use the rating system. I made a renderer for the column and called it "renderRelevanceStars". In the renderer i need to pass a HTML object to the rating plugin ( i think? ), but I dont see why the cell itself isn't enough.

Here is the relevant piece of code:

the column defined with the renderer

header: 'Relevance <span class=\"information\" id=\"tip1_relevance\"></span>',
width: 75,
renderer: renderRelevanceStars,
sortable: true,
dataIndex: 'relevance'
The renderer itself:

function renderRelevanceStars(val, cell, record) {

var relevance = record.get('relevance');

for (var i = 0; i<11; i+=2)
cell.innerHTML += '<input type="radio" name="rating1" ' + (relevance == i ? "checked=\"true\"": "") + 'value="' + i + '" title="' + (i*10) + '%">';

var rating = new Ext.ux.Rating( cell, { canReset: true, resetValue: -1 });

rating.on('change', function() {

// Save the data into the recordset
record.setData('relevance', rating.value);
}Now I know that passing the sell to the constructor isn't enough, but what SHOULD I pass ?

Hope you guys can help me.



20 Jul 2010, 6:11 AM
I think the problem is the cell content. Because the <div> and <input> elements aren't actually in the screen yet when i try to render the Rating plugin.
My second idea was as small test:

function renderRelevanceStars(val, cell, record) {

var relevance = record.get('relevance');
cell.innerHTML = '<div id="rating">';

for (var i = 0; i<11; i+=2)
cell.innerHTML += '<input type="radio" name="rating1" ' + (relevance == i ? "checked=\"true\"": "") + 'value="' + i + '" title="' + (i*10) + '%">';
cell.innerHTML += '</div>';

return cell.innerHTML;
}This would build a <div> with some radio buttons in it.
My next idea was to use the "afterrender" function on the grid. Like this:

...other grid stuff like width etc......
listeners: {
afterrender: function() {
// We need to build the tooltips after the grid is rendered.
gridTooltip('tip1_relevance', 'relevance');
var rating = new Ext.ux.Rating( Ext.get("rating"), { canReset: true, resetValue: -1 });
} But this gives me the same result. An error in firebug:

this.el is null
this.container = this.el.createChild({
Tried it with document.getElementById and just passing the div's id "rating". Still nothing.
What am i missing here?


20 Jul 2010, 6:19 AM
It's a very bad idea to render Components into grid cells.

Grid cell content is completely transient. The HTML is just wiped out on any update. How will your Component(s) be cleared up?

20 Jul 2010, 6:33 AM
Hey Animal,

The general idea is as following.
I have a grid with 5 columns. The first is a metakeyword, the 3rd, 4th and 5th are just some analytics numbers from google. However I need to know how the user rates the importance of the word for his website. So the general idea was to render the rating plugin in the 2nd cell. Like the image below.

The value from the rating is set in the record when updated and stored when the grid is saved.
You think it's a bad idea to put the rating in there like this ?


20 Jul 2010, 6:49 AM
It is possible that you could use a special case of the forthcoming ActionColumn in 3.3

That allows you to specify a series of icons, and associated class names to be rendered in the column's cells.

A configured handler function is called upon click (either a single handler configured into the Column, or one for each icon)

The handler is passed enough info to determine which icon was clicked on.

It could then set a Record property like ratingValue to a value from 1 to six.

The View's getRowClass could attach a CSS class to the row which would affect the background image of the icons.

Something like that anyway. It will be possible to do.

28 Jul 2010, 11:42 PM
Try this: http://www.sencha.com/forum/showthread.php?105646-3.3-RatingColumn.-A-star-rating-column-renderer.