Sencha Touch: Rating Control

UPDATE 1/30/2011:

Added ability to clear all stars by clicking on clear button. See @showClear config option.

I’d like to introduce you Ext.ux.touch.Rating control for Sencha Touch framework.

GitHub: https://github.com/podlipensky/Ext.ux.touch.Rating

Demo: http://podlipensky.com/sencha/examples/rating/index.html

iPhone star rating iPhone colored rating

The most simplest way to add control on the form is

new Ext.ux.touch.Rating({
    itemsCount : 5,
    label : 'Star',
    inputCls : 'x-rating-star-input',
    itemCls : 'x-rating-star',
    itemHoverCls : 'x-rating-star-hover'
})

itemsCount describes how many stars (or other elements) will be in rating control.

inputCls is the class which will be applied to stars container and it’s intent is to take care of underlying stars elements. It may look like

.x-rating-star-input div{
    display: block;
    float: left;
    text-indent: -9999px;
}

itemCls is the class which will be applied to each star by default.

.x-rating-star {
    background-image: url('data:image/png;base64,R0lGODlhGAAYAOZNAP////j4+Pv7+/f39/n5+fr6+vb29vLy8vT09PPz8/7+/vz8/N3d3c3Nze/v762trevr6/39/efn5+zs7O3t7bi4uNDQ0PHx8dXV1ejo6MnJyeXl5dzc3KioqN7e3sfHx9LS0r6+vrq6utnZ2fDw8MzMzOrq6sXFxbm5ueTk5OPj4+Li4tHR0bCwsMHBwbW1tdvb28vLy+7u7sPDw/X19crKytjY2Le3t6SkpKurq7S0tOHh4ebm5tbW1qenp56enunp6aysrK6urtra2sLCws/Pz8DAwL29vby8vN/f37Ozs9PT09fX1////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAE0ALAAAAAAYABgAAAf/gE2Cg4QcJQGEiYqJEwwkNYuRiTUAAAwXkpIUHpUBMZmRGgaVACMHoIkOnKQDDaiCNBA9AaSVGxkIixMsSyNJEjIFtaQJJjtDGBYeCk0vJsLDCtLDlQIOGkxNQhkDC6QKERELC+EKpAsEBx+uISgSBgEEAvP09QQBARcWORBNBkc3eMArUM8evgtFHqwYNMDIixQ0AhSYSHHigAEOGjxQkYiAiwpABhAYSXKkgQMgHqRYRKAChwH4YsYcAKHCBkknGAS4aKCngYsDKIjIJEJCAAMIkiqFZ+BEBEkiKCBIQDXBgaoIBljot0hBCBkHDjhQwSIGjAlhD2AAEenaARIbPTQqQdHBBQMKBzggiQSDyAoLLVqUuFDARoUOMxhgeBApw48OQT5MIBQAgw4fOEJEWtDgg4RICEDM4PqqdCAAOw==');
    background-position: center;
    background-repeat:no-repeat;
    width: 32px;
    height:32px;
}

Please note that image is base64 encoded to save one more server request, centered and have size.

itemHoverCls is the class which will be applied once user is tapped on it.

