ExtJS 4.2 评分组件

上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。

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开发之路系列文章

posted on 2016-10-16 22:07 FangMu 阅读(1791) 评论(0) 编辑收藏举报

搜索

随笔分类 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

ExtJS 4.2 评分组件

目录

1. 介绍

1.1 JavaScript代码

1.2 Css样式

1.3 图标

1.4 成员

2. 示例

2.1 运行图

2.2 代码

3. 资源下载

3.1 Demo下载

3.2 在线示例