{
columnWidth: .9,
layout: 'form',
border: false,
items : [{
inputType : "file",
fieldLabel: '上传图片',
name: 'imageupload',
id:'imageupload',
xtype: 'textfield',
anchor: '40%'
}]
},
{
columnWidth: .5,
layout: 'form',
border: false,
items : [
{
xtype: 'box',
id : 'browseImage',
fieldLabel : "预览图片",
autoEl : {
width : 100,
height : 150,
tag : 'img',
//type : 'image',
src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
complete:'off',
id : 'imageBrowse'
}
}
]
}
这是构造上传的FILE的代码,网上看到很多autoCreate代替autoEl,不过查了下最新的3.2版本的API没发现这个,component只有autoEl配置项。
下面是处理预览的代码
//上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
Ext.extend(simpleForm,Ext.form.FormPanel,{
listeners:
{
'render':function(f)
{
this.form.findField('imageupload').on('render',function()
{
Ext.get('imageupload').on('change',function(field,newValue,oldValue )
{
var url = 'file:///'+Ext.get('imageupload').dom.value;
if(img_reg.test(url))
{
if(Ext.isIE)
{
var image = Ext.get('imageBrowse').dom;
image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
}//支持FF
else
{
Ext.get('imageBrowse').dom.src =Ext.get('imageupload').dom.files.item(0).getAsDataURL()
}
}
},this);
},this);
}
}
});