上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。
上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。
目录
1. 介绍
2. 示例
3. 资源下载
1. 介绍
代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件，在此基础上做了移植到ExtJS 4.2，并扩展了默认值、form表单支持等功能。
1.1 JavaScript代码
/*!
* 评分组件
*/
Ext.define('App.Demo.RatingStarFiledDemoTab', {
extend: 'Ext.panel.Panel',
layout: 'fit',
closable: true,
reload: function () {
},
initComponent: function () {
var me = this;
// panel渲染后
me.on('afterrender', function () {
});
var _container = AkExtJS.extjs.createPanel({
layout: 'vbox',
items: [
Ext.create('Ext.form.Display', {
width: '100%',
value: '<h1>评分组件</h1>' +
'<p>文章地址：<a href="http://www.cnblogs.com/polk6/p/5965570.html" target="_blank">http://www.cnblogs.com/polk6/p/5965570.html</a></p>' +
'<p>此处为创建一个新的组件：评分组件</p>'
}),
Ext.create('Js.ux.RatingStarField', {
name: 'speedScore',
fieldLabel: '发货速度',
labelWidth: 60,
width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
name: 'serviceScore',
fieldLabel: '服务态度',
labelWidth: 60,
width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
name: 'desScore',
fieldLabel: '描述相符',
labelWidth: 60,
width: 220,
value:3
}),
Ext.create('Ext.button.Button', {
text: '设置【发货速度】为5星',
handler: function (thisControl, event) {
_container.down('[name=speedScore]').setValue(5);
}
}),
Ext.create('Ext.button.Button', {
text: '取值',
handler: function (thisControl, event) {
var txt = '发货速度：' + _container.down('[name=speedScore]').getValue() + '<br/>' +
'服务态度：' + _container.down('[name=serviceScore]').getValue() + '<br/>' +
'描述相符：' + _container.down('[name=desScore]').getValue() + '<br/>';
Ext.Msg.alert('系统提示', txt);
}
}),
]
});
Ext.applyIf(me, {
items: [_container]
});
me.callParent(arguments);
}
});
1.2 Css样式
.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:1}
.x-rating .star{border:0px !important;padding:0px !important;margin:0px 0px 0px -12.5px !important;position:absolute; left:16.66%; -webkit-mask:url(/images/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:1;}
1.3 图标
1.4 成员
| 名称 | 类型 | 说明 |
| value | 属性 | 初始化时指定星数，数值范围0~5。默认为0。 |
| setValue(value) | 方法 | 设置评分组件的数值，数值范围0~5。 |
| getValue() | 方法 | 获取评分组件的数值。 |
2. 示例
2.1 运行图
2.2 代码
Ext.create('Js.ux.RatingStarField', {
fieldLabel: '发货速度',
labelWidth: 60,
width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
fieldLabel: '服务态度',
labelWidth: 60,
width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
fieldLabel: '描述相符',
labelWidth: 60,
width: 220,
value:3
})
3. 资源下载
3.1 Demo下载
地址：ExtJS4.2_RatingStarDemo.zip
3.2 在线示例
地址：http://www.akmsg.com/ExtJS/index.html#App.Demo.RatingStarFiledDemoTab
