项目中需要在表单中使用图片上传且预览组件,网上搜了下解决方案,实在是没什么可参考,于是自己动手写了个,效果如下:
使用如下:
{
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 = '<img id="'+this.imgId+'" style="'+this.imgCfg.style+'" src="'+(this.value||Ext.BLANK_IMAGE_URL)+'" >' +
'<br> <input size="20" type="button" ' +'value="'+this.btnCfg.text+'" id="'+this.btnId+'">';
},
//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);