旁人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()); ?

?