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

[Saeven]

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]

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]

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]

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]

Can anyone give an example of a working basic rater?thanks!

[Musical Shore]

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.