sencha touch 评分扩展

原版 ：https://market.sencha.com/extensions/sencha-touch-2-rating-star-field

效果：

我的改造版（只是类名变了）：

 Ext.define('ux.field.Rating', {
     xtype: 'fieldRating',
     extend: 'Ext.field.Field',
     config: {
         baseCls: Ext.baseCSSPrefix + 'field x-rating',

         /**
          * @cfg {Number} value
          * 默认值 0-5
          */
         value: 0,

         /**
          * @cfg {Boolean} editable
          * 是否只读
          */
         editable: true,

         /**
          * @cfg
          * @inheritdoc
          */
         name: 'rating',

         /**
          * @cfg
          * @private
          *是否显示清除按钮
          */
         clearIcon: false,

         /**
          * @cfg
          * @private
          */
         component: {
             hidden: true,
             xtype: 'input',
             type: 'text',
             useMask: true
         },
         /**
          * @cfg {Boolean} labelMaskTap
          * @private
          */
     },
     //布局模版
     getElementConfig: function () {
         var prefix = Ext.baseCSSPrefix;
         return {
             reference: 'element',
             className: 'x-container',
             children: [{
                 reference: 'label',
                 cls: prefix + 'form-label',
                 children: [{
                     reference: 'labelspan',
                     tag: 'span'
                 }]
             }, {
                 reference: 'innerElement',
                 cls: prefix + 'component-outer',
                 html: ' ' +
                 '<div class="starContainer">' +
                     '<div class="left"></div>' +
                     '<div class="x-button x-button-action star star1"></div>' +
                     '<div class="center"></div>' +
                     '<div class="x-button x-button-action star star2"></div>' +
                     '<div class="center"></div>' +
                     '<div class="x-button x-button-action star star3"></div>' +
                     '<div class="center"></div>' +
                     '<div class="x-button x-button-action star star4"></div>' +
                     '<div class="center"></div>' +
                     '<div class="x-button x-button-action star star5"></div>' +
                     '<div class="right"></div>' +
                 '</div>' +
                 '<div class="starFakeContainer"></div>',
             }]
         };
     },
     initialize: function () {
         var me = this;
         me.callParent();
         me.on('painted', function () {
             me.starFakeContainer = me.innerElement.down('.starFakeContainer');
             me.star1 = me.innerElement.down('.star1');
             me.star2 = me.innerElement.down('.star2');
             me.star3 = me.innerElement.down('.star3');
             me.star4 = me.innerElement.down('.star4');
             me.star5 = me.innerElement.down('.star5');
             var value = me.getValue();
             me.orignalValue = value;
             me.activateStars(value);

             me.setEditable(me.getEditable());
         });
     },
     applyEditable: function (editable) {
         var me = this;
         if (!me.starFakeContainer) {
             return editable;
         }
         if (editable) {
             me.starFakeContainer.on({
                 touchstart: me.onTouchStartMove,
                 touchmove: me.onTouchStartMove,
                 touchend: me.onTouchEnd,
                 scope: me
             });
         } else {
             me.starFakeContainer.un({
                 touchstart: me.onTouchStartMove,
                 touchmove: me.onTouchStartMove,
                 touchend: me.onTouchEnd,
                 scope: me
             });
         }
         return editable;
     },
     applyValue: function (value) {
         var me = this;
         if (value < 0) {
             value = 0;
         } else if (value > 5) {
             value = 5;
         }
         me.activateStars(value);
         return value;
     },
     activateStars: function (rating) {
         if (!this['star1']) {
             return;
         }
         for (var i = 1; i <= 5; i++) {
             this['star' + i].removeCls('active');
         }
         for (var i = 1; i <= rating; i++) {
             this['star' + i].addCls('active');
         }
     },
     buildRating: function (delta) {
         var width = this.starFakeContainer.getWidth();

         if (delta >= width) {
             delta = width;
         } else if (delta <= 0) {
             delta = 0;
         }
         delta = delta / width * 100;
         var onePart = ((width / 12) / width * 100);
         var rating = 0;
         if (delta >= (onePart * 9)) {
             rating = 5;
         } else if (delta >= (onePart * 7)) {
             rating = 4;
         } else if (delta >= (onePart * 5)) {
             rating = 3;
         } else if (delta >= (onePart * 3)) {
             rating = 2;
         } else if (delta >= onePart) {
             rating = 1;
         }
         this.setValue(rating);
         return delta;
     },
     onTouchStartMove: function (a) {
         var me = this;
         var offsetLeft = me.innerElement.dom.offsetLeft;
         if (offsetLeft) {
             me.buildRating(a.pageX - offsetLeft);
         }
     },
     onTouchEnd: function (a) {
         var me = this;
         var offsetLeft = me.innerElement.dom.offsetLeft;
         if (offsetLeft) {
             me.buildRating(a.pageX - offsetLeft);
         }
         var value = me.getValue();
         if (me.orignalValue != value) {
             me.orignalValue = value;
             me.fireEvent('change', this, value, me.orignalValue);
         }
     }
 });

