Sencha Touch 2: Ext.ux.touch.Rating

Finally found some time to upgrade simple, but very useful rating control for Sencha Touch community.

image

GitHub (see branch sencha2): https://github.com/podlipensky/Ext.ux.touch.Rating/tree/sencha2

Demo: http://podlipensky.com/sencha2/rating/example/

Sencha Touch team did a great job in this release, but it looks like a lot of changes were made. Control’s architecture and lifecycle was changed drastically. For example, there is no render or afterrender events, but you can use painted event instead (although it occurs each time control became visible).

Anyway, I think they’re on the right way, and for those who haven’t migrated from Sencha Touch 1.x to 2.0, I’d recommend to read the following resources:

http://www.sencha.com/conference/session/migrating-from-touch-1.x-to-2.0

http://www.sencha.com/learn/upgrading-to-sencha-touch-2-pr2/

http://francisshanahan.com/index.php/2011/sencha-touch-2-0-mvc-in-5-minutes-or-less/

http://docs.sencha.com/touch/2-0/#!/video/migrating-from-1-to-2

Ext.ux.touch.Rating 2.0 control and its configuration is different from 1.x version, so please review changelog before migrating. Please note that it doesn’t support items collection in configuration anymore (it will be generated internally in any case). Here is an example of Ext.ux.touch.Rating field configuration:

{ 
       xtype: 'rating', 
       label: 'Star w/ clear',                               
       itemsCount: 5, 
       itemCls: 'x-rating-star', 
       itemHoverCls: 'x-rating-star-hover', 
       clearIcon: true //show clear icon right after stars 
}

or

new Ext.ux.touch.Rating({// alternative way to instantiate class in ST 2.0
       itemsCount: 5, 
       label: 'Image less', 
       cls: 'x-imageless-rating', 
       itemCls: 'x-imageless-star', 
       itemHoverCls: 'x-imageless-hover' 
})

I didn’t migrate experimental versions of rating control, such as Ext.ux.touch.CirlceRating. But added image-less version of the rating control for those who cares about mobile page weight (and performance overall).

Also I added an example of rating-as-action-sheet usage:

image

Enjoy!

  • zeev

    Hi thanks for it.But I’m having some problems with it, I downloaded the sencha 2 version, but I’m getting an exception when the file is loading:
    “Uncaught TypeError: undefined is not a function Ext.ux.touch.Rating.js:98″
    The file is the same file from the working example.
    The problem is here: “component: { tpl: new Ext.XTemplate(“.
    Do you have any idea what’s the problem?
    Thanks!

  • http://twitter.com/magnetica73 MAGNETICA Dev

    hi and thanks for your great extension.

    i have a little problem..
    i need to set the value programmatically.
    if I do it in my main cntroller launch event, i can see right values in debug but stars aren’t updated.
    id I do a setValue with a button tap event, stars are updated correctly.
    any suggestion?
    thanks in advance

  • http://www.facebook.com/profile.php?id=1616311515 Fred Rick Akpotosu-Nartey

    it is unfurtunately not working with sencha touch 2.1

  • Rando

    Great plugin!