Extjs扩张 MicProgressBar

Extjs扩展 MicProgressBar

最近项目需要做了以下扩展。

扩展如下图所示：

?

以下是实现的代码：

?

?

var fp = new Ext.FormPanel({title : 'test',width : 480,height : 280,labelAlign : 'right',bodyStyle : 'padding:8px',frame : true,defaults : {xtype:'micprogressbar'},items : [{fieldLabel : '2010',ref : 'monthField',value :80},{fieldLabel : '2009',bgColor : 'red',value :90},{fieldLabel : '2008',bgColor : '#000000',value :46},{fieldLabel : '2007',bgColor : 'gray',value :30},{fieldLabel : '2006',bgColor : '#990000',value :50},{fieldLabel : '2005',bgColor : 'blue',value :65}],buttonAlign : 'center',buttons : [{text:'setValue(月占有率65%)',handler:function(){fp.monthField.setValue(65);}},{text:'getValue(月占有率)',handler:function(){var n = fp.monthField.getValue();alert(n);}},{text:'reset(月占有率)',handler:function(){fp.monthField.reset();}}]});fp.render(Ext.getBody());

?

?

ux组件代码：

?

MicProgressBar = function(cfg){this.bgColor = "orange";this.borderColor = "#008000";this.width = 330;this.value = 0;this.tmpValue = 0;Ext.apply(this, cfg);MicProgressBar.superclass.constructor.call(this,{border : false,autoHeight : true,frame : false});}Ext.extend(MicProgressBar, Ext.Panel, {initComponent : function(){MicProgressBar.superclass.initComponent.call(this);this.on('afterrender', function(){this.buildUi();},this);},getTplStr : function(v){return String.format('<div>'+'<div style="border:1px solid {0};height:10px;width:{1}px;margin:4px 0px 1px 0px;float:left;">'+'<div style="float:left;background:{2};width:{3}%;height:10px;"><div></div></div>'+'</div>'+'<div style="text-align:center;float:right;width:40px;margin:3px 0px 1px 0px;height:10px;font-size:12px;">{3}%</div>'+'</div>', this.borderColor,(this.width-70),this.bgColor, v);},buildUi : function(){this.body.update('');this.tmpValue = this.value;this.body.insertHtml('beforeEnd',this.getTplStr(this.tmpValue));},getValue : function(){return this.tmpValue;},setValue : function(v){this.body.update('');this.tmpValue = v;this.body.insertHtml('beforeEnd',this.getTplStr(v));},reset : function(){this.body.update('');this.buildUi();}});Ext.reg('micprogressbar',MicProgressBar);

?