你的位置:首页 > Java教程

[Java教程]ExtJS 4.2 评分组件


上一文章是扩展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

  

==================================系列文章==========================================

本篇文章:7.10 ExtJS 4.2 评分组件

Web开发之路系列文章