他人Extjs扩展的MicProgressBar

扩展后組件效果如下图所示：

 

 ux组件代码：

1. MicProgressBar = function(cfg){  
2.     this .bgColor =  "orange" ;  
3.     this .borderColor =  "#008000" ;  
4.     this .width =  330 ;  
5.     this .value =  0 ;  
6.     this .tmpValue =  0 ;  
7.     Ext.apply(this , cfg);  
8.     MicProgressBar.superclass.constructor.call(this ,{  
9.         border : false ,  
10.         autoHeight : true ,  
11.         frame : false   
12.     });  
13. }  
14. Ext.extend(MicProgressBar, Ext.Panel, {  
15.     initComponent : function(){  
16.         MicProgressBar.superclass.initComponent.call(this );  
17.         this .on( 'afterrender' , function(){  
18.             this .buildUi();  
19.         },this );  
20.     },  
21.     getTplStr : function(v){  
22.         return  String.format(  
23.             '<div>' +  
24.                 '<div style="border:1px solid {0};height:10px;width:{1}px;margin:4px 0px 1px 0px;float:left;">' +        
25.                     '<div style="float:left;background:{2};width:{3}%;height:10px;"><div></div></div>' +  
26.                 '</div>' +  
27.             '<div style="text-align:center;float:right;width:40px;margin:3px 0px 1px 0px;height:10px;font-size:12px;">{3}%</div>' +            
28.         '</div>' ,  this .borderColor,( this .width- 70 ), this .bgColor, v);  
29.     },  
30.     buildUi : function(){  
31.         this .body.update( '' );  
32.         this .tmpValue =  this .value;  
33.         this .body.insertHtml( 'beforeEnd' , this .getTplStr( this .tmpValue));  
34.     },  
35.     getValue : function(){  
36.         return   this .tmpValue;  
37.     },  
38.     setValue : function(v){  
39.         this .body.update( '' );  
40.         this .tmpValue = v;  
41.         this .body.insertHtml( 'beforeEnd' , this .getTplStr(v));  
42.     },  
43.     reset : function(){  
44.         this .body.update( '' );  
45.         this .buildUi();  
46.     }  
47. });  
48. Ext.reg('micprogressbar' ,MicProgressBar);
    

以下是实现的代码：

1. var  fp =  new  Ext.FormPanel({  
2.         title : 'test' ,  
3.         width : 480,  
4.         height : 280,  
5.         labelAlign : 'right' ,  
6.         bodyStyle : 'padding:8px' ,  
7.         frame : true ,  
8.         defaults : {xtype:'micprogressbar' },  
9.         items : [  
10.             {  
11.                 fieldLabel : '2010' ,  
12.                 ref : 'monthField' ,  
13.                 value :80  
14.             },{  
15.                 fieldLabel : '2009' ,  
16.                 bgColor : 'red' ,  
17.                 value :90  
18.             },{  
19.                 fieldLabel : '2008' ,  
20.                 bgColor : '#000000' ,  
21.                 value :46  
22.             },{  
23.                 fieldLabel : '2007' ,  
24.                 bgColor : 'gray' ,  
25.                 value :30  
26.             },{  
27.                 fieldLabel : '2006' ,  
28.                 bgColor : '#990000' ,  
29.                 value :50  
30.             },{  
31.                 fieldLabel : '2005' ,  
32.                 bgColor : 'blue' ,  
33.                 value :65  
34.             }  
35.         ],  
36.         buttonAlign : 'center' ,  
37.         buttons : [  
38.             {text:'setValue(月占有率65%)' ,handler: function (){  
39.                 fp.monthField.setValue(65);  
40.             }},  
41.             {text:'getValue(月占有率)' ,handler: function (){  
42.                 var  n = fp.monthField.getValue();  
43.                 alert(n);  
44.             }},  
45.             {text:'reset(月占有率)' ,handler: function (){  
46.                 fp.monthField.reset();  
47.             }}  
48.         ]  
49.     });  
50.     fp.render(Ext.getBody());