PDA

View Full Version : Rating extension



Alcoholov
4 Sep 2008, 2:43 PM
Hi all,
I've created an extension for rating. It's my first one :D
You can see demo on this link:
http://dev.iordanov.net/ext/examples/starslider/slider.html

and here is download link:
http://dev.iordanov.net/starslider.tar.gz

ajaxvador
4 Sep 2008, 2:58 PM
fine work

galdaka
4 Sep 2008, 10:19 PM
Excellent init,

1) What about up / down when mouse over.

2) If you click in 4 and then, you want to click in 2, is imposible (IE7).

Greetings,

Alcoholov
4 Sep 2008, 10:34 PM
It's should be possible (I don't have any IE to test with). You can drag&drop yellow stars, or try using arrows on you keyboard. Click event works only when you click on gray star (for now)

Alcoholov
4 Sep 2008, 11:44 PM
I've updated the sources, now you can also click on yellow stars

Scorpie
4 Sep 2008, 11:59 PM
Very nice indeed!

SamuraiJack1
5 Sep 2008, 1:44 AM
Looks cool, I'm going to use it )

How about to publish it in repository, so I'll be able update it easily if you upgrade it?
http://extjs.com/forum/showthread.php?t=43450

galdaka
5 Sep 2008, 2:02 AM
I've updated the sources, now you can also click on yellow stars

Excellent work!!!

Sorry for my english,

Is posible other mode?: On over move starts to your fauvorite rating.

Support decimal values? For example: 3,5 three stars and middle.

Is posible configure the maximun note?. For example 10 stars or 3 stars by a config value

Thanks for share,

Greetings,

Alcoholov
5 Sep 2008, 2:42 AM
@SamuraiJack1:
How can I publish it there?

@galdaka
Stars number is calculated dynamically.
it's maxValue/increment
for example:
starConfig: {
maxValue: 100,
increment: 10
}
and you will have 10 stars.
by default increment = 1
For now half stars are not supported but it should be easy to implement. Latter today I'll post an update.

For over mode I may add an option in configuration but also latter.

SamuraiJack1
5 Sep 2008, 3:05 AM
Examine this link, its a description of repo for authors.
http://extjs-ux.org/twiki/bin/view/Main/RepositoryDesign

Generally you'll need to document your code with jsdoc tags (like Ext library itself)

Alcoholov
5 Sep 2008, 3:11 AM
Ok, with next update there will be comments also :)

venugopal
18 Nov 2008, 11:50 PM
Hi Alcoholov,

Greetings to you.Well Done.
One requirement, Can we make it readonly.such that no user can modify it.
and one more, need to support half star rating too..

Please..Waiting for reply.Thanks in Advance

Regards
Venu

AnthonyViard
2 Dec 2008, 2:58 AM
hi,
thanks for this great job it exactly what i need.
But there is a little big problem. I have download files but in the htlm file there is:


<script type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="slider.css">but files are named starslider.css and starslider.js

;)

JacobWang
17 Dec 2008, 8:00 PM
How to set rating value from database.
When form submit ,I can get value from hiddenName.

hiddenName: 'rate'
like this :Request.Form["rate"]

Thanks in advance.

dreas
18 Dec 2008, 8:20 AM
Good stuff! I'd just add this little change to the CSS though:

.x-starslider {
cursor:pointer;
}

tonedeaf
22 Dec 2008, 9:55 PM
This extension is good, I'll definitely use it!
Need support for half star ratings like others. Are you still developing this extension?

I've attached some png images you could use for your extension

Alcoholov
23 Dec 2008, 5:45 AM
Are you still developing this extension?Yes. I've been little busy this days but soon I plan to release a new version of the extension.

Good stuff! I'd just add this little change to the CSS though:thanks for your change!

How to set rating value from database.It's basically the same as slider.
value: Request.Form["rate"]
should be enough

For real numbers support replace afterRender function with this piece of code:



afterRender : function(){
Ext.StarSlider.superclass.afterRender.apply(this, arguments);
if(this.value !== undefined){
this.resizeThumb(this.value, false);
}
}



latter when I'm at home I'll upload this change.

ekhanh101
28 Jan 2009, 3:58 PM
Hi, how do you redraw the starslider?
I have the slider on a form.
it get rendered, but the value is loaded from the form.load
how can i make it refresh so that the correct value is highlighted?

after the form load, the hidden value and value are set,
but the stars don't show it.

How do i fire the event to redraw?

i have it configured:

{
fieldLabel: 'Quality Rating',
xtype: 'xstarrate',
hiddenName: 'QualityRating',
hiddenValue: 0,
id: 'QualityRating',
starConfig: {minValue: 0,maxValue: 5}
}after the form loads i can see the value change in the hiddenValue
and can even reset it


//set the start value
myForm.findField('QualityRating').hiddenValue = myForm.findField('QualityRating').value;

