Straight ahead, i have to say, that im a beginner in programming. I guess you will see this in my code. But i tried to implement a rating System,like Apple uses it in iTunes, in a grid.
And now i want to share my results with the Ext.Community.
Implemented in the Grouping Example it looks like this:

And here is the code:
The HTML Page, including the grid and alittle CSS

/////////////////////////////////////////////////////////////////////////////////////////////////
/*
Ext-Rating-System
The Ext-Rating-System is based on a method writing values to title and Style-classes.

1. The items are rendered by the custom Renderer. The value of each single Image is
included in it's own class. Just like: '.rate1','.rate2' etc.
The overall value of each item is stored in the title of the parent-DIV.

2. A save function is called, which adds a click-handler to each Image and saves the new
value to the parent-DIV

};I hope someone find this useful.
I used it in a demo-air application and the data-update worked fine this way. I think you have to change it, working with others, then local databases.
http://s212738125.online.de/test/crown.png http://s212738125.online.de/test/crown_fade.png

jerrybrown5

23 Mar 2008, 9:14 PM

Thanks! This will help me on a project that I'm working on.

KaneZMY

2 Apr 2008, 6:21 PM

Thanks for sharing, this is really helped me out.

InuyashaXTC

2 Jun 2008, 2:02 PM

I can learn from this example, much appreciated.

Condor

12 Dec 2008, 3:01 AM

The only problem with this plugin is that it doesn't allow multiple rating columns inside a single grid (and the dataIndex of the column is fixed to 'rating').

I wrote a quick update that supports:
1. Several rating columns in a single grid.
2. Optionally, fractional selection.

The plugin has the following config options:
tickSize: The width in px of one 'tick' in a rating (default: 20).
selectedCls: The CSS class name with the 'selected' rating background image (default: 'rating-selected').
unselectedCls: The CSS class name with the 'unselected' rating background image (default: 'rating-unselected').
roundToTick: Allows for fractional selection if set to false (default: true).

Use the createRenderer method to create a renderer for a rating column. It has a parameter that specifies how many rating ticks should be visible (default: 5).

galdaka

14 Dec 2008, 2:11 AM

Is posible put a example for D&D to ext distribution folder and test?

Thanks in advance,

murrah

28 Dec 2009, 6:19 PM

Is posible put a example for D&D to ext distribution folder and test?

Thanks in advance,

Here is a test version I created. It is a modified version of the standard array-grid.html example in the Ext distro.

Unzip into the {your Ext path}\examples\grid folder and browse to array-grid-stars.html

Using Condor's code version above, this allows multiple rating columns. I have created two instances with different config so you can have each column with it's own style of rating - in this case a 5 point crown rating (whole crowns only) and a 3 point star rating (partial stars allowed).

Cheers,
Murray

murrah

29 Dec 2009, 12:05 AM

Hi,

After playing with this plugin today I added some functionality to (optionally) tell the plugin to auto save the store once the rating has been passed to it.

My app is set up so that it makes sense to send a changed rating to the server as soon as the user changes it because usually that will be the only thing that changes on the grid row. Therefore, my store's autoSave is set to false because that's how I want it for the other editing method of the gridrow.

So, for all other edits the store.save() method will only fire when I tell it to. For the rating edit, it fires the store.save() method immediately because I have set the rater objects autoSave property to true.

See the two lines I changed below. I have NOT added them to the zip file above.

Note that the sensitivity works independantly of this.roundToTick so you might want to move the line above into the if(this.roundToTick){ block if you only want the sensitivity to apply for whole stars (ticks).

Cheers,
Murray

deepaks

11 Feb 2010, 6:44 PM

Thanks for the wonderful sample. I have two more questions
How do I make a PHP call to the backend with the rating value (2.5 for eg) and also how do I disable the rating once a rating has been chosen.?

murrah

11 Feb 2010, 11:13 PM

How do I make a PHP call to the backend with the rating value (2.5 for eg)

It is just a grid column like any other so however you are saving the rest of the record will work. I cant answer more precisely since it depends on how you have set up your grid store. Check out the docs and the forum if you havent got your data saving yet.

how do I disable the rating once a rating has been chosen.?

This seems to work. Just replace the onMouseDown method with this one and see if it does what you want.

its possible, add a number?
http://img25.imageshack.us/img25/4658/sinttulo1np.gif

Cheers
Mike

murrah

12 Feb 2010, 12:03 PM

great plugin.=D>

its possible, add a number?
http://img25.imageshack.us/img25/4658/sinttulo1np.gif

Cheers
Mike

You can use whatever image files you want to use. But I am guessing that is not your question. Can you be more specific about what you want please?

EDIT: Please ignore previous comment - that's what I get for answering posts before I am fully awake! Sorry, I get what your question is now and will look at it later.

deepaks

17 Feb 2010, 5:57 PM

It is just a grid column like any other so however you are saving the rest of the record will work. I cant answer more precisely since it depends on how you have set up your grid store. Check out the docs and the forum if you havent got your data saving yet.

This seems to work. Just replace the onMouseDown method with this one and see if it does what you want.

onMouseDown: function (e, t) {
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
var rec = this.grid.getStore().getAt(rowIndex)
var currentValue = rec.get(dataIndex);
// Assuming a zero value means that the rating is yet to be set,
// If it is zero in the store or it has been modified since the last load or commit,
// allow the user to set the value. Otherwise, prevent any changes by ignoring the mouse action.
if (currentValue == 0 || rec.isModified(dataIndex)) {
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) {
value = 0
}
if (this.roundToTick) {
value = Math.ceil(value);
}
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
}
},If that works as you intend, I would add a config option eg
allowChange : true,and add a test for that by changing the line to:

if (this.allowChange || currentValue == 0 || rec.isModified(dataIndex)) {So, the fragment up to the end of the onMouseDown becomes:

I'll be so happy if someone helps me..
Thanx in advance.
With regards,
Talha

talha06

14 Mar 2010, 12:12 PM

thank you so much dear Murray for your great adds, really this plugin is just amazing.. :)
And of course big thanx to zitadeveloper.

murrah

14 Mar 2010, 1:41 PM

thank you so much dear Murray for your great adds,
And of course big thanx to zitadeveloper.

Thanks, I really only added to it. I would not have had any idea how to build that from scratch. Credits also to Condor.

:)

talha06

14 Mar 2010, 1:54 PM

Thanks, I really only added to it. I would not have had any idea how to build that from scratch. Credits also to Condor.

:)
yeah u're right.. by the way I want to learn that how can I enable autoSave configuration. Because I use DB, so I need to commit changes to my DB. I enabled autoSave : true, but how can I commit changes with using autoSave & JsonWriter.. I can do this with using a button that handles Ajax request but I want to use Ext's config to do this job.