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