extjs 图片上传预览表单组件

项目中需要在表单中使用图片上传且预览组件，网上搜了下解决方案，实在是没什么可参考，于是自己动手写了个，效果如下：

使用如下：

{
					fieldLabel : "头像",
					xtype : "imagefield",
					value : "images/example/default_pic.png2",
					btnCfg : {
						text : "上传",
						scope : this,
						handler : function(a,d){
							alert(a.getValue())
							a.setValue("images/example/default_pic.png")
						}
					}
				}

 实现代码：

/**
 * 图片框 Ext.form.ImageField
 * @cfg btnCfg 配置形如 {
			text : "click",
			handler :function(imageFiled){
			
			},
			scope : this
		}} 
	@cfg	imgCfg ： {
			cls : "",
			style : "margin: 0px 0px 1px; border: 1px solid rgb(204, 204, 204);  width: 100; height: 100px;"
		
*/	
Ext.form.ImageField = Ext.extend(Ext.form.DisplayField,{
	initComponent : function(){
		this.initContents();
		Ext.form.ImageField.superclass.initComponent.call(this);
	},
	//private
	initContents : function(){
		this.btnId = Ext.id();
		this.imgId = Ext.id()
		this.btnCfg  = Ext.applyIf(this.btnCfg||{},{
			text : "click",
			handler :Ext.emptyFn,
			scope : this
		})
		this.imgCfg  = Ext.applyIf(this.btnCfg||{},{
			cls : "",
			style : "margin: 0px 0px 1px; border: 1px solid rgb(204, 204, 204);  width: 100; height: 100px;"
		})
		this.html =  '' +
		'
 ';
	},
	//override
	afterRender : function(){
		Ext.form.ImageField.superclass.afterRender.call(this);
		this.addBtnClickEvent.defer(100,this);
	},
	//private
	addBtnClickEvent : function(){
		Ext.fly(this.btnId).on("click",this.btnCfg.handler.createDelegate(this.btnCfg.scope,[this]));
		
	},
	//override
	initValue : Ext.emptyFn,
	//override
 	getRawValue : function(){
	       var imgEl =  Ext.fly(this.imgId);
	       if(imgEl){
	    	   return imgEl.getAttribute("src");
	       }
        return "";
    },
    //override
    setRawValue : function(v){
        var imgEl =  Ext.fly(this.imgId);
	       if(imgEl){
	    	   imgEl.dom.setAttribute("src",v);
	       }
        return true;
    },
	destroy : function(){
        if(!this.isDestroyed){
        	Ext.fly(this.btnId).removeAllListeners () ;
        }
        Ext.form.ImageField.superclass.destroy.call(this);
    }
})
Ext.reg('imagefield', Ext.form.ImageField);