.x-rating-star-hover {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA6lJREFUeNq0VdtLFFEc/mZmXfO2FnaxC8XGhmFZRjeCgiDqJXoIeqkoCIQICnos7Km/oKinQAgCX3qIHoIg6ClQhMguCJa6XrKsLTPNdtu5nL7fnDPuaqv71GG+OTNzzvl+999Y6vVq/DMswubN4VxBfAqAnLoMhVYE6jo2OBk4XPcVsP0Llhox+CXIraLnGZJMqwOwcSf85iOOr8F5rKH0wEK5YYebIqhotvWz4CsFeGhH9XJg514KsM5gGk3IFWuylACfZIFTgJLZ1kJ+k+AndiNvHcemJiDPb3aVA9e6hozS+8oKkMuytM9Dv9vaiiwxoUTjdlTWkhwaTdtl/RxmkMJsWX7GIMt7lkH0hAx65oUg9HcLcRKpZpIrfUIUsCsd+Pl2jPsXylvwiaw/ldbYjfxvb6SWB6n9LcRrJAZci8A9zTvEsnOM0VE8XJdaSoClHqzbB6VO0T1JxiwZpqJigkoK1tYDyS20RmnApG+MGElTse8I01XHuo/nxrkvTYVeYKXTiRNjvqUeb/yN76hCXQJIEKtW6tAIoa/mk4cqGUInipm8cH1ykinNoExNA/EcuZyLOD58L8YMmUBdLInGzZowDFygyZSBMKqi2pirl7kNFMQ0TtDihhVMjgG6nNaEqrrWEbj+KD72ac2zSqoW+GOyxjWx8Qyid1mTPbJXzsh7QO3GBmX9Ck4NPzEC7DRxCPlgAMPvqAl7g2treGUQCuMsteSRfHxE3i/idPpuIYukePL2KHGIB/rw7pU5WKT9YsibefIHyUeFpw3nB+/NT9PCgQniMNO1F0NjBZeUg9RH/4jPsxfQ9qHj3zrw5mmVoT9v4PM344Yy5OKaAbolh0e49P5+6Ur2rELGyMixkflR08P8NSzIJBk1zJzMVGqJZsfm5psm54eBa0F1AqEQz8TCMwi/mYr2jBL1DVL5zbi5NV5aQHjQEOTD1tyMBHPZVYX+VBED1lLTtWx6Ncs0sazJHsvR/4hs0FTaRW6RvTmakacA6f3yPc7DDexF75m+/TOyQ1pjFfbtZ5ugGbN/tPukBmzVwvvb0j+cyAKbFR1zalFdTeI6lj5/hz3dLP9fz7lvD7GBuI3uniz63wCNtKqqkhbSO/FY6yIuijIi/IMlUc8DPovmZQ/wOdPL78eII8RLYpK4SmyBG3Sgq9vHcD+QWi9uTC3yyzStR6OLeIrBoV7OZ4ldxLMFewTsmmgjtmE224mJL2k+d5Ru10rhfw4b/3n8FWAAwna8wfz7wJUAAAAASUVORK5CYII=');
    background-position: center;
    background-repeat:no-repeat;
    width: 32px;
    height:32px;
}

Although background image will be changed by this class, it also duplicates size. I guess it will be useful to resize the star under the thumb in some UI’s. Also please note that itemCls will be removed and then itemHoverCls  applied once user is tapped on the star.

In my previous post I mentioned lack of usability in rating control. Therefore I added one experimental behavior to the control – when user tap/drag over some star, all previous stars change their color to (predefined) another color. So user can assume what the current rating is by noticing color of the first star (which is not hovered by thumb anymore).

Picture 14Picture 15Picture 16

Here how you can enable the behavior:

new Ext.ux.touch.Rating({
    singleColorPerValue: true,
    label : 'Color Value',
    inputCls : 'x-rating-star-color',
    items : [{
                hoverCls : 'x-rating-0'
            }, {
                hoverCls : 'x-rating-1'
            }, {
                hoverCls : 'x-rating-2'
            }, {
                hoverCls : 'x-rating-3'
            }, {
                hoverCls : 'x-rating-4'
            }]
})

singleColorPerValue parameter allows to apply hoverCls of last selected star to all previous stars + the selected star.

.x-rating-0 {
    background-color: #BD2C33 !important;
}

As you can see “star” view depends on CSS only, that’s give control flexibility in UI. If you’re aware of SASS, you may implement CSS in the way to support theming in Sencha.

Also I’ve created images-free rating control, represented by circles instead of stars. Just for fun.

Picture 17

Although control has some TODO features and not finished completely yet, I’d appreciate any comments/suggestions regarding the current or future features.

  • Pingback: Sencha Touch 2: Ext.ux.touch.Rating - Pavel Podlipensky

  • I-am Konstantin

    Hello i am a total beginner trying to use this widget. Can you help me set it up? First i added the css and Rating.js to my project (index.html) and imported them this way

    As soon as my app start i get this error: Uncaught ReferenceError: Ext is not defined (at line 35 of Ext.ux.touch.Rating.js)

    Can you please show me how to fix it? Many thanks.