Sencha Inc. | HTML5 Apps

Blog

Building a Rating Widget with Ext Core 3.0 Final and Google CDN

June 11, 2009 | Tommy Maintz

We are very proud to announce the final release of Ext Core under the MIT license. Your feedback was invaluable. Thank you for all the bugs reported and test cases created. For those of you who are new to Ext Core, we suggest you read the previous blog post about the all the features and examples that we released as part of the beta. You can find a list of changes and fixes we made for the final here. For this post we will leverage the power of Ext by creating and dissecting a useful star rating example. We hope to share some of the general best practices behind creating unobtrusive, reusable code with Ext Core to liven up your pages.

Making a Splash

Including Ext Core on your site is easier than ever. We are honored to share with the community that Ext Core is now available via the Google AJAX Library API. Many thanks to Ben Lisbakken at Google for working with us to make this a reality. //any of these will work wink
The example page illustrating this widget can be found here.

Final words

We hope that this library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We are looking forward to seeing the great things you will create using it. We are always looking for ways to make this library better and we think the best way to do that is by listening to your suggestions. So, don't be shy and tell us what you think.

There are 77 responses. Add yours.

Sim

5 years ago

Very nice and exciting.

Jacky

5 years ago

Air API document will be nice. smile

David Davis

5 years ago

Great article Tommy!

Thanks Ben Lisbakken for adding ext-core to the Google Ajax Libraries API.
Issue 233 can be closed: http://code.google.com/p/google-ajax-apis/issues/detail?id=233

Niko

5 years ago

Great work! Glad to see Ext Core join in ajax libs family of Google CDN. smile

isoloist

5 years ago

It’s nice

Nils Dehl

5 years ago

Thank you Tommy!

Nice Example and gratulation to the stable version.

Chris Dawes

5 years ago

Cool… adding it to extjs.tv build two now… nice.. really nice.

Joe

5 years ago

Yes! What great news - ExtJS Core rocks!

Jay Garcia

5 years ago

Awesome post Tommy.

Ian

5 years ago

Looks good but does not seem to work on chrome

tester

5 years ago

@Ian

I tested it on Chrome v2.0.181.1, works pretty good!

Boubalou

5 years ago

I don’t see the details related to Google CDN in this blog post.

Was it forgotten or do I have to understand what the title mean directly? wink

Boub

Jonathan

5 years ago

@Boubalou - read the part in the beginning of the post - Making a Splash. 

Awesome work Tommy.  Very impressive!

Praveen

5 years ago

Ext rocks as always. Now, it’s part of google API infrastructure, making it even more awesome.
However, just any good widgets, DOM manipulation is only one part. One must also master CSS concepts thoroughly before creating super slick widgets.

Tommy Maintz

5 years ago

Thanks for the great response guys! Turns out Safari/Chrome have an opacity 1 issue, so changed the reset el to get opacity 0.99 which fixed it in both browsers.

Ext Core 3.0 Final???????????? | Ajax??????????

5 years ago

[...] Ext JS???????? [...]

Donovan

5 years ago

Was the rating example inspired by the GQuery GWT demo at Google IO?  or is there a general example that inspired both?

Related, I was actually wondering if Ext GWT contained analogous DOM manipulation code present in ext-core (making it a competitor with GQuery mentioned above) or if it was just the widgets.

zc

5 years ago

??????????Ext Core ???Google CDN

hb562100

5 years ago

????????????? ext.3 ???????????

EXTJS.CN

5 years ago

????

Greg

5 years ago

The Tabs demo example is broken in FireFox.  The tab contents properly switch, but the tabs-button-panel does not.  When you click on a tab, the third tab gets the tab-show class no matter which tab you click on. I’m on FF3 on a Mac, but I’ve also seen this happen on FF on a PC.

It worked O.K in the beta.

Ian

5 years ago

@tester - on chrome 2.0.172.31 you do not seem to see the reset button but does show on IE & firefox

noel

5 years ago

This is why open source is so awesome…

Ext-core ready to go | rapid-DEV.net

5 years ago

[...] Thanks to all for the requests to add ext-core to our Libraries API, and big thanks to Ext JS for providing their library so openly! For more information, head over to their blog post. [...]

myext

5 years ago

???http://www.myext.cn

jeanjean

5 years ago

hello

kabin

5 years ago

kabin üretiminde üreticiyiz.

Magnetic Assemblies

5 years ago

It looks great.thanks

Crysfel

5 years ago

Thanks for this tut, it is really good indeed!

juziku

5 years ago

Good!!

???

5 years ago

??!!!

Gary Gilbert

5 years ago

