最近项目需要做了以下扩展。
扩展如下图所示:
以下是实现的代码:
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);
- 大小: 28.1 KB
分享到:
相关推荐
extjs扩展教程 extjs扩展教程extjs扩展教程
EXTJS3.0扩展例子集合...内含源代码...
ExtJs:收集基于ExtJs扩展的一些控件 ExtJs:收集基于ExtJs扩展的一些控件
本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片
dreamweaver Extjs 扩展插件语法提示 在dreamweaver中可以显示Extjs语法提示,提升开发效率,用起来很方便 分.zxp和.mxp两种扩展 cc2015,cs6均可用。 扩展安装需要到用Adobe Extension Manager,请自行在网上百度,...
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
ExtJS扩展包(ExtJsExtenderControl)ExtExtenders
extjs扩展年度控件,EXTJS里的时间控件的年度重写
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
ExtJS扩展:lovcombo(已解决Bug版) 内赋详细使用说明
extjs扩展标记 ,实现extjs的jsp标签,功能强大
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
实现对Ext树进行分页的组件,扩展了TreeLaoder和PagingToobar
扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) EXTJS4.1文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--...
Extjs表单VTYPE扩展,方便验证!
一个功能完整的增删改查Extjs Grid 扩展实例.
Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-examples-ux 89
extjs多选 下拉框扩展
ExtJs中datetimefield扩展,不缺少任何文件,可以直接浏览效果,查看扩展代码
扩展ext的分页工具条 带选择页数的配置 采用Ext4.2