原版 ：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: '请对发货速度进行评分!'
}]
}
});