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

End

Web开发之路系列文章

菜单加载中...