他人Extjs扩展的MicProgressBar

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

 

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

以下是实现的代码：

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