ExtJS（3）- 自定義組件（星級評分）

今天介紹ExtJS的組件開發，這里以星級評分為示例，首先來看看效果圖：

然后是功能操作：鼠標移動到五個星星上面時，會有tooltip顯示當前的分值。如圖：鼠標懸停在第四顆星星時前四顆星星顯示高亮笑臉，當點擊下去時鎖定笑臉并且設定份數為4。

然后我們來說一下實現原理，Ext的組件基本單元是Ext.Component，所以自定義組件可以繼承Component，然后顯示部分直接用html來顯示，包括css和動態事件都可以直接在html上編輯添加。

接下來我們來看代碼：

Ext.define('Pactera.widget.StarRating',?{
	alias:"widget.starRating",
	extend:?'Ext.Component',
	
	afterRender:function(){
		?this.callParent();
	},
	
	//label:?'score',//
	//labelWidth:?60,
	//lableAlign:'right',//left,center,right
	//aMsg:?[],?
	/*[
		"很不滿意|差得太離譜，與賣家描述的嚴重不符，非常不滿",
		"不滿意|部分有破損，與賣家描述的不符，不滿意",
		"一般|質量一般，沒有賣家描述的那么好",
		"滿意|質量不錯，與賣家描述的基本一致，還是挺滿意的",
		"非常滿意|質量非常好，與賣家描述的完全一致，非常滿意"
		]*/
	
	width:?275,
????height:?50,
????padding:?10,
????style:?{
????????color:?'#000000',
????????backgroundColor:'#FFFFFF'
????},
	initComponent:?function(){
		var?me?=?this;
		var?date?=?new?Date();
		var?dateTime?=?date.getTime();
		var?starId?=?me.id?"star_"+me.id:"star"+dateTime;
		
		var?label?=?me.label?me.label:'評分';
		var?labelWidth?=?me.labelWidth?me.labelWidth-13:87;
		var?labelAlign?=?me.lableAlign?me.lableAlign:'right';
		var?thisWidth?=?me.width?me.width:130;
		var?aMsg?=?[
			"Unacceptable|Unacceptable",
			"Poor|Poor",
			"Fair|Fair",
			"Good|Good",
			"Excellent|Excellent"
			]
		if(me.aMsg){
			aMsg?=?me.aMsg;
		}
		
		var?html?=?''
		+?''+?label?+?''
		+?':'
	????+?	'
'
	????+????	'
1
'
	????+????	'
2
'
	????+????	'
3
'
	????+????	'
4
'
	????+????	'
5
'
	????+	'
'
	????+''
	????+'
'
		+'