PDA

View Full Version : [1.1] Ext.ux.StarRating : Star rating/voting system - forms or standalone



Saeven
17 Aug 2007, 6:43 PM
We made a little widget that could be used standalone or inside of Ext forms for one of our applications. We thought that the Ext community might benefit from it! Always glad to give back, download at this URL:

http://saeven.net/ext

Feedback/bug reports always appreciated!

Sample usage (standalone):


var stars = new Ext.ux.StarRating( 'voting', { totalStars: 10, average: 6.5 } );
stars.on( 'rate', function( o, x ){ Ext.get( 'vote_selected' ).update( 'rate event fired: ' + x ); } );


or



someform.add( new Ext.ux.StarRating( { totalStars: 5 } );


Cheers.
Alex

K0bo
18 Aug 2007, 6:59 AM
I made the same thing a couple weeks ago.
It has the about the same functionality, with a little extra's for putting text above and beneath the stars

Check it out: http://extjs.com/forum/showthread.php?t=10822

Saeven
18 Aug 2007, 7:20 AM
That's good, it gives people a choice I suppose!. Our goal was moreso to make a form field only that sticks to ext's textfield constraints (similar geometry) - we really wouldn't have wanted all the text out and about, just so that it looks un-busy inside of a form with multiple votes required. I believe we still would have built our own had we found yours, but good work :)

Cheers.
Alex

robw
14 Feb 2008, 4:11 AM
Hi,

Thanks for sharing the Ext.ux.StarRating extension, I've just added it to my project and it works great.

Did have to fix one bug though - in resetStars it highlights one too many if the average is a whole number. (eg average = 2, 3 stars on)

Simple to fix - just comment out the "if (diff)" line:


resetStars: function(){
if( this.valueClicked )
return;

this.clear();
if( this.average ){
var lta = Math.floor( this.average );
for( var i = 0 ; i < lta + 1 ; i++ )
this.stars.item( i ).addClass( 'on' );

var diff = (this.average - Math.floor( this.average )) * 100;
//if( diff ){ /*comment this to set %age to 0 if average is whole number*/
this.stars.item( lta ).dom.firstChild.style.width = diff + "%";
}

},
Hope this helps, thanks again for sharing your work.

Rob

kenji01
6 Sep 2009, 9:47 PM
Can anyone give an example of a working basic rater?thanks!

Musical Shore
15 Oct 2009, 2:40 PM
Thanks for the component but it is a little buggy. Sometimes you click on the star and it doesn't update, or it resets, or the number of stars lit up doesn't reflect the index clicked. My QA guy gave this the gas face. Sorry.