所需css：

 /*#region 评分*/
 .x-rating {
     min-height:25px;
 }
 .x-rating .x-component-outer {
     position:relative;
     padding:0.6em;
     min-height:40px;
 }
 .x-rating .starContainer,.x-rating .starFakeContainer {
     position:absolute;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
 }
 .x-rating .starFakeContainer {
     z-index:;
 }
 .x-rating .starContainer {
     display:-webkit-box;
     -webkit-box-align:center;
     -webkit-box-pack:center;
 }
 .x-rating .starContainer .center,.x-rating .starContainer .left,.x-rating .starContainer .right {
     -webkit-box-flex:1
 }
 .x-rating .star {
     border:0px !important;
     padding:0px !important;
     margin:0px 0px 0px -12.5px !important;
     position:absolute;
     left:16.66%;
     top:5px;
     -webkit-mask:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMAUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALMw9IgAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAB7BAAAewQHDaVRTAAAAGHRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuMzUw7rOfAAACdElEQVR4Xu2SSZaDMAwFc/9LpwkUBGN5kDy181yLDtbwVYt+vQczvcCrOIBfK6MFXht8Gplc4HO/0GBugeN+mcHUApzfoGBhZgGO71AyMLEAp4Ginp8RMOfYFx9QVmNd5OwNGlpmFeCoAy0lkwpw8gFNHXMKcNCDtorfErCEmXaCMKChroAhzbISgREFlQX0cYaNKAzlU1tAnadfSMBYNtUFtIHq+SQM5jKbAEeiMJrJZAKcSMBwHi0EVJmKYdKzYCWDrFFS1bAeJT5EUCGEyQS6rNaFbJdnldmGcOjketPuBmc3AQqD+A8CQw2O/wEeA9j/BwYa7Lc/fwYZHKf3v0MMuHz8DDA4D/Pb3YCzX4HOBhy9C3Q14OTG7bOjAQc/3L+7GXBux3l0MuDYgfvqYsApeDw7GHDo5PlubsCZC6/Q2IAjX/xKUwNO3BBKDQ04cEeqNTMg3kEsNjIg3EWuNjEg+kGg3MCA4CehenUDYj2CjcoGhPqEO1UNiBSItCoaECgR61UzIE4k2qxkQJhMvFtFgaQAKYFyA3JCNBcgJsgSSA0QUwBBIZbAEmgvkLiQaleAqABLYAl0EIifSHSrQJjMElgC0S4BxRAnsgRmF8ifClEkwFj2nESBAEM7lEIwJRHtxWDmgrIMMxJGASYcaEkwIWESoO9B24e+hEWAtgQTT+hKqNPoBWHMhZ5EpMeyC70IDLrQE9AJ0EnA8B06AhoB6hmw8IW6QL4A1UxYOqEqkCtATQGLB9QE8gSoKGF5h5JPpHNBwQABGxR80gI8jRBSIMDLTiImIcB3GXYBvooxCdQ7/yGcpm/Y6HVHzxIYLPB+/wEfB7NVrMbQ3wAAAABJRU5ErkJggg==') /*../icons/star.png*/ left center no-repeat;
     -webkit-mask-size:25px 25px;
     background-color:#ff0000;
     width:25px;
     height:25px;
     opacity:.2;
     -webkit-transform:scale(1,1);
 }
 .x-rating .star2 {
     left:33.33%;
 }
 .x-rating .star3 {
     left:49.99%;
 }
 .x-rating .star4 {
     left:66.66%;
 }
 .x-rating .star5 {
     left:83.33%;
 }
 .x-rating .star.active {
     -webkit-transform:scale(1,1);
     opacity:;
 }
 /*#endregion*/

使用（请自行调整样式）：

 Ext.define('app.view.user.orders.Info', {
     extend: 'Ext.form.Panel',
     xtype: 'ordersInfo',
     alternateClassName: 'ordersInfo',
     requires: ['ux.field.Rating'],
     config: {
         title: '订单详情',
         cls: 'info',
         scrollable: {
             direction: 'vertical',
             indicators: false
         },
         items: [
         {
             margin: 5,
             cls: 'border',
             items: [{
                 label: '描述相符',
                 xtype: 'fieldRating',
                 name:'miaoShu'
             },
             {
                 label: '服务态度',
                 xtype: 'fieldRating',
                 name: 'fuwu'
             },
             {
                 label: '发货速度',
                 xtype: 'fieldRating',
                 name: 'fahuo'
             }]
         },
         {
             xtype: 'button',
             margin: '10 20 10 20',
             action: 'save',
             text: '评分',
             ui: 'orange'
         }]
     },
     initialize: function () {
         var me = this,
         button = me.down('button');
         button.on({
             tap: 'onSave',
             scope: me
         });
         me.callParent(arguments);
     },
     updateData: function (data) {
         var me = this,
         info = me.down('#info');
         info.setData(data);
     },
     //保存数据
     onSave: function () {
         var me = this;
         if (util.valid(Ext.create('app.model.Rating'), me)) {
             me.fireEvent('save', me, me.getValues());
         }
     }
 });

附送验证模型：

 //评分
 Ext.define('app.model.Rating', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'miaoShu',
             type: 'int'
         },
         {
             name: 'fuwu',
             type: 'string'
         },
         {
             name: 'fahuo',
             type: 'string'
         }],
         validations: [{
             field: 'miaoShu',
             type: 'format',
             matcher: /[1-5]/,
             message: '请对描述相符进行评分!'
         }, {
             field: 'fuwu',
             type: 'format',
             matcher: /[1-5]/,
             message: '请对服务态度进行评分!'
         }, {
             field: 'fahuo',
             type: 'format',
             matcher: /[1-5]/,
             message: '请对发货速度进行评分!'
         }]
     }
 });