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);