日期:2014-05-16  浏览次数:20388 次

Extjs绚丽上传组件

  相信使用Ext开发的时候,经常会碰到要多文件上传图片的功能,而这个时候开发一个上传的组件是相对比较麻烦,成本较高,这个时候如果我们有一个现成的组件的话,就会省去很多不必要的事情。之前在网上找到了一个非常好用的Ext的上传组件,在这特意分享给大家!

?

<head>
 <title>Ext.ux.UploadDialog user extension.</title>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />  
 <style type='text/css'>
  @import url('../ExtJS/resources/css/ext-all.css');
  @import url('ExtJS.ux/UploadDialog/css/Ext.ux.UploadDialog.css');
  @import url('upload-dialog.css');  
</style>

<body style='overflow: hidden'>
  <!-- ########################################################################################## -->
 <script type='text/javascript' src='../ExtJS/adapter/ext/ext-base.js'></script>
 <script type='text/javascript' src='../ExtJS/ext-all.js'></script>
 <script type='text/javascript' src='ExtJS.ux/UploadDialog/Ext.ux.UploadDialog.js'></script>
<!--<script type='text/javascript' src='ExtJS.ux/UploadDialog/locale/ru.utf-8.js'></script>-->
 <script>
 	Ext.onReady(function(){
 	var dialog = new Ext.ux.UploadDialog.Dialog({
  autoCreate: true,   
          closable: true,   
          collapsible: false,   
          draggable: true,   
          minWidth: 400,         
          minHeight: 200,   
          width: 600,   
          height: 400,   
          permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','png'],   
          proxyDrag: true,   
          resizable: true,   
          constraintoviewport: true,   
          title: '图片上传',   
          url: 'up.php',   
          reset_on_hide: false,   
          allow_close_on_upload: true
  });
   dialog.show();
 	});
 	
 	
 	</script>
 	<div id=show-button></div>
</body>

?

?上面这段代码是这个组件运行时的代码,对照改下路径,类型,就可以使用了!

?不过经过测试,不能使用ext的js,因为这个组件重写了ext的底层代码,不然就会报一些非常莫名奇妙的错误!

?

?

由于不能贴图,所以也不太好描述,如果感兴趣,可以下来看看,学习下!

1 楼 kimmking 2010-10-16  
Ext.ux.UploadDialog.Dialog
是extjs的开发者提供的ux,兼容性很好。
2.0时代就有了,3.x略微调整下酒可以了。