上一文章是擴展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
==================================系列文章==========================================
本篇文章：7.10 ExtJS 4.2 評分組件
