sencha touch 评分扩展.docx

上传人：b****8 文档编号：10982521 上传时间：2023-02-24 格式：DOCX 页数：16 大小：31.93KB

下载相关举报

第1页 / 共16页

第2页 / 共16页

第3页 / 共16页

第4页 / 共16页

第5页 / 共16页

点击查看更多>>

下载资源

资源描述

sencha touch 评分扩展.docx

《sencha touch 评分扩展.docx》由会员分享，可在线阅读，更多相关《sencha touch 评分扩展.docx（16页珍藏版）》请在冰豆网上搜索。

sencha touch 评分扩展.docx

senchatouch评分扩展

原版：

效果：

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

Ext.define（'ux.Rating',{

xtype:

'fieldRating',

extend:

'Ext.field.Field',

config:

{

baseCls:

Ext.baseCSSPrefix+'fieldx-rating',

/**

*@cfg{Number}value

*默认值0-5

value:

/**

*@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（）{

varprefix=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:

' '+

''+

'',

}]

};

initialize:

function（）{

varme=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'）;

varvalue=me.getValue（）;

me.orignalValue=value;

me.activateStars（value）;

me.setEditable（me.getEditable（））;

}）;

applyEditable:

function（editable）{

varme=this;

if（!

me.starFakeContainer）{

returneditable;

}

if（editable）{

me.starFakeContainer.on（{

touchstart:

me.onTouchStartMove,

touchmove:

me.onTouchStartMove,

touchend:

me.onTouchEnd,

scope:

}）;

}else{

me.starFakeContainer.un（{

touchstart:

me.onTouchStartMove,

touchmove:

me.onTouchStartMove,

touchend:

me.onTouchEnd,

scope:

}）;

}

returneditable;

applyValue:

function（value）{

varme=this;

if（value<0）{

value=0;

}elseif（value>5）{

value=5;

}

me.activateStars（value）;

returnvalue;

activateStars:

function（rating）{

if（!

this['star1']）{

return;

}

for（vari=1;i<=5;i++）{

this['star'+i].removeCls（'active'）;

}

for（vari=1;i<=rating;i++）{

this['star'+i].addCls（'active'）;

}

buildRating:

function（delta）{

varwidth=this.starFakeContainer.getWidth（）;

if（delta>=width）{

delta=width;

}elseif（delta<=0）{

delta=0;

}

delta=delta/width*100;

varonePart=（（width/12）/width*100）;

varrating=0;

if（delta>=（onePart*9））{

rating=5;

}elseif（delta>=（onePart*7））{

rating=4;

}elseif（delta>=（onePart*5））{

rating=3;

}elseif（delta>=（onePart*3））{

rating=2;

}elseif（delta>=onePart）{

rating=1;

}

this.setValue（rating）;

returndelta;

onTouchStartMove:

function（a）{

varme=this;

varoffsetLeft=me.innerElement.dom.offsetLeft;

if（offsetLeft）{

me.buildRating（a.pageX-offsetLeft）;

}

onTouchEnd:

function（a）{

varme=this;

varoffsetLeft=me.innerElement.dom.offsetLeft;

if（offsetLeft）{

me.buildRating（a.pageX-offsetLeft）;

}

varvalue=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:

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.starContainer.center,.x-rating.starContainer.left,.x-rating.starContainer.right{

-webkit-box-flex:

}

.x-rating.star{

border:

0px!

important;

padding:

0px!

important;

margin:

0px0px0px-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*/leftcenterno-repeat;

-webkit-mask-size:

25px25px;

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*/

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

1 Ext.define（'app.view.user.orders.Info',{

2extend:

'Ext.form.Panel',

3xtype:

'ordersInfo',

4alternateClassName:

'ordersInfo',

5requires:

['ux.field.Rating'],

6config:

{

7title:

'订单详情',

8//cls:

'info',

9scrollable:

{

10direction:

'vertical',

11indicators:

false

12},

13items:

[

14{

15margin:

16cls:

'border',

17items:

[{

18label:

'描述相符',

19xtype:

'fieldRating',

20name:

'miaoShu'

21},

22{

23label:

'服务态度',

24xtype:

'fieldRating',

25name:

'fuwu'

26},

27{

28label:

'发货速度',

29xtype:

'fieldRating',

30name:

'fahuo'

31}]

32},

33{

34xtype:

'button',

展开阅读全文