Great little widget guys, can’t wait to see the final version!

Mike

5 years ago

I was swindled on craigslist by some jerkwad using a wireless number.  Jerkwad was shocked when I got his addy info and paid a visit lol!

Phone Search

extjs

5 years ago

???? ????? ???

frank

5 years ago

Widget?“????”???????????????anyway,??~?????widget??????

siki?

5 years ago

I am grateful to you for this great content.

aöf

Burn Your To Do List

5 years ago

Awesome. you did Great!

Sap

5 years ago

I’m found some bug. There should be some check in “enable” function, because if function “enable” calls more then one time the code “this.container.on({click: this.onStarClick,...” execute more than one time too. So if user click on star, script has multiply calls of the click event. I resolve this problem by the use of “if(!this.disabled){return;}”, see code:

  enable : function() {
      if(!this.disabled){return;}
      ......

P.S. thank you for rating code smile

Henry

5 years ago

Thanks a lot!! wink

krzysztof

5 years ago

looks good, need to try it with Chrome.

Alex

5 years ago

Article was informative and very useful!

Jarquel

5 years ago

Yes! Great article!

SShare

5 years ago

Ok, thanks a lot for your post. It was of good help to me, hope to hear from you soon again.

Soft Man

5 years ago

Cool widget!

Musiclover

5 years ago

Intersting! I make only the first steps in programming. I need to know it for my job.

Diane Tuman

5 years ago

I think this is a wonderful idea to talk about it, and I am really grateful I found your website!

les jeux

5 years ago

very cool thank you

Donald Brooks

5 years ago

Thanks Ben Lisbakken whereas adding ext-core to the Google Ajax Libraries API.

BEBEN

5 years ago

so smooth…

gamesliga

5 years ago

. We are looking forward to seeing the great things you will create using it. We are always looking for ways to m

Donald Brooks

5 years ago

Thank you Tommy!

Nice showboat also gratulation to the common recital.

66 Dominatrix

4 years ago

I got really unbelivable pleased by this post! Post more about dommes!

gunitado

4 years ago

Very nice, its a great documentation.
Thank you!

food storage

4 years ago

I think the library is just going to continue its upward climb and get better because of the quality people behind the project.

fat burning pills

4 years ago

Great widget!

Jayce Nugent

4 years ago

Great work Tommy! Glad to see Ext Core join in ajax libs family of Google CDN. smile

Nice Example and congratulation to the stable version…

??

4 years ago

get better because of the quality people?

Clinigom

4 years ago

Great tutorial dude wink

Siki?

4 years ago

Thanks for the great response guys! Turns out Safari/Chrome have an opacity 1 issue, so changed the reset el to get opacity 0.99 which fixed it in both browsers.

Online Review

4 years ago

Very nice, its a great documentation.
Thank you!

Technology meets news

4 years ago

Very nice and exciting.

car wallpaper

4 years ago

Cool… adding it to extjs.tv build two now… nice.. really nice.

ELECTRONIC ROOM

4 years ago

great information,..!!

shopping online

4 years ago

exiting info,..!!

hot lingerie

4 years ago

i hope god bless you,..!

BEST TERMLIFE INSURANCES

4 years ago

sir your information so exciting,..!!

Federico

4 years ago

Nice work but I can’t find MessageBox :.(

free 3d wallpaper

4 years ago

very good job.
i like it.

free 3d wallpaper

4 years ago

Thanks for the great response guys! Turns out Safari/Chrome have an opacity 1 issue, so changed the reset el to get opacity 0.99 which fixed it in both browsers.

free 3d wallpaper

4 years ago

thank u a lot

3d prototyping

4 years ago

Exciting! Thanks!

Krutarth

4 years ago

Also, I want to set sequence of the widgets. That shold br done by user as he/she likes.
How can i achieve that in Extjs.??

liberar movil

4 years ago

I like it !
Thank you for this post, It was a great read which was extremely helpful.

regards

Michael Schilder

3 years ago

This is cool, and is exactly what i need. However in IE, I get a very perciptible flicker as I mouse over the widget. The reason is that as I move from one star to the next, the onStartOut triggers, repainting the widget to the original rating, then the next onStarOver fires, painting the new rating. Basically for every move, it fires fillTo function twice. It’s usable, but the flicker is distracting. I don’t see this in FF at all, but it’s pretty obvious in IE.

I was trying to play around with flagging whether we are entering a new rating, or leaving the widget entirely, and not quite managing it. I think I need a onWidgetOut event somewhere, but haven’t quite figured out where to put that.

Ladainian

3 years ago

Thanks guys, I just about lost it lokoing for this.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.