sencha touch 评分扩展.docx

1、sencha touch 评分扩展原版：效果：我的改造版（只是类名变了）：Ext.define(ux.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

2、 * 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, child

3、ren: reference: label, cls: prefix + form-label, children: reference: labelspan, tag: span , reference: innerElement, cls: prefix + component-outer, html:   + + + + + + + + + + + + + + , ; , initialize: function () var me = this; me.callParent(); me.on(painted, function () me.starFakeContainer

4、= 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;

5、 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 );

6、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 5) value = 5; me.activateStars(value); return value; , activateStars: function (rating) if (!t

7、hisstar1) return; for (var i = 1; i = 5; i+) thisstar + i.removeCls(active); for (var i = 1; i = width) delta = width; else 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 (

8、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.offs

9、etLeft; 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：1/*#region 评分*/.x-rating min-height:25px;.x-rating .x-component-outer position:relative; padding

10、: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:10;.x-rating .starContainer display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center;.x-rating .starContaine

11、r .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,iVBORw0KGgoAAAANSUhEUgAAAIA

12、AAACACAMAAAD04JH5AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMAUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

13、AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

14、AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

15、AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALMw9IgAAAEAdFJOU/wBT9wclAAAACXBIWXMAAB7BAAAewQHDaVRTAAAAGHRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdj

16、MuMzUw7rOfAAACdElEQVR4Xu2SSZaDMAwFc/9LpwkUBGN5kDy181yLDtbwVYt+vQczvcCrOIBfK6MFXht8Gplc4HO/0GBugeN+mcHUApzfoGBhZgGO71AyMLEAp4Ginp8RMOfYFx9QVmNd5OwNGlpmFeCoAy0lkwpw8gFNHXMKcNCDtorfErCEmXaCMKChroAhzbISgREFlQX0cYaNKAzlU1tAnadfSMBYNtUFtIHq+SQM5jKbAEeiMJrJZAKcSMBwHi0EVJmKYdKzYCWDrFFS1bAeJT5EUCGEyQS6rNaFbJ

17、dnldmGcOjketPuBmc3AQqD+A8CQw2O/wEeA9j/BwYa7Lc/fwYZHKf3v0MMuHz8DDA4D/Pb3YCzX4HOBhy9C3Q14OTG7bOjAQc/3L+7GXBux3l0MuDYgfvqYsApeDw7GHDo5PlubsCZC6/Q2IAjX/xKUwNO3BBKDQ04cEeqNTMg3kEsNjIg3EWuNjEg+kGg3MCA4CehenUDYj2CjcoGhPqEO1UNiBSItCoaECgR61UzIE4k2qxkQJhMvFtFgaQAKYFyA3JCNBcgJsgSSA0QUwBBIZbAEmgvkLiQaleAqABLYA

18、l0EIifSHSrQJjMElgC0S4BxRAnsgRmF8ifClEkwFj2nESBAEM7lEIwJRHtxWDmgrIMMxJGASYcaEkwIWESoO9B24e+hEWAtgQTT+hKqNPoBWHMhZ5EpMeyC70IDLrQE9AJ0EnA8B06AhoB6hmw8IW6QL4A1UxYOqEqkCtATQGLB9QE8gSoKGF5h5JPpHNBwQABGxR80gI8jRBSIMDLTiImIcB3GXYBvooxCdQ7/yGcpm/Y6HVHzxIYLPB+/wEfB7NVrMbQ3wAAAABJRU5ErkJggg=) /*./icons/star.pn

19、g*/ 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-trans

20、form:scale(1,1); opacity:1;/*#endregion*/使用（请自行调整样式）：1Ext.define(app.view.user.orders.Info, 2 extend: Ext.form.Panel, 3 xtype: ordersInfo, 4 alternateClassName: ordersInfo, 5 requires: ux.field.Rating, 6 config: 7 title: 订单详情, 8 /cls: info, 9 scrollable: 10 direction: vertical,11 indicators: false12 ,13 items: 14 15 margin: 5,16 cls: border,17 items: 18 label: 描述相符,19 xtype: fieldRating,20 name:miaoShu21 ,22 23 label: 服务态度,24 xtype: fieldRating,25 name: fuwu26 ,27 28 label: 发货速度,29 xtype: fieldRating,30 name: fahuo31 32 ,33 34 xtype: button,