// or just call setValue directly
var qualityRating = Ext.getCmp('QualityRating');
qualityRating.setValue(3);
the setValue doesn't seem to fire? or redraw the stars to be 3.

how do i fire off events to make it redraw?

I read some places that says set animate: false
and tried that too , no work.

Also, the slider is on a formpanel shown up in a modal window?

ekhanh101
28 Jan 2009, 6:06 PM
ok.
after debuggin, it seems like the id is not set properly in the Ext.StarSlider.

and there's no way for me to find the item without an Id,
so i modified the ext-starslider.js to have id: 'starslider' in it.


Ext.StarSlider = Ext.extend(Ext.BoxComponent, {
minValue: 0,
maxValue: 100,
keyIncrement: 1,
increment: 1,
clickRange: [5,15],
clickToChange : true,
animate:false,
dragging: false,
id: 'starslider',


now i can reference it by id in code:


var QualityRating = Ext.getCmp('starslider');
QualityRating.setValue(myForm.findField('QualityRating').value);


this works for now. limitation would be only one star slider per page.

watrboy00
28 Jan 2009, 6:39 PM
ok.
after debuggin, it seems like the id is not set properly in the Ext.StarSlider.

and there's no way for me to find the item without an Id,
so i modified the ext-starslider.js to have id: 'starslider' in it.


Ext.StarSlider = Ext.extend(Ext.BoxComponent, {
minValue: 0,
maxValue: 100,
keyIncrement: 1,
increment: 1,
clickRange: [5,15],
clickToChange : true,
animate:false,
dragging: false,
id: 'starslider',
now i can reference it by id in code:


var QualityRating = Ext.getCmp('starslider');
QualityRating.setValue(myForm.findField('QualityRating').value);
this works for now. limitation would be only one star slider per page.

That is not a good item just because you could run into id collisions like you said. Whenever you create an instance of Ext.StarSlider you can give it an itemId and reference it via that.

Remy
29 Jan 2009, 8:01 AM
I'm not using this extension but it's very nice.

One suggestion might be optional labels for displaying the scale (ie under star one it could be '2', star two '4', or under star one 'Excellent', star 5 'Very Poor'). This might not work as the interface could be compromised, just a thought.

archmisha
14 Mar 2009, 12:29 PM
Hi,
Great extension. I am using it and it is awesome.

Can you please explain the following code:


var t;
t = Ext.DomHelper.append(ct, {tag:'table',style:'border-collapse:collapse',children:[
{tag:'tr',children:[
{tag:'td',style:'padding-right:4px', cls: 'x-form-element'},{tag:'td', cls: 'x-form-element'}
]}
]}, true);

Why do we need the table and the second td. Can't we do without them?

Thanks

archmisha
14 Mar 2009, 12:33 PM
Another question is:


.x-starslider-horz {
padding-left:7px;

Why do we need this padding?

nintondo
4 Jun 2009, 12:16 AM
Hi

i like this plugin alot and am using it for my project. I would like to ask how to create a default value in the star rating. Can't figure out how to default.. Any help would be of great use and appreciated =)

sbarne3
26 Jul 2009, 11:44 AM
Anyone know where I can download this extension? The link in the original post is dead

thanks

Steven

archmisha
26 Jul 2009, 1:04 PM
Nintondo
I think default value is set by the width of .x-starslider-thumb css class.

galdaka
23 Sep 2009, 3:33 AM
"setValue" not works. Anybody have setvalue working in this extension?

Greetings,

kally
27 Apr 2010, 1:47 PM
How can I have some numbers of yellow stars when the panel is created?
I tried passing that number as a value in the starconfig object. However, it does not seem to work. Can you please let me know how to do that? My code looks like this.
items:[{
xtype :'xstarrate',
fieldLabel :'Rating',
id :'rate_star',
hiddenName :'rate',
hiddenValue:1,
starConfig : {
value:4,
minValue: 0,
maxValue: 5,
increment:1
}

}]

HyperteX
30 Apr 2010, 3:38 AM
I would like to ask if a "Hover"/MouseOver Effect has been considered and if not I would very much like to suggest it, that would be an awesome addition to the plugin and certainly appreciated by a lot of people. Especially for the "not-so-smart" users it would be very helpful to see that the slider is interactive just by moveing their mouse over it instead of having to actually click it.

Stju
19 May 2010, 5:07 PM
"setValue" not works. Anybody have setvalue working in this extension?

Greetings,
Did YOu found solution?
Also resetting is missing..

xbboys
9 Sep 2010, 12:59 AM
Has anyone manage to get setValue() to work?

Urkman
4 Nov 2010, 3:41 AM
For the setValue problem:
just add this code to Ext.form.StarRate:

,setValue: function(value)
{
this.star.setValue(value);
}


Hope, this helps...

Urkman

xbboys
8 Dec 2010, 8:26 PM
That did the trick!! Awesome!! Thanks Urkman... :)